From e74ebceb9a0ac2238e3ce29bc537453267504c7a Mon Sep 17 00:00:00 2001
From: Stef Coenen <stef@thebrownfox.be>
Date: Tue, 22 Oct 2024 15:03:37 +0200
Subject: [PATCH] Refactored comon fields from conversation group editors;

---
 .../Sidenav/ConversationGroupFIelds.tsx       | 61 ++++++++++++++++++
 .../Sidenav/EditConversationGroup.tsx         | 50 ++-------------
 .../Sidenav/NewConversationGroup.tsx          | 64 ++++---------------
 .../src/components/Chat/Detail/ChatInfo.tsx   | 25 ++++----
 4 files changed, 94 insertions(+), 106 deletions(-)
 create mode 100644 packages/chat-app/src/components/Chat/Conversations/Sidenav/ConversationGroupFIelds.tsx

diff --git a/packages/chat-app/src/components/Chat/Conversations/Sidenav/ConversationGroupFIelds.tsx b/packages/chat-app/src/components/Chat/Conversations/Sidenav/ConversationGroupFIelds.tsx
new file mode 100644
index 00000000..21646787
--- /dev/null
+++ b/packages/chat-app/src/components/Chat/Conversations/Sidenav/ConversationGroupFIelds.tsx
@@ -0,0 +1,61 @@
+import { Input, t, useAllContacts } from '@homebase-id/common-app';
+import { useState } from 'react';
+import { SingleConversationItem } from '../Item/ConversationItem';
+
+export const GroupContactSearch = ({
+  addContact,
+  defaultValue,
+}: {
+  addContact: (newOdinId: string) => void;
+  defaultValue: string[];
+}) => {
+  const [query, setQuery] = useState<string | undefined>(undefined);
+
+  const { data: contacts } = useAllContacts(true);
+  const contactResults = contacts
+    ? contacts
+        .map((dsr) => dsr.fileMetadata.appData.content)
+        .filter(
+          (contact) =>
+            contact.odinId &&
+            (!query ||
+              contact.odinId?.includes(query) ||
+              contact.name?.displayName?.includes(query))
+        )
+        .filter((contact) => contact.odinId && !defaultValue.includes(contact.odinId))
+    : [];
+
+  return (
+    <>
+      <form onSubmit={(e) => e.preventDefault()} className="w-full">
+        <div className="flex w-full flex-col gap-2 p-5">
+          <Input
+            onChange={(e) => setQuery(e.target.value)}
+            defaultValue={query}
+            className="w-full"
+            placeholder={t('Search for contacts')}
+          />
+        </div>
+      </form>
+      {contactResults?.length ? (
+        <div className="flex-grow overflow-auto">
+          {contactResults.map((result, index) => (
+            <SingleConversationItem
+              odinId={result.odinId as string}
+              isActive={false}
+              key={result.odinId || index}
+              onClick={() => {
+                if (!result.odinId) return;
+                addContact(result.odinId);
+              }}
+            />
+          ))}
+        </div>
+      ) : (
+        <div className="flex flex-grow items-center justify-center p-5">
+          <p className="text-slate-400">{t('No contacts found')}</p>
+        </div>
+      )}
+    </>
+  );
+};
diff --git a/packages/chat-app/src/components/Chat/Conversations/Sidenav/EditConversationGroup.tsx b/packages/chat-app/src/components/Chat/Conversations/Sidenav/EditConversationGroup.tsx
index 42acbaf0..41918579 100644
--- a/packages/chat-app/src/components/Chat/Conversations/Sidenav/EditConversationGroup.tsx
+++ b/packages/chat-app/src/components/Chat/Conversations/Sidenav/EditConversationGroup.tsx
@@ -10,14 +10,13 @@ import {
   Label,
   NotFound,
   t,
-  useAllContacts,
   useDotYouClient,
   useIntroductions,
 } from '@homebase-id/common-app';
 import { Save, Times } from '@homebase-id/common-app/icons';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useConversation } from '../../../../hooks/chat/useConversation';
-import { SingleConversationItem } from '../Item/ConversationItem';
+import { GroupContactSearch } from './ConversationGroupFIelds';
 
 export const EditConversationGroup = () => {
   const identity = useDotYouClient().getIdentity();
@@ -28,26 +27,11 @@ export const EditConversationGroup = () => {
   } = useConversation({ conversationId: conversationKey });
   const { mutate: introduceIdentities } = useIntroductions().introduceIdentities;
 
-  const [query, setQuery] = useState<string | undefined>(undefined);
-
   const [newRecipients, setNewRecipients] = useState<string[]>([]);
   const [groupTitle, setGroupTitle] = useState<string>();
 
   const navigate = useNavigate();
 
-  const { data: contacts } = useAllContacts(true);
-  const contactResults = contacts
-    ? contacts
-        .map((dsr) => dsr.fileMetadata.appData.content)
-        .filter(
-          (contact) =>
-            contact.odinId &&
-            (!query ||
-              contact.odinId?.includes(query) ||
-              contact.name?.displayName?.includes(query))
-        )
-    : [];
-
   const doUpdate = async () => {
     if (!conversation) return;
     const newConversation = { ...conversation };
@@ -143,32 +127,12 @@ export const EditConversationGroup = () => {
         </div>
       </div>
 
-      <form onSubmit={(e) => e.preventDefault()} className="w-full">
-        <div className="flex w-full flex-col gap-2 p-5">
-          <Input
-            onChange={(e) => setQuery(e.target.value)}
-            defaultValue={query}
-            className="w-full"
-            placeholder={t('Search for contacts')}
-          />
-        </div>
-      </form>
-      <div className="flex-grow overflow-auto">
-        {contactResults.map((result, index) => (
-          <SingleConversationItem
-            odinId={result.odinId as string}
-            isActive={false}
-            key={result.odinId || index}
-            onClick={() => {
-              if (!result.odinId) return;
-              setNewRecipients([
-                ...newRecipients.filter((x) => x !== result.odinId),
-                result.odinId,
-              ]);
-            }}
-          />
-        ))}
-      </div>
+      <GroupContactSearch
+        addContact={(newContact) => {
+          setNewRecipients([...newRecipients.filter((x) => x !== newContact), newContact]);
+        }}
+        defaultValue={[...newRecipients, ...conversation.fileMetadata.appData.content.recipients]}
+      />
     </ErrorBoundary>
   );
 };
diff --git a/packages/chat-app/src/components/Chat/Conversations/Sidenav/NewConversationGroup.tsx b/packages/chat-app/src/components/Chat/Conversations/Sidenav/NewConversationGroup.tsx
index e3f4a6f2..9b93f068 100644
--- a/packages/chat-app/src/components/Chat/Conversations/Sidenav/NewConversationGroup.tsx
+++ b/packages/chat-app/src/components/Chat/Conversations/Sidenav/NewConversationGroup.tsx
@@ -8,42 +8,24 @@ import {
   Input,
   Label,
   t,
-  useAllContacts,
 } from '@homebase-id/common-app';
 import { Arrow, Times } from '@homebase-id/common-app/icons';
 import { useNavigate } from 'react-router-dom';
-import { ContactFile } from '@homebase-id/js-lib/network';
 import { useConversation } from '../../../../hooks/chat/useConversation';
-import { SingleConversationItem } from '../Item/ConversationItem';
+import { GroupContactSearch } from './ConversationGroupFIelds';
 
 export const NewConversationGroup = () => {
-  const [query, setQuery] = useState<string | undefined>(undefined);
-
   const [isStepOne, setIsStepOne] = useState<boolean>(true);
-  const [newRecipients, setNewRecipients] = useState<ContactFile[]>([]);
+  const [newRecipients, setNewRecipients] = useState<string[]>([]);
   const [groupTitle, setGroupTitle] = useState<string>();
 
   const navigate = useNavigate();
 
-  const { data: contacts } = useAllContacts(true);
-  const contactResults = contacts
-    ? contacts
-        .map((dsr) => dsr.fileMetadata.appData.content)
-        .filter(
-          (contact) =>
-            contact.odinId &&
-            (!query ||
-              contact.odinId?.includes(query) ||
-              contact.name?.displayName?.includes(query))
-        )
-    : [];
-
   const { mutateAsync: createNew, status: createStatus } = useConversation().create;
   const doCreate = async () => {
-    const recipients = newRecipients.map((x) => x.odinId).filter(Boolean) as string[];
-    if (!recipients?.length) return;
+    if (!newRecipients?.length) return;
     try {
-      const result = await createNew({ recipients: recipients, title: groupTitle });
+      const result = await createNew({ recipients: newRecipients, title: groupTitle });
       navigate(`${CHAT_ROOT_PATH}/${result.newConversationId}`);
     } catch (e) {
       console.error(e);
@@ -63,17 +45,15 @@ export const NewConversationGroup = () => {
               {newRecipients.map((recipient, index) => (
                 <div
                   className="flex flex-row items-center gap-1 rounded-lg bg-background px-2 py-1"
-                  key={recipient.odinId || index}
+                  key={recipient || index}
                 >
-                  <ConnectionImage odinId={recipient.odinId} size="xs" />
-                  <ConnectionName odinId={recipient.odinId} />
+                  <ConnectionImage odinId={recipient} size="xs" />
+                  <ConnectionName odinId={recipient} />
                   <ActionButton
                     icon={Times}
                     type="mute"
                     className="ml-auto"
-                    onClick={() =>
-                      setNewRecipients(newRecipients.filter((x) => x.odinId !== recipient.odinId))
-                    }
+                    onClick={() => setNewRecipients(newRecipients.filter((x) => x !== recipient))}
                   />
                 </div>
               ))}
@@ -115,28 +95,12 @@ export const NewConversationGroup = () => {
         </div>
       ) : null}
 
-      <form onSubmit={(e) => e.preventDefault()} className="w-full">
-        <div className="flex w-full flex-col gap-2 p-5">
-          <Input
-            onChange={(e) => setQuery(e.target.value)}
-            defaultValue={query}
-            className="w-full"
-            placeholder={t('Search for contacts')}
-          />
-        </div>
-      </form>
-      <div className="flex-grow overflow-auto">
-        {contactResults.map((result, index) => (
-          <SingleConversationItem
-            odinId={result.odinId as string}
-            isActive={false}
-            key={result.odinId || index}
-            onClick={() =>
-              setNewRecipients([...newRecipients.filter((x) => x.odinId !== result.odinId), result])
-            }
-          />
-        ))}
-      </div>
+      <GroupContactSearch
+        addContact={(newContact) => {
+          setNewRecipients([...newRecipients.filter((x) => x !== newContact), newContact]);
+        }}
+        defaultValue={newRecipients}
+      />
     </ErrorBoundary>
   );
 };
diff --git a/packages/chat-app/src/components/Chat/Detail/ChatInfo.tsx b/packages/chat-app/src/components/Chat/Detail/ChatInfo.tsx
index 1a9d84f8..0b336186 100644
--- a/packages/chat-app/src/components/Chat/Detail/ChatInfo.tsx
+++ b/packages/chat-app/src/components/Chat/Detail/ChatInfo.tsx
@@ -94,7 +94,18 @@ export const ChatInfo = ({
       </div>
       {recipients?.length > 1 ? (
         <div className="mt-10">
-          <p className="mb-4 text-lg">{t('Recipients')}</p>
+          <div className="flex flex-col items-center justify-between sm:flex-row">
+            <p className="mb-4 text-lg">{t('Recipients')}</p>
+            {isAdmin ? (
+              <ActionLink
+                type="mute"
+                size="none"
+                href={`${CHAT_ROOT_PATH}/${conversation.fileMetadata.appData.uniqueId}/edit`}
+              >
+                {t('Edit')}
+              </ActionLink>
+            ) : null}
+          </div>
           <div className="flex flex-col gap-4">
             {recipients.map((recipient) => (
               <a
@@ -119,18 +130,6 @@ export const ChatInfo = ({
           </div>
         </div>
       ) : null}
-
-      {isAdmin ? (
-        <div className="flex flex-row-reverse">
-          <ActionLink
-            type="secondary"
-            href={`${CHAT_ROOT_PATH}/${conversation.fileMetadata.appData.uniqueId}/edit`}
-            icon={Plus}
-          >
-            {t('Add')}
-          </ActionLink>
-        </div>
-      ) : null}
     </DialogWrapper>
   );