parisjs · dhayab · Jun 11, 2023 · Jun 11, 2023
diff --git a/components/HomeContainer.js b/components/HomeContainer.js
@@ -6,12 +6,13 @@ import {
   PoweredBy,
   Configure,
   InfiniteHits,
-} from 'react-instantsearch-dom'
+  InstantSearchSSRProvider,
+} from 'react-instantsearch-hooks-web'
 
 import MeetupPreview from './MeetupPreview'
 import NextMeetup from './NextMeetup'
 
-const HomeContainer = ({nextMeetup, ...props}) => {
+const HomeContainer = ({ nextMeetup, ...props }) => {
   return (
     <>
       <Head>
@@ -34,32 +35,31 @@ const HomeContainer = ({nextMeetup, ...props}) => {
   )
 }
 
-function MeetupSearch(props) {
+function MeetupSearch({ serverState, ...props }) {
   return (
     <div className="container meetups">
-      <InstantSearch {...props}>
-        <div className="meetups__header">
-          <h2 className="meetups__title --withChevron">
-            {i18next.t('HOME_PREVIOUS_MEETUP')}
-          </h2>
-          <Configure hitsPerPage={5} />
-          <SearchBox
-            showLoadingIndicator
+      <InstantSearchSSRProvider {...serverState}>
+        <InstantSearch {...props}>
+          <div className="meetups__header">
+            <h2 className="meetups__title --withChevron">
+              {i18next.t('HOME_PREVIOUS_MEETUP')}
+            </h2>
+            <Configure hitsPerPage={5} />
+            <SearchBox
+              placeholder={i18next.t('SEARCH_PLACEHOLDER')}
+            />
+            <PoweredBy />
+          </div>
+          <InfiniteHits
+            hitComponent={({ hit: meetup }) => (
+              <MeetupPreview key={meetup.objectID} meetup={meetup} />
+            )}
             translations={{
-              placeholder: i18next.t('SEARCH_PLACEHOLDER'),
+              showMoreButtonText: i18next.t('SEARCH_LOADMORE'),
             }}
           />
-          <PoweredBy />
-        </div>
-        <InfiniteHits
-          hitComponent={({ hit: meetup }) => (
-            <MeetupPreview key={meetup.objectID} meetup={meetup} />
-          )}
-          translations={{
-            loadMore: i18next.t('SEARCH_LOADMORE'),
-          }}
-        />
-      </InstantSearch>
+        </InstantSearch>
+      </InstantSearchSSRProvider>
     </div>
   )
 }

diff --git a/components/MeetupPreview.js b/components/MeetupPreview.js
@@ -1,12 +1,12 @@
-import { Highlight } from 'react-instantsearch-dom'
+import { Highlight } from 'react-instantsearch-hooks-web'
 import i18next from 'i18next'
 import Link from 'next/link'
 import TalkPreview from './TalkPreview'
 
 function Host({ meetup }) {
   return (
     <span>
-      @ <Highlight hit={meetup} attribute="host" />
+      @ <Highlight hit={meetup} attribute="host" highlightedTagName="em" />
     </span>
   )
 }

diff --git a/components/TalkPreview.js b/components/TalkPreview.js
@@ -1,4 +1,4 @@
-import { Highlight, Snippet } from 'react-instantsearch-dom'
+import { Highlight, Snippet } from 'react-instantsearch-hooks-web'
 import Avatar from './Avatar'
 
 const TalkPreview = ({ talk }) => {
@@ -14,6 +14,7 @@ const TalkPreview = ({ talk }) => {
       key={String(index)}
       hit={talk}
       attribute={`authors.${index}.name`}
+      highlightedTagName="em"
     />
   ))
 
@@ -23,12 +24,12 @@ const TalkPreview = ({ talk }) => {
       <div className="TalkPreview__description">
         <div>
           <div className="TalkPreview__title">
-            {<Snippet hit={talk} attribute="title" />}
+            {<Snippet hit={talk} attribute="title" highlightedTagName="em" />}
           </div>
           <div className="TalkPreview__authors">{authors}</div>
         </div>
         <div className="TalkPreview__extract">
-          <Snippet hit={talk} attribute="extract" />
+          <Snippet hit={talk} attribute="extract" highlightedTagName="em" />
         </div>
       </div>
     </div>

diff --git a/lib/sponsors.js b/lib/sponsors.js
@@ -166,7 +166,7 @@ export const sponsors = [
   },
   {
     name: 'Algolia',
-    img: '/sponsors/algolia-logo-light.png',
+    img: '/sponsors/algolia-logo-blue.svg',
     website: 'https://www.algolia.com/',
     link: { name: 'Careers', url: 'https://www.algolia.com/careers' },
   },

diff --git a/package.json b/package.json
@@ -25,7 +25,8 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-icons": "^4.1.0",
-    "react-instantsearch-dom": "^6.22",
+    "react-instantsearch-hooks-server": "^6.44.2",
+    "react-instantsearch-hooks-web": "^6.44.2",
     "react-jsonschema-form": "^1.8.1"
   },
   "devDependencies": {

diff --git a/pages/index.js b/pages/index.js
@@ -1,6 +1,6 @@
 import algoliasearch from 'algoliasearch/lite'
-import { findResultsState } from 'react-instantsearch-dom/server'
-import { useState } from 'react'
+import { getServerState } from 'react-instantsearch-hooks-server'
+import { renderToString } from 'react-dom/server'
 import { RouterContext } from 'next/dist/shared/lib/router-context'
 
 import HomeContainer from '../components/HomeContainer'
@@ -19,7 +19,6 @@ const DEFAULT_PROPS = {
 
 export async function getStaticProps({ router, locale }) {
   initI18next(locale)
-  const searchState = {}
 
   function ServerSideSearch(props) {
     return (
@@ -28,21 +27,16 @@ export async function getStaticProps({ router, locale }) {
       </RouterContext.Provider>
     )
   }
-  const resultsState = await findResultsState(ServerSideSearch, {
-    ...DEFAULT_PROPS,
-    searchState,
-  })
+  const serverState = await getServerState(
+    <ServerSideSearch {...DEFAULT_PROPS} />,
+    { renderToString }
+  )
 
   // load the next scheduled meetup
   const nextMeetup = await getNextMeetup()
   return {
     props: {
-      resultsState: {
-        ...resultsState,
-        metadata: [],
-        state: JSON.parse(JSON.stringify(resultsState.state)),
-      },
-      searchState,
+      serverState,
       nextMeetup,
     },
     // Incremental Static Regeneration each minute
@@ -51,15 +45,5 @@ export async function getStaticProps({ router, locale }) {
 }
 
 export default function Index(props) {
-  const [searchState, setSearchState] = useState(props.searchState)
-  return (
-    <HomeContainer
-      {...DEFAULT_PROPS}
-      searchState={searchState}
-      onSearchStateChange={setSearchState}
-      createURL={() => {}}
-      resultsState={props.resultsState}
-      nextMeetup={props.nextMeetup}
-    />
-  )
+  return <HomeContainer {...DEFAULT_PROPS} {...props} />
 }
diff --git a/public/sponsors/algolia-logo-blue.svg b/public/sponsors/algolia-logo-blue.svg
diff --git a/public/sponsors/algolia-logo-light.png b/public/sponsors/algolia-logo-light.png