feat(contributors & contact): merge contributors and contact page

.github/workflows/staging.yml

@@ -55,7 +55,7 @@ jobs:
 
   notify:
     name: 📢 Notify in mattermost channel
-    needs: deploy
+    needs: publish-ghcr
     if: always()
     runs-on: ubuntu-latest
     steps:

sib-api-v3-sdk.d.ts

@@ -0,0 +1 @@
+declare module "sib-api-v3-sdk";

src/api/contribution-api/useGetObjectContributeData.tsx

@@ -26,7 +26,6 @@ function useGetContributionData(URL: {}, reload: unknown) {
       }
     }
     getData();
-    console.log(data);
   }, [URL, reload]);
 
   return { data, isLoading, isError };

src/api/send-mail/index.tsx

@@ -1,10 +1,12 @@
 import { useState } from "react";
 import { Button, Text, TextArea } from "@dataesr/dsfr-plus";
 import SibApiV3Sdk from "sib-api-v3-sdk";
+import { Contribution } from "../../types";
 
-function EmailSender({ contribution }) {
+function EmailSender({ contribution }: { contribution: Contribution }) {
   const [emailSent, setEmailSent] = useState(false);
   const [response, setResponse] = useState("");
+
   const { VITE_BREVO_API_AUTHORIZATION } = import.meta.env;
 
   const sendEmail = async () => {

src/api/utils/buildURL.tsx

@@ -0,0 +1,31 @@
+import { useLocation } from "react-router-dom";
+
+export const buildURL = (
+  sort: string,
+  status: string,
+  query: string,
+  page: number,
+  searchInMessages: boolean = false
+): string => {
+  const location = useLocation();
+  const baseUrl = location.pathname.includes("contributionpage")
+    ? "contribute"
+    : "contact";
+  const sorted = sort === "ASC" ? "sort=created_at" : "sort=-created_at";
+  const where: any = {};
+  if (query) {
+    where.$or = [
+      { name: { $regex: `.*${query}.*`, $options: "i" } },
+      searchInMessages && {
+        message: { $regex: `.*${query}.*`, $options: "i" },
+      },
+    ];
+  }
+  if (["new", "ongoing", "treated"].includes(status)) {
+    where.status = status;
+  }
+
+  return `https://scanr-api.dataesr.ovh/${baseUrl}?${sorted}&page=${page}&max_results=20&where=${JSON.stringify(
+    where
+  )}`;
+};

src/pages/contribution-page/contribution-card.tsx

@@ -1,4 +1,3 @@
-import { useState } from "react";
 import {
   Accordion,
   AccordionGroup,
@@ -12,22 +11,15 @@ import {
 import "./styles.scss";
 import ContributorInfo from "./contributor-info";
 import StaffActions from "./staff-action";
+import { Contribution } from "../../types";
 
-const ContributionItem = ({ data }: { data: any }) => {
-  const [showReplyForm, setShowReplyForm] = useState(false);
-
-  const toggleReplyForm = () => {
-    setShowReplyForm(!showReplyForm);
-  };
-
-  const renderMessage = () => {
-    const messageLines = data.message.split("\n");
-    if (messageLines.length <= 4) {
-      return data.message;
-    } else {
-      return messageLines.slice(8, 4).join("\n");
-    }
-  };
+const ContributionItem = ({
+  data,
+  highlightedQuery,
+}: {
+  data: Contribution;
+  highlightedQuery: string;
+}) => {
   const renderAccordion = () => (
     <Container fluid className="accordion">
       <Row className="top-accordion">
@@ -38,7 +30,7 @@ const ContributionItem = ({ data }: { data: any }) => {
               color="purple-glycine"
               className="fr-mr-1w fr-mb-1w tag"
             >
-              {data?.tags?.join(", ")}
+              {data.tags.join(", ")}
             </Badge>
           )}
           <Badge
@@ -75,16 +67,8 @@ const ContributionItem = ({ data }: { data: any }) => {
             Aucune réponse apportée à ce message pour l'instant
           </Notice>
         )}
-        <ContributorInfo
-          data={data}
-          renderMessage={renderMessage}
-          showDetails={undefined}
-        />
-        <StaffActions
-          data={data}
-          showReplyForm={showReplyForm}
-          toggleReplyForm={toggleReplyForm}
-        />
+        <ContributorInfo data={data} highlightedQuery={highlightedQuery} />
+        <StaffActions data={data} />
       </Accordion>
     </AccordionGroup>
   );

src/pages/contribution-page/contributor-info.tsx

@@ -1,21 +1,14 @@
+import { Contribution } from "../../types";
 import MessagePreview from "./message-preview";
 
 const ContributorInfo = ({
   data,
-  renderMessage,
-  showDetails,
+  highlightedQuery,
 }: {
-  data: any;
-  renderMessage: any;
-  showDetails: any;
+  data: Contribution;
+  highlightedQuery: string;
 }) => {
-  return (
-    <MessagePreview
-      data={data}
-      renderMessage={renderMessage}
-      showDetails={showDetails}
-    />
-  );
+  return <MessagePreview data={data} highlightedQuery={highlightedQuery} />;
 };
 
 export default ContributorInfo;

src/pages/contribution-page/index.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, Key } from "react";
+import React, { useState, useEffect } from "react";
 import {
   Button,
   Col,
@@ -10,46 +10,55 @@ import {
 } from "@dataesr/dsfr-plus";
 import ContributionItem from "./contribution-card";
 import useGetContributionData from "../../api/contribution-api/useGetObjectContributeData";
+import { Contribution, ContributionPageProps } from "../../types";
+import { useLocation } from "react-router-dom";
+import { buildURL } from "../../api/utils/buildURL";
 
-type ContributionPageProps = {
-  url: string;
-};
 const ContributionPage: React.FC<ContributionPageProps> = () => {
   const [reload] = useState(0);
   const [sort, setSort] = useState("DESC");
   const [status, setStatus] = useState("new");
   const [query, setQuery] = useState("");
   const [page, setPage] = useState(1);
+  const [searchInMessage, setSearchInMessage] = useState(false);
+  const [highlightedQuery, setHighlightedQuery] = useState("");
 
-  const buildURL = () => {
-    const sorted = sort === "ASC" ? "sort=created_at" : "sort=-created_at";
-    const where: any = {};
-    if (query) {
-      where.data = { $text: { $search: query } };
-    }
-    if (["new", "ongoing", "treated"].includes(status)) {
-      where.status = status;
-    }
-
-    return `https://scanr-api.dataesr.ovh/contribute?${sorted}&page=${page}&max_results=20&where=${JSON.stringify(
-      where
-    )}`;
-  };
+  const location = useLocation();
 
   const { data, isLoading, isError } = useGetContributionData(
-    buildURL(),
+    buildURL(sort, status, query, page, searchInMessage),
     reload
   );
+
   useEffect(() => {
     setPage(1);
-  }, [reload]);
+  }, [reload, location.pathname]);
 
   const meta = (data as { meta: any }).meta;
   const maxPage = meta ? Math.ceil(meta.total / 10) : 1;
-  const contrib = (data as { data: any }).data;
+  const contrib: Contribution[] = (data as { data: Contribution[] }).data;
 
-  if (isLoading) return <span>LOADING</span>;
-  if (isError) return <span>ERROR</span>;
+  const handleSearch = (value: string) => {
+    setQuery(value.trim());
+    setHighlightedQuery(value.trim());
+  };
+  console.log(highlightedQuery);
+
+  const filteredContributions = contrib?.filter((contribution) => {
+    const nameMatches = contribution.name
+      .toLowerCase()
+      .includes(query.toLowerCase());
+    if (searchInMessage) {
+      const messageMatches = contribution.message
+        .toLowerCase()
+        .includes(query.toLowerCase());
+      return nameMatches || messageMatches;
+    }
+    return nameMatches;
+  });
+
+  if (isLoading) return <Text>LOADING</Text>;
+  if (isError) return <Text>ERROR</Text>;
 
   return (
     <Container className="fr-my-5w">
@@ -58,7 +67,7 @@ const ContributionPage: React.FC<ContributionPageProps> = () => {
         <Col md="8" xs="12">
           <SearchBar
             className="fr-mb-1w"
-            onSearch={(e: any) => setQuery(e.target.value)}
+            onSearch={(value) => handleSearch(value || "")}
             isLarge
             buttonLabel="Rechercher"
             placeholder="Rechercher par nom"
@@ -109,10 +118,20 @@ const ContributionPage: React.FC<ContributionPageProps> = () => {
             <option value="ongoing">Contribution en traitement</option>
             <option value="treated">Contributions traités</option>
           </select>
+          <input
+            type="checkbox"
+            id="searchInMessage"
+            checked={searchInMessage}
+            onChange={(e) => setSearchInMessage(e.target.checked)}
+          />
+          <label htmlFor="searchInMessage">Rechercher dans les messages</label>
         </Col>
       </Row>
-      {contrib.map((contribution: { _id: Key | null | undefined }) => (
-        <ContributionItem key={contribution._id} data={contribution} />
+      {filteredContributions.map((contribution) => (
+        <ContributionItem
+          data={contribution}
+          highlightedQuery={highlightedQuery}
+        />
       ))}
       <Row className="fr-grid-row--center fr-mt-5w">
         <Button

src/pages/contribution-page/message-preview.tsx

@@ -1,52 +1,62 @@
-import { Row, Text } from "@dataesr/dsfr-plus";
-import { Contribution } from "../../types/contribution";
-
+import { Col, Row, Text } from "@dataesr/dsfr-plus";
+import type { Contribution } from "../../types";
 const MessagePreview = ({
   data,
-  renderMessage,
-  showDetails,
+  highlightedQuery,
 }: {
   data: Contribution;
-  renderMessage: () => JSX.Element;
-  showDetails: boolean;
+  highlightedQuery: string;
 }) => {
+  const renderHighlightedMessage = () => {
+    console.log(highlightedQuery);
+    if (!highlightedQuery) return data?.message;
+
+    const lowerCaseMessage = data?.message?.toLowerCase();
+    const lowerCaseQuery = highlightedQuery?.toLowerCase();
+    const index = lowerCaseMessage.indexOf(lowerCaseQuery);
+    if (index === -1) return data?.message;
+
+    const prefix = data?.message.substring(0, index);
+    const highlight = data?.message.substring(
+      index,
+      index + highlightedQuery?.length
+    );
+    const suffix = data?.message?.substring(index + highlightedQuery?.length);
+
+    return (
+      <>
+        {prefix}
+        <span style={{ backgroundColor: "yellow" }}>{highlight}</span>
+        {suffix}
+      </>
+    );
+  };
+
   return (
     <Row className="contributorSide">
-      <Text size="sm">
-        <div className="message-info">
-          <div className="info-group">
-            <div className="info-item">
-              {data.id && (
-                <div
-                  className={
-                    data.type === "structure"
-                      ? "fr-icon-building-line"
-                      : "fr-icon-user-line"
-                  }
-                >
-                  ID de l'objet concerné : {data.id}
-                </div>
-              )}
-            </div>
-            <div className="info-item">
-              <div className="name">
-                {data.name ? `Nom: ${data.name}` : "Nom non renseigné"}
-              </div>
-              {data.email && <div>Email: {data.email}</div>}
-            </div>
-            <div className="info-item">
-              {data.organisation && (
-                <div>Organisation: {data.organisation}</div>
-              )}
-              {data.fonction && <div>Fonction: {data.fonction}</div>}
-            </div>
-            <div className="info-item">
-              Reçu le {new Date(data.created_at).toLocaleDateString()}
-            </div>
-          </div>
-        </div>
-        Message: {showDetails ? data.message : renderMessage()}
-      </Text>
+      <>
+        {data.id && (
+          <Col
+            className={
+              data.type === "structure"
+                ? "fr-icon-building-line"
+                : "fr-icon-user-line"
+            }
+          >
+            ID de l'objet concerné : {data.id}
+          </Col>
+        )}
+        <Col>
+          <Text>{data.name ? `Nom: ${data.name}` : "Nom non renseigné"}</Text>
+          {data.email && <Text>Email: {data.email}</Text>}
+        </Col>
+        <Col className="contributorInfo">
+          {data.organisation && <Text>Organisation: {data.organisation}</Text>}
+          {data.fonction && <Text>Fonction: {data.fonction}</Text>}
+          <Text>Reçu le {new Date(data.created_at).toLocaleDateString()}</Text>
+        </Col>
+      </>
+      <Text>Message: {renderHighlightedMessage()}</Text>
     </Row>
   );
 };