♻️ Refactor instant search packages and remove warnings #1114 (#1978)

web/package.json

@@ -65,10 +65,8 @@
     "react-error-boundary": "^3.1.4",
     "react-focus-lock": "^2.9.2",
     "react-hook-form": "7.45.2",
-    "react-instantsearch-dom": "^6.40.4",
-    "react-instantsearch-hooks-router-nextjs": "6.47.3",
-    "react-instantsearch-hooks-server": "^6.47.3",
-    "react-instantsearch-hooks-web": "^6.47.3",
+    "react-instantsearch": "^7.3.0",
+    "react-instantsearch-router-nextjs": "^7.3.0",
     "react-intl": "^6.0.2",
     "react-is": "^18.1.0",
     "react-remove-scroll": "^2.5.5",
@@ -102,7 +100,6 @@
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.5",
     "@types/react-instantsearch": "^6.10.1",
-    "@types/react-instantsearch-dom": "^6.12.3",
     "@types/styled-components": "^5.1.26",
     "@types/testing-library__jest-dom": "^5.14.5",
     "babel-plugin-styled-components": "^2.1.1",

web/pageComponents/pageTemplates/MagazineIndexPage.tsx

@@ -1,5 +1,4 @@
 import { BackgroundContainer } from '@components'
-import { Configure, InstantSearch } from 'react-instantsearch-hooks-web'
 import styled from 'styled-components'
 import { Flags } from '../../common/helpers/datasetHelpers'
 import { searchClient } from '../../lib/algolia'
@@ -18,9 +17,10 @@ import { PaginationContextProvider } from '../shared/search/pagination/Paginatio
 import Teaser from '../shared/Teaser'
 import { SharedBanner } from './shared/SharedBanner'
 import SharedTitle from './shared/SharedTitle'
-import { createInstantSearchRouterNext } from 'react-instantsearch-hooks-router-nextjs'
 import singletonRouter from 'next/router'
 import type { UiState } from 'instantsearch.js'
+import { Configure, InstantSearch } from 'react-instantsearch'
+import { createInstantSearchRouterNext } from 'react-instantsearch-router-nextjs'
 
 const IngressWrapper = styled.div`
   max-width: 1186px; /* 1920 - (2 * 367) */
@@ -101,6 +101,7 @@ const MagazineIndexPage = ({ isServerRendered = false, locale, pageData, slug, u
                 })
               : searchClient(undefined)
           }
+          future={{ preserveSharedStateOnUnmount: false }}
           indexName={indexName}
           routing={{
             router: createInstantSearchRouterNext({

web/pageComponents/pageTemplates/NewsRoomPage.tsx

@@ -1,6 +1,5 @@
 import { Heading } from '@components'
-import { useEffect, useRef } from 'react'
-import { Configure, InstantSearch } from 'react-instantsearch-hooks-web'
+import { useRef } from 'react'
 import { FormattedMessage } from 'react-intl'
 import styled from 'styled-components'
 import { Flags } from '../../common/helpers/datasetHelpers'
@@ -18,9 +17,10 @@ import Filters from './newsroom/Filters'
 import Hit from './newsroom/Hit'
 import { Hits } from './newsroom/Hits'
 import { Intro, News, UnpaddedText, Wrapper } from './newsroom/StyledComponents'
-import { createInstantSearchRouterNext } from 'react-instantsearch-hooks-router-nextjs'
+import { createInstantSearchRouterNext } from 'react-instantsearch-router-nextjs'
 import singletonRouter from 'next/router'
 import type { UiState } from 'instantsearch.js'
+import { Configure, InstantSearch } from 'react-instantsearch'
 
 const NewsRoomContent = styled.div`
   display: grid;
@@ -212,6 +212,7 @@ const NewsRoomPage = ({ isServerRendered, locale, pageData, slug, url }: NewsRoo
                     })
                   : searchClient(undefined)
               }
+              future={{ preserveSharedStateOnUnmount: false }}
               indexName={indexName}
               routing={routing}
             >

web/pageComponents/pageTemplates/newsroom/Hits.tsx

@@ -1,5 +1,5 @@
 import { Hit as AlgoliaHit } from '@algolia/client-search'
-import { useHits, UseHitsProps } from 'react-instantsearch-hooks-web'
+import { useHits, UseHitsProps } from 'react-instantsearch'
 import { FormattedMessage } from 'react-intl'
 import styled from 'styled-components'
 import { List } from '@components'

web/pageComponents/pageTemplates/newsroom/RefinementList.tsx

@@ -1,4 +1,4 @@
-import { useRefinementList, UseRefinementListProps } from 'react-instantsearch-hooks-web'
+import { useRefinementList, UseRefinementListProps } from 'react-instantsearch'
 import { List, Checkbox } from '@components'
 import styled from 'styled-components'
 import { FormattedMessage } from 'react-intl'

web/pageComponents/pageTemplates/newsroom/UncontrolledSearchBox.tsx

@@ -3,7 +3,7 @@
  */
 
 import { useEffect, useRef, useState } from 'react'
-import { useSearchBox, UseSearchBoxProps } from 'react-instantsearch-hooks-web'
+import { useSearchBox, UseSearchBoxProps } from 'react-instantsearch'
 import styled from 'styled-components'
 import VisuallyHidden from '../../shared/VisuallyHidden'
 import { useIntl } from 'react-intl'

web/pageComponents/search/Hits.tsx

@@ -1,4 +1,4 @@
-import { useHits } from 'react-instantsearch-hooks-web'
+import { useHits } from 'react-instantsearch'
 import { List, Heading } from '@components'
 import styled from 'styled-components'
 import { FormattedMessage } from 'react-intl'

web/pageComponents/search/Search.tsx

@@ -1,14 +1,13 @@
-import { InstantSearch, Configure, Index } from 'react-instantsearch-hooks-web'
+import { InstantSearch, Configure, Index } from 'react-instantsearch'
 import { searchClient as client } from '../../lib/algolia'
 import dynamic from 'next/dynamic'
 import { Flags } from '../../common/helpers/datasetHelpers'
 import { SearchBox } from './SearchBox'
 import { getIsoFromLocale } from '../../lib/localization'
 import { SearchContextProvider } from './SearchContext'
-import { createInstantSearchRouterNext } from 'react-instantsearch-hooks-router-nextjs'
-import singletonRouter from 'next/router'
+import { createInstantSearchRouterNext } from 'react-instantsearch-router-nextjs'
+import singletonRouter, { useRouter } from 'next/router'
 import type { UiState } from 'instantsearch.js'
-import { useRouter } from 'next/router'
 import { useRef } from 'react'
 import styled from 'styled-components'
 import { Pagination } from '../shared/search/pagination/Pagination'
@@ -158,7 +157,12 @@ const Search = () => {
   }
 
   return (
-    <InstantSearch searchClient={queriedSearchClient} indexName={mainIndex} routing={routing}>
+    <InstantSearch
+      future={{ preserveSharedStateOnUnmount: false }}
+      searchClient={queriedSearchClient}
+      indexName={mainIndex}
+      routing={routing}
+    >
       <Configure hitsPerPage={5} snippetEllipsisText="..." />
       {indices.map((index) => (
         <Index indexName={index.value} key={index.label} indexId={index.value} />

web/pageComponents/search/SearchBox.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState, ChangeEvent, ComponentProps, useContext } from 'react'
-import { useSearchBox, UseSearchBoxProps } from 'react-instantsearch-hooks-web'
+import { useSearchBox, UseSearchBoxProps } from 'react-instantsearch'
 import ControlledSearchBox from './ControlledSearchBox'
 import { SearchContext } from './SearchContext'
 

web/pageComponents/search/SearchResults.tsx

@@ -8,7 +8,7 @@ import NewsHit from './NewsHit'
 import { SearchContext } from './SearchContext'
 import TopicHit from './TopicHit'
 import TotalResultsStat from './TotalResultsStat'
-import { useSortBy, UseSortByProps, useHits, useInstantSearch } from 'react-instantsearch-hooks-web'
+import { useSortBy, UseSortByProps, useHits, useInstantSearch } from 'react-instantsearch'
 
 const Results = styled.div`
   margin-top: var(--space-xLarge);

web/pageComponents/search/TotalResultsStat.tsx

@@ -1,4 +1,4 @@
-import { usePagination, UsePaginationProps } from 'react-instantsearch-hooks-web'
+import { usePagination, UsePaginationProps } from 'react-instantsearch'
 import { FormattedMessage } from 'react-intl'
 import styled from 'styled-components'
 

web/pageComponents/searchIndexPages/magazineIndex/Hits.tsx

@@ -1,4 +1,4 @@
-import { useHits, UseHitsProps } from 'react-instantsearch-hooks-web'
+import { useHits, UseHitsProps } from 'react-instantsearch'
 import { FormattedMessage } from 'react-intl'
 import styled from 'styled-components'
 import MagazineCard from '../../cards/MagazineCard'

web/pageComponents/searchIndexPages/magazineIndex/MagazineTagFilter.tsx

@@ -1,5 +1,5 @@
 import { forwardRef } from 'react'
-import { useMenu, UseMenuProps, useClearRefinements, useCurrentRefinements } from 'react-instantsearch-hooks-web'
+import { useMenu, UseMenuProps, useClearRefinements, useCurrentRefinements } from 'react-instantsearch'
 import MagazineTagBar from '../../shared/MagazineTagBar'
 
 export type RefinementListProps = { tags: string[] } & React.ComponentProps<'div'> & UseMenuProps

web/pageComponents/shared/search/pagination/Pagination.tsx

@@ -1,7 +1,7 @@
 import { Icon } from '@equinor/eds-core-react'
 import { chevron_left, chevron_right, first_page, last_page } from '@equinor/eds-icons'
 import { useContext, useEffect, useRef } from 'react'
-import { usePagination, UsePaginationProps } from 'react-instantsearch-hooks-web'
+import { usePagination, UsePaginationProps } from 'react-instantsearch'
 import styled from 'styled-components'
 import { usePrefersReducedMotion } from '../../../../common/hooks/usePrefersReducedMotion'
 import { PaginationContext } from './PaginationContext'

web/pageComponents/shared/search/pagination/PaginationItem.tsx

@@ -1,4 +1,4 @@
-import { usePagination } from 'react-instantsearch-hooks-web'
+import { usePagination } from 'react-instantsearch'
 import { Button } from '@components'
 import styled from 'styled-components'
 

web/pages/magasin/index.global.tsx

@@ -1,6 +1,5 @@
 import { GetServerSideProps } from 'next'
-import { InstantSearchSSRProvider } from 'react-instantsearch-hooks-web'
-import { getServerState } from 'react-instantsearch-hooks-server'
+import { InstantSearchSSRProvider, getServerState } from 'react-instantsearch'
 import type { AppProps } from 'next/app'
 import { IntlProvider } from 'react-intl'
 import Footer from '../../pageComponents/shared/Footer'

web/pages/magazine/index.global.tsx

@@ -1,6 +1,6 @@
 import { GetServerSideProps } from 'next'
-import { InstantSearchSSRProvider } from 'react-instantsearch-hooks-web'
-import { getServerState } from 'react-instantsearch-hooks-server'
+import { InstantSearchSSRProvider } from 'react-instantsearch'
+import { getServerState } from 'react-instantsearch'
 import type { AppProps } from 'next/app'
 import { IntlProvider } from 'react-intl'
 import Footer from '../../pageComponents/shared/Footer'

web/pages/news/index.global.tsx

@@ -1,6 +1,5 @@
 import { GetServerSideProps } from 'next'
-import { InstantSearchSSRProvider } from 'react-instantsearch-hooks-web'
-import { getServerState } from 'react-instantsearch-hooks-server'
+import { InstantSearchSSRProvider, getServerState } from 'react-instantsearch'
 import type { AppProps } from 'next/app'
 import { IntlProvider } from 'react-intl'
 import Footer from '../../pageComponents/shared/Footer'

web/pages/nyheter/index.global.tsx

@@ -1,6 +1,5 @@
 import { GetServerSideProps } from 'next'
-import { InstantSearchSSRProvider } from 'react-instantsearch-hooks-web'
-import { getServerState } from 'react-instantsearch-hooks-server'
+import { InstantSearchSSRProvider, getServerState } from 'react-instantsearch'
 import type { AppProps } from 'next/app'
 import { IntlProvider } from 'react-intl'
 import Footer from '../../pageComponents/shared/Footer'