diff --git a/components/AccountModal/index.scss b/components/AccountModal/index.scss index 4c3f258b..fa254155 100644 --- a/components/AccountModal/index.scss +++ b/components/AccountModal/index.scss @@ -2,7 +2,7 @@ display: flex; flex-direction: column; gap: $unit * 2; - width: $unit * 60; + width: $unit * 64; form { display: flex; @@ -52,14 +52,6 @@ flex-direction: row; gap: $unit * 2; - select { - background: no-repeat url('/icons/ArrowDark.svg'), $grey-90; - background-position-y: center; - background-position-x: 95%; - margin: 0; - width: 240px; - } - .left { display: flex; flex-direction: column; @@ -67,7 +59,7 @@ gap: calc($unit / 2); label { - color: var(--text-secondary); + color: var(--text-tertiary); font-size: $font-regular; } @@ -84,7 +76,7 @@ } .preview { - $diameter: 48px; + $diameter: $unit * 6; background-color: $grey-90; border-radius: 999px; height: $diameter; diff --git a/components/AccountModal/index.tsx b/components/AccountModal/index.tsx index e4df1a02..858e48f7 100644 --- a/components/AccountModal/index.tsx +++ b/components/AccountModal/index.tsx @@ -1,12 +1,21 @@ import React, { useEffect, useState } from 'react' -import { getCookie } from 'cookies-next' import { useRouter } from 'next/router' -import { useSnapshot } from 'valtio' import { useTranslation } from 'next-i18next' -import * as Dialog from '@radix-ui/react-dialog' +import { + Dialog, + DialogClose, + DialogContent, + DialogTitle, + DialogTrigger, +} from '~components/Dialog' +// import * as Dialog from '@radix-ui/react-dialog' import * as Switch from '@radix-ui/react-switch' +import Select from '~components/Select' +import SelectItem from '~components/SelectItem' +import PictureSelectItem from '~components/PictureSelectItem' + import api from '~utils/api' import { accountState } from '~utils/accountState' import { pictureData } from '~utils/pictureData' @@ -15,63 +24,83 @@ import Button from '~components/Button' import CrossIcon from '~public/icons/Cross.svg' import './index.scss' +import { useSnapshot } from 'valtio' +import { getCookie, setCookie } from 'cookies-next' const AccountModal = () => { - const { account } = useSnapshot(accountState) - - const cookie = getCookie('user') - const router = useRouter() const { t } = useTranslation('common') const locale = router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en' + 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, + } + // State const [open, setOpen] = useState(false) + const [openPictureSelect, setOpenPictureSelect] = useState(false) + const [openGenderSelect, setOpenGenderSelect] = useState(false) + const [openLanguageSelect, setOpenLanguageSelect] = useState(false) + const [openThemeSelect, setOpenThemeSelect] = useState(false) + + const [username, setUsername] = useState('') const [picture, setPicture] = useState('') const [language, setLanguage] = useState('') const [gender, setGender] = useState(0) - const [privateProfile, setPrivateProfile] = useState(false) - - // Refs - const pictureSelect = React.createRef() - const languageSelect = React.createRef() - const genderSelect = React.createRef() - const privateSelect = React.createRef() + const [theme, setTheme] = useState('system') + // const [privateProfile, setPrivateProfile] = useState(false) useEffect(() => { - console.log(cookie) - // if (cookie) setPicture(cookie.picture) - // if (cookie) setLanguage(cookie.user.language) - // if (cookie) setGender(cookie.user.gender) - }, [cookie]) + setUsername(cookieData.account.username) + setGender(cookieData.user.gender) + setPicture(cookieData.user.picture) + setLanguage(cookieData.user.language) + setTheme(cookieData.user.theme ? cookieData.user.theme : 'system') + }, [cookieData]) const pictureOptions = pictureData .sort((a, b) => (a.name.en > b.name.en ? 1 : -1)) .map((item, i) => { return ( - + ) }) - function handlePictureChange(event: React.ChangeEvent) { - if (pictureSelect.current) setPicture(pictureSelect.current.value) + function handlePictureChange(value: string) { + setPicture(value) } - function handleLanguageChange(event: React.ChangeEvent) { - if (languageSelect.current) setLanguage(languageSelect.current.value) + function handleLanguageChange(value: string) { + setLanguage(value) } - function handleGenderChange(event: React.ChangeEvent) { - if (genderSelect.current) setGender(parseInt(genderSelect.current.value)) + function handleGenderChange(value: string) { + setGender(parseInt(value)) } - function handlePrivateChange(checked: boolean) { - setPrivateProfile(checked) + function handleThemeChange(value: string) { + setTheme(value) } + // function handlePrivateChange(checked: boolean) { + // setPrivateProfile(checked) + // } + function update(event: React.FormEvent) { event.preventDefault() @@ -81,42 +110,44 @@ const AccountModal = () => { element: pictureData.find((i) => i.filename === picture)?.element, language: language, gender: gender, - private: privateProfile, + // private: privateProfile, }, } - // api.endpoints.users - // .update(cookies.account.user_id, object, headers) - // .then((response) => { - // const user = response.data.user + api.endpoints.users + .update(cookieData.account.user_id, object) + .then((response) => { + const user = response.data.user - // const cookieObj = { - // picture: user.picture.picture, - // element: user.picture.element, - // gender: user.gender, - // language: user.language, - // } + const cookieObj = { + picture: user.picture.picture, + element: user.picture.element, + gender: user.gender, + language: user.language, + } - // setCookies("user", cookieObj, { path: "/" }) + setCookie('user', cookieObj, { path: '/' }) - // accountState.account.user = { - // id: user.id, - // username: user.username, - // picture: user.picture.picture, - // element: user.picture.element, - // gender: user.gender, - // } + accountState.account.user = { + id: user.id, + username: user.username, + picture: user.picture.picture, + element: user.picture.element, + language: user.language, + theme: user.theme, + gender: user.gender, + } - // setOpen(false) - // changeLanguage(user.language) - // }) + setOpen(false) + changeLanguage(user.language) + }) } function changeLanguage(newLanguage: string) { - // if (newLanguage !== router.locale) { - // setCookies("NEXT_LOCALE", newLanguage, { path: "/" }) - // router.push(router.asPath, undefined, { locale: newLanguage }) - // } + if (newLanguage !== router.locale) { + // setCookies("NEXT_LOCALE", newLanguage, { path: "/" }) + // router.push(router.asPath, undefined, { locale: newLanguage }) + } } function openChange(open: boolean) { @@ -124,104 +155,132 @@ const AccountModal = () => { } return ( - - + +
  • {t('menu.settings')}
    • -     - - event.preventDefault()} - > -
    -
    - - {t('modals.settings.title')} - - - @{account.user?.username} - -
    - - - - - + + +
    +
    + + {t('modals.settings.title')} + + @{username}
    + + + + + +
    -
    -
    -
    - -
    + +
    +
    + + {/*

    Displayed next to your name

    */} +
    -
    i.filename === picture)?.element - }`} - > - {picture ? ( - Profile preview i.filename === picture)?.element + }`} + > + {picture ? ( + Profile preview - ) : ( - '' - )} -
    - - + src={`/profile/${picture}.png`} + /> + ) : ( + '' + )}
    -
    -
    - -
    - + +
    +
    +
    + + {/*

    + Displayed on the Character tab of your teams +

    */}
    -
    -
    - -
    - + +
    +
    +
    +
    -
    + + +
    +
    +
    + +
    + + +
    + {/*

    @@ -236,17 +295,15 @@ const AccountModal = () => { > -

    +
    */} -