feat: properly implement retrieval demo (#13)

* check latency and update peer list

* remove myel-client dep

* force node version

* better error handling

* adjust peer address parsing

* fix http requests for ping

* reduce replication factor

.node-version

@@ -0,0 +1 @@
+v15.0.1

components/Footer.tsx

@@ -12,11 +12,11 @@ export default function Footer() {
             <p>Content delivery network for the web3.0</p>
             <ul>
               <li>
-                <Link href="/sign-up">Request access</Link>
+                <Link href="/sign-up">run a node</Link>
               </li>
               <li>
                 <Link href="/blog">
-                  <a>Blog</a>
+                  <a>blog</a>
                 </Link>
               </li>
             </ul>
@@ -36,7 +36,7 @@ export default function Footer() {
             <h6>Developers</h6>
             <ul>
               <li>
-                <a href="https://myel.dev">Docs</a>
+                <a href="https://myel.dev">docs</a>
               </li>
             </ul>
           </div>

components/PeerRow.tsx

@@ -0,0 +1,17 @@
+import {useState, useEffect} from 'react';
+import styles from '../pages/Home.module.css';
+import {Peer} from './Uploader';
+
+type PeerRowProps = Peer;
+
+export default function PeerRow({id, name, location, latency}: PeerRowProps) {
+  return (
+    <li className={styles.peerRow}>
+      <div className={styles.peerHeading}>
+        <div>{id.slice(-6)}</div>
+        <div>{location}</div>
+      </div>
+      <div className={styles.peerData}>{latency}s</div>
+    </li>
+  );
+}

components/ProjectTracker.tsx

@@ -66,9 +66,9 @@ const ArrowDown = () => {
       <path
         d="M1 0.999999L7.5 7L14 0.999999"
         stroke="white"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
     </svg>
   );

components/Retriever.tsx

@@ -1,28 +1,65 @@
 import {useState} from 'react';
+import {Multiaddr} from 'multiaddr';
 import {Content, Peer} from './Uploader';
 import styles from '../pages/Home.module.css';
 import humanFileSize from '../utils/humanFileSize';
 import Spinner from './Spinner';
+import Modal from './Modal';
+import {peerAddr} from '../utils/usePeers';
 
 type RetrieverProps = {
   peers: Peer[];
   content: Content[];
 };
 
+type ContentEntry = {
+  name: string;
+  size: number;
+  cid: string;
+};
+
+const WORKER_URL = 'https://client.myel.workers.dev/';
+
 export default function Retriever({peers, content}) {
   const [loading, setLoading] = useState(false);
+  const [entries, setEntries] = useState<ContentEntry[]>(null);
+  const [selected, setSelected] = useState<Content>(null);
   const peermap = peers.reduce((acc, p) => {
     acc[p.id] = p;
     return acc;
   }, {});
-  const clist = content.filter((c) => !!peermap[c.peer]);
+  const clist = content
+    .filter((c) => !!peermap[new Multiaddr(c.peer).getPeerId()])
+    .map((c) => {
+      const peer = {
+        id: new Multiaddr(c.peer).getPeerId(),
+        name: c.peer.split('/')[2],
+      };
+
+      return {...c, peer: peerAddr(peer)};
+    });
   const retrieve = async (content: Content) => {
     try {
       setLoading(true);
+      const entries = await fetch(
+        WORKER_URL + content.cid + '?peer=' + content.peer,
+        {
+          headers: {
+            Accept: 'application/json',
+          },
+        }
+      ).then((res) => res.json());
+      setSelected(content);
+      setEntries(entries);
     } catch (e) {
       console.log(e);
     }
   };
+  const reset = () => {
+    setEntries(null);
+    setSelected(null);
+    setLoading(false);
+  };
   return (
     <>
       <div className={styles.framescroll}>
@@ -39,9 +76,7 @@ export default function Retriever({peers, content}) {
                   </div>
                   <div>{humanFileSize(c.size)}</div>
                 </div>
-                <div className={styles.peerData}>
-                  {c.peer.slice(0, 4)}...{c.peer.slice(-8)}
-                </div>
+                <div className={styles.peerData}>...{c.peer.slice(-8)}</div>
               </li>
             ))}
           </u>
@@ -58,9 +93,38 @@ export default function Retriever({peers, content}) {
       </div>
       <div className={styles.framebottom}>
         <p className={styles.fineprint}>
-          {loading ? 'Downloading...' : 'Your file will download automaticaly.'}
+          {loading ? 'Downloading...' : 'Your file will download automatically'}
         </p>
       </div>
+      <Modal actionTitle="Download" isOpen={!!entries} onDismiss={reset}>
+        <div className={styles.framescroll}>
+          <u className={styles.framescroller}>
+            {entries?.map((e) => (
+              <li key={e.cid} className={styles.contentRow}>
+                <a
+                  href={
+                    WORKER_URL +
+                    selected.cid +
+                    '/' +
+                    e.name +
+                    '?peer=' +
+                    selected.peer
+                  }
+                  download
+                  className={styles.rowLink}>
+                  <div className={styles.peerHeading}>
+                    <div>{e.name}</div>
+                    <div>
+                      {e.cid.slice(0, 8)}...{e.cid.slice(-8)}
+                    </div>
+                  </div>
+                  <div className={styles.peerData}>{humanFileSize(e.size)}</div>
+                </a>
+              </li>
+            ))}
+          </u>
+        </div>
+      </Modal>
     </>
   );
 }

components/Uploader.tsx

@@ -6,11 +6,13 @@ import Modal from './Modal';
 import Spinner from './Spinner';
 import logoDropper from '../public/LogoDropper.svg';
 import humanFileSize from '../utils/humanFileSize';
+import {peerAddr} from '../utils/usePeers';
 
 export type Peer = {
   id: string;
   name: string;
-  latency: number;
+  latency?: number;
+  location?: string;
 };
 
 export type Content = {
@@ -28,24 +30,30 @@ export default function Uploader({peers, onComplete}: UploaderProps) {
   const [open, setOpen] = useState(false);
 
   const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(false);
 
   const [file, setFile] = useState<File>(null);
   const [content, setContent] = useState<Content[]>([]);
   const onDrop = (files) => {
     setLoading(true);
     setFile(files[0]);
     submit(files[0])
-      .then(setContent)
-      .then(() => setLoading(false))
+      .then((items) => {
+        setContent(items);
+        onComplete(items);
+        setLoading(false);
+      })
       .catch((err) => {
         console.log(err);
-        reset();
+        setError(true);
+        setLoading(false);
       });
   };
   const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop});
   const reset = () => {
     setFile(null);
     setOpen(false);
+    setError(false);
   };
 
   const put = async (file: File, addr: Peer): Promise<Content> => {
@@ -63,12 +71,14 @@ export default function Uploader({peers, onComplete}: UploaderProps) {
     return {
       cid: rootCID,
       size: file.size,
-      peer: addr.id,
+      peer: peerAddr(addr),
     };
   };
 
+  // replicate with 4 peers only. We don't want this demo to stress the network too much yet.
+  // TODO: make this adjustable
   const submit = async (file: File): Promise<Content[]> => {
-    return Promise.all(peers.map((addr) => put(file, addr)));
+    return Promise.all(peers.slice(0, 4).map((addr) => put(file, addr)));
   };
 
   return (
@@ -78,9 +88,13 @@ export default function Uploader({peers, onComplete}: UploaderProps) {
       </button>
       <p className={styles.fineprint}>Uploaded files will be public</p>
       <Modal actionTitle="Upload" isOpen={open} onDismiss={reset}>
-        {loading ? (
+        {loading || error ? (
           <div className={styles.loadingContainer}>
-            <Spinner />
+            {loading ? (
+              <Spinner />
+            ) : (
+              <div className={styles.fineprint}>Something went wrong</div>
+            )}
           </div>
         ) : file ? (
           <div className={styles.successContainer}>

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@mapbox/rehype-prism": "^0.6.0",
+    "@next/bundle-analyzer": "^11.1.2",
     "@reach/dialog": "^0.16.0",
     "@reach/listbox": "^0.16.1",
     "@testing-library/jest-dom": "^5.11.4",
@@ -13,9 +14,15 @@
     "@types/node": "^12.0.0",
     "@types/react": "^16.9.53",
     "@types/react-dom": "^16.9.8",
+    "cborg": "^1.5.1",
+    "datastore-core": "^6.0.7",
     "date-fns": "^2.21.3",
     "gray-matter": "^4.0.3",
     "history": "^5.0.0",
+    "libp2p-mplex": "^0.10.4",
+    "libp2p-noise": "^4.0.0",
+    "libp2p-websockets": "^0.16.2",
+    "multiaddr": "^10.0.1",
     "next": "^11.1.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -54,6 +61,7 @@
     ]
   },
   "devDependencies": {
-    "prettier": "^2.2.1"
+    "prettier": "^2.2.1",
+    "workbox-webpack-plugin": "^6.3.0"
   }
 }

pages/Home.module.css

@@ -364,11 +364,13 @@
 .framebackground {
   position: absolute;
   top: -150px;
+  pointer-events: none;
 }
 
 .framebackground2 {
   position: absolute;
   top: -100px;
+  pointer-events: none;
 }
 
 .frametop {
@@ -418,7 +420,7 @@
   display: flex;
   flex: 1;
   width: 100%;
-  overflow: auto hidden;
+  overflow: auto;
 }
 
 .fineprint {
@@ -443,6 +445,12 @@
   font-weight: 600;
 }
 
+.rowLink {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
 .peerHeading {
   display: flex;
   flex-direction: column;