Merge pull request #1184 from prezly/feature/care-6003-clean-up-algolia-code-from-themes

[CARE-6003][CARE-5923] Clean up Algolia code

Author: pestaa

.env.example

@@ -11,12 +11,9 @@ PREZLY_THEME_UUID=73015107-ac86-418b-9120-4ffa439d5c0f
 # NEXT_PUBLIC_HCAPTCHA_SITEKEY=
 
 # This key is unique for every newsroom
-ALGOLIA_API_KEY=
 MEILISEARCH_API_KEY=
 
 # These variables have default values in the code, but you can override them if you need to
-# ALGOLIA_APP_ID=
-# ALGOLIA_INDEX=
 # MEILISEARCH_HOST=
 # MEILISEARCH_INDEX=
 

README.md

@@ -6,7 +6,7 @@ Bea Prezly Theme is based on [Next.js] 12+ framework.
 - Multi-language is powered by [React Intl] and [Prezly Themes Translations].
 - Analytics powered by [Prezly Analytics].
 - Code-style is ensured by [ESLint], [StyleLint] and [Prettier].
-- Search is powered by [Algolia]
+- Search is powered by Meilisearch
 - Error-logging with [Sentry].
 
 ### Requirements
@@ -33,7 +33,7 @@ cp .env.example .env.local
 You'll need to populate it with your Prezly Access Token and your newsroom's UUID.
 Additionally, you'll need to provide:
 - Sitekey for HCaptcha if you want HCaptcha to work on the Subscribe form.
-- Algolia API key for Prezly's search index (you can contact [Prezly support](https://www.prezly.com/talk-to-us) to issue a token for you)
+- API key for Prezly's search index (you can contact [Prezly support](https://www.prezly.com/talk-to-us) to issue a token for you)
 
 After that you can run locally in development mode with live reload:
 
@@ -102,11 +102,9 @@ Made with ♥ by [Prezly](https://www.prezly.com/developers)
 [Prezly Theme Kit]: https://github.com/prezly/theme-kit-nextjs
 [Typescript]: https://www.typescriptlang.org
 [ESLint]: https://eslint.org
-[Algolia]: https://algolia.com
 [StyleLint]: https://stylelint.io
 [Prettier]: https://prettier.io
 [React Intl]: https://www.npmjs.com/package/react-intl
-[Algolia Search]: https://www.npmjs.com/package/algoliasearch
 [Prezly Content React Renderer]: https://www.npmjs.com/package/@prezly/content-renderer-react-js
 [Prezly Themes Translations]: https://github.com/prezly/themes-intl-messages
 [Prezly Analytics]: https://github.com/prezly/analytics

adapters/server/environment.ts

@@ -16,10 +16,6 @@ const Schema = z.object({
     MEILISEARCH_HOST: z.string().optional(),
     MEILISEARCH_INDEX: z.string().optional(),
 
-    ALGOLIA_API_KEY: z.string().optional(),
-    ALGOLIA_APP_ID: z.string().optional(),
-    ALGOLIA_INDEX: z.string().optional(),
-
     PREZLY_MODE: z.string().optional(),
 });
 

adapters/server/search.ts

@@ -4,9 +4,6 @@ import { environment } from './environment';
 
 export function getSearchSettings(): SearchSettings | undefined {
     const {
-        ALGOLIA_API_KEY = '',
-        ALGOLIA_APP_ID = 'UI4CNRAHQB',
-        ALGOLIA_INDEX = 'public_stories_prod',
         MEILISEARCH_API_KEY = '',
         MEILISEARCH_HOST = 'https://search.prezly.com',
         MEILISEARCH_INDEX = 'public_stories',
@@ -21,14 +18,5 @@ export function getSearchSettings(): SearchSettings | undefined {
         };
     }
 
-    if (ALGOLIA_API_KEY && ALGOLIA_APP_ID && ALGOLIA_INDEX) {
-        return {
-            apiKey: ALGOLIA_API_KEY,
-            appId: ALGOLIA_APP_ID,
-            index: ALGOLIA_INDEX,
-            searchBackend: 'algolia',
-        };
-    }
-
     return undefined;
 }

modules/Header/ui/SearchWidget/SearchWidget.tsx

@@ -35,10 +35,7 @@ export function SearchWidget({
 }: Props) {
     const searchClient = useMemo(() => getSearchClient(settings), [settings]);
 
-    const filters =
-        settings.searchBackend === 'algolia'
-            ? `attributes.culture.code:${localeCode}`
-            : `attributes.culture.code=${localeCode}`;
+    const filters = `attributes.culture.code=${localeCode}`;
 
     return (
         <Modal

modules/Search/Search.tsx

@@ -10,9 +10,9 @@ import type { ThemeSettings } from 'theme-settings';
 import type { SearchSettings } from 'types';
 import { getSearchClient } from 'utils/getSearchClient';
 
-import AlgoliaStateContextProvider from './components/AlgoliaStateContext';
 import { Results } from './components/Results';
 import { SearchBar } from './components/SearchBar';
+import SearchStateContextProvider from './components/SearchStateContext';
 import { Subtitle } from './components/Subtitle';
 import { Title } from './components/Title';
 import type { SearchState } from './types';
@@ -35,10 +35,7 @@ export function Search({ localeCode, settings, showDate, showSubtitle, storyCard
 
     const searchClient = useMemo(() => getSearchClient(settings), [settings]);
 
-    const filters =
-        settings.searchBackend === 'algolia'
-            ? `attributes.culture.code:${localeCode}`
-            : `attributes.culture.code=${localeCode}`;
+    const filters = `attributes.culture.code=${localeCode}`;
 
     const scheduleUrlUpdate = useDebounce(DEBOUNCE_TIME_MS, (updatedSearchState: SearchState) => {
         if (typeof window === 'undefined') {
@@ -62,7 +59,7 @@ export function Search({ localeCode, settings, showDate, showSubtitle, storyCard
             createURL={createUrl}
         >
             <Configure hitsPerPage={6} filters={filters} />
-            <AlgoliaStateContextProvider>
+            <SearchStateContextProvider>
                 <Title />
                 <SearchBar />
                 <Subtitle />
@@ -71,7 +68,7 @@ export function Search({ localeCode, settings, showDate, showSubtitle, storyCard
                     showSubtitle={showSubtitle}
                     storyCardVariant={storyCardVariant}
                 />
-            </AlgoliaStateContextProvider>
+            </SearchStateContextProvider>
         </InstantSearch>
     );
 }

modules/Search/components/AlgoliaStateContext.tsx

@@ -5,7 +5,7 @@ import { useCallback, useMemo, useState } from 'react';
 import type { RefinementListExposed, RefinementListProvided } from 'react-instantsearch-core';
 import { connectRefinementList } from 'react-instantsearch-dom';
 
-import { FormattedDate, FormattedMessage, useLocale } from '@/adapters/client';
+import { FormattedMessage, useLocale } from '@/adapters/client';
 import { Button } from '@/components/Button';
 import { Dropdown } from '@/components/Dropdown';
 
@@ -59,13 +59,13 @@ export const Facet = connectRefinementList(
                     case FacetAttribute.MONTH: {
                         const date = new Date();
                         date.setMonth(Number(item.label) - 1);
-                        return <FormattedDate value={date} />;
+                        return date.toLocaleDateString(locale, { month: 'long' });
                     }
                     default:
                         return item.label;
                 }
             },
-            [attribute],
+            [attribute, locale],
         );
 
         if (!items.length) {

modules/Search/components/Facet.tsx

@@ -9,9 +9,9 @@ import { useIntl } from '@/adapters/client';
 import { Button } from '@/components/Button';
 import type { ThemeSettings } from 'theme-settings';
 
-import { useAlgoliaState } from './AlgoliaStateContext';
 import type { Props as HitProps } from './Hit';
 import { Hit } from './Hit';
+import { useSearchState } from './SearchStateContext';
 
 import styles from './Results.module.scss';
 import containerStyles from '@/modules/InfiniteStories/InfiniteStories.module.scss'; // FIXME: Pass this from outside
@@ -33,7 +33,7 @@ export const Results = connectInfiniteHits(
         storyCardVariant,
     }: InfiniteHitsProvided<HitProps['hit']> & Props) => {
         const { formatMessage } = useIntl();
-        const { searching: isSearching } = useAlgoliaState();
+        const { searching: isSearching } = useSearchState();
 
         return (
             <div className={containerStyles.container}>

modules/Search/components/Results.tsx

@@ -45,13 +45,7 @@ export function SearchBar() {
                         <FormattedMessage locale={locale} for={translations.search.filters} />
                     </p>
                     {AVAILABLE_FACET_ATTRIBUTES.map((attribute) => (
-                        <Facet
-                            key={attribute}
-                            attribute={attribute}
-                            // This is a hack to make Algolia return more than 10 facets by default. We need to upgrade to v7 to allow finer control over this.
-                            showMore
-                            showMoreLimit={50}
-                        />
+                        <Facet key={attribute} attribute={attribute} showMore showMoreLimit={50} />
                     ))}
                 </div>
             </div>

modules/Search/components/SearchBar.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import type { Search } from '@prezly/theme-kit-nextjs';
+import type { PropsWithChildren } from 'react';
+import { createContext, useContext } from 'react';
+import type { StateResultsProvided } from 'react-instantsearch-core';
+import { connectStateResults } from 'react-instantsearch-dom';
+
+const SearchStateContext = createContext<StateResultsProvided<Search.IndexedStory> | undefined>(
+    undefined,
+);
+
+function SearchStateContextProvider({
+    children,
+    ...contextValue
+}: PropsWithChildren<StateResultsProvided<Search.IndexedStory>>) {
+    return (
+        <SearchStateContext.Provider value={contextValue}>{children}</SearchStateContext.Provider>
+    );
+}
+
+export default connectStateResults(SearchStateContextProvider);
+
+export function useSearchState() {
+    const state = useContext(SearchStateContext);
+
+    if (!state) {
+        throw new Error('`useSearchState` should only be used inside `SearchStateContextProvider`');
+    }
+
+    return state;
+}

modules/Search/components/SearchStateContext.tsx

@@ -4,13 +4,13 @@ import { translations } from '@prezly/theme-kit-nextjs';
 
 import { FormattedMessage, useLocale } from '@/adapters/client';
 
-import { useAlgoliaState } from './AlgoliaStateContext';
+import { useSearchState } from './SearchStateContext';
 
 import styles from './Subtitle.module.scss';
 
 export function Subtitle() {
     const locale = useLocale();
-    const { searchState, searchResults } = useAlgoliaState();
+    const { searchState, searchResults } = useSearchState();
 
     const { query: searchQuery } = searchState;
     const resultsCount = searchResults ? searchResults.nbHits : 0;

modules/Search/components/Subtitle.tsx

@@ -5,11 +5,11 @@ import { translations } from '@prezly/theme-kit-nextjs';
 import { useIntl } from '@/adapters/client';
 import { PageTitle } from '@/components/PageTitle';
 
-import { useAlgoliaState } from './AlgoliaStateContext';
+import { useSearchState } from './SearchStateContext';
 
 export function Title() {
     const { formatMessage } = useIntl();
-    const { searchState } = useAlgoliaState();
+    const { searchState } = useSearchState();
 
     const { query: searchQuery } = searchState;
 

modules/Search/components/Title.tsx

@@ -41,7 +41,6 @@
     "@react-hookz/web": "14.7.1",
     "@sentry/nextjs": "7.98.0",
     "@uploadcare/nextjs-loader": "1.0.0",
-    "algoliasearch": "4.22.1",
     "classnames": "2.5.1",
     "modern-normalize": "1.1.0",
     "next": "14.2.3",

package-lock.json

@@ -2,16 +2,9 @@ import type { Story } from '@prezly/sdk';
 
 export type ListStory = Story & Pick<Story.ExtraFields, 'thumbnail_image'>;
 
-export type SearchSettings =
-    | {
-          searchBackend: 'algolia';
-          appId: string;
-          apiKey: string;
-          index: string;
-      }
-    | {
-          searchBackend: 'meilisearch';
-          host: string;
-          apiKey: string;
-          index: string;
-      };
+export type SearchSettings = {
+    searchBackend: 'meilisearch';
+    host: string;
+    apiKey: string;
+    index: string;
+};

package.json

@@ -1,10 +1,7 @@
 import { instantMeiliSearch } from '@meilisearch/instant-meilisearch';
-import algoliasearch from 'algoliasearch';
 
 import type { SearchSettings } from 'types';
 
 export function getSearchClient(settings: SearchSettings) {
-    return settings.searchBackend === 'algolia'
-        ? algoliasearch(settings.appId, settings.apiKey)
-        : instantMeiliSearch(settings.host, settings.apiKey).searchClient;
+    return instantMeiliSearch(settings.host, settings.apiKey).searchClient;
 }