fix disallowed varying hook order

Author: matthme

web/src/components/ExpandedViewMode/ExpandedViewMode.connector.tsx

@@ -113,10 +113,11 @@ const ConnectedExpandedViewMode: React.FC<ConnectedExpandedViewModeProps> = ({
     // Run only once on mount when initial props are provided
   }, [initialProjectId, initialOutcomeActionHash, dispatch, projectId])
 
-  const { attachmentsInfo } = outcome && projectId ? useAttachments({
+  const { attachmentsInfo } = useAttachments({
     projectId: projectId, // Use the determined projectId
     outcome: outcome,
-  }) : { attachmentsInfo: [] };
+    useFallback: !outcome || !projectId // if this is true it will return an empty default value
+  });
 
   // Function to add attachments
   const addAttachment = async () => {

web/src/hooks/useAttachments.ts

@@ -19,9 +19,11 @@ export type AssetMeta = AssetLocationAndInfo & {
 export function useAttachments({
   projectId,
   outcome,
+  useFallback,
 }: {
   projectId: string
   outcome: ComputedOutcome
+  useFallback: boolean
 }) {
   if (!isWeaveContext()) {
     return {
@@ -30,17 +32,25 @@ export function useAttachments({
       error: null,
     }
   }
-  const cellIdWrapper = CellIdWrapper.fromCellIdString(projectId)
-  const wal: WAL = {
-    hrl: [cellIdWrapper.getDnaHash(), decodeHashFromBase64(outcome.actionHash)],
-    context: 'outcome',
-  }
   const [attachmentWALs, setAttachmentWALs] = useState<WAL[] | null>(null)
   const [attachmentsInfo, setAttachmentsInfo] = useState<AssetMeta[]>([])
   const [error, setError] = useState(null)
   const subscriptionRef = useRef<any>(null)
 
   useEffect(() => {
+    if (useFallback) {
+      setAttachmentWALs([])
+      setAttachmentsInfo([])
+      return
+    }
+    const cellIdWrapper = CellIdWrapper.fromCellIdString(projectId)
+    const wal: WAL = {
+      hrl: [
+        cellIdWrapper.getDnaHash(),
+        decodeHashFromBase64(outcome.actionHash),
+      ],
+      context: 'outcome',
+    }
     const fetchAssetInfo = async () => {
       const weaveClient = getWeaveClient()
 
@@ -49,7 +59,7 @@ export function useAttachments({
         subscriptionRef.current &&
         typeof subscriptionRef.current === 'function'
       ) {
-        const unsubscribe = subscriptionRef.current;
+        const unsubscribe = subscriptionRef.current
         unsubscribe()
       }
       subscriptionRef.current = null
@@ -96,12 +106,12 @@ export function useAttachments({
         subscriptionRef.current &&
         typeof subscriptionRef.current === 'function'
       ) {
-        const unsubscribe = subscriptionRef.current;
+        const unsubscribe = subscriptionRef.current
         unsubscribe()
       }
       subscriptionRef.current = null
     }
-  }, [projectId, outcome.actionHash]) // Dependencies that should trigger a refetch
+  }, [projectId, outcome?.actionHash]) // Dependencies that should trigger a refetch
 
   return { attachmentWALs, attachmentsInfo, error }
 }