fix(ipfs): representation of text from search/or cid content (cybercongress#1042)

Author: dasein108

src/components/contentIpfs/contentIpfs.tsx

@@ -34,7 +34,7 @@ function DownloadableItem({ cid, search }: { cid: string; search?: boolean }) {
 
 type ContentTabProps = {
   details: IPFSContentDetails;
-  content: IPFSContentMaybe;
+  content?: IPFSContentMaybe;
   cid: string;
   search?: boolean;
 };

src/containers/ipfs/components/ContentIpfsCid.tsx

@@ -6,6 +6,7 @@ type Props = {
   loading?: boolean;
   statusFetching?: string;
   status?: QueueItemStatus;
+  cid: string;
 };
 
 // TODO: refactor this component

src/containers/ipfs/ipfs.tsx

@@ -1,50 +1,43 @@
 import { useParams } from 'react-router-dom';
 import ContentIpfs from 'src/components/contentIpfs/contentIpfs';
 import useQueueIpfsContent from 'src/hooks/useQueueIpfsContent';
-import { useEffect, useState } from 'react';
-import { useQueryClient } from 'src/contexts/queryClient';
+import { useEffect, useMemo, useState } from 'react';
 import { useAdviser } from 'src/features/adviser/context';
 import { encodeSlash } from 'src/utils/utils';
 import { PATTERN_IPFS_HASH } from 'src/utils/config';
 import { getIpfsHash } from 'src/utils/search/utils';
 import { parseArrayLikeToDetails } from 'src/services/ipfs/utils/content';
 import { IPFSContentDetails } from 'src/services/ipfs/ipfs';
+import { useBackend } from 'src/contexts/backend';
 import { Dots, MainContainer } from '../../components';
 import ContentIpfsCid from './components/ContentIpfsCid';
 import styles from './IPFS.module.scss';
 import SearchResults from '../Search/SearchResults';
 import AdviserMeta from './components/AdviserMeta/AdviserMeta';
-import { useBackend } from 'src/contexts/backend';
 
 function Ipfs() {
   const { query = '' } = useParams();
-
-  const [cid, setKeywordHash] = useState<string>('');
+  const [cid, setCid] = useState<string>('');
 
   const { fetchParticle, status, content } = useQueueIpfsContent(cid);
   const { ipfsNode } = useBackend();
   const [ipfsDataDetails, setIpfsDatDetails] = useState<IPFSContentDetails>();
 
-  const queryClient = useQueryClient();
   const { setAdviser } = useAdviser();
 
+  const isText = useMemo(() => !query.match(PATTERN_IPFS_HASH), [query]);
+
   useEffect(() => {
-    (async () => {
-      if (cid !== query) {
-        if (query.match(PATTERN_IPFS_HASH)) {
-          setKeywordHash(query);
-        } else {
-          const cidFromQuery = (await getIpfsHash(
-            encodeSlash(query)
-          )) as string;
-          if (cidFromQuery !== cid) {
-            await ipfsNode?.addContent(query);
-            setKeywordHash(cidFromQuery);
-          }
-        }
-      }
-    })();
-  }, [cid, query, ipfsNode]);
+    if (!isText) {
+      setCid(query);
+    } else {
+      (async () => {
+        const cidFromQuery = (await getIpfsHash(encodeSlash(query))) as string;
+        await ipfsNode?.addContent(query);
+        setCid(cidFromQuery);
+      })();
+    }
+  }, [isText, query, ipfsNode]);
 
   useEffect(() => {
     (async () => {
@@ -53,21 +46,17 @@ function Ipfs() {
   }, [cid, fetchParticle]);
 
   useEffect(() => {
-    // TODO: cover case with content === 'availableDownload'
-    // && !content?.availableDownload
-
-    if (status !== 'completed') {
-      return;
+    if (status === 'completed') {
+      (async () => {
+        const details = await parseArrayLikeToDetails(
+          content,
+          cid
+          // (progress: number) => console.log(`${cid} progress: ${progress}`)
+        );
+        setIpfsDatDetails(details);
+      })();
     }
-    (async () => {
-      const details = await parseArrayLikeToDetails(
-        content,
-        cid
-        // (progress: number) => console.log(`${cid} progress: ${progress}`)
-      );
-      setIpfsDatDetails(details);
-    })();
-  }, [content, status, cid, queryClient]);
+  }, [content, status, cid]);
 
   useEffect(() => {
     if (!status) {
@@ -99,13 +88,22 @@ function Ipfs() {
     }
   }, [ipfsDataDetails, setAdviser, cid, content, status]);
 
-  console.debug(status, cid, content, ipfsDataDetails);
-
   return (
     <MainContainer width="62%" resetMaxWidth>
       <div className={styles.wrapper}>
-        {status === 'completed' && ipfsDataDetails !== null ? (
+        {status === 'completed' && ipfsDataDetails ? (
           <ContentIpfs content={content} details={ipfsDataDetails} cid={cid} />
+        ) : isText ? (
+          <ContentIpfs
+            details={{
+              type: 'text',
+              text: query,
+              content: query,
+              cid,
+              gateway: false,
+            }}
+            cid={cid}
+          />
         ) : (
           <ContentIpfsCid
             loading={status === 'executing'}