feat(useContext): useContext for dataList

dataesr · Jun 12, 2024 · 9e68185 · 9e68185
1 parent 81cf035
commit 9e68185
Show file tree

Hide file tree

Showing 9 changed files with 58 additions and 60 deletions.
diff --git a/src/main.tsx b/src/main.tsx
@@ -8,6 +8,7 @@ import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
 import Router from "./router";
 import { DSFRConfig } from "@dataesr/dsfr-plus";
+import { DataListProvider } from "./pages/api-operation-page/link-publications/data-list-context";
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -33,21 +34,23 @@ const RouterLink = ({ href, replace, target, ...props }: RouterLinkProps) => {
 
 ReactDOM.render(
   <React.StrictMode>
-    <BrowserRouter>
-      <DSFRConfig routerComponent={RouterLink}>
-        <ToastContainer
-          toastStyle={{
-            backgroundColor: "#dffee6",
-            color: "#0078f3",
-            fontSize: "20px",
-          }}
-        />
-        <QueryClientProvider client={queryClient}>
-          <ReactQueryDevtools />
-          <Router />
-        </QueryClientProvider>
-      </DSFRConfig>
-    </BrowserRouter>
+    <DataListProvider>
+      <BrowserRouter>
+        <DSFRConfig routerComponent={RouterLink}>
+          <ToastContainer
+            toastStyle={{
+              backgroundColor: "#dffee6",
+              color: "#0078f3",
+              fontSize: "20px",
+            }}
+          />
+          <QueryClientProvider client={queryClient}>
+            <ReactQueryDevtools />
+            <Router />
+          </QueryClientProvider>
+        </DSFRConfig>
+      </BrowserRouter>
+    </DataListProvider>
   </React.StrictMode>,
   document.getElementById("root")
 );
diff --git a/src/pages/api-operation-page/link-publications/contribution-production-card.tsx b/src/pages/api-operation-page/link-publications/contribution-production-card.tsx
@@ -15,13 +15,9 @@ import StaffProductionActions from "./staff-production-action";
 const ContributionProductionItem = ({
   data,
   refetch,
-  setDataList,
-  dataList,
 }: {
   data: Contribute_Production;
   refetch;
-  setDataList;
-  dataList;
 }) => {
   const renderAccordion = () => (
     <Container fluid className="accordion">
@@ -70,12 +66,7 @@ const ContributionProductionItem = ({
   return (
     <AccordionGroup>
       <Accordion title={renderAccordion}>
-        <ContributorProductionInfo
-          data={data}
-          refetch={refetch}
-          setDataList={setDataList}
-          dataList={dataList}
-        />
+        <ContributorProductionInfo data={data} refetch={refetch} />
         <StaffProductionActions data={data} refetch={refetch} />
       </Accordion>
     </AccordionGroup>

diff --git a/src/pages/api-operation-page/link-publications/contributor-production-info.tsx b/src/pages/api-operation-page/link-publications/contributor-production-info.tsx
@@ -4,22 +4,11 @@ import MessagePreview from "./message-preview";
 const ContributorProductionInfo = ({
   data,
   refetch,
-  setDataList,
-  dataList,
 }: {
   data: Contribute_Production;
   refetch;
-  setDataList;
-  dataList;
 }) => {
-  return (
-    <MessagePreview
-      dataList={dataList}
-      data={data}
-      refetch={refetch}
-      setDataList={setDataList}
-    />
-  );
+  return <MessagePreview data={data} refetch={refetch} />;
 };
 
 export default ContributorProductionInfo;
diff --git a/src/pages/api-operation-page/link-publications/contributor-requests.tsx b/src/pages/api-operation-page/link-publications/contributor-requests.tsx
@@ -4,19 +4,19 @@ import { FaShoppingCart } from "react-icons/fa";
 import { Production } from "../../../types";
 import SelectWithNames from "./name-selector";
 import { ExternalLinks } from "./external-links";
+import { useDataList } from "./data-list-context";
 
 const ContributorRequests: React.FC<{
   data: {
     id: any;
     name: ReactNode;
     productions: Production[];
   };
-  setDataList;
   coloredName;
-  dataList;
-}> = ({ data, setDataList, coloredName, dataList }) => {
+}> = ({ data, coloredName }) => {
   const [copiedId, setCopiedId] = useState<string | null>(null);
   const [selectedIds, setSelectedIds] = useState<string[]>([]);
+  const { dataList, setDataList } = useDataList();
 
   useEffect(() => {
     setSelectedIds(dataList.map((item) => item.publi_id));

diff --git a/src/pages/api-operation-page/link-publications/data-list-context/index.tsx b/src/pages/api-operation-page/link-publications/data-list-context/index.tsx
@@ -0,0 +1,25 @@
+import { createContext, useState, useContext } from "react";
+
+const DataListContext = createContext<{
+  dataList: any[];
+  setDataList: React.Dispatch<React.SetStateAction<any[]>>;
+}>({
+  dataList: [],
+  setDataList: () => {},
+});
+
+export const DataListProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const [dataList, setDataList] = useState<any[]>([]);
+
+  return (
+    <DataListContext.Provider value={{ dataList, setDataList }}>
+      {children}
+    </DataListContext.Provider>
+  );
+};
+
+export const useDataList = () => {
+  return useContext(DataListContext);
+};
diff --git a/src/pages/api-operation-page/link-publications/export-to-xlsx.tsx b/src/pages/api-operation-page/link-publications/export-to-xlsx.tsx
@@ -2,8 +2,10 @@ import { Badge, Button, ButtonGroup, Text, Title } from "@dataesr/dsfr-plus";
 import * as XLSX from "xlsx";
 import { AiOutlineDelete } from "react-icons/ai";
 import { toast } from "react-toastify";
+import { useDataList } from "./data-list-context";
 
-const ExcelExportButton = ({ dataList, setDataList }) => {
+const ExcelExportButton = () => {
+  const { dataList, setDataList } = useDataList();
   const handleExportClick = () => {
     const dataToExport = dataList.map((item) => ({
       person_id: item.person_id || "",

diff --git a/src/pages/api-operation-page/link-publications/index.tsx b/src/pages/api-operation-page/link-publications/index.tsx
@@ -16,6 +16,7 @@ import ContributionProductionItem from "./contribution-production-card";
 import ContributionData from "../../../api/contribution-api/getData";
 import { buildURL } from "../../../api/utils/buildURL";
 import ExcelExportButton from "./export-to-xlsx";
+import { useDataList } from "./data-list-context";
 
 const ContributionPage: React.FC<ContributionPageProps> = () => {
   const [reload] = useState(0);
@@ -25,6 +26,7 @@ const ContributionPage: React.FC<ContributionPageProps> = () => {
   const [page, setPage] = useState(1);
   const [, setData] = useState(null);
   const location = useLocation();
+  const { dataList } = useDataList();
 
   useEffect(() => {
     const params = new URLSearchParams(location.search);
@@ -61,7 +63,6 @@ const ContributionPage: React.FC<ContributionPageProps> = () => {
   useEffect(() => {
     setData(fetchedData);
   }, [fetchedData]);
-  const [dataList, setDataList] = useState([]);
   const meta = (fetchedData as { meta: any })?.meta;
   const maxPage = meta ? Math.ceil(meta?.total / 10) : 1;
   const contrib: Contribute_Production[] = (
@@ -126,13 +127,9 @@ const ContributionPage: React.FC<ContributionPageProps> = () => {
         <ContributionProductionItem
           data={contribution as Contribute_Production}
           refetch={refetch}
-          setDataList={setDataList}
-          dataList={dataList}
         />
       ))}
-      {dataList.length > 0 && (
-        <ExcelExportButton dataList={dataList} setDataList={setDataList} />
-      )}
+      {dataList.length > 0 && <ExcelExportButton />}
       <BottomPaginationButtons
         page={page}
         maxPage={maxPage}

diff --git a/src/pages/api-operation-page/link-publications/message-preview.tsx b/src/pages/api-operation-page/link-publications/message-preview.tsx
@@ -9,13 +9,9 @@ import NameFromIdref from "../../../api/contribution-api/getNamesFromIdref";
 const MessagePreview = ({
   data,
   refetch,
-  setDataList,
-  dataList,
 }: {
   data: Contribute_Production;
   refetch;
-  setDataList: any;
-  dataList;
 }) => {
   const [showModal, setShowModal] = useState(false);
   const [copySuccess, setCopySuccess] = useState("");
@@ -143,12 +139,7 @@ const MessagePreview = ({
       </Row>
       <Row>
         <Col className="contributorProductionSide">
-          <ContributorRequests
-            data={data}
-            setDataList={setDataList}
-            coloredName={data.name}
-            dataList={dataList}
-          />
+          <ContributorRequests data={data} coloredName={data.name} />
         </Col>
       </Row>
       <Row className="fr-mb-2w">

diff --git a/src/pages/api-operation-page/link-publications/name-selector.tsx b/src/pages/api-operation-page/link-publications/name-selector.tsx
@@ -3,23 +3,23 @@ import "react-toastify/dist/ReactToastify.css";
 import NameFromScanr from "../../../api/contribution-api/getNames";
 import { levenshteinDistance } from "../utils/compare";
 import { Col, Row } from "@dataesr/dsfr-plus";
+import { useDataList } from "./data-list-context";
 
 export default function SelectWithNames({
   productionId,
-  setDataList,
   idRef,
   coloredName,
   setSelectedId,
 }) {
   const { fullName, firstName, lastName } = NameFromScanr(productionId);
-
+  const { dataList, setDataList } = useDataList();
+  console.log(dataList);
   const customStyles = {
     option: (provided, state) => ({
       ...provided,
       color: state.data.isColored ? "#1f8d49" : "black",
     }),
   };
-
   const threshold = 7;
 
   const handleChange = (option: { value: any }) => {