feat(remove-user and updatedata): add remove-user and updatedata pages

src/api/utils/buildURL.tsx

@@ -7,13 +7,18 @@ export const buildURL = (
   searchInMessages: boolean = false
 ): string => {
   const isDevelopment = import.meta.env.VITE_HEADER_TAG === "Development";
+  const ticketOfficeApi = import.meta.env.BASE_API_URL;
   const baseApiUrl = isDevelopment
     ? "http://localhost:3000/api"
-    : "https://ticket-office-api.staging.dataesr.ovh/api";
+    : `${ticketOfficeApi}/api`;
 
   let baseUrl = "contact";
   if (location?.pathname?.includes("contributionpage")) {
     baseUrl = "contribute";
+  } else if (location?.pathname?.includes("removeuser")) {
+    baseUrl = "remove-user";
+  } else if (location?.pathname?.includes("namechange")) {
+    baseUrl = "update-user-data";
   } else if (location?.pathname?.includes("apioperations")) {
     baseUrl = "production";
   }
@@ -33,7 +38,9 @@ export const buildURL = (
       ];
 
       if (searchInMessages) {
-        where.$or.push({ message: { $regex: `.*${query}.*`, $options: "i" } });
+        where.$or.push({
+          message: { $regex: `.*${query}.*`, $options: "i" },
+        });
       }
     }
   }

src/config/api.ts

@@ -1,6 +1,5 @@
 const API_KEY = import.meta.env.VITE_SCANR_API_AUTHORIZATION;
 const isDevelopment = import.meta.env.VITE_HEADER_TAG === "Development";
-console.log(`API_KEY: ${API_KEY}`);
 export const headers = API_KEY ? { Authorization: `Basic ${API_KEY}` } : {};
 export const postHeaders = {
   ...headers,
@@ -18,3 +17,11 @@ export const contactUrl = isDevelopment
 export const productionUrl = isDevelopment
   ? "http://localhost:3000/api/production?max_results=2000"
   : "https://ticket-office-api.staging.dataesr.ovh/api/productionsmax_results=2000";
+
+export const nameChangeUrl = isDevelopment
+  ? "http://localhost:3000/api/update-user-data?max_results=2000"
+  : "https://ticket-office-api.staging.dataesr.ovh/api/update-user-datamax_results=2000";
+
+export const removeUserUrl = isDevelopment
+  ? "http://localhost:3000/api/remove-user?max_results=2000"
+  : "https://ticket-office-api.staging.dataesr.ovh/api/remove-usermax_results=2000";

src/layout/header.tsx

@@ -109,7 +109,10 @@ const Header: React.FC = () => {
             >
               Lier des publications
             </Link>
-            <Link current={pathname.startsWith("/delete")} href="/delete">
+            <Link
+              current={pathname.startsWith("/removeuser")}
+              href="/removeuser"
+            >
               Supprimer des personnes de la base de données
             </Link>
             <Link

src/pages/change-name/index.tsx

@@ -1,9 +1,196 @@
-import { Container, Title } from "@dataesr/dsfr-plus";
+import { useState, useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import {
+  Col,
+  Container,
+  Row,
+  Text,
+  Title,
+  SearchBar,
+  DismissibleTag,
+} from "@dataesr/dsfr-plus";
+import ContributionData from "../../api/contribution-api/getData";
+import { ChangeNamePageProps, ChangeNameProps } from "../../types";
+import BottomPaginationButtons from "../../components/pagination/bottom-buttons";
+import TopPaginationButtons from "../../components/pagination/top-buttons";
+import Selectors from "../../components/selectors";
+import { nameChangeUrl } from "../../config/api";
+import ContributorSummary from "../contribution-page/contributor-summary";
+import ContributionItem from "../contribution-page/contribution-item";
+import { buildURL } from "../../api/utils/buildURL";
+
+const ChangeNamePage: React.FC<ChangeNamePageProps> = () => {
+  const [sort, setSort] = useState("DESC");
+  const [status, setStatus] = useState("choose");
+  const [query, setQuery] = useState<string[]>([]);
+  const [page, setPage] = useState(1);
+  const [searchInMessage, setSearchInMessage] = useState(false);
+  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");
+    setStatus(params.get("status") || "choose");
+  }, [location.search]);
+
+  useEffect(() => {
+    const newSearchParams = new URLSearchParams();
+    newSearchParams.set("page", page.toString());
+    newSearchParams.set("query", query.join(","));
+    newSearchParams.set("searchInMessage", searchInMessage.toString());
+    newSearchParams.set("sort", sort);
+    newSearchParams.set("status", status);
+
+    const newURL = `${window.location.pathname}?${newSearchParams.toString()}`;
+    window.history.pushState({}, "", newURL);
+  }, [page, query, searchInMessage, sort, status]);
+
+  const url = buildURL(location, sort, status, query.join(" "), page);
+  console.log(url);
+  let urlToSend = nameChangeUrl;
+  const { data, isLoading, isError, refetch } = ContributionData(url);
+  const getTags = ContributionData(urlToSend);
+  const allTags = getTags?.data?.map((tag) => tag?.tags);
+  const meta = (data as { meta: any })?.meta;
+  const maxPage = meta ? Math.ceil(meta.total / 10) : 1;
+  const contributions: ChangeNameProps[] = data;
+
+  useEffect(() => {
+    if (contributions && contributions.length > 0) {
+      setSelectedContribution((prevSelectedContribution) => {
+        const isValid = contributions.some(
+          (contribution) => contribution._id === prevSelectedContribution
+        );
+        return isValid ? prevSelectedContribution : contributions[0]?._id;
+      });
+    }
+  }, [contributions]);
+
+  const handleSearch = (value: string) => {
+    const trimmedValue = value.trim();
+    if (trimmedValue !== "" && !query.includes(trimmedValue)) {
+      setQuery([...query, trimmedValue]);
+      setHighlightedQuery(trimmedValue);
+    }
+  };
+
+  const handleRemoveQueryItem = (item: string) => {
+    setQuery(query.filter((q) => q !== item));
+  };
+
+  const onSelectContribution = (id: string) => {
+    setSelectedContribution(id);
+  };
+
+  const filteredContributions = contributions?.filter((contribution) => {
+    if (query.length === 0) {
+      return true;
+    }
+    const queryLower = query.map((q) => q.toLowerCase());
+    const nameMatches = queryLower.some((q) =>
+      contribution.name.toLowerCase().includes(q)
+    );
+    const idMatches = queryLower.some((q) =>
+      contribution._id.toLowerCase().includes(q)
+    );
+    if (searchInMessage) {
+      const messageMatches = queryLower.some((q) =>
+        contribution.message.toLowerCase().includes(q)
+      );
+      return nameMatches || idMatches || messageMatches;
+    }
+    return nameMatches || idMatches;
+  });
+
+  if (isLoading)
+    return (
+      <Container className="fr-my-5w">
+        <Text>Chargement...</Text>
+      </Container>
+    );
+
+  if (isError)
+    return (
+      <Container className="fr-my-5w">
+        <Text>Erreur lors du chargement des données.</Text>
+      </Container>
+    );
 
-const ChangeNamePage = () => {
   return (
-    <Container className="fr-mt-10v">
-      <Title>Changer le nom des personnes de la base de donnée</Title>
+    <Container className="fr-my-5w">
+      <Title as="h1">Demande de changement de nom</Title>
+      <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"
+          />
+          <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}
+            maxPage={maxPage}
+            setPage={setPage}
+          />
+        </Col>
+        <Col offsetLg="1">
+          <Selectors
+            sort={sort}
+            status={status}
+            setSort={setSort}
+            setStatus={setStatus}
+            searchInMessage={searchInMessage}
+            setSearchInMessage={setSearchInMessage}
+          />
+        </Col>
+      </Row>
+      <Row>
+        <Col md="4">
+          <ContributorSummary
+            contributions={filteredContributions}
+            onSelectContribution={onSelectContribution}
+          />
+        </Col>
+        <Col md="7">
+          {filteredContributions && filteredContributions.length > 0 && (
+            <ContributionItem
+              allTags={allTags}
+              key={selectedContribution}
+              data={filteredContributions.find(
+                (contribution) => contribution?._id === selectedContribution
+              )}
+              refetch={refetch}
+              highlightedQuery={highlightedQuery}
+            />
+          )}
+        </Col>
+      </Row>
+      <BottomPaginationButtons
+        page={page}
+        maxPage={maxPage}
+        setPage={setPage}
+      />
     </Container>
   );
 };