feat: Remove Profile page + Moved userInfo to General settings.

Author: zouhir96

src/components/Layout/Header.tsx

@@ -99,7 +99,7 @@ export const Header = () => {
           <CircleButton
             onClick={() => {
               if (isConnected()) {
-                navigate('/settings/profile')
+                navigate('/settings/general')
               } else {
                 openAuthModal()
               }

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

@@ -29,6 +29,7 @@ export const AuthModal = ({ showAuth }: AuthModalProps) => {
               name: name,
               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 { user, initState, clear } = authStore
+  const { user, providerId, initState, clear } = authStore
 
   const isConnected = () => user != null
 
@@ -21,5 +21,6 @@ export const useAuth = () => {
     logout,
     isAuthModalOpen,
     user,
+    providerId,
   }
 }

src/features/auth/stores/authStore.ts

@@ -4,6 +4,7 @@ import { persist } from 'zustand/middleware'
 
 type AuthState = {
   user: User | null
+  providerId: string | null
 }
 
 type AuthActions = {
@@ -14,11 +15,12 @@ type AuthActions = {
 export const AuthStore = create(
   persist<AuthState & AuthActions>(
     (set) => ({
-      idToken: null,
       user: null,
+      providerId: null,
       initState: (newState: AuthState) =>
         set({
           user: newState.user,
+          providerId: newState.providerId,
         }),
       clear: () => set({ user: null }),
     }),

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 className="logoutBtn" onClick={logout}>
+        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

@@ -93,3 +93,31 @@ 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 {
+  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;
+}

src/features/settings/components/Profile/ProfileSettings.tsx

@@ -1,6 +1,6 @@
 export * from './components/BookmarkSettings'
 export * from './components/GeneralSettings'
-export * from './components/Profile/ProfileSettings'
+
 export * from './components/SearchEngineSettings'
 export * from './components/SourceSettings'
 export * from './components/TopicSettings'