Updated graphql client and algolia directory

pookmish · May 28, 2024 · aabd482 · aabd482
1 parent 92502e2
commit aabd482
Show file tree

Hide file tree

Showing 8 changed files with 676 additions and 574 deletions.
diff --git a/app/search/page.tsx b/app/search/page.tsx
@@ -1,12 +1,8 @@
-import {getSearchIndex} from "@lib/drupal/get-search-index";
-import SearchResults, {SearchResult} from "./search-results";
 import {H1} from "@components/elements/headers";
-import {DrupalNode} from "next-drupal";
-import {Suspense} from "react";
-import {DrupalJsonApiParams} from "drupal-jsonapi-params";
 import {getConfigPage} from "@lib/gql/gql-queries";
 import {StanfordBasicSiteSetting} from "@lib/gql/__generated__/drupal.d";
-import AlgoliaSearch from "./algolia-search";
+import {IndexUiState} from "instantsearch.js/es/types/ui-state";
+import AlgoliaSearch from "@components/algolia/algolia-search";
 
 // https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config
 export const revalidate = false;
@@ -24,47 +20,26 @@ const Page = async ({searchParams}: { searchParams?: { [_key: string]: string }
 
   const siteSettingsConfig = await getConfigPage<StanfordBasicSiteSetting>("StanfordBasicSiteSetting")
 
-  const search = async (searchString: string): Promise<SearchResult[]> => {
-    "use server";
-
-    const params = new DrupalJsonApiParams();
-    params.addCustomParam({"filter[fulltext]": searchString})
-
-    // This still uses JSON API because GraphQL doesn"t have an easy way to search for content.
-    const searchResults: DrupalNode[] = await getSearchIndex("full_site_content", {params: params.getQueryObject()});
-
-    return searchResults.map(node => ({
-      id: node.id,
-      title: node.title,
-      path: node.path.alias,
-      changed: node.changed,
-    })).slice(0, 20)
-  }
-
-  const initialResults = await search(searchParams?.q || "");
-
-  const algoliaConfigured = siteSettingsConfig?.suSiteAlgolia &&
-    siteSettingsConfig?.suSiteAlgoliaId &&
-    siteSettingsConfig?.suSiteAlgoliaIndex &&
-    siteSettingsConfig?.suSiteAlgoliaSearch;
+  const initialState: IndexUiState = {refinementList: {}}
+  if (searchParams?.q) initialState.query = searchParams.q as string
 
   return (
     <div className="centered mt-32">
-      <H1>Search</H1>
-
-      {!algoliaConfigured &&
-        <Suspense fallback={<></>}>
-          <SearchResults search={search} initialSearchString={searchParams?.q || ""} initialResults={initialResults}/>
-        </Suspense>
-      }
-
-      {(siteSettingsConfig?.suSiteAlgoliaId && siteSettingsConfig?.suSiteAlgoliaIndex && siteSettingsConfig?.suSiteAlgoliaSearch) &&
-        <AlgoliaSearch
-          appId={siteSettingsConfig.suSiteAlgoliaId}
-          searchIndex={siteSettingsConfig.suSiteAlgoliaIndex}
-          searchApiKey={siteSettingsConfig.suSiteAlgoliaSearch}
-        />
-      }
+      <div className="3xl:w-10/12 mx-auto">
+        <H1 className="mb-44" id="page-title">Search</H1>
+
+        {(siteSettingsConfig?.suSiteAlgoliaId && siteSettingsConfig?.suSiteAlgoliaIndex && siteSettingsConfig?.suSiteAlgoliaSearch) &&
+          <>
+            <AlgoliaSearch
+              appId={siteSettingsConfig.suSiteAlgoliaId}
+              searchIndex={siteSettingsConfig.suSiteAlgoliaIndex}
+              searchApiKey={siteSettingsConfig.suSiteAlgoliaSearch}
+              initialUiState={initialState}
+            />
+            <noscript>Please enable javascript to view search results</noscript>
+          </>
+        }
+      </div>
     </div>
   )
 }

diff --git a/app/search/search-results.tsx b/app/search/search-results.tsx
diff --git a/package.json b/package.json
@@ -20,7 +20,7 @@
     "@next/third-parties": "^14.2.3",
     "@tailwindcss/container-queries": "^0.1.1",
     "@types/node": "^20.12.12",
-    "@types/react": "^18.3.2",
+    "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "algoliasearch": "^4.23.3",
     "autoprefixer": "^10.4.19",
@@ -31,7 +31,7 @@
     "eslint": "^8.57.0",
     "eslint-config-next": "^14.2.3",
     "graphql": "^16.8.1",
-    "graphql-request": "^6.1.0",
+    "graphql-request": "^7.0.1",
     "graphql-tag": "^2.12.6",
     "html-entities": "^2.5.2",
     "html-react-parser": "^5.1.10",
@@ -42,8 +42,8 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-focus-lock": "^2.12.1",
-    "react-instantsearch": "^7.9.0",
-    "react-instantsearch-nextjs": "^0.2.5",
+    "react-instantsearch": "^7.10.0",
+    "react-instantsearch-nextjs": "^0.3.0",
     "react-slick": "^0.30.2",
     "react-tiny-oembed": "^1.1.0",
     "sharp": "^0.33.4",
@@ -59,22 +59,22 @@
     "@graphql-codegen/typescript-graphql-request": "^6.2.0",
     "@graphql-codegen/typescript-operations": "^4.2.1",
     "@next/bundle-analyzer": "^14.2.3",
-    "@storybook/addon-essentials": "^8.1.3",
-    "@storybook/addon-interactions": "^8.1.3",
-    "@storybook/addon-links": "^8.1.3",
+    "@storybook/addon-essentials": "^8.1.4",
+    "@storybook/addon-interactions": "^8.1.4",
+    "@storybook/addon-links": "^8.1.4",
     "@storybook/addon-styling": "^1.3.7",
-    "@storybook/blocks": "^8.1.3",
-    "@storybook/nextjs": "^8.1.3",
-    "@storybook/react": "^8.1.3",
+    "@storybook/blocks": "^8.1.4",
+    "@storybook/nextjs": "^8.1.4",
+    "@storybook/react": "^8.1.4",
     "@storybook/testing-library": "^0.2.2",
     "@types/react-slick": "^0.23.13",
     "concurrently": "^8.2.2",
     "encoding": "^0.1.13",
     "eslint-plugin-deprecation": "^2.0.0",
     "eslint-plugin-storybook": "^0.8.0",
-    "eslint-plugin-unused-imports": "^3.2.0",
+    "eslint-plugin-unused-imports": "^4.0.0",
     "react-docgen": "^7.0.3",
-    "storybook": "^8.1.3",
+    "storybook": "^8.1.4",
     "tsconfig-paths-webpack-plugin": "^4.1.0"
   },
   "packageManager": "[email protected]"

diff --git a/app/search/algolia-search.tsx → src/components/algolia/algolia-search.tsx b/app/search/algolia-search.tsx → src/components/algolia/algolia-search.tsx
@@ -3,33 +3,30 @@
 import algoliasearch from "algoliasearch/lite";
 import {useHits, useSearchBox} from "react-instantsearch";
 import {InstantSearchNext} from "react-instantsearch-nextjs";
-import Link from "@components/elements/link";
-import {H2} from "@components/elements/headers";
-import Image from "next/image";
 import {useRef} from "react";
 import Button from "@components/elements/button";
 import {UseSearchBoxProps} from "react-instantsearch";
-import {useRouter, useSearchParams} from "next/navigation";
-import {UseHitsProps} from "react-instantsearch-core/dist/es/connectors/useHits";
+import {useRouter} from "next/navigation";
+import {IndexUiState} from "instantsearch.js/es/types/ui-state";
+import DefaultHit, {DefaultAlgoliaHit} from "@components/algolia/hits/default";
+import {Hit as HitType} from "instantsearch.js";
 
 type Props = {
   appId: string
   searchIndex: string
   searchApiKey: string
+  initialUiState?: IndexUiState
 }
 
-const AlgoliaSearch = ({appId, searchIndex, searchApiKey}: Props) => {
+const AlgoliaSearch = ({appId, searchIndex, searchApiKey, initialUiState = {}}: Props) => {
   const searchClient = algoliasearch(appId, searchApiKey);
-  const searchParams = useSearchParams();
 
   return (
     <div>
       <InstantSearchNext
         indexName={searchIndex}
         searchClient={searchClient}
-        initialUiState={{
-          [searchIndex]: {query: searchParams.get("q") || ""},
-        }}
+        initialUiState={{[searchIndex]: initialUiState}}
         future={{preserveSharedStateOnUnmount: true}}
       >
         <div className="space-y-10">
@@ -41,8 +38,8 @@ const AlgoliaSearch = ({appId, searchIndex, searchApiKey}: Props) => {
   )
 }
 
-const HitList = (props: UseHitsProps) => {
-  const {hits} = useHits(props);
+const HitList = () => {
+  const {hits} = useHits<HitType<DefaultAlgoliaHit>>();
   if (hits.length === 0) {
     return (
       <p>No results for your search. Please try another search.</p>
@@ -53,58 +50,13 @@ const HitList = (props: UseHitsProps) => {
     <ul className="list-unstyled">
       {hits.map(hit =>
         <li key={hit.objectID} className="border-b border-gray-300 last:border-0">
-          <Hit hit={hit as unknown as AlgoliaHit}/>
+          <DefaultHit hit={hit}/>
         </li>
       )}
     </ul>
   )
 }
 
-type AlgoliaHit = {
-  url: string
-  title: string
-  summary?: string
-  photo?: string
-  updated?: number
-}
-
-const Hit = ({hit}: { hit: AlgoliaHit }) => {
-  const hitUrl = new URL(hit.url);
-
-  return (
-    <article className="@container flex justify-between gap-20 py-12">
-      <div>
-        <H2 className="text-m2">
-          <Link href={hit.url.replace(hitUrl.origin, "")}>
-            {hit.title}
-          </Link>
-        </H2>
-        <p>{hit.summary}</p>
-
-        {hit.updated &&
-          <div className="text-2xl">
-            Last Updated: {new Date(hit.updated * 1000).toLocaleDateString("en-us", {
-            month: "long",
-            day: "numeric",
-            year: "numeric"
-          })}
-          </div>
-        }
-      </div>
-
-      {hit.photo &&
-        <div className="hidden @6xl:block relative shrink-0 aspect-1 h-[150px] w-[150px]">
-          <Image
-            className="object-cover"
-            src={hit.photo.replace(hitUrl.origin, `${process.env.NEXT_PUBLIC_DRUPAL_BASE_URL}`)}
-            alt=""
-            fill
-          />
-        </div>
-      }
-    </article>
-  )
-}
 
 
 const SearchBox = (props?: UseSearchBoxProps) => {