Merge branch 'zouhir-auth' into feat-streaks

Author: medyo

src/components/Layout/Header.tsx

@@ -4,7 +4,6 @@ import { CgTab } from 'react-icons/cg'
 import { FaUser } from 'react-icons/fa'
 import { IoMdSunny } from 'react-icons/io'
 import { MdDoDisturbOff, MdFlashOn } from 'react-icons/md'
-import { RxArrowLeft } from 'react-icons/rx'
 import { Link, useLocation, useNavigate } from 'react-router-dom'
 import { ReactComponent as HackertabLogo } from 'src/assets/logo.svg'
 import { SearchBar } from 'src/components/Elements/SearchBar'
@@ -51,16 +50,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')
@@ -100,7 +89,7 @@ export const Header = () => {
             className="profileImageContainer"
             onClick={() => {
               if (isConnected()) {
-                navigate('/settings/profile')
+                navigate('/settings/general')
               } else {
                 openAuthModal()
               }
@@ -119,15 +108,7 @@ export const Header = () => {
             )}
           </CircleButton>
         </div>
-        {location.pathname === '/' ? (
-          <UserTags />
-        ) : (
-          <div className="backToHome">
-            <Link to="/">
-              <RxArrowLeft size={20} /> Back
-            </Link>
-          </div>
-        )}
+        {location.pathname === '/' && <UserTags />}
       </header>
     </>
   )

src/components/Layout/SettingsLayout/SettingsLayout.tsx

@@ -5,10 +5,6 @@ import './settings.css'
 
 export const SettingsLayout = () => {
   const navigation = [
-    {
-      name: 'Profile',
-      path: '/settings/profile',
-    },
     {
       name: 'Topics',
       path: '/settings/topics',

src/features/auth/components/AuthModal.tsx

@@ -1,4 +1,4 @@
-import { AuthProvider, OAuthProvider, signInWithPopup } from 'firebase/auth'
+import { AuthProvider, signInWithPopup } from 'firebase/auth'
 import { FaGithub } from 'react-icons/fa'
 import { FcGoogle } from 'react-icons/fc'
 import { IoHeartCircle } from 'react-icons/io5'
@@ -19,21 +19,17 @@ export const AuthModal = ({ showAuth }: AuthModalProps) => {
   const signIn = (provider: AuthProvider) => {
     signInWithPopup(firebaseAuth, provider)
       .then((result) => {
-        const credential = OAuthProvider.credentialFromResult(result)
-        const idToken = credential?.idToken
-        const email = result.user.displayName
         const name = result.user.displayName
         const imageURL = result.user.photoURL
-        if (idToken && name && email && imageURL) {
+        if (name && imageURL) {
           trackUserConnect(provider.providerId)
           closeAuthModal()
           initState({
-            idToken: idToken,
             user: {
               name: name,
-              email: email,
               imageURL: imageURL,
             },
+            providerId: provider.providerId,
           })
         }
       })

src/features/auth/hooks/useAuth.ts

@@ -4,7 +4,7 @@ import { trackUserDisconnect } from 'src/lib/analytics'
 export const useAuth = () => {
   const { isAuthModalOpen, openAuthModal, closeAuthModal } = AuthModalStore()
   const authStore = AuthStore()
-  const { idToken, user, initState, clear } = authStore
+  const { user, providerId, initState, clear } = authStore
 
   const isConnected = () => user != null
 
@@ -20,7 +20,7 @@ export const useAuth = () => {
     isConnected,
     logout,
     isAuthModalOpen,
-    idToken,
     user,
+    providerId,
   }
 }

src/features/auth/stores/authStore.ts

@@ -3,8 +3,8 @@ import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
 
 type AuthState = {
-  idToken: string | null
   user: User | null
+  providerId: string | null
 }
 
 type AuthActions = {
@@ -16,13 +16,12 @@ type AuthActions = {
 export const AuthStore = create(
   persist<AuthState & AuthActions>(
     (set) => ({
-      idToken: null,
       user: null,
-
+      providerId: null,
       initState: (newState: AuthState) =>
         set({
-          idToken: newState.idToken,
           user: newState.user,
+          providerId: newState.providerId,
         }),
       setStreak: (streak: number) =>
         set((state) => ({

src/features/auth/types/index.ts

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

src/features/settings/components/AddSearchEngine.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { isValidURL } from 'src/utils/UrlUtils'
 
 import { TiPlus } from 'react-icons/ti'
+import { Button } from 'src/components/Elements'
 import { useUserPreferences } from 'src/stores/preferences'
 
 export const AddSearchEngine = () => {
@@ -45,9 +46,9 @@ export const AddSearchEngine = () => {
             placeholder="https://google.com?q="
           />
           <div>
-            <button onClick={onAddSearchEngine}>
-              <TiPlus /> Add
-            </button>
+            <Button startIcon={<TiPlus />} size="small" onClick={onAddSearchEngine}>
+              Add
+            </Button>
           </div>
         </div>
         {RssInputFeedback && (

src/features/settings/components/GeneralSettings/DNDSettings.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import Select, { SingleValue } from 'react-select'
+import { Button } from 'src/components/Elements'
 import { trackDNDEnable } from 'src/lib/analytics'
 import { useUserPreferences } from 'src/stores/preferences'
 import { diffBetweenTwoDatesInMinutes } from 'src/utils/DateUtils'
@@ -101,7 +102,9 @@ export const DNDSettings = () => {
             />
           </div>
 
-          <button onClick={onApplyClicked}>Apply</button>
+          <Button size="small" onClick={onApplyClicked}>
+            Apply
+          </Button>
         </div>
         {timeoutLabel() && (
           <div className="settingHint">

src/features/settings/components/GeneralSettings/GeneralSettings.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import Toggle from 'react-toggle'
 import 'react-toggle/style.css'
-import { ChipsSet } from 'src/components/Elements'
+import { Button, ChipsSet } from 'src/components/Elements'
 import { Footer } from 'src/components/Layout'
 import { SettingsContentLayout } from 'src/components/Layout/SettingsContentLayout'
+import { useAuth, User } from 'src/features/auth'
 import {
   identifyUserLinksInNewTab,
   identifyUserListingMode,
@@ -19,6 +20,27 @@ import { Option } from 'src/types'
 import { DNDSettings } from './DNDSettings'
 import './generalSettings.css'
 
+interface UserInfoProps {
+  user: User
+}
+
+const UserInfo = ({ user }: UserInfoProps) => {
+  const { logout, providerId } = useAuth()
+
+  return (
+    <div className="userContent">
+      {user?.imageURL && <img src={user.imageURL} className="userImage"></img>}
+      <div className="userInfos">
+        <div className="userName">{user.name}</div>
+        <div className="providerId">Logged using {providerId}</div>
+      </div>
+      <Button onClick={logout} size="small">
+        Logout
+      </Button>
+    </div>
+  )
+}
+
 export const GeneralSettings = () => {
   const {
     openLinksNewTab,
@@ -62,13 +84,16 @@ export const GeneralSettings = () => {
     }
   }
 
+  const { user } = useAuth()
+
   return (
     <SettingsContentLayout
       title="General Settings"
       description={
         'Customize your experience by selecting the number of cards you want to see, the search engine you want to use and more.'
       }>
       <div>
+        {user != null && <UserInfo user={user} />}
         <div className="settingRow">
           <p className="settingTitle">Max number of cards to display</p>
           <div className="settingContent">

src/features/settings/components/GeneralSettings/generalSettings.css

@@ -35,10 +35,12 @@
 .rssButton {
   background-color: #ee802f;
   color: white;
+  &:hover {
+    background-color: #f99147;
+    color: white;
+  }
 }
-.rssButton:hover {
-  opacity: 0.9;
-}
+
 .settingContent {
   width: 100%;
   flex: 1;
@@ -93,3 +95,32 @@ Select styles
   border-radius: 20px !important;
   color: var(--tag-secondary-color) !important;
 }
+
+.userContent {
+  width: auto;
+  padding: 20px 10px;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--card-content-divider);
+}
+.userContent .userImage {
+  width: 60px;
+  height: 60px;
+  border-radius: 100%;
+}
+.userContent .userInfos {
+  flex: 1;
+  width: auto;
+  margin-left: 10px;
+}
+.userContent .userName {
+  font-size: larger;
+  font-weight: 600;
+}
+.userContent .userEmail {
+  font-size: medium;
+  margin-top: 6px;
+}
+.userContent .logoutBtn {
+  margin-left: auto;
+}