fix(search): responsive and accent

dis-moi · Jul 13, 2021 · 97d2957 · 97d2957
1 parent 600a6fc
commit 97d2957
Show file tree

Hide file tree

Showing 7 changed files with 164 additions and 118 deletions.
diff --git a/src/app/profiles/App/Pages/Profiles/List/ProfileList.tsx b/src/app/profiles/App/Pages/Profiles/List/ProfileList.tsx
@@ -1,10 +1,10 @@
-import React, { ChangeEvent, MouseEvent, useState } from 'react';
+import React, { MouseEvent, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 import { ContributorId, StatefulContributor } from 'libs/domain/contributor';
 import { Categories } from 'libs/domain/category';
 import { Button, CenterContainer, Title2 } from 'components/atoms';
-import { Arrow, Search } from 'components/atoms/icons';
+import { Arrow } from 'components/atoms/icons';
 import Link from 'components/atoms/Link/Link';
 import ContributorLarge from 'components/organisms/Contributor/ContributorLarge';
 import ContributorsList from 'components/organisms/Contributor/ContributorsList';
@@ -21,8 +21,7 @@ import NotConnectedPopin, {
 } from '../NotConnectedPopin';
 import onContributorExampleClick from '../../../onContributorExampleClick';
 import { ContextPopinState } from '../../../../store/reducers/contextPopin.reducer';
-import { Input, Select } from '../../../../../../components/atoms/Forms';
-import { ALL } from '../../../../../../components/molecules/Filters/RadiosFilters';
+import Search from '../../../../../../components/molecules/Search/Search';
 
 const Title = styled(Title2)`
   padding-top: 30px;
@@ -78,63 +77,6 @@ export const ContributorExampleLink = styled(Link)`
   cursor: pointer;
 `;
 
-const SearchBar = styled.div`
-  display: flex;
-  padding: 0 16px;
-
-  select,
-  input {
-    font-size: 16px;
-    box-shadow: none;
-    border: none;
-  }
-
-  select {
-    margin-right: 24px;
-    margin-bottom: 0;
-    padding: 10px 7px;
-    text-transform: none;
-  }
-
-  input {
-    margin-bottom: 0;
-    padding: 10px 7px;
-  }
-`;
-
-const SearchFilters = styled.div`
-  display: flex;
-  align-items: center;
-
-  label {
-    flex-shrink: 0;
-    margin-right: 8px;
-  }
-`;
-
-const SearchField = styled.div`
-  display: flex;
-
-  input {
-    border-radius: 6px 0 0 6px;
-  }
-`;
-
-const SearchIcon = styled.span`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 56px;
-  background-color: white;
-  border-radius: 0 6px 6px 0;
-
-  svg {
-    width: 20px;
-    height: 20px;
-    fill: ${props => props.theme.activeColor};
-  }
-`;
-
 export interface ProfileListProps {
   loading?: boolean;
   contributors: StatefulContributor[];
@@ -192,11 +134,6 @@ const ProfileList = ({
     handleChangeSearchContributors
   ] = useContributorsFilters(contributors);
 
-  const handleFiltersChange = ({
-    target: { value }
-  }: ChangeEvent<HTMLSelectElement>) => {
-    setFilter(value);
-  };
   return (
     <>
       <LazyOnBoarding />
@@ -205,38 +142,12 @@ const ProfileList = ({
       )}
 
       <ProfileTabs connected={connected} />
-
-      <SearchBar>
-        {!categoriesLoading && (
-          <SearchFilters>
-            <label htmlFor="categories">Filtrer par : </label>
-
-            <Select
-              onChange={handleFiltersChange}
-              placeholder={'Filtrez la recherche'}
-              id="categories"
-            >
-              <option value={ALL}>{t('profiles:common.all')}</option>
-              {Object.keys(categories).map(catId => (
-                <option key={catId} value={catId}>
-                  {categories[catId]}
-                </option>
-              ))}
-            </Select>
-          </SearchFilters>
-        )}
-        <SearchField>
-          <Input
-            type={'text'}
-            placeholder={t('profiles:form.placeholder.search')}
-            onChange={handleChangeSearchContributors}
-          />
-          <SearchIcon>
-            <Search />
-          </SearchIcon>
-        </SearchField>
-      </SearchBar>
-
+      <Search
+        categoriesLoading={categoriesLoading}
+        categories={categories}
+        handleChangeSearchContributors={handleChangeSearchContributors}
+        setFilter={setFilter}
+      />
       {loading ? (
         <Loader />
       ) : (

diff --git a/src/app/profiles/App/Pages/Subscriptions/Subscriptions.tsx b/src/app/profiles/App/Pages/Subscriptions/Subscriptions.tsx
@@ -1,4 +1,4 @@
-import React, { ChangeEvent, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 import {
@@ -11,7 +11,6 @@ import { TwoColumns } from 'components/atoms';
 import { SlowerMessageBox } from 'components/molecules/SidebarBox';
 import pathToContributor from 'app/profiles/App/pathToContributor';
 import SimilarProfiles from 'app/profiles/App/SimilarProfiles';
-import Filters from 'components/molecules/Filters/RadiosFilters';
 import useContributorsFilters from 'app/profiles/App/useContributorsFilters';
 import {
   ContributorExampleLink,
@@ -20,13 +19,17 @@ import {
 import { Aside, MainCol } from '../Profiles/Profile/Profile';
 import ProfileTabs from '../../ProfileTabs';
 import { Arrow } from '../../../../../components/atoms/icons';
+import Search from '../../../../../components/molecules/Search/Search';
 
 const ContributorsList = styled.div`
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   grid-gap: 24px;
 `;
 
+const TwoColumnsWithMargin = styled(TwoColumns)`
+  margin-top: 20px;
+`;
 export interface SubscriptionsProps {
   subscriptions: StatefulContributor[];
   contributors: StatefulContributor[];
@@ -61,26 +64,24 @@ const Subscriptions = ({
     findContributorIn(contributors)
   );
 
-  const [filteredSubscriptions, setFilter] = useContributorsFilters(
-    subscriptionsToRender
-  );
+  const [
+    filteredSubscriptions,
+    setFilter,
+    handleChangeSearchContributors
+  ] = useContributorsFilters(subscriptionsToRender);
 
-  const handleFiltersChange = ({
-    target: { value }
-  }: ChangeEvent<HTMLInputElement>) => {
-    setFilter(value);
-  };
   return (
     <>
       <ProfileTabs connected={connected} />
       {connected === true && (
-        <Filters
-          onChange={handleFiltersChange}
-          loading={!!categoriesLoading}
-          filters={categories}
+        <Search
+          categoriesLoading={categoriesLoading}
+          categories={categories}
+          handleChangeSearchContributors={handleChangeSearchContributors}
+          setFilter={setFilter}
         />
       )}
-      <TwoColumns>
+      <TwoColumnsWithMargin>
         <MainCol>
           {connected === false ? (
             <Trans i18nKey={'profiles:view.my_subscriptions.disclaimer'}>
@@ -122,7 +123,7 @@ const Subscriptions = ({
           <SlowerMessageBox />
           <SimilarProfiles />
         </Aside>
-      </TwoColumns>
+      </TwoColumnsWithMargin>
     </>
   );
 };

diff --git a/src/app/profiles/App/useContributorsFilters.ts b/src/app/profiles/App/useContributorsFilters.ts
@@ -30,7 +30,7 @@ function useContributorsFilters(
     } else {
       setFilteredContributors({ filtered: contributors, base: contributors });
     }
-  }, [selectedCategory, contributors]);
+  }, [selectedCategory]);
 
   const handleChangeSearchContributors = (
     e: React.ChangeEvent<HTMLInputElement>

diff --git a/src/components/atoms/icons/index.ts b/src/components/atoms/icons/index.ts
@@ -24,4 +24,4 @@ export { default as LogoDisMoiWithD } from './LogoDisMoiWithD';
 export { default as Bullito } from './Bullito';
 export { default as Reload } from './Reload';
 export { default as Play } from './Play';
-export { default as Search } from './Search';
+export { default as SearchIcon } from './Search';
diff --git a/src/components/molecules/Search/Search.tsx b/src/components/molecules/Search/Search.tsx
@@ -0,0 +1,125 @@
+import React, { ChangeEvent } from 'react';
+import styled from 'styled-components';
+import { useTranslation } from 'react-i18next';
+import { Input, Select } from '../../atoms/Forms';
+import { ALL } from '../Filters/RadiosFilters';
+import { SearchIcon } from '../../atoms/icons';
+import { trilean } from '../../../types';
+
+const SearchBar = styled.div`
+  display: flex;
+  padding: 0 16px;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  margin-bottom: -10px;
+  & > * {
+    margin-bottom: 10px;
+  }
+
+  select,
+  input {
+    font-size: 16px;
+    box-shadow: none;
+    border: none;
+  }
+
+  select {
+    margin-right: 24px;
+    margin-bottom: 0;
+    padding: 10px 7px;
+    text-transform: none;
+  }
+
+  input {
+    margin-bottom: 0;
+    padding: 10px 7px;
+  }
+`;
+
+const SearchFilters = styled.div`
+  display: flex;
+  align-items: center;
+  label {
+    flex-shrink: 0;
+    margin-right: 8px;
+  }
+`;
+
+const SearchField = styled.div`
+  display: flex;
+  input {
+    border-radius: 6px 0 0 6px;
+  }
+`;
+
+const SearchIconContainer = styled.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 56px;
+  background-color: white;
+  border-radius: 0 6px 6px 0;
+
+  svg {
+    width: 20px;
+    height: 20px;
+    fill: ${props => props.theme.activeColor};
+  }
+`;
+
+interface SearchProps {
+  categoriesLoading: trilean;
+  categories: Record<string, string>;
+  setFilter: (value: string) => void;
+  handleChangeSearchContributors: (
+    e: React.ChangeEvent<HTMLInputElement>
+  ) => void;
+}
+
+const Search = ({
+  categoriesLoading,
+  categories,
+  setFilter,
+  handleChangeSearchContributors
+}: SearchProps) => {
+  const { t } = useTranslation();
+  const handleFiltersChange = ({
+    target: { value }
+  }: ChangeEvent<HTMLSelectElement>) => {
+    setFilter(value);
+  };
+
+  return (
+    <SearchBar>
+      {!categoriesLoading && (
+        <SearchFilters>
+          <label htmlFor="categories">Filtrer par : </label>
+          <Select
+            onChange={handleFiltersChange}
+            placeholder={'Filtrez la recherche'}
+            id="categories"
+          >
+            <option value={ALL}>{t('profiles:common.all')}</option>
+            {Object.keys(categories).map(catId => (
+              <option key={catId} value={catId}>
+                {categories[catId]}
+              </option>
+            ))}
+          </Select>
+        </SearchFilters>
+      )}
+      <SearchField>
+        <Input
+          type={'text'}
+          placeholder={t('profiles:form.placeholder.search')}
+          onChange={handleChangeSearchContributors}
+        />
+        <SearchIconContainer>
+          <SearchIcon />
+        </SearchIconContainer>
+      </SearchField>
+    </SearchBar>
+  );
+};
+
+export default Search;
diff --git a/src/components/molecules/Search/index.ts b/src/components/molecules/Search/index.ts
@@ -0,0 +1,3 @@
+import Search from './Search';
+
+export default Search;
diff --git a/src/libs/utils/getSearch.ts b/src/libs/utils/getSearch.ts
@@ -4,17 +4,23 @@ const getSearch = (
   value: string,
   contributors: StatefulContributor[]
 ): StatefulContributor[] => {
+  const normalizeText = (string: string) =>
+    string
+      .normalize('NFD')
+      .replace(/[\u0300-\u036f]/g, '')
+      .toUpperCase();
+
   const regex = new RegExp(
     value
       .split(' ')
-      .map(val => val.toUpperCase().replace(/.+/g, '(?=.*$&)'))
+      .map(val => normalizeText(val).replace(/.+/g, '(?=.*$&)'))
       .join(''),
     'g'
   );
 
   let filteredContributor = contributors.filter(contrib => {
     const toTest = contrib.name + ' ' + contrib.intro;
-    return regex.test(toTest.toUpperCase());
+    return regex.test(normalizeText(toTest));
   });
   filteredContributor = value === '' ? contributors : filteredContributor;
   return filteredContributor;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import Search from './Search';

		export default Search;