From 9e68185a2257428ef9c7a28a5fb27c87f376a848 Mon Sep 17 00:00:00 2001 From: Mihoub Date: Wed, 12 Jun 2024 11:13:24 +0200 Subject: [PATCH] feat(useContext): useContext for dataList --- src/main.tsx | 33 ++++++++++--------- .../contribution-production-card.tsx | 11 +------ .../contributor-production-info.tsx | 13 +------- .../contributor-requests.tsx | 6 ++-- .../data-list-context/index.tsx | 25 ++++++++++++++ .../link-publications/export-to-xlsx.tsx | 4 ++- .../link-publications/index.tsx | 9 ++--- .../link-publications/message-preview.tsx | 11 +------ .../link-publications/name-selector.tsx | 6 ++-- 9 files changed, 58 insertions(+), 60 deletions(-) create mode 100644 src/pages/api-operation-page/link-publications/data-list-context/index.tsx diff --git a/src/main.tsx b/src/main.tsx index ea5a9e7..54c5fae 100644 --- 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( - - - - - - - - - + + + + + + + + + + + , 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 index e87bf70..22a0edd 100644 --- 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 = () => ( @@ -70,12 +66,7 @@ const ContributionProductionItem = ({ return ( - + 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 index 53d5690..22e1ef5 100644 --- 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 ( - - ); + return ; }; 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 index d28e071..e60af37 100644 --- a/src/pages/api-operation-page/link-publications/contributor-requests.tsx +++ b/src/pages/api-operation-page/link-publications/contributor-requests.tsx @@ -4,6 +4,7 @@ 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: { @@ -11,12 +12,11 @@ const ContributorRequests: React.FC<{ name: ReactNode; productions: Production[]; }; - setDataList; coloredName; - dataList; -}> = ({ data, setDataList, coloredName, dataList }) => { +}> = ({ data, coloredName }) => { const [copiedId, setCopiedId] = useState(null); const [selectedIds, setSelectedIds] = useState([]); + 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 new file mode 100644 index 0000000..75f07bb --- /dev/null +++ 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>; +}>({ + dataList: [], + setDataList: () => {}, +}); + +export const DataListProvider: React.FC<{ children: React.ReactNode }> = ({ + children, +}) => { + const [dataList, setDataList] = useState([]); + + return ( + + {children} + + ); +}; + +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 index 291679c..b02f559 100644 --- 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 index cc280b6..b8efa5f 100644 --- 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 = () => { const [reload] = useState(0); @@ -25,6 +26,7 @@ const ContributionPage: React.FC = () => { 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 = () => { 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 = () => { ))} - {dataList.length > 0 && ( - - )} + {dataList.length > 0 && } { const [showModal, setShowModal] = useState(false); const [copySuccess, setCopySuccess] = useState(""); @@ -143,12 +139,7 @@ const MessagePreview = ({ - + diff --git a/src/pages/api-operation-page/link-publications/name-selector.tsx b/src/pages/api-operation-page/link-publications/name-selector.tsx index 948b55d..400cf20 100644 --- 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 }) => {