mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-19 11:43:30 +00:00
add strangers section to chats sidebar
This commit is contained in:
parent
5ce9fa515a
commit
9a09a04a5d
@ -6,7 +6,10 @@ import { ChatsListSelfItem } from '@app/chat/components/self';
|
|||||||
|
|
||||||
import { getChats } from '@libs/storage';
|
import { getChats } from '@libs/storage';
|
||||||
|
|
||||||
|
import { StrangersIcon } from '@shared/icons';
|
||||||
|
|
||||||
import { useAccount } from '@utils/hooks/useAccount';
|
import { useAccount } from '@utils/hooks/useAccount';
|
||||||
|
import { compactNumber } from '@utils/number';
|
||||||
|
|
||||||
export function ChatsList() {
|
export function ChatsList() {
|
||||||
const { account } = useAccount();
|
const { account } = useAccount();
|
||||||
@ -15,11 +18,7 @@ export function ChatsList() {
|
|||||||
data: chats,
|
data: chats,
|
||||||
isFetching,
|
isFetching,
|
||||||
} = useQuery(['chats'], async () => {
|
} = useQuery(['chats'], async () => {
|
||||||
const chats = await getChats();
|
return await getChats();
|
||||||
const sorted = chats.sort(
|
|
||||||
(a, b) => parseInt(a.new_messages) - parseInt(b.new_messages)
|
|
||||||
);
|
|
||||||
return sorted;
|
|
||||||
});
|
});
|
||||||
|
|
||||||
if (status === 'loading') {
|
if (status === 'loading') {
|
||||||
@ -39,7 +38,6 @@ export function ChatsList() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col">
|
<div className="flex flex-col">
|
||||||
<NewMessageModal />
|
|
||||||
{account ? (
|
{account ? (
|
||||||
<ChatsListSelfItem data={account} />
|
<ChatsListSelfItem data={account} />
|
||||||
) : (
|
) : (
|
||||||
@ -48,11 +46,25 @@ export function ChatsList() {
|
|||||||
<div className="h-3 w-full animate-pulse rounded-sm bg-zinc-800" />
|
<div className="h-3 w-full animate-pulse rounded-sm bg-zinc-800" />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{chats.map((item) => {
|
{chats.follows.map((item) => {
|
||||||
if (account.pubkey !== item.sender_pubkey) {
|
if (account.pubkey !== item.sender_pubkey) {
|
||||||
return <ChatsListItem key={item.sender_pubkey} data={item} />;
|
return <ChatsListItem key={item.sender_pubkey} data={item} />;
|
||||||
}
|
}
|
||||||
})}
|
})}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5"
|
||||||
|
>
|
||||||
|
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
|
||||||
|
<StrangersIcon className="h-3 w-3 text-zinc-200" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h5 className="font-medium text-zinc-400">
|
||||||
|
{compactNumber.format(chats.unknown)} strangers
|
||||||
|
</h5>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
<NewMessageModal />
|
||||||
{isFetching && (
|
{isFetching && (
|
||||||
<div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5">
|
<div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5">
|
||||||
<div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-zinc-800" />
|
<div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-zinc-800" />
|
||||||
|
@ -36,7 +36,7 @@ export function NewMessageModal() {
|
|||||||
className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5"
|
className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5"
|
||||||
>
|
>
|
||||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
|
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
|
||||||
<PlusIcon width={12} height={12} className="text-zinc-500" />
|
<PlusIcon className="h-3 w-3 text-zinc-200" />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h5 className="font-medium text-zinc-400">New chat</h5>
|
<h5 className="font-medium text-zinc-400">New chat</h5>
|
||||||
|
@ -3,7 +3,7 @@ import destr from 'destr';
|
|||||||
import Database from 'tauri-plugin-sql-api';
|
import Database from 'tauri-plugin-sql-api';
|
||||||
|
|
||||||
import { getParentID } from '@utils/transform';
|
import { getParentID } from '@utils/transform';
|
||||||
import { LumeEvent } from '@utils/types';
|
import { Chats, LumeEvent } from '@utils/types';
|
||||||
|
|
||||||
let db: null | Database = null;
|
let db: null | Database = null;
|
||||||
|
|
||||||
@ -295,11 +295,30 @@ export async function getChannelUsers(channel_id: string) {
|
|||||||
export async function getChats() {
|
export async function getChats() {
|
||||||
const db = await connect();
|
const db = await connect();
|
||||||
const account = await getActiveAccount();
|
const account = await getActiveAccount();
|
||||||
const result: any = await db.select(
|
const follows =
|
||||||
|
typeof account.follows === 'string' ? JSON.parse(account.follows) : account.follows;
|
||||||
|
|
||||||
|
const chats: { follows: Array<Chats> | null; unknown: number } = {
|
||||||
|
follows: [],
|
||||||
|
unknown: 0,
|
||||||
|
};
|
||||||
|
|
||||||
|
let result: Array<Chats> = await db.select(
|
||||||
`SELECT DISTINCT sender_pubkey FROM chats WHERE receiver_pubkey = "${account.pubkey}" ORDER BY created_at DESC;`
|
`SELECT DISTINCT sender_pubkey FROM chats WHERE receiver_pubkey = "${account.pubkey}" ORDER BY created_at DESC;`
|
||||||
);
|
);
|
||||||
const newArr: any = result.map((v) => ({ ...v, new_messages: 0 }));
|
|
||||||
return newArr;
|
result = result.map((v) => ({ ...v, new_messages: 0 }));
|
||||||
|
result = result.sort((a, b) => a.new_messages - b.new_messages);
|
||||||
|
|
||||||
|
chats.follows = result.filter((el) => {
|
||||||
|
return follows.some((i) => {
|
||||||
|
return i === el.sender_pubkey;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
chats.unknown = result.length - chats.follows.length;
|
||||||
|
|
||||||
|
return chats;
|
||||||
}
|
}
|
||||||
|
|
||||||
// get chat messages
|
// get chat messages
|
||||||
|
@ -45,4 +45,5 @@ export * from './follow';
|
|||||||
export * from './unfollow';
|
export * from './unfollow';
|
||||||
export * from './reaction';
|
export * from './reaction';
|
||||||
export * from './thread';
|
export * from './thread';
|
||||||
|
export * from './strangers';
|
||||||
// @endindex
|
// @endindex
|
||||||
|
22
src/shared/icons/strangers.tsx
Normal file
22
src/shared/icons/strangers.tsx
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
import { SVGProps } from 'react';
|
||||||
|
|
||||||
|
export function StrangersIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="1.5"
|
||||||
|
d="M17.75 19.25h3.673c.581 0 1.045-.496.947-1.07-.531-3.118-2.351-5.43-5.37-5.43-.446 0-.866.05-1.26.147M11.25 7a3.25 3.25 0 11-6.5 0 3.25 3.25 0 016.5 0zm8.5.5a2.75 2.75 0 11-5.5 0 2.75 2.75 0 015.5 0zM1.87 19.18c.568-3.68 2.647-6.43 6.13-6.43 3.482 0 5.561 2.75 6.13 6.43.088.575-.375 1.07-.956 1.07H2.825c-.58 0-1.043-.495-.955-1.07z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
}
|
17
src/utils/types.d.ts
vendored
Normal file
17
src/utils/types.d.ts
vendored
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
import { NDKEvent } from '@nostr-dev-kit/ndk';
|
||||||
|
|
||||||
|
export interface LumeEvent extends NDKEvent {
|
||||||
|
event_id: string;
|
||||||
|
parent_id: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Chats {
|
||||||
|
id: string;
|
||||||
|
event_id: string;
|
||||||
|
receiver_pubkey: string;
|
||||||
|
sender_pubkey: string;
|
||||||
|
content: string;
|
||||||
|
tags: string[][];
|
||||||
|
created_at: number;
|
||||||
|
new_messages: number;
|
||||||
|
}
|
@ -1,6 +0,0 @@
|
|||||||
import { NDKEvent } from '@nostr-dev-kit/ndk';
|
|
||||||
|
|
||||||
export interface LumeEvent extends NDKEvent {
|
|
||||||
event_id: string;
|
|
||||||
parent_id: string;
|
|
||||||
}
|
|
Loading…
Reference in New Issue
Block a user