Randomize recommended NFTs

amkCha · May 15, 2023 · 8aec628 · 8aec628
1 parent 8447dc2
commit 8aec628
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 42 deletions.
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -1,17 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <link href="%PUBLIC_URL%/favicon.ico" rel="icon" />
-  <meta content="width=device-width, initial-scale=1" name="viewport" />
-  <meta content="#000000" name="theme-color" />
-  <meta content="Very Smart Contract" name="description" />
-  <!--
+  <head>
+    <meta charset="utf-8" />
+    <link href="%PUBLIC_URL%/favicon.ico" rel="icon" />
+    <meta content="width=device-width, initial-scale=1" name="viewport" />
+    <meta content="#000000" name="theme-color" />
+    <meta content="Very Smart Contract" name="description" />
+    <!--
   manifest.json provides metadata used when your web app is installed on a
   user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
 -->
-  <link href="%PUBLIC_URL%/manifest.json" rel="manifest" />
-  <!--
+    <link href="%PUBLIC_URL%/manifest.json" rel="manifest" />
+    <!--
   Notice the use of %PUBLIC_URL% in the tags above.
   It will be replaced with the URL of the `public` folder during the build.
   Only files inside the `public` folder can be referenced from the HTML.
@@ -20,12 +20,12 @@
   work correctly both with client-side routing and a non-root public URL.
   Learn how to configure a non-root public URL by running `npm run build`.
 -->
-  <title>Very Smart Contract</title>
-</head>
-<body>
-<noscript>You need to enable JavaScript to run this app.</noscript>
-<div id="root"></div>
-<!--
+    <title>Very Smart Contract</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
 This HTML file is a template.
 If you open it directly in the browser, you will see an empty page.
 
@@ -35,5 +35,5 @@
 To begin the development, run `npm start` or `yarn start`.
 To create a production bundle, use `npm run build` or `yarn build`.
 -->
-</body>
+  </body>
 </html>
diff --git a/frontend/src/components/NFT/NFTS.tsx b/frontend/src/components/NFT/NFTS.tsx
@@ -72,7 +72,8 @@ const NFTS: React.FC<IProps> = () => {
   const getRecommendations = async () => {
     setLoadingRecommendations(true);
     await delay(2000);
-    setRecommendedNfts(ownedNfts);
+    const recNfts = ownedNfts.sort(() => 0.5 - Math.random());
+    setRecommendedNfts(recNfts);
     setLoadingRecommendations(false);
   };
 
@@ -178,17 +179,15 @@ const NFTS: React.FC<IProps> = () => {
                   cols={3}
                   rowHeight={200}
                 >
-                  {recommendedNfts
-                    .sort(() => 0.5 - Math.random())
-                    .map((item) => (
-                      <ImageListItem key={item.image} cols={1} rows={1}>
-                        <img
-                          src={`${item.image}`}
-                          alt={item.name}
-                          loading="lazy"
-                        />
-                      </ImageListItem>
-                    ))}
+                  {recommendedNfts.map((item) => (
+                    <ImageListItem key={item.image} cols={1} rows={1}>
+                      <img
+                        src={`${item.image}`}
+                        alt={item.name}
+                        loading="lazy"
+                      />
+                    </ImageListItem>
+                  ))}
                 </ImageList>
               )}
             </Paper>

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -1,14 +1,14 @@
 body {
-    margin: 0;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    background: linear-gradient(#e66465, #9198e5);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background: linear-gradient(#e66465, #9198e5);
 }
 
 code {
-    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
@@ -2,11 +2,7 @@
   "compilerOptions": {
     "target": "ESNext",
     "useDefineForClassFields": true,
-    "lib": [
-      "DOM",
-      "DOM.Iterable",
-      "ESNext"
-    ],
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -26,7 +22,5 @@
     "incremental": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": [
-    "src/**/*"
-  ]
+  "include": ["src/**/*"]
 }