Component cookie fixes
This commit is contained in:
parent
94c885513d
commit
61a762b29b
8 changed files with 1435 additions and 1290 deletions
|
|
@ -1,41 +1,45 @@
|
|||
import React, { useEffect, useState } from 'react'
|
||||
import { useCookies } from 'react-cookie'
|
||||
import { useRouter } from 'next/router'
|
||||
import { useSnapshot } from 'valtio'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
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 * as Switch from '@radix-ui/react-switch'
|
||||
import * as Dialog from "@radix-ui/react-dialog"
|
||||
import * as Switch from "@radix-ui/react-switch"
|
||||
|
||||
import api from '~utils/api'
|
||||
import { accountState } from '~utils/accountState'
|
||||
import { pictureData } from '~utils/pictureData'
|
||||
import api from "~utils/api"
|
||||
import { accountState } from "~utils/accountState"
|
||||
import { pictureData } from "~utils/pictureData"
|
||||
|
||||
import Button from '~components/Button'
|
||||
import Button from "~components/Button"
|
||||
|
||||
import CrossIcon from '~public/icons/Cross.svg'
|
||||
import './index.scss'
|
||||
import CrossIcon from "~public/icons/Cross.svg"
|
||||
import "./index.scss"
|
||||
|
||||
const AccountModal = () => {
|
||||
const { account } = useSnapshot(accountState)
|
||||
|
||||
const router = useRouter()
|
||||
const { t } = useTranslation('common')
|
||||
const locale = (router.locale && ['en', 'ja'].includes(router.locale)) ? router.locale : 'en'
|
||||
const { t } = useTranslation("common")
|
||||
const locale =
|
||||
router.locale && ["en", "ja"].includes(router.locale) ? router.locale : "en"
|
||||
|
||||
// Cookies
|
||||
const [cookies, setCookies] = useCookies()
|
||||
const cookie = getCookie("account")
|
||||
|
||||
const headers = (cookies.account != null) ? {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${cookies.account.access_token}`
|
||||
}
|
||||
} : {}
|
||||
const headers = {}
|
||||
// cookies.account != null
|
||||
// ? {
|
||||
// headers: {
|
||||
// Authorization: `Bearer ${cookies.account.access_token}`,
|
||||
// },
|
||||
// }
|
||||
// : {}
|
||||
|
||||
// State
|
||||
const [open, setOpen] = useState(false)
|
||||
const [picture, setPicture] = useState('')
|
||||
const [language, setLanguage] = useState('')
|
||||
const [picture, setPicture] = useState("")
|
||||
const [language, setLanguage] = useState("")
|
||||
const [gender, setGender] = useState(0)
|
||||
const [privateProfile, setPrivateProfile] = useState(false)
|
||||
|
||||
|
|
@ -45,33 +49,32 @@ const AccountModal = () => {
|
|||
const genderSelect = React.createRef<HTMLSelectElement>()
|
||||
const privateSelect = React.createRef<HTMLInputElement>()
|
||||
|
||||
useEffect(() => {
|
||||
if (cookies.user) setPicture(cookies.user.picture)
|
||||
if (cookies.user) setLanguage(cookies.user.language)
|
||||
if (cookies.user) setGender(cookies.user.gender)
|
||||
}, [cookies])
|
||||
// useEffect(() => {
|
||||
// if (cookies.user) setPicture(cookies.user.picture)
|
||||
// if (cookies.user) setLanguage(cookies.user.language)
|
||||
// if (cookies.user) setGender(cookies.user.gender)
|
||||
// }, [cookies])
|
||||
|
||||
const pictureOptions = (
|
||||
pictureData.sort((a, b) => (a.name.en > b.name.en) ? 1 : -1).map((item, i) => {
|
||||
const pictureOptions = pictureData
|
||||
.sort((a, b) => (a.name.en > b.name.en ? 1 : -1))
|
||||
.map((item, i) => {
|
||||
return (
|
||||
<option key={`picture-${i}`} value={item.filename}>{item.name[locale]}</option>
|
||||
<option key={`picture-${i}`} value={item.filename}>
|
||||
{item.name[locale]}
|
||||
</option>
|
||||
)
|
||||
})
|
||||
)
|
||||
|
||||
function handlePictureChange(event: React.ChangeEvent<HTMLSelectElement>) {
|
||||
if (pictureSelect.current)
|
||||
setPicture(pictureSelect.current.value)
|
||||
if (pictureSelect.current) setPicture(pictureSelect.current.value)
|
||||
}
|
||||
|
||||
function handleLanguageChange(event: React.ChangeEvent<HTMLSelectElement>) {
|
||||
if (languageSelect.current)
|
||||
setLanguage(languageSelect.current.value)
|
||||
if (languageSelect.current) setLanguage(languageSelect.current.value)
|
||||
}
|
||||
|
||||
function handleGenderChange(event: React.ChangeEvent<HTMLSelectElement>) {
|
||||
if (genderSelect.current)
|
||||
setGender(parseInt(genderSelect.current.value))
|
||||
if (genderSelect.current) setGender(parseInt(genderSelect.current.value))
|
||||
}
|
||||
|
||||
function handlePrivateChange(checked: boolean) {
|
||||
|
|
@ -84,44 +87,45 @@ const AccountModal = () => {
|
|||
const object = {
|
||||
user: {
|
||||
picture: picture,
|
||||
element: pictureData.find(i => i.filename === picture)?.element,
|
||||
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(cookies.account.user_id, object, headers)
|
||||
// .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: '/'})
|
||||
// setCookies("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,
|
||||
// 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) {
|
||||
|
|
@ -132,15 +136,22 @@ const AccountModal = () => {
|
|||
<Dialog.Root open={open} onOpenChange={openChange}>
|
||||
<Dialog.Trigger asChild>
|
||||
<li className="MenuItem">
|
||||
<span>{t('menu.settings')}</span>
|
||||
<span>{t("menu.settings")}</span>
|
||||
</li>
|
||||
</Dialog.Trigger>
|
||||
<Dialog.Portal>
|
||||
<Dialog.Content className="Account Dialog" onOpenAutoFocus={ (event) => event.preventDefault() }>
|
||||
<Dialog.Content
|
||||
className="Account Dialog"
|
||||
onOpenAutoFocus={(event) => event.preventDefault()}
|
||||
>
|
||||
<div className="DialogHeader">
|
||||
<div className="DialogTop">
|
||||
<Dialog.Title className="SubTitle">{t('modals.settings.title')}</Dialog.Title>
|
||||
<Dialog.Title className="DialogTitle">@{account.user?.username}</Dialog.Title>
|
||||
<Dialog.Title className="SubTitle">
|
||||
{t("modals.settings.title")}
|
||||
</Dialog.Title>
|
||||
<Dialog.Title className="DialogTitle">
|
||||
@{account.user?.username}
|
||||
</Dialog.Title>
|
||||
</div>
|
||||
<Dialog.Close className="DialogClose" asChild>
|
||||
<span>
|
||||
|
|
@ -152,10 +163,14 @@ const AccountModal = () => {
|
|||
<form onSubmit={update}>
|
||||
<div className="field">
|
||||
<div className="left">
|
||||
<label>{t('modals.settings.labels.picture')}</label>
|
||||
<label>{t("modals.settings.labels.picture")}</label>
|
||||
</div>
|
||||
|
||||
<div className={`preview ${pictureData.find(i => i.filename === picture)?.element}`}>
|
||||
<div
|
||||
className={`preview ${
|
||||
pictureData.find((i) => i.filename === picture)?.element
|
||||
}`}
|
||||
>
|
||||
<img
|
||||
alt="Profile preview"
|
||||
srcSet={`/profile/${picture}.png,
|
||||
|
|
@ -164,42 +179,71 @@ const AccountModal = () => {
|
|||
/>
|
||||
</div>
|
||||
|
||||
<select name="picture" onChange={handlePictureChange} value={picture} ref={pictureSelect}>
|
||||
<select
|
||||
name="picture"
|
||||
onChange={handlePictureChange}
|
||||
value={picture}
|
||||
ref={pictureSelect}
|
||||
>
|
||||
{pictureOptions}
|
||||
</select>
|
||||
</div>
|
||||
<div className="field">
|
||||
<div className="left">
|
||||
<label>{t('modals.settings.labels.gender')}</label>
|
||||
<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
|
||||
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="left">
|
||||
<label>{t('modals.settings.labels.language')}</label>
|
||||
<label>{t("modals.settings.labels.language")}</label>
|
||||
</div>
|
||||
|
||||
<select name="language" onChange={handleLanguageChange} value={language} ref={languageSelect}>
|
||||
<option key="en" value="en">{t('modals.settings.language.english')}</option>
|
||||
<option key="jp" value="ja">{t('modals.settings.language.japanese')}</option>
|
||||
<select
|
||||
name="language"
|
||||
onChange={handleLanguageChange}
|
||||
value={language}
|
||||
ref={languageSelect}
|
||||
>
|
||||
<option key="en" value="en">
|
||||
{t("modals.settings.language.english")}
|
||||
</option>
|
||||
<option key="jp" value="ja">
|
||||
{t("modals.settings.language.japanese")}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="field">
|
||||
<div className="left">
|
||||
<label>{t('modals.settings.labels.private')}</label>
|
||||
<p className={locale}>{t('modals.settings.descriptions.private')}</p>
|
||||
<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.Root
|
||||
className="Switch"
|
||||
onCheckedChange={handlePrivateChange}
|
||||
checked={privateProfile}
|
||||
>
|
||||
<Switch.Thumb className="Thumb" />
|
||||
</Switch.Root>
|
||||
</div>
|
||||
|
||||
<Button>{t('modals.settings.buttons.confirm')}</Button>
|
||||
<Button>{t("modals.settings.buttons.confirm")}</Button>
|
||||
</form>
|
||||
</Dialog.Content>
|
||||
<Dialog.Overlay className="Overlay" />
|
||||
|
|
|
|||
|
|
@ -1,17 +1,16 @@
|
|||
import React, { useEffect, useState } from "react"
|
||||
import { useRouter } from "next/router"
|
||||
import { useSnapshot } from "valtio"
|
||||
import { useTranslation } from "next-i18next"
|
||||
import classNames from "classnames"
|
||||
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { useRouter } from 'next/router'
|
||||
import { useSnapshot } from 'valtio'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import classNames from 'classnames'
|
||||
import { accountState } from "~utils/accountState"
|
||||
import { formatTimeAgo } from "~utils/timeAgo"
|
||||
|
||||
import { accountState } from '~utils/accountState'
|
||||
import { formatTimeAgo } from '~utils/timeAgo'
|
||||
import Button from "~components/Button"
|
||||
import { ButtonType } from "~utils/enums"
|
||||
|
||||
import Button from '~components/Button'
|
||||
import { ButtonType } from '~utils/enums'
|
||||
|
||||
import './index.scss'
|
||||
import "./index.scss"
|
||||
|
||||
interface Props {
|
||||
shortcode: string
|
||||
|
|
@ -33,32 +32,32 @@ const GridRep = (props: Props) => {
|
|||
const { account } = useSnapshot(accountState)
|
||||
|
||||
const router = useRouter()
|
||||
const { t } = useTranslation('common')
|
||||
const locale = (router.locale && ['en', 'ja'].includes(router.locale)) ? router.locale : 'en'
|
||||
const { t } = useTranslation("common")
|
||||
const locale =
|
||||
router.locale && ["en", "ja"].includes(router.locale) ? router.locale : "en"
|
||||
|
||||
const [mainhand, setMainhand] = useState<Weapon>()
|
||||
const [weapons, setWeapons] = useState<GridArray<Weapon>>({})
|
||||
|
||||
const titleClass = classNames({
|
||||
'empty': !props.name
|
||||
empty: !props.name,
|
||||
})
|
||||
|
||||
const raidClass = classNames({
|
||||
'raid': true,
|
||||
'empty': !props.raid
|
||||
raid: true,
|
||||
empty: !props.raid,
|
||||
})
|
||||
|
||||
const userClass = classNames({
|
||||
'user': true,
|
||||
'empty': !props.user
|
||||
user: true,
|
||||
empty: !props.user,
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
const newWeapons = Array(numWeapons)
|
||||
|
||||
for (const [key, value] of Object.entries(props.grid)) {
|
||||
if (value.position == -1)
|
||||
setMainhand(value.object)
|
||||
if (value.position == -1) setMainhand(value.object)
|
||||
else if (!value.mainhand && value.position != null)
|
||||
newWeapons[value.position] = value.object
|
||||
}
|
||||
|
|
@ -71,7 +70,7 @@ const GridRep = (props: Props) => {
|
|||
}
|
||||
|
||||
function generateMainhandImage() {
|
||||
let url = ''
|
||||
let url = ""
|
||||
|
||||
if (mainhand) {
|
||||
if (mainhand.element == 0 && props.grid[0].element) {
|
||||
|
|
@ -81,12 +80,15 @@ const GridRep = (props: Props) => {
|
|||
}
|
||||
}
|
||||
|
||||
return (mainhand) ?
|
||||
<img alt={mainhand.name[locale]} src={url} /> : ''
|
||||
return mainhand && props.grid[0] ? (
|
||||
<img alt={mainhand.name[locale]} src={url} />
|
||||
) : (
|
||||
""
|
||||
)
|
||||
}
|
||||
|
||||
function generateGridImage(position: number) {
|
||||
let url = ''
|
||||
let url = ""
|
||||
|
||||
if (weapons[position]) {
|
||||
if (weapons[position].element == 0 && props.grid[position].element) {
|
||||
|
|
@ -96,13 +98,15 @@ const GridRep = (props: Props) => {
|
|||
}
|
||||
}
|
||||
|
||||
return (weapons[position]) ?
|
||||
<img alt={weapons[position].name[locale]} src={url} /> : ''
|
||||
return weapons[position] ? (
|
||||
<img alt={weapons[position].name[locale]} src={url} />
|
||||
) : (
|
||||
""
|
||||
)
|
||||
}
|
||||
|
||||
function sendSaveData() {
|
||||
if (props.onSave)
|
||||
props.onSave(props.id, props.favorited)
|
||||
if (props.onSave) props.onSave(props.id, props.favorited)
|
||||
}
|
||||
|
||||
const userImage = () => {
|
||||
|
|
@ -116,16 +120,21 @@ const GridRep = (props: Props) => {
|
|||
src={`/profile/${props.user.picture.picture}.png`}
|
||||
/>
|
||||
)
|
||||
else
|
||||
return (<div className="no-user" />)
|
||||
else return <div className="no-user" />
|
||||
}
|
||||
|
||||
const details = (
|
||||
<div className="Details">
|
||||
<h2 className={titleClass} onClick={navigate}>{ (props.name) ? props.name : t('no_title') }</h2>
|
||||
<h2 className={titleClass} onClick={navigate}>
|
||||
{props.name ? props.name : t("no_title")}
|
||||
</h2>
|
||||
<div className="bottom">
|
||||
<div className={raidClass}>{ (props.raid) ? props.raid.name[locale] : t('no_raid') }</div>
|
||||
<time className="last-updated" dateTime={props.createdAt.toISOString()}>{formatTimeAgo(props.createdAt, locale)}</time>
|
||||
<div className={raidClass}>
|
||||
{props.raid ? props.raid.name[locale] : t("no_raid")}
|
||||
</div>
|
||||
<time className="last-updated" dateTime={props.createdAt.toISOString()}>
|
||||
{formatTimeAgo(props.createdAt, locale)}
|
||||
</time>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
@ -134,50 +143,55 @@ const GridRep = (props: Props) => {
|
|||
<div className="Details">
|
||||
<div className="top">
|
||||
<div className="info">
|
||||
<h2 className={titleClass} onClick={navigate}>{ (props.name) ? props.name : t('no_title') }</h2>
|
||||
<div className={raidClass}>{ (props.raid) ? props.raid.name[locale] : t('no_raid') }</div>
|
||||
<h2 className={titleClass} onClick={navigate}>
|
||||
{props.name ? props.name : t("no_title")}
|
||||
</h2>
|
||||
<div className={raidClass}>
|
||||
{props.raid ? props.raid.name[locale] : t("no_raid")}
|
||||
</div>
|
||||
{
|
||||
(account.authorized && (
|
||||
(props.user && account.user && account.user.id !== props.user.id)
|
||||
|| (!props.user)
|
||||
)) ?
|
||||
</div>
|
||||
{account.authorized &&
|
||||
((props.user && account.user && account.user.id !== props.user.id) ||
|
||||
!props.user) ? (
|
||||
<Button
|
||||
active={props.favorited}
|
||||
icon="save"
|
||||
type={ButtonType.IconOnly}
|
||||
onClick={sendSaveData} />
|
||||
: ''
|
||||
}
|
||||
onClick={sendSaveData}
|
||||
/>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</div>
|
||||
<div className="bottom">
|
||||
<div className={userClass}>
|
||||
{userImage()}
|
||||
{ (props.user) ? props.user.username : t('no_user') }
|
||||
{props.user ? props.user.username : t("no_user")}
|
||||
</div>
|
||||
<time className="last-updated" dateTime={props.createdAt.toISOString()}>{formatTimeAgo(props.createdAt, locale)}</time>
|
||||
<time className="last-updated" dateTime={props.createdAt.toISOString()}>
|
||||
{formatTimeAgo(props.createdAt, locale)}
|
||||
</time>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="GridRep">
|
||||
{ (props.displayUser) ? detailsWithUsername : details}
|
||||
{props.displayUser ? detailsWithUsername : details}
|
||||
<div className="Grid" onClick={navigate}>
|
||||
<div className="weapon grid_mainhand">
|
||||
{generateMainhandImage()}
|
||||
</div>
|
||||
<div className="weapon grid_mainhand">{generateMainhandImage()}</div>
|
||||
|
||||
<ul className="grid_weapons">
|
||||
{
|
||||
Array.from(Array(numWeapons)).map((x, i) => {
|
||||
{Array.from(Array(numWeapons)).map((x, i) => {
|
||||
return (
|
||||
<li key={`${props.shortcode}-${i}`} className="weapon grid_weapon">
|
||||
<li
|
||||
key={`${props.shortcode}-${i}`}
|
||||
className="weapon grid_weapon"
|
||||
>
|
||||
{generateGridImage(i)}
|
||||
</li>
|
||||
)
|
||||
})
|
||||
}
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,14 +2,9 @@
|
|||
display: grid;
|
||||
grid-template-columns: auto auto auto;
|
||||
margin: 0 auto;
|
||||
opacity: 0;
|
||||
padding: 0;
|
||||
width: fit-content;
|
||||
transition: opacity 0.14s ease-in-out;
|
||||
// width: fit-content;
|
||||
max-width: 996px;
|
||||
|
||||
&.visible {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,24 +1,18 @@
|
|||
import classNames from 'classnames'
|
||||
import React from 'react'
|
||||
import classNames from "classnames"
|
||||
import React from "react"
|
||||
|
||||
import './index.scss'
|
||||
import "./index.scss"
|
||||
|
||||
interface Props {
|
||||
loading: boolean
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
||||
const GridRepCollection = (props: Props) => {
|
||||
const classes = classNames({
|
||||
'GridRepCollection': true,
|
||||
'visible': !props.loading
|
||||
GridRepCollection: true,
|
||||
})
|
||||
|
||||
return (
|
||||
<div className={classes}>
|
||||
{props.children}
|
||||
</div>
|
||||
)
|
||||
return <div className={classes}>{props.children}</div>
|
||||
}
|
||||
|
||||
export default GridRepCollection
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
import React, { useState } from 'react'
|
||||
import { useCookies } from 'react-cookie'
|
||||
import Router, { useRouter } from 'next/router'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { AxiosResponse } from 'axios'
|
||||
import React, { useState } from "react"
|
||||
import { setCookie } from "cookies-next"
|
||||
import Router, { useRouter } from "next/router"
|
||||
import { useTranslation } from "react-i18next"
|
||||
import { AxiosResponse } from "axios"
|
||||
|
||||
import * as Dialog from '@radix-ui/react-dialog'
|
||||
import * as Dialog from "@radix-ui/react-dialog"
|
||||
|
||||
import api from '~utils/api'
|
||||
import { accountState } from '~utils/accountState'
|
||||
import api from "~utils/api"
|
||||
import { accountState } from "~utils/accountState"
|
||||
|
||||
import Button from '~components/Button'
|
||||
import Fieldset from '~components/Fieldset'
|
||||
import Button from "~components/Button"
|
||||
import Fieldset from "~components/Fieldset"
|
||||
|
||||
import CrossIcon from '~public/icons/Cross.svg'
|
||||
import './index.scss'
|
||||
import CrossIcon from "~public/icons/Cross.svg"
|
||||
import "./index.scss"
|
||||
|
||||
interface Props {}
|
||||
|
||||
|
|
@ -23,22 +23,20 @@ interface ErrorMap {
|
|||
password: string
|
||||
}
|
||||
|
||||
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 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 = (props: Props) => {
|
||||
const router = useRouter()
|
||||
const { t } = useTranslation('common')
|
||||
const { t } = useTranslation("common")
|
||||
|
||||
// Set up form states and error handling
|
||||
const [formValid, setFormValid] = useState(false)
|
||||
const [errors, setErrors] = useState<ErrorMap>({
|
||||
email: '',
|
||||
password: ''
|
||||
email: "",
|
||||
password: "",
|
||||
})
|
||||
|
||||
// Cookies
|
||||
const [cookies, setCookies] = useCookies()
|
||||
|
||||
// States
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
|
|
@ -52,19 +50,17 @@ const LoginModal = (props: Props) => {
|
|||
let newErrors = { ...errors }
|
||||
|
||||
switch (name) {
|
||||
case 'email':
|
||||
case "email":
|
||||
if (value.length == 0)
|
||||
newErrors.email = t('modals.login.errors.empty_email')
|
||||
newErrors.email = t("modals.login.errors.empty_email")
|
||||
else if (!emailRegex.test(value))
|
||||
newErrors.email = t('modals.login.errors.invalid_email')
|
||||
else
|
||||
newErrors.email = ''
|
||||
newErrors.email = t("modals.login.errors.invalid_email")
|
||||
else newErrors.email = ""
|
||||
break
|
||||
|
||||
case 'password':
|
||||
newErrors.password = value.length == 0
|
||||
? t('modals.login.errors.empty_password')
|
||||
: ''
|
||||
case "password":
|
||||
newErrors.password =
|
||||
value.length == 0 ? t("modals.login.errors.empty_password") : ""
|
||||
break
|
||||
|
||||
default:
|
||||
|
|
@ -95,17 +91,18 @@ const LoginModal = (props: Props) => {
|
|||
const body = {
|
||||
email: emailInput.current?.value,
|
||||
password: passwordInput.current?.value,
|
||||
grant_type: 'password'
|
||||
grant_type: "password",
|
||||
}
|
||||
|
||||
if (formValid) {
|
||||
api.login(body)
|
||||
.then(response => {
|
||||
api
|
||||
.login(body)
|
||||
.then((response) => {
|
||||
storeCookieInfo(response)
|
||||
return response.data.user.id
|
||||
})
|
||||
.then(id => fetchUserInfo(id))
|
||||
.then(infoResponse => storeUserInfo(infoResponse))
|
||||
.then((id) => fetchUserInfo(id))
|
||||
.then((infoResponse) => storeUserInfo(infoResponse))
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -116,35 +113,36 @@ const LoginModal = (props: Props) => {
|
|||
function storeCookieInfo(response: AxiosResponse) {
|
||||
const user = response.data.user
|
||||
|
||||
const cookieObj = {
|
||||
user_id: user.id,
|
||||
const cookieObj: AccountCookie = {
|
||||
userId: user.id,
|
||||
username: user.username,
|
||||
access_token: response.data.access_token
|
||||
token: response.data.access_token,
|
||||
}
|
||||
|
||||
setCookies('account', cookieObj, { path: '/' })
|
||||
setCookie("account", cookieObj, { path: "/" })
|
||||
}
|
||||
|
||||
function storeUserInfo(response: AxiosResponse) {
|
||||
const user = response.data.user
|
||||
|
||||
const cookieObj = {
|
||||
const cookieObj: UserCookie = {
|
||||
picture: user.picture.picture,
|
||||
element: user.picture.element,
|
||||
language: user.language,
|
||||
gender: user.gender
|
||||
gender: user.gender,
|
||||
}
|
||||
|
||||
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
|
||||
gender: user.gender,
|
||||
}
|
||||
|
||||
console.log("Authorizing account...")
|
||||
accountState.account.authorized = true
|
||||
|
||||
setOpen(false)
|
||||
|
|
@ -153,7 +151,7 @@ const LoginModal = (props: Props) => {
|
|||
|
||||
function changeLanguage(newLanguage: string) {
|
||||
if (newLanguage !== router.locale) {
|
||||
setCookies('NEXT_LOCALE', newLanguage, { path: '/'})
|
||||
setCookie("NEXT_LOCALE", newLanguage, { path: "/" })
|
||||
router.push(router.asPath, undefined, { locale: newLanguage })
|
||||
}
|
||||
}
|
||||
|
|
@ -161,8 +159,8 @@ const LoginModal = (props: Props) => {
|
|||
function openChange(open: boolean) {
|
||||
setOpen(open)
|
||||
setErrors({
|
||||
email: '',
|
||||
password: ''
|
||||
email: "",
|
||||
password: "",
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -170,13 +168,18 @@ const LoginModal = (props: Props) => {
|
|||
<Dialog.Root open={open} onOpenChange={openChange}>
|
||||
<Dialog.Trigger asChild>
|
||||
<li className="MenuItem">
|
||||
<span>{t('menu.login')}</span>
|
||||
<span>{t("menu.login")}</span>
|
||||
</li>
|
||||
</Dialog.Trigger>
|
||||
<Dialog.Portal>
|
||||
<Dialog.Content className="Login Dialog" onOpenAutoFocus={ (event) => event.preventDefault() }>
|
||||
<Dialog.Content
|
||||
className="Login Dialog"
|
||||
onOpenAutoFocus={(event) => event.preventDefault()}
|
||||
>
|
||||
<div className="DialogHeader">
|
||||
<Dialog.Title className="DialogTitle">{t('modals.login.title')}</Dialog.Title>
|
||||
<Dialog.Title className="DialogTitle">
|
||||
{t("modals.login.title")}
|
||||
</Dialog.Title>
|
||||
<Dialog.Close className="DialogClose" asChild>
|
||||
<span>
|
||||
<CrossIcon />
|
||||
|
|
@ -187,7 +190,7 @@ const LoginModal = (props: Props) => {
|
|||
<form className="form" onSubmit={login}>
|
||||
<Fieldset
|
||||
fieldName="email"
|
||||
placeholder={t('modals.login.placeholders.email')}
|
||||
placeholder={t("modals.login.placeholders.email")}
|
||||
onChange={handleChange}
|
||||
error={errors.email}
|
||||
ref={emailInput}
|
||||
|
|
@ -195,13 +198,13 @@ const LoginModal = (props: Props) => {
|
|||
|
||||
<Fieldset
|
||||
fieldName="password"
|
||||
placeholder={t('modals.login.placeholders.password')}
|
||||
placeholder={t("modals.login.placeholders.password")}
|
||||
onChange={handleChange}
|
||||
error={errors.password}
|
||||
ref={passwordInput}
|
||||
/>
|
||||
|
||||
<Button>{t('modals.login.buttons.confirm')}</Button>
|
||||
<Button>{t("modals.login.buttons.confirm")}</Button>
|
||||
</form>
|
||||
</Dialog.Content>
|
||||
<Dialog.Overlay className="Overlay" />
|
||||
|
|
|
|||
|
|
@ -1,32 +1,32 @@
|
|||
import React, { useEffect, useRef, useState } from 'react'
|
||||
import { useCookies } from 'react-cookie'
|
||||
import { useRouter } from 'next/router'
|
||||
import { useSnapshot } from 'valtio'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import InfiniteScroll from 'react-infinite-scroll-component'
|
||||
import React, { useEffect, useRef, useState } from "react"
|
||||
import { getCookie, setCookie } from "cookies-next"
|
||||
import { useRouter } from "next/router"
|
||||
import { useSnapshot } from "valtio"
|
||||
import { useTranslation } from "react-i18next"
|
||||
import InfiniteScroll from "react-infinite-scroll-component"
|
||||
|
||||
import { appState } from '~utils/appState'
|
||||
import api from '~utils/api'
|
||||
import { appState } from "~utils/appState"
|
||||
import api from "~utils/api"
|
||||
|
||||
import * as Dialog from '@radix-ui/react-dialog'
|
||||
import * as Dialog from "@radix-ui/react-dialog"
|
||||
|
||||
import CharacterSearchFilterBar from '~components/CharacterSearchFilterBar'
|
||||
import WeaponSearchFilterBar from '~components/WeaponSearchFilterBar'
|
||||
import SummonSearchFilterBar from '~components/SummonSearchFilterBar'
|
||||
import CharacterSearchFilterBar from "~components/CharacterSearchFilterBar"
|
||||
import WeaponSearchFilterBar from "~components/WeaponSearchFilterBar"
|
||||
import SummonSearchFilterBar from "~components/SummonSearchFilterBar"
|
||||
|
||||
import CharacterResult from '~components/CharacterResult'
|
||||
import WeaponResult from '~components/WeaponResult'
|
||||
import SummonResult from '~components/SummonResult'
|
||||
import CharacterResult from "~components/CharacterResult"
|
||||
import WeaponResult from "~components/WeaponResult"
|
||||
import SummonResult from "~components/SummonResult"
|
||||
|
||||
import './index.scss'
|
||||
import CrossIcon from '~public/icons/Cross.svg'
|
||||
import cloneDeep from 'lodash.clonedeep'
|
||||
import "./index.scss"
|
||||
import CrossIcon from "~public/icons/Cross.svg"
|
||||
import cloneDeep from "lodash.clonedeep"
|
||||
|
||||
interface Props {
|
||||
send: (object: Character | Weapon | Summon, position: number) => any
|
||||
placeholderText: string
|
||||
fromPosition: number
|
||||
object: 'weapons' | 'characters' | 'summons',
|
||||
object: "weapons" | "characters" | "summons"
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
||||
|
|
@ -39,19 +39,18 @@ const SearchModal = (props: Props) => {
|
|||
const locale = router.locale
|
||||
|
||||
// Set up translation
|
||||
const { t } = useTranslation('common')
|
||||
|
||||
// Set up cookies
|
||||
const [cookies, setCookies] = useCookies()
|
||||
const { t } = useTranslation("common")
|
||||
|
||||
let searchInput = React.createRef<HTMLInputElement>()
|
||||
let scrollContainer = React.createRef<HTMLDivElement>()
|
||||
|
||||
const [firstLoad, setFirstLoad] = useState(true)
|
||||
const [objects, setObjects] = useState<{[id: number]: GridCharacter | GridWeapon | GridSummon}>()
|
||||
const [objects, setObjects] = useState<{
|
||||
[id: number]: GridCharacter | GridWeapon | GridSummon
|
||||
}>()
|
||||
const [filters, setFilters] = useState<{ [key: string]: number[] }>()
|
||||
const [open, setOpen] = useState(false)
|
||||
const [query, setQuery] = useState('')
|
||||
const [query, setQuery] = useState("")
|
||||
const [results, setResults] = useState<(Weapon | Summon | Character)[]>([])
|
||||
|
||||
// Pagination states
|
||||
|
|
@ -64,8 +63,7 @@ const SearchModal = (props: Props) => {
|
|||
}, [grid, props.object])
|
||||
|
||||
useEffect(() => {
|
||||
if (searchInput.current)
|
||||
searchInput.current.focus()
|
||||
if (searchInput.current) searchInput.current.focus()
|
||||
}, [searchInput])
|
||||
|
||||
function inputChanged(event: React.ChangeEvent<HTMLInputElement>) {
|
||||
|
|
@ -73,18 +71,20 @@ const SearchModal = (props: Props) => {
|
|||
if (text.length) {
|
||||
setQuery(text)
|
||||
} else {
|
||||
setQuery('')
|
||||
setQuery("")
|
||||
}
|
||||
}
|
||||
|
||||
function fetchResults({ replace = false }: { replace?: boolean }) {
|
||||
api.search({
|
||||
api
|
||||
.search({
|
||||
object: props.object,
|
||||
query: query,
|
||||
filters: filters,
|
||||
locale: locale,
|
||||
page: currentPage
|
||||
}).then(response => {
|
||||
page: currentPage,
|
||||
})
|
||||
.then((response) => {
|
||||
setTotalPages(response.data.total_pages)
|
||||
setRecordCount(response.data.count)
|
||||
|
||||
|
|
@ -93,12 +93,16 @@ const SearchModal = (props: Props) => {
|
|||
} else {
|
||||
appendResults(response.data.results)
|
||||
}
|
||||
}).catch(error => {
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error)
|
||||
})
|
||||
}
|
||||
|
||||
function replaceResults(count: number, list: Weapon[] | Summon[] | Character[]) {
|
||||
function replaceResults(
|
||||
count: number,
|
||||
list: Weapon[] | Summon[] | Character[]
|
||||
) {
|
||||
if (count > 0) {
|
||||
setResults(list)
|
||||
} else {
|
||||
|
|
@ -112,22 +116,26 @@ const SearchModal = (props: Props) => {
|
|||
|
||||
function storeRecentResult(result: Character | Weapon | Summon) {
|
||||
const key = `recent_${props.object}`
|
||||
const cookie = getCookie(key)
|
||||
const cookieObj: Character[] | Weapon[] | Summon[] = cookie
|
||||
? JSON.parse(cookie as string)
|
||||
: []
|
||||
let recents: Character[] | Weapon[] | Summon[] = []
|
||||
|
||||
if (props.object === "weapons") {
|
||||
recents = cloneDeep(cookies[key] as Weapon[]) || []
|
||||
if (!recents.find(item => item.granblue_id === result.granblue_id)) {
|
||||
recents = cloneDeep(cookieObj as Weapon[]) || []
|
||||
if (!recents.find((item) => item.granblue_id === result.granblue_id)) {
|
||||
recents.unshift(result as Weapon)
|
||||
}
|
||||
} else if (props.object === "summons") {
|
||||
recents = cloneDeep(cookies[key] as Summon[]) || []
|
||||
if (!recents.find(item => item.granblue_id === result.granblue_id)) {
|
||||
recents = cloneDeep(cookieObj as Summon[]) || []
|
||||
if (!recents.find((item) => item.granblue_id === result.granblue_id)) {
|
||||
recents.unshift(result as Summon)
|
||||
}
|
||||
}
|
||||
|
||||
if (recents && recents.length > 5) recents.pop()
|
||||
setCookies(`recent_${props.object}`, recents, { path: '/' })
|
||||
setCookie(`recent_${props.object}`, recents, { path: "/" })
|
||||
sendData(result)
|
||||
}
|
||||
|
||||
|
|
@ -154,11 +162,15 @@ const SearchModal = (props: Props) => {
|
|||
useEffect(() => {
|
||||
// Filters changed
|
||||
const key = `recent_${props.object}`
|
||||
const cookie = getCookie(key)
|
||||
const cookieObj: Weapon[] | Summon[] | Character[] = cookie
|
||||
? JSON.parse(cookie as string)
|
||||
: []
|
||||
|
||||
if (open) {
|
||||
if (firstLoad && cookies[key] && cookies[key].length > 0) {
|
||||
setResults(cookies[key])
|
||||
setRecordCount(cookies[key].length)
|
||||
if (firstLoad && cookieObj && cookieObj.length > 0) {
|
||||
setResults(cookieObj)
|
||||
setRecordCount(cookieObj.length)
|
||||
setFirstLoad(false)
|
||||
} else {
|
||||
setCurrentPage(1)
|
||||
|
|
@ -179,24 +191,25 @@ const SearchModal = (props: Props) => {
|
|||
let jsx
|
||||
|
||||
switch (props.object) {
|
||||
case 'weapons':
|
||||
case "weapons":
|
||||
jsx = renderWeaponSearchResults()
|
||||
break
|
||||
case 'summons':
|
||||
case "summons":
|
||||
jsx = renderSummonSearchResults(results)
|
||||
break
|
||||
case 'characters':
|
||||
case "characters":
|
||||
jsx = renderCharacterSearchResults(results)
|
||||
break
|
||||
}
|
||||
|
||||
return (
|
||||
<InfiniteScroll
|
||||
dataLength={ (results && results.length > 0) ? results.length : 0}
|
||||
dataLength={results && results.length > 0 ? results.length : 0}
|
||||
next={() => setCurrentPage(currentPage + 1)}
|
||||
hasMore={totalPages > currentPage}
|
||||
scrollableTarget="Results"
|
||||
loader={<div className="footer">Loading...</div>}>
|
||||
loader={<div className="footer">Loading...</div>}
|
||||
>
|
||||
{jsx}
|
||||
</InfiniteScroll>
|
||||
)
|
||||
|
|
@ -208,11 +221,15 @@ const SearchModal = (props: Props) => {
|
|||
const castResults: Weapon[] = results as Weapon[]
|
||||
if (castResults && Object.keys(castResults).length > 0) {
|
||||
jsx = castResults.map((result: Weapon) => {
|
||||
return <WeaponResult
|
||||
return (
|
||||
<WeaponResult
|
||||
key={result.id}
|
||||
data={result}
|
||||
onClick={() => { storeRecentResult(result) }}
|
||||
onClick={() => {
|
||||
storeRecentResult(result)
|
||||
}}
|
||||
/>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -225,11 +242,15 @@ const SearchModal = (props: Props) => {
|
|||
const castResults: Summon[] = results as Summon[]
|
||||
if (castResults && Object.keys(castResults).length > 0) {
|
||||
jsx = castResults.map((result: Summon) => {
|
||||
return <SummonResult
|
||||
return (
|
||||
<SummonResult
|
||||
key={result.id}
|
||||
data={result}
|
||||
onClick={() => { storeRecentResult(result) }}
|
||||
onClick={() => {
|
||||
storeRecentResult(result)
|
||||
}}
|
||||
/>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -242,11 +263,15 @@ const SearchModal = (props: Props) => {
|
|||
const castResults: Character[] = results as Character[]
|
||||
if (castResults && Object.keys(castResults).length > 0) {
|
||||
jsx = castResults.map((result: Character) => {
|
||||
return <CharacterResult
|
||||
return (
|
||||
<CharacterResult
|
||||
key={result.id}
|
||||
data={result}
|
||||
onClick={() => { storeRecentResult(result) }}
|
||||
onClick={() => {
|
||||
storeRecentResult(result)
|
||||
}}
|
||||
/>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -255,7 +280,7 @@ const SearchModal = (props: Props) => {
|
|||
|
||||
function openChange() {
|
||||
if (open) {
|
||||
setQuery('')
|
||||
setQuery("")
|
||||
setFirstLoad(true)
|
||||
setResults([])
|
||||
setRecordCount(0)
|
||||
|
|
@ -268,9 +293,7 @@ const SearchModal = (props: Props) => {
|
|||
|
||||
return (
|
||||
<Dialog.Root open={open} onOpenChange={openChange}>
|
||||
<Dialog.Trigger asChild>
|
||||
{props.children}
|
||||
</Dialog.Trigger>
|
||||
<Dialog.Trigger asChild>{props.children}</Dialog.Trigger>
|
||||
<Dialog.Portal>
|
||||
<Dialog.Content className="Search Dialog">
|
||||
<div id="Header">
|
||||
|
|
@ -292,14 +315,28 @@ const SearchModal = (props: Props) => {
|
|||
<CrossIcon />
|
||||
</Dialog.Close>
|
||||
</div>
|
||||
{ (props.object === 'characters') ? <CharacterSearchFilterBar sendFilters={receiveFilters} /> : '' }
|
||||
{ (props.object === 'weapons') ? <WeaponSearchFilterBar sendFilters={receiveFilters} /> : '' }
|
||||
{ (props.object === 'summons') ? <SummonSearchFilterBar sendFilters={receiveFilters} /> : '' }
|
||||
{props.object === "characters" ? (
|
||||
<CharacterSearchFilterBar sendFilters={receiveFilters} />
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
{props.object === "weapons" ? (
|
||||
<WeaponSearchFilterBar sendFilters={receiveFilters} />
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
{props.object === "summons" ? (
|
||||
<SummonSearchFilterBar sendFilters={receiveFilters} />
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div id="Results" ref={scrollContainer}>
|
||||
<h5 className="total">{t('search.result_count', { "record_count": recordCount })}</h5>
|
||||
{ (open) ? renderResults() : ''}
|
||||
<h5 className="total">
|
||||
{t("search.result_count", { record_count: recordCount })}
|
||||
</h5>
|
||||
{open ? renderResults() : ""}
|
||||
</div>
|
||||
</Dialog.Content>
|
||||
<Dialog.Overlay className="Overlay" />
|
||||
|
|
|
|||
|
|
@ -1,20 +1,20 @@
|
|||
import React, { useEffect, useState } from 'react'
|
||||
import Link from 'next/link'
|
||||
import { useCookies } from 'react-cookie'
|
||||
import { useRouter } from 'next/router'
|
||||
import { Trans, useTranslation } from 'next-i18next'
|
||||
import { AxiosResponse } from 'axios'
|
||||
import React, { useEffect, useState } from "react"
|
||||
import Link from "next/link"
|
||||
import { setCookie } from "cookies-next"
|
||||
import { useRouter } from "next/router"
|
||||
import { Trans, useTranslation } from "next-i18next"
|
||||
import { AxiosResponse } from "axios"
|
||||
|
||||
import * as Dialog from '@radix-ui/react-dialog'
|
||||
import * as Dialog from "@radix-ui/react-dialog"
|
||||
|
||||
import api from '~utils/api'
|
||||
import { accountState } from '~utils/accountState'
|
||||
import api from "~utils/api"
|
||||
import { accountState } from "~utils/accountState"
|
||||
|
||||
import Button from '~components/Button'
|
||||
import Fieldset from '~components/Fieldset'
|
||||
import Button from "~components/Button"
|
||||
import Fieldset from "~components/Fieldset"
|
||||
|
||||
import CrossIcon from '~public/icons/Cross.svg'
|
||||
import './index.scss'
|
||||
import CrossIcon from "~public/icons/Cross.svg"
|
||||
import "./index.scss"
|
||||
|
||||
interface Props {}
|
||||
|
||||
|
|
@ -26,24 +26,22 @@ interface ErrorMap {
|
|||
passwordConfirmation: string
|
||||
}
|
||||
|
||||
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 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 SignupModal = (props: Props) => {
|
||||
const router = useRouter()
|
||||
const { t } = useTranslation('common')
|
||||
const { t } = useTranslation("common")
|
||||
|
||||
// Set up form states and error handling
|
||||
const [formValid, setFormValid] = useState(false)
|
||||
const [errors, setErrors] = useState<ErrorMap>({
|
||||
username: '',
|
||||
email: '',
|
||||
password: '',
|
||||
passwordConfirmation: ''
|
||||
username: "",
|
||||
email: "",
|
||||
password: "",
|
||||
passwordConfirmation: "",
|
||||
})
|
||||
|
||||
// Cookies
|
||||
const [cookies, setCookies] = useCookies()
|
||||
|
||||
// States
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
|
|
@ -52,7 +50,12 @@ const SignupModal = (props: Props) => {
|
|||
const emailInput = React.createRef<HTMLInputElement>()
|
||||
const passwordInput = React.createRef<HTMLInputElement>()
|
||||
const passwordConfirmationInput = React.createRef<HTMLInputElement>()
|
||||
const form = [usernameInput, emailInput, passwordInput, passwordConfirmationInput]
|
||||
const form = [
|
||||
usernameInput,
|
||||
emailInput,
|
||||
passwordInput,
|
||||
passwordConfirmationInput,
|
||||
]
|
||||
|
||||
function register(event: React.FormEvent) {
|
||||
event.preventDefault()
|
||||
|
|
@ -63,30 +66,31 @@ const SignupModal = (props: Props) => {
|
|||
email: emailInput.current?.value,
|
||||
password: passwordInput.current?.value,
|
||||
password_confirmation: passwordConfirmationInput.current?.value,
|
||||
language: router.locale
|
||||
}
|
||||
language: router.locale,
|
||||
},
|
||||
}
|
||||
|
||||
if (formValid)
|
||||
api.endpoints.users.create(body)
|
||||
.then(response => {
|
||||
api.endpoints.users
|
||||
.create(body)
|
||||
.then((response) => {
|
||||
storeCookieInfo(response)
|
||||
return response.data.user.user_id
|
||||
})
|
||||
.then(id => fetchUserInfo(id))
|
||||
.then(infoResponse => storeUserInfo(infoResponse))
|
||||
.then((id) => fetchUserInfo(id))
|
||||
.then((infoResponse) => storeUserInfo(infoResponse))
|
||||
}
|
||||
|
||||
function storeCookieInfo(response: AxiosResponse) {
|
||||
const user = response.data.user
|
||||
|
||||
const cookieObj = {
|
||||
user_id: user.user_id,
|
||||
const cookieObj: AccountCookie = {
|
||||
userId: user.user_id,
|
||||
username: user.username,
|
||||
access_token: user.token
|
||||
token: user.token,
|
||||
}
|
||||
|
||||
setCookies('account', cookieObj, { path: '/'})
|
||||
setCookie("account", cookieObj, { path: "/" })
|
||||
}
|
||||
|
||||
function fetchUserInfo(id: string) {
|
||||
|
|
@ -96,22 +100,22 @@ const SignupModal = (props: Props) => {
|
|||
function storeUserInfo(response: AxiosResponse) {
|
||||
const user = response.data.user
|
||||
|
||||
const cookieObj = {
|
||||
const cookieObj: UserCookie = {
|
||||
picture: user.picture.picture,
|
||||
element: user.picture.element,
|
||||
language: user.language,
|
||||
gender: user.gender
|
||||
gender: user.gender,
|
||||
}
|
||||
|
||||
// TODO: Set 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
|
||||
gender: user.gender,
|
||||
}
|
||||
|
||||
accountState.account.authorized = true
|
||||
|
|
@ -125,29 +129,37 @@ const SignupModal = (props: Props) => {
|
|||
const value = event.target.value
|
||||
|
||||
if (value.length >= 3) {
|
||||
api.check(fieldName, value)
|
||||
.then((response) => {
|
||||
api.check(fieldName, value).then(
|
||||
(response) => {
|
||||
processNameCheck(fieldName, value, response.data.available)
|
||||
}, (error) => {
|
||||
},
|
||||
(error) => {
|
||||
console.error(error)
|
||||
})
|
||||
}
|
||||
)
|
||||
} else {
|
||||
validateName(fieldName, value)
|
||||
}
|
||||
}
|
||||
|
||||
function processNameCheck(fieldName: string, value: string, available: boolean) {
|
||||
function processNameCheck(
|
||||
fieldName: string,
|
||||
value: string,
|
||||
available: boolean
|
||||
) {
|
||||
const newErrors = { ...errors }
|
||||
|
||||
if (available) {
|
||||
// Continue checking for errors
|
||||
newErrors[fieldName] = ''
|
||||
newErrors[fieldName] = ""
|
||||
setErrors(newErrors)
|
||||
setFormValid(true)
|
||||
|
||||
validateName(fieldName, value)
|
||||
} else {
|
||||
newErrors[fieldName] = t('modals.signup.errors.field_in_use', { field: fieldName})
|
||||
newErrors[fieldName] = t("modals.signup.errors.field_in_use", {
|
||||
field: fieldName,
|
||||
})
|
||||
setErrors(newErrors)
|
||||
setFormValid(false)
|
||||
}
|
||||
|
|
@ -157,20 +169,19 @@ const SignupModal = (props: Props) => {
|
|||
let newErrors = { ...errors }
|
||||
|
||||
switch (fieldName) {
|
||||
case 'username':
|
||||
case "username":
|
||||
if (value.length < 3)
|
||||
newErrors.username = t('modals.signup.errors.username_too_short')
|
||||
newErrors.username = t("modals.signup.errors.username_too_short")
|
||||
else if (value.length > 20)
|
||||
newErrors.username = t('modals.signup.errors.username_too_long')
|
||||
else
|
||||
newErrors.username = ''
|
||||
newErrors.username = t("modals.signup.errors.username_too_long")
|
||||
else newErrors.username = ""
|
||||
|
||||
break
|
||||
|
||||
case 'email':
|
||||
case "email":
|
||||
newErrors.email = emailRegex.test(value)
|
||||
? ''
|
||||
: t('modals.signup.errors.invalid_email')
|
||||
? ""
|
||||
: t("modals.signup.errors.invalid_email")
|
||||
break
|
||||
|
||||
default:
|
||||
|
|
@ -187,22 +198,25 @@ const SignupModal = (props: Props) => {
|
|||
let newErrors = { ...errors }
|
||||
|
||||
switch (name) {
|
||||
case 'password':
|
||||
newErrors.password = passwordInput.current?.value.includes(usernameInput.current?.value!)
|
||||
? t('modals.signup.errors.password_contains_username')
|
||||
: ''
|
||||
case "password":
|
||||
newErrors.password = passwordInput.current?.value.includes(
|
||||
usernameInput.current?.value!
|
||||
)
|
||||
? t("modals.signup.errors.password_contains_username")
|
||||
: ""
|
||||
break
|
||||
|
||||
case 'password':
|
||||
newErrors.password = value.length < 8
|
||||
? t('modals.signup.errors.password_too_short')
|
||||
: ''
|
||||
case "password":
|
||||
newErrors.password =
|
||||
value.length < 8 ? t("modals.signup.errors.password_too_short") : ""
|
||||
break
|
||||
|
||||
case 'confirm_password':
|
||||
newErrors.passwordConfirmation = passwordInput.current?.value === passwordConfirmationInput.current?.value
|
||||
? ''
|
||||
: t('modals.signup.errors.passwords_dont_match')
|
||||
case "confirm_password":
|
||||
newErrors.passwordConfirmation =
|
||||
passwordInput.current?.value ===
|
||||
passwordConfirmationInput.current?.value
|
||||
? ""
|
||||
: t("modals.signup.errors.passwords_dont_match")
|
||||
break
|
||||
|
||||
default:
|
||||
|
|
@ -229,10 +243,10 @@ const SignupModal = (props: Props) => {
|
|||
function openChange(open: boolean) {
|
||||
setOpen(open)
|
||||
setErrors({
|
||||
username: '',
|
||||
email: '',
|
||||
password: '',
|
||||
passwordConfirmation: ''
|
||||
username: "",
|
||||
email: "",
|
||||
password: "",
|
||||
passwordConfirmation: "",
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -240,13 +254,18 @@ const SignupModal = (props: Props) => {
|
|||
<Dialog.Root open={open} onOpenChange={openChange}>
|
||||
<Dialog.Trigger asChild>
|
||||
<li className="MenuItem">
|
||||
<span>{t('menu.signup')}</span>
|
||||
<span>{t("menu.signup")}</span>
|
||||
</li>
|
||||
</Dialog.Trigger>
|
||||
<Dialog.Portal>
|
||||
<Dialog.Content className="Signup Dialog" onOpenAutoFocus={ (event) => event.preventDefault() }>
|
||||
<Dialog.Content
|
||||
className="Signup Dialog"
|
||||
onOpenAutoFocus={(event) => event.preventDefault()}
|
||||
>
|
||||
<div className="DialogHeader">
|
||||
<Dialog.Title className="DialogTitle">{t('modals.signup.title')}</Dialog.Title>
|
||||
<Dialog.Title className="DialogTitle">
|
||||
{t("modals.signup.title")}
|
||||
</Dialog.Title>
|
||||
<Dialog.Close className="DialogClose" asChild>
|
||||
<span>
|
||||
<CrossIcon />
|
||||
|
|
@ -257,7 +276,7 @@ const SignupModal = (props: Props) => {
|
|||
<form className="form" onSubmit={register}>
|
||||
<Fieldset
|
||||
fieldName="username"
|
||||
placeholder={t('modals.signup.placeholders.username')}
|
||||
placeholder={t("modals.signup.placeholders.username")}
|
||||
onChange={handleNameChange}
|
||||
error={errors.username}
|
||||
ref={usernameInput}
|
||||
|
|
@ -265,7 +284,7 @@ const SignupModal = (props: Props) => {
|
|||
|
||||
<Fieldset
|
||||
fieldName="email"
|
||||
placeholder={t('modals.signup.placeholders.email')}
|
||||
placeholder={t("modals.signup.placeholders.email")}
|
||||
onChange={handleNameChange}
|
||||
error={errors.email}
|
||||
ref={emailInput}
|
||||
|
|
@ -273,7 +292,7 @@ const SignupModal = (props: Props) => {
|
|||
|
||||
<Fieldset
|
||||
fieldName="password"
|
||||
placeholder={t('modals.signup.placeholders.password')}
|
||||
placeholder={t("modals.signup.placeholders.password")}
|
||||
onChange={handlePasswordChange}
|
||||
error={errors.password}
|
||||
ref={passwordInput}
|
||||
|
|
@ -281,13 +300,13 @@ const SignupModal = (props: Props) => {
|
|||
|
||||
<Fieldset
|
||||
fieldName="confirm_password"
|
||||
placeholder={t('modals.signup.placeholders.password_confirm')}
|
||||
placeholder={t("modals.signup.placeholders.password_confirm")}
|
||||
onChange={handlePasswordChange}
|
||||
error={errors.passwordConfirmation}
|
||||
ref={passwordConfirmationInput}
|
||||
/>
|
||||
|
||||
<Button>{t('modals.signup.buttons.confirm')}</Button>
|
||||
<Button>{t("modals.signup.buttons.confirm")}</Button>
|
||||
|
||||
<Dialog.Description className="terms">
|
||||
{/* <Trans i18nKey="modals.signup.agreement">
|
||||
|
|
@ -302,5 +321,4 @@ const SignupModal = (props: Props) => {
|
|||
)
|
||||
}
|
||||
|
||||
|
||||
export default SignupModal
|
||||
|
|
@ -1,21 +1,21 @@
|
|||
import React, { useState } from 'react'
|
||||
import { useCookies } from 'react-cookie'
|
||||
import { useRouter } from 'next/router'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import { AxiosResponse } from 'axios'
|
||||
import React, { useState } from "react"
|
||||
// import { useCookies } from 'react-cookie'
|
||||
import { useRouter } from "next/router"
|
||||
import { useTranslation } from "next-i18next"
|
||||
import { AxiosResponse } from "axios"
|
||||
|
||||
import * as Dialog from '@radix-ui/react-dialog'
|
||||
import * as Dialog from "@radix-ui/react-dialog"
|
||||
|
||||
import AXSelect from '~components/AxSelect'
|
||||
import ElementToggle from '~components/ElementToggle'
|
||||
import WeaponKeyDropdown from '~components/WeaponKeyDropdown'
|
||||
import Button from '~components/Button'
|
||||
import AXSelect from "~components/AxSelect"
|
||||
import ElementToggle from "~components/ElementToggle"
|
||||
import WeaponKeyDropdown from "~components/WeaponKeyDropdown"
|
||||
import Button from "~components/Button"
|
||||
|
||||
import api from '~utils/api'
|
||||
import { appState } from '~utils/appState'
|
||||
import api from "~utils/api"
|
||||
import { appState } from "~utils/appState"
|
||||
|
||||
import CrossIcon from '~public/icons/Cross.svg'
|
||||
import './index.scss'
|
||||
import CrossIcon from "~public/icons/Cross.svg"
|
||||
import "./index.scss"
|
||||
|
||||
interface GridWeaponObject {
|
||||
weapon: {
|
||||
|
|
@ -37,16 +37,20 @@ interface Props {
|
|||
|
||||
const WeaponModal = (props: Props) => {
|
||||
const router = useRouter()
|
||||
const locale = (router.locale && ['en', 'ja'].includes(router.locale)) ? router.locale : 'en'
|
||||
const { t } = useTranslation('common')
|
||||
const locale =
|
||||
router.locale && ["en", "ja"].includes(router.locale) ? router.locale : "en"
|
||||
const { t } = useTranslation("common")
|
||||
|
||||
// Cookies
|
||||
const [cookies] = useCookies(['account'])
|
||||
const headers = (cookies.account != null) ? {
|
||||
const [cookies] = useCookies(["account"])
|
||||
const headers =
|
||||
cookies.account != null
|
||||
? {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${cookies.account.access_token}`
|
||||
Authorization: `Bearer ${cookies.account.access_token}`,
|
||||
},
|
||||
}
|
||||
} : {}
|
||||
: {}
|
||||
|
||||
// Refs
|
||||
const weaponKey1Select = React.createRef<HTMLSelectElement>()
|
||||
|
|
@ -63,7 +67,12 @@ const WeaponModal = (props: Props) => {
|
|||
const [primaryAxValue, setPrimaryAxValue] = useState(0.0)
|
||||
const [secondaryAxValue, setSecondaryAxValue] = useState(0.0)
|
||||
|
||||
function receiveAxValues(primaryAxModifier: number, primaryAxValue: number, secondaryAxModifier: number, secondaryAxValue: number) {
|
||||
function receiveAxValues(
|
||||
primaryAxModifier: number,
|
||||
primaryAxValue: number,
|
||||
secondaryAxModifier: number,
|
||||
secondaryAxValue: number
|
||||
) {
|
||||
setPrimaryAxModifier(primaryAxModifier)
|
||||
setSecondaryAxModifier(secondaryAxModifier)
|
||||
|
||||
|
|
@ -82,8 +91,7 @@ const WeaponModal = (props: Props) => {
|
|||
function prepareObject() {
|
||||
let object: GridWeaponObject = { weapon: {} }
|
||||
|
||||
if (props.gridWeapon.object.element == 0)
|
||||
object.weapon.element = element
|
||||
if (props.gridWeapon.object.element == 0) object.weapon.element = element
|
||||
|
||||
if ([2, 3, 17, 24].includes(props.gridWeapon.object.series))
|
||||
object.weapon.weapon_key1_id = weaponKey1Select.current?.value
|
||||
|
|
@ -106,18 +114,17 @@ const WeaponModal = (props: Props) => {
|
|||
|
||||
async function updateWeapon() {
|
||||
const updateObject = prepareObject()
|
||||
return await api.endpoints.grid_weapons.update(props.gridWeapon.id, updateObject, headers)
|
||||
.then(response => processResult(response))
|
||||
.catch(error => processError(error))
|
||||
return await api.endpoints.grid_weapons
|
||||
.update(props.gridWeapon.id, updateObject, headers)
|
||||
.then((response) => processResult(response))
|
||||
.catch((error) => processError(error))
|
||||
}
|
||||
|
||||
function processResult(response: AxiosResponse) {
|
||||
const gridWeapon: GridWeapon = response.data.grid_weapon
|
||||
|
||||
if (gridWeapon.mainhand)
|
||||
appState.grid.weapons.mainWeapon = gridWeapon
|
||||
else
|
||||
appState.grid.weapons.allWeapons[gridWeapon.position] = gridWeapon
|
||||
if (gridWeapon.mainhand) appState.grid.weapons.mainWeapon = gridWeapon
|
||||
else appState.grid.weapons.allWeapons[gridWeapon.position] = gridWeapon
|
||||
|
||||
setOpen(false)
|
||||
}
|
||||
|
|
@ -129,7 +136,7 @@ const WeaponModal = (props: Props) => {
|
|||
const elementSelect = () => {
|
||||
return (
|
||||
<section>
|
||||
<h3>{t('modals.weapon.subtitles.element')}</h3>
|
||||
<h3>{t("modals.weapon.subtitles.element")}</h3>
|
||||
<ElementToggle
|
||||
currentElement={props.gridWeapon.element}
|
||||
sendValue={receiveElementValue}
|
||||
|
|
@ -141,30 +148,51 @@ const WeaponModal = (props: Props) => {
|
|||
const keySelect = () => {
|
||||
return (
|
||||
<section>
|
||||
<h3>{t('modals.weapon.subtitles.weapon_keys')}</h3>
|
||||
{ ([2, 3, 17, 22].includes(props.gridWeapon.object.series)) ?
|
||||
<h3>{t("modals.weapon.subtitles.weapon_keys")}</h3>
|
||||
{[2, 3, 17, 22].includes(props.gridWeapon.object.series) ? (
|
||||
<WeaponKeyDropdown
|
||||
currentValue={ (props.gridWeapon.weapon_keys) ? props.gridWeapon.weapon_keys[0] : undefined }
|
||||
currentValue={
|
||||
props.gridWeapon.weapon_keys
|
||||
? props.gridWeapon.weapon_keys[0]
|
||||
: undefined
|
||||
}
|
||||
series={props.gridWeapon.object.series}
|
||||
slot={0}
|
||||
ref={weaponKey1Select} />
|
||||
: ''}
|
||||
ref={weaponKey1Select}
|
||||
/>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
|
||||
{ ([2, 3, 17].includes(props.gridWeapon.object.series)) ?
|
||||
{[2, 3, 17].includes(props.gridWeapon.object.series) ? (
|
||||
<WeaponKeyDropdown
|
||||
currentValue={ (props.gridWeapon.weapon_keys) ? props.gridWeapon.weapon_keys[1] : undefined }
|
||||
currentValue={
|
||||
props.gridWeapon.weapon_keys
|
||||
? props.gridWeapon.weapon_keys[1]
|
||||
: undefined
|
||||
}
|
||||
series={props.gridWeapon.object.series}
|
||||
slot={1}
|
||||
ref={weaponKey2Select} />
|
||||
: ''}
|
||||
ref={weaponKey2Select}
|
||||
/>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
|
||||
{ (props.gridWeapon.object.series == 17) ?
|
||||
{props.gridWeapon.object.series == 17 ? (
|
||||
<WeaponKeyDropdown
|
||||
currentValue={ (props.gridWeapon.weapon_keys) ? props.gridWeapon.weapon_keys[2] : undefined }
|
||||
currentValue={
|
||||
props.gridWeapon.weapon_keys
|
||||
? props.gridWeapon.weapon_keys[2]
|
||||
: undefined
|
||||
}
|
||||
series={props.gridWeapon.object.series}
|
||||
slot={2}
|
||||
ref={weaponKey3Select} />
|
||||
: ''}
|
||||
ref={weaponKey3Select}
|
||||
/>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
|
@ -172,7 +200,7 @@ const WeaponModal = (props: Props) => {
|
|||
const axSelect = () => {
|
||||
return (
|
||||
<section>
|
||||
<h3>{t('modals.weapon.subtitles.ax_skills')}</h3>
|
||||
<h3>{t("modals.weapon.subtitles.ax_skills")}</h3>
|
||||
<AXSelect
|
||||
axType={props.gridWeapon.object.ax}
|
||||
currentSkills={props.gridWeapon.ax}
|
||||
|
|
@ -190,15 +218,20 @@ const WeaponModal = (props: Props) => {
|
|||
|
||||
return (
|
||||
<Dialog.Root open={open} onOpenChange={openChange}>
|
||||
<Dialog.Trigger asChild>
|
||||
{ props.children }
|
||||
</Dialog.Trigger>
|
||||
<Dialog.Trigger asChild>{props.children}</Dialog.Trigger>
|
||||
<Dialog.Portal>
|
||||
<Dialog.Content className="Weapon Dialog" onOpenAutoFocus={ (event) => event.preventDefault() }>
|
||||
<Dialog.Content
|
||||
className="Weapon Dialog"
|
||||
onOpenAutoFocus={(event) => event.preventDefault()}
|
||||
>
|
||||
<div className="DialogHeader">
|
||||
<div className="DialogTop">
|
||||
<Dialog.Title className="SubTitle">{t('modals.weapon.title')}</Dialog.Title>
|
||||
<Dialog.Title className="DialogTitle">{props.gridWeapon.object.name[locale]}</Dialog.Title>
|
||||
<Dialog.Title className="SubTitle">
|
||||
{t("modals.weapon.title")}
|
||||
</Dialog.Title>
|
||||
<Dialog.Title className="DialogTitle">
|
||||
{props.gridWeapon.object.name[locale]}
|
||||
</Dialog.Title>
|
||||
</div>
|
||||
<Dialog.Close className="DialogClose" asChild>
|
||||
<span>
|
||||
|
|
@ -208,10 +241,17 @@ const WeaponModal = (props: Props) => {
|
|||
</div>
|
||||
|
||||
<div className="mods">
|
||||
{ (props.gridWeapon.object.element == 0) ? elementSelect() : '' }
|
||||
{ ([2, 3, 17, 24].includes(props.gridWeapon.object.series)) ? keySelect() : '' }
|
||||
{ (props.gridWeapon.object.ax > 0) ? axSelect() : '' }
|
||||
<Button onClick={updateWeapon} disabled={props.gridWeapon.object.ax > 0 && !formValid}>{t('modals.weapon.buttons.confirm')}</Button>
|
||||
{props.gridWeapon.object.element == 0 ? elementSelect() : ""}
|
||||
{[2, 3, 17, 24].includes(props.gridWeapon.object.series)
|
||||
? keySelect()
|
||||
: ""}
|
||||
{props.gridWeapon.object.ax > 0 ? axSelect() : ""}
|
||||
<Button
|
||||
onClick={updateWeapon}
|
||||
disabled={props.gridWeapon.object.ax > 0 && !formValid}
|
||||
>
|
||||
{t("modals.weapon.buttons.confirm")}
|
||||
</Button>
|
||||
</div>
|
||||
</Dialog.Content>
|
||||
<Dialog.Overlay className="Overlay" />
|
||||
|
|
|
|||
Loading…
Reference in a new issue