From 2aa4008e686e7f6474a0b474fc2b58d1a2c15a3f Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Sun, 25 Dec 2022 01:29:51 -0800 Subject: [PATCH 01/20] Fix menu hover bg color --- styles/variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/variables.scss b/styles/variables.scss index 1a3a53a8..f0bec0fe 100644 --- a/styles/variables.scss +++ b/styles/variables.scss @@ -126,7 +126,7 @@ $menu--text--light: $grey-90; $menu--text--dark: $grey-50; $menu--separator--light: $grey-90; $menu--separator--dark: $grey-05; -$menu--item--bg--light--hover: $grey-90; +$menu--item--bg--light--hover: $grey-85; $menu--item--bg--dark--hover: $grey-00; $menu--text--light--hover: $grey-100; $menu--text--dark--hover: $grey-15; From 7dca486d5af24017124feb6c84072b709a60796c Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Sun, 25 Dec 2022 01:31:18 -0800 Subject: [PATCH 02/20] Fix menu spacing Still delicate but fine for now --- components/HeaderMenu/index.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/HeaderMenu/index.scss b/components/HeaderMenu/index.scss index 212fa3c2..0299d5c2 100644 --- a/components/HeaderMenu/index.scss +++ b/components/HeaderMenu/index.scss @@ -4,7 +4,7 @@ display: none; min-width: 220px; position: absolute; - top: $unit * 5; // This shouldn't be hardcoded. How to calculate it? + top: $unit * 5.75; // This shouldn't be hardcoded. How to calculate it? // Also, add space that doesn't make the menu disappear if you move your mouse slowly z-index: 10; } From 406eb328005e60898ecb654a86061d766c15b8e5 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Sun, 25 Dec 2022 01:36:40 -0800 Subject: [PATCH 03/20] Remove logs --- components/AccountModal/index.tsx | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/components/AccountModal/index.tsx b/components/AccountModal/index.tsx index ab8438c4..e4df1a02 100644 --- a/components/AccountModal/index.tsx +++ b/components/AccountModal/index.tsx @@ -19,6 +19,8 @@ import './index.scss' const AccountModal = () => { const { account } = useSnapshot(accountState) + const cookie = getCookie('user') + const router = useRouter() const { t } = useTranslation('common') const locale = @@ -37,11 +39,12 @@ const AccountModal = () => { const genderSelect = React.createRef() const privateSelect = React.createRef() - // useEffect(() => { - // if (cookies.user) setPicture(cookies.user.picture) - // if (cookies.user) setLanguage(cookies.user.language) - // if (cookies.user) setGender(cookies.user.gender) - // }, [cookies]) + useEffect(() => { + console.log(cookie) + // if (cookie) setPicture(cookie.picture) + // if (cookie) setLanguage(cookie.user.language) + // if (cookie) setGender(cookie.user.gender) + }, [cookie]) const pictureOptions = pictureData .sort((a, b) => (a.name.en > b.name.en ? 1 : -1)) From a3246efd4a3d8132a4334bfc21a88f08c5740d71 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Sun, 25 Dec 2022 02:53:13 -0800 Subject: [PATCH 04/20] Remove logs --- components/AxSelect/index.tsx | 14 -------------- components/WeaponGrid/index.tsx | 5 ----- utils/groupWeaponKeys.tsx | 3 --- 3 files changed, 22 deletions(-) diff --git a/components/AxSelect/index.tsx b/components/AxSelect/index.tsx index 28ee96f6..5c33def7 100644 --- a/components/AxSelect/index.tsx +++ b/components/AxSelect/index.tsx @@ -107,13 +107,6 @@ const AXSelect = (props: Props) => { }, [props.currentSkills, setSecondaryAxModifier]) useEffect(() => { - console.log( - primaryAxModifier, - primaryAxValue, - secondaryAxModifier, - secondaryAxValue - ) - let noErrors = false if (errors.axValue1 === '' && errors.axValue2 === '') { @@ -132,13 +125,6 @@ const AXSelect = (props: Props) => { secondaryAxValue > 0 ) noErrors = true - else - console.log( - primaryAxModifier >= 0, - primaryAxValue > 0, - secondaryAxModifier >= 0, - secondaryAxValue > 0 - ) } props.sendValidity(noErrors) diff --git a/components/WeaponGrid/index.tsx b/components/WeaponGrid/index.tsx index a051c7ed..33d9d32e 100644 --- a/components/WeaponGrid/index.tsx +++ b/components/WeaponGrid/index.tsx @@ -106,12 +106,8 @@ const WeaponGrid = (props: Props) => { .catch((error) => { const code = error.response.status const data = error.response.data - console.log(error.response) - - console.log(data, code) if (code === 422) { if (data.code === 'incompatible_weapon_for_position') { - console.log('Here') setShowIncompatibleAlert(true) } } @@ -339,7 +335,6 @@ const WeaponGrid = (props: Props) => { } const incompatibleAlert = () => { - console.log(t('alert.incompatible_weapon')) return showIncompatibleAlert ? ( key.group) @@ -28,7 +27,5 @@ export function groupWeaponKeys(keys: WeaponKey[]) { groupedKeys[weaponKeyGroups[i].slug] = keys.filter((key) => key.group == i) } - console.log(groupedKeys) - return groupedKeys } From cd2836a1cb76f81b0f60da5f335098bb5369e80e Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Sun, 25 Dec 2022 16:02:21 -0800 Subject: [PATCH 05/20] Export DialogTitle --- components/Dialog/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/components/Dialog/index.tsx b/components/Dialog/index.tsx index 2438a2ed..fb58acd8 100644 --- a/components/Dialog/index.tsx +++ b/components/Dialog/index.tsx @@ -35,5 +35,6 @@ export const DialogContent = React.forwardRef( ) export const Dialog = DialogPrimitive.Root +export const DialogTitle = DialogPrimitive.Title export const DialogTrigger = DialogPrimitive.Trigger export const DialogClose = DialogPrimitive.Close From 7d248cf91bd6901a0c9a08511b3ebef4e7d3355e Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Sun, 25 Dec 2022 16:03:32 -0800 Subject: [PATCH 06/20] Remove headers --- pages/p/[party].tsx | 28 +++++++++++++--------------- 1 file changed, 13 insertions(+), 15 deletions(-) diff --git a/pages/p/[party].tsx b/pages/p/[party].tsx index 0496d603..806637bc 100644 --- a/pages/p/[party].tsx +++ b/pages/p/[party].tsx @@ -7,6 +7,7 @@ import Party from '~components/Party' import { appState } from '~utils/appState' import { groupWeaponKeys } from '~utils/groupWeaponKeys' import organizeRaids from '~utils/organizeRaids' +import setUserToken from '~utils/setUserToken' import api from '~utils/api' import type { NextApiRequest, NextApiResponse } from 'next' @@ -48,38 +49,35 @@ export const getServerSidePaths = async () => { // prettier-ignore export const getServerSideProps = async ({ req, res, locale, query }: { req: NextApiRequest, res: NextApiResponse, locale: string, query: { [index: string]: string } }) => { - // Cookies - const cookie = getCookie("account", { req, res }) - const accountData: AccountCookie = cookie - ? JSON.parse(cookie as string) - : null - - const headers = accountData - ? { headers: { Authorization: `Bearer ${accountData.token}` } } - : {} + // Set headers for server-side requests + setUserToken(req, res) let { raids, sortedRaids } = await api.endpoints.raids .getAll() .then((response) => organizeRaids(response.data)) let jobs = await api.endpoints.jobs - .getAll({ params: headers }) + .getAll() .then((response) => { return response.data }) - let jobSkills = await api.allJobSkills(headers).then((response) => response.data) + let jobSkills = await api + .allJobSkills() + .then((response) => response.data) let weaponKeys = await api.endpoints.weapon_keys .getAll() .then((response) => groupWeaponKeys(response.data)) - + let party: Party | null = null if (query.party) { - let response = await api.endpoints.parties.getOne({ id: query.party, params: headers }) + let response = await api.endpoints.parties.getOne({ + id: query.party + }) party = response.data.party } else { - console.log("No party code") + console.log('No party code') } return { @@ -90,7 +88,7 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex raids: raids, sortedRaids: sortedRaids, weaponKeys: weaponKeys, - ...(await serverSideTranslations(locale, ["common"])), + ...(await serverSideTranslations(locale, ['common'])), // Will be passed to the page component as props }, } From c49e9308617f66ab05f56e9940786cb9faaa75f6 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Sun, 25 Dec 2022 16:04:01 -0800 Subject: [PATCH 07/20] Add theme to state and cookies --- types/UserCookie.d.ts | 1 + utils/accountState.tsx | 20 +++++++++++--------- 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/types/UserCookie.d.ts b/types/UserCookie.d.ts index df04aadc..15a6c840 100644 --- a/types/UserCookie.d.ts +++ b/types/UserCookie.d.ts @@ -3,4 +3,5 @@ interface UserCookie { element: string language: string gender: number + theme: string } diff --git a/utils/accountState.tsx b/utils/accountState.tsx index 5ad320d8..fe2d3249 100644 --- a/utils/accountState.tsx +++ b/utils/accountState.tsx @@ -1,19 +1,21 @@ import { proxy } from 'valtio' +export type UserState = { + id: string + username: string + picture: string + element: string + gender: number + language: string + theme: string +} + interface AccountState { [key: string]: any account: { authorized: boolean - user: - | { - id: string - username: string - picture: string - element: string - gender: number - } - | undefined + user: UserState | undefined } } From 0bc0251dad0ff141b895a905c208ff85f1dab2a6 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Sun, 25 Dec 2022 16:04:16 -0800 Subject: [PATCH 08/20] Refactor cookie setting in _app --- pages/_app.tsx | 30 +++++++++++++++++++----------- 1 file changed, 19 insertions(+), 11 deletions(-) diff --git a/pages/_app.tsx b/pages/_app.tsx index 6d80149d..83bba370 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,5 +1,5 @@ import { useEffect } from 'react' -import { getCookie } from 'cookies-next' +import { getCookie, getCookies } from 'cookies-next' import { appWithTranslation } from 'next-i18next' import { ThemeProvider } from 'next-themes' @@ -12,27 +12,35 @@ import setUserToken from '~utils/setUserToken' import '../styles/globals.scss' function MyApp({ Component, pageProps }: AppProps) { - const cookie = getCookie('account') - const cookieData: AccountCookie = cookie ? JSON.parse(cookie as string) : null + 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, + } useEffect(() => { setUserToken() - if (cookie) { - console.log(`Logged in as user "${cookieData.username}"`) + if (accountCookie) { + console.log(`Logged in as user "${cookieData.user}"`) + console.log(cookieData.account, cookieData.user) accountState.account.authorized = true accountState.account.user = { - id: cookieData.userId, - username: cookieData.username, - picture: '', - element: '', - gender: 0, + id: cookieData.account.userId, + username: cookieData.account.username, + picture: cookieData.user.picture, + element: cookieData.user.element, + gender: cookieData.user.gender, + language: cookieData.user.language, + theme: cookieData.user.theme, } } else { console.log(`You are not currently logged in.`) } - }, [cookie, cookieData]) + }, []) return ( From fb31d6795cbd663ca8ae6513573d0f2a08fadc81 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Sun, 25 Dec 2022 16:05:31 -0800 Subject: [PATCH 09/20] Update AccountModal * Uses new Selects * Adds PictureSelectItem for showing an image next to text * Adds translations * Add theme select --- components/AccountModal/index.scss | 14 +- components/AccountModal/index.tsx | 359 ++++++++++++++---------- components/PictureSelectItem/index.scss | 42 +++ components/PictureSelectItem/index.tsx | 35 +++ components/Select/index.scss | 4 + public/locales/en/common.json | 8 +- public/locales/ja/common.json | 8 +- 7 files changed, 306 insertions(+), 164 deletions(-) create mode 100644 components/PictureSelectItem/index.scss create mode 100644 components/PictureSelectItem/index.tsx 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 = () => { > -

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

    Displayed next to your name

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

    - Displayed on the Character tab of your teams -

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

    - {t('modals.settings.descriptions.private')} -

    -
    - - - - -
    */} - + {pictureField()} + {genderField()} + {languageField()} + {themeField()}
    - +
  • {t('menu.logout')}
    • From 6d8786e370829ab0aa0c31a0e8cbb556ae4f5cd5 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Sun, 25 Dec 2022 19:35:17 -0800 Subject: [PATCH 18/20] Add changeTheme util --- utils/changeTheme.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 utils/changeTheme.tsx diff --git a/utils/changeTheme.tsx b/utils/changeTheme.tsx new file mode 100644 index 00000000..f0f3ab89 --- /dev/null +++ b/utils/changeTheme.tsx @@ -0,0 +1,9 @@ +import { useTheme } from 'next-themes' +import { accountState } from '~utils/accountState' + +export default function changeTheme() { + const { theme, setTheme } = useTheme() + if (accountState.account.user) { + setTheme(accountState.account.user.theme) + } +} From 61a02649cf8189b188e4b91fd97d9fc73e714ae3 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Sun, 25 Dec 2022 20:11:50 -0800 Subject: [PATCH 19/20] Fix themes --- components/AccountModal/index.tsx | 18 +++++++++++++++--- pages/_app.tsx | 6 +----- utils/changeLanguage.tsx | 1 + 3 files changed, 17 insertions(+), 8 deletions(-) diff --git a/components/AccountModal/index.tsx b/components/AccountModal/index.tsx index b8b43941..d3e1b615 100644 --- a/components/AccountModal/index.tsx +++ b/components/AccountModal/index.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react' +import React, { useEffect, useState } from 'react' import { getCookie, setCookie } from 'cookies-next' import { useRouter } from 'next/router' import { useTranslation } from 'next-i18next' @@ -23,6 +23,7 @@ import { pictureData } from '~utils/pictureData' import CrossIcon from '~public/icons/Cross.svg' import './index.scss' +import { useTheme } from 'next-themes' type StateVariables = { [key: string]: boolean @@ -48,6 +49,10 @@ const AccountModal = (props: Props) => { 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() + // Cookies const accountCookie = getCookie('account') const userCookie = getCookie('user') @@ -109,6 +114,7 @@ const AccountModal = (props: Props) => { function handleThemeChange(value: string) { setTheme(value) + setAppTheme(value) } // API calls @@ -131,7 +137,6 @@ const AccountModal = (props: Props) => { .update(accountState.account.user?.id, object) .then((response) => { const user = response.data - console.log(user) const cookieObj = { picture: user.avatar.picture, @@ -155,7 +160,6 @@ const AccountModal = (props: Props) => { setOpen(false) changeLanguage(router, user.language) - router.push(router.asPath, undefined) }) } } @@ -255,6 +259,14 @@ const AccountModal = (props: Props) => { ) + useEffect(() => { + setMounted(true) + }, []) + + if (!mounted) { + return null + } + return ( diff --git a/pages/_app.tsx b/pages/_app.tsx index e8dfb782..66db9852 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -20,10 +20,6 @@ function MyApp({ Component, pageProps }: AppProps) { user: userCookie ? JSON.parse(userCookie as string) : undefined, } - const [useSystem, setUseSystem] = useState( - cookieData.user?.theme === 'system' - ) - useEffect(() => { setUserToken() @@ -46,7 +42,7 @@ function MyApp({ Component, pageProps }: AppProps) { }, []) return ( - + diff --git a/utils/changeLanguage.tsx b/utils/changeLanguage.tsx index 5c6f2763..ff719da6 100644 --- a/utils/changeLanguage.tsx +++ b/utils/changeLanguage.tsx @@ -7,5 +7,6 @@ export default function changeLanguage( ) { if (newLanguage !== router.locale) { setCookie('NEXT_LOCALE', newLanguage, { path: '/' }) + router.push(router.asPath, undefined, { locale: newLanguage }) } } From dfc4e5dfd6d7b22bd00d6ed496b8e1bbdede0d1f Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Sun, 25 Dec 2022 20:12:07 -0800 Subject: [PATCH 20/20] Change theme wasnt necessary --- utils/changeTheme.tsx | 9 --------- 1 file changed, 9 deletions(-) delete mode 100644 utils/changeTheme.tsx diff --git a/utils/changeTheme.tsx b/utils/changeTheme.tsx deleted file mode 100644 index f0f3ab89..00000000 --- a/utils/changeTheme.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { useTheme } from 'next-themes' -import { accountState } from '~utils/accountState' - -export default function changeTheme() { - const { theme, setTheme } = useTheme() - if (accountState.account.user) { - setTheme(accountState.account.user.theme) - } -}