Skip to content

Commit a796a2a

Browse files
medyomedyo
committed
feat: refactor user information display into separate UserInfo component
1 parent dfb6db5 commit a796a2a

2 files changed

Lines changed: 82 additions & 80 deletions

File tree

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

Lines changed: 4 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,10 @@
1-
import React, { useState } from 'react'
2-
import { FaGithub } from 'react-icons/fa'
3-
import { FcGoogle } from 'react-icons/fc'
4-
import { IoCheckmarkOutline } from 'react-icons/io5'
1+
import React from 'react'
52
import Toggle from 'react-toggle'
63
import 'react-toggle/style.css'
7-
import { ReactComponent as StreakIcon } from 'src/assets/icons/fire_icon.svg'
8-
import { Button, ChipsSet, ConfirmModal } from 'src/components/Elements'
4+
import { ChipsSet } from 'src/components/Elements'
95
import { Footer } from 'src/components/Layout'
106
import { SettingsContentLayout } from 'src/components/Layout/SettingsContentLayout'
11-
import { useAuth, User } from 'src/features/auth'
7+
import { useAuth } from 'src/features/auth'
128
import {
139
identifyUserLinksInNewTab,
1410
identifyUserListingMode,
@@ -21,82 +17,10 @@ import {
2117
} from 'src/lib/analytics'
2218
import { useUserPreferences } from 'src/stores/preferences'
2319
import { Option } from 'src/types'
24-
import { pluralize } from 'src/utils/String'
20+
import { UserInfo } from '../UserSettings/UserInfo'
2521
import { DNDSettings } from './DNDSettings'
2622
import './generalSettings.css'
2723

28-
// TODO Maybe we should create a separate folder in components for UserInfo ?
29-
interface UserInfoProps {
30-
user: User
31-
}
32-
33-
const UserInfo = ({ user }: UserInfoProps) => {
34-
const { logout, providerId } = useAuth()
35-
const providerName = providerId?.split('.')[0] || 'Unknown'
36-
const [showLogout, setShowLogout] = useState(false)
37-
38-
return (
39-
<div className="userContent">
40-
<ConfirmModal
41-
showModal={showLogout}
42-
title="Confirm logout"
43-
description="Are you sure you want to logout?"
44-
onClose={() => setShowLogout(false)}
45-
onConfirm={logout}
46-
/>
47-
{user?.imageURL && <img src={user.imageURL} className="userImage"></img>}
48-
<div className="userInfos">
49-
<div className="userName">{user.name}</div>
50-
<div className="sub">
51-
{providerId == 'github.com' ? (
52-
<FaGithub size={18} />
53-
) : providerId == 'google.com' ? (
54-
<FcGoogle size={18} />
55-
) : null}
56-
Connected with <span className="capitalize">{providerName}</span>
57-
</div>
58-
<div>
59-
<Button className="logoutBtn" onClick={() => setShowLogout(true)} size="small">
60-
Logout
61-
</Button>
62-
</div>
63-
</div>
64-
65-
<div className="streaks">
66-
<p className="title">
67-
You're on{' '}
68-
<span className="highlight">
69-
<StreakIcon className="icon" />
70-
{pluralize(user.streak || 1, 'day')} streak
71-
</span>
72-
</p>
73-
<div>
74-
<ul className="streaksWeek">
75-
{Array.from({ length: 5 }, (_, i) => {
76-
const streak = user.streak || 1
77-
if (i < streak) {
78-
return (
79-
<li key={`day-${i}`} className="dayWrapper checked">
80-
<span className="day">
81-
<IoCheckmarkOutline />
82-
</span>
83-
</li>
84-
)
85-
} else {
86-
return (
87-
<li key={`day-${i}`} className="dayWrapper">
88-
<span className="day"></span>
89-
</li>
90-
)
91-
}
92-
})}
93-
</ul>
94-
</div>
95-
</div>
96-
</div>
97-
)
98-
}
99-
10024
export const GeneralSettings = () => {
10125
const {
10226
openLinksNewTab,

‎src/features/settings/components/UserSettings/UserInfo.tsx‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import { useState } from 'react'
2+
import { FaGithub } from 'react-icons/fa'
3+
import { FcGoogle } from 'react-icons/fc'
4+
import { IoCheckmarkOutline } from 'react-icons/io5'
5+
import { ReactComponent as StreakIcon } from 'src/assets/icons/fire_icon.svg'
6+
import { Button, ConfirmModal } from 'src/components/Elements'
7+
import { useAuth, User } from 'src/features/auth'
8+
import { pluralize } from 'src/utils/String'
9+
10+
interface UserInfoProps {
11+
user: User
12+
}
13+
14+
export const UserInfo = ({ user }: UserInfoProps) => {
15+
const { logout, providerId } = useAuth()
16+
const providerName = providerId?.split('.')[0] || 'Unknown'
17+
const [showLogout, setShowLogout] = useState(false)
18+
19+
return (
20+
<div className="userContent">
21+
<ConfirmModal
22+
showModal={showLogout}
23+
title="Confirm logout"
24+
description="Are you sure you want to logout?"
25+
onClose={() => setShowLogout(false)}
26+
onConfirm={logout}
27+
/>
28+
{user?.imageURL && <img src={user.imageURL} className="userImage"></img>}
29+
<div className="userInfos">
30+
<div className="userName">{user.name}</div>
31+
<div className="sub">
32+
{providerId == 'github.com' ? (
33+
<FaGithub size={18} />
34+
) : providerId == 'google.com' ? (
35+
<FcGoogle size={18} />
36+
) : null}
37+
Connected with <span className="capitalize">{providerName}</span>
38+
</div>
39+
<div>
40+
<Button className="logoutBtn" onClick={() => setShowLogout(true)} size="small">
41+
Logout
42+
</Button>
43+
</div>
44+
</div>
45+
46+
<div className="streaks">
47+
<p className="title">
48+
You're on{' '}
49+
<span className="highlight">
50+
<StreakIcon className="icon" /> {pluralize(user.streak || 1, 'day')} streak
51+
</span>
52+
</p>
53+
<div>
54+
<ul className="streaksWeek">
55+
{Array.from({ length: 5 }, (_, i) => {
56+
const streak = user.streak || 1
57+
if (i < streak) {
58+
return (
59+
<li key={`day-${i}`} className="dayWrapper checked">
60+
<span className="day">
61+
<IoCheckmarkOutline />
62+
</span>
63+
</li>
64+
)
65+
} else {
66+
return (
67+
<li key={`day-${i}`} className="dayWrapper">
68+
<span className="day"></span>
69+
</li>
70+
)
71+
}
72+
})}
73+
</ul>
74+
</div>
75+
</div>
76+
</div>
77+
)
78+
}

0 commit comments

Comments
 (0)