add favorites button and test algolia course results list

src/components/algolia-results/default.tsx

@@ -12,6 +12,7 @@ export type AlgoliaHit = {
   photo?: string
   updated: number
   html?: string
+  objectID: string
   type: string
   sum_course_availability?: string
   sum_course_catalog_number?: string

src/components/algolia-results/summer-course/summer-course.tsx

@@ -6,6 +6,7 @@ import useAccordion from "@lib/hooks/useAccordion";
 import {H3, H4} from "@components/elements/headers";
 import {formatCurrency} from "@lib/utils/format-currency";
 import { CheckCircleIcon, ChevronDownIcon } from "@heroicons/react/24/solid";
+import FavoriteButton from "@components/elements/favorite-button";
 
 type Props = {
   hit: AlgoliaHit
@@ -79,7 +80,11 @@ const SummerCourse = ({hit}: Props) => {
         </div>
       }
 
-      <button {...buttonProps} className="group text-digital-blue no-underline">
+      <div>
+        <FavoriteButton title={hit.title} uuid={hit.objectID} />
+      </div>
+
+      <button {...buttonProps} className="group text-digital-blue no-underline mt-12">
         <span className="flex gap-5 items-center w-full">
           <H4 className="ml-auto mb-0 p-0 text-m0 group-hocus:underline font-semibold">{expanded ? "Collapse details" : "Show all details"}</H4>
           <ChevronDownIcon width={20} className={expanded ? "rotate-180" : undefined}/>

src/components/paragraphs/summer-user-favorite/user-favorite-paragraph.tsx

@@ -1,8 +1,11 @@
 import { HtmlHTMLAttributes} from "react";
+import {getConfigPage} from "@lib/gql/gql-queries";
 import {
+  StanfordBasicSiteSetting,
   ParagraphSumUserFavorite
 } from "@lib/gql/__generated__/drupal.d";
-import SummerCourse from "@components/algolia-results/summer-course/summer-course";
+import AlgoliaCourseList from "@components/patterns/algolia-course-list";
+
 
 const favoriteCourseList = [
   {
@@ -65,13 +68,24 @@ type Props = HtmlHTMLAttributes<HTMLDivElement> & {
 }
 
 const UserFavoriteParagraph = async ({paragraph, ...props}: Props) => {
-
+  const siteSettingsConfig = await getConfigPage<StanfordBasicSiteSetting>("StanfordBasicSiteSetting")
+
+  if (!siteSettingsConfig?.suSiteAlgoliaId || !siteSettingsConfig.suSiteAlgoliaSearch || !siteSettingsConfig.suSiteAlgoliaIndex) {
+    return;
+  }
+
   return (
     <div>
       <div>
         {/* Favorites List */}
       </div>
-      {favoriteCourseList.map((course, i) => <SummerCourse hit={course} key={i} />)}
+      {/* {favoriteCourseList.map((course, i) => <SummerCourse hit={course} key={i} />)} */}
+      <AlgoliaCourseList
+        appId={siteSettingsConfig.suSiteAlgoliaId}
+        searchIndex={siteSettingsConfig.suSiteAlgoliaIndex}
+        searchApiKey={siteSettingsConfig.suSiteAlgoliaSearch}
+        itemUuids={["eb0fe1c4-e98d-4fda-8962-4faa627340e0", "e66bd9be-a47b-4df7-804f-b173839e12aa", "e2979287-eef5-46a6-bb1e-e15e4c0e8280"]}
+      />
     </div>
   )
 }

src/components/patterns/algolia-course-list.tsx

@@ -5,6 +5,7 @@ import {useHits,usePagination, Configure} from "react-instantsearch";
 import {InstantSearchNext} from "react-instantsearch-nextjs";
 import {useMemo} from "react";
 import {Hit as HitType} from "instantsearch.js";
+import SummerCourse from "@components/algolia-results/summer-course/summer-course";
 
 type Props = {
   appId: string
@@ -44,13 +45,7 @@ const HitList = () => {
   return (
     <div>
       <ul className="list-unstyled">
-        {hits.map(hit =>
-          <li key={hit.objectID} className="border-b border-gray-300 last:border-0">
-            <div>
-              {hit.title}
-            </div>
-          </li>
-        )}
+        {hits.map((hit, i) => <SummerCourse hit={hit}  key={i} />)}
       </ul>
 
       {pages.length > 1 &&

src/lib/hooks/useFavorites.tsx

@@ -1,19 +1,32 @@
 "use client";
 
-import {useBoolean, useLocalStorage} from "usehooks-ts";
-import {useCallback, useEffect} from "react";
+import {useCallback} from "react";
+import {useLocalStorage} from "usehooks-ts";
 
-const useFavorites = (): [boolean, (_value: boolean) => void] => {
-  const {value: isIntl, setValue: setIsIntl} =  useBoolean(false)
-  const [userIntl, setUserIntl] = useLocalStorage<boolean | undefined>("intl", undefined, {initializeWithValue: false})
+type Favorite = {
+  uuid: string
+  title: string
+}
+
+const useFavorites = (): {
+  favs: Favorite[],
+  addFav: (_uuid: string, _title: string) => void,
+  removeFav: (_uuid: string) => void
+} => {
+  const [favs, setFavs] = useLocalStorage<Favorite[]>("favorites", [], {initializeWithValue: false})
+
+  const addFav = useCallback((uuid: string, title: string) => {
+    setFavs([...favs, {uuid, title}])
+  }, [favs, setFavs])
 
-  const onEvent = useCallback(({coords}: { coords: GeolocationCoordinates }) => {
-    const {latitude, longitude} = coords;
-    setIsIntl(latitude < 24.5 || longitude > -52 || longitude < -170)
-  }, [setIsIntl]);
+  const removeFav = useCallback((uuid: string) => {
+    const itemIndex = favs.findIndex(fav => fav.uuid === uuid);
+    const oldFavs = [...favs];
+    oldFavs.splice(itemIndex, 1);
+    setFavs(oldFavs);
+  }, [favs, setFavs])
 
-  useEffect(() => navigator.geolocation.getCurrentPosition(onEvent), [onEvent]);
-  return [userIntl !== undefined ? userIntl : isIntl, setUserIntl];
+  return {favs, addFav, removeFav}
 }
 
 export default useFavorites;