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

Component cookie fixes

Browse source
This commit is contained in:
Justin Edmund 2022-11-16 05:26:18 -08:00
parent 94c885513d
commit 61a762b29b
8 changed files with 1435 additions and 1290 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

212
components/AccountModal/index.tsx
View file

@ -1,41 +1,45 @@
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from "react"
import { useCookies } from 'react-cookie' import { getCookie } from "cookies-next"
import { useRouter } from 'next/router' import { useRouter } from "next/router"
import { useSnapshot } from 'valtio' import { useSnapshot } from "valtio"
import { useTranslation } from 'next-i18next' import { useTranslation } from "next-i18next"
import * as Dialog from '@radix-ui/react-dialog' import * as Dialog from "@radix-ui/react-dialog"
import * as Switch from '@radix-ui/react-switch' import * as Switch from "@radix-ui/react-switch"
import api from '~utils/api' import api from "~utils/api"
import { accountState } from '~utils/accountState' import { accountState } from "~utils/accountState"
import { pictureData } from '~utils/pictureData' import { pictureData } from "~utils/pictureData"
import Button from '~components/Button' import Button from "~components/Button"
import CrossIcon from '~public/icons/Cross.svg' import CrossIcon from "~public/icons/Cross.svg"
import './index.scss' import "./index.scss"
const AccountModal = () => { const AccountModal = () => {
const { account } = useSnapshot(accountState) const { account } = useSnapshot(accountState)
const router = useRouter() const router = useRouter()
const { t } = useTranslation('common') const { t } = useTranslation("common")
const locale = (router.locale && ['en', 'ja'].includes(router.locale)) ? router.locale : 'en' const locale =
router.locale && ["en", "ja"].includes(router.locale) ? router.locale : "en"
// Cookies // Cookies
const [cookies, setCookies] = useCookies() const cookie = getCookie("account")
const headers = (cookies.account != null) ? { const headers = {}
headers: { // cookies.account != null
'Authorization': `Bearer ${cookies.account.access_token}` // ? {
} // headers: {
} : {} // Authorization: `Bearer ${cookies.account.access_token}`,
// },
// }
// : {}
// State // State
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 [gender, setGender] = useState(0)
const [privateProfile, setPrivateProfile] = useState(false) const [privateProfile, setPrivateProfile] = useState(false)
@ -45,33 +49,32 @@ const AccountModal = () => {
const genderSelect = 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) // if (cookies.user) setGender(cookies.user.gender)
}, [cookies]) // }, [cookies])
const pictureOptions = ( const pictureOptions = pictureData
pictureData.sort((a, b) => (a.name.en > b.name.en) ? 1 : -1).map((item, i) => { .sort((a, b) => (a.name.en > b.name.en ? 1 : -1))
.map((item, i) => {
return ( 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>) { function handlePictureChange(event: React.ChangeEvent<HTMLSelectElement>) {
if (pictureSelect.current) if (pictureSelect.current) setPicture(pictureSelect.current.value)
setPicture(pictureSelect.current.value)
} }
function handleLanguageChange(event: React.ChangeEvent<HTMLSelectElement>) { function handleLanguageChange(event: React.ChangeEvent<HTMLSelectElement>) {
if (languageSelect.current) if (languageSelect.current) setLanguage(languageSelect.current.value)
setLanguage(languageSelect.current.value)
} }
function handleGenderChange(event: React.ChangeEvent<HTMLSelectElement>) { function handleGenderChange(event: React.ChangeEvent<HTMLSelectElement>) {
if (genderSelect.current) if (genderSelect.current) setGender(parseInt(genderSelect.current.value))
setGender(parseInt(genderSelect.current.value))
} }
function handlePrivateChange(checked: boolean) { function handlePrivateChange(checked: boolean) {
@ -84,44 +87,45 @@ const AccountModal = () => {
const object = { const object = {
user: { user: {
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, gender: gender,
private: privateProfile private: privateProfile,
} },
} }
api.endpoints.users.update(cookies.account.user_id, object, headers) // api.endpoints.users
.then(response => { // .update(cookies.account.user_id, object, headers)
const user = response.data.user // .then((response) => {
// const user = response.data.user
const cookieObj = { // const cookieObj = {
picture: user.picture.picture, // picture: user.picture.picture,
element: user.picture.element, // element: user.picture.element,
gender: user.gender, // gender: user.gender,
language: user.language // language: user.language,
} // }
setCookies('user', cookieObj, { path: '/'}) // setCookies("user", cookieObj, { path: "/" })
accountState.account.user = { // accountState.account.user = {
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 // gender: user.gender,
} // }
setOpen(false) // setOpen(false)
changeLanguage(user.language) // changeLanguage(user.language)
}) // })
} }
function changeLanguage(newLanguage: string) { function changeLanguage(newLanguage: string) {
if (newLanguage !== router.locale) { // if (newLanguage !== router.locale) {
setCookies('NEXT_LOCALE', newLanguage, { path: '/'}) // setCookies("NEXT_LOCALE", newLanguage, { path: "/" })
router.push(router.asPath, undefined, { locale: newLanguage }) // router.push(router.asPath, undefined, { locale: newLanguage })
} // }
} }
function openChange(open: boolean) { function openChange(open: boolean) {
@ -132,15 +136,22 @@ const AccountModal = () => {
<Dialog.Root open={open} onOpenChange={openChange}> <Dialog.Root open={open} onOpenChange={openChange}>
<Dialog.Trigger asChild> <Dialog.Trigger asChild>
<li className="MenuItem"> <li className="MenuItem">
<span>{t('menu.settings')}</span> <span>{t("menu.settings")}</span>
</li> </li>
</Dialog.Trigger> </Dialog.Trigger>
<Dialog.Portal> <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="DialogHeader">
<div className="DialogTop"> <div className="DialogTop">
<Dialog.Title className="SubTitle">{t('modals.settings.title')}</Dialog.Title> <Dialog.Title className="SubTitle">
<Dialog.Title className="DialogTitle">@{account.user?.username}</Dialog.Title> {t("modals.settings.title")}
</Dialog.Title>
<Dialog.Title className="DialogTitle">
@{account.user?.username}
</Dialog.Title>
</div> </div>
<Dialog.Close className="DialogClose" asChild> <Dialog.Close className="DialogClose" asChild>
<span> <span>
@ -152,10 +163,14 @@ const AccountModal = () => {
<form onSubmit={update}> <form onSubmit={update}>
<div className="field"> <div className="field">
<div className="left"> <div className="left">
<label>{t('modals.settings.labels.picture')}</label> <label>{t("modals.settings.labels.picture")}</label>
</div> </div>
<div className={`preview ${pictureData.find(i => i.filename === picture)?.element}`}> <div
className={`preview ${
pictureData.find((i) => i.filename === picture)?.element
}`}
>
<img <img
alt="Profile preview" alt="Profile preview"
srcSet={`/profile/${picture}.png, srcSet={`/profile/${picture}.png,
@ -164,42 +179,71 @@ const AccountModal = () => {
/> />
</div> </div>
<select name="picture" onChange={handlePictureChange} value={picture} ref={pictureSelect}> <select
name="picture"
onChange={handlePictureChange}
value={picture}
ref={pictureSelect}
>
{pictureOptions} {pictureOptions}
</select> </select>
</div> </div>
<div className="field"> <div className="field">
<div className="left"> <div className="left">
<label>{t('modals.settings.labels.gender')}</label> <label>{t("modals.settings.labels.gender")}</label>
</div> </div>
<select name="gender" onChange={handleGenderChange} value={gender} ref={genderSelect}> <select
<option key="gran" value="0">{t('modals.settings.gender.gran')}</option> name="gender"
<option key="djeeta" value="1">{t('modals.settings.gender.djeeta')}</option> 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> </select>
</div> </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>
</div> </div>
<select name="language" onChange={handleLanguageChange} value={language} ref={languageSelect}> <select
<option key="en" value="en">{t('modals.settings.language.english')}</option> name="language"
<option key="jp" value="ja">{t('modals.settings.language.japanese')}</option> 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> </select>
</div> </div>
<div className="field"> <div className="field">
<div className="left"> <div className="left">
<label>{t('modals.settings.labels.private')}</label> <label>{t("modals.settings.labels.private")}</label>
<p className={locale}>{t('modals.settings.descriptions.private')}</p> <p className={locale}>
{t("modals.settings.descriptions.private")}
</p>
</div> </div>
<Switch.Root className="Switch" onCheckedChange={handlePrivateChange} checked={privateProfile}> <Switch.Root
className="Switch"
onCheckedChange={handlePrivateChange}
checked={privateProfile}
>
<Switch.Thumb className="Thumb" /> <Switch.Thumb className="Thumb" />
</Switch.Root> </Switch.Root>
</div> </div>
<Button>{t('modals.settings.buttons.confirm')}</Button> <Button>{t("modals.settings.buttons.confirm")}</Button>
</form> </form>
</Dialog.Content> </Dialog.Content>
<Dialog.Overlay className="Overlay" /> <Dialog.Overlay className="Overlay" />

122
components/GridRep/index.tsx
View file

@ -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 { accountState } from "~utils/accountState"
import { useRouter } from 'next/router' import { formatTimeAgo } from "~utils/timeAgo"
import { useSnapshot } from 'valtio'
import { useTranslation } from 'next-i18next'
import classNames from 'classnames'
import { accountState } from '~utils/accountState' import Button from "~components/Button"
import { formatTimeAgo } from '~utils/timeAgo' import { ButtonType } from "~utils/enums"
import Button from '~components/Button' import "./index.scss"
import { ButtonType } from '~utils/enums'
import './index.scss'
interface Props { interface Props {
shortcode: string shortcode: string
@ -33,32 +32,32 @@ const GridRep = (props: Props) => {
const { account } = useSnapshot(accountState) const { account } = useSnapshot(accountState)
const router = useRouter() const router = useRouter()
const { t } = useTranslation('common') const { t } = useTranslation("common")
const locale = (router.locale && ['en', 'ja'].includes(router.locale)) ? router.locale : 'en' const locale =
router.locale && ["en", "ja"].includes(router.locale) ? router.locale : "en"
const [mainhand, setMainhand] = useState<Weapon>() const [mainhand, setMainhand] = useState<Weapon>()
const [weapons, setWeapons] = useState<GridArray<Weapon>>({}) const [weapons, setWeapons] = useState<GridArray<Weapon>>({})
const titleClass = classNames({ const titleClass = classNames({
'empty': !props.name empty: !props.name,
}) })
const raidClass = classNames({ const raidClass = classNames({
'raid': true, raid: true,
'empty': !props.raid empty: !props.raid,
}) })
const userClass = classNames({ const userClass = classNames({
'user': true, user: true,
'empty': !props.user empty: !props.user,
}) })
useEffect(() => { useEffect(() => {
const newWeapons = Array(numWeapons) const newWeapons = Array(numWeapons)
for (const [key, value] of Object.entries(props.grid)) { for (const [key, value] of Object.entries(props.grid)) {
if (value.position == -1) if (value.position == -1) setMainhand(value.object)
setMainhand(value.object)
else if (!value.mainhand && value.position != null) else if (!value.mainhand && value.position != null)
newWeapons[value.position] = value.object newWeapons[value.position] = value.object
} }
@ -71,7 +70,7 @@ const GridRep = (props: Props) => {
} }
function generateMainhandImage() { function generateMainhandImage() {
let url = '' let url = ""
if (mainhand) { if (mainhand) {
if (mainhand.element == 0 && props.grid[0].element) { if (mainhand.element == 0 && props.grid[0].element) {
@ -81,12 +80,15 @@ const GridRep = (props: Props) => {
} }
} }
return (mainhand) ? return mainhand && props.grid[0] ? (
<img alt={mainhand.name[locale]} src={url} /> : '' <img alt={mainhand.name[locale]} src={url} />
) : (
""
)
} }
function generateGridImage(position: number) { function generateGridImage(position: number) {
let url = '' let url = ""
if (weapons[position]) { if (weapons[position]) {
if (weapons[position].element == 0 && props.grid[position].element) { if (weapons[position].element == 0 && props.grid[position].element) {
@ -96,13 +98,15 @@ const GridRep = (props: Props) => {
} }
} }
return (weapons[position]) ? return weapons[position] ? (
<img alt={weapons[position].name[locale]} src={url} /> : '' <img alt={weapons[position].name[locale]} src={url} />
) : (
""
)
} }
function sendSaveData() { function sendSaveData() {
if (props.onSave) if (props.onSave) props.onSave(props.id, props.favorited)
props.onSave(props.id, props.favorited)
} }
const userImage = () => { const userImage = () => {
@ -116,16 +120,21 @@ const GridRep = (props: Props) => {
src={`/profile/${props.user.picture.picture}.png`} src={`/profile/${props.user.picture.picture}.png`}
/> />
) )
else else return <div className="no-user" />
return (<div className="no-user" />)
} }
const details = ( const details = (
<div className="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="bottom">
<div className={raidClass}>{ (props.raid) ? props.raid.name[locale] : t('no_raid') }</div> <div className={raidClass}>
<time className="last-updated" dateTime={props.createdAt.toISOString()}>{formatTimeAgo(props.createdAt, locale)}</time> {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>
</div> </div>
) )
@ -134,50 +143,55 @@ const GridRep = (props: Props) => {
<div className="Details"> <div className="Details">
<div className="top"> <div className="top">
<div className="info"> <div className="info">
<h2 className={titleClass} onClick={navigate}>{ (props.name) ? props.name : t('no_title') }</h2> <h2 className={titleClass} onClick={navigate}>
<div className={raidClass}>{ (props.raid) ? props.raid.name[locale] : t('no_raid') }</div> {props.name ? props.name : t("no_title")}
</h2>
<div className={raidClass}>
{props.raid ? props.raid.name[locale] : t("no_raid")}
</div> </div>
{ </div>
(account.authorized && ( {account.authorized &&
(props.user && account.user && account.user.id !== props.user.id) ((props.user && account.user && account.user.id !== props.user.id) ||
|| (!props.user) !props.user) ? (
)) ?
<Button <Button
active={props.favorited} active={props.favorited}
icon="save" icon="save"
type={ButtonType.IconOnly} type={ButtonType.IconOnly}
onClick={sendSaveData} /> onClick={sendSaveData}
: '' />
} ) : (
""
)}
</div> </div>
<div className="bottom"> <div className="bottom">
<div className={userClass}> <div className={userClass}>
{userImage()} {userImage()}
{ (props.user) ? props.user.username : t('no_user') } {props.user ? props.user.username : t("no_user")}
</div> </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>
</div> </div>
) )
return ( return (
<div className="GridRep"> <div className="GridRep">
{ (props.displayUser) ? detailsWithUsername : details} {props.displayUser ? detailsWithUsername : details}
<div className="Grid" onClick={navigate}> <div className="Grid" onClick={navigate}>
<div className="weapon grid_mainhand"> <div className="weapon grid_mainhand">{generateMainhandImage()}</div>
{generateMainhandImage()}
</div>
<ul className="grid_weapons"> <ul className="grid_weapons">
{ {Array.from(Array(numWeapons)).map((x, i) => {
Array.from(Array(numWeapons)).map((x, i) => {
return ( return (
<li key={`${props.shortcode}-${i}`} className="weapon grid_weapon"> <li
key={`${props.shortcode}-${i}`}
className="weapon grid_weapon"
>
{generateGridImage(i)} {generateGridImage(i)}
</li> </li>
) )
}) })}
}
</ul> </ul>
</div> </div>
</div> </div>

5
components/GridRepCollection/index.scss
View file

@ -2,14 +2,9 @@
display: grid; display: grid;
grid-template-columns: auto auto auto; grid-template-columns: auto auto auto;
margin: 0 auto; margin: 0 auto;
opacity: 0;
padding: 0; padding: 0;
width: fit-content; width: fit-content;
transition: opacity 0.14s ease-in-out; transition: opacity 0.14s ease-in-out;
// width: fit-content; // width: fit-content;
max-width: 996px; max-width: 996px;
&.visible {
opacity: 1;
}
} }

16
components/GridRepCollection/index.tsx
View file

@ -1,24 +1,18 @@
import classNames from 'classnames' import classNames from "classnames"
import React from 'react' import React from "react"
import './index.scss' import "./index.scss"
interface Props { interface Props {
loading: boolean
children: React.ReactNode children: React.ReactNode
} }
const GridRepCollection = (props: Props) => { const GridRepCollection = (props: Props) => {
const classes = classNames({ const classes = classNames({
'GridRepCollection': true, GridRepCollection: true,
'visible': !props.loading
}) })
return ( return <div className={classes}>{props.children}</div>
<div className={classes}>
{props.children}
</div>
)
} }
export default GridRepCollection export default GridRepCollection

103
components/LoginModal/index.tsx
View file

@ -1,19 +1,19 @@
import React, { useState } from 'react' import React, { useState } from "react"
import { useCookies } from 'react-cookie' import { setCookie } from "cookies-next"
import Router, { useRouter } from 'next/router' import Router, { useRouter } from "next/router"
import { useTranslation } from 'react-i18next' import { useTranslation } from "react-i18next"
import { AxiosResponse } from 'axios' 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 api from "~utils/api"
import { accountState } from '~utils/accountState' import { accountState } from "~utils/accountState"
import Button from '~components/Button' import Button from "~components/Button"
import Fieldset from '~components/Fieldset' import Fieldset from "~components/Fieldset"
import CrossIcon from '~public/icons/Cross.svg' import CrossIcon from "~public/icons/Cross.svg"
import './index.scss' import "./index.scss"
interface Props {} interface Props {}
@ -23,22 +23,20 @@ interface ErrorMap {
password: string 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 LoginModal = (props: Props) => {
const router = useRouter() const router = useRouter()
const { t } = useTranslation('common') const { t } = useTranslation("common")
// Set up form states and error handling // Set up form states and error handling
const [formValid, setFormValid] = useState(false) const [formValid, setFormValid] = useState(false)
const [errors, setErrors] = useState<ErrorMap>({ const [errors, setErrors] = useState<ErrorMap>({
email: '', email: "",
password: '' password: "",
}) })
// Cookies
const [cookies, setCookies] = useCookies()
// States // States
const [open, setOpen] = useState(false) const [open, setOpen] = useState(false)
@ -52,19 +50,17 @@ const LoginModal = (props: Props) => {
let newErrors = { ...errors } let newErrors = { ...errors }
switch (name) { switch (name) {
case 'email': case "email":
if (value.length == 0) 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)) else if (!emailRegex.test(value))
newErrors.email = t('modals.login.errors.invalid_email') newErrors.email = t("modals.login.errors.invalid_email")
else else newErrors.email = ""
newErrors.email = ''
break break
case 'password': case "password":
newErrors.password = value.length == 0 newErrors.password =
? t('modals.login.errors.empty_password') value.length == 0 ? t("modals.login.errors.empty_password") : ""
: ''
break break
default: default:
@ -95,17 +91,18 @@ const LoginModal = (props: Props) => {
const body = { const body = {
email: emailInput.current?.value, email: emailInput.current?.value,
password: passwordInput.current?.value, password: passwordInput.current?.value,
grant_type: 'password' grant_type: "password",
} }
if (formValid) { if (formValid) {
api.login(body) api
.then(response => { .login(body)
.then((response) => {
storeCookieInfo(response) storeCookieInfo(response)
return response.data.user.id return response.data.user.id
}) })
.then(id => fetchUserInfo(id)) .then((id) => fetchUserInfo(id))
.then(infoResponse => storeUserInfo(infoResponse)) .then((infoResponse) => storeUserInfo(infoResponse))
} }
} }
@ -116,35 +113,36 @@ const LoginModal = (props: Props) => {
function storeCookieInfo(response: AxiosResponse) { function storeCookieInfo(response: AxiosResponse) {
const user = response.data.user const user = response.data.user
const cookieObj = { const cookieObj: AccountCookie = {
user_id: user.id, userId: user.id,
username: user.username, 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) { function storeUserInfo(response: AxiosResponse) {
const user = response.data.user const user = response.data.user
const cookieObj = { const cookieObj: UserCookie = {
picture: user.picture.picture, picture: user.picture.picture,
element: user.picture.element, element: user.picture.element,
language: user.language, language: user.language,
gender: user.gender gender: user.gender,
} }
setCookies('user', cookieObj, { path: '/' }) setCookie("user", cookieObj, { path: "/" })
accountState.account.user = { accountState.account.user = {
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 gender: user.gender,
} }
console.log("Authorizing account...")
accountState.account.authorized = true accountState.account.authorized = true
setOpen(false) setOpen(false)
@ -153,7 +151,7 @@ const LoginModal = (props: Props) => {
function changeLanguage(newLanguage: string) { function changeLanguage(newLanguage: string) {
if (newLanguage !== router.locale) { if (newLanguage !== router.locale) {
setCookies('NEXT_LOCALE', newLanguage, { path: '/'}) setCookie("NEXT_LOCALE", newLanguage, { path: "/" })
router.push(router.asPath, undefined, { locale: newLanguage }) router.push(router.asPath, undefined, { locale: newLanguage })
} }
} }
@ -161,8 +159,8 @@ const LoginModal = (props: Props) => {
function openChange(open: boolean) { function openChange(open: boolean) {
setOpen(open) setOpen(open)
setErrors({ setErrors({
email: '', email: "",
password: '' password: "",
}) })
} }
@ -170,13 +168,18 @@ const LoginModal = (props: Props) => {
<Dialog.Root open={open} onOpenChange={openChange}> <Dialog.Root open={open} onOpenChange={openChange}>
<Dialog.Trigger asChild> <Dialog.Trigger asChild>
<li className="MenuItem"> <li className="MenuItem">
<span>{t('menu.login')}</span> <span>{t("menu.login")}</span>
</li> </li>
</Dialog.Trigger> </Dialog.Trigger>
<Dialog.Portal> <Dialog.Portal>
<Dialog.Content className="Login Dialog" onOpenAutoFocus={ (event) => event.preventDefault() }> <Dialog.Content
className="Login Dialog"
onOpenAutoFocus={(event) => event.preventDefault()}
>
<div className="DialogHeader"> <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> <Dialog.Close className="DialogClose" asChild>
<span> <span>
<CrossIcon /> <CrossIcon />
@ -187,7 +190,7 @@ const LoginModal = (props: Props) => {
<form className="form" onSubmit={login}> <form className="form" onSubmit={login}>
<Fieldset <Fieldset
fieldName="email" fieldName="email"
placeholder={t('modals.login.placeholders.email')} placeholder={t("modals.login.placeholders.email")}
onChange={handleChange} onChange={handleChange}
error={errors.email} error={errors.email}
ref={emailInput} ref={emailInput}
@ -195,13 +198,13 @@ const LoginModal = (props: Props) => {
<Fieldset <Fieldset
fieldName="password" fieldName="password"
placeholder={t('modals.login.placeholders.password')} placeholder={t("modals.login.placeholders.password")}
onChange={handleChange} onChange={handleChange}
error={errors.password} error={errors.password}
ref={passwordInput} ref={passwordInput}
/> />
<Button>{t('modals.login.buttons.confirm')}</Button> <Button>{t("modals.login.buttons.confirm")}</Button>
</form> </form>
</Dialog.Content> </Dialog.Content>
<Dialog.Overlay className="Overlay" /> <Dialog.Overlay className="Overlay" />

159
components/SearchModal/index.tsx
View file

@ -1,32 +1,32 @@
import React, { useEffect, useRef, useState } from 'react' import React, { useEffect, useRef, useState } from "react"
import { useCookies } from 'react-cookie' import { getCookie, setCookie } from "cookies-next"
import { useRouter } from 'next/router' import { useRouter } from "next/router"
import { useSnapshot } from 'valtio' import { useSnapshot } from "valtio"
import { useTranslation } from 'react-i18next' import { useTranslation } from "react-i18next"
import InfiniteScroll from 'react-infinite-scroll-component' import InfiniteScroll from "react-infinite-scroll-component"
import { appState } from '~utils/appState' import { appState } from "~utils/appState"
import api from '~utils/api' 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 CharacterSearchFilterBar from "~components/CharacterSearchFilterBar"
import WeaponSearchFilterBar from '~components/WeaponSearchFilterBar' import WeaponSearchFilterBar from "~components/WeaponSearchFilterBar"
import SummonSearchFilterBar from '~components/SummonSearchFilterBar' import SummonSearchFilterBar from "~components/SummonSearchFilterBar"
import CharacterResult from '~components/CharacterResult' import CharacterResult from "~components/CharacterResult"
import WeaponResult from '~components/WeaponResult' import WeaponResult from "~components/WeaponResult"
import SummonResult from '~components/SummonResult' import SummonResult from "~components/SummonResult"
import './index.scss' import "./index.scss"
import CrossIcon from '~public/icons/Cross.svg' import CrossIcon from "~public/icons/Cross.svg"
import cloneDeep from 'lodash.clonedeep' import cloneDeep from "lodash.clonedeep"
interface Props { interface Props {
send: (object: Character | Weapon | Summon, position: number) => any send: (object: Character | Weapon | Summon, position: number) => any
placeholderText: string placeholderText: string
fromPosition: number fromPosition: number
object: 'weapons' | 'characters' | 'summons', object: "weapons" | "characters" | "summons"
children: React.ReactNode children: React.ReactNode
} }
@ -39,19 +39,18 @@ const SearchModal = (props: Props) => {
const locale = router.locale const locale = router.locale
// Set up translation // Set up translation
const { t } = useTranslation('common') const { t } = useTranslation("common")
// Set up cookies
const [cookies, setCookies] = useCookies()
let searchInput = React.createRef<HTMLInputElement>() let searchInput = React.createRef<HTMLInputElement>()
let scrollContainer = React.createRef<HTMLDivElement>() let scrollContainer = React.createRef<HTMLDivElement>()
const [firstLoad, setFirstLoad] = useState(true) 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 [filters, setFilters] = useState<{ [key: string]: number[] }>()
const [open, setOpen] = useState(false) const [open, setOpen] = useState(false)
const [query, setQuery] = useState('') const [query, setQuery] = useState("")
const [results, setResults] = useState<(Weapon | Summon | Character)[]>([]) const [results, setResults] = useState<(Weapon | Summon | Character)[]>([])
// Pagination states // Pagination states
@ -64,8 +63,7 @@ const SearchModal = (props: Props) => {
}, [grid, props.object]) }, [grid, props.object])
useEffect(() => { useEffect(() => {
if (searchInput.current) if (searchInput.current) searchInput.current.focus()
searchInput.current.focus()
}, [searchInput]) }, [searchInput])
function inputChanged(event: React.ChangeEvent<HTMLInputElement>) { function inputChanged(event: React.ChangeEvent<HTMLInputElement>) {
@ -73,18 +71,20 @@ const SearchModal = (props: Props) => {
if (text.length) { if (text.length) {
setQuery(text) setQuery(text)
} else { } else {
setQuery('') setQuery("")
} }
} }
function fetchResults({ replace = false }: { replace?: boolean }) { function fetchResults({ replace = false }: { replace?: boolean }) {
api.search({ api
.search({
object: props.object, object: props.object,
query: query, query: query,
filters: filters, filters: filters,
locale: locale, locale: locale,
page: currentPage page: currentPage,
}).then(response => { })
.then((response) => {
setTotalPages(response.data.total_pages) setTotalPages(response.data.total_pages)
setRecordCount(response.data.count) setRecordCount(response.data.count)
@ -93,12 +93,16 @@ const SearchModal = (props: Props) => {
} else { } else {
appendResults(response.data.results) appendResults(response.data.results)
} }
}).catch(error => { })
.catch((error) => {
console.error(error) console.error(error)
}) })
} }
function replaceResults(count: number, list: Weapon[] | Summon[] | Character[]) { function replaceResults(
count: number,
list: Weapon[] | Summon[] | Character[]
) {
if (count > 0) { if (count > 0) {
setResults(list) setResults(list)
} else { } else {
@ -112,22 +116,26 @@ const SearchModal = (props: Props) => {
function storeRecentResult(result: Character | Weapon | Summon) { function storeRecentResult(result: Character | Weapon | Summon) {
const key = `recent_${props.object}` 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[] = [] let recents: Character[] | Weapon[] | Summon[] = []
if (props.object === "weapons") { if (props.object === "weapons") {
recents = cloneDeep(cookies[key] as Weapon[]) || [] recents = cloneDeep(cookieObj as Weapon[]) || []
if (!recents.find(item => item.granblue_id === result.granblue_id)) { if (!recents.find((item) => item.granblue_id === result.granblue_id)) {
recents.unshift(result as Weapon) recents.unshift(result as Weapon)
} }
} else if (props.object === "summons") { } else if (props.object === "summons") {
recents = cloneDeep(cookies[key] as Summon[]) || [] recents = cloneDeep(cookieObj as Summon[]) || []
if (!recents.find(item => item.granblue_id === result.granblue_id)) { if (!recents.find((item) => item.granblue_id === result.granblue_id)) {
recents.unshift(result as Summon) recents.unshift(result as Summon)
} }
} }
if (recents && recents.length > 5) recents.pop() if (recents && recents.length > 5) recents.pop()
setCookies(`recent_${props.object}`, recents, { path: '/' }) setCookie(`recent_${props.object}`, recents, { path: "/" })
sendData(result) sendData(result)
} }
@ -154,11 +162,15 @@ const SearchModal = (props: Props) => {
useEffect(() => { useEffect(() => {
// Filters changed // Filters changed
const key = `recent_${props.object}` const key = `recent_${props.object}`
const cookie = getCookie(key)
const cookieObj: Weapon[] | Summon[] | Character[] = cookie
? JSON.parse(cookie as string)
: []
if (open) { if (open) {
if (firstLoad && cookies[key] && cookies[key].length > 0) { if (firstLoad && cookieObj && cookieObj.length > 0) {
setResults(cookies[key]) setResults(cookieObj)
setRecordCount(cookies[key].length) setRecordCount(cookieObj.length)
setFirstLoad(false) setFirstLoad(false)
} else { } else {
setCurrentPage(1) setCurrentPage(1)
@ -179,24 +191,25 @@ const SearchModal = (props: Props) => {
let jsx let jsx
switch (props.object) { switch (props.object) {
case 'weapons': case "weapons":
jsx = renderWeaponSearchResults() jsx = renderWeaponSearchResults()
break break
case 'summons': case "summons":
jsx = renderSummonSearchResults(results) jsx = renderSummonSearchResults(results)
break break
case 'characters': case "characters":
jsx = renderCharacterSearchResults(results) jsx = renderCharacterSearchResults(results)
break break
} }
return ( return (
<InfiniteScroll <InfiniteScroll
dataLength={ (results && results.length > 0) ? results.length : 0} dataLength={results && results.length > 0 ? results.length : 0}
next={() => setCurrentPage(currentPage + 1)} next={() => setCurrentPage(currentPage + 1)}
hasMore={totalPages > currentPage} hasMore={totalPages > currentPage}
scrollableTarget="Results" scrollableTarget="Results"
loader={<div className="footer">Loading...</div>}> loader={<div className="footer">Loading...</div>}
>
{jsx} {jsx}
</InfiniteScroll> </InfiniteScroll>
) )
@ -208,11 +221,15 @@ const SearchModal = (props: Props) => {
const castResults: Weapon[] = results as Weapon[] const castResults: Weapon[] = results as Weapon[]
if (castResults && Object.keys(castResults).length > 0) { if (castResults && Object.keys(castResults).length > 0) {
jsx = castResults.map((result: Weapon) => { jsx = castResults.map((result: Weapon) => {
return <WeaponResult return (
<WeaponResult
key={result.id} key={result.id}
data={result} data={result}
onClick={() => { storeRecentResult(result) }} onClick={() => {
storeRecentResult(result)
}}
/> />
)
}) })
} }
@ -225,11 +242,15 @@ const SearchModal = (props: Props) => {
const castResults: Summon[] = results as Summon[] const castResults: Summon[] = results as Summon[]
if (castResults && Object.keys(castResults).length > 0) { if (castResults && Object.keys(castResults).length > 0) {
jsx = castResults.map((result: Summon) => { jsx = castResults.map((result: Summon) => {
return <SummonResult return (
<SummonResult
key={result.id} key={result.id}
data={result} data={result}
onClick={() => { storeRecentResult(result) }} onClick={() => {
storeRecentResult(result)
}}
/> />
)
}) })
} }
@ -242,11 +263,15 @@ const SearchModal = (props: Props) => {
const castResults: Character[] = results as Character[] const castResults: Character[] = results as Character[]
if (castResults && Object.keys(castResults).length > 0) { if (castResults && Object.keys(castResults).length > 0) {
jsx = castResults.map((result: Character) => { jsx = castResults.map((result: Character) => {
return <CharacterResult return (
<CharacterResult
key={result.id} key={result.id}
data={result} data={result}
onClick={() => { storeRecentResult(result) }} onClick={() => {
storeRecentResult(result)
}}
/> />
)
}) })
} }
@ -255,7 +280,7 @@ const SearchModal = (props: Props) => {
function openChange() { function openChange() {
if (open) { if (open) {
setQuery('') setQuery("")
setFirstLoad(true) setFirstLoad(true)
setResults([]) setResults([])
setRecordCount(0) setRecordCount(0)
@ -268,9 +293,7 @@ const SearchModal = (props: Props) => {
return ( return (
<Dialog.Root open={open} onOpenChange={openChange}> <Dialog.Root open={open} onOpenChange={openChange}>
<Dialog.Trigger asChild> <Dialog.Trigger asChild>{props.children}</Dialog.Trigger>
{props.children}
</Dialog.Trigger>
<Dialog.Portal> <Dialog.Portal>
<Dialog.Content className="Search Dialog"> <Dialog.Content className="Search Dialog">
<div id="Header"> <div id="Header">
@ -292,14 +315,28 @@ const SearchModal = (props: Props) => {
<CrossIcon /> <CrossIcon />
</Dialog.Close> </Dialog.Close>
</div> </div>
{ (props.object === 'characters') ? <CharacterSearchFilterBar sendFilters={receiveFilters} /> : '' } {props.object === "characters" ? (
{ (props.object === 'weapons') ? <WeaponSearchFilterBar sendFilters={receiveFilters} /> : '' } <CharacterSearchFilterBar sendFilters={receiveFilters} />
{ (props.object === 'summons') ? <SummonSearchFilterBar sendFilters={receiveFilters} /> : '' } ) : (
""
)}
{props.object === "weapons" ? (
<WeaponSearchFilterBar sendFilters={receiveFilters} />
) : (
""
)}
{props.object === "summons" ? (
<SummonSearchFilterBar sendFilters={receiveFilters} />
) : (
""
)}
</div> </div>
<div id="Results" ref={scrollContainer}> <div id="Results" ref={scrollContainer}>
<h5 className="total">{t('search.result_count', { "record_count": recordCount })}</h5> <h5 className="total">
{ (open) ? renderResults() : ''} {t("search.result_count", { record_count: recordCount })}
</h5>
{open ? renderResults() : ""}
</div> </div>
</Dialog.Content> </Dialog.Content>
<Dialog.Overlay className="Overlay" /> <Dialog.Overlay className="Overlay" />

172
components/SignupModal/index.tsx
View file

@ -1,20 +1,20 @@
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from "react"
import Link from 'next/link' import Link from "next/link"
import { useCookies } from 'react-cookie' import { setCookie } from "cookies-next"
import { useRouter } from 'next/router' import { useRouter } from "next/router"
import { Trans, useTranslation } from 'next-i18next' import { Trans, useTranslation } from "next-i18next"
import { AxiosResponse } from 'axios' 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 api from "~utils/api"
import { accountState } from '~utils/accountState' import { accountState } from "~utils/accountState"
import Button from '~components/Button' import Button from "~components/Button"
import Fieldset from '~components/Fieldset' import Fieldset from "~components/Fieldset"
import CrossIcon from '~public/icons/Cross.svg' import CrossIcon from "~public/icons/Cross.svg"
import './index.scss' import "./index.scss"
interface Props {} interface Props {}
@ -26,24 +26,22 @@ interface ErrorMap {
passwordConfirmation: string 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 SignupModal = (props: Props) => {
const router = useRouter() const router = useRouter()
const { t } = useTranslation('common') const { t } = useTranslation("common")
// Set up form states and error handling // Set up form states and error handling
const [formValid, setFormValid] = useState(false) const [formValid, setFormValid] = useState(false)
const [errors, setErrors] = useState<ErrorMap>({ const [errors, setErrors] = useState<ErrorMap>({
username: '', username: "",
email: '', email: "",
password: '', password: "",
passwordConfirmation: '' passwordConfirmation: "",
}) })
// Cookies
const [cookies, setCookies] = useCookies()
// States // States
const [open, setOpen] = useState(false) const [open, setOpen] = useState(false)
@ -52,7 +50,12 @@ const SignupModal = (props: Props) => {
const emailInput = React.createRef<HTMLInputElement>() const emailInput = React.createRef<HTMLInputElement>()
const passwordInput = React.createRef<HTMLInputElement>() const passwordInput = React.createRef<HTMLInputElement>()
const passwordConfirmationInput = 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) { function register(event: React.FormEvent) {
event.preventDefault() event.preventDefault()
@ -63,30 +66,31 @@ const SignupModal = (props: Props) => {
email: emailInput.current?.value, email: emailInput.current?.value,
password: passwordInput.current?.value, password: passwordInput.current?.value,
password_confirmation: passwordConfirmationInput.current?.value, password_confirmation: passwordConfirmationInput.current?.value,
language: router.locale language: router.locale,
} },
} }
if (formValid) if (formValid)
api.endpoints.users.create(body) api.endpoints.users
.then(response => { .create(body)
.then((response) => {
storeCookieInfo(response) storeCookieInfo(response)
return response.data.user.user_id return response.data.user.user_id
}) })
.then(id => fetchUserInfo(id)) .then((id) => fetchUserInfo(id))
.then(infoResponse => storeUserInfo(infoResponse)) .then((infoResponse) => storeUserInfo(infoResponse))
} }
function storeCookieInfo(response: AxiosResponse) { function storeCookieInfo(response: AxiosResponse) {
const user = response.data.user const user = response.data.user
const cookieObj = { const cookieObj: AccountCookie = {
user_id: user.user_id, userId: user.user_id,
username: user.username, username: user.username,
access_token: user.token token: user.token,
} }
setCookies('account', cookieObj, { path: '/'}) setCookie("account", cookieObj, { path: "/" })
} }
function fetchUserInfo(id: string) { function fetchUserInfo(id: string) {
@ -96,22 +100,22 @@ const SignupModal = (props: Props) => {
function storeUserInfo(response: AxiosResponse) { function storeUserInfo(response: AxiosResponse) {
const user = response.data.user const user = response.data.user
const cookieObj = { const cookieObj: UserCookie = {
picture: user.picture.picture, picture: user.picture.picture,
element: user.picture.element, element: user.picture.element,
language: user.language, language: user.language,
gender: user.gender gender: user.gender,
} }
// TODO: Set language // TODO: Set language
setCookies('user', cookieObj, { path: '/'}) setCookie("user", cookieObj, { path: "/" })
accountState.account.user = { accountState.account.user = {
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 gender: user.gender,
} }
accountState.account.authorized = true accountState.account.authorized = true
@ -125,29 +129,37 @@ const SignupModal = (props: Props) => {
const value = event.target.value const value = event.target.value
if (value.length >= 3) { if (value.length >= 3) {
api.check(fieldName, value) api.check(fieldName, value).then(
.then((response) => { (response) => {
processNameCheck(fieldName, value, response.data.available) processNameCheck(fieldName, value, response.data.available)
}, (error) => { },
(error) => {
console.error(error) console.error(error)
}) }
)
} else { } else {
validateName(fieldName, value) validateName(fieldName, value)
} }
} }
function processNameCheck(fieldName: string, value: string, available: boolean) { function processNameCheck(
fieldName: string,
value: string,
available: boolean
) {
const newErrors = { ...errors } const newErrors = { ...errors }
if (available) { if (available) {
// Continue checking for errors // Continue checking for errors
newErrors[fieldName] = '' newErrors[fieldName] = ""
setErrors(newErrors) setErrors(newErrors)
setFormValid(true) setFormValid(true)
validateName(fieldName, value) validateName(fieldName, value)
} else { } 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) setErrors(newErrors)
setFormValid(false) setFormValid(false)
} }
@ -157,20 +169,19 @@ const SignupModal = (props: Props) => {
let newErrors = { ...errors } let newErrors = { ...errors }
switch (fieldName) { switch (fieldName) {
case 'username': case "username":
if (value.length < 3) 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) else if (value.length > 20)
newErrors.username = t('modals.signup.errors.username_too_long') newErrors.username = t("modals.signup.errors.username_too_long")
else else newErrors.username = ""
newErrors.username = ''
break break
case 'email': case "email":
newErrors.email = emailRegex.test(value) newErrors.email = emailRegex.test(value)
? '' ? ""
: t('modals.signup.errors.invalid_email') : t("modals.signup.errors.invalid_email")
break break
default: default:
@ -187,22 +198,25 @@ const SignupModal = (props: Props) => {
let newErrors = { ...errors } let newErrors = { ...errors }
switch (name) { switch (name) {
case 'password': case "password":
newErrors.password = passwordInput.current?.value.includes(usernameInput.current?.value!) newErrors.password = passwordInput.current?.value.includes(
? t('modals.signup.errors.password_contains_username') usernameInput.current?.value!
: '' )
? t("modals.signup.errors.password_contains_username")
: ""
break break
case 'password': case "password":
newErrors.password = value.length < 8 newErrors.password =
? t('modals.signup.errors.password_too_short') value.length < 8 ? t("modals.signup.errors.password_too_short") : ""
: ''
break break
case 'confirm_password': case "confirm_password":
newErrors.passwordConfirmation = passwordInput.current?.value === passwordConfirmationInput.current?.value newErrors.passwordConfirmation =
? '' passwordInput.current?.value ===
: t('modals.signup.errors.passwords_dont_match') passwordConfirmationInput.current?.value
? ""
: t("modals.signup.errors.passwords_dont_match")
break break
default: default:
@ -229,10 +243,10 @@ const SignupModal = (props: Props) => {
function openChange(open: boolean) { function openChange(open: boolean) {
setOpen(open) setOpen(open)
setErrors({ setErrors({
username: '', username: "",
email: '', email: "",
password: '', password: "",
passwordConfirmation: '' passwordConfirmation: "",
}) })
} }
@ -240,13 +254,18 @@ const SignupModal = (props: Props) => {
<Dialog.Root open={open} onOpenChange={openChange}> <Dialog.Root open={open} onOpenChange={openChange}>
<Dialog.Trigger asChild> <Dialog.Trigger asChild>
<li className="MenuItem"> <li className="MenuItem">
<span>{t('menu.signup')}</span> <span>{t("menu.signup")}</span>
</li> </li>
</Dialog.Trigger> </Dialog.Trigger>
<Dialog.Portal> <Dialog.Portal>
<Dialog.Content className="Signup Dialog" onOpenAutoFocus={ (event) => event.preventDefault() }> <Dialog.Content
className="Signup Dialog"
onOpenAutoFocus={(event) => event.preventDefault()}
>
<div className="DialogHeader"> <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> <Dialog.Close className="DialogClose" asChild>
<span> <span>
<CrossIcon /> <CrossIcon />
@ -257,7 +276,7 @@ const SignupModal = (props: Props) => {
<form className="form" onSubmit={register}> <form className="form" onSubmit={register}>
<Fieldset <Fieldset
fieldName="username" fieldName="username"
placeholder={t('modals.signup.placeholders.username')} placeholder={t("modals.signup.placeholders.username")}
onChange={handleNameChange} onChange={handleNameChange}
error={errors.username} error={errors.username}
ref={usernameInput} ref={usernameInput}
@ -265,7 +284,7 @@ const SignupModal = (props: Props) => {
<Fieldset <Fieldset
fieldName="email" fieldName="email"
placeholder={t('modals.signup.placeholders.email')} placeholder={t("modals.signup.placeholders.email")}
onChange={handleNameChange} onChange={handleNameChange}
error={errors.email} error={errors.email}
ref={emailInput} ref={emailInput}
@ -273,7 +292,7 @@ const SignupModal = (props: Props) => {
<Fieldset <Fieldset
fieldName="password" fieldName="password"
placeholder={t('modals.signup.placeholders.password')} placeholder={t("modals.signup.placeholders.password")}
onChange={handlePasswordChange} onChange={handlePasswordChange}
error={errors.password} error={errors.password}
ref={passwordInput} ref={passwordInput}
@ -281,13 +300,13 @@ const SignupModal = (props: Props) => {
<Fieldset <Fieldset
fieldName="confirm_password" fieldName="confirm_password"
placeholder={t('modals.signup.placeholders.password_confirm')} placeholder={t("modals.signup.placeholders.password_confirm")}
onChange={handlePasswordChange} onChange={handlePasswordChange}
error={errors.passwordConfirmation} error={errors.passwordConfirmation}
ref={passwordConfirmationInput} ref={passwordConfirmationInput}
/> />
<Button>{t('modals.signup.buttons.confirm')}</Button> <Button>{t("modals.signup.buttons.confirm")}</Button>
<Dialog.Description className="terms"> <Dialog.Description className="terms">
{/* <Trans i18nKey="modals.signup.agreement"> {/* <Trans i18nKey="modals.signup.agreement">
@ -302,5 +321,4 @@ const SignupModal = (props: Props) => {
) )
} }
export default SignupModal export default SignupModal

150
components/WeaponModal/index.tsx
View file

@ -1,21 +1,21 @@
import React, { useState } from 'react' import React, { useState } from "react"
import { useCookies } from 'react-cookie' // import { useCookies } from 'react-cookie'
import { useRouter } from 'next/router' import { useRouter } from "next/router"
import { useTranslation } from 'next-i18next' import { useTranslation } from "next-i18next"
import { AxiosResponse } from 'axios' 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 AXSelect from "~components/AxSelect"
import ElementToggle from '~components/ElementToggle' import ElementToggle from "~components/ElementToggle"
import WeaponKeyDropdown from '~components/WeaponKeyDropdown' import WeaponKeyDropdown from "~components/WeaponKeyDropdown"
import Button from '~components/Button' import Button from "~components/Button"
import api from '~utils/api' import api from "~utils/api"
import { appState } from '~utils/appState' import { appState } from "~utils/appState"
import CrossIcon from '~public/icons/Cross.svg' import CrossIcon from "~public/icons/Cross.svg"
import './index.scss' import "./index.scss"
interface GridWeaponObject { interface GridWeaponObject {
weapon: { weapon: {
@ -37,16 +37,20 @@ interface Props {
const WeaponModal = (props: Props) => { const WeaponModal = (props: Props) => {
const router = useRouter() const router = useRouter()
const locale = (router.locale && ['en', 'ja'].includes(router.locale)) ? router.locale : 'en' const locale =
const { t } = useTranslation('common') router.locale && ["en", "ja"].includes(router.locale) ? router.locale : "en"
const { t } = useTranslation("common")
// Cookies // Cookies
const [cookies] = useCookies(['account']) const [cookies] = useCookies(["account"])
const headers = (cookies.account != null) ? { const headers =
cookies.account != null
? {
headers: { headers: {
'Authorization': `Bearer ${cookies.account.access_token}` Authorization: `Bearer ${cookies.account.access_token}`,
},
} }
} : {} : {}
// Refs // Refs
const weaponKey1Select = React.createRef<HTMLSelectElement>() const weaponKey1Select = React.createRef<HTMLSelectElement>()
@ -63,7 +67,12 @@ const WeaponModal = (props: Props) => {
const [primaryAxValue, setPrimaryAxValue] = useState(0.0) const [primaryAxValue, setPrimaryAxValue] = useState(0.0)
const [secondaryAxValue, setSecondaryAxValue] = 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) setPrimaryAxModifier(primaryAxModifier)
setSecondaryAxModifier(secondaryAxModifier) setSecondaryAxModifier(secondaryAxModifier)
@ -82,8 +91,7 @@ const WeaponModal = (props: Props) => {
function prepareObject() { function prepareObject() {
let object: GridWeaponObject = { weapon: {} } let object: GridWeaponObject = { weapon: {} }
if (props.gridWeapon.object.element == 0) if (props.gridWeapon.object.element == 0) object.weapon.element = element
object.weapon.element = element
if ([2, 3, 17, 24].includes(props.gridWeapon.object.series)) if ([2, 3, 17, 24].includes(props.gridWeapon.object.series))
object.weapon.weapon_key1_id = weaponKey1Select.current?.value object.weapon.weapon_key1_id = weaponKey1Select.current?.value
@ -106,18 +114,17 @@ const WeaponModal = (props: Props) => {
async function updateWeapon() { async function updateWeapon() {
const updateObject = prepareObject() const updateObject = prepareObject()
return await api.endpoints.grid_weapons.update(props.gridWeapon.id, updateObject, headers) return await api.endpoints.grid_weapons
.then(response => processResult(response)) .update(props.gridWeapon.id, updateObject, headers)
.catch(error => processError(error)) .then((response) => processResult(response))
.catch((error) => processError(error))
} }
function processResult(response: AxiosResponse) { function processResult(response: AxiosResponse) {
const gridWeapon: GridWeapon = response.data.grid_weapon const gridWeapon: GridWeapon = response.data.grid_weapon
if (gridWeapon.mainhand) if (gridWeapon.mainhand) appState.grid.weapons.mainWeapon = gridWeapon
appState.grid.weapons.mainWeapon = gridWeapon else appState.grid.weapons.allWeapons[gridWeapon.position] = gridWeapon
else
appState.grid.weapons.allWeapons[gridWeapon.position] = gridWeapon
setOpen(false) setOpen(false)
} }
@ -129,7 +136,7 @@ const WeaponModal = (props: Props) => {
const elementSelect = () => { const elementSelect = () => {
return ( return (
<section> <section>
<h3>{t('modals.weapon.subtitles.element')}</h3> <h3>{t("modals.weapon.subtitles.element")}</h3>
<ElementToggle <ElementToggle
currentElement={props.gridWeapon.element} currentElement={props.gridWeapon.element}
sendValue={receiveElementValue} sendValue={receiveElementValue}
@ -141,30 +148,51 @@ const WeaponModal = (props: Props) => {
const keySelect = () => { const keySelect = () => {
return ( return (
<section> <section>
<h3>{t('modals.weapon.subtitles.weapon_keys')}</h3> <h3>{t("modals.weapon.subtitles.weapon_keys")}</h3>
{ ([2, 3, 17, 22].includes(props.gridWeapon.object.series)) ? {[2, 3, 17, 22].includes(props.gridWeapon.object.series) ? (
<WeaponKeyDropdown <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} series={props.gridWeapon.object.series}
slot={0} slot={0}
ref={weaponKey1Select} /> ref={weaponKey1Select}
: ''} />
) : (
""
)}
{ ([2, 3, 17].includes(props.gridWeapon.object.series)) ? {[2, 3, 17].includes(props.gridWeapon.object.series) ? (
<WeaponKeyDropdown <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} series={props.gridWeapon.object.series}
slot={1} slot={1}
ref={weaponKey2Select} /> ref={weaponKey2Select}
: ''} />
) : (
""
)}
{ (props.gridWeapon.object.series == 17) ? {props.gridWeapon.object.series == 17 ? (
<WeaponKeyDropdown <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} series={props.gridWeapon.object.series}
slot={2} slot={2}
ref={weaponKey3Select} /> ref={weaponKey3Select}
: ''} />
) : (
""
)}
</section> </section>
) )
} }
@ -172,7 +200,7 @@ const WeaponModal = (props: Props) => {
const axSelect = () => { const axSelect = () => {
return ( return (
<section> <section>
<h3>{t('modals.weapon.subtitles.ax_skills')}</h3> <h3>{t("modals.weapon.subtitles.ax_skills")}</h3>
<AXSelect <AXSelect
axType={props.gridWeapon.object.ax} axType={props.gridWeapon.object.ax}
currentSkills={props.gridWeapon.ax} currentSkills={props.gridWeapon.ax}
@ -190,15 +218,20 @@ const WeaponModal = (props: Props) => {
return ( return (
<Dialog.Root open={open} onOpenChange={openChange}> <Dialog.Root open={open} onOpenChange={openChange}>
<Dialog.Trigger asChild> <Dialog.Trigger asChild>{props.children}</Dialog.Trigger>
{ props.children }
</Dialog.Trigger>
<Dialog.Portal> <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="DialogHeader">
<div className="DialogTop"> <div className="DialogTop">
<Dialog.Title className="SubTitle">{t('modals.weapon.title')}</Dialog.Title> <Dialog.Title className="SubTitle">
<Dialog.Title className="DialogTitle">{props.gridWeapon.object.name[locale]}</Dialog.Title> {t("modals.weapon.title")}
</Dialog.Title>
<Dialog.Title className="DialogTitle">
{props.gridWeapon.object.name[locale]}
</Dialog.Title>
</div> </div>
<Dialog.Close className="DialogClose" asChild> <Dialog.Close className="DialogClose" asChild>
<span> <span>
@ -208,10 +241,17 @@ const WeaponModal = (props: Props) => {
</div> </div>
<div className="mods"> <div className="mods">
{ (props.gridWeapon.object.element == 0) ? elementSelect() : '' } {props.gridWeapon.object.element == 0 ? elementSelect() : ""}
{ ([2, 3, 17, 24].includes(props.gridWeapon.object.series)) ? keySelect() : '' } {[2, 3, 17, 24].includes(props.gridWeapon.object.series)
{ (props.gridWeapon.object.ax > 0) ? axSelect() : '' } ? keySelect()
<Button onClick={updateWeapon} disabled={props.gridWeapon.object.ax > 0 && !formValid}>{t('modals.weapon.buttons.confirm')}</Button> : ""}
{props.gridWeapon.object.ax > 0 ? axSelect() : ""}
<Button
onClick={updateWeapon}
disabled={props.gridWeapon.object.ax > 0 && !formValid}
>
{t("modals.weapon.buttons.confirm")}
</Button>
</div> </div>
</Dialog.Content> </Dialog.Content>
<Dialog.Overlay className="Overlay" /> <Dialog.Overlay className="Overlay" />