chore and fix: replace files, clean code, and resize cols

client/src/components/edit-modal/modal-select-tags.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import {
   Modal,
   ModalTitle,
@@ -23,7 +23,6 @@ const TagSelectionModal: React.FC<TagSelectionModalProps> = ({
       setSelectedTags([...selectedTags, tag]);
     }
   };
-
   const handleConfirm = () => {
     onClose(selectedTags);
   };

client/src/config/urlHelper.tsx

@@ -0,0 +1,23 @@
+import {
+  contactUrl,
+  contributionUrl,
+  nameChangeUrl,
+  productionUrl,
+  removeUserUrl,
+} from "../config/api";
+
+export function getUrlToSend(pathname: string): string {
+  if (pathname.includes("contributionPage")) {
+    return contributionUrl;
+  }
+  if (pathname.includes("scanr-removeuser")) {
+    return removeUserUrl;
+  }
+  if (pathname.includes("scanr-namechange")) {
+    return nameChangeUrl;
+  }
+  if (pathname.includes("apioperations")) {
+    return productionUrl;
+  }
+  return contactUrl;
+}

client/src/pages/api-operation-page/link-publications/contribution-production-card.tsx

@@ -13,10 +13,7 @@ import StaffProductionActions from "./staff-production-action";
 import { useState } from "react";
 import { FaCopy } from "react-icons/fa";
 import { Contribute_Production } from "../../../types";
-import {
-  BadgeStatus,
-  StatusLabel,
-} from "../../contact-contributionbyobject-page/components/utils";
+import { BadgeStatus, StatusLabel } from "../../../utils/index";
 
 const ContributionProductionItem = ({
   data,

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

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { FaShoppingCart, FaCopy } from "react-icons/fa";
 import SelectWithNames from "./name-selector";
 import { ExternalLinks } from "./external-links";

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

@@ -1,4 +1,4 @@
-import React, { createContext, useState, useContext } from "react";
+import { createContext, useState, useContext } from "react";
 
 interface DataListContextType {
   dataList: any[];

client/src/pages/api-operation-page/link-publications/index.tsx

@@ -61,7 +61,6 @@ const ContributionPage: React.FC<ContributionPageProps> = () => {
 
   const meta = fetchedData?.meta || {};
   const maxPage = meta.total ? Math.ceil(meta.total / 10) : 1;
-
   const handleSearch = (value: string) => {
     const trimmedValue = value.trim();
     if (trimmedValue !== "" && !query.includes(trimmedValue)) {

client/src/pages/api-operation-page/link-publications/name-selector.tsx

@@ -2,10 +2,10 @@ import { useEffect } from "react";
 import "react-toastify/dist/ReactToastify.css";
 import { toast } from "react-toastify";
 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";
 import ReactSelect from "react-select";
+import { levenshteinDistance } from "../../../utils/compare";
 
 export default function SelectWithNames({
   contributionId,

client/src/pages/contact-contributionbyobject-page/components/contribution-details.tsx

@@ -0,0 +1,35 @@
+import { Text } from "@dataesr/dsfr-plus";
+import { Contribution } from "../../../types";
+import ContributionItem from "./contribution-item";
+
+const ContributionDetails: React.FC<{
+  filteredContributions: Contribution[];
+  selectedContribution: string;
+  refetch: () => void;
+  highlightedQuery: string;
+  allTags: string[];
+  url: string;
+}> = ({
+  filteredContributions,
+  selectedContribution,
+  refetch,
+  highlightedQuery,
+  allTags,
+  url,
+}) =>
+  filteredContributions && filteredContributions.length > 0 ? (
+    <ContributionItem
+      allTags={allTags}
+      key={selectedContribution}
+      data={filteredContributions.find(
+        (contribution) => contribution?.id === selectedContribution
+      )}
+      refetch={refetch}
+      highlightedQuery={highlightedQuery}
+      url={url}
+    />
+  ) : (
+    <Text>Aucune contribution trouvée.</Text>
+  );
+
+export default ContributionDetails;

client/src/pages/contact-contributionbyobject-page/components/contribution-item.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { Badge, Col, Row, Text, Notice, Title } from "@dataesr/dsfr-plus";
 import ContributorInfo from "./contributor-info";
 import StaffActions from "./staff-action";
@@ -9,7 +9,7 @@ import {
   StatusLabel,
   TypeLabel,
   typeIcon,
-} from "./utils";
+} from "../../../utils";
 import "./styles.scss";
 import { FaCopy } from "react-icons/fa";
 

client/src/pages/contact-contributionbyobject-page/components/contributor-summary.tsx

@@ -13,7 +13,7 @@ import {
   StatusLabel,
   TypeLabel,
   typeIcon,
-} from "./utils";
+} from "../../../utils";
 
 const ContributorSummary: React.FC<ContributorSummaryProps> = ({
   contributions,

client/src/pages/contact-contributionbyobject-page/components/message-preview.tsx

@@ -4,8 +4,8 @@ import HighlightedMessage from "../../../components/highlighted-message";
 import { useLocation } from "react-router-dom";
 import EditModal from "../../../components/edit-modal";
 import { useState, useCallback } from "react";
-import { capitalizeFirstLetter } from "./utils/capitalize";
-import { CopyButton } from "./utils/copy-button";
+import { capitalizeFirstLetter } from "../../../utils/capitalize";
+import { CopyButton } from "../../../utils/copy-button";
 
 const MessagePreview = ({
   data,

client/src/pages/contact-contributionbyobject-page/components/page-title.tsx

@@ -0,0 +1,14 @@
+import { Title } from "@dataesr/dsfr-plus";
+
+const PageTitle: React.FC<{ pathname: string }> = ({ pathname }) => {
+  const getTitle = () => {
+    if (pathname.includes("contributionPage")) return "Contribution par objets";
+    if (pathname.includes("removeuser")) return "Demande de suppression";
+    if (pathname.includes("namechange")) return "Demande de changement de nom";
+    return "Contribution via formulaire de contact";
+  };
+
+  return <Title as="h1">{getTitle()}</Title>;
+};
+
+export default PageTitle;

client/src/pages/contact-contributionbyobject-page/components/pagination-section.tsx

@@ -0,0 +1,26 @@
+import BottomPaginationButtons from "../../../components/pagination/bottom-buttons";
+import TopPaginationButtons from "../../../components/pagination/top-buttons";
+
+const TopPaginationSection: React.FC<{
+  meta: any;
+  page: number;
+  maxPage: number;
+  setPage: (page: number) => void;
+}> = ({ meta, page, maxPage, setPage }) => (
+  <TopPaginationButtons
+    meta={meta}
+    page={page}
+    maxPage={maxPage}
+    setPage={setPage}
+  />
+);
+
+const BottomPaginationSection: React.FC<{
+  page: number;
+  maxPage: number;
+  setPage: (page: number) => void;
+}> = ({ page, maxPage, setPage }) => (
+  <BottomPaginationButtons page={page} maxPage={maxPage} setPage={setPage} />
+);
+
+export { TopPaginationSection, BottomPaginationSection };

client/src/pages/contact-contributionbyobject-page/components/search-section.tsx

@@ -0,0 +1,33 @@
+import { DismissibleTag, SearchBar } from "@dataesr/dsfr-plus";
+
+const SearchSection: React.FC<{
+  query: string[];
+  handleSearch: (value: string) => void;
+  handleRemoveQueryItem: (item: string) => void;
+}> = ({ query, handleSearch, handleRemoveQueryItem }) => (
+  <>
+    <SearchBar
+      className="fr-mb-1w"
+      onSearch={(value) => handleSearch(value || "")}
+      isLarge
+      buttonLabel="Rechercher"
+      placeholder="Rechercher par nom ou ID"
+    />
+    <div className="fr-mb-1w">
+      {query
+        .filter((item) => item.trim() !== "")
+        .map((item, index) => (
+          <DismissibleTag
+            key={index}
+            color="purple-glycine"
+            className="fr-mr-1w"
+            onClick={() => handleRemoveQueryItem(item)}
+          >
+            {item}
+          </DismissibleTag>
+        ))}
+    </div>
+  </>
+);
+
+export default SearchSection;

client/src/pages/contact-contributionbyobject-page/components/styles.scss

@@ -33,6 +33,8 @@
   padding: 20px;
   margin-left: 140px;
   margin-top: 10px;
+  word-wrap: break-word;
+  overflow: hidden;
 }
 
 .staffSideContact {

client/src/pages/contact-contributionbyobject-page/index.tsx

@@ -1,23 +1,17 @@
 import { useState, useEffect } from "react";
 import { useLocation } from "react-router-dom";
-import {
-  Col,
-  Container,
-  Row,
-  Text,
-  Title,
-  SearchBar,
-  DismissibleTag,
-} from "@dataesr/dsfr-plus";
+import { Col, Container, Row, Text } from "@dataesr/dsfr-plus";
 import ContributionData from "../../api/contribution-api/getData";
 import { buildURL } from "../../api/utils/buildURL";
 import { Contribution, ContributionPageProps } from "../../types";
-import BottomPaginationButtons from "../../components/pagination/bottom-buttons";
-import TopPaginationButtons from "../../components/pagination/top-buttons";
 import Selectors from "../../components/selectors";
-import ContributionItem from "./components/contribution-item";
 import ContributorSummary from "./components/contributor-summary";
-import { contactUrl, contributionUrl } from "../../config/api";
+import PageTitle from "./components/page-title";
+import SearchSection from "./components/search-section";
+import ContributionDetails from "./components/contribution-details";
+import TopPaginationButtons from "../../components/pagination/top-buttons";
+import BottomPaginationButtons from "../../components/pagination/bottom-buttons";
+import { getUrlToSend } from "../../config/urlHelper";
 
 const ContactAndContributionPage: React.FC<ContributionPageProps> = ({
   fromApplication,
@@ -26,15 +20,14 @@ const ContactAndContributionPage: React.FC<ContributionPageProps> = ({
   const [status, setStatus] = useState("choose");
   const [query, setQuery] = useState<string[]>([]);
   const [page, setPage] = useState(1);
-  const [searchInMessage, setSearchInMessage] = useState(false);
+  const [searchInMessage, setSearchInMessage] = useState(true);
   const [highlightedQuery, setHighlightedQuery] = useState("");
   const [selectedContribution, setSelectedContribution] = useState<string>("");
   const location = useLocation();
 
   useEffect(() => {
     const params = new URLSearchParams(location.search);
     setPage(parseInt(params.get("page") || "1"));
-    setSearchInMessage(params.get("searchInMessage") === "true");
     const queryParam = params.get("query") || "";
     setQuery(queryParam ? queryParam.split(",") : []);
     setSort(params.get("sort") || "DESC");
@@ -61,14 +54,8 @@ const ContactAndContributionPage: React.FC<ContributionPageProps> = ({
     searchInMessage,
     fromApplication
   );
-  let urlToSend;
-  if (location.pathname.includes("contributionPage")) {
-    urlToSend = contributionUrl;
-  } else if (location.pathname.includes("-contact")) {
-    urlToSend = contactUrl;
-  } else {
-    urlToSend = "";
-  }
+  const urlToSend = getUrlToSend(window.location.pathname);
+
   const { data, isLoading, isError, refetch } = ContributionData(url);
 
   const contributions: Contribution[] = data ? data.data : [];
@@ -77,6 +64,7 @@ const ContactAndContributionPage: React.FC<ContributionPageProps> = ({
 
   const getTags = ContributionData(urlToSend);
   const allTags = getTags?.data?.data?.map((tag) => tag?.tags);
+
   useEffect(() => {
     if (contributions && contributions.length > 0) {
       setSelectedContribution((prevSelectedContribution) => {
@@ -139,43 +127,14 @@ const ContactAndContributionPage: React.FC<ContributionPageProps> = ({
 
   return (
     <Container className="fr-my-5w">
-      <Title as="h1">
-        {(() => {
-          switch (true) {
-            case location.pathname.includes("contributionPage"):
-              return "Contribution par objets";
-            case location.pathname.includes("removeuser"):
-              return "Demande de suppression";
-            case location.pathname.includes("namechange"):
-              return "Demande de changement de nom";
-            default:
-              return "Contribution via formulaire de contact";
-          }
-        })()}
-      </Title>
+      <PageTitle pathname={location.pathname} />
       <Row gutters className="fr-mb-3w">
         <Col md="8" xs="12">
-          <SearchBar
-            className="fr-mb-1w"
-            onSearch={(value) => handleSearch(value || "")}
-            isLarge
-            buttonLabel="Rechercher"
-            placeholder="Rechercher par nom ou ID"
+          <SearchSection
+            query={query}
+            handleSearch={handleSearch}
+            handleRemoveQueryItem={handleRemoveQueryItem}
           />
-          <div className="fr-mb-1w">
-            {query
-              .filter((item) => item.trim() !== "")
-              .map((item, index) => (
-                <DismissibleTag
-                  key={index}
-                  color="purple-glycine"
-                  className="fr-mr-1w"
-                  onClick={() => handleRemoveQueryItem(item)}
-                >
-                  {item}
-                </DismissibleTag>
-              ))}
-          </div>
           <TopPaginationButtons
             meta={meta}
             page={page}
@@ -202,18 +161,14 @@ const ContactAndContributionPage: React.FC<ContributionPageProps> = ({
           />
         </Col>
         <Col md="7">
-          {filteredContributions && filteredContributions.length > 0 && (
-            <ContributionItem
-              allTags={allTags}
-              key={selectedContribution}
-              data={filteredContributions.find(
-                (contribution) => contribution?.id === selectedContribution
-              )}
-              refetch={refetch}
-              highlightedQuery={highlightedQuery}
-              url={url}
-            />
-          )}
+          <ContributionDetails
+            filteredContributions={filteredContributions}
+            selectedContribution={selectedContribution}
+            refetch={refetch}
+            highlightedQuery={highlightedQuery}
+            allTags={allTags}
+            url={url}
+          />
         </Col>
       </Row>
       <BottomPaginationButtons