Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

look ma, no rerender #37

Closed
wants to merge 1 commit into from
Closed

look ma, no rerender #37

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 30 additions & 0 deletions src/components/HappyCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
42 changes: 22 additions & 20 deletions src/components/ResultContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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">
Expand Down
Loading