fix(search): update buildURL and make a componen of highlightedmessage

dataesr · Apr 24, 2024 · 0d41345 · 0d41345
1 parent de417e4
commit 0d41345
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 47 deletions.
diff --git a/src/api/utils/buildURL.tsx b/src/api/utils/buildURL.tsx
@@ -13,19 +13,20 @@ export const buildURL = (
     : "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 (query.trim() !== "") {
+    where.$or = [{ name: { $regex: `.*${query}.*`, $options: "i" } }];
+    if (searchInMessages) {
+      where.$or.push({ 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
-  )}`;
+  const whereQuery =
+    Object.keys(where).length > 0 ? `&where=${JSON.stringify(where)}` : "";
+
+  return `https://scanr-api.dataesr.ovh/${baseUrl}?${sorted}&page=${page}&max_results=20${whereQuery}`;
 };
diff --git a/src/components/highlightedMessage/index.tsx b/src/components/highlightedMessage/index.tsx
@@ -0,0 +1,32 @@
+const HighlightedMessage = ({
+  message,
+  highlightedQuery,
+}: {
+  message: string;
+  highlightedQuery: string;
+}) => {
+  const renderHighlightedMessage = () => {
+    if (!highlightedQuery) return message;
+
+    const lowerCaseMessage = message?.toLowerCase();
+    const lowerCaseQuery = highlightedQuery?.toLowerCase();
+    const index = lowerCaseMessage.indexOf(lowerCaseQuery);
+    if (index === -1) return message;
+
+    const prefix = message.substring(0, index);
+    const highlight = message.substring(index, index + highlightedQuery.length);
+    const suffix = message.substring(index + highlightedQuery.length);
+
+    return (
+      <>
+        {prefix}
+        <span style={{ backgroundColor: "#efcb3a" }}>{highlight}</span>
+        {suffix}
+      </>
+    );
+  };
+
+  return <>{renderHighlightedMessage()}</>;
+};
+
+export default HighlightedMessage;
diff --git a/src/pages/contribution-page/contribution-card.tsx b/src/pages/contribution-page/contribution-card.tsx
@@ -12,6 +12,7 @@ import "./styles.scss";
 import ContributorInfo from "./contributor-info";
 import StaffActions from "./staff-action";
 import { Contribution } from "../../types";
+import HighlightedMessage from "../../components/highlightedMessage";
 
 const ContributionItem = ({
   data,
@@ -51,8 +52,14 @@ const ContributionItem = ({
             {data.name}
           </Text>
           <i className="message">
-            {data.message.slice(0, 130)}
-            {data.message.length > 70 ? "..." : ""}
+            <HighlightedMessage
+              message={
+                data.message.length > 70
+                  ? `${data.message.slice(0, 70)}...`
+                  : data.message
+              }
+              highlightedQuery={highlightedQuery}
+            />
           </i>
         </Col>
       </Row>

diff --git a/src/pages/contribution-page/index.tsx b/src/pages/contribution-page/index.tsx
@@ -7,6 +7,7 @@ import {
   SearchBar,
   Text,
   Title,
+  Toggle,
 } from "@dataesr/dsfr-plus";
 import ContributionItem from "./contribution-card";
 import useGetContributionData from "../../api/contribution-api/useGetObjectContributeData";
@@ -42,7 +43,6 @@ const ContributionPage: React.FC<ContributionPageProps> = () => {
     setQuery(value.trim());
     setHighlightedQuery(value.trim());
   };
-  console.log(highlightedQuery);
 
   const filteredContributions = contrib?.filter((contribution) => {
     const nameMatches = contribution.name
@@ -118,13 +118,13 @@ 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"
+          <Toggle
             checked={searchInMessage}
+            id="searchInMessage"
+            name={"Rechercher dans les messages"}
             onChange={(e) => setSearchInMessage(e.target.checked)}
+            label="Rechercher dans les messages"
           />
-          <label htmlFor="searchInMessage">Rechercher dans les messages</label>
         </Col>
       </Row>
       {filteredContributions.map((contribution) => (

diff --git a/src/pages/contribution-page/message-preview.tsx b/src/pages/contribution-page/message-preview.tsx
@@ -1,40 +1,16 @@
 import { Col, Row, Text } from "@dataesr/dsfr-plus";
 import type { Contribution } from "../../types";
+import HighlightedMessage from "../../components/highlightedMessage";
 const MessagePreview = ({
   data,
   highlightedQuery,
 }: {
   data: Contribution;
   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">
-      <>
+    <>
+      <Row className="contributorSide">
         {data.id && (
           <Col
             className={
@@ -55,9 +31,14 @@ const MessagePreview = ({
           {data.fonction && <Text>Fonction: {data.fonction}</Text>}
           <Text>Reçu le {new Date(data.created_at).toLocaleDateString()}</Text>
         </Col>
-      </>
-      <Text>Message: {renderHighlightedMessage()}</Text>
-    </Row>
+        <span>
+          <HighlightedMessage
+            message={data.message}
+            highlightedQuery={highlightedQuery}
+          />
+        </span>
+      </Row>
+    </>
   );
 };