granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update AccountModal to support MC gender

Browse source
This commit is contained in:
Justin Edmund 2022-04-10 13:25:17 -07:00
parent 483ac8512f
commit 595b4491ad
1 changed files with 23 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
components/AccountModal/index.tsx
View file

@ -36,16 +36,19 @@ const AccountModal = () => {
const [open, setOpen] = useState(false) const [open, setOpen] = useState(false)
const [picture, setPicture] = useState('') const [picture, setPicture] = useState('')
const [language, setLanguage] = useState('') const [language, setLanguage] = useState('')
const [gender, setGender] = useState(0)
const [privateProfile, setPrivateProfile] = useState(false) const [privateProfile, setPrivateProfile] = useState(false)
// Refs // Refs
const pictureSelect = React.createRef<HTMLSelectElement>() const pictureSelect = React.createRef<HTMLSelectElement>()
const languageSelect = React.createRef<HTMLSelectElement>() const languageSelect = React.createRef<HTMLSelectElement>()
const genderSelect = React.createRef<HTMLSelectElement>()
const privateSelect = React.createRef<HTMLInputElement>() const privateSelect = React.createRef<HTMLInputElement>()
useEffect(() => { useEffect(() => {
if (cookies.user) setPicture(cookies.user.picture) if (cookies.user) setPicture(cookies.user.picture)
if (cookies.user) setLanguage(cookies.user.language) if (cookies.user) setLanguage(cookies.user.language)
if (cookies.user) setGender(cookies.user.gender)
}, [cookies]) }, [cookies])
const pictureOptions = ( const pictureOptions = (
@ -66,6 +69,11 @@ const AccountModal = () => {
setLanguage(languageSelect.current.value) setLanguage(languageSelect.current.value)
} }
function handleGenderChange(event: React.ChangeEvent<HTMLSelectElement>) {
if (genderSelect.current)
setGender(parseInt(genderSelect.current.value))
}
function handlePrivateChange(checked: boolean) { function handlePrivateChange(checked: boolean) {
setPrivateProfile(checked) setPrivateProfile(checked)
} }
@ -78,6 +86,7 @@ const AccountModal = () => {
picture: picture, picture: picture,
element: pictureData.find(i => i.filename === picture)?.element, element: pictureData.find(i => i.filename === picture)?.element,
language: language, language: language,
gender: gender,
private: privateProfile private: privateProfile
} }
} }
@ -89,7 +98,8 @@ const AccountModal = () => {
const cookieObj = { const cookieObj = {
picture: user.picture.picture, picture: user.picture.picture,
element: user.picture.element, element: user.picture.element,
language: user.language, gender: user.gender,
language: user.language
} }
setCookies('user', cookieObj, { path: '/'}) setCookies('user', cookieObj, { path: '/'})
@ -98,7 +108,8 @@ const AccountModal = () => {
id: user.id, id: user.id,
username: user.username, username: user.username,
picture: user.picture.picture, picture: user.picture.picture,
element: user.picture.element element: user.picture.element,
gender: user.gender
} }
setOpen(false) setOpen(false)
@ -157,6 +168,16 @@ const AccountModal = () => {
{pictureOptions} {pictureOptions}
</select> </select>
</div> </div>
<div className="field">
<div className="left">
<label>{t('modals.settings.labels.gender')}</label>
</div>
<select name="gender" onChange={handleGenderChange} value={gender} ref={genderSelect}>
<option key="gran" value="0">{t('modals.settings.gender.gran')}</option>
<option key="djeeta" value="1">{t('modals.settings.gender.djeeta')}</option>
</select>
</div>
<div className="field"> <div className="field">
<div className="left"> <div className="left">
<label>{t('modals.settings.labels.language')}</label> <label>{t('modals.settings.labels.language')}</label>