refactor(taxonomy-editor-frontend): Create a component for nodes table (

#290) refactor(taxonomy-editor-frontend):create a component for nodes table used in nodes and search pages Co-authored-by: alice.juan <[email protected]>
openfoodfacts · Nov 23, 2023 · eb2bff3 · eb2bff3
1 parent 2b0c528
commit eb2bff3
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 42 deletions.
diff --git a/taxonomy-editor-frontend/src/components/NodesTableBody.tsx b/taxonomy-editor-frontend/src/components/NodesTableBody.tsx
@@ -0,0 +1,42 @@
+import {
+  IconButton,
+  TableBody,
+  TableCell,
+  TableRow,
+  Typography,
+} from "@mui/material";
+import EditIcon from "@mui/icons-material/Edit";
+import { Link } from "react-router-dom";
+
+type Props = {
+  nodeIds: string[];
+  taxonomyName: string;
+  branchName: string;
+};
+
+const NodesTableBody = ({ nodeIds, taxonomyName, branchName }: Props) => {
+  return (
+    <>
+      <TableBody>
+        {nodeIds.map((nodeId) => (
+          <TableRow key={nodeId}>
+            <TableCell align="left" component="td" scope="row">
+              <Typography variant="subtitle1">{nodeId}</Typography>
+            </TableCell>
+            <TableCell align="left" component="td" scope="row">
+              <IconButton
+                component={Link}
+                to={`/${taxonomyName}/${branchName}/entry/${nodeId}`}
+                aria-label="edit"
+              >
+                <EditIcon color="primary" />
+              </IconButton>
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </>
+  );
+};
+
+export default NodesTableBody;
diff --git a/taxonomy-editor-frontend/src/pages/root-nodes/index.tsx b/taxonomy-editor-frontend/src/pages/root-nodes/index.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { Link, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
 
 import {
   Typography,
@@ -15,7 +15,6 @@ import TableCell from "@mui/material/TableCell";
 import TableContainer from "@mui/material/TableContainer";
 import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
-import EditIcon from "@mui/icons-material/Edit";
 import AddBoxIcon from "@mui/icons-material/AddBox";
 import Dialog from "@mui/material/Dialog";
 
@@ -24,6 +23,7 @@ import useFetch from "../../components/useFetch";
 import { toTitleCase, createBaseURL } from "../../utils";
 import { greyHexCode } from "../../constants";
 import type { RootEntriesAPIResponse } from "../../backend-types/types";
+import NodesTableBody from "../../components/NodesTableBody";
 
 type RootNodesProps = {
   addNavLinks: ({
@@ -55,6 +55,11 @@ const RootNodes = ({
     errorMessage,
   } = useFetch<RootEntriesAPIResponse>(`${baseUrl}rootentries`);
 
+  let nodeIds: string[] = [];
+  if (nodes && nodes.length > 0) {
+    nodeIds = nodes.map((node) => node[0].id);
+  }
+
   useEffect(
     function defineMainNavLinks() {
       addNavLinks({ branchName, taxonomyName });
@@ -143,25 +148,11 @@ const RootNodes = ({
                 </TableCell>
               </TableRow>
             </TableHead>
-
-            <TableBody>
-              {nodes.map((node) => (
-                <TableRow key={node[0].id}>
-                  <TableCell align="left" component="td" scope="row">
-                    <Typography variant="subtitle1">{node[0].id}</Typography>
-                  </TableCell>
-                  <TableCell align="left" component="td" scope="row">
-                    <IconButton
-                      component={Link}
-                      to={`/${taxonomyName}/${branchName}/entry/${node[0].id}`}
-                      aria-label="edit"
-                    >
-                      <EditIcon color="primary" />
-                    </IconButton>
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
+            <NodesTableBody
+              nodeIds={nodeIds}
+              taxonomyName={taxonomyName}
+              branchName={branchName}
+            />
           </Table>
         </TableContainer>
       </div>

diff --git a/taxonomy-editor-frontend/src/pages/search/SearchResults.tsx b/taxonomy-editor-frontend/src/pages/search/SearchResults.tsx
@@ -1,5 +1,4 @@
 import { useState } from "react";
-import { Link } from "react-router-dom";
 
 import {
   Typography,
@@ -13,12 +12,10 @@ import {
 } from "@mui/material";
 import Container from "@mui/material/Container";
 import Table from "@mui/material/Table";
-import TableBody from "@mui/material/TableBody";
 import TableCell from "@mui/material/TableCell";
 import TableContainer from "@mui/material/TableContainer";
 import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
-import EditIcon from "@mui/icons-material/Edit";
 import AddBoxIcon from "@mui/icons-material/AddBox";
 import Dialog from "@mui/material/Dialog";
 
@@ -27,6 +24,7 @@ import { createBaseURL } from "../../utils";
 import { greyHexCode } from "../../constants";
 import type { SearchAPIResponse } from "../../backend-types/types";
 import CreateNodeDialogContent from "../../components/CreateNodeDialogContent";
+import NodesTableBody from "../../components/NodesTableBody";
 
 type Props = {
   query: string;
@@ -125,24 +123,11 @@ const SearchResults = ({ query, taxonomyName, branchName }: Props) => {
                 </TableCell>
               </TableRow>
             </TableHead>
-            <TableBody>
-              {(nodeIds ?? []).map((nodeId) => (
-                <TableRow key={nodeId}>
-                  <TableCell align="left" component="td" scope="row">
-                    <Typography variant="subtitle1">{nodeId}</Typography>
-                  </TableCell>
-                  <TableCell align="left" component="td" scope="row">
-                    <IconButton
-                      component={Link}
-                      to={`/${taxonomyName}/${branchName}/entry/${nodeId}`}
-                      aria-label="edit"
-                    >
-                      <EditIcon color="primary" />
-                    </IconButton>
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
+            <NodesTableBody
+              nodeIds={nodeIds ?? []}
+              taxonomyName={taxonomyName}
+              branchName={branchName}
+            />
           </Table>
         </TableContainer>