fix(context): update context by using publication id instead of index…

…, rework copy button

package.json

@@ -15,6 +15,7 @@
     "@getbrevo/brevo": "^2.0.0-beta.4",
     "@tanstack/react-query": "^4.36.1",
     "@tanstack/react-query-devtools": "^4.29.6",
+    "@types/react-select": "^5.0.1",
     "classnames": "^2.3.2",
     "highcharts": "^11.4.1",
     "highcharts-react-official": "^3.2.1",

src/pages/api-operation-page/link-publications/contributor-requests.tsx

@@ -1,74 +1,73 @@
 import { Col } from "@dataesr/dsfr-plus";
-import React, { ReactNode, useState } from "react";
-import { FaShoppingCart } from "react-icons/fa";
+import React, { useState } from "react";
+import { FaShoppingCart, FaCopy } from "react-icons/fa";
 import { Production } from "../../../types";
 import SelectWithNames from "./name-selector";
 import { ExternalLinks } from "./external-links";
 import { useDataList } from "./data-list-context";
+import "./styles.scss"; // Importez vos styles CSS ou SCSS
 
 const ContributorRequests: React.FC<{
   data: {
     id: any;
-    name: ReactNode;
+    name: string;
     productions: Production[];
   };
-  coloredName;
+  coloredName: string;
 }> = ({ data, coloredName }) => {
   const [copiedId, setCopiedId] = useState<string | null>(null);
   const { dataList } = useDataList();
 
   const copyToClipboard = (text: string) => {
     navigator.clipboard.writeText(text).then(() => {
       setCopiedId(text);
+      setTimeout(() => {
+        setCopiedId(null);
+      }, 2000); // Efface l'ID copié après 2 secondes
     });
   };
 
   return (
     <>
       {data.productions.map((production) => {
+        const isCopied = copiedId === production.id;
+
         return (
           <Col
             md="12"
             className="contributorProductionContent fr-mr-1v"
             key={production.id}
+            style={{ position: "relative" }}
           >
-            <div
-              onClick={() => {
-                copyToClipboard(production.id);
-              }}
-              style={{ flex: 2, marginRight: "10px" }}
-            >
+            <div style={{ flex: 2, display: "flex", alignItems: "center" }}>
               ID de la publication : {production.id}
+              <button
+                className={`copy-button ${isCopied ? "copied" : ""}`}
+                onClick={() => {
+                  copyToClipboard(production.id);
+                }}
+              >
+                {isCopied && <span className="copied-text">Copié</span>}
+                <FaCopy size={14} color="#2196f3" className="copy-icon" />
+              </button>
               {dataList.find((item) => item.publi_id === production.id)
                 ?.export && (
-                <FaShoppingCart className="fr-ml-2w" color="#21AB8E" />
+                <FaShoppingCart
+                  className="fr-ml-2w cart-icon"
+                  color="#21AB8E"
+                />
               )}
             </div>
-            {copiedId === production.id && (
-              <span
-                style={{
-                  flex: 1,
-                  color: "white",
-                  backgroundColor: "#efcb3a",
-                  marginLeft: "10px",
-                  padding: "2px 5px",
-                  borderRadius: "5px",
-                  fontSize: "0.8em",
-                }}
-              >
-                ID copié
-              </span>
-            )}
-            <Col style={{ flex: 1 }}>
+            <div style={{ flex: 1 }}>
               <SelectWithNames
                 productionId={production.id}
                 idRef={data.id}
                 coloredName={coloredName}
               />
-            </Col>
-            <Col style={{ flex: 1 }}>
+            </div>
+            <div style={{ flex: 1 }}>
               <ExternalLinks productionId={production.id} name={data.name} />
-            </Col>
+            </div>
           </Col>
         );
       })}

src/pages/api-operation-page/link-publications/data-list-context/index.tsx

@@ -1,17 +1,22 @@
-import { createContext, useState, useContext } from "react";
+import React, { createContext, useState, useContext } from "react";
 
-const DataListContext = createContext<{
-  dataList: any[];
+// Définition du type de contexte
+interface DataListContextType {
+  dataList: any[]; // Type de dataList à ajuster selon votre structure
   setDataList: React.Dispatch<React.SetStateAction<any[]>>;
-}>({
+}
+
+// Création du contexte avec une valeur par défaut
+const DataListContext = createContext<DataListContextType>({
   dataList: [],
   setDataList: () => {},
 });
 
+// Composant Provider pour le contexte
 export const DataListProvider: React.FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
-  const [dataList, setDataList] = useState<any[]>([]);
+  const [dataList, setDataList] = useState<any[]>([]); // Initialisation de dataList avec un tableau vide
 
   return (
     <DataListContext.Provider value={{ dataList, setDataList }}>
@@ -20,6 +25,7 @@ export const DataListProvider: React.FC<{ children: React.ReactNode }> = ({
   );
 };
 
+// Hook personnalisé pour utiliser le contexte
 export const useDataList = () => {
   return useContext(DataListContext);
 };