From a4e03a59ebf4c4c964414439a99655cfd7335a48 Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Tue, 25 Jul 2023 16:12:52 +0700
Subject: [PATCH] add unknown chats modal
---
src/app/chats/components/list.tsx | 35 +++-----
src/app/chats/components/modal.tsx | 6 +-
src/app/chats/components/unknowns.tsx | 117 ++++++++++++++++++++++++++
src/libs/storage.tsx | 8 +-
4 files changed, 139 insertions(+), 27 deletions(-)
create mode 100644 src/app/chats/components/unknowns.tsx
diff --git a/src/app/chats/components/list.tsx b/src/app/chats/components/list.tsx
index 27afb3c2..14b7dbd6 100644
--- a/src/app/chats/components/list.tsx
+++ b/src/app/chats/components/list.tsx
@@ -1,15 +1,15 @@
import { useQuery } from '@tanstack/react-query';
+import { useCallback } from 'react';
import { ChatsListItem } from '@app/chats/components/item';
import { NewMessageModal } from '@app/chats/components/modal';
import { ChatsListSelfItem } from '@app/chats/components/self';
+import { UnknownsModal } from '@app/chats/components/unknowns';
import { getChats } from '@libs/storage';
-import { StrangersIcon } from '@shared/icons';
-
import { useAccount } from '@utils/hooks/useAccount';
-import { compactNumber } from '@utils/number';
+import { Chats } from '@utils/types';
export function ChatsList() {
const { account } = useAccount();
@@ -21,6 +21,15 @@ export function ChatsList() {
return await getChats();
});
+ const renderItem = useCallback(
+ (item: Chats) => {
+ if (account.pubkey !== item.sender_pubkey) {
+ return ;
+ }
+ },
+ [chats]
+ );
+
if (status === 'loading') {
return (
@@ -46,24 +55,8 @@ export function ChatsList() {
)}
- {chats.follows.map((item) => {
- if (account.pubkey !== item.sender_pubkey) {
- return ;
- }
- })}
-
+ {chats.follows.map((item) => renderItem(item))}
+ {chats.unknowns.length > 0 && }
{isFetching && (
diff --git a/src/app/chats/components/modal.tsx b/src/app/chats/components/modal.tsx
index 5a5f26dd..3e3ba19c 100644
--- a/src/app/chats/components/modal.tsx
+++ b/src/app/chats/components/modal.tsx
@@ -78,9 +78,9 @@ export function NewMessageModal() {
@@ -104,7 +104,7 @@ export function NewMessageModal() {
diff --git a/src/app/chats/components/unknowns.tsx b/src/app/chats/components/unknowns.tsx
new file mode 100644
index 00000000..f51ced55
--- /dev/null
+++ b/src/app/chats/components/unknowns.tsx
@@ -0,0 +1,117 @@
+import { Dialog, Transition } from '@headlessui/react';
+import { Fragment, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { User } from '@app/auth/components/user';
+
+import { CancelIcon, StrangersIcon } from '@shared/icons';
+
+import { compactNumber } from '@utils/number';
+import { Chats } from '@utils/types';
+
+export function UnknownsModal({ data }: { data: Chats[] }) {
+ const navigate = useNavigate();
+ const [isOpen, setIsOpen] = useState(false);
+
+ const closeModal = () => {
+ setIsOpen(false);
+ };
+
+ const openModal = () => {
+ setIsOpen(true);
+ };
+
+ const openChat = (pubkey: string) => {
+ closeModal();
+ navigate(`/app/chats/${pubkey}`);
+ };
+
+ return (
+ <>
+
+
+
+
+ >
+ );
+}
diff --git a/src/libs/storage.tsx b/src/libs/storage.tsx
index d1d1c285..36ad79c8 100644
--- a/src/libs/storage.tsx
+++ b/src/libs/storage.tsx
@@ -308,9 +308,9 @@ export async function getChats() {
const follows =
typeof account.follows === 'string' ? JSON.parse(account.follows) : account.follows;
- const chats: { follows: Array | null; unknown: number } = {
+ const chats: { follows: Array | null; unknowns: Array | null } = {
follows: [],
- unknown: 0,
+ unknowns: [],
};
let result: Array = await db.select(
@@ -326,7 +326,9 @@ export async function getChats() {
});
});
- chats.unknown = result.length - chats.follows.length;
+ chats.unknowns = result.filter(
+ (el) => !chats.follows.includes(el) && el.sender_pubkey !== account.pubkey
+ );
return chats;
}