fix(select): delete select from react-select and use native select, m…

…ark treater exported contributions
dataesr · Jun 24, 2024 · fff1899 · fff1899
1 parent 8ed60af
commit fff1899
Show file tree

Hide file tree

Showing 10 changed files with 264 additions and 143 deletions.
diff --git a/src/api/send-mail/index.tsx b/src/api/send-mail/index.tsx
@@ -119,28 +119,31 @@ function EmailSender({ contribution, refetch }: EmailSenderProps) {
 
   return (
     <>
-      <Container>
-        <Row gutters>
-          <Col offsetMd="2" md="8">
-            <TextArea
-              value={userResponse}
-              onChange={(e) => setUserResponse(e.target.value)}
-              placeholder="Votre réponse..."
-              rows={2}
-            />
-          </Col>
-          <Col>
-            <Button
-              className="fr-mt-1w"
-              variant="secondary"
-              onClick={sendEmail}
-              size="sm"
-            >
-              {contribution?.mailSent ? "Renvoyer un mail" : "Répondre"}
-            </Button>
-          </Col>
-        </Row>
-      </Container>
+      {contribution?.email && (
+        <Container>
+          <Row gutters>
+            <Col offsetMd="2" md="8">
+              <TextArea
+                value={userResponse}
+                onChange={(e) => setUserResponse(e.target.value)}
+                placeholder="Votre réponse..."
+                rows={2}
+              />
+            </Col>
+            <Col>
+              <Button
+                className="fr-mt-1w"
+                variant="secondary"
+                onClick={sendEmail}
+                size="sm"
+              >
+                {contribution?.mailSent ? "Renvoyer un mail" : "Répondre"}
+              </Button>
+            </Col>
+          </Row>
+        </Container>
+      )}
+
       <ProfileModal
         isOpen={showProfileModal}
         selectedProfile={selectedProfile}

diff --git a/src/components/edit-modal/index.tsx b/src/components/edit-modal/index.tsx
@@ -11,7 +11,6 @@ import {
 } from "@dataesr/dsfr-plus";
 import { Contribute_Production, Contribution, Inputs } from "../../types";
 import { postHeaders } from "../../config/api";
-import Select from "react-select";
 import { toast } from "react-toastify";
 import ProfileModal from "../profil-modal";
 
@@ -63,10 +62,10 @@ const EditModal: React.FC<EditModalProps> = ({
     });
   }, [data, selectedProfile]);
 
-  const handleStatusChange = (selectedOption) => {
+  const handleStatusChange = (event) => {
     setInputs((prevInputs) => ({
       ...prevInputs,
-      status: selectedOption.value,
+      status: event.target.value,
     }));
   };
 
@@ -137,7 +136,6 @@ const EditModal: React.FC<EditModalProps> = ({
         headers: postHeaders,
         body: JSON.stringify(body),
       });
-      console.log(response);
       if (!response.ok) {
         console.log("Erreur de réponse", response);
       } else {
@@ -165,17 +163,6 @@ const EditModal: React.FC<EditModalProps> = ({
     { value: "treated", label: "Traité" },
   ];
 
-  const customStyles = {
-    control: (provided, state) => ({
-      ...provided,
-      borderRadius: 8,
-      borderColor: state.isFocused ? "#2684FF" : "#CED4DA",
-      boxShadow: state.isFocused
-        ? "0 0 0 0.2rem rgba(38, 132, 255, 0.25)"
-        : null,
-    }),
-  };
-
   const handleProfileSelect = (profile) => {
     setSelectedProfile(profile);
     sessionStorage.setItem("selectedProfile", profile);
@@ -188,16 +175,20 @@ const EditModal: React.FC<EditModalProps> = ({
         <ModalTitle>Modifier la contribution</ModalTitle>
         <ModalContent className="profile-modal-content">
           <Col className="fr-mb-1w">
-            <Select
+            <label htmlFor="statusInput">Statut</label>
+            <select
               id="statusInput"
               name="status"
-              options={statusOptions}
-              value={statusOptions.find(
-                (option) => option.value === inputs.status
-              )}
+              value={inputs.status}
               onChange={handleStatusChange}
-              styles={customStyles}
-            />
+              className="fr-select"
+            >
+              {statusOptions.map((option) => (
+                <option key={option.value} value={option.value}>
+                  {option.label}
+                </option>
+              ))}
+            </select>
           </Col>
           <Row gutters>
             <Col>

diff --git a/src/components/selectors/index.tsx b/src/components/selectors/index.tsx
@@ -1,50 +1,39 @@
 import { Col, Toggle } from "@dataesr/dsfr-plus";
-import Select from "react-select";
-
-const customStyles = {
-  control: (provided, state) => ({
-    ...provided,
-    borderRadius: 8,
-    borderColor: state.isFocused ? "#2684FF" : "#CED4DA",
-    boxShadow: state.isFocused ? "0 0 0 0.2rem rgba(38, 132, 255, 0.25)" : null,
-    border: state.isFocused ? "1px solid #2684FF" : "1px solid #CED4DA",
-  }),
-};
 
 const Selectors = ({
+  sort,
+  status,
   setSort,
   setStatus,
   searchInMessage,
   setSearchInMessage,
 }) => {
-  const options = [
-    { value: "DESC", label: "Plus récentes" },
-    { value: "ASC", label: "Plus anciennes" },
-  ];
+  const handleSortChange = (event) => {
+    setSort(event.target.value);
+  };
 
-  const statusOptions = [
-    { value: "choose", label: "Toutes les contributions" },
-    { value: "new", label: "Nouvelles contributions" },
-    { value: "ongoing", label: "Contribution en traitement" },
-    { value: "treated", label: "Contributions traités" },
-  ];
+  const handleStatusChange = (event) => {
+    setStatus(event.target.value);
+  };
 
   return (
     <Col offsetLg="1">
       <Col className="fr-mb-1w">
-        <Select
-          options={options}
-          defaultValue={options[0]}
-          onChange={(selectedOption) => setSort(selectedOption.value)}
-          styles={customStyles}
-        />
+        <select value={sort} onChange={handleSortChange} className="fr-select">
+          <option value="DESC">Plus récentes</option>
+          <option value="ASC">Plus anciennes</option>
+        </select>
       </Col>
-      <Select
-        options={statusOptions}
-        defaultValue={statusOptions[0]}
-        onChange={(selectedOption) => setStatus(selectedOption.value)}
-        styles={customStyles}
-      />
+      <select
+        value={status}
+        onChange={handleStatusChange}
+        className="fr-select"
+      >
+        <option value="choose">Toutes les contributions</option>
+        <option value="new">Nouvelles contributions</option>
+        <option value="ongoing">Contribution en traitement</option>
+        <option value="treated">Contributions traitées</option>
+      </select>
       {location.pathname !== "/apioperations" && (
         <Toggle
           checked={searchInMessage}

diff --git a/src/pages/api-operation-page/link-publications/contributor-requests.tsx b/src/pages/api-operation-page/link-publications/contributor-requests.tsx
@@ -9,6 +9,7 @@ import "./styles.scss";
 
 const ContributorRequests: React.FC<{
   data: {
+    _id: any;
     id: any;
     name: string;
     productions: Production[];
@@ -71,6 +72,7 @@ const ContributorRequests: React.FC<{
                 productionId={production.id}
                 idRef={data.id}
                 coloredName={coloredName}
+                contributionId={data._id}
               />
             </div>
             <div style={{ flex: 1 }}>