Change how we handle modals
This commit is contained in:
parent
1337668152
commit
0901fbf21d
4 changed files with 362 additions and 307 deletions
|
|
@ -34,300 +34,306 @@ type StateVariables = {
|
|||
}
|
||||
|
||||
interface Props {
|
||||
open: boolean
|
||||
username?: string
|
||||
picture?: string
|
||||
gender?: number
|
||||
language?: string
|
||||
theme?: string
|
||||
private?: boolean
|
||||
onOpenChange?: (open: boolean) => void
|
||||
}
|
||||
|
||||
const AccountModal = (props: Props) => {
|
||||
// Localization
|
||||
const { t } = useTranslation('common')
|
||||
const router = useRouter()
|
||||
const locale =
|
||||
router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
|
||||
const AccountModal = React.forwardRef<HTMLDivElement, Props>(
|
||||
function AccountModal(props: Props, forwardedRef) {
|
||||
// Localization
|
||||
const { t } = useTranslation('common')
|
||||
const router = useRouter()
|
||||
const locale =
|
||||
router.locale && ['en', 'ja'].includes(router.locale)
|
||||
? router.locale
|
||||
: 'en'
|
||||
|
||||
// useEffect only runs on the client, so now we can safely show the UI
|
||||
const [mounted, setMounted] = useState(false)
|
||||
const { theme: appTheme, setTheme: setAppTheme } = useTheme()
|
||||
// useEffect only runs on the client, so now we can safely show the UI
|
||||
const [mounted, setMounted] = useState(false)
|
||||
const { theme: appTheme, setTheme: setAppTheme } = useTheme()
|
||||
|
||||
// Cookies
|
||||
const accountCookie = getCookie('account')
|
||||
const userCookie = getCookie('user')
|
||||
// Cookies
|
||||
const accountCookie = getCookie('account')
|
||||
const userCookie = getCookie('user')
|
||||
|
||||
const cookieData = {
|
||||
account: accountCookie ? JSON.parse(accountCookie as string) : undefined,
|
||||
user: userCookie ? JSON.parse(userCookie as string) : undefined,
|
||||
}
|
||||
|
||||
// UI State
|
||||
const [open, setOpen] = useState(false)
|
||||
const [selectOpenState, setSelectOpenState] = useState<StateVariables>({
|
||||
picture: false,
|
||||
gender: false,
|
||||
language: false,
|
||||
theme: false,
|
||||
})
|
||||
|
||||
// Values
|
||||
const [username, setUsername] = useState(props.username || '')
|
||||
const [picture, setPicture] = useState(props.picture || '')
|
||||
const [language, setLanguage] = useState(props.language || '')
|
||||
const [gender, setGender] = useState(props.gender || 0)
|
||||
const [theme, setTheme] = useState(props.theme || 'system')
|
||||
// const [privateProfile, setPrivateProfile] = useState(false)
|
||||
|
||||
// Setup
|
||||
const [pictureOpen, setPictureOpen] = useState(false)
|
||||
const [genderOpen, setGenderOpen] = useState(false)
|
||||
const [languageOpen, setLanguageOpen] = useState(false)
|
||||
const [themeOpen, setThemeOpen] = useState(false)
|
||||
|
||||
// Refs
|
||||
const headerRef = React.createRef<HTMLDivElement>()
|
||||
const footerRef = React.createRef<HTMLDivElement>()
|
||||
|
||||
// UI management
|
||||
function openChange(open: boolean) {
|
||||
setOpen(open)
|
||||
}
|
||||
|
||||
function openSelect(name: 'picture' | 'gender' | 'language' | 'theme') {
|
||||
setPictureOpen(name === 'picture' ? !pictureOpen : false)
|
||||
setGenderOpen(name === 'gender' ? !genderOpen : false)
|
||||
setLanguageOpen(name === 'language' ? !languageOpen : false)
|
||||
setThemeOpen(name === 'theme' ? !themeOpen : false)
|
||||
}
|
||||
|
||||
// Event handlers
|
||||
function handlePictureChange(value: string) {
|
||||
setPicture(value)
|
||||
}
|
||||
|
||||
function handleLanguageChange(value: string) {
|
||||
setLanguage(value)
|
||||
}
|
||||
|
||||
function handleGenderChange(value: string) {
|
||||
setGender(parseInt(value))
|
||||
}
|
||||
|
||||
function handleThemeChange(value: string) {
|
||||
setTheme(value)
|
||||
setAppTheme(value)
|
||||
}
|
||||
|
||||
function onEscapeKeyDown(event: KeyboardEvent) {
|
||||
if (pictureOpen || genderOpen || languageOpen || themeOpen) {
|
||||
return event.preventDefault()
|
||||
} else {
|
||||
setOpen(false)
|
||||
}
|
||||
}
|
||||
|
||||
// API calls
|
||||
function update(event: React.FormEvent<HTMLFormElement>) {
|
||||
event.preventDefault()
|
||||
|
||||
const object = {
|
||||
user: {
|
||||
picture: picture,
|
||||
element: pictureData.find((i) => i.filename === picture)?.element,
|
||||
language: language,
|
||||
gender: gender,
|
||||
theme: theme,
|
||||
// private: privateProfile,
|
||||
},
|
||||
const cookieData = {
|
||||
account: accountCookie ? JSON.parse(accountCookie as string) : undefined,
|
||||
user: userCookie ? JSON.parse(userCookie as string) : undefined,
|
||||
}
|
||||
|
||||
if (accountState.account.user) {
|
||||
api.endpoints.users
|
||||
.update(accountState.account.user?.id, object)
|
||||
.then((response) => {
|
||||
const user = response.data
|
||||
|
||||
const cookieObj = {
|
||||
picture: user.avatar.picture,
|
||||
element: user.avatar.element,
|
||||
gender: user.gender,
|
||||
language: user.language,
|
||||
theme: user.theme,
|
||||
}
|
||||
|
||||
const expiresAt = new Date()
|
||||
expiresAt.setDate(expiresAt.getDate() + 60)
|
||||
setCookie('user', cookieObj, { path: '/', expires: expiresAt })
|
||||
|
||||
accountState.account.user = {
|
||||
id: user.id,
|
||||
username: user.username,
|
||||
picture: user.avatar.picture,
|
||||
element: user.avatar.element,
|
||||
language: user.language,
|
||||
theme: user.theme,
|
||||
gender: user.gender,
|
||||
}
|
||||
|
||||
setOpen(false)
|
||||
changeLanguage(router, user.language)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// Views
|
||||
const pictureOptions = pictureData
|
||||
.sort((a, b) => (a.name.en > b.name.en ? 1 : -1))
|
||||
.map((item, i) => {
|
||||
return (
|
||||
<PictureSelectItem
|
||||
key={`picture-${i}`}
|
||||
element={item.element}
|
||||
src={[
|
||||
`/profile/${item.filename}.png`,
|
||||
`/profile/${item.filename}@2x.png 2x`,
|
||||
]}
|
||||
value={item.filename}
|
||||
>
|
||||
{item.name[locale]}
|
||||
</PictureSelectItem>
|
||||
)
|
||||
// UI State
|
||||
const [open, setOpen] = useState(false)
|
||||
const [selectOpenState, setSelectOpenState] = useState<StateVariables>({
|
||||
picture: false,
|
||||
gender: false,
|
||||
language: false,
|
||||
theme: false,
|
||||
})
|
||||
|
||||
const pictureField = () => (
|
||||
<SelectTableField
|
||||
name="picture"
|
||||
description={t('modals.settings.descriptions.picture')}
|
||||
className="Image"
|
||||
label={t('modals.settings.labels.picture')}
|
||||
open={pictureOpen}
|
||||
onOpenChange={() => openSelect('picture')}
|
||||
onChange={handlePictureChange}
|
||||
onClose={() => setPictureOpen(false)}
|
||||
imageAlt={t('modals.settings.labels.image_alt')}
|
||||
imageClass={pictureData.find((i) => i.filename === picture)?.element}
|
||||
imageSrc={[`/profile/${picture}.png`, `/profile/${picture}@2x.png 2x`]}
|
||||
value={picture}
|
||||
>
|
||||
{pictureOptions}
|
||||
</SelectTableField>
|
||||
)
|
||||
// Values
|
||||
const [username, setUsername] = useState(props.username || '')
|
||||
const [picture, setPicture] = useState(props.picture || '')
|
||||
const [language, setLanguage] = useState(props.language || '')
|
||||
const [gender, setGender] = useState(props.gender || 0)
|
||||
const [theme, setTheme] = useState(props.theme || 'system')
|
||||
// const [privateProfile, setPrivateProfile] = useState(false)
|
||||
|
||||
const genderField = () => (
|
||||
<SelectTableField
|
||||
name="gender"
|
||||
description={t('modals.settings.descriptions.gender')}
|
||||
label={t('modals.settings.labels.gender')}
|
||||
open={genderOpen}
|
||||
onOpenChange={() => openSelect('gender')}
|
||||
onChange={handleGenderChange}
|
||||
onClose={() => setGenderOpen(false)}
|
||||
value={`${gender}`}
|
||||
>
|
||||
<SelectItem key="gran" value="0">
|
||||
{t('modals.settings.gender.gran')}
|
||||
</SelectItem>
|
||||
<SelectItem key="djeeta" value="1">
|
||||
{t('modals.settings.gender.djeeta')}
|
||||
</SelectItem>
|
||||
</SelectTableField>
|
||||
)
|
||||
// Setup
|
||||
const [pictureOpen, setPictureOpen] = useState(false)
|
||||
const [genderOpen, setGenderOpen] = useState(false)
|
||||
const [languageOpen, setLanguageOpen] = useState(false)
|
||||
const [themeOpen, setThemeOpen] = useState(false)
|
||||
|
||||
const languageField = () => (
|
||||
<SelectTableField
|
||||
name="language"
|
||||
label={t('modals.settings.labels.language')}
|
||||
open={languageOpen}
|
||||
onOpenChange={() => openSelect('language')}
|
||||
onChange={handleLanguageChange}
|
||||
onClose={() => setLanguageOpen(false)}
|
||||
value={language}
|
||||
>
|
||||
<SelectItem key="en" value="en">
|
||||
{t('modals.settings.language.english')}
|
||||
</SelectItem>
|
||||
<SelectItem key="ja" value="ja">
|
||||
{t('modals.settings.language.japanese')}
|
||||
</SelectItem>
|
||||
</SelectTableField>
|
||||
)
|
||||
// Refs
|
||||
const headerRef = React.createRef<HTMLDivElement>()
|
||||
const footerRef = React.createRef<HTMLDivElement>()
|
||||
|
||||
const themeField = () => (
|
||||
<SelectTableField
|
||||
name="theme"
|
||||
label={t('modals.settings.labels.theme')}
|
||||
open={themeOpen}
|
||||
onOpenChange={() => openSelect('theme')}
|
||||
onChange={handleThemeChange}
|
||||
onClose={() => setThemeOpen(false)}
|
||||
value={theme}
|
||||
>
|
||||
<SelectItem key="system" value="system">
|
||||
{t('modals.settings.theme.system')}
|
||||
</SelectItem>
|
||||
<SelectItem key="light" value="light">
|
||||
{t('modals.settings.theme.light')}
|
||||
</SelectItem>
|
||||
<SelectItem key="dark" value="dark">
|
||||
{t('modals.settings.theme.dark')}
|
||||
</SelectItem>
|
||||
</SelectTableField>
|
||||
)
|
||||
useEffect(() => {
|
||||
setOpen(props.open)
|
||||
}, [props.open])
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true)
|
||||
}, [])
|
||||
// UI management
|
||||
function openChange(open: boolean) {
|
||||
if (props.onOpenChange) props.onOpenChange(open)
|
||||
setOpen(open)
|
||||
}
|
||||
|
||||
if (!mounted) {
|
||||
return null
|
||||
}
|
||||
function openSelect(name: 'picture' | 'gender' | 'language' | 'theme') {
|
||||
setPictureOpen(name === 'picture' ? !pictureOpen : false)
|
||||
setGenderOpen(name === 'gender' ? !genderOpen : false)
|
||||
setLanguageOpen(name === 'language' ? !languageOpen : false)
|
||||
setThemeOpen(name === 'theme' ? !themeOpen : false)
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={openChange}>
|
||||
<DialogTrigger asChild>
|
||||
<div className="MenuItem">
|
||||
<span>{t('menu.settings')}</span>
|
||||
</div>
|
||||
</DialogTrigger>
|
||||
<DialogContent
|
||||
className="Account"
|
||||
headerref={headerRef}
|
||||
footerref={footerRef}
|
||||
onOpenAutoFocus={(event: Event) => {}}
|
||||
onEscapeKeyDown={onEscapeKeyDown}
|
||||
// Event handlers
|
||||
function handlePictureChange(value: string) {
|
||||
setPicture(value)
|
||||
}
|
||||
|
||||
function handleLanguageChange(value: string) {
|
||||
setLanguage(value)
|
||||
}
|
||||
|
||||
function handleGenderChange(value: string) {
|
||||
setGender(parseInt(value))
|
||||
}
|
||||
|
||||
function handleThemeChange(value: string) {
|
||||
setTheme(value)
|
||||
setAppTheme(value)
|
||||
}
|
||||
|
||||
function onEscapeKeyDown(event: KeyboardEvent) {
|
||||
if (pictureOpen || genderOpen || languageOpen || themeOpen) {
|
||||
return event.preventDefault()
|
||||
} else {
|
||||
setOpen(false)
|
||||
}
|
||||
}
|
||||
|
||||
// API calls
|
||||
function update(event: React.FormEvent<HTMLFormElement>) {
|
||||
event.preventDefault()
|
||||
|
||||
const object = {
|
||||
user: {
|
||||
picture: picture,
|
||||
element: pictureData.find((i) => i.filename === picture)?.element,
|
||||
language: language,
|
||||
gender: gender,
|
||||
theme: theme,
|
||||
// private: privateProfile,
|
||||
},
|
||||
}
|
||||
|
||||
if (accountState.account.user) {
|
||||
api.endpoints.users
|
||||
.update(accountState.account.user?.id, object)
|
||||
.then((response) => {
|
||||
const user = response.data
|
||||
|
||||
const cookieObj = {
|
||||
picture: user.avatar.picture,
|
||||
element: user.avatar.element,
|
||||
gender: user.gender,
|
||||
language: user.language,
|
||||
theme: user.theme,
|
||||
}
|
||||
|
||||
const expiresAt = new Date()
|
||||
expiresAt.setDate(expiresAt.getDate() + 60)
|
||||
setCookie('user', cookieObj, { path: '/', expires: expiresAt })
|
||||
|
||||
accountState.account.user = {
|
||||
id: user.id,
|
||||
username: user.username,
|
||||
picture: user.avatar.picture,
|
||||
element: user.avatar.element,
|
||||
language: user.language,
|
||||
theme: user.theme,
|
||||
gender: user.gender,
|
||||
}
|
||||
|
||||
setOpen(false)
|
||||
changeLanguage(router, user.language)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// Views
|
||||
const pictureOptions = pictureData
|
||||
.sort((a, b) => (a.name.en > b.name.en ? 1 : -1))
|
||||
.map((item, i) => {
|
||||
return (
|
||||
<PictureSelectItem
|
||||
key={`picture-${i}`}
|
||||
element={item.element}
|
||||
src={[
|
||||
`/profile/${item.filename}.png`,
|
||||
`/profile/${item.filename}@2x.png 2x`,
|
||||
]}
|
||||
value={item.filename}
|
||||
>
|
||||
{item.name[locale]}
|
||||
</PictureSelectItem>
|
||||
)
|
||||
})
|
||||
|
||||
const pictureField = () => (
|
||||
<SelectTableField
|
||||
name="picture"
|
||||
description={t('modals.settings.descriptions.picture')}
|
||||
className="Image"
|
||||
label={t('modals.settings.labels.picture')}
|
||||
open={pictureOpen}
|
||||
onOpenChange={() => openSelect('picture')}
|
||||
onChange={handlePictureChange}
|
||||
onClose={() => setPictureOpen(false)}
|
||||
imageAlt={t('modals.settings.labels.image_alt')}
|
||||
imageClass={pictureData.find((i) => i.filename === picture)?.element}
|
||||
imageSrc={[`/profile/${picture}.png`, `/profile/${picture}@2x.png 2x`]}
|
||||
value={picture}
|
||||
>
|
||||
<div className="DialogHeader" ref={headerRef}>
|
||||
<div className="DialogTop">
|
||||
<DialogTitle className="SubTitle">
|
||||
{t('modals.settings.title')}
|
||||
</DialogTitle>
|
||||
<DialogTitle className="DialogTitle">@{username}</DialogTitle>
|
||||
</div>
|
||||
<DialogClose className="DialogClose" asChild>
|
||||
<span>
|
||||
<CrossIcon />
|
||||
</span>
|
||||
</DialogClose>
|
||||
</div>
|
||||
{pictureOptions}
|
||||
</SelectTableField>
|
||||
)
|
||||
|
||||
<form onSubmit={update}>
|
||||
<div className="Fields">
|
||||
{pictureField()}
|
||||
{genderField()}
|
||||
{languageField()}
|
||||
{themeField()}
|
||||
const genderField = () => (
|
||||
<SelectTableField
|
||||
name="gender"
|
||||
description={t('modals.settings.descriptions.gender')}
|
||||
label={t('modals.settings.labels.gender')}
|
||||
open={genderOpen}
|
||||
onOpenChange={() => openSelect('gender')}
|
||||
onChange={handleGenderChange}
|
||||
onClose={() => setGenderOpen(false)}
|
||||
value={`${gender}`}
|
||||
>
|
||||
<SelectItem key="gran" value="0">
|
||||
{t('modals.settings.gender.gran')}
|
||||
</SelectItem>
|
||||
<SelectItem key="djeeta" value="1">
|
||||
{t('modals.settings.gender.djeeta')}
|
||||
</SelectItem>
|
||||
</SelectTableField>
|
||||
)
|
||||
|
||||
const languageField = () => (
|
||||
<SelectTableField
|
||||
name="language"
|
||||
label={t('modals.settings.labels.language')}
|
||||
open={languageOpen}
|
||||
onOpenChange={() => openSelect('language')}
|
||||
onChange={handleLanguageChange}
|
||||
onClose={() => setLanguageOpen(false)}
|
||||
value={language}
|
||||
>
|
||||
<SelectItem key="en" value="en">
|
||||
{t('modals.settings.language.english')}
|
||||
</SelectItem>
|
||||
<SelectItem key="ja" value="ja">
|
||||
{t('modals.settings.language.japanese')}
|
||||
</SelectItem>
|
||||
</SelectTableField>
|
||||
)
|
||||
|
||||
const themeField = () => (
|
||||
<SelectTableField
|
||||
name="theme"
|
||||
label={t('modals.settings.labels.theme')}
|
||||
open={themeOpen}
|
||||
onOpenChange={() => openSelect('theme')}
|
||||
onChange={handleThemeChange}
|
||||
onClose={() => setThemeOpen(false)}
|
||||
value={theme}
|
||||
>
|
||||
<SelectItem key="system" value="system">
|
||||
{t('modals.settings.theme.system')}
|
||||
</SelectItem>
|
||||
<SelectItem key="light" value="light">
|
||||
{t('modals.settings.theme.light')}
|
||||
</SelectItem>
|
||||
<SelectItem key="dark" value="dark">
|
||||
{t('modals.settings.theme.dark')}
|
||||
</SelectItem>
|
||||
</SelectTableField>
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true)
|
||||
}, [])
|
||||
|
||||
if (!mounted) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={openChange}>
|
||||
<DialogContent
|
||||
className="Account"
|
||||
headerref={headerRef}
|
||||
footerref={footerRef}
|
||||
onOpenAutoFocus={(event: Event) => {}}
|
||||
onEscapeKeyDown={onEscapeKeyDown}
|
||||
>
|
||||
<div className="DialogHeader" ref={headerRef}>
|
||||
<div className="DialogTop">
|
||||
<DialogTitle className="SubTitle">
|
||||
{t('modals.settings.title')}
|
||||
</DialogTitle>
|
||||
<DialogTitle className="DialogTitle">@{username}</DialogTitle>
|
||||
</div>
|
||||
<DialogClose className="DialogClose" asChild>
|
||||
<span>
|
||||
<CrossIcon />
|
||||
</span>
|
||||
</DialogClose>
|
||||
</div>
|
||||
<div className="DialogFooter" ref={footerRef}>
|
||||
<Button
|
||||
contained={true}
|
||||
text={t('modals.settings.buttons.confirm')}
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
<form onSubmit={update}>
|
||||
<div className="Fields">
|
||||
{pictureField()}
|
||||
{genderField()}
|
||||
{languageField()}
|
||||
{themeField()}
|
||||
</div>
|
||||
<div className="DialogFooter" ref={footerRef}>
|
||||
<Button
|
||||
contained={true}
|
||||
text={t('modals.settings.buttons.confirm')}
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
)
|
||||
|
||||
export default AccountModal
|
||||
|
|
|
|||
|
|
@ -5,22 +5,13 @@ import { useRouter } from 'next/router'
|
|||
import { useTranslation } from 'next-i18next'
|
||||
import classNames from 'classnames'
|
||||
import clonedeep from 'lodash.clonedeep'
|
||||
import Link from 'next/link'
|
||||
|
||||
import api from '~utils/api'
|
||||
import { accountState, initialAccountState } from '~utils/accountState'
|
||||
import { appState, initialAppState } from '~utils/appState'
|
||||
import capitalizeFirstLetter from '~utils/capitalizeFirstLetter'
|
||||
|
||||
import Button from '~components/Button'
|
||||
import HeaderMenu from '~components/HeaderMenu'
|
||||
|
||||
import AddIcon from '~public/icons/Add.svg'
|
||||
import LinkIcon from '~public/icons/Link.svg'
|
||||
import MenuIcon from '~public/icons/Menu.svg'
|
||||
import ArrowIcon from '~public/icons/Arrow.svg'
|
||||
import SaveIcon from '~public/icons/Save.svg'
|
||||
|
||||
import './index.scss'
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuTrigger,
|
||||
|
|
@ -29,11 +20,18 @@ import {
|
|||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
} from '~components/DropdownMenuContent'
|
||||
import Link from 'next/link'
|
||||
import LoginModal from '~components/LoginModal'
|
||||
import SignupModal from '~components/SignupModal'
|
||||
import AccountModal from '~components/AccountModal'
|
||||
import Toast from '~components/Toast'
|
||||
import Button from '~components/Button'
|
||||
|
||||
import LinkIcon from '~public/icons/Link.svg'
|
||||
import MenuIcon from '~public/icons/Menu.svg'
|
||||
import ArrowIcon from '~public/icons/Arrow.svg'
|
||||
import SaveIcon from '~public/icons/Save.svg'
|
||||
|
||||
import './index.scss'
|
||||
|
||||
const Header = () => {
|
||||
// Localization
|
||||
|
|
@ -44,6 +42,9 @@ const Header = () => {
|
|||
|
||||
// State management
|
||||
const [copyToastOpen, setCopyToastOpen] = useState(false)
|
||||
const [loginModalOpen, setLoginModalOpen] = useState(false)
|
||||
const [signupModalOpen, setSignupModalOpen] = useState(false)
|
||||
const [settingsModalOpen, setSettingsModalOpen] = useState(false)
|
||||
const [leftMenuOpen, setLeftMenuOpen] = useState(false)
|
||||
const [rightMenuOpen, setRightMenuOpen] = useState(false)
|
||||
|
||||
|
|
@ -82,6 +83,10 @@ const Header = () => {
|
|||
setRightMenuOpen(false)
|
||||
}
|
||||
|
||||
function handleSettingsOpenChanged(open: boolean) {
|
||||
setRightMenuOpen(false)
|
||||
}
|
||||
|
||||
function copyToClipboard() {
|
||||
const el = document.createElement('input')
|
||||
el.value = window.location.href
|
||||
|
|
@ -238,6 +243,34 @@ const Header = () => {
|
|||
)
|
||||
}
|
||||
|
||||
const settingsModal = () => {
|
||||
const user = accountState.account.user
|
||||
|
||||
if (user) {
|
||||
return (
|
||||
<AccountModal
|
||||
open={settingsModalOpen}
|
||||
username={user.username}
|
||||
picture={user.picture}
|
||||
gender={user.gender}
|
||||
language={user.language}
|
||||
theme={user.theme}
|
||||
onOpenChange={setSettingsModalOpen}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const loginModal = () => {
|
||||
return <LoginModal open={loginModalOpen} onOpenChange={setLoginModalOpen} />
|
||||
}
|
||||
|
||||
const signupModal = () => {
|
||||
return (
|
||||
<SignupModal open={signupModalOpen} onOpenChange={setSignupModalOpen} />
|
||||
)
|
||||
}
|
||||
|
||||
const left = () => {
|
||||
return (
|
||||
<section>
|
||||
|
|
@ -374,16 +407,9 @@ const Header = () => {
|
|||
<DropdownMenuGroup className="MenuGroup">
|
||||
<DropdownMenuItem
|
||||
className="MenuItem"
|
||||
onClick={closeRightMenu}
|
||||
asChild
|
||||
onClick={() => setSettingsModalOpen(true)}
|
||||
>
|
||||
<AccountModal
|
||||
username={account.user.username}
|
||||
picture={account.user.picture}
|
||||
gender={account.user.gender}
|
||||
language={account.user.language}
|
||||
theme={account.user.theme}
|
||||
/>
|
||||
<span>{t('menu.settings')}</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="MenuItem" onClick={logout}>
|
||||
<span>{t('menu.logout')}</span>
|
||||
|
|
@ -405,8 +431,18 @@ const Header = () => {
|
|||
</DropdownMenuGroup>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuGroup className="MenuGroup">
|
||||
<LoginModal />
|
||||
<SignupModal />
|
||||
<DropdownMenuItem
|
||||
className="MenuItem"
|
||||
onClick={() => setLoginModalOpen(true)}
|
||||
>
|
||||
<span>Log in</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
className="MenuItem"
|
||||
onClick={() => setSignupModalOpen(true)}
|
||||
>
|
||||
<span>Sign up</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuGroup>
|
||||
</>
|
||||
)
|
||||
|
|
@ -420,6 +456,9 @@ const Header = () => {
|
|||
{left()}
|
||||
{right()}
|
||||
{urlCopyToast()}
|
||||
{settingsModal()}
|
||||
{loginModal()}
|
||||
{signupModal()}
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useState } from 'react'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { setCookie } from 'cookies-next'
|
||||
import { useRouter } from 'next/router'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
|
@ -26,7 +26,12 @@ interface ErrorMap {
|
|||
const emailRegex =
|
||||
/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
|
||||
|
||||
const LoginModal = () => {
|
||||
interface Props {
|
||||
open: boolean
|
||||
onOpenChange?: (open: boolean) => void
|
||||
}
|
||||
|
||||
const LoginModal = (props: Props) => {
|
||||
const router = useRouter()
|
||||
const { t } = useTranslation('common')
|
||||
|
||||
|
|
@ -46,6 +51,10 @@ const LoginModal = () => {
|
|||
const footerRef: React.RefObject<HTMLDivElement> = React.createRef()
|
||||
const form: React.RefObject<HTMLInputElement>[] = [emailInput, passwordInput]
|
||||
|
||||
useEffect(() => {
|
||||
setOpen(props.open)
|
||||
}, [props.open])
|
||||
|
||||
function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
|
||||
const { name, value } = event.target
|
||||
let newErrors = { ...errors }
|
||||
|
|
@ -185,6 +194,8 @@ const LoginModal = () => {
|
|||
email: '',
|
||||
password: '',
|
||||
})
|
||||
|
||||
if (props.onOpenChange) props.onOpenChange(open)
|
||||
}
|
||||
|
||||
function onEscapeKeyDown(event: KeyboardEvent) {
|
||||
|
|
@ -198,11 +209,6 @@ const LoginModal = () => {
|
|||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={openChange}>
|
||||
<DialogTrigger asChild>
|
||||
<div className="MenuItem">
|
||||
<span>{t('menu.login')}</span>
|
||||
</div>
|
||||
</DialogTrigger>
|
||||
<DialogContent
|
||||
className="Login"
|
||||
footerref={footerRef}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useState } from 'react'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { setCookie } from 'cookies-next'
|
||||
import { useRouter } from 'next/router'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
|
|
@ -15,7 +15,10 @@ import DialogContent from '~components/DialogContent'
|
|||
import CrossIcon from '~public/icons/Cross.svg'
|
||||
import './index.scss'
|
||||
|
||||
interface Props {}
|
||||
interface Props {
|
||||
open: boolean
|
||||
onOpenChange?: (open: boolean) => void
|
||||
}
|
||||
|
||||
interface ErrorMap {
|
||||
[index: string]: string
|
||||
|
|
@ -58,6 +61,10 @@ const SignupModal = (props: Props) => {
|
|||
passwordConfirmationInput,
|
||||
]
|
||||
|
||||
useEffect(() => {
|
||||
setOpen(props.open)
|
||||
}, [props.open])
|
||||
|
||||
function register(event: React.FormEvent) {
|
||||
event.preventDefault()
|
||||
|
||||
|
|
@ -266,6 +273,8 @@ const SignupModal = (props: Props) => {
|
|||
password: '',
|
||||
passwordConfirmation: '',
|
||||
})
|
||||
|
||||
if (props.onOpenChange) props.onOpenChange(open)
|
||||
}
|
||||
|
||||
function onEscapeKeyDown(event: KeyboardEvent) {
|
||||
|
|
@ -279,11 +288,6 @@ const SignupModal = (props: Props) => {
|
|||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={openChange}>
|
||||
<DialogTrigger asChild>
|
||||
<div className="MenuItem">
|
||||
<span>{t('menu.signup')}</span>
|
||||
</div>
|
||||
</DialogTrigger>
|
||||
<DialogContent
|
||||
className="Signup"
|
||||
footerref={footerRef}
|
||||
|
|
|
|||
Loading…
Reference in a new issue