updates

cybercongress · Oct 30, 2023 · afa2b46 · afa2b46
1 parent 079e9ff
commit afa2b46
Show file tree

Hide file tree

Showing 7 changed files with 158 additions and 130 deletions.
diff --git a/src/components/searchSnippet/index.jsx b/src/components/searchSnippet/index.jsx
@@ -41,6 +41,7 @@ function SearchSnippet({ cid, data, onClickRank }) {
   useEffect(() => {
     const getRank = async () => {
       if ((data.rank === undefined || data.rank === null) && queryClient) {
+        // use useRank hook
         const response = await queryClient.rank(cid);
 
         const rank = coinDecimals(parseFloat(response.rank));

diff --git a/src/containers/ipfs/IPFS.module.scss b/src/containers/ipfs/IPFS.module.scss
@@ -1,70 +1,3 @@
 .wrapper {
   min-height: 200px;
 }
-
-.meta {
-  min-width: 62vw;
-  font-size: 14px;
-  padding: 0 20px;
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-
-  @media (max-width: 768px) {
-    display: block;
-    text-align: center;
-
-    .left,
-    .right {
-      justify-content: center !important;
-    }
-  }
-
-  > * {
-    flex-grow: 1;
-  }
-
-  .left {
-    display: flex;
-    gap: 7px;
-    align-items: center;
-
-    span:first-of-type {
-      color: rgba(255, 255, 255, 0.5);
-      font-size: 14px;
-    }
-
-    .rank {
-      display: flex;
-      align-items: center;
-      gap: 5px;
-
-      color: rgba(221, 255, 255, 0.38);
-
-      font-size: 14px;
-
-      > span {
-        color: #f62bfd;
-        line-height: 23px;
-      }
-    }
-  }
-
-  .center {
-    display: flex;
-    justify-content: center;
-
-    .date {
-      margin-right: 10px;
-    }
-  }
-
-  .right {
-    display: flex;
-    justify-content: flex-end;
-    gap: 14px;
-
-    button {
-      opacity: 0.35;
-    }
-  }
-}
diff --git a/src/containers/ipfs/components/AdviserMeta/AdviserMeta.module.scss b/src/containers/ipfs/components/AdviserMeta/AdviserMeta.module.scss
@@ -0,0 +1,66 @@
+.meta {
+  min-width: 62vw;
+  font-size: 14px;
+  padding: 0 20px;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+
+  @media (max-width: 768px) {
+    display: block;
+    text-align: center;
+
+    .left,
+    .right {
+      justify-content: center !important;
+    }
+  }
+
+  > * {
+    flex-grow: 1;
+  }
+
+  .left {
+    display: flex;
+    gap: 7px;
+    align-items: center;
+
+    span:first-of-type {
+      color: rgba(255, 255, 255, 0.5);
+      font-size: 14px;
+    }
+
+    .rank {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+
+      color: rgba(221, 255, 255, 0.38);
+
+      font-size: 14px;
+
+      > span {
+        color: #f62bfd;
+        line-height: 23px;
+      }
+    }
+  }
+
+  .center {
+    display: flex;
+    justify-content: center;
+
+    .date {
+      margin-right: 10px;
+    }
+  }
+
+  .right {
+    display: flex;
+    justify-content: flex-end;
+    gap: 14px;
+
+    button {
+      opacity: 0.35;
+    }
+  }
+}
diff --git a/src/containers/ipfs/components/AdviserMeta/AdviserMeta.tsx b/src/containers/ipfs/components/AdviserMeta/AdviserMeta.tsx
@@ -0,0 +1,49 @@
+import { Rank, Account } from 'src/components';
+import { timeSince, formatCurrency } from 'src/utils/utils';
+import useGetCreator from '../../hooks/useGetCreator';
+import { PREFIXES } from '../metaInfo';
+import styles from './AdviserMeta.module.scss';
+import useRank from 'src/features/cyberlinks/rank/useRank';
+
+type Props = {
+  cid: string;
+  type: string | undefined;
+  size: number | undefined;
+};
+
+function AdviserMeta({ cid, type, size }: Props) {
+  const { creator } = useGetCreator(cid);
+  const rank = useRank(cid);
+
+  return (
+    <div className={styles.meta}>
+      <div className={styles.left}>
+        {type}
+
+        {!!rank && (
+          <div className={styles.rank}>
+            with rank
+            <span>{rank.toLocaleString().replaceAll(',', ' ')}</span>
+            <Rank hash={cid} rank={rank} />
+          </div>
+        )}
+      </div>
+      {creator && (
+        <div className={styles.center}>
+          <span className={styles.date}>
+            {timeSince(Date.now() - Date.parse(creator.timestamp))} ago
+          </span>
+          <Account sizeAvatar="20px" address={creator.address} avatar />
+        </div>
+      )}
+      <div className={styles.right}>
+        <span>
+          🟥 {size !== -1 ? formatCurrency(size, 'B', 0, PREFIXES) : 'unknown'}
+        </span>
+        <button disabled>🌓</button>
+      </div>
+    </div>
+  );
+}
+
+export default AdviserMeta;
diff --git a/src/containers/ipfs/ipfs.tsx b/src/containers/ipfs/ipfs.tsx
@@ -4,18 +4,16 @@ import useQueueIpfsContent from 'src/hooks/useQueueIpfsContent';
 import { useEffect, useState } from 'react';
 import { useQueryClient } from 'src/contexts/queryClient';
 import { useAdviser } from 'src/features/adviser/context';
-import { encodeSlash, formatCurrency, timeSince } from 'src/utils/utils';
-import { IPFSContentDetails } from 'src/utils/ipfs/ipfs';
+import { encodeSlash } from 'src/utils/utils';
 import { PATTERN_IPFS_HASH } from 'src/utils/config';
 import { getIpfsHash } from 'src/utils/search/utils';
-import { Account, Dots, MainContainer, Rank } from '../../components';
-import useGetCreator from './hooks/useGetCreator';
+import { parseArrayLikeToDetails } from 'src/services/ipfs/utils/content';
+import { IPFSContentDetails } from 'src/services/ipfs/ipfs';
+import { Dots, MainContainer } from '../../components';
 import ContentIpfsCid from './components/ContentIpfsCid';
 import styles from './IPFS.module.scss';
-import { PREFIXES } from './components/metaInfo';
 import SearchResults from '../Search/SearchResults';
-import { parseArrayLikeToDetails } from 'src/services/ipfs/utils/content';
-import cx from 'classnames';
+import AdviserMeta from './components/AdviserMeta/AdviserMeta';
 
 function Ipfs() {
   const { query = '' } = useParams();
@@ -25,11 +23,8 @@ function Ipfs() {
   );
 
   const { fetchParticle, status, content } = useQueueIpfsContent(cid);
-  const { creator } = useGetCreator(cid);
 
-  const [rankInfo, setRankInfo] = useState<number>();
-  const [ipfsDataDetails, setIpfsDatDetails] =
-    useState<IPFSContentDetails>(null);
+  const [ipfsDataDetails, setIpfsDatDetails] = useState<IPFSContentDetails>();
 
   const queryClient = useQueryClient();
   const { setAdviser } = useAdviser();
@@ -65,13 +60,14 @@ function Ipfs() {
         // (progress: number) => console.log(`${cid} progress: ${progress}`)
       );
       setIpfsDatDetails(details);
-
-      const response = await queryClient?.rank(cid);
-      setRankInfo(Number(response.rank));
     })();
   }, [content, status, cid, queryClient]);
 
   useEffect(() => {
+    if (!status) {
+      return;
+    }
+
     if (['error', 'timeout', 'not_found'].includes(status)) {
       setAdviser(`IPFS loading error, status: ${status}`, 'red');
     } else if (['pending', 'executing'].includes(status)) {
@@ -81,42 +77,17 @@ function Ipfs() {
         </>,
         'yellow'
       );
-    } else if (ipfsDataDetails) {
+    } else if (status === 'completed') {
       setAdviser(
-        <div className={styles.meta}>
-          <div className={styles.left}>
-            {ipfsDataDetails?.type}
-
-            {!!rankInfo && (
-              <div className={styles.rank}>
-                with rank
-                <span>{rankInfo.toLocaleString().replaceAll(',', ' ')}</span>
-                <Rank hash={cid} rank={rankInfo} />
-              </div>
-            )}
-          </div>
-          {creator && (
-            <div className={styles.center}>
-              <span className={styles.date}>
-                {timeSince(Date.now() - Date.parse(creator.timestamp))} ago
-              </span>
-              <Account sizeAvatar="20px" address={creator.address} avatar />
-            </div>
-          )}
-          <div className={styles.right}>
-            <span>
-              🟥{' '}
-              {content?.meta?.size !== -1
-                ? formatCurrency(content?.meta?.size, 'B', 0, PREFIXES)
-                : 'unknown'}
-            </span>
-            <button disabled>🌓</button>
-          </div>
-        </div>,
+        <AdviserMeta
+          cid={cid}
+          type={ipfsDataDetails?.type}
+          size={content?.meta?.size}
+        />,
         'purple'
       );
     }
-  }, [ipfsDataDetails, creator, setAdviser, rankInfo, cid, content, status]);
+  }, [ipfsDataDetails, setAdviser, cid, content, status]);
 
   console.debug(status, cid, content, ipfsDataDetails);
 
@@ -140,19 +111,3 @@ function Ipfs() {
 }
 
 export default Ipfs;
-
-// const update = useCallback(() => {
-//   dataDiscussion.refetch();
-//   dataAnswer.refetch();
-// }, [dataAnswer, dataDiscussion]);
-
-// {!mobile && (tab === 'discussion' || tab === 'answers') && (
-//   <ActionBarContainer
-//     placeholder={
-//       tab === 'answers' ? 'add keywords, hash or file' : 'add message'
-//     }
-//     textBtn={tab === 'answers' ? 'add answer' : 'Comment'}
-//     keywordHash={cid}
-//     update={update}
-//   />
-// )}
diff --git a/src/features/cyberlinks/rank/useRank.ts b/src/features/cyberlinks/rank/useRank.ts
@@ -0,0 +1,24 @@
+import { useEffect, useState } from 'react';
+import { useQueryClient } from 'src/contexts/queryClient';
+
+function useRank(cid: string) {
+  const [rank, setRank] = useState<number>();
+
+  const queryClient = useQueryClient();
+
+  useEffect(() => {
+    (async () => {
+      if (!queryClient) {
+        return;
+      }
+
+      const response = await queryClient.rank(cid);
+
+      setRank(Number(response.rank));
+    })();
+  }, [cid, queryClient]);
+
+  return rank;
+}
+
+export default useRank;
diff --git a/src/hooks/useQueueIpfsContent.ts b/src/hooks/useQueueIpfsContent.ts
@@ -28,7 +28,7 @@ type UseIpfsContentReturn = {
 };
 
 function useQueueIpfsContent(parentId?: string): UseIpfsContentReturn {
-  const [status, setStatus] = useState<QueueItemStatus | undefined>();
+  const [status, setStatus] = useState<QueueItemStatus>();
   const [source, setSource] = useState<IpfsContentSource | undefined>();
   const [content, setContent] = useState<IPFSContentMaybe>();
   const prevParentIdRef = useRef<string | undefined>();