fix(openalex): New UX to clear filteredAffiliations

dataesr · Dec 10, 2024 · db9b4d4 · db9b4d4
1 parent 5d0b84b
commit db9b4d4
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 16 deletions.
diff --git a/client/src/pages/openalex-affiliations/components/send-feedback-button.jsx b/client/src/pages/openalex-affiliations/components/send-feedback-button.jsx
@@ -34,8 +34,6 @@ export default function SendFeedbackButton({ corrections, resetCorrections }) {
         toastType: toastType ?? 'info',
       });
     },
-    onOpen: () => console.log('Websocket opened'),
-    onClose: () => console.log('Websocket closed'),
     shouldReconnect: () => true,
   });
 

diff --git a/client/src/pages/openalex-affiliations/results/index.jsx b/client/src/pages/openalex-affiliations/results/index.jsx
@@ -53,7 +53,6 @@ export default function Affiliations() {
     status.excluded.id,
   ]);
   const [isLoading, setIsLoading] = useState(false);
-  const [isLoadingRorData, setIsLoadingRorData] = useState(false); // TODO: spinner dans modal
   const [isAddModalOpen, setIsAddModalOpen] = useState(false);
   const [isRemoveModalOpen, setIsRemoveModalOpen] = useState(false);
   const [ror, setRor] = useState('');
@@ -82,7 +81,6 @@ export default function Affiliations() {
 
   useEffect(() => {
     const get = async () => {
-      setIsLoadingRorData(true);
       const addedRors = await Promise.all(
         addList.map((add) => getRorData(add)),
       );
@@ -93,7 +91,6 @@ export default function Affiliations() {
         }
       });
       setUniqueRors({ ...uniqueRors, ...uniqueRorsTmp });
-      setIsLoadingRorData(false);
     };
 
     get();
@@ -277,8 +274,10 @@ export default function Affiliations() {
           selected: false,
         };
       }
-      affiliation.selected = false;
-      return affiliation;
+      return {
+        ...affiliation,
+        selected: false,
+      };
     });
     setAffiliations(updatedAffiliations);
     setRor('');
@@ -712,7 +711,7 @@ export default function Affiliations() {
                   </div>
                 </div>
                 <ListView
-                  filteredAffiliationName={filteredAffiliationName}
+                  affiliationsCount={affiliations.length}
                   filteredAffiliations={filteredAffiliations}
                   removeRorFromAddList={removeRorFromAddList}
                   setFilteredAffiliationName={setFilteredAffiliationName}

diff --git a/client/src/pages/openalex-affiliations/results/list-view.jsx b/client/src/pages/openalex-affiliations/results/list-view.jsx
@@ -17,6 +17,7 @@ import RorName from '../components/ror-name';
 import WorksList from '../components/works-list';
 
 export default function ListView({
+  affiliationsCount,
   filteredAffiliations,
   removeRorFromAddList,
   setFilteredAffiliationName,
@@ -120,26 +121,27 @@ export default function ListView({
               value={search}
             />
             <Button
+              aria-label="Search in affiliations"
               className="fr-ml-1w"
               color="blue-ecume"
               disabled={!search.length}
               onClick={() => setFilteredAffiliationName(search)}
               size="sm"
+              title="Search in affiliations"
             >
               Search in affiliations
             </Button>
-            <button
+            <Button
               aria-label="Clear search"
-              className=" fr-ml-1w"
-              disabled={!search.length}
+              className="fr-ml-1w"
+              color="blue-ecume"
+              disabled={sortedOrFilteredAffiliations.length === affiliationsCount}
               icon="delete-line"
               onClick={() => { setSearch(''); setFilteredAffiliationName(''); }}
               size="sm"
+              style={{ verticalAlign: 'bottom' }}
               title="Clear search"
-              type="button"
-            >
-              <i className="ri-delete-bin-6-line" />
-            </button>
+            />
           </Col>
           <Col xs="2" className="text-right">
             <Button
@@ -412,7 +414,7 @@ export default function ListView({
 }
 
 ListView.propTypes = {
-  filteredAffiliationName: PropTypes.string.isRequired,
+  affiliationsCount: PropTypes.number.isRequired,
   filteredAffiliations: PropTypes.arrayOf(
     PropTypes.shape({
       name: PropTypes.string.isRequired,