Fix attachment issue

the-deep · Aug 30, 2024 · 21d9c13 · 21d9c13
1 parent 4b7f1af
commit 21d9c13
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 21 deletions.
diff --git a/app/components/LeftPaneEntries/index.tsx b/app/components/LeftPaneEntries/index.tsx
@@ -149,6 +149,7 @@ interface Props {
     entries: EntryInput[] | undefined | null;
     activeEntry?: string;
     onEntryClick?: (entryId: string) => void;
+    onAttachmentClick: (attachment: LeadPreviewAttachmentType) => void;
     onExcerptChange?: (entryClientId: string, newExcerpt: string | undefined) => void;
     onEntryDelete?: (entryClientId: string) => void;
     onEntryRestore?: (entryClientId: string) => void;
@@ -165,6 +166,7 @@ interface Props {
     projectId: string | undefined;
     defaultTab?: 'entries' | 'simplified' | 'original' | 'visuals';
     frameworkDetails?: Framework;
+    leadAttachmentsMap: LeadAttachmentsMap;
     activeTabRef?: React.MutableRefObject<{
         setActiveTab: React.Dispatch<React.SetStateAction<TabOptions>>;
     } | null>;
@@ -201,6 +203,8 @@ function LeftPane(props: Props) {
         frameworkDetails,
         onAssistedEntryAdd,
         entryAttachmentsMap,
+        leadAttachmentsMap,
+        onAttachmentClick,
     } = props;
 
     const alert = useAlert();
@@ -232,8 +236,6 @@ function LeftPane(props: Props) {
             : defaultTab,
     );
 
-    const [leadAttachmentsMap, setLeadAttachmentsMap] = useState<LeadAttachmentsMap>({});
-
     const [
         autoEntriesModalShown,
         showAutoEntriesModal,
@@ -396,23 +398,6 @@ function LeftPane(props: Props) {
         }
     }, [leadId, onEntryCreate]);
 
-    const handleAttachmentClick = useCallback((attachment: LeadPreviewAttachmentType) => {
-        if (onEntryCreate) {
-            onEntryCreate({
-                clientId: randomString(),
-                entryType: 'ATTACHMENT',
-                lead: leadId,
-                leadAttachment: attachment.id,
-                excerpt: '',
-                droppedExcerpt: '',
-            });
-            setLeadAttachmentsMap((oldValue) => ({
-                ...oldValue,
-                [attachment.id]: attachment,
-            }));
-        }
-    }, [leadId, onEntryCreate]);
-
     const handleExcerptAddFromOriginal = useCallback((selectedText: string | undefined) => {
         if (onEntryCreate) {
             onEntryCreate({
@@ -506,12 +491,12 @@ function LeftPane(props: Props) {
 
         return ({
             type: 'visual-item' as const,
-            onClick: handleAttachmentClick,
+            onClick: onAttachmentClick,
             disableClick: isEntrySelectionActive,
             attachment,
         });
     }, [
-        handleAttachmentClick,
+        onAttachmentClick,
         onApproveButtonClick,
         onDiscardButtonClick,
         isEntrySelectionActive,

diff --git a/app/views/EntryEdit/index.tsx b/app/views/EntryEdit/index.tsx
@@ -68,6 +68,8 @@ import {
     BulkUpdateEntriesMutationVariables,
     LeadUpdateMutation,
     LeadUpdateMutationVariables,
+    LeadPreviewForTextQuery,
+    LeadPreviewAttachmentType,
 } from '#generated/types';
 import { BasicOrganization } from '#components/selections/NewOrganizationSelectInput';
 import { BasicProjectUser } from '#components/selections/ProjectUserSelectInput';
@@ -112,6 +114,9 @@ const UPDATE_LEN = 100;
 const entryKeySelector = (e: PartialEntryType) => e.clientId;
 export type Lead = NonNullable<NonNullable<LeadEntriesQuery['project']>['lead']>;
 
+type LeadAttachment = NonNullable<NonNullable<NonNullable<LeadPreviewForTextQuery['project']>['leadPreviewAttachments']>['results']>[number];
+export type LeadAttachmentsMap = { [key: string]: LeadAttachment | undefined };
+
 function transformEntry(entry: Entry): EntryInputType {
     // FIXME: make this re-usable
     return removeNull({
@@ -368,6 +373,8 @@ function EntryEdit(props: Props) {
         setEntryAttachmentMap,
     ] = useState<EntryAttachmentsMap | undefined>();
 
+    const [leadAttachmentsMap, setLeadAttachmentsMap] = useState<LeadAttachmentsMap>({});
+
     const [
         updateLead,
         { loading: leadUpdatePending },
@@ -1041,6 +1048,23 @@ function EntryEdit(props: Props) {
         [onEntryFieldChange, clearRestorePoint],
     );
 
+    const handleAttachmentClick = useCallback((attachment: LeadPreviewAttachmentType) => {
+        if (handleEntryCreate) {
+            handleEntryCreate({
+                clientId: randomString(),
+                entryType: 'ATTACHMENT',
+                lead: leadId,
+                leadAttachment: attachment.id,
+                excerpt: '',
+                droppedExcerpt: '',
+            });
+            setLeadAttachmentsMap((oldValue) => ({
+                ...oldValue,
+                [attachment.id]: attachment,
+            }));
+        }
+    }, [leadId, handleEntryCreate]);
+
     // NOTE: we are creating a map of index and value because we are iterating
     // over widgets but modifying attributes
     const attributesMap = useMemo(() => (
@@ -1639,6 +1663,7 @@ function EntryEdit(props: Props) {
                                     onEntryDelete={handleEntryDelete}
                                     onEntryRestore={handleEntryRestore}
                                     onExcerptChange={handleExcerptChange}
+                                    onAttachmentClick={handleAttachmentClick}
                                     lead={lead}
                                     leadId={leadId}
                                     listComponentRef={primaryPageListComponentRef}
@@ -1647,6 +1672,7 @@ function EntryEdit(props: Props) {
                                     isEntrySelectionActive={isEntrySelectionActive}
                                     entriesError={entriesErrorStateMap}
                                     frameworkDetails={frameworkDetails ?? undefined}
+                                    leadAttachmentsMap={leadAttachmentsMap}
                                 />
                                 <Container
                                     className={_cs(className, styles.sections)}
@@ -1739,6 +1765,8 @@ function EntryEdit(props: Props) {
                                     entriesError={entriesErrorStateMap}
                                     activeTabRef={secondaryPageLeftPaneRef}
                                     frameworkDetails={frameworkDetails ?? undefined}
+                                    onAttachmentClick={handleAttachmentClick}
+                                    leadAttachmentsMap={leadAttachmentsMap}
                                 />
                                 <Container
                                     className={styles.rightContainer}