From 0c21508ff7d2643c59eaa1f241c6926e1b7e744e Mon Sep 17 00:00:00 2001 From: Balazs Barabas Date: Fri, 11 Oct 2024 14:42:58 +0300 Subject: [PATCH 1/3] updated body and searchbox components --- src/components/Body.js | 3 +-- src/components/SearchBox.js | 54 ++++++++++++++++++++----------------- 2 files changed, 30 insertions(+), 27 deletions(-) diff --git a/src/components/Body.js b/src/components/Body.js index 4bb7929b..1b008abd 100644 --- a/src/components/Body.js +++ b/src/components/Body.js @@ -1,6 +1,5 @@ import React from 'react' -import { InstantSearch } from 'react-instantsearch-dom' - +import { InstantSearch } from 'react-instantsearch' import { useMeilisearchClientContext } from 'context/MeilisearchClientContext' import Box from 'components/Box' import Header from 'components/Header/index' diff --git a/src/components/SearchBox.js b/src/components/SearchBox.js index 59761037..ed5d1ab3 100644 --- a/src/components/SearchBox.js +++ b/src/components/SearchBox.js @@ -1,6 +1,6 @@ import React from 'react' import styled from 'styled-components' -import { connectSearchBox } from 'react-instantsearch-dom' +import { useSearchBox } from 'react-instantsearch' import Input from 'components/Input' import { SearchMedium } from 'components/icons' @@ -10,29 +10,33 @@ const SearchIcon = styled(SearchMedium)` color: ${(p) => p.theme.colors.gray[2]}; ` -const SearchBox = connectSearchBox( - ({ currentRefinement, refine, refreshIndexes, currentIndex }) => { - const [value, setValue] = React.useState(currentRefinement) - - React.useEffect(() => { - if (currentIndex?.stats?.numberOfDocuments === 0) { - refreshIndexes() - } - refine(value) - }, [value]) - - return ( - setValue(e.target.value)} - clear={() => setValue('')} - placeholder="Search something" - icon={} - style={{ width: 520 }} - /> - ) - } -) +const SearchInput = ({ query, refine, refreshIndexes, currentIndex }) => { + const [value, setValue] = React.useState(query) + + React.useEffect(() => { + if (currentIndex?.stats?.numberOfDocuments === 0) { + refreshIndexes() + } + refine(value) + }, [value]) + + return ( + setValue(e.target.value)} + clear={() => setValue('')} + placeholder="Search something" + icon={} + style={{ width: 520 }} + /> + ) +} + +const SearchBox = (props) => { + const searchBoxApi = useSearchBox(props) + + return +} export default SearchBox From e3760d27e12829adba006bb81054d214a7b13b95 Mon Sep 17 00:00:00 2001 From: Balazs Barabas Date: Fri, 11 Oct 2024 16:23:20 +0300 Subject: [PATCH 2/3] updated highlight and hits for results --- src/components/Results/Highlight.js | 26 +++------------- src/components/Results/InfiniteHits.js | 31 ++++++------------- src/components/Results/index.js | 42 ++++++-------------------- 3 files changed, 24 insertions(+), 75 deletions(-) diff --git a/src/components/Results/Highlight.js b/src/components/Results/Highlight.js index d448c934..84e9e0a6 100644 --- a/src/components/Results/Highlight.js +++ b/src/components/Results/Highlight.js @@ -1,27 +1,11 @@ import React from 'react' -import { connectHighlight } from 'react-instantsearch-dom' +import { Highlight as InstantSearchHighLight } from 'react-instantsearch' import Typography from 'components/Typography' -const Highlight = connectHighlight( - ({ highlight, attribute, hit, indexContextValue, ...props }) => { - const parsedHit = highlight({ - highlightProperty: '_highlightResult', - attribute, - hit, - }) - - return ( - - {parsedHit.map((part, index) => - part.isHighlighted ? ( - {part.value} - ) : ( - {part.value} - ) - )} - - ) - } +const Highlight = ({ attribute, hit, ...props }) => ( + + + ) export default Highlight diff --git a/src/components/Results/InfiniteHits.js b/src/components/Results/InfiniteHits.js index a99ddc56..675a41fa 100644 --- a/src/components/Results/InfiniteHits.js +++ b/src/components/Results/InfiniteHits.js @@ -1,11 +1,7 @@ import React from 'react' import styled from 'styled-components' -import { connectInfiniteHits } from 'react-instantsearch-dom' -// import ReactJson from 'react-json-view' - -// import { jsonTheme } from 'theme' +import { useInfiniteHits } from 'react-instantsearch' import Button from 'components/Button' -// import Card from 'components/Card' import ScrollToTop from 'components/ScrollToTop' import Hit from './Hit' @@ -46,7 +42,7 @@ const findImageKey = async (array) => { return imageField?.[0] } -const InfiniteHits = connectInfiniteHits(({ hits, hasMore, refineNext }) => { +const InfiniteHitsList = ({ hits, hasMore, refineNext }) => { const [imageKey, setImageKey] = React.useState(false) React.useEffect(() => { @@ -55,28 +51,13 @@ const InfiniteHits = connectInfiniteHits(({ hits, hasMore, refineNext }) => { } getImageKey() }, [hits[0]]) - // ({ hits, hasMore, refineNext, mode }) => { return (
- {/* {mode === 'fancy' ? ( */} {hits.map((hit, index) => ( ))} - {/* ) : ( - - - - )} */} {hasMore && (
) -}) +} + +const InfiniteHits = (props) => { + const inifiniteHitsApi = useInfiniteHits(props) + + return +} export default InfiniteHits diff --git a/src/components/Results/index.js b/src/components/Results/index.js index b5845d9e..c1e10c44 100644 --- a/src/components/Results/index.js +++ b/src/components/Results/index.js @@ -1,33 +1,19 @@ /* eslint-disable no-unused-vars */ import React from 'react' -import { connectStateResults, connectStats } from 'react-instantsearch-dom' - -// import { DocumentMedium, Picture } from 'components/icons' +import { useStats, useInstantSearch } from 'react-instantsearch' import Box from 'components/Box' import Stats from 'components/Stats' -// import Toggle from 'components/Toggle' -// import useLocalStorage from 'hooks/useLocalStorage' import InfiniteHits from './InfiniteHits' import NoResultForRequest from './NoResultForRequest' -// const Label1 = () => ( -// <> -// -// Fancy -// -// ) - -// const Label2 = () => ( -// <> -// -// Json -// -// ) - -const ConnectedStats = connectStats((props) => ) +const ConnectedStats = (props) => { + const statsApi = useStats(props) + return +} -const Results = connectStateResults(({ searchResults }) => { - const hasResults = !!searchResults && searchResults?.nbHits !== 0 +const Results = () => { + const { results } = useInstantSearch() + const hasResults = !!results && results?.nbHits !== 0 return ( <> @@ -38,20 +24,12 @@ const Results = connectStateResults(({ searchResults }) => { mb={56} >
- +
- {/* } - offLabel={} - ariaLabel="toggleMode" - initialValue={mode === 'fancy'} - onChange={(e) => setMode(e.target.checked ? 'fancy' : 'json')} - /> */} - {/* {hasResults ? : } */} {hasResults ? : } ) -}) +} export default Results From 860df2300e96f8d30b2d0166ac42f77695d0f76f Mon Sep 17 00:00:00 2001 From: Balazs Barabas Date: Fri, 11 Oct 2024 16:50:31 +0300 Subject: [PATCH 3/3] changed package and updated infinite hits api --- package.json | 2 +- src/components/Results/InfiniteHits.js | 6 +- yarn.lock | 145 +++++++++++++++++++------ 3 files changed, 118 insertions(+), 35 deletions(-) diff --git a/package.json b/package.json index 746148bd..ccfeaf87 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "prop-types": "^15.8.1", "react": "^18.3.1", "react-dom": "^18.3.1", - "react-instantsearch-dom": "^6.40.4", + "react-instantsearch": "^7.13.3", "react-json-view": "^1.21.3", "react-lazy-load-image-component": "^1.6.0", "react-scripts": "5.0.1", diff --git a/src/components/Results/InfiniteHits.js b/src/components/Results/InfiniteHits.js index 675a41fa..2357c248 100644 --- a/src/components/Results/InfiniteHits.js +++ b/src/components/Results/InfiniteHits.js @@ -42,7 +42,7 @@ const findImageKey = async (array) => { return imageField?.[0] } -const InfiniteHitsList = ({ hits, hasMore, refineNext }) => { +const InfiniteHitsList = ({ hits, isLastPage, showMore }) => { const [imageKey, setImageKey] = React.useState(false) React.useEffect(() => { @@ -58,11 +58,11 @@ const InfiniteHitsList = ({ hits, hasMore, refineNext }) => { ))} - {hasMore && ( + {!isLastPage && (