thuang-radio-useState

frontend/src/components/Collections/components/Grid/components/DatasetsGrid/index.tsx

@@ -1,4 +1,10 @@
-import React, { FC } from "react";
+import React, {
+  Dispatch,
+  FC,
+  SetStateAction,
+  useEffect,
+  useState,
+} from "react";
 import { Dataset } from "src/common/entities";
 import {
   CollectionHeaderCell,
@@ -12,13 +18,27 @@ interface Props {
   datasets: Dataset[];
   uploadedFiles: UploadedFiles;
   invalidateCollectionQuery: () => void;
+  onSelect: Dispatch<SetStateAction<string | null>>;
 }
 
 const DatasetsGrid: FC<Props> = ({
   datasets,
   uploadedFiles,
   invalidateCollectionQuery,
+  onSelect,
 }) => {
+  const [selected, setSelected] = useState<Dataset["id"] | null>(null);
+
+  useEffect(() => {
+    onSelect(selected);
+  }, [selected, onSelect]);
+
+  const handleSelect = (id: Dataset["id"]) => {
+    if (id !== selected) {
+      setSelected(id);
+    }
+  };
+
   return (
     <StyledCollectionsGrid bordered>
       <thead>
@@ -38,6 +58,8 @@ const DatasetsGrid: FC<Props> = ({
             dataset={dataset}
             file={uploadedFiles[dataset.id]}
             invalidateCollectionQuery={invalidateCollectionQuery}
+            onSelect={handleSelect}
+            selected={selected}
           />
         ))}
       </tbody>

frontend/src/components/Collections/components/Grid/components/Row/DatasetRow/index.tsx

@@ -15,7 +15,6 @@ import {
   StyledRow,
 } from "src/components/Collections/components/Grid/components/Row/common/style.ts";
 import { UploadingFile } from "src/components/DropboxChooser";
-import { SelectedContext } from "src/views/Collection";
 import DatasetUploadToast from "src/views/Collection/components/DatasetUploadToast";
 import CellCount from "./components/CellCount";
 import Popover from "./components/Popover";
@@ -42,12 +41,16 @@ interface Props {
   dataset: Dataset;
   file?: UploadingFile;
   invalidateCollectionQuery: () => void;
+  onSelect: (id: Dataset["id"]) => void;
+  selected: Dataset["id"] | null;
 }
 
 const DatasetRow: FC<Props> = ({
   dataset,
   file,
   invalidateCollectionQuery,
+  onSelect,
+  selected,
 }) => {
   const queryCache = useQueryCache();
 
@@ -103,45 +106,36 @@ const DatasetRow: FC<Props> = ({
   } = aggregateDatasetsMetadata([dataset]);
 
   return (
-    <SelectedContext.Consumer>
-      {({ handleCheck, selected }) => (
-        <StyledRow>
-          <DetailsCell>
-            <TitleContainer>
-              <Radio
-                onChange={() => handleCheck(dataset.id)}
-                checked={selected === dataset.id}
-              />
-              <div>{name}</div>
-              <ErrorTooltip isFailed={isFailed} error={error} />
-            </TitleContainer>
-            {isLoading && (
-              <UploadStatus
-                isValidating={
-                  datasetStatus.validation_status ===
-                  VALIDATION_STATUS.VALIDATING
-                }
-                progress={datasetStatus.upload_progress}
-              />
-            )}
-          </DetailsCell>
-          <Popover values={tissue} isLoading={isLoading} isFailed={isFailed} />
-          <Popover values={assay} isLoading={isLoading} isFailed={isFailed} />
-          <Popover values={disease} isLoading={isLoading} isFailed={isFailed} />
-          <Popover
-            values={organism}
-            isLoading={isLoading}
-            isFailed={isFailed}
+    <StyledRow>
+      <DetailsCell>
+        <TitleContainer>
+          <Radio
+            onChange={() => onSelect(dataset.id)}
+            checked={selected === dataset.id}
           />
-          <CellCount cellCount={cell_count} isLoading={isLoading} />
-          <RightAlignedDetailsCell>
-            {isNamePopulated && (
-              <Button intent={Intent.PRIMARY} outlined text="Explore" />
-            )}
-          </RightAlignedDetailsCell>
-        </StyledRow>
-      )}
-    </SelectedContext.Consumer>
+          <div>{name}</div>
+          <ErrorTooltip isFailed={isFailed} error={error} />
+        </TitleContainer>
+        {isLoading && (
+          <UploadStatus
+            isValidating={
+              datasetStatus.validation_status === VALIDATION_STATUS.VALIDATING
+            }
+            progress={datasetStatus.upload_progress}
+          />
+        )}
+      </DetailsCell>
+      <Popover values={tissue} isLoading={isLoading} isFailed={isFailed} />
+      <Popover values={assay} isLoading={isLoading} isFailed={isFailed} />
+      <Popover values={disease} isLoading={isLoading} isFailed={isFailed} />
+      <Popover values={organism} isLoading={isLoading} isFailed={isFailed} />
+      <CellCount cellCount={cell_count} isLoading={isLoading} />
+      <RightAlignedDetailsCell>
+        {isNamePopulated && (
+          <Button intent={Intent.PRIMARY} outlined text="Explore" />
+        )}
+      </RightAlignedDetailsCell>
+    </StyledRow>
   );
 };
 

frontend/src/views/Collection/index.tsx

@@ -2,7 +2,7 @@ import { Button, Classes, H3, Intent, Popover } from "@blueprintjs/core";
 import { IconNames } from "@blueprintjs/icons";
 import { RouteComponentProps } from "@reach/router";
 import { memoize } from "lodash-es";
-import React, { createContext, FC, useState } from "react";
+import React, { FC, useState } from "react";
 import { useQueryCache } from "react-query";
 import {
   COLLECTION_LINK_TYPE_OPTIONS,
@@ -36,13 +36,6 @@ interface RouteProps {
 
 export type Props = RouteComponentProps<RouteProps>;
 
-export interface Context {
-  selected: Dataset["id"];
-  handleCheck: (id: string) => void;
-}
-
-export const SelectedContext = createContext({} as Context);
-
 const renderLinks = (links: Link[]) => {
   return links?.map(({ link_url: url, link_type: type }) => {
     const linkTypeOption = COLLECTION_LINK_TYPE_OPTIONS[type];
@@ -73,11 +66,7 @@ const Collection: FC<Props> = ({ id = "" }) => {
     ? VISIBILITY_TYPE.PRIVATE
     : VISIBILITY_TYPE.PUBLIC;
 
-  const [selected, setSelected] = useState("" as Context["selected"]);
-
-  const handleCheck: Context["handleCheck"] = (id: string) => {
-    setSelected(id);
-  };
+  const [selected, setSelected] = useState<Dataset["id"] | null>(null);
 
   const [uploadedFiles, setUploadedFiles] = useState({} as UploadedFiles);
 
@@ -133,13 +122,12 @@ const Collection: FC<Props> = ({ id = "" }) => {
 
       <DatasetContainer>
         {datasetPresent ? (
-          <SelectedContext.Provider value={{ handleCheck, selected }}>
-            <DatasetsGrid
-              datasets={collection.datasets}
-              uploadedFiles={uploadedFiles}
-              invalidateCollectionQuery={invalidateCollectionQuery}
-            />
-          </SelectedContext.Provider>
+          <DatasetsGrid
+            datasets={collection.datasets}
+            uploadedFiles={uploadedFiles}
+            invalidateCollectionQuery={invalidateCollectionQuery}
+            onSelect={setSelected}
+          />
         ) : (
           <EmptyDatasets onUploadFile={addNewFile} />
         )}
@@ -156,7 +144,12 @@ const Collection: FC<Props> = ({ id = "" }) => {
               Download
             </Button>
           </Popover>
-          <Button icon={IconNames.TRASH} minimal></Button>
+          <Button icon={IconNames.TRASH} minimal>
+            {/* TEMP: To show selected file */}
+            {/* TEMP: To show selected file */}
+            {/* TEMP: To show selected file */}
+            {selected}
+          </Button>
         </StyledDiv>
       )}
     </ViewGrid>