Merge pull request #216 from medyo/feat-streaks

Feat streaks

Author: medyo

src/assets/App.css

@@ -1156,6 +1156,41 @@ Producthunt item
   font-size: 24px;
 }
 
+/* User */
+.profileImageContainer {
+  position: relative;
+
+  img {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    border: 1px solid var(--tooltip-accent-color);
+  }
+
+  .streak {
+    position: absolute;
+    display: inline-block;
+    bottom: -12px;
+    left: 0;
+    right: 0;
+    color: white;
+
+    .content {
+      background-color: var(--tooltip-accent-color);
+      font-size: 10px;
+      border-radius: 12px;
+      font-weight: bold;
+      padding: 2px 8px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .icon {
+      font-size: 12px;
+    }
+  }
+}
+
 /* Small devices (portrait tablets and large phones, 600px and up) */
 @media only screen and (min-width: 600px) {
   .floatingFilter {

src/components/Layout/AppLayout.tsx

@@ -1,15 +1,25 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import 'react-contexify/dist/ReactContexify.css'
 import { Outlet } from 'react-router-dom'
 import { BeatLoader } from 'react-spinners'
 import 'src/assets/App.css'
 import { AuthModal, useAuth } from 'src/features/auth'
+import { usePostStreak } from 'src/features/hits'
 import { MarketingBanner } from 'src/features/MarketingBanner'
 import { AuthProvider } from 'src/providers/AuthProvider'
 import { Header } from './Header'
 
 export const AppLayout = () => {
-  const { isAuthModalOpen } = useAuth()
+  const { isAuthModalOpen, setStreak, isConnected } = useAuth()
+  const postStreakMutation = usePostStreak()
+
+  useEffect(() => {
+    if (isConnected) {
+      postStreakMutation.mutateAsync(undefined).then((data) => {
+        setStreak(data.streak)
+      })
+    }
+  }, [])
 
   return (
     <AuthProvider>

src/components/Layout/Header.tsx

@@ -3,15 +3,14 @@ import { BsFillBookmarksFill, BsFillGearFill, BsMoonFill } from 'react-icons/bs'
 import { CgTab } from 'react-icons/cg'
 import { FaUser } from 'react-icons/fa'
 import { IoMdSunny } from 'react-icons/io'
-import { MdDoDisturbOff } from 'react-icons/md'
+import { MdDoDisturbOff, MdFlashOn } from 'react-icons/md'
 import { Link, useLocation, useNavigate } from 'react-router-dom'
 import { ReactComponent as HackertabLogo } from 'src/assets/logo.svg'
 import { SearchBar } from 'src/components/Elements/SearchBar'
 import { UserTags } from 'src/components/Elements/UserTags'
 import { useAuth } from 'src/features/auth'
 import { Changelog } from 'src/features/changelog'
 import { identifyUserTheme, trackDNDDisable, trackThemeSelect } from 'src/lib/analytics'
-import { useBookmarks } from 'src/stores/bookmarks'
 import { useUserPreferences } from 'src/stores/preferences'
 import { Button, CircleButton } from '../Elements'
 
@@ -20,7 +19,6 @@ export const Header = () => {
 
   const [themeIcon, setThemeIcon] = useState(<BsMoonFill />)
   const { theme, setTheme, setDNDDuration, isDNDModeActive } = useUserPreferences()
-  const { userBookmarks } = useBookmarks()
   const navigate = useNavigate()
   const location = useLocation()
 
@@ -50,16 +48,6 @@ export const Header = () => {
     navigate('/settings/general')
   }
 
-  const BookmarksBadgeCount = () => {
-    return userBookmarks.length > 0 ? (
-      userBookmarks.length < 10 ? (
-        <span className="badgeCount">{userBookmarks.length}</span>
-      ) : (
-        <span className="badgeCount">+9</span>
-      )
-    ) : null
-  }
-
   const onUnpauseClicked = () => {
     trackDNDDisable()
     setDNDDuration('never')
@@ -96,6 +84,7 @@ export const Header = () => {
             <BsFillBookmarksFill />
           </CircleButton>
           <CircleButton
+            className="profileImageContainer"
             onClick={() => {
               if (isConnected) {
                 navigate('/settings/general')
@@ -104,7 +93,14 @@ export const Header = () => {
               }
             }}>
             {isConnected ? (
-              <img className="profileImage" src={user?.imageURL} />
+              <>
+                <img className="profileImage s" src={user?.imageURL} />
+                <div className="streak">
+                  <span className="content">
+                    <MdFlashOn className="icon" /> {user?.streak || 1}
+                  </span>
+                </div>
+              </>
             ) : (
               <FaUser style={{ fontSize: '1.2em' }} />
             )}

src/features/auth/hooks/useAuth.ts

@@ -6,23 +6,20 @@ import { firebaseAuth } from 'src/lib/firebase'
 export const useAuth = () => {
   const authModalStore = AuthModalStore()
   const authStore = AuthStore()
-  const { user, providerId, initState, clear } = authStore
 
-  const isConnected = user != null
+  const isConnected = authStore.user != null
 
   const logout = async () => {
     trackUserDisconnect()
     signOut(firebaseAuth)
-    clear()
+    authStore.clear()
     return await firebaseAuth.signOut()
   }
 
   return {
     ...authModalStore,
-    initState,
+    ...authStore,
     isConnected,
     logout,
-    user,
-    providerId,
   }
 }

src/features/auth/index.ts

@@ -3,3 +3,4 @@ export * from './hooks/useAuth'
 export * from './stores/authModalStore'
 export * from './stores/authStore'
 export * from './types'
+export * from './utils/auth'

src/features/auth/stores/authStore.ts

@@ -9,6 +9,7 @@ type AuthState = {
 
 type AuthActions = {
   initState: (state: AuthState) => void
+  setStreak: (streak: number) => void
   clear: () => void
 }
 
@@ -22,6 +23,13 @@ export const AuthStore = create(
           user: newState.user,
           providerId: newState.providerId,
         }),
+      setStreak: (streak: number) =>
+        set((state) => ({
+          user: {
+            ...state.user!,
+            streak,
+          },
+        })),
       clear: () => set({ user: null }),
     }),
     {

src/features/auth/types/index.ts

@@ -1,4 +1,5 @@
 export type User = {
   name: string
   imageURL?: string
+  streak?: number
 }

src/features/auth/utils/auth.ts

@@ -0,0 +1,16 @@
+import { firebaseAuth } from 'src/lib/firebase'
+
+export const getUserToken = async () => {
+  return new Promise((resolve, _) => {
+    const unsub = firebaseAuth.onAuthStateChanged(async (user) => {
+      if (user) {
+        const token = await user.getIdToken()
+        resolve(token)
+      } else {
+        console.log('User not logged in')
+        resolve(null)
+      }
+      unsub()
+    })
+  })
+}

src/features/hits/api/postStreak.ts

@@ -0,0 +1,18 @@
+import { useMutation } from '@tanstack/react-query'
+import { axios } from 'src/lib/axios'
+import { MutationConfig } from 'src/lib/react-query'
+import { Streak } from '../types'
+
+const postStreak = async (): Promise<Streak> => {
+  return axios.post('/engine/user/streak', {})
+}
+
+type UsePostStreakOptions = {
+  config?: MutationConfig<typeof postStreak>
+}
+export const usePostStreak = ({ config }: UsePostStreakOptions = {}) => {
+  return useMutation({
+    ...config,
+    mutationFn: postStreak,
+  })
+}

src/features/hits/index.ts

@@ -0,0 +1,2 @@
+export * from './api/postStreak'
+export * from './types'