fix(filters): Set RoR tag on a new line

dataesr · Mar 29, 2024 · 796515c · 796515c
1 parent 0ef719f
commit 796515c
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 43 deletions.
diff --git a/client/package.json b/client/package.json
@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@dataesr/dsfr-plus": "^0.2.0",
+    "@dataesr/dsfr-plus": "^0.3.0",
     "@m4tt72/matomo-tracker-react": "^0.6.2",
     "@tanstack/react-query": "^4.29.5",
     "@tanstack/react-query-devtools": "^4.29.6",

diff --git a/client/src/components/tag-input/index.jsx b/client/src/components/tag-input/index.jsx
@@ -4,7 +4,7 @@ import {
   Button,
   Row, Col,
   // Icon,
-  Tag, TagGroup,
+  TagGroup, DismissibleTag,
   TextInput,
 } from '@dataesr/dsfr-plus';
 
@@ -111,11 +111,11 @@ export default function TagInput({
       {
         structuredTags.slice(0, seeMore ? structuredTags.length : SEE_MORE_AFTER).map((currentTags, index) => (
           // eslint-disable-next-line react/no-array-index-key
-          <Row key={`row-tags-${index}`} style={{ 'max-height': '200px', 'overflow-x': 'hidden', 'overflow-y': 'scroll' }}>
+          <Row key={`row-tags-${index}`} style={{ maxHeight: '200px', overflowX: 'hidden', overflowY: 'scroll' }}>
             <Col>
               <TagGroup>
                 {currentTags.map((tag) => (
-                  <Tag
+                  <DismissibleTag
                     className="fr-mr-1w"
                     color={getTagColor(tag)}
                     key={tag.label}
@@ -124,16 +124,13 @@ export default function TagInput({
                     title={`Tag ${tag.label}${tag.disable ? ' (not searched)' : ''}`}
                   >
                     {tag.label}
-                    {' '}
-                    x
-                    {/* <Icon iconPosition="right" name="ri-close-line" /> */}
-                  </Tag>
+                  </DismissibleTag>
                 ))}
                 {(index === 0 && hasRoR) ? (
                   <Button
                     className="fr-mr-1w"
                     hasBorder={false}
-                    icon={getRoRChildren ? 'ri-arrow-go-back-line' : 'ri-node-tree'}
+                    icon={getRoRChildren ? 'arrow-go-back-line' : 'node-tree'}
                     onClick={() => setGetRoRChildren((prev) => !prev)}
                     size="sm"
                   >

diff --git a/client/src/pages/filters.jsx b/client/src/pages/filters.jsx
@@ -1,17 +1,17 @@
-import { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-import { useSearchParams } from 'react-router-dom';
 import {
   Badge,
-  BadgeGroup,
   Button,
   Checkbox,
   Row, Col,
   SegmentedControl, SegmentedElement,
   Select, SelectOption,
-  TagGroup, Tag,
+  TagGroup, Tag, DismissibleTag,
   Title,
 } from '@dataesr/dsfr-plus';
+import PropTypes from 'prop-types';
+import { useEffect, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
+
 import TagInput from '../components/tag-input';
 import useScroll from '../hooks/useScroll';
 import { getRorData, isRor } from '../utils/ror';
@@ -24,6 +24,7 @@ const {
 const { VITE_APP_TAG_LIMIT } = import.meta.env;
 
 const START_YEAR = 2010;
+// Generate an array of objects with all years from START_YEAR
 const years = [...Array(new Date().getFullYear() - START_YEAR + 1).keys()].map((year) => (year + START_YEAR).toString()).map((year) => ({ label: year, value: year }));
 
 const normalizeStr = (x) => x.replaceAll(',', ' ').replaceAll('  ', ' ');
@@ -78,8 +79,8 @@ export default function Filters({ sendQuery }) {
         setMessageType('');
         setMessage('');
         affiliations.forEach((affiliation) => {
-          if (isRor(affiliation)) {
-            const label = affiliation.replace('https://ror.org/', '').replace('ror.org/', '');
+          const label = affiliation.replace('https://ror.org/', '').replace('ror.org/', '');
+          if (isRor(label)) {
             allTags.push({ disable: label.length < VITE_APP_TAG_LIMIT, label, source: 'user', type: 'rorId' });
           } else {
             allTags.push({ disable: affiliation.length < VITE_APP_TAG_LIMIT, label: affiliation, source: 'user', type: 'affiliationString' });
@@ -206,6 +207,7 @@ export default function Filters({ sendQuery }) {
           <Col xs="8">
             <Row gutters alignItems="bottom">
               <Col>
+                {/* TODO: Delete commented code */}
                 {/* <Select
                   label="Start year"
                   onChange={(e) => setSearchParams({ ...currentSearchParams, startYear: e.target.value })}
@@ -230,6 +232,7 @@ export default function Filters({ sendQuery }) {
                 </Select>
               </Col>
               <Col>
+                {/* TODO: Delete commented code */}
                 {/* <Select
                   label="End year"
                   onChange={(e) => setSearchParams({ ...currentSearchParams, endYear: e.target.value })}
@@ -238,8 +241,8 @@ export default function Filters({ sendQuery }) {
                 /> */}
                 <Select
                   aria-label="Select an end year for search"
-                  label="End year"
                   buttonLabel={currentSearchParams.endYear}
+                  label="End year"
                   onChange={(e) => setSearchParams({ ...currentSearchParams, endYear: e.target.value })}
                 >
                   {years.map((year) => (

diff --git a/package-lock.json b/package-lock.json