refactor: track state of select in parent

src/components/DataForm.tsx

@@ -1,7 +1,16 @@
 import React, { useState } from "react"
+import { set } from "react-hook-form"
 import DataTable from "../components/DataTable"
 import DownloadModal from "../components/DownloadModal"
 
+export interface FileItem {
+  title: string
+  cat: string
+  file: string
+  description?: string
+  selected: boolean
+}
+
 interface DataFormProps {
   allFiles: {
     data: {
@@ -14,12 +23,27 @@ interface DataFormProps {
 }
 
 const DataForm: React.FC<DataFormProps> = ({ allFiles }) => {
-  const [fileList, setFileList] = useState<Array<string>>([])
+  const initialFiles = allFiles.map((file) => {
+    const temp = file.data
+    return { ...temp, selected: false }
+  })
+  const [files, setFiles] = useState(initialFiles)
+
+  const updateFileList = (fileToUpdate: FileItem, selection: boolean) => {
+    const filesClone = [...files]
+    const updatedFiles = filesClone.map((file) => {
+      if (file.file === fileToUpdate.file) {
+        file.selected = selection
+      }
+      return file
+    })
+    setFiles(updatedFiles)
+  }
 
   return (
     <div className="flex flex-col">
-      <DataTable allFiles={allFiles} updateFileList={(e) => setFileList(e)} />
-      <DownloadModal filesToDownload={fileList} />
+      <DataTable allFiles={files} updateFileList={updateFileList} />
+      <DownloadModal filesToDownload={files.map((file) => file.file)} />
     </div>
   )
 }

src/components/DataTable.tsx

@@ -1,63 +1,37 @@
-import React, { useEffect, useState } from "react"
+import React, { useState } from "react"
 import * as Checkbox from "@radix-ui/react-checkbox"
 import { CheckIcon } from "@radix-ui/react-icons"
+import type { FileItem } from "./DataForm.tsx"
 
-type updateFileListType = (a: string[]) => void
+type updateFileListType = (fileToUpdate: FileItem, selection: boolean) => void
 
 interface DataTableProps {
   allFiles: {
-    data: {
-      title: string
-      cat: string
-      file: string
-      description?: string
-    }
+    title: string
+    cat: string
+    file: string
+    description?: string
+    selected: boolean
   }[]
   updateFileList: updateFileListType // function that updates file list in the parent component
 }
 
-interface FileProps {
-  title: string
-  cat: string
-  file: string
-  description?: string
-  selected: boolean
-}
-
 const DataTable: React.FC<DataTableProps> = ({ allFiles, updateFileList }) => {
-  const initialFiles = allFiles.map((file) => {
-    const temp = file.data
-    return { ...temp, selected: false }
-  })
   const [isCheckAll, setIsCheckAll] = useState(false)
-  const [files, setFiles] = useState<FileProps[]>(initialFiles)
-
-  useEffect(() => {
-    const newSelectedFiles = files.filter((file) => file.selected)
-    // updateFileList is from parent -- updates parent state to pass to the form
-    // used for eventual history table to show what files user downloaded
-    updateFileList(newSelectedFiles.map((file) => file.file))
-  }, [files])
 
   const handleSelectAll = () => {
     const newIsCheckAll = !isCheckAll // Toggle isCheckAll
     setIsCheckAll(newIsCheckAll)
-    const filesClone = [...files]
-    filesClone.forEach((file) => {
-      file.selected = newIsCheckAll
+    allFiles.forEach((file) => {
+      updateFileList(file, newIsCheckAll)
     })
-    setFiles([...filesClone])
   }
 
   const handleSelect = (selected: boolean, i: number) => {
-    const temp = files[i]
-    temp.selected = !selected
-    const filesClone = [...files]
-    filesClone[i] = temp
-    setFiles([...filesClone])
+    updateFileList(allFiles[i], !selected)
   }
 
-  const selectedFiles = files.map(({ title, file, selected, cat, description }, i) => {
+  const selectedFiles = allFiles.map(({ title, file, selected, cat, description }, i) => {
     return (
       <tr key={i}>
         <td>