bookmark reverse

src/apis/user_api.ts

@@ -1,4 +1,5 @@
 export interface UserApi {
   getUserPointer: (email: string, token: string) => Promise<string>
   advanceUserPointer: (email: string, token: string) => Promise<string>
+  reverseUserPointer: (email: string, token: string) => Promise<string>
 }

src/apis/user_api_impl.ts

@@ -29,4 +29,18 @@ export class UserApiImpl implements UserApi {
     const json = await response.json()
     return json.data.current_pointer
   }
+
+  async reverseUserPointer(email: string, token: string): Promise<string> {
+    const response = await fetch(getUrl("/user/pointer/reverse"), {
+      method: 'PATCH',
+      body: JSON.stringify({
+        email,
+      }),
+      headers: {
+        'x-access-token': token,
+      }
+    })
+    const json = await response.json()
+    return json.data.current_pointer
+  }
 }

src/components/app_nav.tsx

@@ -54,7 +54,7 @@ export const AppNav = () => {
             background: (router.route === '/' || router.route === '/surahs/[id]') ? 'gainsboro' : 'none'
           }}
         >
-          Koran
+          koran
         </Button>
         &nbsp;
         &nbsp;
@@ -64,7 +64,7 @@ export const AppNav = () => {
             background: router.pathname === '/bookmark' ? 'gainsboro' : 'none'
           }}
         >
-          Bookmark
+          bookmark
         </Button>
         &nbsp;
         &nbsp;
@@ -74,7 +74,7 @@ export const AppNav = () => {
             background: router.pathname === '/favs' ? 'gainsboro' : 'none'
           }}
         >
-          Favorite
+          favorite
         </Button>
       </div>
       <LoginButton />

src/pages/bookmark.tsx

@@ -114,7 +114,7 @@ export default function BookmarkPage() {
           textDecoration: isFav ? undefined : "underline"
         }}
       >
-        {!isFav ? "favorite" : <div style={{ fontSize: `${FONT.FONT_SIZE_S}` }}>❤️</div>}
+        {!isFav ? "🩶" : "❤️"}
       </Button>
     )
   }
@@ -129,7 +129,7 @@ export default function BookmarkPage() {
           })
         }}
       >
-        {bookmarkSettings.hideVerse ? "show" : "hide"}&nbsp;verse
+        {bookmarkSettings.hideVerse ? "🛐" : "☪️"}
       </Button>
     )
   }
@@ -144,7 +144,7 @@ export default function BookmarkPage() {
           })
         }}
       >
-        {bookmarkSettings.hideTranslation ? "show" : "hide"}&nbsp;translation
+        {bookmarkSettings.hideTranslation ? "📕" : "📖"}
       </Button>
     )
   }
@@ -178,7 +178,42 @@ export default function BookmarkPage() {
             justifyContent: 'right'
           }}
         >
-          Next
+          next
+        </Button>
+      </>
+    )
+  }
+
+  const renderReverse = () => {
+    return (
+      <>
+        <Break size={DIMENSIONS.SZ_8} />
+        <Button
+          onClick={async () => {
+            if (isLoading) {
+              return
+            }
+            setIsLoading(true)
+            triggerGtmUserclick(TRACKING_ACTIONS.BOOKMARK_NEXT)
+            if (authContext.isLoggedIn() && authContext.user) {
+              const currentPointer = await wireContext.userApi().reverseUserPointer(authContext.user.email, authContext.user.token)
+              const parsed = getSurahVerseId(currentPointer)
+              const verse = await wireContext.koranApi().getVerse(parsed.surah, parsed.verse)
+
+              setCurrentPointer(currentPointer)
+              setVerse(verse)
+            }
+            setIsLoading(false)
+          }}
+          isLoading={isLoading}
+          style={{
+            height: '100vh',
+            width: '100%',
+            display: 'flex',
+            justifyContent: 'left'
+          }}
+        >
+          reverse
         </Button>
       </>
     )
@@ -216,10 +251,23 @@ export default function BookmarkPage() {
       </div>
       <div
         style={{
-          textAlign: "right",
+          display: 'flex',
         }}
       >
-        {renderNext()}
+        <div
+          style={{
+            flex: 1,
+          }}
+        >
+          {renderReverse()}
+        </div>
+        <div
+          style={{
+            flex: 1,
+          }}
+        >
+          {renderNext()}
+        </div>
       </div>
     </>
   )

src/pages/profile.tsx

@@ -54,7 +54,7 @@ export default function ProfilePage() {
           paddingRight: 0,
         }}
       >
-        Logout
+        logout
       </Button>
     </div>
   )