dummy fav

arikama · Jun 18, 2023 · afed762 · afed762
1 parent 94c0d8f
commit afed762
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 14 deletions.
diff --git a/src/pages/bookmark.tsx b/src/pages/bookmark.tsx
@@ -32,6 +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)
 
   useEffect(() => {
     (async () => {
@@ -99,6 +100,21 @@ export default function BookmarkPage() {
     )
   }
 
+  const renderFav = () => {
+    return (
+      <Button
+        onClick={() => {
+          setIsFav(!isFav)
+        }}
+        style={{
+          textDecoration: isFav ? undefined : "underline"
+        }}
+      >
+        {!isFav ? "favorite" : <div style={{ fontSize: `${FONT.FONT_SIZE_S}` }}>❤️</div>}
+      </Button>
+    )
+  }
+
   const renderShowHideVerse = () => {
     return (
       <Button
@@ -172,8 +188,11 @@ export default function BookmarkPage() {
           justifyContent: "space-between"
         }}
       >
-        {renderTag()}
         <div>
+          {renderTag()}
+        </div>
+        <div>
+          {renderFav()}
           {renderShowHideVerse()}
           {renderShowHideTranslation()}
         </div>

diff --git a/src/pages/favs.tsx b/src/pages/favs.tsx
@@ -1,14 +1,15 @@
-import { useContext, useEffect } from 'react'
+import { useContext, useEffect, useState } from 'react'
 import Head from "next/head"
 import { useRouter } from 'next/router'
 
 import { AuthContext } from './app'
 import { DIMENSIONS } from '../constants/dimensions'
 import { FONT } from "../constants/font"
 
-export default function ProfilePage() {
+export default function FavsPage() {
   const authContext = useContext(AuthContext)
   const router = useRouter()
+  const [isEditing, setIsEditing] = useState(false)
 
   useEffect(() => {
     if (!authContext.isLoggedIn()) {
@@ -31,10 +32,21 @@ export default function ProfilePage() {
           fontSize: FONT.FONT_SIZE_S,
           display: "flex",
           justifyContent: "space-between",
-          paddingLeft: `${DIMENSIONS.SZ_6}px`
+          paddingLeft: `${DIMENSIONS.SZ_6}px`,
+          flexDirection: "column"
         }}
       >
-        <div>Coming soon.</div>
+        <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>
     </>
   )

diff --git a/src/pages/surahs/[id].tsx b/src/pages/surahs/[id].tsx
@@ -1,5 +1,6 @@
 import Head from 'next/head'
 import { useRouter } from 'next/router'
+import { useState } from 'react'
 
 import { Break } from '../../components/break'
 import { Button } from './../../components/button'
@@ -27,6 +28,33 @@ export default function SurahPage(props: { surah: Surah }) {
       hideTranslation: false
     },
   )
+  const [favSet, setFavSet] = useState<Set<string>>(new Set())
+
+  const renderFav = (surahVerse: string) => {
+    const isFav = favSet.has(surahVerse)
+
+    return (
+      <Button
+        onClick={() => {
+          if (!isFav) {
+            setFavSet(prev => {
+              return new Set(prev.add(surahVerse))
+            })
+          } else {
+            setFavSet(prev => {
+              prev.delete(surahVerse)
+              return new Set(prev)
+            })
+          }
+        }}
+        style={{
+          textDecoration: isFav ? undefined : "underline"
+        }}
+      >
+        {!favSet.has(surahVerse) ? "favorite" : <div style={{ fontSize: `${FONT.FONT_SIZE_S}` }}>❤️</div>}
+      </Button>
+    )
+  }
 
   const renderShowHideVerse = () => {
     return (
@@ -94,13 +122,16 @@ export default function SurahPage(props: { surah: Surah }) {
             <div>
               {`${props.surah.surahId}:${verse.verseId}`}
             </div>
-            <Button
-              onClick={() => {
-                router.back()
-              }}
-            >
-              back
-            </Button>
+            <div>
+              {renderFav(`${props.surah.surahId}:${verse.verseId}`)}
+              <Button
+                onClick={() => {
+                  router.back()
+                }}
+              >
+                back
+              </Button>
+            </div>
           </div>
           <Break size={DIMENSIONS.SZ_8} />
           {renderVerse(verse.text)}
@@ -176,8 +207,15 @@ export default function SurahPage(props: { surah: Surah }) {
         <title>{props.surah.englishName}</title>
       </Head>
       {renderShortcuts()}
-      {renderUserActions()}
-      {renderVerses()}
+      <div
+        style={{
+          paddingLeft: `${DIMENSIONS.SZ_6}px`,
+          paddingRight: `${DIMENSIONS.SZ_6}px`
+        }}
+      >
+        {renderUserActions()}
+        {renderVerses()}
+      </div>
     </>
   )
 }