look ma, no rerender

neurobagel · Feb 28, 2024 · d35bdd1 · d35bdd1
1 parent 3094c49
commit d35bdd1
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 20 deletions.
diff --git a/src/components/HappyCard.tsx b/src/components/HappyCard.tsx
@@ -0,0 +1,30 @@
+
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Checkbox from '@mui/material/Checkbox';
+import Typography from '@mui/material/Typography';
+
+function HappyCard() {
+  return (
+    <Card>
+      <CardContent>
+        <div className="grid grid-cols-12 items-center gap-2">
+          <div className="col-end-1">
+            <Checkbox
+            />
+          </div>
+          <div className="col-span-10 col-start-1">
+            <Typography variant="h5">I am a dataset</Typography>
+            <Typography variant="subtitle1">from a Place</Typography>
+            <Typography variant="subtitle2">
+              some subjects match / more total subjects
+            </Typography>
+          </div>
+          <div className="col-span-2 justify-self-end" />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+export default HappyCard;
diff --git a/src/components/ResultContainer.tsx b/src/components/ResultContainer.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import { Button, FormControlLabel, Checkbox, Typography } from '@mui/material';
-import ResultCard from './ResultCard';
+import HappyCard from './HappyCard';
 import { Result } from '../utils/types';
 import DownloadResultButton from './DownloadResultButton';
 import NBDialog from './NBDialog';
@@ -31,14 +31,14 @@ function ResultContainer({ result }: { result: Result[] | null }) {
    * @param id - The uuid of the dataset to be added or removed from the download list
    * @returns void
    */
-  function updateDownload(id: string) {
-    setDownload((currDownload) => {
-      const newDownload = !currDownload.includes(id)
-        ? [...currDownload, id]
-        : currDownload.filter((downloadID) => downloadID !== id);
-      return newDownload;
-    });
-  }
+  // function updateDownload(id: string) {
+  //   setDownload((currDownload) => {
+  //     const newDownload = !currDownload.includes(id)
+  //       ? [...currDownload, id]
+  //       : currDownload.filter((downloadID) => downloadID !== id);
+  //     return newDownload;
+  //   });
+  // }
 
   function handleSelectAll(checked: boolean) {
     if (result) {
@@ -191,17 +191,19 @@ function ResultContainer({ result }: { result: Result[] | null }) {
         </div>
         <div className="col-span-4 max-h-96 space-y-2 overflow-auto">
           {result.map((item) => (
-            <ResultCard
-              key={item.dataset_uuid}
-              nodeName={item.node_name}
-              datasetUUID={item.dataset_uuid}
-              datasetName={item.dataset_name}
-              datasetTotalSubjects={item.dataset_total_subjects}
-              numMatchingSubjects={item.num_matching_subjects}
-              imageModals={item.image_modals}
-              checked={download.includes(item.dataset_uuid)}
-              onCheckboxChange={(id) => updateDownload(id)}
-            />
+            <HappyCard
+            key={item.dataset_uuid} />
+            // <ResultCard
+            //   key={item.dataset_uuid}
+            //   nodeName={item.node_name}
+            //   datasetUUID={item.dataset_uuid}
+            //   datasetName={item.dataset_name}
+            //   datasetTotalSubjects={item.dataset_total_subjects}
+            //   numMatchingSubjects={item.num_matching_subjects}
+            //   imageModals={item.image_modals}
+            //   checked={download.includes(item.dataset_uuid)}
+            //   onCheckboxChange={(id) => updateDownload(id)}
+            // />
           ))}
         </div>
         <div className="col-span-1">