Refactor AccountModal

Now it uses SelectTableField

components/AccountModal/index.scss

@@ -45,81 +45,6 @@
         transform: translateX(21px);
       }
     }
-
-    .field {
-      align-items: center;
-      display: flex;
-      flex-direction: row;
-      gap: $unit * 2;
-
-      .left {
-        display: flex;
-        flex-direction: column;
-        flex-grow: 1;
-        gap: calc($unit / 2);
-
-        label {
-          color: var(--text-tertiary);
-          font-size: $font-regular;
-        }
-
-        p {
-          color: var(--text-secondary);
-          font-size: $font-small;
-          line-height: 1.1;
-          max-width: 300px;
-
-          &.jp {
-            max-width: 270px;
-          }
-        }
-      }
-
-      .preview {
-        $diameter: $unit * 6;
-        background-color: $grey-90;
-        border-radius: 999px;
-        height: $diameter;
-        width: $diameter;
-
-        img {
-          height: $diameter;
-          width: $diameter;
-        }
-
-        &.fire {
-          background: $fire-bg-20;
-        }
-
-        &.water {
-          background: $water-bg-20;
-        }
-
-        &.wind {
-          background: $wind-bg-20;
-        }
-
-        &.earth {
-          background: $earth-bg-20;
-        }
-
-        &.dark {
-          background: $dark-bg-10;
-        }
-
-        &.light {
-          background: $light-bg-20;
-        }
-      }
-    }
-
-    section {
-      margin-bottom: $unit;
-
-      h2 {
-        margin-bottom: $unit * 3;
-      }
-    }
   }
 
   .DialogDescription {

components/AccountModal/index.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
+import { getCookie, setCookie } from 'cookies-next'
 import { useRouter } from 'next/router'
 import { useTranslation } from 'next-i18next'
 
@@ -9,30 +10,46 @@ import {
   DialogTitle,
   DialogTrigger,
 } from '~components/Dialog'
-// import * as Dialog from '@radix-ui/react-dialog'
+import Button from '~components/Button'
-import * as Switch from '@radix-ui/react-switch'
-
-import Select from '~components/Select'
 import SelectItem from '~components/SelectItem'
 import PictureSelectItem from '~components/PictureSelectItem'
+// import * as Switch from '@radix-ui/react-switch'
 
 import api from '~utils/api'
+import changeLanguage from 'utils/changeLanguage'
 import { accountState } from '~utils/accountState'
 import { pictureData } from '~utils/pictureData'
 
-import Button from '~components/Button'
-
 import CrossIcon from '~public/icons/Cross.svg'
 import './index.scss'
-import { useSnapshot } from 'valtio'
+import { subscribe } from 'valtio'
-import { getCookie, setCookie } from 'cookies-next'
+import SelectTableField from '~components/SelectTableField'
 
-const AccountModal = () => {
+type StateVariables = {
-  const router = useRouter()
+  [key: string]: boolean
+  picture: boolean
+  gender: boolean
+  language: boolean
+  theme: boolean
+}
+
+interface Props {
+  username?: string
+  picture?: string
+  gender?: number
+  language?: string
+  theme?: string
+  private?: boolean
+}
+
+const AccountModal = (props: Props) => {
+  // Localization
   const { t } = useTranslation('common')
+  const router = useRouter()
   const locale =
     router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
 
+  // Cookies
   const accountCookie = getCookie('account')
   const userCookie = getCookie('user')
 
@@ -41,28 +58,110 @@ const AccountModal = () => {
     user: userCookie ? JSON.parse(userCookie as string) : undefined,
   }
 
-  // State
+  // UI State
   const [open, setOpen] = useState(false)
-  const [openPictureSelect, setOpenPictureSelect] = useState(false)
+  const [selectOpenState, setSelectOpenState] = useState<StateVariables>({
-  const [openGenderSelect, setOpenGenderSelect] = useState(false)
+    picture: false,
-  const [openLanguageSelect, setOpenLanguageSelect] = useState(false)
+    gender: false,
-  const [openThemeSelect, setOpenThemeSelect] = useState(false)
+    language: false,
+    theme: false,
+  })
 
-  const [username, setUsername] = useState('')
+  // Values
-  const [picture, setPicture] = useState('')
+  const [username, setUsername] = useState(props.username || '')
-  const [language, setLanguage] = useState('')
+  const [picture, setPicture] = useState(props.picture || '')
-  const [gender, setGender] = useState(0)
+  const [language, setLanguage] = useState(props.language || '')
-  const [theme, setTheme] = useState('system')
+  const [gender, setGender] = useState(props.gender || 0)
+  const [theme, setTheme] = useState(props.theme || 'system')
   // const [privateProfile, setPrivateProfile] = useState(false)
 
-  useEffect(() => {
+  // Setup
-    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])
 
+  // UI management
+  function openChange(open: boolean) {
+    setOpen(open)
+  }
+
+  function openSelect(name: 'picture' | 'gender' | 'language' | 'theme') {
+    const stateVars = selectOpenState
+    Object.keys(stateVars).forEach((key) => {
+      if (key === name) {
+        stateVars[name] = true
+      } else {
+        stateVars[key] = false
+      }
+    })
+
+    setSelectOpenState(stateVars)
+  }
+
+  // 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)
+  }
+
+  // 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
+          console.log(user)
+
+          const cookieObj = {
+            picture: user.avatar.picture,
+            element: user.avatar.element,
+            gender: user.gender,
+            language: user.language,
+            theme: user.theme,
+          }
+
+          setCookie('user', cookieObj, { path: '/' })
+
+          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)
+          router.push(router.asPath, undefined)
+        })
+    }
+  }
+
+  // Views
   const pictureOptions = pictureData
     .sort((a, b) => (a.name.en > b.name.en ? 1 : -1))
     .map((item, i) => {
@@ -81,78 +180,81 @@ const AccountModal = () => {
       )
     })
 
-  function handlePictureChange(value: string) {
+  const pictureField = () => (
-    setPicture(value)
+    <SelectTableField
-  }
+      name="picture"
+      description={t('modals.settings.descriptions.picture')}
+      className="Image"
+      label={t('modals.settings.labels.picture')}
+      open={selectOpenState.picture}
+      onClick={() => openSelect('picture')}
+      onChange={handlePictureChange}
+      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>
+  )
 
-  function handleLanguageChange(value: string) {
+  const genderField = () => (
-    setLanguage(value)
+    <SelectTableField
-  }
+      name="gender"
+      description={t('modals.settings.descriptions.gender')}
+      label={t('modals.settings.labels.gender')}
+      open={selectOpenState.gender}
+      onClick={() => openSelect('gender')}
+      onChange={handleGenderChange}
+      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>
+  )
 
-  function handleGenderChange(value: string) {
+  const languageField = () => (
-    setGender(parseInt(value))
+    <SelectTableField
-  }
+      name="language"
+      label={t('modals.settings.labels.language')}
+      open={selectOpenState.language}
+      onClick={() => openSelect('language')}
+      onChange={handleLanguageChange}
+      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>
+  )
 
-  function handleThemeChange(value: string) {
+  const themeField = () => (
-    setTheme(value)
+    <SelectTableField
-  }
+      name="theme"
-
+      label={t('modals.settings.labels.theme')}
-  // function handlePrivateChange(checked: boolean) {
+      open={selectOpenState.theme}
-  //   setPrivateProfile(checked)
+      onClick={() => openSelect('theme')}
-  // }
+      onChange={handleThemeChange}
-
+      value={theme}
-  function update(event: React.FormEvent<HTMLFormElement>) {
+    >
-    event.preventDefault()
+      <SelectItem key="system" value="system">
-
+        {t('modals.settings.theme.system')}
-    const object = {
+      </SelectItem>
-      user: {
+      <SelectItem key="light" value="light">
-        picture: picture,
+        {t('modals.settings.theme.light')}
-        element: pictureData.find((i) => i.filename === picture)?.element,
+      </SelectItem>
-        language: language,
+      <SelectItem key="dark" value="dark">
-        gender: gender,
+        {t('modals.settings.theme.dark')}
-        // private: privateProfile,
+      </SelectItem>
-      },
+    </SelectTableField>
-    }
+  )
-
-    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,
-        }
-
-        setCookie('user', cookieObj, { path: '/' })
-
-        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)
-      })
-  }
-
-  function changeLanguage(newLanguage: string) {
-    if (newLanguage !== router.locale) {
-      // setCookies("NEXT_LOCALE", newLanguage, { path: "/" })
-      // router.push(router.asPath, undefined, { locale: newLanguage })
-    }
-  }
-
-  function openChange(open: boolean) {
-    setOpen(open)
-  }
 
   return (
     <Dialog open={open} onOpenChange={openChange}>
@@ -177,126 +279,10 @@ const AccountModal = () => {
         </div>
 
         <form onSubmit={update}>
-          <div className="field">
+          {pictureField()}
-            <div className="left">
+          {genderField()}
-              <label>{t('modals.settings.labels.picture')}</label>
+          {languageField()}
-              {/* <p className={locale}>Displayed next to your name</p> */}
+          {themeField()}
-            </div>
-
-            <div
-              className={`preview ${
-                pictureData.find((i) => i.filename === picture)?.element
-              }`}
-            >
-              {picture ? (
-                <img
-                  alt="Profile preview"
-                  srcSet={`/profile/${picture}.png,
-                                             /profile/${picture}@2x.png 2x`}
-                  src={`/profile/${picture}.png`}
-                />
-              ) : (
-                ''
-              )}
-            </div>
-
-            <Select
-              name="picture"
-              open={openPictureSelect}
-              onClick={() => setOpenPictureSelect(!openPictureSelect)}
-              onValueChange={handlePictureChange}
-              triggerClass="Bound Table"
-              value={picture}
-            >
-              {pictureOptions}
-            </Select>
-          </div>
-          <div className="field">
-            <div className="left">
-              <label>{t('modals.settings.labels.gender')}</label>
-              {/* <p className={locale}>
-                  Displayed on the Character tab of your teams
-                </p> */}
-            </div>
-
-            <Select
-              name="gender"
-              open={openGenderSelect}
-              onClick={() => setOpenGenderSelect(!openGenderSelect)}
-              onValueChange={handleGenderChange}
-              triggerClass="Bound Table"
-              value={`${gender}`}
-            >
-              <SelectItem key="gran" value="0">
-                {t('modals.settings.gender.gran')}
-              </SelectItem>
-              <SelectItem key="djeeta" value="1">
-                {t('modals.settings.gender.djeeta')}
-              </SelectItem>
-            </Select>
-          </div>
-          <div className="field">
-            <div className="left">
-              <label>{t('modals.settings.labels.language')}</label>
-            </div>
-
-            <Select
-              name="language"
-              open={openLanguageSelect}
-              onClick={() => setOpenLanguageSelect(!openLanguageSelect)}
-              onValueChange={handleLanguageChange}
-              triggerClass="Bound Table"
-              value={`${language}`}
-            >
-              <SelectItem key="en" value="en">
-                {t('modals.settings.language.english')}
-              </SelectItem>
-              <SelectItem key="ja" value="ja">
-                {t('modals.settings.language.japanese')}
-              </SelectItem>
-            </Select>
-          </div>
-          <div className="field">
-            <div className="left">
-              <label>{t('modals.settings.labels.theme')}</label>
-            </div>
-
-            <Select
-              name="theme"
-              open={openThemeSelect}
-              onClick={() => setOpenThemeSelect(!openThemeSelect)}
-              onValueChange={handleThemeChange}
-              triggerClass="Bound Table"
-              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>
-            </Select>
-          </div>
-          {/* <div className="field">
-              <div className="left">
-                <label>{t('modals.settings.labels.private')}</label>
-                <p className={locale}>
-                  {t('modals.settings.descriptions.private')}
-                </p>
-              </div>
-
-              <Switch.Root
-                className="Switch"
-                onCheckedChange={handlePrivateChange}
-                checked={privateProfile}
-              >
-                <Switch.Thumb className="Thumb" />
-              </Switch.Root>
-            </div> */}
-
           <Button
             contained={true}
             text={t('modals.settings.buttons.confirm')}