fix(copy-button): make the same copy button everywhere

dataesr · Jun 17, 2024 · f6ee1f9 · f6ee1f9
1 parent 904f57f
commit f6ee1f9
Show file tree

Hide file tree

Showing 6 changed files with 125 additions and 138 deletions.
diff --git a/src/pages/api-operation-page/link-publications/message-preview.tsx b/src/pages/api-operation-page/link-publications/message-preview.tsx
@@ -1,5 +1,5 @@
 import "react-toastify/dist/ReactToastify.css";
-import { toast } from "react-toastify";
+import { toast, ToastContainer } from "react-toastify";
 import { Button, Col, Container, Link, Row, Text } from "@dataesr/dsfr-plus";
 import type { Contribute_Production } from "../../../types";
 import EditModal from "../../../components/edit-modal";
@@ -8,6 +8,7 @@ import ContributorRequests from "./contributor-requests";
 import "./styles.scss";
 import NameFromIdref from "../../../api/contribution-api/getNamesFromIdref";
 import { useDataList } from "./data-list-context";
+import { FaCopy } from "react-icons/fa";
 
 const MessagePreview = ({
   data,
@@ -17,15 +18,16 @@ const MessagePreview = ({
   refetch: () => void;
 }) => {
   const [showModal, setShowModal] = useState(false);
-  const [copySuccess, setCopySuccess] = useState("");
+  const [copiedId, setCopiedId] = useState<string | null>(null);
+
   const { setDataList } = useDataList();
 
   const { fullNameFromIdref: fetchedData } = NameFromIdref(data.id);
 
-  const copyToClipboard = useCallback((text, successMessage) => {
+  const copyToClipboard = useCallback((text: string) => {
     navigator.clipboard.writeText(text).then(() => {
-      setCopySuccess(successMessage);
-      setTimeout(() => setCopySuccess(""), 2000);
+      setCopiedId(text);
+      setTimeout(() => setCopiedId(null), 2000);
     });
   }, []);
 
@@ -81,6 +83,7 @@ const MessagePreview = ({
 
   return (
     <Container fluid>
+      <ToastContainer />
       {data.comment && (
         <Row className="fr-grid-row--center">
           <Col md="8" className="comment">
@@ -102,24 +105,18 @@ const MessagePreview = ({
           <Text
             size="sm"
             style={{ cursor: "pointer" }}
-            onClick={() => copyToClipboard(data.id, "ID copié")}
-            className={"fr-icon-user-line"}
+            className="fr-icon-user-line"
           >
             ID de la personne concernée : {data.id}{" "}
-            {copySuccess === "ID copié" && (
-              <span
-                style={{
-                  color: "white",
-                  backgroundColor: "#efcb3a",
-                  marginLeft: "10px",
-                  padding: "2px 5px",
-                  borderRadius: "5px",
-                  fontSize: "0.8em",
-                }}
-              >
-                {copySuccess}
-              </span>
-            )}
+            <button
+              className={`copy-button ${copiedId === data.id ? "copied" : ""}`}
+              onClick={() => copyToClipboard(data.id)}
+            >
+              {copiedId === data.id && (
+                <span className="copied-text">Copié</span>
+              )}
+              <FaCopy size={14} color="#2196f3" className="copy-icon" />
+            </button>
           </Text>
         )}
         <Link
@@ -137,49 +134,38 @@ const MessagePreview = ({
             cursor: "pointer",
             color: fetchedData ? "inherit" : "#f95c5e",
           }}
-          onClick={() => copyToClipboard(fetchedData, "Nom copié")}
         >
           {fetchedData ? `${fetchedData}` : "Nom non existant sur scanR"}
-          {copySuccess === "Nom copié" && (
-            <span
-              style={{
-                color: "white",
-                backgroundColor: "#efcb3a",
-                marginLeft: "10px",
-                padding: "2px 5px",
-                borderRadius: "5px",
-                fontSize: "0.8em",
-              }}
-            >
-              Copié !
-            </span>
-          )}
+          <button
+            className={`copy-button ${
+              fetchedData === data.name ? "copied" : ""
+            }`}
+            onClick={() => copyToClipboard(fetchedData)}
+          >
+            {copiedId === fetchedData && (
+              <span className="copied-text">Copié</span>
+            )}
+            <FaCopy size={14} color="#2196f3" className="copy-icon" />
+          </button>{" "}
         </Text>
         <Text size="sm">
           {"Nom lié à l'idref "}
           <span style={{ fontWeight: "bold" }}>{data.name}</span>
         </Text>
         {data.email && (
-          <Text
-            size="sm"
-            style={{ cursor: "pointer" }}
-            onClick={() => copyToClipboard(data.email, "Email copié")}
-          >
+          <Text size="sm" style={{ cursor: "pointer" }}>
             Email : {data.email}
-            {copySuccess === "Email copié" && (
-              <span
-                style={{
-                  color: "white",
-                  backgroundColor: "#efcb3a",
-                  marginLeft: "10px",
-                  padding: "2px 5px",
-                  borderRadius: "5px",
-                  fontSize: "0.8em",
-                }}
-              >
-                {copySuccess}
-              </span>
-            )}
+            <button
+              className={`copy-button ${
+                copiedId === data.email ? "copied" : ""
+              }`}
+              onClick={() => copyToClipboard(data.email)}
+            >
+              {copiedId === data.email && (
+                <span className="copied-text">Copié</span>
+              )}
+              <FaCopy size={14} color="#2196f3" className="copy-icon" />
+            </button>
           </Text>
         )}
       </Row>

diff --git a/src/pages/contribution-page/contribution-item.tsx b/src/pages/contribution-page/contribution-item.tsx
@@ -1,13 +1,5 @@
 import React from "react";
-import {
-  Badge,
-  Col,
-  Container,
-  Row,
-  Text,
-  Notice,
-  Title,
-} from "@dataesr/dsfr-plus";
+import { Badge, Col, Row, Text, Notice, Title } from "@dataesr/dsfr-plus";
 import ContributorInfo from "./contributor-info";
 import StaffActions from "./staff-action";
 import { Contribution } from "../../types";
@@ -25,7 +17,7 @@ const ContributionItem: React.FC<ContributionItemProps> = ({
   refetch,
 }) => {
   return (
-    <Container fluid>
+    <>
       <div>
         {data?.tags?.length > 0 && (
           <Badge size="sm" color="purple-glycine" className="fr-mr-1w fr-mb-1w">
@@ -76,7 +68,7 @@ const ContributionItem: React.FC<ContributionItemProps> = ({
         />
         <StaffActions refetch={refetch} data={data} />
       </Col>
-    </Container>
+    </>
   );
 };
 

diff --git a/src/pages/contribution-page/contributor-summary.tsx b/src/pages/contribution-page/contributor-summary.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { Badge, SideMenu, SideMenuItem, Text } from "@dataesr/dsfr-plus";
 import { Contribution } from "../../types";
+import { BadgeColor } from "./utils";
 
 interface ContributorSummaryProps {
   contributions: Contribution[];
@@ -32,6 +33,15 @@ const ContributorSummary: React.FC<ContributorSummaryProps> = ({
                   {contribution.status}
                 </Badge>
               )}
+              {contribution?.type && (
+                <Badge
+                  size="sm"
+                  color={BadgeColor({ type: contribution.type })}
+                  className="fr-mr-1w fr-mb-1w"
+                >
+                  {contribution.type}
+                </Badge>
+              )}
               {contribution?.tags?.length > 0 && (
                 <Badge
                   size="sm"
@@ -41,10 +51,12 @@ const ContributorSummary: React.FC<ContributorSummaryProps> = ({
                   {contribution.tags.join(", ")}
                 </Badge>
               )}
-              <Text size="sm">{contribution.name}</Text>
-              <Text size="sm" className="fr-text--italic">
-                {new Date(contribution.created_at).toLocaleDateString()}
-              </Text>
+              <div>
+                <Text size="sm">{contribution.name}</Text>
+                <Text size="sm" className="fr-text--italic">
+                  {new Date(contribution.created_at).toLocaleDateString()}
+                </Text>
+              </div>
             </div>
           }
           defaultExpanded={false}

diff --git a/src/pages/contribution-page/index.tsx b/src/pages/contribution-page/index.tsx
@@ -134,7 +134,7 @@ const ContributionPage: React.FC<ContributionPageProps> = () => {
             onSelectContribution={onSelectContribution}
           />
         </Col>
-        <Col>
+        <Col md="9">
           {filteredContributions && filteredContributions.length > 0 && (
             <ContributionItem
               key={selectedContribution}

diff --git a/src/pages/contribution-page/message-preview.tsx b/src/pages/contribution-page/message-preview.tsx
@@ -4,6 +4,7 @@ import HighlightedMessage from "../../components/highlighted-message";
 import { useLocation } from "react-router-dom";
 import EditModal from "../../components/edit-modal";
 import { useState, useCallback } from "react";
+import { FaCopy } from "react-icons/fa";
 
 const MessagePreview = ({
   data,
@@ -16,12 +17,12 @@ const MessagePreview = ({
 }) => {
   const location = useLocation();
   const [showModal, setShowModal] = useState(false);
-  const [copySuccess, setCopySuccess] = useState("");
+  const [copiedId, setCopiedId] = useState<string | null>(null);
 
-  const copyToClipboard = useCallback((text, successMessage) => {
+  const copyToClipboard = useCallback((text: string) => {
     navigator.clipboard.writeText(text).then(() => {
-      setCopySuccess(successMessage);
-      setTimeout(() => setCopySuccess(""), 2000);
+      setCopiedId(text);
+      setTimeout(() => setCopiedId(null), 2000);
     });
   }, []);
 
@@ -45,63 +46,57 @@ const MessagePreview = ({
         <Row>
           {data?.id && (
             <Col>
-              <Text
-                size="sm"
-                style={{ cursor: "pointer" }}
-                onClick={() => copyToClipboard(data.id, "ID copié")}
-                className={
-                  data.type === "structure"
-                    ? "fr-icon-building-line"
-                    : "fr-icon-user-line"
-                }
-              >
+              <Text size="sm">
                 ID de l'objet concerné: <strong>{data.id}</strong>
-                {copySuccess === "ID copié" && (
-                  <span
-                    style={{
-                      color: "white",
-                      backgroundColor: "#efcb3a",
-                      marginLeft: "10px",
-                      padding: "2px 5px",
-                      borderRadius: "5px",
-                      fontSize: "0.8em",
-                    }}
-                  >
-                    {copySuccess}
-                  </span>
-                )}
+                <button
+                  className={`copy-button ${
+                    copiedId === data.id ? "copied" : ""
+                  }`}
+                  onClick={() => copyToClipboard(data.id)}
+                >
+                  {copiedId === data.id && (
+                    <span className="copied-text">Copié</span>
+                  )}
+                  <FaCopy size={14} color="#2196f3" className="copy-icon" />
+                </button>
               </Text>
             </Col>
           )}
           <Col>
             <Text size="sm">
               Nom: {data?.name ? <strong>{data.name}</strong> : "non renseigné"}
+              {data?.name && (
+                <button
+                  className={`copy-button ${
+                    copiedId === data.name ? "copied" : ""
+                  }`}
+                  onClick={() => copyToClipboard(data.name)}
+                >
+                  {copiedId === data.name && (
+                    <span className="copied-text">Copié</span>
+                  )}
+                  <FaCopy size={14} color="#2196f3" className="copy-icon" />
+                </button>
+              )}
             </Text>
           </Col>
         </Row>
         {data?.email && (
           <Row>
             <Col>
-              <Text
-                size="sm"
-                style={{ cursor: "pointer" }}
-                onClick={() => copyToClipboard(data.email, "Email copié")}
-              >
+              <Text size="sm">
                 Email: <strong>{data.email}</strong>
-                {copySuccess === "Email copié" && (
-                  <span
-                    style={{
-                      color: "white",
-                      backgroundColor: "#efcb3a",
-                      marginLeft: "10px",
-                      padding: "2px 5px",
-                      borderRadius: "5px",
-                      fontSize: "0.8em",
-                    }}
-                  >
-                    {copySuccess}
-                  </span>
-                )}
+                <button
+                  className={`copy-button ${
+                    copiedId === data.email ? "copied" : ""
+                  }`}
+                  onClick={() => copyToClipboard(data.email)}
+                >
+                  {copiedId === data.email && (
+                    <span className="copied-text">Copié</span>
+                  )}
+                  <FaCopy size={14} color="#2196f3" className="copy-icon" />
+                </button>
               </Text>
             </Col>
           </Row>
@@ -111,6 +106,17 @@ const MessagePreview = ({
             {data?.organisation ? (
               <Text size="sm">
                 Organisation: <strong>{data.organisation}</strong>
+                <button
+                  className={`copy-button ${
+                    copiedId === data.organisation ? "copied" : ""
+                  }`}
+                  onClick={() => copyToClipboard(data.organisation)}
+                >
+                  {copiedId === data.organisation && (
+                    <span className="copied-text">Copié</span>
+                  )}
+                  <FaCopy size={14} color="#2196f3" className="copy-icon" />
+                </button>
               </Text>
             ) : (
               <Text size="sm" bold>
@@ -122,6 +128,17 @@ const MessagePreview = ({
             {data?.fonction ? (
               <Text size="sm">
                 Fonction: <strong>{data.fonction}</strong>
+                <button
+                  className={`copy-button ${
+                    copiedId === data.fonction ? "copied" : ""
+                  }`}
+                  onClick={() => copyToClipboard(data.fonction)}
+                >
+                  {copiedId === data.fonction && (
+                    <span className="copied-text">Copié</span>
+                  )}
+                  <FaCopy size={14} color="#2196f3" className="copy-icon" />
+                </button>
               </Text>
             ) : (
               <Text size="sm" bold>