[FEATURE] Search filters

package.json

@@ -37,7 +37,7 @@
     "react": "17",
     "react-dom": "16.13.1",
     "react-hook-form": "^6.15.1",
-    "react-instantsearch-native": "^6.9.0",
+    "react-instantsearch-native": "^6.10.3",
     "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
     "react-native-dotenv": "^2.5.3",
     "react-native-gesture-handler": "^1.8.0",
@@ -48,7 +48,7 @@
     "react-native-screens": "^2.15.0",
     "react-native-svg": "12.1.0",
     "react-native-web": "~0.13.12",
-    "react-native-webview": "^11.2.4",
+    "react-native-webview": "^11.3.2",
     "react-native-youtube-iframe": "^1.4.1",
     "styled-components": "^5.2.1",
     "yup": "^0.32.8"

src/components/Modal/index.tsx

@@ -11,8 +11,8 @@ interface ModalProps extends ModalBaseProps {
   title?: string
   titleStyle?: object
   children: JSX.Element
-  height?: number
   onClose(): void
+  height?: number | string
 }
 
 const Modal = ({ children, ...props }: ModalProps): JSX.Element => {

src/index.tsx

@@ -17,6 +17,7 @@ const Root = (): JSX.Element => (
       component={Home}
     />
     <Tab.Screen
+      options={{ unmountOnBlur: true }}
       name="Search"
       component={Search}
     />

src/screens/Search/components/Card/index.tsx

@@ -7,7 +7,7 @@ import { formatMoney } from '../../../../utils/formats';
 import * as S from './styles';
 
 interface CardProps {
-  onPress?: () => void
+  onPress: () => void
   title: string
   name: string
   image: string

src/screens/Search/components/SearchList/index.tsx

@@ -1,14 +1,65 @@
-import React from 'react';
-import { Index } from 'react-instantsearch-native';
+import React, { useEffect, useState } from 'react';
+import { Index, connectRefinementList } from 'react-instantsearch-native';
 import { List } from './styles';
 
 interface SearchListProps {
   index: string
   type: string
+  filters?: {
+    refinementList?: {
+      [key: string]: any
+    }
+  }
 }
 
-export default ({ index, type }: SearchListProps): JSX.Element => (
-  <Index indexName={index}>
-    <List type={type} />
-  </Index>
-);
+interface FilterStates {
+  [key: string]: any
+}
+
+const Refinement = connectRefinementList(() => null);
+
+export default ({ index, type, filters }: SearchListProps): JSX.Element => {
+  const { refinementList } = filters;
+
+  const [filtersState, setFiltersState] = useState<FilterStates>({});
+
+  useEffect(() => {
+    if (refinementList) setFiltersState(refinementList);
+  }, [refinementList]);
+
+  return (
+    <Index indexName={index}>
+      <List type={type} />
+      <Refinement
+        attribute="type"
+        defaultRefinement={
+          filtersState?.type ? filtersState.type : []
+        }
+      />
+      <Refinement
+        attribute="classification"
+        defaultRefinement={
+          filtersState?.classification ? filtersState.classification : []
+        }
+      />
+      <Refinement
+        attribute="dimension"
+        defaultRefinement={
+          filtersState?.dimension ? filtersState.dimension : []
+        }
+      />
+      <Refinement
+        attribute="institution"
+        defaultRefinement={
+          filtersState?.institution ? filtersState.institution : []
+        }
+      />
+      <Refinement
+        attribute="keywords"
+        defaultRefinement={
+          filtersState?.keywords ? filtersState.keywords : []
+        }
+      />
+    </Index>
+  );
+};

src/screens/Search/components/SearchList/styles.tsx

@@ -49,6 +49,7 @@ export const List = connectInfiniteHits(({
           contentContainerStyle={{
             paddingBottom: 266,
           }}
+          showsVerticalScrollIndicator={false}
         />
       )
   );

src/screens/Search/index.tsx

@@ -1,16 +1,22 @@
+/* eslint-disable no-unused-vars */
 /* eslint-disable react/style-prop-object */
 /* eslint-disable import/no-unresolved */
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
+import { View, ScrollView } from 'react-native';
 import { StatusBar } from 'expo-status-bar';
 import algoliasearch from 'algoliasearch/lite';
-import { InstantSearch, connectSearchBox } from 'react-instantsearch-native';
+import {
+  InstantSearch,
+  connectSearchBox,
+  connectRefinementList,
+} from 'react-instantsearch-native';
 import { Feather } from '@expo/vector-icons';
 import {
   ALGOLIA_APP_ID,
   ALGOLIA_ADMIN_KEY,
 } from '@env';
 import * as S from './styles';
-import { Input, Tabs } from '../../components';
+import { Input, Tabs, Modal } from '../../components';
 import SearchList from './components/SearchList';
 import { algoliaIndexes } from '../../utils/algolia';
 
@@ -19,24 +25,80 @@ const searchClient = algoliasearch(
   ALGOLIA_ADMIN_KEY,
 );
 
-const SearchBox = connectSearchBox((props: any): JSX.Element => {
-  const { refine, currentRefinement } = props;
+interface SearchBoxProps {
+  refine: (...args: any[]) => any;
+  currentRefinement: string
+  isSearchStalled: boolean
+  toggleFilters: () => void
+}
 
-  return (
+const SearchBox = connectSearchBox(({
+  refine,
+  currentRefinement,
+  toggleFilters,
+}: SearchBoxProps): JSX.Element => (
+  <S.InputSearchWrapper>
     <Input
       type="default"
       placeholder="Buscar soluções"
       icon={<Feather name="search" size={24} color="#a5a5a5" />}
       onChangeText={(text) => refine(text)}
       value={currentRefinement}
+      style={{ flex: 1 }}
     />
+    <S.SearchFilters onPress={toggleFilters} />
+  </S.InputSearchWrapper>
+));
+
+interface RefinementListProps {
+  refine: (value: string[]) => any
+  items: any
+  filters: {
+    [key: string]: any
+  }
+}
+
+const RefinementList = connectRefinementList(({
+  refine,
+  items,
+  filters = [],
+}: RefinementListProps) => {
+  const [filteredItems, setFilteredItems] = useState<any>([]);
+
+  useEffect(() => {
+    if (filters.length) setFilteredItems(filters);
+  }, [filters]);
+
+  return (
+    items.map((item: any) => (
+      <S.OptionFilter
+        key={item.value}
+        onPress={() => refine(item.value)}
+        active={filteredItems.some((filter: string) => filter === item.label)}
+      >
+        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+          <S.OptionFilterCount active={filteredItems.some((filter: string) => filter === item.label)}>
+            <S.OptionFilterLabel
+              active={filteredItems.some((filter: string) => filter === item.label)}
+              style={{ fontSize: 12, lineHeight: 20 }}
+            >
+              {item.count}
+            </S.OptionFilterLabel>
+          </S.OptionFilterCount>
+          <S.OptionFilterLabel>{item.label}</S.OptionFilterLabel>
+        </View>
+      </S.OptionFilter>
+    ))
   );
 });
 
 const Search = (): JSX.Element => {
   const [tab, setTab] = useState<number>(1);
   const indexSearch = [algoliaIndexes.technology, algoliaIndexes.service];
 
+  const [searchState, setSearchState] = useState<any>({});
+  const [showModalFilters, setShowModalFilters] = useState<boolean>(false);
+
   const onChange = (idx: number) => setTab(idx);
 
   return (
@@ -45,25 +107,95 @@ const Search = (): JSX.Element => {
       <InstantSearch
         searchClient={searchClient}
         indexName={indexSearch[tab]}
+        searchState={searchState}
+        onSearchStateChange={setSearchState}
       >
         <S.Container>
           <S.SearchWrapper>
-            <SearchBox />
+            <SearchBox toggleFilters={() => setShowModalFilters(true)} />
           </S.SearchWrapper>
           <Tabs
             onSelect={onChange}
             tabs={[
               {
                 title: 'Tecnologias',
-                content: <SearchList index={algoliaIndexes.technology} type="technology" />,
+                content: (
+                  <SearchList
+                    index={algoliaIndexes.technology}
+                    type="technology"
+                    filters={searchState}
+                  />
+                ),
               },
               {
                 title: 'Serviços',
-                content: <SearchList index={algoliaIndexes.service} type="service" />,
+                content: (
+                  <SearchList
+                    index={algoliaIndexes.service}
+                    type="service"
+                    filters={searchState}
+                  />
+                ),
               },
             ]}
           />
         </S.Container>
+        <Modal
+          title="Filtros"
+          animationType="slide"
+          visible={showModalFilters}
+          onClose={() => setShowModalFilters(false)}
+          height="80%"
+        >
+          <ScrollView
+            showsVerticalScrollIndicator={false}
+            contentContainerStyle={{
+              paddingBottom: 24,
+            }}
+          >
+            <S.FiltersTitle>Tipo</S.FiltersTitle>
+            <S.FiltersWrapper>
+              <RefinementList
+                searchable
+                filters={searchState?.refinementList?.type}
+                defaultRefinement={searchState?.refinementList?.type ?? []}
+                attribute="type"
+              />
+            </S.FiltersWrapper>
+            <S.FiltersTitle>Classificação</S.FiltersTitle>
+            <S.FiltersWrapper>
+              <RefinementList
+                searchable
+                filters={searchState?.refinementList?.classification}
+                attribute="classification"
+              />
+            </S.FiltersWrapper>
+            <S.FiltersTitle>Dimensão</S.FiltersTitle>
+            <S.FiltersWrapper>
+              <RefinementList
+                searchable
+                filters={searchState?.refinementList?.dimension}
+                attribute="dimension"
+              />
+            </S.FiltersWrapper>
+            <S.FiltersTitle>Instituição</S.FiltersTitle>
+            <S.FiltersWrapper>
+              <RefinementList
+                searchable
+                filters={searchState?.refinementList?.institution}
+                attribute="institution"
+              />
+            </S.FiltersWrapper>
+            <S.FiltersTitle>Palavras-chave</S.FiltersTitle>
+            <S.FiltersWrapper>
+              <RefinementList
+                searchable
+                filters={searchState?.refinementList?.keywords}
+                attribute="keywords"
+              />
+            </S.FiltersWrapper>
+          </ScrollView>
+        </Modal>
       </InstantSearch>
     </S.Wrapper>
   );