Show & hide buttons in Bookmark (#13)

* show & hide buttons

* renames

* fix name

* dont use package version

package.json

@@ -1,6 +1,6 @@
 {
   "name": "koran-webapp",
-  "version": "1.2.1",
+  "version": "0.0.0",
   "private": false,
   "scripts": {
     "dev": "next lint --fix && next dev",

src/constants/storage.ts

@@ -1 +1,2 @@
-export const USER_LOCAL_STORAGE_KEY = "koranappuserjson"
+export const USER_LOCAL_STORAGE_KEY = "userlocalstoragekey"
+export const BOOKMARK_SETTINGS_STORAGE_KEY = "bookmarksettingsstoragekey"

src/hooks/use_bookmark_settings.ts

@@ -0,0 +1,33 @@
+import { useEffect, useState } from "react"
+
+import { BOOKMARK_SETTINGS_STORAGE_KEY } from "../constants/storage"
+import { BookmarkSettings } from "../types/bookmark_settings"
+
+export function useBookmarkSettings() {
+  const [bookmarkSettings, setBookmarkSettings] = useState<BookmarkSettings>({
+    hideVerse: true,
+    hideTranslation: true
+  })
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      const blob = window.localStorage.getItem(BOOKMARK_SETTINGS_STORAGE_KEY)
+      if (blob) {
+        const parsed = JSON.parse(blob) as BookmarkSettings
+        if (parsed) {
+          setBookmarkSettings(parsed)
+        }
+      }
+    }
+  }, [])
+
+  const updateBookmarkSettings = (update: BookmarkSettings) => {
+    if (typeof window !== "undefined") {
+      const blob = JSON.stringify(update)
+      window.localStorage.setItem(BOOKMARK_SETTINGS_STORAGE_KEY, blob)
+    }
+    setBookmarkSettings(update)
+  }
+
+  return { bookmarkSettings, updateBookmarkSettings }
+}

src/pages/bookmark.tsx

@@ -10,13 +10,15 @@ import {
 } from './../constants/font'
 import { Button } from './../components/button'
 import { getSurahVerseId } from '../utils/get_surah_verse_id'
+import { useBookmarkSettings } from '../hooks/use_bookmark_settings'
 
 import type { Verse } from './../types/verse'
 
 export default function BookmarkPage() {
   const wireContext = useContext(WireContext)
   const authContext = useContext(AuthContext)
   const router = useRouter()
+  const { bookmarkSettings, updateBookmarkSettings } = useBookmarkSettings()
 
   const [currentPointer, setCurrentPointer] = useState<string>('')
   const [verse, setVerse] = useState<Verse>({ key: '', verse: '', translation: '' })
@@ -34,6 +36,7 @@ export default function BookmarkPage() {
       }
     })()
   }, [authContext, authContext.isLoggedIn, router, wireContext])
+
   useEffect(() => {
     (async () => {
       const parsed = getSurahVerseId(currentPointer)
@@ -52,21 +55,11 @@ export default function BookmarkPage() {
     return <></>
   }
 
-  return (
-    <>
-      <div
-        style={{
-          fontSize: POINTER_FONT_SIZE
-        }}
-      >
-        <Button
-          onClick={() => {
-            router.push(`/surahs/${parsed.surahId}#${parsed.verseId}`)
-          }}
-        >
-          {currentPointer}
-        </Button>
-      </div>
+  const renderVerse = () => {
+    if (bookmarkSettings.hideVerse) {
+      return <>&nbsp;</>
+    }
+    return (
       <div
         style={{
           fontFamily: QURAN_FONT_FAMILY,
@@ -76,30 +69,108 @@ export default function BookmarkPage() {
       >
         {verse.verse}
       </div>
+    )
+  }
+
+  const renderTranslation = () => {
+    if (bookmarkSettings.hideTranslation) {
+      return (
+        <>&nbsp;</>
+      )
+    }
+    return (
       <div
         style={{
           fontSize: TRANSLATION_FONT_SIZE
         }}
       >
         {verse.translation}
       </div>
+    )
+  }
+
+  const renderTag = () => {
+    return (
+      <Button
+        onClick={() => {
+          router.push(`/surahs/${parsed.surahId}#${parsed.verseId}`)
+        }}
+      >
+        {currentPointer}
+      </Button>
+    )
+  }
+
+  const renderShowHideVerse = () => {
+    return (
+      <Button
+        onClick={() => {
+          updateBookmarkSettings({
+            ...bookmarkSettings,
+            hideVerse: !bookmarkSettings.hideVerse
+          })
+        }}
+      >
+        {bookmarkSettings.hideVerse ? "show" : "hide"}&nbsp;verse
+      </Button>
+    )
+  }
+
+  const renderShowHideTranslation = () => {
+    return (
+      <Button
+        onClick={() => {
+          updateBookmarkSettings({
+            ...bookmarkSettings,
+            hideTranslation: !bookmarkSettings.hideTranslation
+          })
+        }}
+      >
+        {bookmarkSettings.hideTranslation ? "show" : "hide"}&nbsp;translation
+      </Button>
+    )
+  }
+
+  const renderNext = () => {
+    return (
+      <Button
+        onClick={async () => {
+          if (authContext.isLoggedIn() && authContext.user) {
+            const currentPointer = await wireContext.userApi().advanceUserPointer(authContext.user.email, authContext.user.token)
+
+            setCurrentPointer(currentPointer)
+          }
+        }}
+      >
+        Next
+      </Button>
+    )
+  }
+
+  return (
+    <>
+      <div
+        style={{
+          fontSize: POINTER_FONT_SIZE,
+          display: 'flex',
+          justifyContent: 'space-between'
+        }}
+      >
+        {renderTag()}
+        <div>
+          {renderShowHideVerse()}
+          {renderShowHideTranslation()}
+        </div>
+      </div>
+      {renderVerse()}
+      {renderTranslation()}
       &nbsp;
       <div
         style={{
           textAlign: 'right',
         }}
       >
-        <Button
-          onClick={async () => {
-            if (authContext.isLoggedIn() && authContext.user) {
-              const currentPointer = await wireContext.userApi().advanceUserPointer(authContext.user.email, authContext.user.token)
-
-              setCurrentPointer(currentPointer)
-            }
-          }}
-        >
-          Next
-        </Button>
+        {renderNext()}
       </div>
     </>
   )

src/types/bookmark_settings.ts

@@ -0,0 +1,4 @@
+export type BookmarkSettings = {
+  hideVerse: boolean
+  hideTranslation: boolean
+}