dummy favs

src/apis/fav_api.ts

@@ -0,0 +1,5 @@
+import type { Fav } from "../types/fav"
+
+export interface FavApi {
+  add: (token: string, surah: number, verse: number) => Promise<Fav[]>
+}

src/apis/fav_api_impl.ts

@@ -0,0 +1,43 @@
+import type { Fav } from "../types/fav"
+import type { FavApi } from './fav_api'
+import { getUrl } from '../utils/getUrl'
+
+export class FavApiImpl implements FavApi {
+  async add(token: string, surah: number, verse: number): Promise<Fav[]> {
+    const response = await fetch(getUrl("/fav"), {
+      method: 'POST',
+      body: JSON.stringify({
+        surah,
+        verse
+      }),
+      headers: {
+        'x-access-token': token,
+      }
+    })
+
+    type Json = {
+      data: {
+        favorites: {
+          id: number
+          surah: number
+          verse: number
+        }[]
+      }
+    }
+
+    const json: Json = await response.json()
+
+    return json.data.favorites.map((favorite: {
+      id: number
+      surah: number
+      verse: number
+    }) => {
+      const fav: Fav = {
+        id: favorite.id,
+        surah: favorite.surah,
+        verse: favorite.verse
+      }
+      return fav
+    })
+  }
+}

src/components/app_nav.tsx

@@ -74,7 +74,7 @@ export const AppNav = () => {
             background: router.pathname === '/favs' ? 'gainsboro' : 'none'
           }}
         >
-          Favs
+          Favorite
         </Button>
       </div>
       <LoginButton />

src/managers/fav_manager.ts

@@ -0,0 +1,5 @@
+export interface FavManager {
+  add: (surahVerse: string) => Promise<Set<string>>
+  remove: (surahVerse: string) => Promise<Set<string>>
+  get: () => Promise<Set<string>>
+}

src/managers/fav_manager_dummy.ts

@@ -0,0 +1,23 @@
+import type { FavManager } from "./fav_manager"
+
+const store: Set<string> = new Set()
+
+export class FavManagerDummy implements FavManager {
+  async add(surahVerse: string): Promise<Set<string>> {
+    store.add(surahVerse)
+
+    return Promise.resolve(new Set(store))
+  }
+
+  async remove(surahVerse: string): Promise<Set<string>> {
+    if (store.has(surahVerse)) {
+      store.delete(surahVerse)
+    }
+
+    return Promise.resolve(new Set(store))
+  }
+
+  async get(): Promise<Set<string>> {
+    return Promise.resolve(new Set(store))
+  }
+}

src/pages/app.tsx

@@ -6,6 +6,7 @@ import { useRouter } from "next/router"
 
 import { AppNav } from "../components/app_nav"
 import { Break } from "../components/break"
+import { FavManagerDummy } from "../managers/fav_manager_dummy"
 import { GoogleAuthApiImpl } from "../apis/google_auth_api_impl"
 import { KoranApiImpl } from "../apis/koran_api_impl"
 import { STORAGE } from "../constants/storage"
@@ -25,7 +26,8 @@ export const AuthContext = React.createContext<Auth>({
 export const WireContext = React.createContext<Wire>({
   koranApi: () => new KoranApiImpl(),
   userApi: () => new UserApiImpl(),
-  googleAuthApi: () => new GoogleAuthApiImpl()
+  googleAuthApi: () => new GoogleAuthApiImpl(),
+  favManager: () => new FavManagerDummy()
 })
 
 export default function App(props: PropsWithChildren) {
@@ -86,7 +88,8 @@ export default function App(props: PropsWithChildren) {
           value={{
             koranApi: () => new KoranApiImpl(),
             userApi: () => new UserApiImpl(),
-            googleAuthApi: () => new GoogleAuthApiImpl()
+            googleAuthApi: () => new GoogleAuthApiImpl(),
+            favManager: () => new FavManagerDummy()
           }}
         >
           <GoogleOAuthProvider

src/pages/bookmark.tsx

@@ -32,7 +32,7 @@ export default function BookmarkPage() {
   const [currentPointer, setCurrentPointer] = useState<string>("")
   const [verse, setVerse] = useState<Verse>({ key: "", verse: "", translation: "" })
   const [isLoading, setIsLoading] = useState<boolean>(false)
-  const [isFav, setIsFav] = useState<boolean>(false)
+  const [favSet, setFavSet] = useState<Set<string>>(new Set())
 
   useEffect(() => {
     (async () => {
@@ -53,6 +53,8 @@ export default function BookmarkPage() {
         }
 
         setIsLoading(false)
+
+        setFavSet(await wireContext.favManager().get())
       } catch (e) {
         authContext.updateUser(getEmptyUser())
         setIsLoading(false)
@@ -101,10 +103,16 @@ export default function BookmarkPage() {
   }
 
   const renderFav = () => {
+    const isFav = favSet.has(currentPointer)
+
     return (
       <Button
-        onClick={() => {
-          setIsFav(!isFav)
+        onClick={async () => {
+          if (!isFav) {
+            setFavSet(await wireContext.favManager().add(currentPointer))
+          } else {
+            setFavSet(await wireContext.favManager().remove(currentPointer))
+          }
         }}
         style={{
           textDecoration: isFav ? undefined : "underline"

src/pages/favs.tsx

@@ -9,7 +9,6 @@ import { FONT } from "../constants/font"
 export default function FavsPage() {
   const authContext = useContext(AuthContext)
   const router = useRouter()
-  const [isEditing, setIsEditing] = useState(false)
 
   useEffect(() => {
     if (!authContext.isLoggedIn()) {
@@ -25,7 +24,7 @@ export default function FavsPage() {
   return (
     <>
       <Head>
-        <title>Favorites</title>
+        <title>Favorite</title>
       </Head>
       <div
         style={{
@@ -36,17 +35,7 @@ export default function FavsPage() {
           flexDirection: "column"
         }}
       >
-        <div style={{
-          alignItems: "center",
-          display: "flex",
-          flexDirection: "row",
-          alignSelf: "end"
-        }}>
-          <div>Edit</div>
-          <input type="checkbox" id="toggle" checked={isEditing} onClick={() => {
-            setIsEditing(!isEditing)
-          }}></input>
-        </div>
+        <div>Coming soon.</div>
       </div>
     </>
   )

src/pages/surahs/[id].tsx

@@ -1,26 +1,28 @@
+import { useContext, useEffect, useState } from 'react'
 import Head from 'next/head'
 import { useRouter } from 'next/router'
-import { useState } from 'react'
 
 import { Break } from '../../components/break'
-import { Button } from './../../components/button'
-import { FONT } from './../../constants/font'
+import { Button } from '../../components/button'
+import { DIMENSIONS } from '../../constants/dimensions'
+import { FONT } from '../../constants/font'
 import { GetStaticProps } from 'next'
-import { KoranApiImpl } from './../../apis/koran_api_impl'
+import { KoranApiImpl } from '../../apis/koran_api_impl'
 import { QuranText } from '../../components/quran_text'
 import { STORAGE } from '../../constants/storage'
 import { ShowHideButton } from '../../components/show_hide_button'
 import { TranslationText } from '../../components/translation_text'
+import { WireContext } from "../../pages/app"
+import { getSurahShortcuts } from '../../utils/get_surah_shortcuts'
 import { usePersistentState } from '../../hooks/use_persistent_state'
 
-import { DIMENSIONS } from '../../constants/dimensions'
-import type { KoranApi } from './../../apis/koran_api'
-import type { Surah } from './../../types/surah'
+import type { KoranApi } from '../../apis/koran_api'
+import type { Surah } from '../../types/surah'
 import type { SurahSettings } from '../../types/surah_settings'
-import { getSurahShortcuts } from '../../utils/get_surah_shortcuts'
 
 export default function SurahPage(props: { surah: Surah }) {
   const router = useRouter()
+  const wireContext = useContext(WireContext)
   const [surahSettings, updateSurahSettings] = usePersistentState<SurahSettings>(
     STORAGE.SURAH_SETTINGS_STORAGE_KEY,
     {
@@ -30,21 +32,22 @@ export default function SurahPage(props: { surah: Surah }) {
   )
   const [favSet, setFavSet] = useState<Set<string>>(new Set())
 
+  useEffect(() => {
+    (async () => {
+      setFavSet(await wireContext.favManager().get())
+    })()
+  }, [wireContext, router])
+
   const renderFav = (surahVerse: string) => {
     const isFav = favSet.has(surahVerse)
 
     return (
       <Button
-        onClick={() => {
+        onClick={async () => {
           if (!isFav) {
-            setFavSet(prev => {
-              return new Set(prev.add(surahVerse))
-            })
+            setFavSet(await wireContext.favManager().add(surahVerse))
           } else {
-            setFavSet(prev => {
-              prev.delete(surahVerse)
-              return new Set(prev)
-            })
+            setFavSet(await wireContext.favManager().remove(surahVerse))
           }
         }}
         style={{

src/types/fav.ts

@@ -0,0 +1,5 @@
+export type Fav = {
+  id: number
+  surah: number
+  verse: number
+}

src/types/wire.ts

@@ -1,3 +1,4 @@
+import { FavManager } from "../managers/fav_manager"
 import { GoogleAuthApi } from "../apis/google_auth_api"
 import { KoranApi } from "../apis/koran_api"
 import { UserApi } from "../apis/user_api"
@@ -6,4 +7,5 @@ export type Wire = {
   koranApi: () => KoranApi
   userApi: () => UserApi
   googleAuthApi: () => GoogleAuthApi
+  favManager: () => FavManager
 }