From e8843699c76ab2e2b25e7c4942620bc7f947c539 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Mon, 5 Dec 2022 17:54:46 -0800 Subject: [PATCH] Remove trailing semicolons --- .prettierrc | 3 +- components/AboutModal/index.tsx | 30 +- components/AccountModal/index.scss | 6 +- components/AccountModal/index.tsx | 106 +++-- components/Alert/index.tsx | 34 +- components/AxSelect/index.tsx | 223 +++++---- components/Button/index.tsx | 144 +++--- components/CharLimitedFieldset/index.tsx | 42 +- components/CharacterConflictModal/index.tsx | 74 +-- components/CharacterGrid/index.tsx | 264 +++++------ components/CharacterHovercard/index.tsx | 92 ++-- components/CharacterResult/index.tsx | 40 +- components/CharacterSearchFilterBar/index.tsx | 158 +++---- components/CharacterUnit/index.tsx | 104 ++--- components/ElementToggle/index.scss | 2 +- components/ElementToggle/index.tsx | 42 +- components/ExtraSummons/index.tsx | 38 +- components/ExtraWeapons/index.tsx | 36 +- components/Fieldset/index.tsx | 30 +- components/FilterBar/index.tsx | 84 ++-- components/GridRep/index.scss | 4 +- components/GridRep/index.tsx | 140 +++--- components/GridRepCollection/index.tsx | 16 +- components/Header/index.tsx | 16 +- components/HeaderMenu/index.scss | 2 +- components/HeaderMenu/index.tsx | 86 ++-- components/JobDropdown/index.tsx | 78 ++-- components/JobSection/index.scss | 2 +- components/JobSection/index.tsx | 118 +++-- components/JobSkillItem/index.tsx | 62 +-- components/JobSkillResult/index.tsx | 36 +- components/JobSkillSearchFilterBar/index.tsx | 32 +- components/Layout/index.tsx | 12 +- components/LoginModal/index.tsx | 150 +++--- components/PartySegmentedControl/index.tsx | 74 +-- components/SearchFilter/index.tsx | 24 +- .../SearchFilterCheckboxItem/index.scss | 2 +- components/SearchFilterCheckboxItem/index.tsx | 24 +- components/SearchModal/index.tsx | 286 ++++++------ components/Segment/index.tsx | 20 +- components/SegmentedControl/index.tsx | 14 +- components/SignupModal/index.tsx | 224 ++++----- components/SummonGrid/index.tsx | 176 ++++--- components/SummonHovercard/index.tsx | 74 ++- components/SummonResult/index.tsx | 30 +- components/SummonSearchFilterBar/index.tsx | 84 ++-- components/SummonUnit/index.tsx | 118 +++-- components/TextFieldset/index.scss | 2 +- components/TextFieldset/index.tsx | 24 +- components/ToggleSwitch/index.tsx | 18 +- components/TopHeader/index.tsx | 128 +++--- components/UncapIndicator/index.tsx | 90 ++-- components/UncapStar/index.scss | 20 +- components/UncapStar/index.tsx | 30 +- components/WeaponGrid/index.tsx | 163 ++++--- components/WeaponHovercard/index.tsx | 174 ++++--- components/WeaponKeyDropdown/index.tsx | 110 ++--- components/WeaponLabelIcon/index.scss | 68 +-- components/WeaponLabelIcon/index.tsx | 18 +- components/WeaponModal/index.tsx | 174 ++++--- components/WeaponResult/index.tsx | 106 +++-- components/WeaponSearchFilterBar/index.tsx | 154 +++---- components/WeaponUnit/index.tsx | 100 ++-- pages/[username].tsx | 228 ++++----- pages/_app.tsx | 22 +- pages/new/index.tsx | 66 +-- pages/saved.tsx | 262 +++++------ pages/teams.tsx | 262 +++++------ types/AccountCookie.d.ts | 6 +- types/AxSkill.d.ts | 18 +- types/Character.d.ts | 62 +-- types/CheckedState.d.ts | 4 +- types/ElementState.d.ts | 16 +- types/GridArray.d.ts | 2 +- types/GridCharacter.d.ts | 8 +- types/GridSummon.d.ts | 12 +- types/GridWeapon.d.ts | 16 +- types/Job.d.ts | 24 +- types/JobSkill.d.ts | 26 +- types/OnClickEvent.d.ts | 2 +- types/Party.d.ts | 42 +- types/ProficiencyState.d.ts | 22 +- types/Raid.d.ts | 18 +- types/RarityState.d.ts | 6 +- types/SimpleAxSkill.d.ts | 4 +- types/Summon.d.ts | 46 +- types/TeamElement.d.ts | 8 +- types/User.d.ts | 16 +- types/UserCookie.d.ts | 8 +- types/Weapon.d.ts | 54 +-- types/WeaponKey.d.ts | 18 +- types/WeaponSeries.d.ts | 50 +- types/declarations.d.ts | 4 +- types/index.d.ts | 16 +- utils/Element.tsx | 36 +- utils/accountState.tsx | 24 +- utils/appState.tsx | 84 ++-- utils/axData.tsx | 434 +++++++++--------- utils/emptyStates.tsx | 8 +- utils/jobGroups.tsx | 54 +-- utils/pictureData.tsx | 318 ++++++------- utils/raidGroups.tsx | 90 ++-- utils/skillGroups.tsx | 58 +-- utils/stateValues.tsx | 90 ++-- utils/timeAgo.tsx | 28 +- utils/useDidMountEffect.tsx | 14 +- 106 files changed, 3690 insertions(+), 3731 deletions(-) diff --git a/.prettierrc b/.prettierrc index 4b4dbac5..2a6e6ac0 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,6 +1,5 @@ { - "editor.formatOnSave": true, - "prettier.semi": false, + "semi": false, "tabWidth": 2, "singleQuote": true } diff --git a/components/AboutModal/index.tsx b/components/AboutModal/index.tsx index d6025c73..001b42d7 100644 --- a/components/AboutModal/index.tsx +++ b/components/AboutModal/index.tsx @@ -1,18 +1,18 @@ -import React from "react"; -import { useTranslation } from "next-i18next"; -import * as Dialog from "@radix-ui/react-dialog"; +import React from 'react' +import { useTranslation } from 'next-i18next' +import * as Dialog from '@radix-ui/react-dialog' -import CrossIcon from "~public/icons/Cross.svg"; -import "./index.scss"; +import CrossIcon from '~public/icons/Cross.svg' +import './index.scss' const AboutModal = () => { - const { t } = useTranslation("common"); + const { t } = useTranslation('common') return (
  • - {t("modals.about.title")} + {t('modals.about.title')}
    • @@ -22,7 +22,7 @@ const AboutModal = () => { >
    - {t("menu.about")} + {t('menu.about')} @@ -33,7 +33,7 @@ const AboutModal = () => {
    - Granblue.team is a tool to save and share team compositions for{" "} + Granblue.team is a tool to save and share team compositions for{' '} Granblue Fantasy. @@ -49,10 +49,10 @@ const AboutModal = () => {
    Credits - Granblue.team was built by{" "} + Granblue.team was built by{' '} @jedmund with a lot of - help from{" "} - @lalalalinna and{" "} + help from{' '} + @lalalalinna and{' '} @tarngerine.
    @@ -67,7 +67,7 @@ const AboutModal = () => { - ); -}; + ) +} -export default AboutModal; +export default AboutModal diff --git a/components/AccountModal/index.scss b/components/AccountModal/index.scss index ed8a60ed..55e8df49 100644 --- a/components/AccountModal/index.scss +++ b/components/AccountModal/index.scss @@ -22,7 +22,7 @@ box-shadow: 0 0 0 2px $grey-10; } - &[data-state="checked"] { + &[data-state='checked'] { background: $grey-10; } } @@ -40,7 +40,7 @@ cursor: pointer; } - &[data-state="checked"] { + &[data-state='checked'] { background: $grey-100; transform: translateX(21px); } @@ -75,7 +75,7 @@ gap: $unit * 2; select { - background: no-repeat url("/icons/ArrowDark.svg"), $grey-90; + background: no-repeat url('/icons/ArrowDark.svg'), $grey-90; background-position-y: center; background-position-x: 95%; margin: 0; diff --git a/components/AccountModal/index.tsx b/components/AccountModal/index.tsx index 2c509398..8bcfe875 100644 --- a/components/AccountModal/index.tsx +++ b/components/AccountModal/index.tsx @@ -1,35 +1,33 @@ -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 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 { account } = useSnapshot(accountState) - const router = useRouter(); - const { t } = useTranslation("common"); + const router = useRouter() + const { t } = useTranslation('common') const locale = - router.locale && ["en", "ja"].includes(router.locale) - ? router.locale - : "en"; + router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en' // Cookies - const cookie = getCookie("account"); + const cookie = getCookie('account') - const headers = {}; + const headers = {} // cookies.account != null // ? { // headers: { @@ -39,17 +37,17 @@ const AccountModal = () => { // : {} // State - const [open, setOpen] = useState(false); - const [picture, setPicture] = useState(""); - const [language, setLanguage] = useState(""); - const [gender, setGender] = useState(0); - const [privateProfile, setPrivateProfile] = useState(false); + const [open, setOpen] = useState(false) + const [picture, setPicture] = useState('') + const [language, setLanguage] = useState('') + const [gender, setGender] = useState(0) + const [privateProfile, setPrivateProfile] = useState(false) // Refs - const pictureSelect = React.createRef(); - const languageSelect = React.createRef(); - const genderSelect = React.createRef(); - const privateSelect = React.createRef(); + const pictureSelect = React.createRef() + const languageSelect = React.createRef() + const genderSelect = React.createRef() + const privateSelect = React.createRef() // useEffect(() => { // if (cookies.user) setPicture(cookies.user.picture) @@ -64,27 +62,27 @@ const AccountModal = () => { - ); - }); + ) + }) function handlePictureChange(event: React.ChangeEvent) { - if (pictureSelect.current) setPicture(pictureSelect.current.value); + if (pictureSelect.current) setPicture(pictureSelect.current.value) } function handleLanguageChange(event: React.ChangeEvent) { - if (languageSelect.current) setLanguage(languageSelect.current.value); + if (languageSelect.current) setLanguage(languageSelect.current.value) } function handleGenderChange(event: React.ChangeEvent) { - if (genderSelect.current) setGender(parseInt(genderSelect.current.value)); + if (genderSelect.current) setGender(parseInt(genderSelect.current.value)) } function handlePrivateChange(checked: boolean) { - setPrivateProfile(checked); + setPrivateProfile(checked) } function update(event: React.FormEvent) { - event.preventDefault(); + event.preventDefault() const object = { user: { @@ -94,7 +92,7 @@ const AccountModal = () => { gender: gender, private: privateProfile, }, - }; + } // api.endpoints.users // .update(cookies.account.user_id, object, headers) @@ -131,14 +129,14 @@ const AccountModal = () => { } function openChange(open: boolean) { - setOpen(open); + setOpen(open) } return (
  • - {t("menu.settings")} + {t('menu.settings')}
    • @@ -149,7 +147,7 @@ const AccountModal = () => {
    - {t("modals.settings.title")} + {t('modals.settings.title')} @{account.user?.username} @@ -165,7 +163,7 @@ const AccountModal = () => {
    - +
    {
    - +
    - +
    - +

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

    @@ -245,13 +243,13 @@ const AccountModal = () => {
    - + - ); -}; + ) +} -export default AccountModal; +export default AccountModal diff --git a/components/Alert/index.tsx b/components/Alert/index.tsx index 8fa96014..7caa9469 100644 --- a/components/Alert/index.tsx +++ b/components/Alert/index.tsx @@ -1,19 +1,19 @@ -import React from "react"; -import * as AlertDialog from "@radix-ui/react-alert-dialog"; +import React from 'react' +import * as AlertDialog from '@radix-ui/react-alert-dialog' -import "./index.scss"; -import Button from "~components/Button"; -import { ButtonType } from "~utils/enums"; +import './index.scss' +import Button from '~components/Button' +import { ButtonType } from '~utils/enums' // Props interface Props { - open: boolean; - title?: string; - message: string; - primaryAction?: () => void; - primaryActionText?: string; - cancelAction: () => void; - cancelActionText: string; + open: boolean + title?: string + message: string + primaryAction?: () => void + primaryActionText?: string + cancelAction: () => void + cancelActionText: string } const Alert = (props: Props) => { @@ -23,7 +23,7 @@ const Alert = (props: Props) => {
    - {props.title ? Error : ""} + {props.title ? Error : ''} {props.message} @@ -38,14 +38,14 @@ const Alert = (props: Props) => { {props.primaryActionText} ) : ( - "" + '' )}
    - ); -}; + ) +} -export default Alert; +export default Alert diff --git a/components/AxSelect/index.tsx b/components/AxSelect/index.tsx index ff427e55..44da8fed 100644 --- a/components/AxSelect/index.tsx +++ b/components/AxSelect/index.tsx @@ -1,82 +1,80 @@ -import React, { useEffect, useState } from "react"; -import { useRouter } from "next/router"; -import { useTranslation } from "next-i18next"; +import React, { useEffect, useState } from 'react' +import { useRouter } from 'next/router' +import { useTranslation } from 'next-i18next' -import classNames from "classnames"; +import classNames from 'classnames' -import { axData } from "~utils/axData"; +import { axData } from '~utils/axData' -import "./index.scss"; +import './index.scss' interface ErrorMap { - [index: string]: string; - axValue1: string; - axValue2: string; + [index: string]: string + axValue1: string + axValue2: string } interface Props { - axType: number; - currentSkills?: SimpleAxSkill[]; - sendValidity: (isValid: boolean) => void; + axType: number + currentSkills?: SimpleAxSkill[] + sendValidity: (isValid: boolean) => void sendValues: ( primaryAxModifier: number, primaryAxValue: number, secondaryAxModifier: number, secondaryAxValue: number - ) => void; + ) => void } const AXSelect = (props: Props) => { - const router = useRouter(); + const router = useRouter() const locale = - router.locale && ["en", "ja"].includes(router.locale) - ? router.locale - : "en"; - const { t } = useTranslation("common"); + router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en' + const { t } = useTranslation('common') // Set up form states and error handling const [errors, setErrors] = useState({ - axValue1: "", - axValue2: "", - }); + axValue1: '', + axValue2: '', + }) const primaryErrorClasses = classNames({ errors: true, visible: errors.axValue1.length > 0, - }); + }) const secondaryErrorClasses = classNames({ errors: true, visible: errors.axValue2.length > 0, - }); + }) // Refs - const primaryAxModifierSelect = React.createRef(); - const primaryAxValueInput = React.createRef(); - const secondaryAxModifierSelect = React.createRef(); - const secondaryAxValueInput = React.createRef(); + const primaryAxModifierSelect = React.createRef() + const primaryAxValueInput = React.createRef() + const secondaryAxModifierSelect = React.createRef() + const secondaryAxValueInput = React.createRef() // States - const [primaryAxModifier, setPrimaryAxModifier] = useState(-1); - const [secondaryAxModifier, setSecondaryAxModifier] = useState(-1); - const [primaryAxValue, setPrimaryAxValue] = useState(0.0); - const [secondaryAxValue, setSecondaryAxValue] = useState(0.0); + const [primaryAxModifier, setPrimaryAxModifier] = useState(-1) + const [secondaryAxModifier, setSecondaryAxModifier] = useState(-1) + const [primaryAxValue, setPrimaryAxValue] = useState(0.0) + const [secondaryAxValue, setSecondaryAxValue] = useState(0.0) useEffect(() => { if (props.currentSkills && props.currentSkills[0]) { if (props.currentSkills[0].modifier != null) - setPrimaryAxModifier(props.currentSkills[0].modifier); + setPrimaryAxModifier(props.currentSkills[0].modifier) - setPrimaryAxValue(props.currentSkills[0].strength); + setPrimaryAxValue(props.currentSkills[0].strength) } if (props.currentSkills && props.currentSkills[1]) { if (props.currentSkills[1].modifier != null) - setSecondaryAxModifier(props.currentSkills[1].modifier); + setSecondaryAxModifier(props.currentSkills[1].modifier) - setSecondaryAxValue(props.currentSkills[1].strength); + setSecondaryAxValue(props.currentSkills[1].strength) } - }, [props.currentSkills]); + }, [props.currentSkills]) useEffect(() => { props.sendValues( @@ -84,201 +82,198 @@ const AXSelect = (props: Props) => { primaryAxValue, secondaryAxModifier, secondaryAxValue - ); + ) }, [ props, primaryAxModifier, primaryAxValue, secondaryAxModifier, secondaryAxValue, - ]); + ]) useEffect(() => { props.sendValidity( - primaryAxValue > 0 && errors.axValue1 === "" && errors.axValue2 === "" - ); - }, [props, primaryAxValue, errors]); + primaryAxValue > 0 && errors.axValue1 === '' && errors.axValue2 === '' + ) + }, [props, primaryAxValue, errors]) // Classes const secondarySetClasses = classNames({ AXSet: true, hidden: primaryAxModifier < 0, - }); + }) function generateOptions(modifierSet: number) { - const axOptions = axData[props.axType - 1]; + const axOptions = axData[props.axType - 1] - let axOptionElements: React.ReactNode[] = []; + let axOptionElements: React.ReactNode[] = [] if (modifierSet == 0) { axOptionElements = axOptions.map((ax, i) => { return ( - ); - }); + ) + }) } else { // If we are loading data from the server, state doesn't set before render, // so our defaultValue is undefined. - let modifier = -1; - if (primaryAxModifier >= 0) modifier = primaryAxModifier; - else if (props.currentSkills) modifier = props.currentSkills[0].modifier; + let modifier = -1 + if (primaryAxModifier >= 0) modifier = primaryAxModifier + else if (props.currentSkills) modifier = props.currentSkills[0].modifier if (modifier >= 0 && axOptions[modifier]) { - const primarySkill = axOptions[modifier]; + const primarySkill = axOptions[modifier] if (primarySkill.secondary) { - const secondaryAxOptions = primarySkill.secondary; + const secondaryAxOptions = primarySkill.secondary axOptionElements = secondaryAxOptions.map((ax, i) => { return ( - ); - }); + ) + }) } } } axOptionElements?.unshift( - ); - return axOptionElements; + ) + return axOptionElements } function handleSelectChange(event: React.ChangeEvent) { - const value = parseInt(event.target.value); + const value = parseInt(event.target.value) if (primaryAxModifierSelect.current == event.target) { - setPrimaryAxModifier(value); + setPrimaryAxModifier(value) if ( primaryAxValueInput.current && secondaryAxModifierSelect.current && secondaryAxValueInput.current ) { - setupInput( - axData[props.axType - 1][value], - primaryAxValueInput.current - ); + setupInput(axData[props.axType - 1][value], primaryAxValueInput.current) - secondaryAxModifierSelect.current.value = "-1"; - secondaryAxValueInput.current.value = ""; + secondaryAxModifierSelect.current.value = '-1' + secondaryAxValueInput.current.value = '' } } else { - setSecondaryAxModifier(value); + setSecondaryAxModifier(value) - const primaryAxSkill = axData[props.axType - 1][primaryAxModifier]; + const primaryAxSkill = axData[props.axType - 1][primaryAxModifier] const currentAxSkill = primaryAxSkill.secondary ? primaryAxSkill.secondary.find((skill) => skill.id == value) - : undefined; + : undefined if (secondaryAxValueInput.current) - setupInput(currentAxSkill, secondaryAxValueInput.current); + setupInput(currentAxSkill, secondaryAxValueInput.current) } } function handleInputChange(event: React.ChangeEvent) { - const value = parseFloat(event.target.value); - let newErrors = { ...errors }; + const value = parseFloat(event.target.value) + let newErrors = { ...errors } if (primaryAxValueInput.current == event.target) { - if (handlePrimaryErrors(value)) setPrimaryAxValue(value); + if (handlePrimaryErrors(value)) setPrimaryAxValue(value) } else { - if (handleSecondaryErrors(value)) setSecondaryAxValue(value); + if (handleSecondaryErrors(value)) setSecondaryAxValue(value) } } function handlePrimaryErrors(value: number) { - const primaryAxSkill = axData[props.axType - 1][primaryAxModifier]; - let newErrors = { ...errors }; + const primaryAxSkill = axData[props.axType - 1][primaryAxModifier] + let newErrors = { ...errors } if (value < primaryAxSkill.minValue) { - newErrors.axValue1 = t("ax.errors.value_too_low", { + newErrors.axValue1 = t('ax.errors.value_too_low', { name: primaryAxSkill.name[locale], minValue: primaryAxSkill.minValue, - suffix: primaryAxSkill.suffix ? primaryAxSkill.suffix : "", - }); + suffix: primaryAxSkill.suffix ? primaryAxSkill.suffix : '', + }) } else if (value > primaryAxSkill.maxValue) { - newErrors.axValue1 = t("ax.errors.value_too_high", { + newErrors.axValue1 = t('ax.errors.value_too_high', { name: primaryAxSkill.name[locale], maxValue: primaryAxSkill.minValue, - suffix: primaryAxSkill.suffix ? primaryAxSkill.suffix : "", - }); + suffix: primaryAxSkill.suffix ? primaryAxSkill.suffix : '', + }) } else if (!value || value <= 0) { - newErrors.axValue1 = t("ax.errors.value_empty", { + newErrors.axValue1 = t('ax.errors.value_empty', { name: primaryAxSkill.name[locale], - }); + }) } else { - newErrors.axValue1 = ""; + newErrors.axValue1 = '' } - setErrors(newErrors); + setErrors(newErrors) - return newErrors.axValue1.length === 0; + return newErrors.axValue1.length === 0 } function handleSecondaryErrors(value: number) { - const primaryAxSkill = axData[props.axType - 1][primaryAxModifier]; - let newErrors = { ...errors }; + const primaryAxSkill = axData[props.axType - 1][primaryAxModifier] + let newErrors = { ...errors } if (primaryAxSkill.secondary) { const secondaryAxSkill = primaryAxSkill.secondary.find( (skill) => skill.id == secondaryAxModifier - ); + ) if (secondaryAxSkill) { if (value < secondaryAxSkill.minValue) { - newErrors.axValue2 = t("ax.errors.value_too_low", { + newErrors.axValue2 = t('ax.errors.value_too_low', { name: secondaryAxSkill.name[locale], minValue: secondaryAxSkill.minValue, - suffix: secondaryAxSkill.suffix ? secondaryAxSkill.suffix : "", - }); + suffix: secondaryAxSkill.suffix ? secondaryAxSkill.suffix : '', + }) } else if (value > secondaryAxSkill.maxValue) { - newErrors.axValue2 = t("ax.errors.value_too_high", { + newErrors.axValue2 = t('ax.errors.value_too_high', { name: secondaryAxSkill.name[locale], maxValue: secondaryAxSkill.minValue, - suffix: secondaryAxSkill.suffix ? secondaryAxSkill.suffix : "", - }); + suffix: secondaryAxSkill.suffix ? secondaryAxSkill.suffix : '', + }) } else if (!secondaryAxSkill.suffix && value % 1 !== 0) { - newErrors.axValue2 = t("ax.errors.value_not_whole", { + newErrors.axValue2 = t('ax.errors.value_not_whole', { name: secondaryAxSkill.name[locale], - }); + }) } else if (primaryAxValue <= 0) { - newErrors.axValue1 = t("ax.errors.value_empty", { + newErrors.axValue1 = t('ax.errors.value_empty', { name: primaryAxSkill.name[locale], - }); + }) } else { - newErrors.axValue2 = ""; + newErrors.axValue2 = '' } } } - setErrors(newErrors); + setErrors(newErrors) - return newErrors.axValue2.length === 0; + return newErrors.axValue2.length === 0 } function setupInput(ax: AxSkill | undefined, element: HTMLInputElement) { if (ax) { - const rangeString = `${ax.minValue}~${ax.maxValue}${ax.suffix || ""}`; + const rangeString = `${ax.minValue}~${ax.maxValue}${ax.suffix || ''}` - element.disabled = false; - element.placeholder = rangeString; - element.min = `${ax.minValue}`; - element.max = `${ax.maxValue}`; - element.step = ax.suffix ? "0.5" : "1"; + element.disabled = false + element.placeholder = rangeString + element.min = `${ax.minValue}` + element.max = `${ax.maxValue}` + element.step = ax.suffix ? '0.5' : '1' } else { if (primaryAxValueInput.current && secondaryAxValueInput.current) { if (primaryAxValueInput.current == element) { - primaryAxValueInput.current.disabled = true; - primaryAxValueInput.current.placeholder = ""; + primaryAxValueInput.current.disabled = true + primaryAxValueInput.current.placeholder = '' } - secondaryAxValueInput.current.disabled = true; - secondaryAxValueInput.current.placeholder = ""; + secondaryAxValueInput.current.disabled = true + secondaryAxValueInput.current.placeholder = '' } } } @@ -345,7 +340,7 @@ const AXSelect = (props: Props) => {

    {errors.axValue2}

    - ); -}; + ) +} -export default AXSelect; +export default AXSelect diff --git a/components/Button/index.tsx b/components/Button/index.tsx index b66129b6..64ab12c7 100644 --- a/components/Button/index.tsx +++ b/components/Button/index.tsx @@ -1,143 +1,143 @@ -import React, { useEffect, useState } from "react"; -import classNames from "classnames"; +import React, { useEffect, useState } from 'react' +import classNames from 'classnames' -import Link from "next/link"; +import Link from 'next/link' -import AddIcon from "~public/icons/Add.svg"; -import CheckIcon from "~public/icons/LargeCheck.svg"; -import CrossIcon from "~public/icons/Cross.svg"; -import EditIcon from "~public/icons/Edit.svg"; -import LinkIcon from "~public/icons/Link.svg"; -import MenuIcon from "~public/icons/Menu.svg"; -import SaveIcon from "~public/icons/Save.svg"; -import SettingsIcon from "~public/icons/Settings.svg"; +import AddIcon from '~public/icons/Add.svg' +import CheckIcon from '~public/icons/LargeCheck.svg' +import CrossIcon from '~public/icons/Cross.svg' +import EditIcon from '~public/icons/Edit.svg' +import LinkIcon from '~public/icons/Link.svg' +import MenuIcon from '~public/icons/Menu.svg' +import SaveIcon from '~public/icons/Save.svg' +import SettingsIcon from '~public/icons/Settings.svg' -import "./index.scss"; +import './index.scss' -import { ButtonType } from "~utils/enums"; +import { ButtonType } from '~utils/enums' interface Props { - active?: boolean; - disabled?: boolean; - classes?: string[]; - icon?: string; - type?: ButtonType; - children?: React.ReactNode; - onClick?: (event: React.MouseEvent) => void; + active?: boolean + disabled?: boolean + classes?: string[] + icon?: string + type?: ButtonType + children?: React.ReactNode + onClick?: (event: React.MouseEvent) => void } const Button = (props: Props) => { // States - const [active, setActive] = useState(false); - const [disabled, setDisabled] = useState(false); - const [pressed, setPressed] = useState(false); - const [buttonType, setButtonType] = useState(ButtonType.Base); + const [active, setActive] = useState(false) + const [disabled, setDisabled] = useState(false) + const [pressed, setPressed] = useState(false) + const [buttonType, setButtonType] = useState(ButtonType.Base) const classes = classNames( { Button: true, Active: active, - "btn-pressed": pressed, - "btn-disabled": disabled, - save: props.icon === "save", + 'btn-pressed': pressed, + 'btn-disabled': disabled, + save: props.icon === 'save', destructive: props.type == ButtonType.Destructive, }, props.classes - ); + ) useEffect(() => { - if (props.active) setActive(props.active); - if (props.disabled) setDisabled(props.disabled); - if (props.type) setButtonType(props.type); - }, [props.active, props.disabled, props.type]); + if (props.active) setActive(props.active) + if (props.disabled) setDisabled(props.disabled) + if (props.type) setButtonType(props.type) + }, [props.active, props.disabled, props.type]) const addIcon = ( - ); + ) const menuIcon = ( - ); + ) const linkIcon = ( - ); + ) const checkIcon = ( - ); + ) const crossIcon = ( - ); + ) const editIcon = ( - ); + ) const saveIcon = ( - ); + ) const settingsIcon = ( - ); + ) function getIcon() { - let icon: React.ReactNode; + let icon: React.ReactNode switch (props.icon) { - case "new": - icon = addIcon; - break; - case "menu": - icon = menuIcon; - break; - case "link": - icon = linkIcon; - break; - case "check": - icon = checkIcon; - break; - case "cross": - icon = crossIcon; - break; - case "edit": - icon = editIcon; - break; - case "save": - icon = saveIcon; - break; - case "settings": - icon = settingsIcon; - break; + case 'new': + icon = addIcon + break + case 'menu': + icon = menuIcon + break + case 'link': + icon = linkIcon + break + case 'check': + icon = checkIcon + break + case 'cross': + icon = crossIcon + break + case 'edit': + icon = editIcon + break + case 'save': + icon = saveIcon + break + case 'settings': + icon = settingsIcon + break } - return icon; + return icon } function handleMouseDown() { - setPressed(true); + setPressed(true) } function handleMouseUp() { - setPressed(false); + setPressed(false) } return ( - ); -}; + ) +} -export default Button; +export default Button diff --git a/components/CharLimitedFieldset/index.tsx b/components/CharLimitedFieldset/index.tsx index 2c4ba006..cb822299 100644 --- a/components/CharLimitedFieldset/index.tsx +++ b/components/CharLimitedFieldset/index.tsx @@ -1,33 +1,33 @@ -import React, { useEffect, useState } from "react"; -import "./index.scss"; +import React, { useEffect, useState } from 'react' +import './index.scss' interface Props { - fieldName: string; - placeholder: string; - value?: string; - limit: number; - error: string; - onBlur?: (event: React.ChangeEvent) => void; - onChange?: (event: React.ChangeEvent) => void; + fieldName: string + placeholder: string + value?: string + limit: number + error: string + onBlur?: (event: React.ChangeEvent) => void + onChange?: (event: React.ChangeEvent) => void } const CharLimitedFieldset = React.forwardRef( function useFieldSet(props, ref) { - const fieldType = ["password", "confirm_password"].includes(props.fieldName) - ? "password" - : "text"; + const fieldType = ['password', 'confirm_password'].includes(props.fieldName) + ? 'password' + : 'text' - const [currentCount, setCurrentCount] = useState(0); + const [currentCount, setCurrentCount] = useState(0) useEffect(() => { setCurrentCount( props.value ? props.limit - props.value.length : props.limit - ); - }, [props.limit, props.value]); + ) + }, [props.limit, props.value]) function onChange(event: React.ChangeEvent) { - setCurrentCount(props.limit - event.currentTarget.value.length); - if (props.onChange) props.onChange(event); + setCurrentCount(props.limit - event.currentTarget.value.length) + if (props.onChange) props.onChange(event) } return ( @@ -39,7 +39,7 @@ const CharLimitedFieldset = React.forwardRef( type={fieldType} name={props.fieldName} placeholder={props.placeholder} - defaultValue={props.value || ""} + defaultValue={props.value || ''} onBlur={props.onBlur} onChange={onChange} maxLength={props.limit} @@ -50,8 +50,8 @@ const CharLimitedFieldset = React.forwardRef(
    {props.error.length > 0 &&

    {props.error}

    } - ); + ) } -); +) -export default CharLimitedFieldset; +export default CharLimitedFieldset diff --git a/components/CharacterConflictModal/index.tsx b/components/CharacterConflictModal/index.tsx index fe797a79..3d54fb32 100644 --- a/components/CharacterConflictModal/index.tsx +++ b/components/CharacterConflictModal/index.tsx @@ -1,70 +1,70 @@ -import React, { useEffect, useState } from "react"; -import { setCookie } from "cookies-next"; -import Router, { useRouter } from "next/router"; -import { useTranslation } from "react-i18next"; -import { AxiosResponse } from "axios"; +import React, { useEffect, 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 { appState } from "~utils/appState"; -import { accountState } from "~utils/accountState"; +import api from '~utils/api' +import { appState } from '~utils/appState' +import { accountState } from '~utils/accountState' -import Button from "~components/Button"; +import Button from '~components/Button' -import "./index.scss"; +import './index.scss' interface Props { - open: boolean; - incomingCharacter?: Character; - conflictingCharacters?: GridCharacter[]; - desiredPosition: number; - resolveConflict: () => void; - resetConflict: () => void; + open: boolean + incomingCharacter?: Character + conflictingCharacters?: GridCharacter[] + desiredPosition: number + resolveConflict: () => void + resetConflict: () => void } const CharacterConflictModal = (props: Props) => { - const { t } = useTranslation("common"); + const { t } = useTranslation('common') // States - const [open, setOpen] = useState(false); + const [open, setOpen] = useState(false) useEffect(() => { - setOpen(props.open); - }, [setOpen, props.open]); + setOpen(props.open) + }, [setOpen, props.open]) function imageUrl(character?: Character, uncap: number = 0) { // Change the image based on the uncap level - let suffix = "01"; - if (uncap == 6) suffix = "04"; - else if (uncap == 5) suffix = "03"; - else if (uncap > 2) suffix = "02"; + let suffix = '01' + if (uncap == 6) suffix = '04' + else if (uncap == 5) suffix = '03' + else if (uncap > 2) suffix = '02' // Special casing for Lyria (and Young Cat eventually) - if (character?.granblue_id === "3030182000") { - let element = 1; + if (character?.granblue_id === '3030182000') { + let element = 1 if ( appState.grid.weapons.mainWeapon && appState.grid.weapons.mainWeapon.element ) { - element = appState.grid.weapons.mainWeapon.element; + element = appState.grid.weapons.mainWeapon.element } else if (appState.party.element != 0) { - element = appState.party.element; + element = appState.party.element } - suffix = `${suffix}_0${element}`; + suffix = `${suffix}_0${element}` } - return `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/chara-square/${character?.granblue_id}_${suffix}.jpg`; + return `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/chara-square/${character?.granblue_id}_${suffix}.jpg` } function openChange(open: boolean) { - setOpen(open); + setOpen(open) } function close() { - setOpen(false); - props.resetConflict(); + setOpen(false) + props.resetConflict() } return ( @@ -107,7 +107,7 @@ const CharacterConflictModal = (props: Props) => {     - ); -}; + ) +} -export default CharacterConflictModal; +export default CharacterConflictModal diff --git a/components/CharacterGrid/index.tsx b/components/CharacterGrid/index.tsx index 59923024..9660cfe6 100644 --- a/components/CharacterGrid/index.tsx +++ b/components/CharacterGrid/index.tsx @@ -1,68 +1,68 @@ /* eslint-disable react-hooks/exhaustive-deps */ -import React, { useCallback, useEffect, useMemo, useState } from "react"; -import { getCookie } from "cookies-next"; -import { useSnapshot } from "valtio"; +import React, { useCallback, useEffect, useMemo, useState } from 'react' +import { getCookie } from 'cookies-next' +import { useSnapshot } from 'valtio' -import { AxiosResponse } from "axios"; -import debounce from "lodash.debounce"; +import { AxiosResponse } from 'axios' +import debounce from 'lodash.debounce' -import Alert from "~components/Alert"; -import JobSection from "~components/JobSection"; -import CharacterUnit from "~components/CharacterUnit"; -import CharacterConflictModal from "~components/CharacterConflictModal"; +import Alert from '~components/Alert' +import JobSection from '~components/JobSection' +import CharacterUnit from '~components/CharacterUnit' +import CharacterConflictModal from '~components/CharacterConflictModal' -import type { JobSkillObject, SearchableObject } from "~types"; +import type { JobSkillObject, SearchableObject } from '~types' -import api from "~utils/api"; -import { appState } from "~utils/appState"; +import api from '~utils/api' +import { appState } from '~utils/appState' -import "./index.scss"; +import './index.scss' // Props interface Props { - new: boolean; - characters?: GridCharacter[]; - createParty: () => Promise>; - pushHistory?: (path: string) => void; + new: boolean + characters?: GridCharacter[] + createParty: () => Promise> + pushHistory?: (path: string) => void } const CharacterGrid = (props: Props) => { // Constants - const numCharacters: number = 5; + const numCharacters: number = 5 // Cookies - const cookie = getCookie("account"); + const cookie = getCookie('account') const accountData: AccountCookie = cookie ? JSON.parse(cookie as string) - : null; + : null const headers = accountData ? { headers: { Authorization: `Bearer ${accountData.token}` } } - : {}; + : {} // Set up state for view management - const { party, grid } = useSnapshot(appState); - const [slug, setSlug] = useState(); - const [modalOpen, setModalOpen] = useState(false); + const { party, grid } = useSnapshot(appState) + const [slug, setSlug] = useState() + const [modalOpen, setModalOpen] = useState(false) // Set up state for conflict management - const [incoming, setIncoming] = useState(); - const [conflicts, setConflicts] = useState([]); - const [position, setPosition] = useState(0); + const [incoming, setIncoming] = useState() + const [conflicts, setConflicts] = useState([]) + const [position, setPosition] = useState(0) // Set up state for data - const [job, setJob] = useState(); + const [job, setJob] = useState() const [jobSkills, setJobSkills] = useState({ 0: undefined, 1: undefined, 2: undefined, 3: undefined, - }); - const [errorMessage, setErrorMessage] = useState(""); + }) + const [errorMessage, setErrorMessage] = useState('') // Create a temporary state to store previous character uncap values const [previousUncapValues, setPreviousUncapValues] = useState<{ - [key: number]: number | undefined; - }>({}); + [key: number]: number | undefined + }>({}) // Set the editable flag only on first load useEffect(() => { @@ -71,58 +71,58 @@ const CharacterGrid = (props: Props) => { (accountData && party.user && accountData.userId === party.user.id) || props.new ) - appState.party.editable = true; - else appState.party.editable = false; - }, [props.new, accountData, party]); + appState.party.editable = true + else appState.party.editable = false + }, [props.new, accountData, party]) useEffect(() => { - setJob(appState.party.job); - setJobSkills(appState.party.jobSkills); - }, [appState]); + setJob(appState.party.job) + setJobSkills(appState.party.jobSkills) + }, [appState]) // Initialize an array of current uncap values for each characters useEffect(() => { - let initialPreviousUncapValues: { [key: number]: number } = {}; + let initialPreviousUncapValues: { [key: number]: number } = {} Object.values(appState.grid.characters).map((o) => { - o ? (initialPreviousUncapValues[o.position] = o.uncap_level) : 0; - }); - setPreviousUncapValues(initialPreviousUncapValues); - }, [appState.grid.characters]); + o ? (initialPreviousUncapValues[o.position] = o.uncap_level) : 0 + }) + setPreviousUncapValues(initialPreviousUncapValues) + }, [appState.grid.characters]) // Methods: Adding an object from search function receiveCharacterFromSearch( object: SearchableObject, position: number ) { - const character = object as Character; + const character = object as Character if (!party.id) { props.createParty().then((response) => { - const party = response.data.party; - appState.party.id = party.id; - setSlug(party.shortcode); + const party = response.data.party + appState.party.id = party.id + setSlug(party.shortcode) - if (props.pushHistory) props.pushHistory(`/p/${party.shortcode}`); + if (props.pushHistory) props.pushHistory(`/p/${party.shortcode}`) saveCharacter(party.id, character, position) .then((response) => storeGridCharacter(response.data.grid_character)) - .catch((error) => console.error(error)); - }); + .catch((error) => console.error(error)) + }) } else { if (party.editable) saveCharacter(party.id, character, position) .then((response) => handleCharacterResponse(response.data)) - .catch((error) => console.error(error)); + .catch((error) => console.error(error)) } } async function handleCharacterResponse(data: any) { - if (data.hasOwnProperty("conflicts")) { - setIncoming(data.incoming); - setConflicts(data.conflicts); - setPosition(data.position); - setModalOpen(true); + if (data.hasOwnProperty('conflicts')) { + setIncoming(data.incoming) + setConflicts(data.conflicts) + setPosition(data.position) + setModalOpen(true) } else { - storeGridCharacter(data.grid_character); + storeGridCharacter(data.grid_character) } } @@ -141,11 +141,11 @@ const CharacterGrid = (props: Props) => { }, }, headers - ); + ) } function storeGridCharacter(gridCharacter: GridCharacter) { - appState.grid.characters[gridCharacter.position] = gridCharacter; + appState.grid.characters[gridCharacter.position] = gridCharacter } async function resolveConflict() { @@ -159,128 +159,128 @@ const CharacterGrid = (props: Props) => { }) .then((response) => { // Store new character in state - storeGridCharacter(response.data.grid_character); + storeGridCharacter(response.data.grid_character) // Remove conflicting characters from state conflicts.forEach( (c) => (appState.grid.characters[c.position] = undefined) - ); + ) // Reset conflict - resetConflict(); + resetConflict() // Close modal - setModalOpen(false); - }); + setModalOpen(false) + }) } } function resetConflict() { - setPosition(-1); - setConflicts([]); - setIncoming(undefined); + setPosition(-1) + setConflicts([]) + setIncoming(undefined) } // Methods: Saving job and job skills const saveJob = function (job: Job) { const payload = { party: { - job_id: job ? job.id : "", + job_id: job ? job.id : '', }, ...headers, - }; + } if (party.id && appState.party.editable) { api.updateJob({ partyId: party.id, params: payload }).then((response) => { - const newParty = response.data.party; + const newParty = response.data.party - setJob(newParty.job); - appState.party.job = newParty.job; + setJob(newParty.job) + appState.party.job = newParty.job - setJobSkills(newParty.job_skills); - appState.party.jobSkills = newParty.job_skills; - }); + setJobSkills(newParty.job_skills) + appState.party.jobSkills = newParty.job_skills + }) } - }; + } const saveJobSkill = function (skill: JobSkill, position: number) { if (party.id && appState.party.editable) { - const positionedKey = `skill${position}_id`; + const positionedKey = `skill${position}_id` let skillObject: { - [key: string]: string | undefined; - skill0_id?: string; - skill1_id?: string; - skill2_id?: string; - skill3_id?: string; - } = {}; + [key: string]: string | undefined + skill0_id?: string + skill1_id?: string + skill2_id?: string + skill3_id?: string + } = {} const payload = { party: skillObject, ...headers, - }; + } - skillObject[positionedKey] = skill.id; + skillObject[positionedKey] = skill.id api .updateJobSkills({ partyId: party.id, params: payload }) .then((response) => { // Update the current skills - const newSkills = response.data.party.job_skills; - setJobSkills(newSkills); - appState.party.jobSkills = newSkills; + const newSkills = response.data.party.job_skills + setJobSkills(newSkills) + appState.party.jobSkills = newSkills }) .catch((error) => { - const data = error.response.data; - if (data.code == "too_many_skills_of_type") { + const data = error.response.data + if (data.code == 'too_many_skills_of_type') { const message = `You can only add up to 2 ${ - data.skill_type === "emp" + data.skill_type === 'emp' ? data.skill_type.toUpperCase() : data.skill_type - } skills to your party at once.`; - setErrorMessage(message); + } skills to your party at once.` + setErrorMessage(message) } - console.log(error.response.data); - }); + console.log(error.response.data) + }) } - }; + } // Methods: Helpers function characterUncapLevel(character: Character) { - let uncapLevel; + let uncapLevel if (character.special) { - uncapLevel = 3; - if (character.uncap.ulb) uncapLevel = 5; - else if (character.uncap.flb) uncapLevel = 4; + uncapLevel = 3 + if (character.uncap.ulb) uncapLevel = 5 + else if (character.uncap.flb) uncapLevel = 4 } else { - uncapLevel = 4; - if (character.uncap.ulb) uncapLevel = 6; - else if (character.uncap.flb) uncapLevel = 5; + uncapLevel = 4 + if (character.uncap.ulb) uncapLevel = 6 + else if (character.uncap.flb) uncapLevel = 5 } - return uncapLevel; + return uncapLevel } // Methods: Updating uncap level // Note: Saves, but debouncing is not working properly async function saveUncap(id: string, position: number, uncapLevel: number) { - storePreviousUncapValue(position); + storePreviousUncapValue(position) try { if (uncapLevel != previousUncapValues[position]) - await api.updateUncap("character", id, uncapLevel).then((response) => { - storeGridCharacter(response.data.grid_character); - }); + await api.updateUncap('character', id, uncapLevel).then((response) => { + storeGridCharacter(response.data.grid_character) + }) } catch (error) { - console.error(error); + console.error(error) // Revert optimistic UI - updateUncapLevel(position, previousUncapValues[position]); + updateUncapLevel(position, previousUncapValues[position]) // Remove optimistic key - let newPreviousValues = { ...previousUncapValues }; - delete newPreviousValues[position]; - setPreviousUncapValues(newPreviousValues); + let newPreviousValues = { ...previousUncapValues } + delete newPreviousValues[position] + setPreviousUncapValues(newPreviousValues) } } @@ -289,50 +289,50 @@ const CharacterGrid = (props: Props) => { position: number, uncapLevel: number ) { - memoizeAction(id, position, uncapLevel); + memoizeAction(id, position, uncapLevel) // Optimistically update UI - updateUncapLevel(position, uncapLevel); + updateUncapLevel(position, uncapLevel) } const memoizeAction = useCallback( (id: string, position: number, uncapLevel: number) => { - debouncedAction(id, position, uncapLevel); + debouncedAction(id, position, uncapLevel) }, [props, previousUncapValues] - ); + ) const debouncedAction = useMemo( () => debounce((id, position, number) => { - saveUncap(id, position, number); + saveUncap(id, position, number) }, 500), [props, saveUncap] - ); + ) const updateUncapLevel = ( position: number, uncapLevel: number | undefined ) => { - const character = appState.grid.characters[position]; + const character = appState.grid.characters[position] if (character && uncapLevel) { - character.uncap_level = uncapLevel; - appState.grid.characters[position] = character; + character.uncap_level = uncapLevel + appState.grid.characters[position] = character } - }; + } function storePreviousUncapValue(position: number) { // Save the current value in case of an unexpected result - let newPreviousValues = { ...previousUncapValues }; + let newPreviousValues = { ...previousUncapValues } if (grid.characters[position]) { - newPreviousValues[position] = grid.characters[position]?.uncap_level; - setPreviousUncapValues(newPreviousValues); + newPreviousValues[position] = grid.characters[position]?.uncap_level + setPreviousUncapValues(newPreviousValues) } } function cancelAlert() { - setErrorMessage(""); + setErrorMessage('') } // Render: JSX components @@ -342,7 +342,7 @@ const CharacterGrid = (props: Props) => { open={errorMessage.length > 0} message={errorMessage} cancelAction={cancelAlert} - cancelActionText={"Got it"} + cancelActionText={'Got it'} />
    { updateUncap={initiateUncapUpdate} /> - ); + ) })}
    - ); -}; + ) +} -export default CharacterGrid; +export default CharacterGrid diff --git a/components/CharacterHovercard/index.tsx b/components/CharacterHovercard/index.tsx index 5007e2ae..fcbbfa95 100644 --- a/components/CharacterHovercard/index.tsx +++ b/components/CharacterHovercard/index.tsx @@ -1,71 +1,69 @@ -import React from "react"; -import { useRouter } from "next/router"; -import { useTranslation } from "next-i18next"; +import React from 'react' +import { useRouter } from 'next/router' +import { useTranslation } from 'next-i18next' -import * as HoverCard from "@radix-ui/react-hover-card"; +import * as HoverCard from '@radix-ui/react-hover-card' -import WeaponLabelIcon from "~components/WeaponLabelIcon"; -import UncapIndicator from "~components/UncapIndicator"; +import WeaponLabelIcon from '~components/WeaponLabelIcon' +import UncapIndicator from '~components/UncapIndicator' -import "./index.scss"; +import './index.scss' interface Props { - gridCharacter: GridCharacter; - children: React.ReactNode; + gridCharacter: GridCharacter + children: React.ReactNode } interface KeyNames { [key: string]: { - en: string; - jp: string; - }; + en: string + jp: string + } } const CharacterHovercard = (props: Props) => { - const router = useRouter(); - const { t } = useTranslation("common"); + const router = useRouter() + const { t } = useTranslation('common') const locale = - router.locale && ["en", "ja"].includes(router.locale) - ? router.locale - : "en"; + router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en' - const Element = ["null", "wind", "fire", "water", "earth", "dark", "light"]; + const Element = ['null', 'wind', 'fire', 'water', 'earth', 'dark', 'light'] const Proficiency = [ - "none", - "sword", - "dagger", - "axe", - "spear", - "bow", - "staff", - "fist", - "harp", - "gun", - "katana", - ]; + 'none', + 'sword', + 'dagger', + 'axe', + 'spear', + 'bow', + 'staff', + 'fist', + 'harp', + 'gun', + 'katana', + ] - const tintElement = Element[props.gridCharacter.object.element]; + const tintElement = Element[props.gridCharacter.object.element] const wikiUrl = `https://gbf.wiki/${props.gridCharacter.object.name.en.replaceAll( - " ", - "_" - )}`; + ' ', + '_' + )}` function characterImage() { - let imgSrc = ""; + let imgSrc = '' if (props.gridCharacter) { - const character = props.gridCharacter.object; + const character = props.gridCharacter.object // Change the image based on the uncap level - let suffix = "01"; - if (props.gridCharacter.uncap_level == 6) suffix = "04"; - else if (props.gridCharacter.uncap_level == 5) suffix = "03"; - else if (props.gridCharacter.uncap_level > 2) suffix = "02"; + let suffix = '01' + if (props.gridCharacter.uncap_level == 6) suffix = '04' + else if (props.gridCharacter.uncap_level == 5) suffix = '03' + else if (props.gridCharacter.uncap_level > 2) suffix = '02' - imgSrc = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/chara-grid/${character.granblue_id}_${suffix}.jpg`; + imgSrc = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/chara-grid/${character.granblue_id}_${suffix}.jpg` } - return imgSrc; + return imgSrc } return ( @@ -101,7 +99,7 @@ const CharacterHovercard = (props: Props) => { } /> ) : ( - "" + '' )} { - {t("buttons.wiki")} + {t('buttons.wiki')} - ); -}; + ) +} -export default CharacterHovercard; +export default CharacterHovercard diff --git a/components/CharacterResult/index.tsx b/components/CharacterResult/index.tsx index 0cf6190e..7b09409b 100644 --- a/components/CharacterResult/index.tsx +++ b/components/CharacterResult/index.tsx @@ -1,36 +1,34 @@ -import React from "react"; -import { useRouter } from "next/router"; +import React from 'react' +import { useRouter } from 'next/router' -import UncapIndicator from "~components/UncapIndicator"; -import WeaponLabelIcon from "~components/WeaponLabelIcon"; +import UncapIndicator from '~components/UncapIndicator' +import WeaponLabelIcon from '~components/WeaponLabelIcon' -import "./index.scss"; +import './index.scss' interface Props { - data: Character; - onClick: () => void; + data: Character + onClick: () => void } -const Element = ["null", "wind", "fire", "water", "earth", "dark", "light"]; +const Element = ['null', 'wind', 'fire', 'water', 'earth', 'dark', 'light'] const CharacterResult = (props: Props) => { - const router = useRouter(); + const router = useRouter() const locale = - router.locale && ["en", "ja"].includes(router.locale) - ? router.locale - : "en"; + router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en' - const character = props.data; + const character = props.data const characterUrl = () => { - let url = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/chara-grid/${character.granblue_id}_01.jpg`; + let url = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/chara-grid/${character.granblue_id}_01.jpg` - if (character.granblue_id === "3030182000") { - url = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/chara-grid/${character.granblue_id}_01_01.jpg`; + if (character.granblue_id === '3030182000') { + url = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/chara-grid/${character.granblue_id}_01_01.jpg` } - return url; - }; + return url + } return (
  • @@ -48,7 +46,7 @@ const CharacterResult = (props: Props) => {
    • - ); -}; + ) +} -export default CharacterResult; +export default CharacterResult diff --git a/components/CharacterSearchFilterBar/index.tsx b/components/CharacterSearchFilterBar/index.tsx index 5f795b5f..3ab0e1a4 100644 --- a/components/CharacterSearchFilterBar/index.tsx +++ b/components/CharacterSearchFilterBar/index.tsx @@ -1,134 +1,134 @@ -import React, { useEffect, useState } from "react"; -import { useTranslation } from "next-i18next"; +import React, { useEffect, useState } from 'react' +import { useTranslation } from 'next-i18next' -import cloneDeep from "lodash.clonedeep"; +import cloneDeep from 'lodash.clonedeep' -import * as DropdownMenu from "@radix-ui/react-dropdown-menu"; +import * as DropdownMenu from '@radix-ui/react-dropdown-menu' -import SearchFilter from "~components/SearchFilter"; -import SearchFilterCheckboxItem from "~components/SearchFilterCheckboxItem"; +import SearchFilter from '~components/SearchFilter' +import SearchFilterCheckboxItem from '~components/SearchFilterCheckboxItem' -import "./index.scss"; +import './index.scss' import { emptyElementState, emptyProficiencyState, emptyRarityState, -} from "~utils/emptyStates"; -import { elements, proficiencies, rarities } from "~utils/stateValues"; +} from '~utils/emptyStates' +import { elements, proficiencies, rarities } from '~utils/stateValues' interface Props { - sendFilters: (filters: { [key: string]: number[] }) => void; + sendFilters: (filters: { [key: string]: number[] }) => void } const CharacterSearchFilterBar = (props: Props) => { - const { t } = useTranslation("common"); + const { t } = useTranslation('common') - const [rarityMenu, setRarityMenu] = useState(false); - const [elementMenu, setElementMenu] = useState(false); - const [proficiency1Menu, setProficiency1Menu] = useState(false); - const [proficiency2Menu, setProficiency2Menu] = useState(false); + const [rarityMenu, setRarityMenu] = useState(false) + const [elementMenu, setElementMenu] = useState(false) + const [proficiency1Menu, setProficiency1Menu] = useState(false) + const [proficiency2Menu, setProficiency2Menu] = useState(false) - const [rarityState, setRarityState] = useState(emptyRarityState); + const [rarityState, setRarityState] = useState(emptyRarityState) const [elementState, setElementState] = - useState(emptyElementState); + useState(emptyElementState) const [proficiency1State, setProficiency1State] = useState( emptyProficiencyState - ); + ) const [proficiency2State, setProficiency2State] = useState( emptyProficiencyState - ); + ) function rarityMenuOpened(open: boolean) { if (open) { - setRarityMenu(true); - setElementMenu(false); - setProficiency1Menu(false); - setProficiency2Menu(false); - } else setRarityMenu(false); + setRarityMenu(true) + setElementMenu(false) + setProficiency1Menu(false) + setProficiency2Menu(false) + } else setRarityMenu(false) } function elementMenuOpened(open: boolean) { if (open) { - setRarityMenu(false); - setElementMenu(true); - setProficiency1Menu(false); - setProficiency2Menu(false); - } else setElementMenu(false); + setRarityMenu(false) + setElementMenu(true) + setProficiency1Menu(false) + setProficiency2Menu(false) + } else setElementMenu(false) } function proficiency1MenuOpened(open: boolean) { if (open) { - setRarityMenu(false); - setElementMenu(false); - setProficiency1Menu(true); - setProficiency2Menu(false); - } else setProficiency1Menu(false); + setRarityMenu(false) + setElementMenu(false) + setProficiency1Menu(true) + setProficiency2Menu(false) + } else setProficiency1Menu(false) } function proficiency2MenuOpened(open: boolean) { if (open) { - setRarityMenu(false); - setElementMenu(false); - setProficiency1Menu(false); - setProficiency2Menu(true); - } else setProficiency2Menu(false); + setRarityMenu(false) + setElementMenu(false) + setProficiency1Menu(false) + setProficiency2Menu(true) + } else setProficiency2Menu(false) } function handleRarityChange(checked: boolean, key: string) { - let newRarityState = cloneDeep(rarityState); - newRarityState[key].checked = checked; - setRarityState(newRarityState); + let newRarityState = cloneDeep(rarityState) + newRarityState[key].checked = checked + setRarityState(newRarityState) } function handleElementChange(checked: boolean, key: string) { - let newElementState = cloneDeep(elementState); - newElementState[key].checked = checked; - setElementState(newElementState); + let newElementState = cloneDeep(elementState) + newElementState[key].checked = checked + setElementState(newElementState) } function handleProficiency1Change(checked: boolean, key: string) { - let newProficiencyState = cloneDeep(proficiency1State); - newProficiencyState[key].checked = checked; - setProficiency1State(newProficiencyState); + let newProficiencyState = cloneDeep(proficiency1State) + newProficiencyState[key].checked = checked + setProficiency1State(newProficiencyState) } function handleProficiency2Change(checked: boolean, key: string) { - let newProficiencyState = cloneDeep(proficiency2State); - newProficiencyState[key].checked = checked; - setProficiency2State(newProficiencyState); + let newProficiencyState = cloneDeep(proficiency2State) + newProficiencyState[key].checked = checked + setProficiency2State(newProficiencyState) } function sendFilters() { const checkedRarityFilters = Object.values(rarityState) .filter((x) => x.checked) - .map((x, i) => x.id); + .map((x, i) => x.id) const checkedElementFilters = Object.values(elementState) .filter((x) => x.checked) - .map((x, i) => x.id); + .map((x, i) => x.id) const checkedProficiency1Filters = Object.values(proficiency1State) .filter((x) => x.checked) - .map((x, i) => x.id); + .map((x, i) => x.id) const checkedProficiency2Filters = Object.values(proficiency2State) .filter((x) => x.checked) - .map((x, i) => x.id); + .map((x, i) => x.id) const filters = { rarity: checkedRarityFilters, element: checkedElementFilters, proficiency1: checkedProficiency1Filters, proficiency2: checkedProficiency2Filters, - }; + } - props.sendFilters(filters); + props.sendFilters(filters) } useEffect(() => { - sendFilters(); - }, [rarityState, elementState, proficiency1State, proficiency2State]); + sendFilters() + }, [rarityState, elementState, proficiency1State, proficiency2State]) function renderProficiencyFilter(proficiency: 1 | 2) { const onCheckedChange = - proficiency == 1 ? handleProficiency1Change : handleProficiency2Change; + proficiency == 1 ? handleProficiency1Change : handleProficiency2Change const numSelected = proficiency == 1 ? Object.values(proficiency1State) @@ -136,20 +136,20 @@ const CharacterSearchFilterBar = (props: Props) => { .filter(Boolean).length : Object.values(proficiency2State) .map((x) => x.checked) - .filter(Boolean).length; - const open = proficiency == 1 ? proficiency1Menu : proficiency2Menu; + .filter(Boolean).length + const open = proficiency == 1 ? proficiency1Menu : proficiency2Menu const onOpenChange = - proficiency == 1 ? proficiency1MenuOpened : proficiency2MenuOpened; + proficiency == 1 ? proficiency1MenuOpened : proficiency2MenuOpened return ( {`${t( - "filters.labels.proficiency" + 'filters.labels.proficiency' )} ${proficiency}`}
    @@ -157,7 +157,7 @@ const CharacterSearchFilterBar = (props: Props) => { const checked = proficiency == 1 ? proficiency1State[proficiencies[i]].checked - : proficiency2State[proficiencies[i]].checked; + : proficiency2State[proficiencies[i]].checked return ( { > {t(`proficiencies.${proficiencies[i]}`)} - ); + ) })} @@ -180,7 +180,7 @@ const CharacterSearchFilterBar = (props: Props) => { ].checked : proficiency2State[ proficiencies[i + proficiencies.length / 2] - ].checked; + ].checked return ( { }` )} - ); + ) })}
    - ); + ) } return (
    x.checked) @@ -216,7 +216,7 @@ const CharacterSearchFilterBar = (props: Props) => { onOpenChange={rarityMenuOpened} > - {t("filters.labels.rarity")} + {t('filters.labels.rarity')} {Array.from(Array(rarities.length)).map((x, i) => { return ( @@ -228,12 +228,12 @@ const CharacterSearchFilterBar = (props: Props) => { > {t(`rarities.${rarities[i]}`)} - ); + ) })} x.checked) @@ -243,7 +243,7 @@ const CharacterSearchFilterBar = (props: Props) => { onOpenChange={elementMenuOpened} > - {t("filters.labels.element")} + {t('filters.labels.element')} {Array.from(Array(elements.length)).map((x, i) => { return ( @@ -255,14 +255,14 @@ const CharacterSearchFilterBar = (props: Props) => { > {t(`elements.${elements[i]}`)} - ); + ) })} {renderProficiencyFilter(1)} {renderProficiencyFilter(2)}
    - ); -}; + ) +} -export default CharacterSearchFilterBar; +export default CharacterSearchFilterBar diff --git a/components/CharacterUnit/index.tsx b/components/CharacterUnit/index.tsx index de02955a..7dbce073 100644 --- a/components/CharacterUnit/index.tsx +++ b/components/CharacterUnit/index.tsx @@ -1,87 +1,85 @@ -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 { appState } from "~utils/appState"; +import { appState } from '~utils/appState' -import CharacterHovercard from "~components/CharacterHovercard"; -import SearchModal from "~components/SearchModal"; -import UncapIndicator from "~components/UncapIndicator"; -import PlusIcon from "~public/icons/Add.svg"; +import CharacterHovercard from '~components/CharacterHovercard' +import SearchModal from '~components/SearchModal' +import UncapIndicator from '~components/UncapIndicator' +import PlusIcon from '~public/icons/Add.svg' -import type { SearchableObject } from "~types"; +import type { SearchableObject } from '~types' -import "./index.scss"; +import './index.scss' interface Props { - gridCharacter?: GridCharacter; - position: number; - editable: boolean; - updateObject: (object: SearchableObject, position: number) => void; - updateUncap: (id: string, position: number, uncap: number) => void; + gridCharacter?: GridCharacter + position: number + editable: boolean + updateObject: (object: SearchableObject, position: number) => void + updateUncap: (id: string, position: number, uncap: number) => void } const CharacterUnit = (props: Props) => { - const { t } = useTranslation("common"); + const { t } = useTranslation('common') - const { party, grid } = useSnapshot(appState); + const { party, grid } = useSnapshot(appState) - const router = useRouter(); + const router = useRouter() const locale = - router.locale && ["en", "ja"].includes(router.locale) - ? router.locale - : "en"; + router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en' - const [imageUrl, setImageUrl] = useState(""); + const [imageUrl, setImageUrl] = useState('') const classes = classnames({ CharacterUnit: true, editable: props.editable, filled: props.gridCharacter !== undefined, - }); + }) - const gridCharacter = props.gridCharacter; - const character = gridCharacter?.object; + const gridCharacter = props.gridCharacter + const character = gridCharacter?.object useEffect(() => { - generateImageUrl(); - }); + generateImageUrl() + }) function generateImageUrl() { - let imgSrc = ""; + let imgSrc = '' if (props.gridCharacter) { - const character = props.gridCharacter.object!; + const character = props.gridCharacter.object! // Change the image based on the uncap level - let suffix = "01"; - if (props.gridCharacter.uncap_level == 6) suffix = "04"; - else if (props.gridCharacter.uncap_level == 5) suffix = "03"; - else if (props.gridCharacter.uncap_level > 2) suffix = "02"; + let suffix = '01' + if (props.gridCharacter.uncap_level == 6) suffix = '04' + else if (props.gridCharacter.uncap_level == 5) suffix = '03' + else if (props.gridCharacter.uncap_level > 2) suffix = '02' // Special casing for Lyria (and Young Cat eventually) - if (props.gridCharacter.object.granblue_id === "3030182000") { - let element = 1; + if (props.gridCharacter.object.granblue_id === '3030182000') { + let element = 1 if (grid.weapons.mainWeapon && grid.weapons.mainWeapon.element) { - element = grid.weapons.mainWeapon.element; + element = grid.weapons.mainWeapon.element } else if (party.element != 0) { - element = party.element; + element = party.element } - suffix = `${suffix}_0${element}`; + suffix = `${suffix}_0${element}` } - imgSrc = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/chara-main/${character.granblue_id}_${suffix}.jpg`; + imgSrc = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/chara-main/${character.granblue_id}_${suffix}.jpg` } - setImageUrl(imgSrc); + setImageUrl(imgSrc) } function passUncapData(uncap: number) { if (props.gridCharacter) - props.updateUncap(props.gridCharacter.id, props.position, uncap); + props.updateUncap(props.gridCharacter.id, props.position, uncap) } const image = ( @@ -92,21 +90,21 @@ const CharacterUnit = (props: Props) => { ) : ( - "" + '' )} - ); + ) const editableImage = ( {image} - ); + ) const unitContent = (
    @@ -121,19 +119,19 @@ const CharacterUnit = (props: Props) => { special={character.special} /> ) : ( - "" + '' )}

    {character?.name[locale]}

    - ); + ) const withHovercard = ( {unitContent} - ); + ) - return gridCharacter && !props.editable ? withHovercard : unitContent; -}; + return gridCharacter && !props.editable ? withHovercard : unitContent +} -export default CharacterUnit; +export default CharacterUnit diff --git a/components/ElementToggle/index.scss b/components/ElementToggle/index.scss index 87e3d720..11517faa 100644 --- a/components/ElementToggle/index.scss +++ b/components/ElementToggle/index.scss @@ -27,7 +27,7 @@ } &:hover, - &[data-state="on"] { + &[data-state='on'] { background: $grey-80; color: $grey-10; diff --git a/components/ElementToggle/index.tsx b/components/ElementToggle/index.tsx index 104dd698..0748b66f 100644 --- a/components/ElementToggle/index.tsx +++ b/components/ElementToggle/index.tsx @@ -1,23 +1,21 @@ -import React from "react"; -import { useRouter } from "next/router"; -import { useTranslation } from "next-i18next"; +import React from 'react' +import { useRouter } from 'next/router' +import { useTranslation } from 'next-i18next' -import * as ToggleGroup from "@radix-ui/react-toggle-group"; +import * as ToggleGroup from '@radix-ui/react-toggle-group' -import "./index.scss"; +import './index.scss' interface Props { - currentElement: number; - sendValue: (value: string) => void; + currentElement: number + sendValue: (value: string) => void } const ElementToggle = (props: Props) => { - const router = useRouter(); - const { t } = useTranslation("common"); + const router = useRouter() + const { t } = useTranslation('common') const locale = - router.locale && ["en", "ja"].includes(router.locale) - ? router.locale - : "en"; + router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en' return ( { value="0" aria-label="null" > - {t("elements.null")} + {t('elements.null')} - {t("elements.wind")} + {t('elements.wind')} - {t("elements.fire")} + {t('elements.fire')} - {t("elements.water")} + {t('elements.water')} - {t("elements.earth")} + {t('elements.earth')} - {t("elements.dark")} + {t('elements.dark')} - {t("elements.light")} + {t('elements.light')} - ); -}; + ) +} -export default ElementToggle; +export default ElementToggle diff --git a/components/ExtraSummons/index.tsx b/components/ExtraSummons/index.tsx index 4f0d5890..30a32352 100644 --- a/components/ExtraSummons/index.tsx +++ b/components/ExtraSummons/index.tsx @@ -1,28 +1,28 @@ -import React from "react"; -import { useTranslation } from "next-i18next"; -import SummonUnit from "~components/SummonUnit"; -import { SearchableObject } from "~types"; -import "./index.scss"; +import React from 'react' +import { useTranslation } from 'next-i18next' +import SummonUnit from '~components/SummonUnit' +import { SearchableObject } from '~types' +import './index.scss' // Props interface Props { - grid: GridArray; - editable: boolean; - exists: boolean; - found?: boolean; - offset: number; - updateObject: (object: SearchableObject, position: number) => void; - updateUncap: (id: string, position: number, uncap: number) => void; + grid: GridArray + editable: boolean + exists: boolean + found?: boolean + offset: number + updateObject: (object: SearchableObject, position: number) => void + updateUncap: (id: string, position: number, uncap: number) => void } const ExtraSummons = (props: Props) => { - const numSummons: number = 2; + const numSummons: number = 2 - const { t } = useTranslation("common"); + const { t } = useTranslation('common') return (
    - {t("summons.subaura")} + {t('summons.subaura')}
      {Array.from(Array(numSummons)).map((x, i) => { return ( @@ -36,11 +36,11 @@ const ExtraSummons = (props: Props) => { updateUncap={props.updateUncap} /> - ); + ) })}
    - ); -}; + ) +} -export default ExtraSummons; +export default ExtraSummons diff --git a/components/ExtraWeapons/index.tsx b/components/ExtraWeapons/index.tsx index 9ddbb9bd..67794e68 100644 --- a/components/ExtraWeapons/index.tsx +++ b/components/ExtraWeapons/index.tsx @@ -1,28 +1,28 @@ -import React from "react"; -import { useTranslation } from "next-i18next"; -import WeaponUnit from "~components/WeaponUnit"; +import React from 'react' +import { useTranslation } from 'next-i18next' +import WeaponUnit from '~components/WeaponUnit' -import type { SearchableObject } from "~types"; +import type { SearchableObject } from '~types' -import "./index.scss"; +import './index.scss' // Props interface Props { - grid: GridArray; - editable: boolean; - found?: boolean; - offset: number; - updateObject: (object: SearchableObject, position: number) => void; - updateUncap: (id: string, position: number, uncap: number) => void; + grid: GridArray + editable: boolean + found?: boolean + offset: number + updateObject: (object: SearchableObject, position: number) => void + updateUncap: (id: string, position: number, uncap: number) => void } const ExtraWeapons = (props: Props) => { - const numWeapons: number = 3; - const { t } = useTranslation("common"); + const numWeapons: number = 3 + const { t } = useTranslation('common') return (
    - {t("extra_weapons")} + {t('extra_weapons')}
      {Array.from(Array(numWeapons)).map((x, i) => { return ( @@ -36,11 +36,11 @@ const ExtraWeapons = (props: Props) => { updateUncap={props.updateUncap} /> - ); + ) })}
    - ); -}; + ) +} -export default ExtraWeapons; +export default ExtraWeapons diff --git a/components/Fieldset/index.tsx b/components/Fieldset/index.tsx index 25ffeadc..7ba41adc 100644 --- a/components/Fieldset/index.tsx +++ b/components/Fieldset/index.tsx @@ -1,22 +1,22 @@ -import React from "react"; -import "./index.scss"; +import React from 'react' +import './index.scss' interface Props { - fieldName: string; - placeholder: string; - value?: string; - error: string; - onBlur?: (event: React.ChangeEvent) => void; - onChange?: (event: React.ChangeEvent) => void; + fieldName: string + placeholder: string + value?: string + error: string + onBlur?: (event: React.ChangeEvent) => void + onChange?: (event: React.ChangeEvent) => void } const Fieldset = React.forwardRef(function fieldSet( props, ref ) { - const fieldType = ["password", "confirm_password"].includes(props.fieldName) - ? "password" - : "text"; + const fieldType = ['password', 'confirm_password'].includes(props.fieldName) + ? 'password' + : 'text' return (
    @@ -26,7 +26,7 @@ const Fieldset = React.forwardRef(function fieldSet( type={fieldType} name={props.fieldName} placeholder={props.placeholder} - defaultValue={props.value || ""} + defaultValue={props.value || ''} onBlur={props.onBlur} onChange={props.onChange} ref={ref} @@ -34,7 +34,7 @@ const Fieldset = React.forwardRef(function fieldSet( /> {props.error.length > 0 &&

    {props.error}

    }
    - ); -}); + ) +}) -export default Fieldset; +export default Fieldset diff --git a/components/FilterBar/index.tsx b/components/FilterBar/index.tsx index 0642234d..82f8813c 100644 --- a/components/FilterBar/index.tsx +++ b/components/FilterBar/index.tsx @@ -1,59 +1,59 @@ -import React from "react"; -import { useTranslation } from "next-i18next"; -import classNames from "classnames"; +import React from 'react' +import { useTranslation } from 'next-i18next' +import classNames from 'classnames' -import RaidDropdown from "~components/RaidDropdown"; +import RaidDropdown from '~components/RaidDropdown' -import "./index.scss"; +import './index.scss' interface Props { - children: React.ReactNode; - scrolled: boolean; - element?: number; - raidSlug?: string; - recency?: number; + children: React.ReactNode + scrolled: boolean + element?: number + raidSlug?: string + recency?: number onFilter: ({ element, raidSlug, recency, }: { - element?: number; - raidSlug?: string; - recency?: number; - }) => void; + element?: number + raidSlug?: string + recency?: number + }) => void } const FilterBar = (props: Props) => { // Set up translation - const { t } = useTranslation("common"); + const { t } = useTranslation('common') // Set up refs for filter dropdowns - const elementSelect = React.createRef(); - const raidSelect = React.createRef(); - const recencySelect = React.createRef(); + const elementSelect = React.createRef() + const raidSelect = React.createRef() + const recencySelect = React.createRef() // Set up classes object for showing shadow on scroll const classes = classNames({ FilterBar: true, shadow: props.scrolled, - }); + }) function elementSelectChanged() { const elementValue = elementSelect.current ? parseInt(elementSelect.current.value) - : -1; - props.onFilter({ element: elementValue }); + : -1 + props.onFilter({ element: elementValue }) } function recencySelectChanged() { const recencyValue = recencySelect.current ? parseInt(recencySelect.current.value) - : -1; - props.onFilter({ recency: recencyValue }); + : -1 + props.onFilter({ recency: recencyValue }) } function raidSelectChanged(slug?: string) { - props.onFilter({ raidSlug: slug }); + props.onFilter({ raidSlug: slug }) } return ( @@ -65,28 +65,28 @@ const FilterBar = (props: Props) => { value={props.element} > { /> - ); -}; + ) +} -export default FilterBar; +export default FilterBar diff --git a/components/GridRep/index.scss b/components/GridRep/index.scss index 7fdfc87d..436182c9 100644 --- a/components/GridRep/index.scss +++ b/components/GridRep/index.scss @@ -50,8 +50,8 @@ width: 70px; } - .grid_mainhand img[src*="jpg"], - .grid_weapon img[src*="jpg"] { + .grid_mainhand img[src*='jpg'], + .grid_weapon img[src*='jpg'] { border-radius: 4px; width: 100%; height: 100%; diff --git a/components/GridRep/index.tsx b/components/GridRep/index.tsx index 2febb9ea..eee3729c 100644 --- a/components/GridRep/index.tsx +++ b/components/GridRep/index.tsx @@ -1,122 +1,120 @@ -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; - id: string; - name: string; - raid: Raid; - grid: GridWeapon[]; - user?: User; - favorited: boolean; - createdAt: Date; - displayUser?: boolean | false; - onClick: (shortcode: string) => void; - onSave?: (partyId: string, favorited: boolean) => void; + shortcode: string + id: string + name: string + raid: Raid + grid: GridWeapon[] + user?: User + favorited: boolean + createdAt: Date + displayUser?: boolean | false + onClick: (shortcode: string) => void + onSave?: (partyId: string, favorited: boolean) => void } const GridRep = (props: Props) => { - const numWeapons: number = 9; + const numWeapons: number = 9 - const { account } = useSnapshot(accountState); + const { account } = useSnapshot(accountState) - const router = useRouter(); - const { t } = useTranslation("common"); + const router = useRouter() + const { t } = useTranslation('common') const locale = - router.locale && ["en", "ja"].includes(router.locale) - ? router.locale - : "en"; + router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en' - const [mainhand, setMainhand] = useState(); - const [weapons, setWeapons] = useState>({}); - const [grid, setGrid] = useState>({}); + const [mainhand, setMainhand] = useState() + const [weapons, setWeapons] = useState>({}) + const [grid, setGrid] = useState>({}) const titleClass = classNames({ empty: !props.name, - }); + }) const raidClass = classNames({ raid: true, empty: !props.raid, - }); + }) const userClass = classNames({ user: true, empty: !props.user, - }); + }) useEffect(() => { - const newWeapons = Array(numWeapons); - const gridWeapons = Array(numWeapons); + const newWeapons = Array(numWeapons) + const gridWeapons = 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; - gridWeapons[value.position] = value; + newWeapons[value.position] = value.object + gridWeapons[value.position] = value } } - setWeapons(newWeapons); - setGrid(gridWeapons); - }, [props.grid]); + setWeapons(newWeapons) + setGrid(gridWeapons) + }, [props.grid]) function navigate() { - props.onClick(props.shortcode); + props.onClick(props.shortcode) } function generateMainhandImage() { - let url = ""; + let url = '' if (mainhand) { if (mainhand.element == 0 && props.grid[0].element) { - url = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-main/${mainhand.granblue_id}_${props.grid[0].element}.jpg`; + url = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-main/${mainhand.granblue_id}_${props.grid[0].element}.jpg` } else { - url = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-main/${mainhand.granblue_id}.jpg`; + url = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-main/${mainhand.granblue_id}.jpg` } } return mainhand && props.grid[0] ? ( {mainhand.name[locale]} ) : ( - "" - ); + '' + ) } function generateGridImage(position: number) { - let url = ""; + let url = '' - const weapon = weapons[position]; - const gridWeapon = grid[position]; + const weapon = weapons[position] + const gridWeapon = grid[position] if (weapon && gridWeapon) { if (weapon.element == 0 && gridWeapon.element) { - url = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-grid/${weapon.granblue_id}_${gridWeapon.element}.jpg`; + url = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-grid/${weapon.granblue_id}_${gridWeapon.element}.jpg` } else { - url = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-grid/${weapon.granblue_id}.jpg`; + url = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-grid/${weapon.granblue_id}.jpg` } } return weapons[position] ? ( {weapons[position]?.name[locale]} ) : ( - "" - ); + '' + ) } function sendSaveData() { - if (props.onSave) props.onSave(props.id, props.favorited); + if (props.onSave) props.onSave(props.id, props.favorited) } const userImage = () => { @@ -129,35 +127,35 @@ const GridRep = (props: Props) => { /profile/${props.user.picture.picture}@2x.png 2x`} src={`/profile/${props.user.picture.picture}.png`} /> - ); - } else return
    ; - }; + ) + } else return
    + } const details = (

    - {props.name ? props.name : t("no_title")} + {props.name ? props.name : t('no_title')}

    - {props.raid ? props.raid.name[locale] : t("no_raid")} + {props.raid ? props.raid.name[locale] : t('no_raid')}
    - ); + ) const detailsWithUsername = (

    - {props.name ? props.name : t("no_title")} + {props.name ? props.name : t('no_title')}

    - {props.raid ? props.raid.name[locale] : t("no_raid")} + {props.raid ? props.raid.name[locale] : t('no_raid')}
    {account.authorized && @@ -170,20 +168,20 @@ const GridRep = (props: Props) => { onClick={sendSaveData} /> ) : ( - "" + '' )}
    {userImage()} - {props.user ? props.user.username : t("no_user")} + {props.user ? props.user.username : t('no_user')}
    - ); + ) return (
    @@ -200,12 +198,12 @@ const GridRep = (props: Props) => { > {generateGridImage(i)} - ); + ) })}
    - ); -}; + ) +} -export default GridRep; +export default GridRep diff --git a/components/GridRepCollection/index.tsx b/components/GridRepCollection/index.tsx index 93332c6a..6780cb79 100644 --- a/components/GridRepCollection/index.tsx +++ b/components/GridRepCollection/index.tsx @@ -1,18 +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 { - children: React.ReactNode; + children: React.ReactNode } const GridRepCollection = (props: Props) => { const classes = classNames({ GridRepCollection: true, - }); + }) - return
    {props.children}
    ; -}; + return
    {props.children}
    +} -export default GridRepCollection; +export default GridRepCollection diff --git a/components/Header/index.tsx b/components/Header/index.tsx index 29663b38..16ec9bea 100644 --- a/components/Header/index.tsx +++ b/components/Header/index.tsx @@ -1,11 +1,11 @@ -import React from "react"; +import React from 'react' -import "./index.scss"; +import './index.scss' interface Props { - position: "top" | "bottom"; - left: JSX.Element; - right: JSX.Element; + position: 'top' | 'bottom' + left: JSX.Element + right: JSX.Element } const Header = (props: Props) => { @@ -15,7 +15,7 @@ const Header = (props: Props) => {
    - ); -}; + ) +} -export default Header; +export default Header diff --git a/components/HeaderMenu/index.scss b/components/HeaderMenu/index.scss index d961f2a9..538936e6 100644 --- a/components/HeaderMenu/index.scss +++ b/components/HeaderMenu/index.scss @@ -67,7 +67,7 @@ cursor: pointer; } - &[data-state="checked"] { + &[data-state='checked'] { background: $grey-100; transform: translateX(17px); } diff --git a/components/HeaderMenu/index.tsx b/components/HeaderMenu/index.tsx index 1bf30e2d..71f89534 100644 --- a/components/HeaderMenu/index.tsx +++ b/components/HeaderMenu/index.tsx @@ -1,51 +1,51 @@ -import React, { useEffect, useState } from "react"; -import { getCookie, setCookie } from "cookies-next"; -import { useRouter } from "next/router"; -import { useTranslation } from "next-i18next"; +import React, { useEffect, useState } from 'react' +import { getCookie, setCookie } from 'cookies-next' +import { useRouter } from 'next/router' +import { useTranslation } from 'next-i18next' -import Link from "next/link"; -import * as Switch from "@radix-ui/react-switch"; +import Link from 'next/link' +import * as Switch from '@radix-ui/react-switch' -import AboutModal from "~components/AboutModal"; -import AccountModal from "~components/AccountModal"; -import LoginModal from "~components/LoginModal"; -import SignupModal from "~components/SignupModal"; +import AboutModal from '~components/AboutModal' +import AccountModal from '~components/AccountModal' +import LoginModal from '~components/LoginModal' +import SignupModal from '~components/SignupModal' -import "./index.scss"; +import './index.scss' interface Props { - authenticated: boolean; - username?: string; - logout?: () => void; + authenticated: boolean + username?: string + logout?: () => void } const HeaderMenu = (props: Props) => { - const router = useRouter(); - const { t } = useTranslation("common"); + const router = useRouter() + const { t } = useTranslation('common') - const accountCookie = getCookie("account"); + const accountCookie = getCookie('account') const accountData: AccountCookie = accountCookie ? JSON.parse(accountCookie as string) - : null; + : null - const userCookie = getCookie("user"); + const userCookie = getCookie('user') const userData: UserCookie = userCookie ? JSON.parse(userCookie as string) - : null; + : null - const localeCookie = getCookie("NEXT_LOCALE"); + const localeCookie = getCookie('NEXT_LOCALE') - const [checked, setChecked] = useState(false); + const [checked, setChecked] = useState(false) useEffect(() => { - const locale = localeCookie; - setChecked(locale === "ja" ? true : false); - }, [localeCookie]); + const locale = localeCookie + setChecked(locale === 'ja' ? true : false) + }, [localeCookie]) function handleCheckedChange(value: boolean) { - const language = value ? "ja" : "en"; - setCookie("NEXT_LOCALE", language, { path: "/" }); - router.push(router.asPath, undefined, { locale: language }); + const language = value ? 'ja' : 'en' + setCookie('NEXT_LOCALE', language, { path: '/' }) + router.push(router.asPath, undefined, { locale: language }) } function authItems() { @@ -54,7 +54,7 @@ const HeaderMenu = (props: Props) => {
    • - +
      {accountData.username} {
    • - {t("menu.saved")} + {t('menu.saved')}
    • - {t("menu.teams")} + {t('menu.teams')}
    • - {t("menu.guides")} - {t("coming_soon")} + {t('menu.guides')} + {t('coming_soon')}
      • @@ -87,12 +87,12 @@ const HeaderMenu = (props: Props) => {
    • - {t("menu.logout")} + {t('menu.logout')}
    - ); + ) } function unauthItems() { @@ -100,7 +100,7 @@ const HeaderMenu = (props: Props) => {
    • - {t("menu.language")} + {t('menu.language')} {
    • - {t("menu.teams")} + {t('menu.teams')}
    • - {t("menu.guides")} - {t("coming_soon")} + {t('menu.guides')} + {t('coming_soon')}
      • @@ -132,10 +132,10 @@ const HeaderMenu = (props: Props) => {
    - ); + ) } - return props.authenticated ? authItems() : unauthItems(); -}; + return props.authenticated ? authItems() : unauthItems() +} -export default HeaderMenu; +export default HeaderMenu diff --git a/components/JobDropdown/index.tsx b/components/JobDropdown/index.tsx index b4a0989c..111b2950 100644 --- a/components/JobDropdown/index.tsx +++ b/components/JobDropdown/index.tsx @@ -1,69 +1,69 @@ -import React, { useEffect, useState } from "react"; -import { useRouter } from "next/router"; -import { useSnapshot } from "valtio"; +import React, { useEffect, useState } from 'react' +import { useRouter } from 'next/router' +import { useSnapshot } from 'valtio' -import { appState } from "~utils/appState"; -import { jobGroups } from "~utils/jobGroups"; +import { appState } from '~utils/appState' +import { jobGroups } from '~utils/jobGroups' -import "./index.scss"; +import './index.scss' // Props interface Props { - currentJob?: string; - onChange?: (job?: Job) => void; - onBlur?: (event: React.ChangeEvent) => void; + currentJob?: string + onChange?: (job?: Job) => void + onBlur?: (event: React.ChangeEvent) => void } -type GroupedJob = { [key: string]: Job[] }; +type GroupedJob = { [key: string]: Job[] } const JobDropdown = React.forwardRef( function useFieldSet(props, ref) { // Set up router for locale - const router = useRouter(); - const locale = router.locale || "en"; + const router = useRouter() + const locale = router.locale || 'en' // Create snapshot of app state - const { party } = useSnapshot(appState); + const { party } = useSnapshot(appState) // Set up local states for storing jobs - const [currentJob, setCurrentJob] = useState(); - const [jobs, setJobs] = useState(); - const [sortedJobs, setSortedJobs] = useState(); + const [currentJob, setCurrentJob] = useState() + const [jobs, setJobs] = useState() + const [sortedJobs, setSortedJobs] = useState() // Set current job from state on mount useEffect(() => { - setCurrentJob(party.job); - }, []); + setCurrentJob(party.job) + }, []) // Organize jobs into groups on mount useEffect(() => { const jobGroups = appState.jobs .map((job) => job.row) - .filter((value, index, self) => self.indexOf(value) === index); - let groupedJobs: GroupedJob = {}; + .filter((value, index, self) => self.indexOf(value) === index) + let groupedJobs: GroupedJob = {} jobGroups.forEach((group) => { - groupedJobs[group] = appState.jobs.filter((job) => job.row === group); - }); + groupedJobs[group] = appState.jobs.filter((job) => job.row === group) + }) - setJobs(appState.jobs); - setSortedJobs(groupedJobs); - }, [appState]); + setJobs(appState.jobs) + setSortedJobs(groupedJobs) + }, [appState]) // Set current job on mount useEffect(() => { if (jobs && props.currentJob) { - const job = appState.jobs.find((job) => job.id === props.currentJob); - setCurrentJob(job); + const job = appState.jobs.find((job) => job.id === props.currentJob) + setCurrentJob(job) } - }, [appState, props.currentJob]); + }, [appState, props.currentJob]) // Enable changing select value function handleChange(event: React.ChangeEvent) { if (jobs) { - const job = jobs.find((job) => job.id === event.target.value); - if (props.onChange) props.onChange(job); - setCurrentJob(job); + const job = jobs.find((job) => job.id === event.target.value) + if (props.onChange) props.onChange(job) + setCurrentJob(job) } } @@ -79,16 +79,16 @@ const JobDropdown = React.forwardRef( - ); - }); + ) + }) - const groupName = jobGroups.find((g) => g.slug === group)?.name[locale]; + const groupName = jobGroups.find((g) => g.slug === group)?.name[locale] return ( {options} - ); + ) } return ( @@ -104,10 +104,10 @@ const JobDropdown = React.forwardRef( {sortedJobs ? Object.keys(sortedJobs).map((x) => renderJobGroup(x)) - : ""} + : ''} - ); + ) } -); +) -export default JobDropdown; +export default JobDropdown diff --git a/components/JobSection/index.scss b/components/JobSection/index.scss index f6e20d20..2d9adc9a 100644 --- a/components/JobSection/index.scss +++ b/components/JobSection/index.scss @@ -31,7 +31,7 @@ $height: 249px; $width: 447px; - background: url("/images/background_a.jpg"); + background: url('/images/background_a.jpg'); background-size: 500px 281px; border-radius: $unit; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); diff --git a/components/JobSection/index.tsx b/components/JobSection/index.tsx index 3d0f61a0..10f04f27 100644 --- a/components/JobSection/index.tsx +++ b/components/JobSection/index.tsx @@ -1,101 +1,99 @@ -import React, { ForwardedRef, useEffect, useState } from "react"; -import { useRouter } from "next/router"; -import { useSnapshot } from "valtio"; -import { useTranslation } from "next-i18next"; +import React, { ForwardedRef, useEffect, useState } from 'react' +import { useRouter } from 'next/router' +import { useSnapshot } from 'valtio' +import { useTranslation } from 'next-i18next' -import JobDropdown from "~components/JobDropdown"; -import JobSkillItem from "~components/JobSkillItem"; -import SearchModal from "~components/SearchModal"; +import JobDropdown from '~components/JobDropdown' +import JobSkillItem from '~components/JobSkillItem' +import SearchModal from '~components/SearchModal' -import { appState } from "~utils/appState"; +import { appState } from '~utils/appState' -import type { JobSkillObject, SearchableObject } from "~types"; +import type { JobSkillObject, SearchableObject } from '~types' -import "./index.scss"; +import './index.scss' // Props interface Props { - job?: Job; - jobSkills: JobSkillObject; - editable: boolean; - saveJob: (job: Job) => void; - saveSkill: (skill: JobSkill, position: number) => void; + job?: Job + jobSkills: JobSkillObject + editable: boolean + saveJob: (job: Job) => void + saveSkill: (skill: JobSkill, position: number) => void } const JobSection = (props: Props) => { - const { party } = useSnapshot(appState); - const { t } = useTranslation("common"); + const { party } = useSnapshot(appState) + const { t } = useTranslation('common') - const router = useRouter(); + const router = useRouter() const locale = - router.locale && ["en", "ja"].includes(router.locale) - ? router.locale - : "en"; + router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en' - const [job, setJob] = useState(); - const [imageUrl, setImageUrl] = useState(""); - const [numSkills, setNumSkills] = useState(4); + const [job, setJob] = useState() + const [imageUrl, setImageUrl] = useState('') + const [numSkills, setNumSkills] = useState(4) const [skills, setSkills] = useState<{ [key: number]: JobSkill | undefined }>( [] - ); + ) - const selectRef = React.createRef(); + const selectRef = React.createRef() useEffect(() => { // Set current job based on ID if (props.job) { - setJob(props.job); + setJob(props.job) setSkills({ 0: props.jobSkills[0], 1: props.jobSkills[1], 2: props.jobSkills[2], 3: props.jobSkills[3], - }); + }) - if (selectRef.current) selectRef.current.value = props.job.id; + if (selectRef.current) selectRef.current.value = props.job.id } - }, [props]); + }, [props]) useEffect(() => { - generateImageUrl(); - }); + generateImageUrl() + }) useEffect(() => { if (job) { if ((party.job && job.id != party.job.id) || !party.job) - appState.party.job = job; - if (job.row === "1") setNumSkills(3); - else setNumSkills(4); + appState.party.job = job + if (job.row === '1') setNumSkills(3) + else setNumSkills(4) } - }, [job]); + }, [job]) function receiveJob(job?: Job) { if (job) { - setJob(job); - props.saveJob(job); + setJob(job) + props.saveJob(job) } } function generateImageUrl() { - let imgSrc = ""; + let imgSrc = '' if (job) { - const slug = job?.name.en.replaceAll(" ", "-").toLowerCase(); - const gender = party.user && party.user.gender == 1 ? "b" : "a"; + const slug = job?.name.en.replaceAll(' ', '-').toLowerCase() + const gender = party.user && party.user.gender == 1 ? 'b' : 'a' - imgSrc = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/jobs/${slug}_${gender}.png`; + imgSrc = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/jobs/${slug}_${gender}.png` } - setImageUrl(imgSrc); + setImageUrl(imgSrc) } const canEditSkill = (skill?: JobSkill) => { if (job && skill) { - if (skill.job.id === job.id && skill.main && !skill.sub) return false; + if (skill.job.id === job.id && skill.main && !skill.sub) return false } - return props.editable; - }; + return props.editable + } const skillItem = (index: number, editable: boolean) => { return ( @@ -103,15 +101,15 @@ const JobSection = (props: Props) => { skill={skills[index]} editable={canEditSkill(skills[index])} key={`skill-${index}`} - hasJob={job != undefined && job.id != "-1"} + hasJob={job != undefined && job.id != '-1'} /> - ); - }; + ) + } const editableSkillItem = (index: number) => { return ( { > {skillItem(index, true)} - ); - }; + ) + } function saveJobSkill(object: SearchableObject, position: number) { - const skill = object as JobSkill; + const skill = object as JobSkill - const newSkills = skills; - newSkills[position] = skill; - setSkills(newSkills); + const newSkills = skills + newSkills[position] = skill + setSkills(newSkills) - props.saveSkill(skill, position); + props.saveSkill(skill, position) } // Render: JSX components @@ -161,7 +159,7 @@ const JobSection = (props: Props) => { - ); -}; + ) +} -export default JobSection; +export default JobSection diff --git a/components/JobSkillItem/index.tsx b/components/JobSkillItem/index.tsx index 0f6e2031..bac8f729 100644 --- a/components/JobSkillItem/index.tsx +++ b/components/JobSkillItem/index.tsx @@ -1,40 +1,40 @@ -import React from "react"; -import { useRouter } from "next/router"; -import { useTranslation } from "next-i18next"; +import React from 'react' +import { useRouter } from 'next/router' +import { useTranslation } from 'next-i18next' -import classNames from "classnames"; -import PlusIcon from "~public/icons/Add.svg"; +import classNames from 'classnames' +import PlusIcon from '~public/icons/Add.svg' -import "./index.scss"; +import './index.scss' // Props -interface Props extends React.ComponentPropsWithoutRef<"div"> { - skill?: JobSkill; - editable: boolean; - hasJob: boolean; +interface Props extends React.ComponentPropsWithoutRef<'div'> { + skill?: JobSkill + editable: boolean + hasJob: boolean } const JobSkillItem = React.forwardRef( function useJobSkillItem({ ...props }, forwardedRef) { - const router = useRouter(); - const { t } = useTranslation("common"); + const router = useRouter() + const { t } = useTranslation('common') const locale = - router.locale && ["en", "ja"].includes(router.locale) + router.locale && ['en', 'ja'].includes(router.locale) ? router.locale - : "en"; + : 'en' const classes = classNames({ JobSkill: true, editable: props.editable, - }); + }) const imageClasses = classNames({ placeholder: !props.skill, editable: props.editable && props.hasJob, - }); + }) const skillImage = () => { - let jsx: React.ReactNode; + let jsx: React.ReactNode if (props.skill) { jsx = ( @@ -43,39 +43,39 @@ const JobSkillItem = React.forwardRef( className={imageClasses} src={`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/job-skills/${props.skill.slug}.png`} /> - ); + ) } else { jsx = (
    - {props.editable && props.hasJob ? : ""} + {props.editable && props.hasJob ? : ''}
    - ); + ) } - return jsx; - }; + return jsx + } const label = () => { - let jsx: React.ReactNode; + let jsx: React.ReactNode if (props.skill) { - jsx =

    {props.skill.name[locale]}

    ; + jsx =

    {props.skill.name[locale]}

    } else if (props.editable && props.hasJob) { - jsx =

    {t("job_skills.state.selectable")}

    ; + jsx =

    {t('job_skills.state.selectable')}

    } else { - jsx =

    {t("job_skills.state.no_skill")}

    ; + jsx =

    {t('job_skills.state.no_skill')}

    } - return jsx; - }; + return jsx + } return (
    {skillImage()} {label()}
    - ); + ) } -); +) -export default JobSkillItem; +export default JobSkillItem diff --git a/components/JobSkillResult/index.tsx b/components/JobSkillResult/index.tsx index d04653fd..66d9333b 100644 --- a/components/JobSkillResult/index.tsx +++ b/components/JobSkillResult/index.tsx @@ -1,43 +1,41 @@ -import React, { useEffect, useState } from "react"; -import { useRouter } from "next/router"; -import { SkillGroup, skillClassification } from "~utils/skillGroups"; +import React, { useEffect, useState } from 'react' +import { useRouter } from 'next/router' +import { SkillGroup, skillClassification } from '~utils/skillGroups' -import "./index.scss"; +import './index.scss' interface Props { - data: JobSkill; - onClick: () => void; + data: JobSkill + onClick: () => void } const JobSkillResult = (props: Props) => { - const router = useRouter(); + const router = useRouter() const locale = - router.locale && ["en", "ja"].includes(router.locale) - ? router.locale - : "en"; + router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en' - const skill = props.data; + const skill = props.data - const [group, setGroup] = useState(); + const [group, setGroup] = useState() useEffect(() => { - setGroup(skillClassification.find((group) => group.id === skill.color)); - }, [skill, setGroup, skillClassification]); + setGroup(skillClassification.find((group) => group.id === skill.color)) + }, [skill, setGroup, skillClassification]) const jobSkillUrl = () => - `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/job-skills/${skill.slug}.png`; + `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/job-skills/${skill.slug}.png` return (
  • {skill.name[locale]}
    {skill.name[locale]}
    -
    +
    {group?.name[locale]}
    • - ); -}; + ) +} -export default JobSkillResult; +export default JobSkillResult diff --git a/components/JobSkillSearchFilterBar/index.tsx b/components/JobSkillSearchFilterBar/index.tsx index 7151ad4f..36f018eb 100644 --- a/components/JobSkillSearchFilterBar/index.tsx +++ b/components/JobSkillSearchFilterBar/index.tsx @@ -1,23 +1,23 @@ -import React, { useEffect, useState } from "react"; -import { useRouter } from "next/router"; -import { useTranslation } from "react-i18next"; +import React, { useEffect, useState } from 'react' +import { useRouter } from 'next/router' +import { useTranslation } from 'react-i18next' -import { skillGroups } from "~utils/skillGroups"; +import { skillGroups } from '~utils/skillGroups' -import "./index.scss"; +import './index.scss' interface Props { - sendFilters: (filters: { [key: string]: number }) => void; + sendFilters: (filters: { [key: string]: number }) => void } const JobSkillSearchFilterBar = (props: Props) => { // Set up translation - const { t } = useTranslation("common"); + const { t } = useTranslation('common') - const [currentGroup, setCurrentGroup] = useState(-1); + const [currentGroup, setCurrentGroup] = useState(-1) function onChange(event: React.ChangeEvent) { - setCurrentGroup(parseInt(event.target.value)); + setCurrentGroup(parseInt(event.target.value)) } function onBlur(event: React.ChangeEvent) {} @@ -25,14 +25,14 @@ const JobSkillSearchFilterBar = (props: Props) => { function sendFilters() { const filters = { group: currentGroup, - }; + } - props.sendFilters(filters); + props.sendFilters(filters) } useEffect(() => { - sendFilters(); - }, [currentGroup]); + sendFilters() + }, [currentGroup]) return (
    @@ -65,7 +65,7 @@ const JobSkillSearchFilterBar = (props: Props) => {
    - ); -}; + ) +} -export default JobSkillSearchFilterBar; +export default JobSkillSearchFilterBar diff --git a/components/Layout/index.tsx b/components/Layout/index.tsx index a8de5056..ce3b6781 100644 --- a/components/Layout/index.tsx +++ b/components/Layout/index.tsx @@ -1,8 +1,8 @@ -import type { ReactElement } from "react"; -import TopHeader from "~components/TopHeader"; +import type { ReactElement } from 'react' +import TopHeader from '~components/TopHeader' interface Props { - children: ReactElement; + children: ReactElement } const Layout = ({ children }: Props) => { @@ -11,7 +11,7 @@ const Layout = ({ children }: Props) => {
    {children}
    - ); -}; + ) +} -export default Layout; +export default Layout diff --git a/components/LoginModal/index.tsx b/components/LoginModal/index.tsx index d9abdfdc..c54d04a9 100644 --- a/components/LoginModal/index.tsx +++ b/components/LoginModal/index.tsx @@ -1,138 +1,138 @@ -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 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 {} interface ErrorMap { - [index: string]: string; - email: string; - password: string; + [index: string]: string + email: 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,}))$/; + /^(([^<>()\[\]\\.,;:\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 router = useRouter() + const { t } = useTranslation('common') // Set up form states and error handling - const [formValid, setFormValid] = useState(false); + const [formValid, setFormValid] = useState(false) const [errors, setErrors] = useState({ - email: "", - password: "", - }); + email: '', + password: '', + }) // States - const [open, setOpen] = useState(false); + const [open, setOpen] = useState(false) // Set up form refs - const emailInput: React.RefObject = React.createRef(); - const passwordInput: React.RefObject = React.createRef(); - const form: React.RefObject[] = [emailInput, passwordInput]; + const emailInput: React.RefObject = React.createRef() + const passwordInput: React.RefObject = React.createRef() + const form: React.RefObject[] = [emailInput, passwordInput] function handleChange(event: React.ChangeEvent) { - const { name, value } = event.target; - let newErrors = { ...errors }; + const { name, value } = event.target + 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 = ""; - break; + newErrors.email = t('modals.login.errors.invalid_email') + else newErrors.email = '' + break - case "password": + case 'password': newErrors.password = - value.length == 0 ? t("modals.login.errors.empty_password") : ""; - break; + value.length == 0 ? t('modals.login.errors.empty_password') : '' + break default: - break; + break } - setErrors(newErrors); - setFormValid(validateForm(newErrors)); + setErrors(newErrors) + setFormValid(validateForm(newErrors)) } function validateForm(errors: ErrorMap) { - let valid = true; + let valid = true Object.values(form).forEach( (input) => input.current?.value.length == 0 && (valid = false) - ); + ) Object.values(errors).forEach( (error) => error.length > 0 && (valid = false) - ); + ) - return valid; + return valid } function login(event: React.FormEvent) { - event.preventDefault(); + event.preventDefault() const body = { email: emailInput.current?.value, password: passwordInput.current?.value, - grant_type: "password", - }; + grant_type: 'password', + } if (formValid) { api .login(body) .then((response) => { - storeCookieInfo(response); - return response.data.user.id; + storeCookieInfo(response) + return response.data.user.id }) .then((id) => fetchUserInfo(id)) - .then((infoResponse) => storeUserInfo(infoResponse)); + .then((infoResponse) => storeUserInfo(infoResponse)) } } function fetchUserInfo(id: string) { - return api.userInfo(id); + return api.userInfo(id) } function storeCookieInfo(response: AxiosResponse) { - const user = response.data.user; + const user = response.data.user const cookieObj: AccountCookie = { userId: user.id, username: user.username, token: response.data.access_token, - }; + } - setCookie("account", cookieObj, { path: "/" }); + setCookie('account', cookieObj, { path: '/' }) } function storeUserInfo(response: AxiosResponse) { - const user = response.data.user; + const user = response.data.user const cookieObj: UserCookie = { picture: user.picture.picture, element: user.picture.element, language: user.language, gender: user.gender, - }; + } - setCookie("user", cookieObj, { path: "/" }); + setCookie('user', cookieObj, { path: '/' }) accountState.account.user = { id: user.id, @@ -140,35 +140,35 @@ const LoginModal = (props: Props) => { picture: user.picture.picture, element: user.picture.element, gender: user.gender, - }; + } - console.log("Authorizing account..."); - accountState.account.authorized = true; + console.log('Authorizing account...') + accountState.account.authorized = true - setOpen(false); - changeLanguage(user.language); + setOpen(false) + changeLanguage(user.language) } function changeLanguage(newLanguage: string) { if (newLanguage !== router.locale) { - setCookie("NEXT_LOCALE", newLanguage, { path: "/" }); - router.push(router.asPath, undefined, { locale: newLanguage }); + setCookie('NEXT_LOCALE', newLanguage, { path: '/' }) + router.push(router.asPath, undefined, { locale: newLanguage }) } } function openChange(open: boolean) { - setOpen(open); + setOpen(open) setErrors({ - email: "", - password: "", - }); + email: '', + password: '', + }) } return (
  • - {t("menu.login")} + {t('menu.login')}
    • @@ -178,7 +178,7 @@ const LoginModal = (props: Props) => { >
    - {t("modals.login.title")} + {t('modals.login.title')} @@ -190,7 +190,7 @@ const LoginModal = (props: Props) => {
    {
    - + - ); -}; + ) +} -export default LoginModal; +export default LoginModal diff --git a/components/PartySegmentedControl/index.tsx b/components/PartySegmentedControl/index.tsx index 85657fd4..36936b57 100644 --- a/components/PartySegmentedControl/index.tsx +++ b/components/PartySegmentedControl/index.tsx @@ -1,53 +1,53 @@ -import React from "react"; -import { useSnapshot } from "valtio"; -import { useTranslation } from "next-i18next"; +import React from 'react' +import { useSnapshot } from 'valtio' +import { useTranslation } from 'next-i18next' -import { appState } from "~utils/appState"; +import { appState } from '~utils/appState' -import SegmentedControl from "~components/SegmentedControl"; -import Segment from "~components/Segment"; -import ToggleSwitch from "~components/ToggleSwitch"; +import SegmentedControl from '~components/SegmentedControl' +import Segment from '~components/Segment' +import ToggleSwitch from '~components/ToggleSwitch' -import { GridType } from "~utils/enums"; +import { GridType } from '~utils/enums' -import "./index.scss"; +import './index.scss' interface Props { - selectedTab: GridType; - onClick: (event: React.ChangeEvent) => void; - onCheckboxChange: (event: React.ChangeEvent) => void; + selectedTab: GridType + onClick: (event: React.ChangeEvent) => void + onCheckboxChange: (event: React.ChangeEvent) => void } const PartySegmentedControl = (props: Props) => { - const { t } = useTranslation("common"); + const { t } = useTranslation('common') - const { party, grid } = useSnapshot(appState); + const { party, grid } = useSnapshot(appState) function getElement() { - let element: number = 0; + let element: number = 0 if (party.element == 0 && grid.weapons.mainWeapon) - element = grid.weapons.mainWeapon.element; - else element = party.element; + element = grid.weapons.mainWeapon.element + else element = party.element switch (element) { case 1: - return "wind"; - break; + return 'wind' + break case 2: - return "fire"; - break; + return 'fire' + break case 3: - return "water"; - break; + return 'water' + break case 4: - return "earth"; - break; + return 'earth' + break case 5: - return "dark"; - break; + return 'dark' + break case 6: - return "light"; - break; + return 'light' + break } } @@ -61,7 +61,7 @@ const PartySegmentedControl = (props: Props) => { onChange={props.onCheckboxChange} />
    - ); + ) return (
    @@ -79,7 +79,7 @@ const PartySegmentedControl = (props: Props) => { selected={props.selectedTab == GridType.Character} onClick={props.onClick} > - {t("party.segmented_control.characters")} + {t('party.segmented_control.characters')} { selected={props.selectedTab == GridType.Weapon} onClick={props.onClick} > - {t("party.segmented_control.weapons")} + {t('party.segmented_control.weapons')} { selected={props.selectedTab == GridType.Summon} onClick={props.onClick} > - {t("party.segmented_control.summons")} + {t('party.segmented_control.summons')} {(() => { if (party.editable && props.selectedTab == GridType.Weapon) { - return extraToggle; + return extraToggle } })()}
    - ); -}; + ) +} -export default PartySegmentedControl; +export default PartySegmentedControl diff --git a/components/SearchFilter/index.tsx b/components/SearchFilter/index.tsx index b64bf874..2cef27a9 100644 --- a/components/SearchFilter/index.tsx +++ b/components/SearchFilter/index.tsx @@ -1,16 +1,16 @@ -import React from "react"; +import React from 'react' -import * as DropdownMenu from "@radix-ui/react-dropdown-menu"; +import * as DropdownMenu from '@radix-ui/react-dropdown-menu' -import ArrowIcon from "~public/icons/Arrow.svg"; -import "./index.scss"; +import ArrowIcon from '~public/icons/Arrow.svg' +import './index.scss' interface Props { - label: string; - open: boolean; - numSelected: number; - onOpenChange: (open: boolean) => void; - children: React.ReactNode; + label: string + open: boolean + numSelected: number + onOpenChange: (open: boolean) => void + children: React.ReactNode } const SearchFilter = (props: Props) => { @@ -28,7 +28,7 @@ const SearchFilter = (props: Props) => { - ); -}; + ) +} -export default SearchFilter; +export default SearchFilter diff --git a/components/SearchFilterCheckboxItem/index.scss b/components/SearchFilterCheckboxItem/index.scss index bd73abe2..800842d9 100644 --- a/components/SearchFilterCheckboxItem/index.scss +++ b/components/SearchFilterCheckboxItem/index.scss @@ -14,7 +14,7 @@ cursor: pointer; } - &[data-state="checked"] { + &[data-state='checked'] { background: $grey-90; svg { diff --git a/components/SearchFilterCheckboxItem/index.tsx b/components/SearchFilterCheckboxItem/index.tsx index f8d4e28a..0c2111fd 100644 --- a/components/SearchFilterCheckboxItem/index.tsx +++ b/components/SearchFilterCheckboxItem/index.tsx @@ -1,20 +1,20 @@ -import React from "react"; +import React from 'react' -import * as DropdownMenu from "@radix-ui/react-dropdown-menu"; +import * as DropdownMenu from '@radix-ui/react-dropdown-menu' -import CheckIcon from "~public/icons/Check.svg"; -import "./index.scss"; +import CheckIcon from '~public/icons/Check.svg' +import './index.scss' interface Props { - checked?: boolean; - valueKey: string; - onCheckedChange: (open: boolean, key: string) => void; - children: React.ReactNode; + checked?: boolean + valueKey: string + onCheckedChange: (open: boolean, key: string) => void + children: React.ReactNode } const SearchFilterCheckboxItem = (props: Props) => { function handleCheckedChange(checked: boolean) { - props.onCheckedChange(checked, props.valueKey); + props.onCheckedChange(checked, props.valueKey) } return ( @@ -29,7 +29,7 @@ const SearchFilterCheckboxItem = (props: Props) => { {props.children} - ); -}; + ) +} -export default SearchFilterCheckboxItem; +export default SearchFilterCheckboxItem diff --git a/components/SearchModal/index.tsx b/components/SearchModal/index.tsx index bf90ff96..8fee34e8 100644 --- a/components/SearchModal/index.tsx +++ b/components/SearchModal/index.tsx @@ -1,70 +1,70 @@ -import React, { useEffect, useState } from "react"; -import { getCookie, setCookie } from "cookies-next"; -import { useRouter } from "next/router"; -import { useTranslation } from "react-i18next"; -import InfiniteScroll from "react-infinite-scroll-component"; +import React, { useEffect, useState } from 'react' +import { getCookie, setCookie } from 'cookies-next' +import { useRouter } from 'next/router' +import { useTranslation } from 'react-i18next' +import InfiniteScroll from 'react-infinite-scroll-component' -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 WeaponSearchFilterBar from "~components/WeaponSearchFilterBar"; -import SummonSearchFilterBar from "~components/SummonSearchFilterBar"; -import JobSkillSearchFilterBar from "~components/JobSkillSearchFilterBar"; +import CharacterSearchFilterBar from '~components/CharacterSearchFilterBar' +import WeaponSearchFilterBar from '~components/WeaponSearchFilterBar' +import SummonSearchFilterBar from '~components/SummonSearchFilterBar' +import JobSkillSearchFilterBar from '~components/JobSkillSearchFilterBar' -import CharacterResult from "~components/CharacterResult"; -import WeaponResult from "~components/WeaponResult"; -import SummonResult from "~components/SummonResult"; -import JobSkillResult from "~components/JobSkillResult"; +import CharacterResult from '~components/CharacterResult' +import WeaponResult from '~components/WeaponResult' +import SummonResult from '~components/SummonResult' +import JobSkillResult from '~components/JobSkillResult' -import type { SearchableObject, SearchableObjectArray } from "~types"; +import type { SearchableObject, SearchableObjectArray } from '~types' -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: SearchableObject, position: number) => any; - placeholderText: string; - fromPosition: number; - job?: Job; - object: "weapons" | "characters" | "summons" | "job_skills"; - children: React.ReactNode; + send: (object: SearchableObject, position: number) => any + placeholderText: string + fromPosition: number + job?: Job + object: 'weapons' | 'characters' | 'summons' | 'job_skills' + children: React.ReactNode } const SearchModal = (props: Props) => { // Set up router - const router = useRouter(); - const locale = router.locale; + const router = useRouter() + const locale = router.locale // Set up translation - const { t } = useTranslation("common"); + const { t } = useTranslation('common') - let searchInput = React.createRef(); - let scrollContainer = React.createRef(); + let searchInput = React.createRef() + let scrollContainer = React.createRef() - const [firstLoad, setFirstLoad] = useState(true); - const [filters, setFilters] = useState<{ [key: string]: any }>(); - const [open, setOpen] = useState(false); - const [query, setQuery] = useState(""); - const [results, setResults] = useState([]); + const [firstLoad, setFirstLoad] = useState(true) + const [filters, setFilters] = useState<{ [key: string]: any }>() + const [open, setOpen] = useState(false) + const [query, setQuery] = useState('') + const [results, setResults] = useState([]) // Pagination states - const [recordCount, setRecordCount] = useState(0); - const [currentPage, setCurrentPage] = useState(1); - const [totalPages, setTotalPages] = useState(1); + const [recordCount, setRecordCount] = useState(0) + const [currentPage, setCurrentPage] = useState(1) + const [totalPages, setTotalPages] = useState(1) useEffect(() => { - if (searchInput.current) searchInput.current.focus(); - }, [searchInput]); + if (searchInput.current) searchInput.current.focus() + }, [searchInput]) function inputChanged(event: React.ChangeEvent) { - const text = event.target.value; + const text = event.target.value if (text.length) { - setQuery(text); + setQuery(text) } else { - setQuery(""); + setQuery('') } } @@ -79,131 +79,131 @@ const SearchModal = (props: Props) => { page: currentPage, }) .then((response) => { - setTotalPages(response.data.total_pages); - setRecordCount(response.data.count); + setTotalPages(response.data.total_pages) + setRecordCount(response.data.count) if (replace) { - replaceResults(response.data.count, response.data.results); + replaceResults(response.data.count, response.data.results) } else { - appendResults(response.data.results); + appendResults(response.data.results) } }) .catch((error) => { - console.error(error); - }); + console.error(error) + }) } function replaceResults(count: number, list: SearchableObjectArray) { if (count > 0) { - setResults(list); + setResults(list) } else { - setResults([]); + setResults([]) } } function appendResults(list: SearchableObjectArray) { - setResults([...results, ...list]); + setResults([...results, ...list]) } function storeRecentResult(result: SearchableObject) { - const key = `recent_${props.object}`; - const cookie = getCookie(key); + const key = `recent_${props.object}` + const cookie = getCookie(key) const cookieObj: SearchableObjectArray = cookie ? JSON.parse(cookie as string) - : []; - let recents: SearchableObjectArray = []; + : [] + let recents: SearchableObjectArray = [] - if (props.object === "weapons") { - recents = cloneDeep(cookieObj as Weapon[]) || []; + if (props.object === 'weapons') { + recents = cloneDeep(cookieObj as Weapon[]) || [] if ( !recents.find( (item) => (item as Weapon).granblue_id === (result as Weapon).granblue_id ) ) { - recents.unshift(result as Weapon); + recents.unshift(result as Weapon) } - } else if (props.object === "summons") { - recents = cloneDeep(cookieObj as Summon[]) || []; + } else if (props.object === 'summons') { + recents = cloneDeep(cookieObj as Summon[]) || [] if ( !recents.find( (item) => (item as Summon).granblue_id === (result as Summon).granblue_id ) ) { - recents.unshift(result as Summon); + recents.unshift(result as Summon) } } - if (recents && recents.length > 5) recents.pop(); - setCookie(`recent_${props.object}`, recents, { path: "/" }); - sendData(result); + if (recents && recents.length > 5) recents.pop() + setCookie(`recent_${props.object}`, recents, { path: '/' }) + sendData(result) } function sendData(result: SearchableObject) { - props.send(result, props.fromPosition); - openChange(); + props.send(result, props.fromPosition) + openChange() } function receiveFilters(filters: { [key: string]: any }) { - setCurrentPage(1); - setResults([]); - setFilters(filters); + setCurrentPage(1) + setResults([]) + setFilters(filters) } useEffect(() => { // Current page changed if (open && currentPage > 1) { - fetchResults({ replace: false }); + fetchResults({ replace: false }) } else if (open && currentPage == 1) { - fetchResults({ replace: true }); + fetchResults({ replace: true }) } - }, [currentPage]); + }, [currentPage]) useEffect(() => { // Filters changed - const key = `recent_${props.object}`; - const cookie = getCookie(key); + const key = `recent_${props.object}` + const cookie = getCookie(key) const cookieObj: Weapon[] | Summon[] | Character[] = cookie ? JSON.parse(cookie as string) - : []; + : [] if (open) { if (firstLoad && cookieObj && cookieObj.length > 0) { - setResults(cookieObj); - setRecordCount(cookieObj.length); - setFirstLoad(false); + setResults(cookieObj) + setRecordCount(cookieObj.length) + setFirstLoad(false) } else { - setCurrentPage(1); - fetchResults({ replace: true }); + setCurrentPage(1) + fetchResults({ replace: true }) } } - }, [filters]); + }, [filters]) useEffect(() => { // Query changed if (open && query.length != 1) { - setCurrentPage(1); - fetchResults({ replace: true }); + setCurrentPage(1) + fetchResults({ replace: true }) } - }, [query]); + }, [query]) function renderResults() { - let jsx; + let jsx switch (props.object) { - case "weapons": - jsx = renderWeaponSearchResults(); - break; - case "summons": - jsx = renderSummonSearchResults(results); - break; - case "characters": - jsx = renderCharacterSearchResults(results); - break; - case "job_skills": - jsx = renderJobSkillSearchResults(results); - break; + case 'weapons': + jsx = renderWeaponSearchResults() + break + case 'summons': + jsx = renderSummonSearchResults(results) + break + case 'characters': + jsx = renderCharacterSearchResults(results) + break + case 'job_skills': + jsx = renderJobSkillSearchResults(results) + break } return ( @@ -216,13 +216,13 @@ const SearchModal = (props: Props) => { > {jsx} - ); + ) } function renderWeaponSearchResults() { - let jsx: React.ReactNode; + let jsx: React.ReactNode - const castResults: Weapon[] = results as Weapon[]; + const castResults: Weapon[] = results as Weapon[] if (castResults && Object.keys(castResults).length > 0) { jsx = castResults.map((result: Weapon) => { return ( @@ -230,20 +230,20 @@ const SearchModal = (props: Props) => { key={result.id} data={result} onClick={() => { - storeRecentResult(result); + storeRecentResult(result) }} /> - ); - }); + ) + }) } - return jsx; + return jsx } function renderSummonSearchResults(results: { [key: string]: any }) { - let jsx: React.ReactNode; + let jsx: React.ReactNode - const castResults: Summon[] = results as Summon[]; + const castResults: Summon[] = results as Summon[] if (castResults && Object.keys(castResults).length > 0) { jsx = castResults.map((result: Summon) => { return ( @@ -251,20 +251,20 @@ const SearchModal = (props: Props) => { key={result.id} data={result} onClick={() => { - storeRecentResult(result); + storeRecentResult(result) }} /> - ); - }); + ) + }) } - return jsx; + return jsx } function renderCharacterSearchResults(results: { [key: string]: any }) { - let jsx: React.ReactNode; + let jsx: React.ReactNode - const castResults: Character[] = results as Character[]; + const castResults: Character[] = results as Character[] if (castResults && Object.keys(castResults).length > 0) { jsx = castResults.map((result: Character) => { return ( @@ -272,20 +272,20 @@ const SearchModal = (props: Props) => { key={result.id} data={result} onClick={() => { - storeRecentResult(result); + storeRecentResult(result) }} /> - ); - }); + ) + }) } - return jsx; + return jsx } function renderJobSkillSearchResults(results: { [key: string]: any }) { - let jsx: React.ReactNode; + let jsx: React.ReactNode - const castResults: JobSkill[] = results as JobSkill[]; + const castResults: JobSkill[] = results as JobSkill[] if (castResults && Object.keys(castResults).length > 0) { jsx = castResults.map((result: JobSkill) => { return ( @@ -293,26 +293,26 @@ const SearchModal = (props: Props) => { key={result.id} data={result} onClick={() => { - storeRecentResult(result); + storeRecentResult(result) }} /> - ); - }); + ) + }) } - return jsx; + return jsx } function openChange() { if (open) { - setQuery(""); - setFirstLoad(true); - setResults([]); - setRecordCount(0); - setCurrentPage(1); - setOpen(false); + setQuery('') + setFirstLoad(true) + setResults([]) + setRecordCount(0) + setCurrentPage(1) + setOpen(false) } else { - setOpen(true); + setOpen(true) } } @@ -340,39 +340,39 @@ const SearchModal = (props: Props) => { - {props.object === "characters" ? ( + {props.object === 'characters' ? ( ) : ( - "" + '' )} - {props.object === "weapons" ? ( + {props.object === 'weapons' ? ( ) : ( - "" + '' )} - {props.object === "summons" ? ( + {props.object === 'summons' ? ( ) : ( - "" + '' )} - {props.object === "job_skills" ? ( + {props.object === 'job_skills' ? ( ) : ( - "" + '' )}
    - {t("search.result_count", { record_count: recordCount })} + {t('search.result_count', { record_count: recordCount })}
    - {open ? renderResults() : ""} + {open ? renderResults() : ''}
    - ); -}; + ) +} -export default SearchModal; +export default SearchModal diff --git a/components/Segment/index.tsx b/components/Segment/index.tsx index f410894f..3135f88f 100644 --- a/components/Segment/index.tsx +++ b/components/Segment/index.tsx @@ -1,13 +1,13 @@ -import React from "react"; +import React from 'react' -import "./index.scss"; +import './index.scss' interface Props { - groupName: string; - name: string; - selected: boolean; - children: string; - onClick: (event: React.ChangeEvent) => void; + groupName: string + name: string + selected: boolean + children: string + onClick: (event: React.ChangeEvent) => void } const Segment: React.FC = (props: Props) => { @@ -23,7 +23,7 @@ const Segment: React.FC = (props: Props) => { /> - ); -}; + ) +} -export default Segment; +export default Segment diff --git a/components/SegmentedControl/index.tsx b/components/SegmentedControl/index.tsx index 5862959d..379f18d2 100644 --- a/components/SegmentedControl/index.tsx +++ b/components/SegmentedControl/index.tsx @@ -1,19 +1,19 @@ -import React from "react"; +import React from 'react' -import "./index.scss"; +import './index.scss' interface Props { - elementClass?: string; + elementClass?: string } const SegmentedControl: React.FC = ({ elementClass, children }) => { return (
    -
    +
    {children}
    - ); -}; + ) +} -export default SegmentedControl; +export default SegmentedControl diff --git a/components/SignupModal/index.tsx b/components/SignupModal/index.tsx index 8dab18f1..8a9ef1db 100644 --- a/components/SignupModal/index.tsx +++ b/components/SignupModal/index.tsx @@ -1,64 +1,64 @@ -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 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 {} interface ErrorMap { - [index: string]: string; - username: string; - email: string; - password: string; - passwordConfirmation: string; + [index: string]: string + username: string + email: string + password: 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,}))$/; + /^(([^<>()\[\]\\.,;:\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 router = useRouter() + const { t } = useTranslation('common') // Set up form states and error handling - const [formValid, setFormValid] = useState(false); + const [formValid, setFormValid] = useState(false) const [errors, setErrors] = useState({ - username: "", - email: "", - password: "", - passwordConfirmation: "", - }); + username: '', + email: '', + password: '', + passwordConfirmation: '', + }) // States - const [open, setOpen] = useState(false); + const [open, setOpen] = useState(false) // Set up form refs - const usernameInput = React.createRef(); - const emailInput = React.createRef(); - const passwordInput = React.createRef(); - const passwordConfirmationInput = React.createRef(); + const usernameInput = React.createRef() + const emailInput = React.createRef() + const passwordInput = React.createRef() + const passwordConfirmationInput = React.createRef() const form = [ usernameInput, emailInput, passwordInput, passwordConfirmationInput, - ]; + ] function register(event: React.FormEvent) { - event.preventDefault(); + event.preventDefault() const body = { user: { @@ -68,47 +68,47 @@ const SignupModal = (props: Props) => { password_confirmation: passwordConfirmationInput.current?.value, language: router.locale, }, - }; + } if (formValid) api.endpoints.users .create(body) .then((response) => { - storeCookieInfo(response); - return response.data.user.user_id; + storeCookieInfo(response) + return response.data.user.user_id }) .then((id) => fetchUserInfo(id)) - .then((infoResponse) => storeUserInfo(infoResponse)); + .then((infoResponse) => storeUserInfo(infoResponse)) } function storeCookieInfo(response: AxiosResponse) { - const user = response.data.user; + const user = response.data.user const cookieObj: AccountCookie = { userId: user.user_id, username: user.username, token: user.token, - }; + } - setCookie("account", cookieObj, { path: "/" }); + setCookie('account', cookieObj, { path: '/' }) } function fetchUserInfo(id: string) { - return api.userInfo(id); + return api.userInfo(id) } function storeUserInfo(response: AxiosResponse) { - const user = response.data.user; + const user = response.data.user const cookieObj: UserCookie = { picture: user.picture.picture, element: user.picture.element, language: user.language, gender: user.gender, - }; + } // TODO: Set language - setCookie("user", cookieObj, { path: "/" }); + setCookie('user', cookieObj, { path: '/' }) accountState.account.user = { id: user.id, @@ -116,29 +116,29 @@ const SignupModal = (props: Props) => { picture: user.picture.picture, element: user.picture.element, gender: user.gender, - }; + } - accountState.account.authorized = true; - setOpen(false); + accountState.account.authorized = true + setOpen(false) } function handleNameChange(event: React.ChangeEvent) { - event.preventDefault(); + event.preventDefault() - const fieldName = event.target.name; - const value = event.target.value; + const fieldName = event.target.name + const value = event.target.value if (value.length >= 3) { api.check(fieldName, value).then( (response) => { - processNameCheck(fieldName, value, response.data.available); + processNameCheck(fieldName, value, response.data.available) }, (error) => { - console.error(error); + console.error(error) } - ); + ) } else { - validateName(fieldName, value); + validateName(fieldName, value) } } @@ -147,114 +147,114 @@ const SignupModal = (props: Props) => { value: string, available: boolean ) { - const newErrors = { ...errors }; + const newErrors = { ...errors } if (available) { // Continue checking for errors - newErrors[fieldName] = ""; - setErrors(newErrors); - setFormValid(true); + newErrors[fieldName] = '' + setErrors(newErrors) + setFormValid(true) - validateName(fieldName, value); + validateName(fieldName, value) } else { - newErrors[fieldName] = t("modals.signup.errors.field_in_use", { + newErrors[fieldName] = t('modals.signup.errors.field_in_use', { field: fieldName, - }); - setErrors(newErrors); - setFormValid(false); + }) + setErrors(newErrors) + setFormValid(false) } } function validateName(fieldName: string, value: string) { - let newErrors = { ...errors }; + 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; + break - case "email": + case 'email': newErrors.email = emailRegex.test(value) - ? "" - : t("modals.signup.errors.invalid_email"); - break; + ? '' + : t('modals.signup.errors.invalid_email') + break default: - break; + break } - setFormValid(validateForm(newErrors)); + setFormValid(validateForm(newErrors)) } function handlePasswordChange(event: React.ChangeEvent) { - event.preventDefault(); + event.preventDefault() - const { name, value } = event.target; - let newErrors = { ...errors }; + const { name, value } = event.target + let newErrors = { ...errors } switch (name) { - case "password": + case 'password': newErrors.password = passwordInput.current?.value.includes( usernameInput.current?.value! ) - ? t("modals.signup.errors.password_contains_username") - : ""; - break; + ? t('modals.signup.errors.password_contains_username') + : '' + break - case "password": + case 'password': newErrors.password = - value.length < 8 ? t("modals.signup.errors.password_too_short") : ""; - break; + value.length < 8 ? t('modals.signup.errors.password_too_short') : '' + break - case "confirm_password": + case 'confirm_password': newErrors.passwordConfirmation = passwordInput.current?.value === passwordConfirmationInput.current?.value - ? "" - : t("modals.signup.errors.passwords_dont_match"); - break; + ? '' + : t('modals.signup.errors.passwords_dont_match') + break default: - break; + break } - setFormValid(validateForm(newErrors)); + setFormValid(validateForm(newErrors)) } function validateForm(errors: ErrorMap) { - let valid = true; + let valid = true Object.values(form).forEach( (input) => input.current?.value.length == 0 && (valid = false) - ); + ) Object.values(errors).forEach( (error) => error.length > 0 && (valid = false) - ); + ) - return valid; + return valid } function openChange(open: boolean) { - setOpen(open); + setOpen(open) setErrors({ - username: "", - email: "", - password: "", - passwordConfirmation: "", - }); + username: '', + email: '', + password: '', + passwordConfirmation: '', + }) } return (
  • - {t("menu.signup")} + {t('menu.signup')}
    • @@ -264,7 +264,7 @@ const SignupModal = (props: Props) => { >
    - {t("modals.signup.title")} + {t('modals.signup.title')} @@ -276,7 +276,7 @@ const SignupModal = (props: Props) => {
    {
    {
    {
    - + {/* @@ -318,7 +318,7 @@ const SignupModal = (props: Props) => { - ); -}; + ) +} -export default SignupModal; +export default SignupModal diff --git a/components/SummonGrid/index.tsx b/components/SummonGrid/index.tsx index dd28be45..ff6edf61 100644 --- a/components/SummonGrid/index.tsx +++ b/components/SummonGrid/index.tsx @@ -1,53 +1,53 @@ /* eslint-disable react-hooks/exhaustive-deps */ -import React, { useCallback, useEffect, useMemo, useState } from "react"; -import { getCookie } from "cookies-next"; -import { useSnapshot } from "valtio"; -import { useTranslation } from "next-i18next"; +import React, { useCallback, useEffect, useMemo, useState } from 'react' +import { getCookie } from 'cookies-next' +import { useSnapshot } from 'valtio' +import { useTranslation } from 'next-i18next' -import { AxiosResponse } from "axios"; -import debounce from "lodash.debounce"; +import { AxiosResponse } from 'axios' +import debounce from 'lodash.debounce' -import SummonUnit from "~components/SummonUnit"; -import ExtraSummons from "~components/ExtraSummons"; +import SummonUnit from '~components/SummonUnit' +import ExtraSummons from '~components/ExtraSummons' -import api from "~utils/api"; -import { appState } from "~utils/appState"; -import type { SearchableObject } from "~types"; +import api from '~utils/api' +import { appState } from '~utils/appState' +import type { SearchableObject } from '~types' -import "./index.scss"; +import './index.scss' // Props interface Props { - new: boolean; - summons?: GridSummon[]; - createParty: () => Promise>; - pushHistory?: (path: string) => void; + new: boolean + summons?: GridSummon[] + createParty: () => Promise> + pushHistory?: (path: string) => void } const SummonGrid = (props: Props) => { // Constants - const numSummons: number = 4; + const numSummons: number = 4 // Cookies - const cookie = getCookie("account"); + const cookie = getCookie('account') const accountData: AccountCookie = cookie ? JSON.parse(cookie as string) - : null; + : null const headers = accountData ? { headers: { Authorization: `Bearer ${accountData.token}` } } - : {}; + : {} // Localization - const { t } = useTranslation("common"); + const { t } = useTranslation('common') // Set up state for view management - const { party, grid } = useSnapshot(appState); - const [slug, setSlug] = useState(); + const { party, grid } = useSnapshot(appState) + const [slug, setSlug] = useState() // Create a temporary state to store previous weapon uncap value const [previousUncapValues, setPreviousUncapValues] = useState<{ - [key: number]: number; - }>({}); + [key: number]: number + }>({}) // Set the editable flag only on first load useEffect(() => { @@ -56,61 +56,61 @@ const SummonGrid = (props: Props) => { (accountData && party.user && accountData.userId === party.user.id) || props.new ) - appState.party.editable = true; - else appState.party.editable = false; - }, [props.new, accountData, party]); + appState.party.editable = true + else appState.party.editable = false + }, [props.new, accountData, party]) // Initialize an array of current uncap values for each summon useEffect(() => { - let initialPreviousUncapValues: { [key: number]: number } = {}; + let initialPreviousUncapValues: { [key: number]: number } = {} if (appState.grid.summons.mainSummon) initialPreviousUncapValues[-1] = - appState.grid.summons.mainSummon.uncap_level; + appState.grid.summons.mainSummon.uncap_level if (appState.grid.summons.friendSummon) initialPreviousUncapValues[6] = - appState.grid.summons.friendSummon.uncap_level; + appState.grid.summons.friendSummon.uncap_level Object.values(appState.grid.summons.allSummons).map((o) => o ? (initialPreviousUncapValues[o.position] = o.uncap_level) : 0 - ); + ) - setPreviousUncapValues(initialPreviousUncapValues); + setPreviousUncapValues(initialPreviousUncapValues) }, [ appState.grid.summons.mainSummon, appState.grid.summons.friendSummon, appState.grid.summons.allSummons, - ]); + ]) // Methods: Adding an object from search function receiveSummonFromSearch(object: SearchableObject, position: number) { - const summon = object as Summon; + const summon = object as Summon if (!party.id) { props.createParty().then((response) => { - const party = response.data.party; - appState.party.id = party.id; - setSlug(party.shortcode); + const party = response.data.party + appState.party.id = party.id + setSlug(party.shortcode) - if (props.pushHistory) props.pushHistory(`/p/${party.shortcode}`); + if (props.pushHistory) props.pushHistory(`/p/${party.shortcode}`) saveSummon(party.id, summon, position).then((response) => storeGridSummon(response.data.grid_summon) - ); - }); + ) + }) } else { if (party.editable) saveSummon(party.id, summon, position).then((response) => storeGridSummon(response.data.grid_summon) - ); + ) } } async function saveSummon(partyId: string, summon: Summon, position: number) { - let uncapLevel = 3; - if (summon.uncap.ulb) uncapLevel = 5; - else if (summon.uncap.flb) uncapLevel = 4; + let uncapLevel = 3 + if (summon.uncap.ulb) uncapLevel = 5 + else if (summon.uncap.flb) uncapLevel = 4 return await api.endpoints.summons.create( { @@ -124,37 +124,36 @@ const SummonGrid = (props: Props) => { }, }, headers - ); + ) } function storeGridSummon(gridSummon: GridSummon) { - if (gridSummon.position == -1) - appState.grid.summons.mainSummon = gridSummon; + if (gridSummon.position == -1) appState.grid.summons.mainSummon = gridSummon else if (gridSummon.position == 6) - appState.grid.summons.friendSummon = gridSummon; - else appState.grid.summons.allSummons[gridSummon.position] = gridSummon; + appState.grid.summons.friendSummon = gridSummon + else appState.grid.summons.allSummons[gridSummon.position] = gridSummon } // Methods: Updating uncap level // Note: Saves, but debouncing is not working properly async function saveUncap(id: string, position: number, uncapLevel: number) { - storePreviousUncapValue(position); + storePreviousUncapValue(position) try { if (uncapLevel != previousUncapValues[position]) - await api.updateUncap("summon", id, uncapLevel).then((response) => { - storeGridSummon(response.data.grid_summon); - }); + await api.updateUncap('summon', id, uncapLevel).then((response) => { + storeGridSummon(response.data.grid_summon) + }) } catch (error) { - console.error(error); + console.error(error) // Revert optimistic UI - updateUncapLevel(position, previousUncapValues[position]); + updateUncapLevel(position, previousUncapValues[position]) // Remove optimistic key - let newPreviousValues = { ...previousUncapValues }; - delete newPreviousValues[position]; - setPreviousUncapValues(newPreviousValues); + let newPreviousValues = { ...previousUncapValues } + delete newPreviousValues[position] + setPreviousUncapValues(newPreviousValues) } } @@ -163,63 +162,62 @@ const SummonGrid = (props: Props) => { position: number, uncapLevel: number ) { - memoizeAction(id, position, uncapLevel); + memoizeAction(id, position, uncapLevel) // Optimistically update UI - updateUncapLevel(position, uncapLevel); + updateUncapLevel(position, uncapLevel) } const memoizeAction = useCallback( (id: string, position: number, uncapLevel: number) => { - debouncedAction(id, position, uncapLevel); + debouncedAction(id, position, uncapLevel) }, [props, previousUncapValues] - ); + ) const debouncedAction = useMemo( () => debounce((id, position, number) => { - saveUncap(id, position, number); + saveUncap(id, position, number) }, 500), [props, saveUncap] - ); + ) const updateUncapLevel = (position: number, uncapLevel: number) => { if (appState.grid.summons.mainSummon && position == -1) - appState.grid.summons.mainSummon.uncap_level = uncapLevel; + appState.grid.summons.mainSummon.uncap_level = uncapLevel else if (appState.grid.summons.friendSummon && position == 6) - appState.grid.summons.friendSummon.uncap_level = uncapLevel; + appState.grid.summons.friendSummon.uncap_level = uncapLevel else { - const summon = appState.grid.summons.allSummons[position]; + const summon = appState.grid.summons.allSummons[position] if (summon) { - summon.uncap_level = uncapLevel; - appState.grid.summons.allSummons[position] = summon; + summon.uncap_level = uncapLevel + appState.grid.summons.allSummons[position] = summon } } - }; + } function storePreviousUncapValue(position: number) { // Save the current value in case of an unexpected result - let newPreviousValues = { ...previousUncapValues }; + let newPreviousValues = { ...previousUncapValues } if (appState.grid.summons.mainSummon && position == -1) - newPreviousValues[position] = - appState.grid.summons.mainSummon.uncap_level; + newPreviousValues[position] = appState.grid.summons.mainSummon.uncap_level else if (appState.grid.summons.friendSummon && position == 6) newPreviousValues[position] = - appState.grid.summons.friendSummon.uncap_level; + appState.grid.summons.friendSummon.uncap_level else { - const summon = appState.grid.summons.allSummons[position]; - newPreviousValues[position] = summon ? summon.uncap_level : 0; + const summon = appState.grid.summons.allSummons[position] + newPreviousValues[position] = summon ? summon.uncap_level : 0 } - setPreviousUncapValues(newPreviousValues); + setPreviousUncapValues(newPreviousValues) } // Render: JSX components const mainSummonElement = (
    -
    {t("summons.main")}
    +
    {t('summons.main')}
    { updateUncap={initiateUncapUpdate} />
    - ); + ) const friendSummonElement = (
    -
    {t("summons.friend")}
    +
    {t('summons.friend')}
    { updateUncap={initiateUncapUpdate} />
    - ); + ) const summonGridElement = (
    -
    {t("summons.summons")}
    +
    {t('summons.summons')}
      {Array.from(Array(numSummons)).map((x, i) => { return ( @@ -262,11 +260,11 @@ const SummonGrid = (props: Props) => { updateUncap={initiateUncapUpdate} /> - ); + ) })}
    - ); + ) const subAuraSummonElement = ( { updateObject={receiveSummonFromSearch} updateUncap={initiateUncapUpdate} /> - ); + ) return (
    @@ -287,7 +285,7 @@ const SummonGrid = (props: Props) => { {subAuraSummonElement}
    - ); -}; + ) +} -export default SummonGrid; +export default SummonGrid diff --git a/components/SummonHovercard/index.tsx b/components/SummonHovercard/index.tsx index 7d325653..6cfa7e94 100644 --- a/components/SummonHovercard/index.tsx +++ b/components/SummonHovercard/index.tsx @@ -1,64 +1,62 @@ -import React from "react"; -import { useRouter } from "next/router"; -import { useTranslation } from "next-i18next"; +import React from 'react' +import { useRouter } from 'next/router' +import { useTranslation } from 'next-i18next' -import * as HoverCard from "@radix-ui/react-hover-card"; +import * as HoverCard from '@radix-ui/react-hover-card' -import WeaponLabelIcon from "~components/WeaponLabelIcon"; -import UncapIndicator from "~components/UncapIndicator"; +import WeaponLabelIcon from '~components/WeaponLabelIcon' +import UncapIndicator from '~components/UncapIndicator' -import "./index.scss"; +import './index.scss' interface Props { - gridSummon: GridSummon; - children: React.ReactNode; + gridSummon: GridSummon + children: React.ReactNode } const SummonHovercard = (props: Props) => { - const router = useRouter(); - const { t } = useTranslation("common"); + const router = useRouter() + const { t } = useTranslation('common') const locale = - router.locale && ["en", "ja"].includes(router.locale) - ? router.locale - : "en"; + router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en' - const Element = ["null", "wind", "fire", "water", "earth", "dark", "light"]; + const Element = ['null', 'wind', 'fire', 'water', 'earth', 'dark', 'light'] - const tintElement = Element[props.gridSummon.object.element]; + const tintElement = Element[props.gridSummon.object.element] const wikiUrl = `https://gbf.wiki/${props.gridSummon.object.name.en.replaceAll( - " ", - "_" - )}`; + ' ', + '_' + )}` function summonImage() { - let imgSrc = ""; + let imgSrc = '' if (props.gridSummon) { - const summon = props.gridSummon.object; + const summon = props.gridSummon.object const upgradedSummons = [ - "2040094000", - "2040100000", - "2040080000", - "2040098000", - "2040090000", - "2040084000", - "2040003000", - "2040056000", - ]; + '2040094000', + '2040100000', + '2040080000', + '2040098000', + '2040090000', + '2040084000', + '2040003000', + '2040056000', + ] - let suffix = ""; + let suffix = '' if ( upgradedSummons.indexOf(summon.granblue_id.toString()) != -1 && props.gridSummon.uncap_level == 5 ) - suffix = "_02"; + suffix = '_02' // Generate the correct source for the summon - imgSrc = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/summon-grid/${summon.granblue_id}${suffix}.jpg`; + imgSrc = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/summon-grid/${summon.granblue_id}${suffix}.jpg` } - return imgSrc; + return imgSrc } return ( @@ -88,12 +86,12 @@ const SummonHovercard = (props: Props) => {
    - {t("buttons.wiki")} + {t('buttons.wiki')} - ); -}; + ) +} -export default SummonHovercard; +export default SummonHovercard diff --git a/components/SummonResult/index.tsx b/components/SummonResult/index.tsx index 451a9b02..ac810251 100644 --- a/components/SummonResult/index.tsx +++ b/components/SummonResult/index.tsx @@ -1,26 +1,24 @@ -import React from "react"; -import { useRouter } from "next/router"; +import React from 'react' +import { useRouter } from 'next/router' -import UncapIndicator from "~components/UncapIndicator"; -import WeaponLabelIcon from "~components/WeaponLabelIcon"; +import UncapIndicator from '~components/UncapIndicator' +import WeaponLabelIcon from '~components/WeaponLabelIcon' -import "./index.scss"; +import './index.scss' interface Props { - data: Summon; - onClick: () => void; + data: Summon + onClick: () => void } -const Element = ["null", "wind", "fire", "water", "earth", "dark", "light"]; +const Element = ['null', 'wind', 'fire', 'water', 'earth', 'dark', 'light'] const SummonResult = (props: Props) => { - const router = useRouter(); + const router = useRouter() const locale = - router.locale && ["en", "ja"].includes(router.locale) - ? router.locale - : "en"; + router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en' - const summon = props.data; + const summon = props.data return (
  • @@ -41,7 +39,7 @@ const SummonResult = (props: Props) => {
    • - ); -}; + ) +} -export default SummonResult; +export default SummonResult diff --git a/components/SummonSearchFilterBar/index.tsx b/components/SummonSearchFilterBar/index.tsx index ceb8b768..c679da89 100644 --- a/components/SummonSearchFilterBar/index.tsx +++ b/components/SummonSearchFilterBar/index.tsx @@ -1,81 +1,81 @@ -import React, { useEffect, useState } from "react"; -import { useTranslation } from "next-i18next"; +import React, { useEffect, useState } from 'react' +import { useTranslation } from 'next-i18next' -import cloneDeep from "lodash.clonedeep"; +import cloneDeep from 'lodash.clonedeep' -import * as DropdownMenu from "@radix-ui/react-dropdown-menu"; +import * as DropdownMenu from '@radix-ui/react-dropdown-menu' -import SearchFilter from "~components/SearchFilter"; -import SearchFilterCheckboxItem from "~components/SearchFilterCheckboxItem"; +import SearchFilter from '~components/SearchFilter' +import SearchFilterCheckboxItem from '~components/SearchFilterCheckboxItem' -import "./index.scss"; -import { emptyElementState, emptyRarityState } from "~utils/emptyStates"; -import { elements, rarities } from "~utils/stateValues"; +import './index.scss' +import { emptyElementState, emptyRarityState } from '~utils/emptyStates' +import { elements, rarities } from '~utils/stateValues' interface Props { - sendFilters: (filters: { [key: string]: number[] }) => void; + sendFilters: (filters: { [key: string]: number[] }) => void } const SummonSearchFilterBar = (props: Props) => { - const { t } = useTranslation("common"); + const { t } = useTranslation('common') - const [rarityMenu, setRarityMenu] = useState(false); - const [elementMenu, setElementMenu] = useState(false); + const [rarityMenu, setRarityMenu] = useState(false) + const [elementMenu, setElementMenu] = useState(false) - const [rarityState, setRarityState] = useState(emptyRarityState); + const [rarityState, setRarityState] = useState(emptyRarityState) const [elementState, setElementState] = - useState(emptyElementState); + useState(emptyElementState) function rarityMenuOpened(open: boolean) { if (open) { - setRarityMenu(true); - setElementMenu(false); - } else setRarityMenu(false); + setRarityMenu(true) + setElementMenu(false) + } else setRarityMenu(false) } function elementMenuOpened(open: boolean) { if (open) { - setRarityMenu(false); - setElementMenu(true); - } else setElementMenu(false); + setRarityMenu(false) + setElementMenu(true) + } else setElementMenu(false) } function handleRarityChange(checked: boolean, key: string) { - let newRarityState = cloneDeep(rarityState); - newRarityState[key].checked = checked; - setRarityState(newRarityState); + let newRarityState = cloneDeep(rarityState) + newRarityState[key].checked = checked + setRarityState(newRarityState) } function handleElementChange(checked: boolean, key: string) { - let newElementState = cloneDeep(elementState); - newElementState[key].checked = checked; - setElementState(newElementState); + let newElementState = cloneDeep(elementState) + newElementState[key].checked = checked + setElementState(newElementState) } function sendFilters() { const checkedRarityFilters = Object.values(rarityState) .filter((x) => x.checked) - .map((x, i) => x.id); + .map((x, i) => x.id) const checkedElementFilters = Object.values(elementState) .filter((x) => x.checked) - .map((x, i) => x.id); + .map((x, i) => x.id) const filters = { rarity: checkedRarityFilters, element: checkedElementFilters, - }; + } - props.sendFilters(filters); + props.sendFilters(filters) } useEffect(() => { - sendFilters(); - }, [rarityState, elementState]); + sendFilters() + }, [rarityState, elementState]) return (
    x.checked) @@ -85,7 +85,7 @@ const SummonSearchFilterBar = (props: Props) => { onOpenChange={rarityMenuOpened} > - {t("filters.labels.rarity")} + {t('filters.labels.rarity')} {Array.from(Array(rarities.length)).map((x, i) => { return ( @@ -97,12 +97,12 @@ const SummonSearchFilterBar = (props: Props) => { > {t(`rarities.${rarities[i]}`)} - ); + ) })} x.checked) @@ -112,7 +112,7 @@ const SummonSearchFilterBar = (props: Props) => { onOpenChange={elementMenuOpened} > - {t("filters.labels.element")} + {t('filters.labels.element')} {Array.from(Array(elements.length)).map((x, i) => { return ( @@ -124,11 +124,11 @@ const SummonSearchFilterBar = (props: Props) => { > {t(`elements.${elements[i]}`)} - ); + ) })}
    - ); -}; + ) +} -export default SummonSearchFilterBar; +export default SummonSearchFilterBar diff --git a/components/SummonUnit/index.tsx b/components/SummonUnit/index.tsx index 1b6451ae..844f404e 100644 --- a/components/SummonUnit/index.tsx +++ b/components/SummonUnit/index.tsx @@ -1,36 +1,34 @@ -import React, { useEffect, useState } from "react"; -import { useRouter } from "next/router"; -import { useTranslation } from "next-i18next"; -import classnames from "classnames"; +import React, { useEffect, useState } from 'react' +import { useRouter } from 'next/router' +import { useTranslation } from 'next-i18next' +import classnames from 'classnames' -import SearchModal from "~components/SearchModal"; -import SummonHovercard from "~components/SummonHovercard"; -import UncapIndicator from "~components/UncapIndicator"; -import PlusIcon from "~public/icons/Add.svg"; +import SearchModal from '~components/SearchModal' +import SummonHovercard from '~components/SummonHovercard' +import UncapIndicator from '~components/UncapIndicator' +import PlusIcon from '~public/icons/Add.svg' -import type { SearchableObject } from "~types"; +import type { SearchableObject } from '~types' -import "./index.scss"; +import './index.scss' interface Props { - gridSummon: GridSummon | undefined; - unitType: 0 | 1 | 2; - position: number; - editable: boolean; - updateObject: (object: SearchableObject, position: number) => void; - updateUncap: (id: string, position: number, uncap: number) => void; + gridSummon: GridSummon | undefined + unitType: 0 | 1 | 2 + position: number + editable: boolean + updateObject: (object: SearchableObject, position: number) => void + updateUncap: (id: string, position: number, uncap: number) => void } const SummonUnit = (props: Props) => { - const { t } = useTranslation("common"); + const { t } = useTranslation('common') - const [imageUrl, setImageUrl] = useState(""); + const [imageUrl, setImageUrl] = useState('') - const router = useRouter(); + const router = useRouter() const locale = - router.locale && ["en", "ja"].includes(router.locale) - ? router.locale - : "en"; + router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en' const classes = classnames({ SummonUnit: true, @@ -39,57 +37,57 @@ const SummonUnit = (props: Props) => { friend: props.unitType == 2, editable: props.editable, filled: props.gridSummon !== undefined, - }); + }) - const gridSummon = props.gridSummon; - const summon = gridSummon?.object; + const gridSummon = props.gridSummon + const summon = gridSummon?.object useEffect(() => { - generateImageUrl(); - }); + generateImageUrl() + }) function generateImageUrl() { - let imgSrc = ""; + let imgSrc = '' if (props.gridSummon) { - const summon = props.gridSummon.object!; + const summon = props.gridSummon.object! const upgradedSummons = [ - "2040094000", - "2040100000", - "2040080000", - "2040098000", - "2040090000", - "2040084000", - "2040003000", - "2040056000", - "2040020000", - "2040034000", - "2040028000", - "2040027000", - "2040046000", - "2040047000", - ]; + '2040094000', + '2040100000', + '2040080000', + '2040098000', + '2040090000', + '2040084000', + '2040003000', + '2040056000', + '2040020000', + '2040034000', + '2040028000', + '2040027000', + '2040046000', + '2040047000', + ] - let suffix = ""; + let suffix = '' if ( upgradedSummons.indexOf(summon.granblue_id.toString()) != -1 && props.gridSummon.uncap_level == 5 ) - suffix = "_02"; + suffix = '_02' // Generate the correct source for the summon if (props.unitType == 0 || props.unitType == 2) - imgSrc = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/summon-main/${summon.granblue_id}${suffix}.jpg`; + imgSrc = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/summon-main/${summon.granblue_id}${suffix}.jpg` else - imgSrc = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/summon-grid/${summon.granblue_id}${suffix}.jpg`; + imgSrc = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/summon-grid/${summon.granblue_id}${suffix}.jpg` } - setImageUrl(imgSrc); + setImageUrl(imgSrc) } function passUncapData(uncap: number) { if (props.gridSummon) - props.updateUncap(props.gridSummon.id, props.position, uncap); + props.updateUncap(props.gridSummon.id, props.position, uncap) } const image = ( @@ -100,21 +98,21 @@ const SummonUnit = (props: Props) => { ) : ( - "" + '' )} - ); + ) const editableImage = ( {image} - ); + ) const unitContent = (
    @@ -129,17 +127,17 @@ const SummonUnit = (props: Props) => { special={false} /> ) : ( - "" + '' )}

    {summon?.name[locale]}

    - ); + ) const withHovercard = ( {unitContent} - ); + ) - return gridSummon && !props.editable ? withHovercard : unitContent; -}; + return gridSummon && !props.editable ? withHovercard : unitContent +} -export default SummonUnit; +export default SummonUnit diff --git a/components/TextFieldset/index.scss b/components/TextFieldset/index.scss index e5cfdf34..5c0c2142 100644 --- a/components/TextFieldset/index.scss +++ b/components/TextFieldset/index.scss @@ -1,6 +1,6 @@ .Fieldset textarea { color: $grey-10; - font-family: system-ui, -apple-system, "Helvetica Neue", Helvetica, Arial, + font-family: system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 21px; } diff --git a/components/TextFieldset/index.tsx b/components/TextFieldset/index.tsx index eac524b8..f7d1055d 100644 --- a/components/TextFieldset/index.tsx +++ b/components/TextFieldset/index.tsx @@ -1,13 +1,13 @@ -import React from "react"; -import "./index.scss"; +import React from 'react' +import './index.scss' interface Props { - fieldName: string; - placeholder: string; - value?: string; - error: string; - onBlur?: (event: React.ChangeEvent) => void; - onChange?: (event: React.ChangeEvent) => void; + fieldName: string + placeholder: string + value?: string + error: string + onBlur?: (event: React.ChangeEvent) => void + onChange?: (event: React.ChangeEvent) => void } const TextFieldset = React.forwardRef( @@ -18,15 +18,15 @@ const TextFieldset = React.forwardRef( className="Input" name={props.fieldName} placeholder={props.placeholder} - defaultValue={props.value || ""} + defaultValue={props.value || ''} onBlur={props.onBlur} onChange={props.onChange} ref={ref} /> {props.error.length > 0 &&

    {props.error}

    } - ); + ) } -); +) -export default TextFieldset; +export default TextFieldset diff --git a/components/ToggleSwitch/index.tsx b/components/ToggleSwitch/index.tsx index 0da95735..dd51c65b 100644 --- a/components/ToggleSwitch/index.tsx +++ b/components/ToggleSwitch/index.tsx @@ -1,12 +1,12 @@ -import React from "react"; +import React from 'react' -import "./index.scss"; +import './index.scss' interface Props { - name: string; - checked: boolean; - editable: boolean; - onChange: (event: React.ChangeEvent) => void; + name: string + checked: boolean + editable: boolean + onChange: (event: React.ChangeEvent) => void } const ToggleSwitch: React.FC = (props: Props) => { @@ -25,7 +25,7 @@ const ToggleSwitch: React.FC = (props: Props) => { - ); -}; + ) +} -export default ToggleSwitch; +export default ToggleSwitch diff --git a/components/TopHeader/index.tsx b/components/TopHeader/index.tsx index 46d6ecd7..e7765cf9 100644 --- a/components/TopHeader/index.tsx +++ b/components/TopHeader/index.tsx @@ -1,103 +1,103 @@ -import React from "react"; -import { useSnapshot } from "valtio"; -import { getCookie, deleteCookie } from "cookies-next"; -import { useRouter } from "next/router"; -import { useTranslation } from "next-i18next"; +import React from 'react' +import { useSnapshot } from 'valtio' +import { getCookie, deleteCookie } from 'cookies-next' +import { useRouter } from 'next/router' +import { useTranslation } from 'next-i18next' -import clonedeep from "lodash.clonedeep"; +import clonedeep from 'lodash.clonedeep' -import api from "~utils/api"; -import { accountState, initialAccountState } from "~utils/accountState"; -import { appState, initialAppState } from "~utils/appState"; +import api from '~utils/api' +import { accountState, initialAccountState } from '~utils/accountState' +import { appState, initialAppState } from '~utils/appState' -import Header from "~components/Header"; -import Button from "~components/Button"; -import HeaderMenu from "~components/HeaderMenu"; +import Header from '~components/Header' +import Button from '~components/Button' +import HeaderMenu from '~components/HeaderMenu' const TopHeader = () => { - const { t } = useTranslation("common"); + const { t } = useTranslation('common') // Cookies - const accountCookie = getCookie("account"); - const userCookie = getCookie("user"); + const accountCookie = getCookie('account') + const userCookie = getCookie('user') - const headers = {}; + const headers = {} // accountCookies.account != null // ? { // Authorization: `Bearer ${accountCookies.account.access_token}`, // } // : {} - const { account } = useSnapshot(accountState); - const { party } = useSnapshot(appState); - const router = useRouter(); + const { account } = useSnapshot(accountState) + const { party } = useSnapshot(appState) + const router = useRouter() function copyToClipboard() { - const el = document.createElement("input"); - el.value = window.location.href; - el.id = "url-input"; - document.body.appendChild(el); + const el = document.createElement('input') + el.value = window.location.href + el.id = 'url-input' + document.body.appendChild(el) - el.select(); - document.execCommand("copy"); - el.remove(); + el.select() + document.execCommand('copy') + el.remove() } function newParty() { // Push the root URL - router.push("/"); + router.push('/') // Clean state - const resetState = clonedeep(initialAppState); + const resetState = clonedeep(initialAppState) Object.keys(resetState).forEach((key) => { - appState[key] = resetState[key]; - }); + appState[key] = resetState[key] + }) // Set party to be editable - appState.party.editable = true; + appState.party.editable = true } function logout() { - deleteCookie("account"); - deleteCookie("user"); + deleteCookie('account') + deleteCookie('user') // Clean state - const resetState = clonedeep(initialAccountState); + const resetState = clonedeep(initialAccountState) Object.keys(resetState).forEach((key) => { - if (key !== "language") accountState[key] = resetState[key]; - }); + if (key !== 'language') accountState[key] = resetState[key] + }) - if (router.route != "/new") appState.party.editable = false; + if (router.route != '/new') appState.party.editable = false - router.push("/"); - return false; + router.push('/') + return false } function toggleFavorite() { - if (party.favorited) unsaveFavorite(); - else saveFavorite(); + if (party.favorited) unsaveFavorite() + else saveFavorite() } function saveFavorite() { if (party.id) api.saveTeam({ id: party.id, params: headers }).then((response) => { - if (response.status == 201) appState.party.favorited = true; - }); - else console.error("Failed to save team: No party ID"); + if (response.status == 201) appState.party.favorited = true + }) + else console.error('Failed to save team: No party ID') } function unsaveFavorite() { if (party.id) api.unsaveTeam({ id: party.id, params: headers }).then((response) => { - if (response.status == 200) appState.party.favorited = false; - }); - else console.error("Failed to unsave team: No party ID"); + if (response.status == 200) appState.party.favorited = false + }) + else console.error('Failed to unsave team: No party ID') } const leftNav = () => { return (
    - + {account.user ? ( { )}
    - ); - }; + ) + } const saveButton = () => { if (party.favorited) @@ -117,38 +117,38 @@ const TopHeader = () => { - ); + ) else return ( - ); - }; + ) + } const rightNav = () => { return (
    - {router.route === "/p/[party]" && + {router.route === '/p/[party]' && account.user && (!party.user || party.user.id !== account.user.id) ? saveButton() - : ""} - {router.route === "/p/[party]" ? ( + : ''} + {router.route === '/p/[party]' ? ( ) : ( - "" + '' )}
    - ); - }; + ) + } - return
    ; -}; + return
    +} -export default TopHeader; +export default TopHeader diff --git a/components/UncapIndicator/index.tsx b/components/UncapIndicator/index.tsx index 1cf08e14..d71a6043 100644 --- a/components/UncapIndicator/index.tsx +++ b/components/UncapIndicator/index.tsx @@ -1,60 +1,60 @@ -import React, { useEffect, useRef, useState } from "react"; -import UncapStar from "~components/UncapStar"; +import React, { useEffect, useRef, useState } from 'react' +import UncapStar from '~components/UncapStar' -import "./index.scss"; +import './index.scss' interface Props { - type: "character" | "weapon" | "summon"; - rarity?: number; - uncapLevel?: number; - flb: boolean; - ulb: boolean; - special: boolean; - updateUncap?: (uncap: number) => void; + type: 'character' | 'weapon' | 'summon' + rarity?: number + uncapLevel?: number + flb: boolean + ulb: boolean + special: boolean + updateUncap?: (uncap: number) => void } const UncapIndicator = (props: Props) => { - const [uncap, setUncap] = useState(props.uncapLevel); + const [uncap, setUncap] = useState(props.uncapLevel) - const numStars = setNumStars(); + const numStars = setNumStars() function setNumStars() { - let numStars; + let numStars - if (props.type === "character") { + if (props.type === 'character') { if (props.special) { if (props.ulb) { - numStars = 5; + numStars = 5 } else if (props.flb) { - numStars = 4; + numStars = 4 } else { - numStars = 3; + numStars = 3 } } else { if (props.ulb) { - numStars = 6; + numStars = 6 } else if (props.flb) { - numStars = 5; + numStars = 5 } else { - numStars = 4; + numStars = 4 } } } else { if (props.ulb) { - numStars = 5; + numStars = 5 } else if (props.flb) { - numStars = 4; + numStars = 4 } else { - numStars = 3; + numStars = 3 } } - return numStars; + return numStars } function toggleStar(index: number, empty: boolean) { if (props.updateUncap) { - if (empty) props.updateUncap(index + 1); - else props.updateUncap(index); + if (empty) props.updateUncap(index + 1) + else props.updateUncap(index) } } @@ -67,8 +67,8 @@ const UncapIndicator = (props: Props) => { index={i} onClick={toggleStar} /> - ); - }; + ) + } const ulb = (i: number) => { return ( @@ -79,8 +79,8 @@ const UncapIndicator = (props: Props) => { index={i} onClick={toggleStar} /> - ); - }; + ) + } const flb = (i: number) => { return ( @@ -91,8 +91,8 @@ const UncapIndicator = (props: Props) => { index={i} onClick={toggleStar} /> - ); - }; + ) + } const mlb = (i: number) => { // console.log("MLB; Number of stars:", props.uncapLevel) @@ -103,27 +103,27 @@ const UncapIndicator = (props: Props) => { index={i} onClick={toggleStar} /> - ); - }; + ) + } return (
      {Array.from(Array(numStars)).map((x, i) => { - if (props.type === "character" && i > 4) { - if (props.special) return ulb(i); - else return transcendence(i); + if (props.type === 'character' && i > 4) { + if (props.special) return ulb(i) + else return transcendence(i) } else if ( - (props.special && props.type === "character" && i == 3) || - (props.type === "character" && i == 4) || - (props.type !== "character" && i > 2) + (props.special && props.type === 'character' && i == 3) || + (props.type === 'character' && i == 4) || + (props.type !== 'character' && i > 2) ) { - return flb(i); + return flb(i) } else { - return mlb(i); + return mlb(i) } })}
    - ); -}; + ) +} -export default UncapIndicator; +export default UncapIndicator diff --git a/components/UncapStar/index.scss b/components/UncapStar/index.scss index 88487e6d..0319a146 100644 --- a/components/UncapStar/index.scss +++ b/components/UncapStar/index.scss @@ -14,42 +14,42 @@ &.empty.flb, &.empty.ulb, &.empty.special { - background: url("/icons/uncap/empty.svg"); + background: url('/icons/uncap/empty.svg'); &:hover { - background: url("/icons/uncap/empty-hover.svg"); + background: url('/icons/uncap/empty-hover.svg'); } } &.mlb { - background: url("/icons/uncap/yellow.svg"); + background: url('/icons/uncap/yellow.svg'); &:hover { - background: url("/icons/uncap/yellow-hover.svg"); + background: url('/icons/uncap/yellow-hover.svg'); } } &.special { - background: url("/icons/uncap/red.svg"); + background: url('/icons/uncap/red.svg'); &:hover { - background: url("/icons/uncap/red-hover.svg"); + background: url('/icons/uncap/red-hover.svg'); } } &.flb { - background: url("/icons/uncap/blue.svg"); + background: url('/icons/uncap/blue.svg'); &:hover { - background: url("/icons/uncap/blue-hover.svg"); + background: url('/icons/uncap/blue-hover.svg'); } } &.ulb { - background: url("/icons/uncap/purple.svg"); + background: url('/icons/uncap/purple.svg'); &:hover { - background: url("/icons/uncap/purple-hover.svg"); + background: url('/icons/uncap/purple-hover.svg'); } } } diff --git a/components/UncapStar/index.tsx b/components/UncapStar/index.tsx index c52f4645..9b0969f7 100644 --- a/components/UncapStar/index.tsx +++ b/components/UncapStar/index.tsx @@ -1,15 +1,15 @@ -import React from "react"; -import classnames from "classnames"; +import React from 'react' +import classnames from 'classnames' -import "./index.scss"; +import './index.scss' interface Props { - empty: boolean; - special: boolean; - flb: boolean; - ulb: boolean; - index: number; - onClick: (index: number, empty: boolean) => void; + empty: boolean + special: boolean + flb: boolean + ulb: boolean + index: number + onClick: (index: number, empty: boolean) => void } const UncapStar = (props: Props) => { @@ -20,20 +20,20 @@ const UncapStar = (props: Props) => { mlb: !props.special, flb: props.flb, ulb: props.ulb, - }); + }) function clicked() { - props.onClick(props.index, props.empty); + props.onClick(props.index, props.empty) } - return
  • ; -}; + return
  • +} UncapStar.defaultProps = { empty: false, special: false, flb: false, ulb: false, -}; +} -export default UncapStar; +export default UncapStar diff --git a/components/WeaponGrid/index.tsx b/components/WeaponGrid/index.tsx index 3f7b52eb..ab5bd933 100644 --- a/components/WeaponGrid/index.tsx +++ b/components/WeaponGrid/index.tsx @@ -1,50 +1,50 @@ /* eslint-disable react-hooks/exhaustive-deps */ -import React, { useCallback, useEffect, useMemo, useState } from "react"; -import { getCookie } from "cookies-next"; -import { useSnapshot } from "valtio"; +import React, { useCallback, useEffect, useMemo, useState } from 'react' +import { getCookie } from 'cookies-next' +import { useSnapshot } from 'valtio' -import { AxiosResponse } from "axios"; -import debounce from "lodash.debounce"; +import { AxiosResponse } from 'axios' +import debounce from 'lodash.debounce' -import WeaponUnit from "~components/WeaponUnit"; -import ExtraWeapons from "~components/ExtraWeapons"; +import WeaponUnit from '~components/WeaponUnit' +import ExtraWeapons from '~components/ExtraWeapons' -import api from "~utils/api"; -import { appState } from "~utils/appState"; +import api from '~utils/api' +import { appState } from '~utils/appState' -import type { SearchableObject } from "~types"; +import type { SearchableObject } from '~types' -import "./index.scss"; +import './index.scss' // Props interface Props { - new: boolean; - weapons?: GridWeapon[]; - createParty: (extra: boolean) => Promise>; - pushHistory?: (path: string) => void; + new: boolean + weapons?: GridWeapon[] + createParty: (extra: boolean) => Promise> + pushHistory?: (path: string) => void } const WeaponGrid = (props: Props) => { // Constants - const numWeapons: number = 9; + const numWeapons: number = 9 // Cookies - const cookie = getCookie("account"); + const cookie = getCookie('account') const accountData: AccountCookie = cookie ? JSON.parse(cookie as string) - : null; + : null const headers = accountData ? { headers: { Authorization: `Bearer ${accountData.token}` } } - : {}; + : {} // Set up state for view management - const { party, grid } = useSnapshot(appState); - const [slug, setSlug] = useState(); + const { party, grid } = useSnapshot(appState) + const [slug, setSlug] = useState() // Create a temporary state to store previous weapon uncap values const [previousUncapValues, setPreviousUncapValues] = useState<{ - [key: number]: number; - }>({}); + [key: number]: number + }>({}) // Set the editable flag only on first load useEffect(() => { @@ -53,53 +53,53 @@ const WeaponGrid = (props: Props) => { (accountData && party.user && accountData.userId === party.user.id) || props.new ) - appState.party.editable = true; - else appState.party.editable = false; - }, [props.new, accountData, party]); + appState.party.editable = true + else appState.party.editable = false + }, [props.new, accountData, party]) // Initialize an array of current uncap values for each weapon useEffect(() => { - let initialPreviousUncapValues: { [key: number]: number } = {}; + let initialPreviousUncapValues: { [key: number]: number } = {} if (appState.grid.weapons.mainWeapon) initialPreviousUncapValues[-1] = - appState.grid.weapons.mainWeapon.uncap_level; + appState.grid.weapons.mainWeapon.uncap_level Object.values(appState.grid.weapons.allWeapons).map((o) => o ? (initialPreviousUncapValues[o.position] = o.uncap_level) : 0 - ); + ) - setPreviousUncapValues(initialPreviousUncapValues); - }, [appState.grid.weapons.mainWeapon, appState.grid.weapons.allWeapons]); + setPreviousUncapValues(initialPreviousUncapValues) + }, [appState.grid.weapons.mainWeapon, appState.grid.weapons.allWeapons]) // Methods: Adding an object from search function receiveWeaponFromSearch(object: SearchableObject, position: number) { - const weapon = object as Weapon; - if (position == 1) appState.party.element = weapon.element; + const weapon = object as Weapon + if (position == 1) appState.party.element = weapon.element if (!party.id) { props.createParty(party.extra).then((response) => { - const party = response.data.party; - appState.party.id = party.id; - setSlug(party.shortcode); + const party = response.data.party + appState.party.id = party.id + setSlug(party.shortcode) - if (props.pushHistory) props.pushHistory(`/p/${party.shortcode}`); + if (props.pushHistory) props.pushHistory(`/p/${party.shortcode}`) saveWeapon(party.id, weapon, position).then((response) => storeGridWeapon(response.data.grid_weapon) - ); - }); + ) + }) } else { saveWeapon(party.id, weapon, position).then((response) => storeGridWeapon(response.data.grid_weapon) - ); + ) } } async function saveWeapon(partyId: string, weapon: Weapon, position: number) { - let uncapLevel = 3; - if (weapon.uncap.ulb) uncapLevel = 5; - else if (weapon.uncap.flb) uncapLevel = 4; + let uncapLevel = 3 + if (weapon.uncap.ulb) uncapLevel = 5 + else if (weapon.uncap.flb) uncapLevel = 4 return await api.endpoints.weapons.create( { @@ -112,39 +112,39 @@ const WeaponGrid = (props: Props) => { }, }, headers - ); + ) } function storeGridWeapon(gridWeapon: GridWeapon) { if (gridWeapon.position == -1) { - appState.grid.weapons.mainWeapon = gridWeapon; - appState.party.element = gridWeapon.object.element; + appState.grid.weapons.mainWeapon = gridWeapon + appState.party.element = gridWeapon.object.element } else { // Store the grid unit at the correct position - appState.grid.weapons.allWeapons[gridWeapon.position] = gridWeapon; + appState.grid.weapons.allWeapons[gridWeapon.position] = gridWeapon } } // Methods: Updating uncap level // Note: Saves, but debouncing is not working properly async function saveUncap(id: string, position: number, uncapLevel: number) { - storePreviousUncapValue(position); + storePreviousUncapValue(position) try { if (uncapLevel != previousUncapValues[position]) - await api.updateUncap("weapon", id, uncapLevel).then((response) => { - storeGridWeapon(response.data.grid_weapon); - }); + await api.updateUncap('weapon', id, uncapLevel).then((response) => { + storeGridWeapon(response.data.grid_weapon) + }) } catch (error) { - console.error(error); + console.error(error) // Revert optimistic UI - updateUncapLevel(position, previousUncapValues[position]); + updateUncapLevel(position, previousUncapValues[position]) // Remove optimistic key - let newPreviousValues = { ...previousUncapValues }; - delete newPreviousValues[position]; - setPreviousUncapValues(newPreviousValues); + let newPreviousValues = { ...previousUncapValues } + delete newPreviousValues[position] + setPreviousUncapValues(newPreviousValues) } } @@ -153,56 +153,55 @@ const WeaponGrid = (props: Props) => { position: number, uncapLevel: number ) { - memoizeAction(id, position, uncapLevel); + memoizeAction(id, position, uncapLevel) // Optimistically update UI - updateUncapLevel(position, uncapLevel); + updateUncapLevel(position, uncapLevel) } const memoizeAction = useCallback( (id: string, position: number, uncapLevel: number) => { - debouncedAction(id, position, uncapLevel); + debouncedAction(id, position, uncapLevel) }, [props, previousUncapValues] - ); + ) const debouncedAction = useMemo( () => debounce((id, position, number) => { - saveUncap(id, position, number); + saveUncap(id, position, number) }, 500), [props, saveUncap] - ); + ) const updateUncapLevel = (position: number, uncapLevel: number) => { if (appState.grid.weapons.mainWeapon && position == -1) - appState.grid.weapons.mainWeapon.uncap_level = uncapLevel; + appState.grid.weapons.mainWeapon.uncap_level = uncapLevel else { - const weapon = appState.grid.weapons.allWeapons[position]; + const weapon = appState.grid.weapons.allWeapons[position] if (weapon) { - weapon.uncap_level = uncapLevel; - appState.grid.weapons.allWeapons[position] = weapon; + weapon.uncap_level = uncapLevel + appState.grid.weapons.allWeapons[position] = weapon } } - }; + } function storePreviousUncapValue(position: number) { // Save the current value in case of an unexpected result - let newPreviousValues = { ...previousUncapValues }; + let newPreviousValues = { ...previousUncapValues } if (appState.grid.weapons.mainWeapon && position == -1) { - newPreviousValues[position] = - appState.grid.weapons.mainWeapon.uncap_level; + newPreviousValues[position] = appState.grid.weapons.mainWeapon.uncap_level } else { - const weapon = appState.grid.weapons.allWeapons[position]; + const weapon = appState.grid.weapons.allWeapons[position] if (weapon) { - newPreviousValues[position] = weapon.uncap_level; + newPreviousValues[position] = weapon.uncap_level } else { - newPreviousValues[position] = 0; + newPreviousValues[position] = 0 } } - setPreviousUncapValues(newPreviousValues); + setPreviousUncapValues(newPreviousValues) } // Render: JSX components @@ -216,7 +215,7 @@ const WeaponGrid = (props: Props) => { updateObject={receiveWeaponFromSearch} updateUncap={initiateUncapUpdate} /> - ); + ) const weaponGridElement = Array.from(Array(numWeapons)).map((x, i) => { return ( @@ -230,8 +229,8 @@ const WeaponGrid = (props: Props) => { updateUncap={initiateUncapUpdate} /> - ); - }); + ) + }) const extraGridElement = ( { updateObject={receiveWeaponFromSearch} updateUncap={initiateUncapUpdate} /> - ); + ) return (
    @@ -251,10 +250,10 @@ const WeaponGrid = (props: Props) => {
    {(() => { - return party.extra ? extraGridElement : ""; + return party.extra ? extraGridElement : '' })()} - ); -}; + ) +} -export default WeaponGrid; +export default WeaponGrid diff --git a/components/WeaponHovercard/index.tsx b/components/WeaponHovercard/index.tsx index 2bd3d5b7..5b869500 100644 --- a/components/WeaponHovercard/index.tsx +++ b/components/WeaponHovercard/index.tsx @@ -1,134 +1,132 @@ -import React from "react"; -import { useRouter } from "next/router"; -import { useTranslation } from "next-i18next"; +import React from 'react' +import { useRouter } from 'next/router' +import { useTranslation } from 'next-i18next' -import * as HoverCard from "@radix-ui/react-hover-card"; +import * as HoverCard from '@radix-ui/react-hover-card' -import WeaponLabelIcon from "~components/WeaponLabelIcon"; -import UncapIndicator from "~components/UncapIndicator"; +import WeaponLabelIcon from '~components/WeaponLabelIcon' +import UncapIndicator from '~components/UncapIndicator' -import { axData } from "~utils/axData"; +import { axData } from '~utils/axData' -import "./index.scss"; +import './index.scss' interface Props { - gridWeapon: GridWeapon; - children: React.ReactNode; + gridWeapon: GridWeapon + children: React.ReactNode } interface KeyNames { [key: string]: { - [key: string]: string; - en: string; - ja: string; - }; + [key: string]: string + en: string + ja: string + } } const WeaponHovercard = (props: Props) => { - const router = useRouter(); - const { t } = useTranslation("common"); + const router = useRouter() + const { t } = useTranslation('common') const locale = - router.locale && ["en", "ja"].includes(router.locale) - ? router.locale - : "en"; + router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en' - const Element = ["null", "wind", "fire", "water", "earth", "dark", "light"]; + const Element = ['null', 'wind', 'fire', 'water', 'earth', 'dark', 'light'] const Proficiency = [ - "none", - "sword", - "dagger", - "axe", - "spear", - "bow", - "staff", - "fist", - "harp", - "gun", - "katana", - ]; + 'none', + 'sword', + 'dagger', + 'axe', + 'spear', + 'bow', + 'staff', + 'fist', + 'harp', + 'gun', + 'katana', + ] const WeaponKeyNames: KeyNames = { - "2": { - en: "Pendulum", - ja: "ペンデュラム", + '2': { + en: 'Pendulum', + ja: 'ペンデュラム', }, - "3": { - en: "Teluma", - ja: "テルマ", + '3': { + en: 'Teluma', + ja: 'テルマ', }, - "17": { - en: "Gauph Key", - ja: "ガフスキー", + '17': { + en: 'Gauph Key', + ja: 'ガフスキー', }, - "22": { - en: "Emblem", - ja: "エンブレム", + '22': { + en: 'Emblem', + ja: 'エンブレム', }, - }; + } const tintElement = props.gridWeapon.object.element == 0 && props.gridWeapon.element ? Element[props.gridWeapon.element] - : Element[props.gridWeapon.object.element]; + : Element[props.gridWeapon.object.element] const wikiUrl = `https://gbf.wiki/${props.gridWeapon.object.name.en.replaceAll( - " ", - "_" - )}`; + ' ', + '_' + )}` const hovercardSide = () => { - if (props.gridWeapon.position == -1) return "right"; + if (props.gridWeapon.position == -1) return 'right' else if ([6, 7, 8, 9, 10, 11].includes(props.gridWeapon.position)) - return "top"; - else return "bottom"; - }; + return 'top' + else return 'bottom' + } const createPrimaryAxSkillString = () => { - const primaryAxSkills = axData[props.gridWeapon.object.ax - 1]; + const primaryAxSkills = axData[props.gridWeapon.object.ax - 1] if (props.gridWeapon.ax) { - const simpleAxSkill = props.gridWeapon.ax[0]; + const simpleAxSkill = props.gridWeapon.ax[0] const axSkill = primaryAxSkills.find( (skill) => skill.id == simpleAxSkill.modifier - ); + ) return `${axSkill?.name[locale]} +${simpleAxSkill.strength}${ - axSkill?.suffix ? axSkill.suffix : "" - }`; + axSkill?.suffix ? axSkill.suffix : '' + }` } - return ""; - }; + return '' + } const createSecondaryAxSkillString = () => { - const primaryAxSkills = axData[props.gridWeapon.object.ax - 1]; + const primaryAxSkills = axData[props.gridWeapon.object.ax - 1] if (props.gridWeapon.ax) { - const primarySimpleAxSkill = props.gridWeapon.ax[0]; - const secondarySimpleAxSkill = props.gridWeapon.ax[1]; + const primarySimpleAxSkill = props.gridWeapon.ax[0] + const secondarySimpleAxSkill = props.gridWeapon.ax[1] const primaryAxSkill = primaryAxSkills.find( (skill) => skill.id == primarySimpleAxSkill.modifier - ); + ) if (primaryAxSkill && primaryAxSkill.secondary) { const secondaryAxSkill = primaryAxSkill.secondary.find( (skill) => skill.id == secondarySimpleAxSkill.modifier - ); + ) return `${secondaryAxSkill?.name[locale]} +${ secondarySimpleAxSkill.strength - }${secondaryAxSkill?.suffix ? secondaryAxSkill.suffix : ""}`; + }${secondaryAxSkill?.suffix ? secondaryAxSkill.suffix : ''}` } } - return ""; - }; + return '' + } function weaponImage() { - const weapon = props.gridWeapon.object; + const weapon = props.gridWeapon.object if (props.gridWeapon.object.element == 0 && props.gridWeapon.element) - return `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-grid/${weapon.granblue_id}_${props.gridWeapon.element}.jpg`; + return `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-grid/${weapon.granblue_id}_${props.gridWeapon.element}.jpg` else - return `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-grid/${weapon.granblue_id}.jpg`; + return `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-grid/${weapon.granblue_id}.jpg` } const keysSection = ( @@ -136,10 +134,10 @@ const WeaponHovercard = (props: Props) => { {WeaponKeyNames[props.gridWeapon.object.series] ? (
    {WeaponKeyNames[props.gridWeapon.object.series][locale]} - {locale === "en" ? "s" : ""} + {locale === 'en' ? 's' : ''}
    ) : ( - "" + '' )} {props.gridWeapon.weapon_keys @@ -151,21 +149,21 @@ const WeaponHovercard = (props: Props) => { > {props.gridWeapon.weapon_keys![i].name[locale]} - ); + ) }) - : ""} + : ''} - ); + ) const axSection = (
    -
    {t("modals.weapon.subtitles.ax_skills")}
    +
    {t('modals.weapon.subtitles.ax_skills')}
    AX1 {createPrimaryAxSkillString()} @@ -178,17 +176,17 @@ const WeaponHovercard = (props: Props) => { AX2 {createSecondaryAxSkillString()}
    ) : ( - "" + '' )}
    - ); + ) return ( @@ -216,7 +214,7 @@ const WeaponHovercard = (props: Props) => { } /> ) : ( - "" + '' )} { props.gridWeapon.ax[0].modifier && props.gridWeapon.ax[0].strength ? axSection - : ""} + : ''} {props.gridWeapon.weapon_keys && props.gridWeapon.weapon_keys.length > 0 ? keysSection - : ""} + : ''} - {t("buttons.wiki")} + {t('buttons.wiki')} - ); -}; + ) +} -export default WeaponHovercard; +export default WeaponHovercard diff --git a/components/WeaponKeyDropdown/index.tsx b/components/WeaponKeyDropdown/index.tsx index c3b8d75f..327eb65e 100644 --- a/components/WeaponKeyDropdown/index.tsx +++ b/components/WeaponKeyDropdown/index.tsx @@ -1,39 +1,39 @@ -import React, { useEffect, useState } from "react"; +import React, { useEffect, useState } from 'react' -import api from "~utils/api"; +import api from '~utils/api' -import "./index.scss"; +import './index.scss' // Props interface Props { - currentValue?: WeaponKey; - series: number; - slot: number; - onChange?: (event: React.ChangeEvent) => void; - onBlur?: (event: React.ChangeEvent) => void; + currentValue?: WeaponKey + series: number + slot: number + onChange?: (event: React.ChangeEvent) => void + onBlur?: (event: React.ChangeEvent) => void } const WeaponKeyDropdown = React.forwardRef( function useFieldSet(props, ref) { - const [keys, setKeys] = useState([]); - const [currentKey, setCurrentKey] = useState(""); + const [keys, setKeys] = useState([]) + const [currentKey, setCurrentKey] = useState('') const pendulumNames = [ - { en: "Pendulum", jp: "" }, - { en: "Chain", jp: "" }, - ]; + { en: 'Pendulum', jp: '' }, + { en: 'Chain', jp: '' }, + ] - const telumaNames = [{ en: "Teluma", jp: "" }]; - const emblemNames = [{ en: "Emblem", jp: "" }]; + const telumaNames = [{ en: 'Teluma', jp: '' }] + const emblemNames = [{ en: 'Emblem', jp: '' }] const gauphNames = [ - { en: "Gauph Key", jp: "" }, - { en: "Ultima Key", jp: "" }, - { en: "Gate of Omnipotence", jp: "" }, - ]; + { en: 'Gauph Key', jp: '' }, + { en: 'Ultima Key', jp: '' }, + { en: 'Gate of Omnipotence', jp: '' }, + ] useEffect(() => { - if (props.currentValue) setCurrentKey(props.currentValue.id); - }, [props.currentValue]); + if (props.currentValue) setCurrentKey(props.currentValue.id) + }, [props.currentValue]) useEffect(() => { const filterParams = { @@ -41,36 +41,36 @@ const WeaponKeyDropdown = React.forwardRef( series: props.series, slot: props.slot, }, - }; + } function organizeWeaponKeys(weaponKeys: WeaponKey[]) { const numGroups = Math.max.apply( Math, weaponKeys.map((key) => key.group) - ); - let groupedKeys = []; + ) + let groupedKeys = [] for (let i = 0; i <= numGroups; i++) { - groupedKeys[i] = weaponKeys.filter((key) => key.group == i); + groupedKeys[i] = weaponKeys.filter((key) => key.group == i) } - setKeys(groupedKeys); + setKeys(groupedKeys) } function fetchWeaponKeys() { api.endpoints.weapon_keys.getAll(filterParams).then((response) => { - const keys = response.data.map((k: any) => k.weapon_key); - organizeWeaponKeys(keys); - }); + const keys = response.data.map((k: any) => k.weapon_key) + organizeWeaponKeys(keys) + }) } - fetchWeaponKeys(); - }, [props.series, props.slot]); + fetchWeaponKeys() + }, [props.series, props.slot]) function weaponKeyGroup(index: number) { - ["α", "β", "γ", "Δ"].sort((a, b) => a.localeCompare(b, "el")); + ;['α', 'β', 'γ', 'Δ'].sort((a, b) => a.localeCompare(b, 'el')) const sortByOrder = (a: WeaponKey, b: WeaponKey) => - a.order > b.order ? 1 : -1; + a.order > b.order ? 1 : -1 const options = keys && @@ -81,16 +81,16 @@ const WeaponKeyDropdown = React.forwardRef( - ); - }); + ) + }) - let name: { [key: string]: string } = {}; - if (props.series == 2 && index == 0) name = pendulumNames[0]; + let name: { [key: string]: string } = {} + if (props.series == 2 && index == 0) name = pendulumNames[0] else if (props.series == 2 && props.slot == 1 && index == 1) - name = pendulumNames[1]; - else if (props.series == 3) name = telumaNames[index]; - else if (props.series == 17) name = gauphNames[props.slot]; - else if (props.series == 22) name = emblemNames[index]; + name = pendulumNames[1] + else if (props.series == 3) name = telumaNames[index] + else if (props.series == 17) name = gauphNames[props.slot] + else if (props.series == 22) name = emblemNames[index] return ( ( > {options} - ); + ) } function handleChange(event: React.ChangeEvent) { - if (props.onChange) props.onChange(event); + if (props.onChange) props.onChange(event) - setCurrentKey(event.currentTarget.value); + setCurrentKey(event.currentTarget.value) } const emptyOption = () => { - let name = ""; - if (props.series == 2) name = pendulumNames[0].en; - else if (props.series == 3) name = telumaNames[0].en; - else if (props.series == 17) name = gauphNames[props.slot].en; - else if (props.series == 22) name = emblemNames[0].en; + let name = '' + if (props.series == 2) name = pendulumNames[0].en + else if (props.series == 3) name = telumaNames[0].en + else if (props.series == 17) name = gauphNames[props.slot].en + else if (props.series == 22) name = emblemNames[0].en - return `No ${name}`; - }; + return `No ${name}` + } return ( - ); + ) } -); +) -export default WeaponKeyDropdown; +export default WeaponKeyDropdown diff --git a/components/WeaponLabelIcon/index.scss b/components/WeaponLabelIcon/index.scss index 7b83498d..6ea874ab 100644 --- a/components/WeaponLabelIcon/index.scss +++ b/components/WeaponLabelIcon/index.scss @@ -7,140 +7,140 @@ /* Elements */ &.fire.en { - background-image: url("/labels/element/fire_en.png"); + background-image: url('/labels/element/fire_en.png'); } &.fire.ja { - background-image: url("/labels/element/fire_ja.png"); + background-image: url('/labels/element/fire_ja.png'); } &.water.en { - background-image: url("/labels/element/water_en.png"); + background-image: url('/labels/element/water_en.png'); } &.water.ja { - background-image: url("/labels/element/water_ja.png"); + background-image: url('/labels/element/water_ja.png'); } &.earth.en { - background-image: url("/labels/element/earth_en.png"); + background-image: url('/labels/element/earth_en.png'); } &.earth.ja { - background-image: url("/labels/element/earth_ja.png"); + background-image: url('/labels/element/earth_ja.png'); } &.wind.en { - background-image: url("/labels/element/wind_en.png"); + background-image: url('/labels/element/wind_en.png'); } &.wind.ja { - background-image: url("/labels/element/wind_ja.png"); + background-image: url('/labels/element/wind_ja.png'); } &.dark.en { - background-image: url("/labels/element/dark_en.png"); + background-image: url('/labels/element/dark_en.png'); } &.dark.ja { - background-image: url("/labels/element/dark_ja.png"); + background-image: url('/labels/element/dark_ja.png'); } &.light.en { - background-image: url("/labels/element/light_en.png"); + background-image: url('/labels/element/light_en.png'); } &.light.ja { - background-image: url("/labels/element/light_ja.png"); + background-image: url('/labels/element/light_ja.png'); } &.null.en { - background-image: url("/labels/element/any_en.png"); + background-image: url('/labels/element/any_en.png'); } &.null.ja { - background-image: url("/labels/element/any_ja.png"); + background-image: url('/labels/element/any_ja.png'); } /* Proficiencies */ &.sword.en { - background-image: url("/labels/proficiency/sabre_en.png"); + background-image: url('/labels/proficiency/sabre_en.png'); } &.sword.ja { - background-image: url("/labels/proficiency/sabre_ja.png"); + background-image: url('/labels/proficiency/sabre_ja.png'); } &.dagger.en { - background-image: url("/labels/proficiency/dagger_en.png"); + background-image: url('/labels/proficiency/dagger_en.png'); } &.dagger.ja { - background-image: url("/labels/proficiency/dagger_ja.png"); + background-image: url('/labels/proficiency/dagger_ja.png'); } &.axe.en { - background-image: url("/labels/proficiency/axe_en.png"); + background-image: url('/labels/proficiency/axe_en.png'); } &.axe.ja { - background-image: url("/labels/proficiency/axe_ja.png"); + background-image: url('/labels/proficiency/axe_ja.png'); } &.spear.en { - background-image: url("/labels/proficiency/spear_en.png"); + background-image: url('/labels/proficiency/spear_en.png'); } &.spear.ja { - background-image: url("/labels/proficiency/spear_ja.png"); + background-image: url('/labels/proficiency/spear_ja.png'); } &.staff.en { - background-image: url("/labels/proficiency/staff_en.png"); + background-image: url('/labels/proficiency/staff_en.png'); } &.staff.ja { - background-image: url("/labels/proficiency/staff_ja.png"); + background-image: url('/labels/proficiency/staff_ja.png'); } &.fist.en { - background-image: url("/labels/proficiency/melee_en.png"); + background-image: url('/labels/proficiency/melee_en.png'); } &.fist.ja { - background-image: url("/labels/proficiency/melee_ja.png"); + background-image: url('/labels/proficiency/melee_ja.png'); } &.harp.en { - background-image: url("/labels/proficiency/harp_en.png"); + background-image: url('/labels/proficiency/harp_en.png'); } &.harp.ja { - background-image: url("/labels/proficiency/harp_ja.png"); + background-image: url('/labels/proficiency/harp_ja.png'); } &.gun.en { - background-image: url("/labels/proficiency/gun_en.png"); + background-image: url('/labels/proficiency/gun_en.png'); } &.gun.ja { - background-image: url("/labels/proficiency/gun_ja.png"); + background-image: url('/labels/proficiency/gun_ja.png'); } &.bow.en { - background-image: url("/labels/proficiency/bow_en.png"); + background-image: url('/labels/proficiency/bow_en.png'); } &.bow.ja { - background-image: url("/labels/proficiency/bow_ja.png"); + background-image: url('/labels/proficiency/bow_ja.png'); } &.katana.en { - background-image: url("/labels/proficiency/katana_en.png"); + background-image: url('/labels/proficiency/katana_en.png'); } &.katana.ja { - background-image: url("/labels/proficiency/katana_ja.png"); + background-image: url('/labels/proficiency/katana_ja.png'); } } diff --git a/components/WeaponLabelIcon/index.tsx b/components/WeaponLabelIcon/index.tsx index 5503e610..477716cd 100644 --- a/components/WeaponLabelIcon/index.tsx +++ b/components/WeaponLabelIcon/index.tsx @@ -1,18 +1,16 @@ -import React from "react"; -import { useRouter } from "next/router"; +import React from 'react' +import { useRouter } from 'next/router' -import "./index.scss"; +import './index.scss' interface Props { - labelType: string; + labelType: string } const WeaponLabelIcon = (props: Props) => { - const router = useRouter(); + const router = useRouter() - return ( - - ); -}; + return +} -export default WeaponLabelIcon; +export default WeaponLabelIcon diff --git a/components/WeaponModal/index.tsx b/components/WeaponModal/index.tsx index 4581079d..203085f4 100644 --- a/components/WeaponModal/index.tsx +++ b/components/WeaponModal/index.tsx @@ -1,71 +1,69 @@ -import React, { useState } from "react"; -import { getCookie } from "cookies-next"; -import { useRouter } from "next/router"; -import { useTranslation } from "next-i18next"; -import { AxiosResponse } from "axios"; +import React, { useState } from 'react' +import { getCookie } from 'cookies-next' +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: { - element?: number; - weapon_key1_id?: string; - weapon_key2_id?: string; - weapon_key3_id?: string; - ax_modifier1?: number; - ax_modifier2?: number; - ax_strength1?: number; - ax_strength2?: number; - }; + element?: number + weapon_key1_id?: string + weapon_key2_id?: string + weapon_key3_id?: string + ax_modifier1?: number + ax_modifier2?: number + ax_strength1?: number + ax_strength2?: number + } } interface Props { - gridWeapon: GridWeapon; - children: React.ReactNode; + gridWeapon: GridWeapon + children: React.ReactNode } const WeaponModal = (props: Props) => { - const router = useRouter(); + const router = useRouter() const locale = - router.locale && ["en", "ja"].includes(router.locale) - ? router.locale - : "en"; - const { t } = useTranslation("common"); + router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en' + const { t } = useTranslation('common') // Cookies - const cookie = getCookie("account"); + const cookie = getCookie('account') const accountData: AccountCookie = cookie ? JSON.parse(cookie as string) - : null; + : null const headers = accountData ? { Authorization: `Bearer ${accountData.token}` } - : {}; + : {} // Refs - const weaponKey1Select = React.createRef(); - const weaponKey2Select = React.createRef(); - const weaponKey3Select = React.createRef(); + const weaponKey1Select = React.createRef() + const weaponKey2Select = React.createRef() + const weaponKey3Select = React.createRef() // State - const [open, setOpen] = useState(false); - const [formValid, setFormValid] = useState(false); + const [open, setOpen] = useState(false) + const [formValid, setFormValid] = useState(false) - const [element, setElement] = useState(-1); - const [primaryAxModifier, setPrimaryAxModifier] = useState(-1); - const [secondaryAxModifier, setSecondaryAxModifier] = useState(-1); - const [primaryAxValue, setPrimaryAxValue] = useState(0.0); - const [secondaryAxValue, setSecondaryAxValue] = useState(0.0); + const [element, setElement] = useState(-1) + const [primaryAxModifier, setPrimaryAxModifier] = useState(-1) + const [secondaryAxModifier, setSecondaryAxModifier] = useState(-1) + const [primaryAxValue, setPrimaryAxValue] = useState(0.0) + const [secondaryAxValue, setSecondaryAxValue] = useState(0.0) function receiveAxValues( primaryAxModifier: number, @@ -73,82 +71,82 @@ const WeaponModal = (props: Props) => { secondaryAxModifier: number, secondaryAxValue: number ) { - setPrimaryAxModifier(primaryAxModifier); - setSecondaryAxModifier(secondaryAxModifier); + setPrimaryAxModifier(primaryAxModifier) + setSecondaryAxModifier(secondaryAxModifier) - setPrimaryAxValue(primaryAxValue); - setSecondaryAxValue(secondaryAxValue); + setPrimaryAxValue(primaryAxValue) + setSecondaryAxValue(secondaryAxValue) } function receiveAxValidity(isValid: boolean) { - setFormValid(isValid); + setFormValid(isValid) } function receiveElementValue(element: string) { - setElement(parseInt(element)); + setElement(parseInt(element)) } function prepareObject() { - let object: GridWeaponObject = { weapon: {} }; + 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; + object.weapon.weapon_key1_id = weaponKey1Select.current?.value if ([2, 3, 17].includes(props.gridWeapon.object.series)) - object.weapon.weapon_key2_id = weaponKey2Select.current?.value; + object.weapon.weapon_key2_id = weaponKey2Select.current?.value if (props.gridWeapon.object.series == 17) - object.weapon.weapon_key3_id = weaponKey3Select.current?.value; + object.weapon.weapon_key3_id = weaponKey3Select.current?.value if (props.gridWeapon.object.ax > 0) { - object.weapon.ax_modifier1 = primaryAxModifier; - object.weapon.ax_modifier2 = secondaryAxModifier; - object.weapon.ax_strength1 = primaryAxValue; - object.weapon.ax_strength2 = secondaryAxValue; + object.weapon.ax_modifier1 = primaryAxModifier + object.weapon.ax_modifier2 = secondaryAxModifier + object.weapon.ax_strength1 = primaryAxValue + object.weapon.ax_strength2 = secondaryAxValue } - return object; + return object } async function updateWeapon() { - const updateObject = prepareObject(); + const updateObject = prepareObject() return await api.endpoints.grid_weapons .update(props.gridWeapon.id, updateObject, headers) .then((response) => processResult(response)) - .catch((error) => processError(error)); + .catch((error) => processError(error)) } function processResult(response: AxiosResponse) { - const gridWeapon: GridWeapon = response.data.grid_weapon; + 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); + setOpen(false) } function processError(error: any) { - console.error(error); + console.error(error) } const elementSelect = () => { return (
    -

    {t("modals.weapon.subtitles.element")}

    +

    {t('modals.weapon.subtitles.element')}

    - ); - }; + ) + } const keySelect = () => { return (
    -

    {t("modals.weapon.subtitles.weapon_keys")}

    +

    {t('modals.weapon.subtitles.weapon_keys')}

    {[2, 3, 17, 22].includes(props.gridWeapon.object.series) ? ( { ref={weaponKey1Select} /> ) : ( - "" + '' )} {[2, 3, 17].includes(props.gridWeapon.object.series) ? ( @@ -176,7 +174,7 @@ const WeaponModal = (props: Props) => { ref={weaponKey2Select} /> ) : ( - "" + '' )} {props.gridWeapon.object.series == 17 ? ( @@ -191,16 +189,16 @@ const WeaponModal = (props: Props) => { ref={weaponKey3Select} /> ) : ( - "" + '' )}
    - ); - }; + ) + } const axSelect = () => { return (
    -

    {t("modals.weapon.subtitles.ax_skills")}

    +

    {t('modals.weapon.subtitles.ax_skills')}

    { sendValues={receiveAxValues} />
    - ); - }; + ) + } function openChange(open: boolean) { - setFormValid(false); - setOpen(open); + setFormValid(false) + setOpen(open) } return ( @@ -227,7 +225,7 @@ const WeaponModal = (props: Props) => {
    - {t("modals.weapon.title")} + {t('modals.weapon.title')} {props.gridWeapon.object.name[locale]} @@ -241,23 +239,23 @@ const WeaponModal = (props: Props) => {
    - {props.gridWeapon.object.element == 0 ? elementSelect() : ""} + {props.gridWeapon.object.element == 0 ? elementSelect() : ''} {[2, 3, 17, 24].includes(props.gridWeapon.object.series) ? keySelect() - : ""} - {props.gridWeapon.object.ax > 0 ? axSelect() : ""} + : ''} + {props.gridWeapon.object.ax > 0 ? axSelect() : ''}
    - ); -}; + ) +} -export default WeaponModal; +export default WeaponModal diff --git a/components/WeaponResult/index.tsx b/components/WeaponResult/index.tsx index ea69ca7e..3ea17f6c 100644 --- a/components/WeaponResult/index.tsx +++ b/components/WeaponResult/index.tsx @@ -1,65 +1,63 @@ -import React from "react"; -import { useRouter } from "next/router"; +import React from 'react' +import { useRouter } from 'next/router' -import UncapIndicator from "~components/UncapIndicator"; -import WeaponLabelIcon from "~components/WeaponLabelIcon"; +import UncapIndicator from '~components/UncapIndicator' +import WeaponLabelIcon from '~components/WeaponLabelIcon' -import "./index.scss"; +import './index.scss' interface Props { - data: Weapon; - onClick: () => void; + data: Weapon + onClick: () => void } -const Element = ["null", "wind", "fire", "water", "earth", "dark", "light"]; +const Element = ['null', 'wind', 'fire', 'water', 'earth', 'dark', 'light'] const Proficiency = [ - "none", - "sword", - "dagger", - "axe", - "spear", - "bow", - "staff", - "fist", - "harp", - "gun", - "katana", -]; + 'none', + 'sword', + 'dagger', + 'axe', + 'spear', + 'bow', + 'staff', + 'fist', + 'harp', + 'gun', + 'katana', +] const Series = [ - "seraphic", - "grand", - "opus", - "draconic", - "revenant", - "primal", - "beast", - "regalia", - "omega", - "olden_primal", - "hollowsky", - "xeno", - "astral", - "rose", - "ultima", - "bahamut", - "epic", - "ennead", - "cosmos", - "ancestral", - "superlative", - "vintage", - "class_champion", - "sephira", - "new_world_foundation", -]; + 'seraphic', + 'grand', + 'opus', + 'draconic', + 'revenant', + 'primal', + 'beast', + 'regalia', + 'omega', + 'olden_primal', + 'hollowsky', + 'xeno', + 'astral', + 'rose', + 'ultima', + 'bahamut', + 'epic', + 'ennead', + 'cosmos', + 'ancestral', + 'superlative', + 'vintage', + 'class_champion', + 'sephira', + 'new_world_foundation', +] const WeaponResult = (props: Props) => { - const router = useRouter(); + const router = useRouter() const locale = - router.locale && ["en", "ja"].includes(router.locale) - ? router.locale - : "en"; - const weapon = props.data; + router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en' + const weapon = props.data return (
  • @@ -81,7 +79,7 @@ const WeaponResult = (props: Props) => {
    • - ); -}; + ) +} -export default WeaponResult; +export default WeaponResult diff --git a/components/WeaponSearchFilterBar/index.tsx b/components/WeaponSearchFilterBar/index.tsx index b21e3fae..e75f6ec4 100644 --- a/components/WeaponSearchFilterBar/index.tsx +++ b/components/WeaponSearchFilterBar/index.tsx @@ -1,141 +1,141 @@ -import React, { useEffect, useState } from "react"; -import { useTranslation } from "next-i18next"; +import React, { useEffect, useState } from 'react' +import { useTranslation } from 'next-i18next' -import cloneDeep from "lodash.clonedeep"; +import cloneDeep from 'lodash.clonedeep' -import * as DropdownMenu from "@radix-ui/react-dropdown-menu"; +import * as DropdownMenu from '@radix-ui/react-dropdown-menu' -import SearchFilter from "~components/SearchFilter"; -import SearchFilterCheckboxItem from "~components/SearchFilterCheckboxItem"; +import SearchFilter from '~components/SearchFilter' +import SearchFilterCheckboxItem from '~components/SearchFilterCheckboxItem' -import "./index.scss"; +import './index.scss' import { emptyElementState, emptyProficiencyState, emptyRarityState, emptyWeaponSeriesState, -} from "~utils/emptyStates"; +} from '~utils/emptyStates' import { elements, proficiencies, rarities, weaponSeries, -} from "~utils/stateValues"; +} from '~utils/stateValues' interface Props { - sendFilters: (filters: { [key: string]: number[] }) => void; + sendFilters: (filters: { [key: string]: number[] }) => void } const WeaponSearchFilterBar = (props: Props) => { - const { t } = useTranslation("common"); + const { t } = useTranslation('common') - const [rarityMenu, setRarityMenu] = useState(false); - const [elementMenu, setElementMenu] = useState(false); - const [proficiencyMenu, setProficiencyMenu] = useState(false); - const [seriesMenu, setSeriesMenu] = useState(false); + const [rarityMenu, setRarityMenu] = useState(false) + const [elementMenu, setElementMenu] = useState(false) + const [proficiencyMenu, setProficiencyMenu] = useState(false) + const [seriesMenu, setSeriesMenu] = useState(false) - const [rarityState, setRarityState] = useState(emptyRarityState); + const [rarityState, setRarityState] = useState(emptyRarityState) const [elementState, setElementState] = - useState(emptyElementState); + useState(emptyElementState) const [proficiencyState, setProficiencyState] = useState( emptyProficiencyState - ); + ) const [seriesState, setSeriesState] = useState( emptyWeaponSeriesState - ); + ) function rarityMenuOpened(open: boolean) { if (open) { - setRarityMenu(true); - setElementMenu(false); - setProficiencyMenu(false); - setSeriesMenu(false); - } else setRarityMenu(false); + setRarityMenu(true) + setElementMenu(false) + setProficiencyMenu(false) + setSeriesMenu(false) + } else setRarityMenu(false) } function elementMenuOpened(open: boolean) { if (open) { - setRarityMenu(false); - setElementMenu(true); - setProficiencyMenu(false); - setSeriesMenu(false); - } else setElementMenu(false); + setRarityMenu(false) + setElementMenu(true) + setProficiencyMenu(false) + setSeriesMenu(false) + } else setElementMenu(false) } function proficiencyMenuOpened(open: boolean) { if (open) { - setRarityMenu(false); - setElementMenu(false); - setProficiencyMenu(true); - setSeriesMenu(false); - } else setProficiencyMenu(false); + setRarityMenu(false) + setElementMenu(false) + setProficiencyMenu(true) + setSeriesMenu(false) + } else setProficiencyMenu(false) } function seriesMenuOpened(open: boolean) { if (open) { - setRarityMenu(false); - setElementMenu(false); - setProficiencyMenu(false); - setSeriesMenu(true); - } else setSeriesMenu(false); + setRarityMenu(false) + setElementMenu(false) + setProficiencyMenu(false) + setSeriesMenu(true) + } else setSeriesMenu(false) } function handleRarityChange(checked: boolean, key: string) { - let newRarityState = cloneDeep(rarityState); - newRarityState[key].checked = checked; - setRarityState(newRarityState); + let newRarityState = cloneDeep(rarityState) + newRarityState[key].checked = checked + setRarityState(newRarityState) } function handleElementChange(checked: boolean, key: string) { - let newElementState = cloneDeep(elementState); - newElementState[key].checked = checked; - setElementState(newElementState); + let newElementState = cloneDeep(elementState) + newElementState[key].checked = checked + setElementState(newElementState) } function handleProficiencyChange(checked: boolean, key: string) { - let newProficiencyState = cloneDeep(proficiencyState); - newProficiencyState[key].checked = checked; - setProficiencyState(newProficiencyState); + let newProficiencyState = cloneDeep(proficiencyState) + newProficiencyState[key].checked = checked + setProficiencyState(newProficiencyState) } function handleSeriesChange(checked: boolean, key: string) { - let newSeriesState = cloneDeep(seriesState); - newSeriesState[key].checked = checked; - setSeriesState(newSeriesState); + let newSeriesState = cloneDeep(seriesState) + newSeriesState[key].checked = checked + setSeriesState(newSeriesState) } function sendFilters() { const checkedRarityFilters = Object.values(rarityState) .filter((x) => x.checked) - .map((x, i) => x.id); + .map((x, i) => x.id) const checkedElementFilters = Object.values(elementState) .filter((x) => x.checked) - .map((x, i) => x.id); + .map((x, i) => x.id) const checkedProficiencyFilters = Object.values(proficiencyState) .filter((x) => x.checked) - .map((x, i) => x.id); + .map((x, i) => x.id) const checkedSeriesFilters = Object.values(seriesState) .filter((x) => x.checked) - .map((x, i) => x.id); + .map((x, i) => x.id) const filters = { rarity: checkedRarityFilters, element: checkedElementFilters, proficiency1: checkedProficiencyFilters, series: checkedSeriesFilters, - }; + } - props.sendFilters(filters); + props.sendFilters(filters) } useEffect(() => { - sendFilters(); - }, [rarityState, elementState, proficiencyState, seriesState]); + sendFilters() + }, [rarityState, elementState, proficiencyState, seriesState]) return (
    x.checked) @@ -145,7 +145,7 @@ const WeaponSearchFilterBar = (props: Props) => { onOpenChange={rarityMenuOpened} > - {t("filters.labels.rarity")} + {t('filters.labels.rarity')} {Array.from(Array(rarities.length)).map((x, i) => { return ( @@ -157,12 +157,12 @@ const WeaponSearchFilterBar = (props: Props) => { > {t(`rarities.${rarities[i]}`)} - ); + ) })} x.checked) @@ -172,7 +172,7 @@ const WeaponSearchFilterBar = (props: Props) => { onOpenChange={elementMenuOpened} > - {t("filters.labels.element")} + {t('filters.labels.element')} {Array.from(Array(elements.length)).map((x, i) => { return ( @@ -184,12 +184,12 @@ const WeaponSearchFilterBar = (props: Props) => { > {t(`elements.${elements[i]}`)} - ); + ) })} x.checked) @@ -199,7 +199,7 @@ const WeaponSearchFilterBar = (props: Props) => { onOpenChange={proficiencyMenuOpened} > - {t("filters.labels.proficiency")} + {t('filters.labels.proficiency')}
    @@ -213,7 +213,7 @@ const WeaponSearchFilterBar = (props: Props) => { > {t(`proficiencies.${proficiencies[i]}`)} - ); + ) })} @@ -235,14 +235,14 @@ const WeaponSearchFilterBar = (props: Props) => { }` )} - ); + ) })}
    x.checked) @@ -252,7 +252,7 @@ const WeaponSearchFilterBar = (props: Props) => { onOpenChange={seriesMenuOpened} > - {t("filters.labels.series")} + {t('filters.labels.series')}
    @@ -266,7 +266,7 @@ const WeaponSearchFilterBar = (props: Props) => { > {t(`series.${weaponSeries[i]}`)} - ); + ) })} @@ -283,7 +283,7 @@ const WeaponSearchFilterBar = (props: Props) => { > {t(`series.${weaponSeries[i + weaponSeries.length / 3]}`)} - ); + ) })} @@ -302,13 +302,13 @@ const WeaponSearchFilterBar = (props: Props) => { `series.${weaponSeries[i + 2 * (weaponSeries.length / 3)]}` )} - ); + ) })}
    - ); -}; + ) +} -export default WeaponSearchFilterBar; +export default WeaponSearchFilterBar diff --git a/components/WeaponUnit/index.tsx b/components/WeaponUnit/index.tsx index d6f97d45..7346240d 100644 --- a/components/WeaponUnit/index.tsx +++ b/components/WeaponUnit/index.tsx @@ -1,39 +1,37 @@ -import React, { useEffect, useState } from "react"; -import { useRouter } from "next/router"; -import { useTranslation } from "next-i18next"; -import classnames from "classnames"; +import React, { useEffect, useState } from 'react' +import { useRouter } from 'next/router' +import { useTranslation } from 'next-i18next' +import classnames from 'classnames' -import SearchModal from "~components/SearchModal"; -import WeaponModal from "~components/WeaponModal"; -import WeaponHovercard from "~components/WeaponHovercard"; -import UncapIndicator from "~components/UncapIndicator"; -import Button from "~components/Button"; +import SearchModal from '~components/SearchModal' +import WeaponModal from '~components/WeaponModal' +import WeaponHovercard from '~components/WeaponHovercard' +import UncapIndicator from '~components/UncapIndicator' +import Button from '~components/Button' -import { ButtonType } from "~utils/enums"; -import type { SearchableObject } from "~types"; +import { ButtonType } from '~utils/enums' +import type { SearchableObject } from '~types' -import PlusIcon from "~public/icons/Add.svg"; -import "./index.scss"; +import PlusIcon from '~public/icons/Add.svg' +import './index.scss' interface Props { - gridWeapon: GridWeapon | undefined; - unitType: 0 | 1; - position: number; - editable: boolean; - updateObject: (object: SearchableObject, position: number) => void; - updateUncap: (id: string, position: number, uncap: number) => void; + gridWeapon: GridWeapon | undefined + unitType: 0 | 1 + position: number + editable: boolean + updateObject: (object: SearchableObject, position: number) => void + updateUncap: (id: string, position: number, uncap: number) => void } const WeaponUnit = (props: Props) => { - const { t } = useTranslation("common"); + const { t } = useTranslation('common') - const [imageUrl, setImageUrl] = useState(""); + const [imageUrl, setImageUrl] = useState('') - const router = useRouter(); + const router = useRouter() const locale = - router.locale && ["en", "ja"].includes(router.locale) - ? router.locale - : "en"; + router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en' const classes = classnames({ WeaponUnit: true, @@ -41,48 +39,48 @@ const WeaponUnit = (props: Props) => { grid: props.unitType == 1, editable: props.editable, filled: props.gridWeapon !== undefined, - }); + }) - const gridWeapon = props.gridWeapon; - const weapon = gridWeapon?.object; + const gridWeapon = props.gridWeapon + const weapon = gridWeapon?.object useEffect(() => { - generateImageUrl(); - }); + generateImageUrl() + }) function generateImageUrl() { - let imgSrc = ""; + let imgSrc = '' if (props.gridWeapon) { - const weapon = props.gridWeapon.object!; + const weapon = props.gridWeapon.object! if (props.unitType == 0) { if (props.gridWeapon.object.element == 0 && props.gridWeapon.element) - imgSrc = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-main/${weapon.granblue_id}_${props.gridWeapon.element}.jpg`; + imgSrc = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-main/${weapon.granblue_id}_${props.gridWeapon.element}.jpg` else - imgSrc = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-main/${weapon.granblue_id}.jpg`; + imgSrc = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-main/${weapon.granblue_id}.jpg` } else { if (props.gridWeapon.object.element == 0 && props.gridWeapon.element) - imgSrc = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-grid/${weapon.granblue_id}_${props.gridWeapon.element}.jpg`; + imgSrc = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-grid/${weapon.granblue_id}_${props.gridWeapon.element}.jpg` else - imgSrc = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-grid/${weapon.granblue_id}.jpg`; + imgSrc = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-grid/${weapon.granblue_id}.jpg` } } - setImageUrl(imgSrc); + setImageUrl(imgSrc) } function passUncapData(uncap: number) { if (props.gridWeapon) - props.updateUncap(props.gridWeapon.id, props.position, uncap); + props.updateUncap(props.gridWeapon.id, props.position, uncap) } function canBeModified(gridWeapon: GridWeapon) { - const weapon = gridWeapon.object; + const weapon = gridWeapon.object return ( weapon.ax > 0 || (weapon.series && [2, 3, 17, 22, 24].includes(weapon.series)) - ); + ) } const image = ( @@ -93,21 +91,21 @@ const WeaponUnit = (props: Props) => { ) : ( - "" + '' )} - ); + ) const editableImage = ( {image} - ); + ) const unitContent = (
    @@ -118,7 +116,7 @@ const WeaponUnit = (props: Props) => {
    ) : ( - "" + '' )} {props.editable ? editableImage : image} {gridWeapon ? ( @@ -131,17 +129,17 @@ const WeaponUnit = (props: Props) => { special={false} /> ) : ( - "" + '' )}

    {weapon?.name[locale]}

    - ); + ) const withHovercard = ( {unitContent} - ); + ) - return gridWeapon && !props.editable ? withHovercard : unitContent; -}; + return gridWeapon && !props.editable ? withHovercard : unitContent +} -export default WeaponUnit; +export default WeaponUnit diff --git a/pages/[username].tsx b/pages/[username].tsx index 2cce1c25..d941828a 100644 --- a/pages/[username].tsx +++ b/pages/[username].tsx @@ -1,121 +1,121 @@ -import React, { useCallback, useEffect, useState } from "react"; -import Head from "next/head"; +import React, { useCallback, useEffect, useState } from 'react' +import Head from 'next/head' -import { getCookie } from "cookies-next"; -import { queryTypes, useQueryState } from "next-usequerystate"; -import { useRouter } from "next/router"; -import { useTranslation } from "next-i18next"; -import InfiniteScroll from "react-infinite-scroll-component"; +import { getCookie } from 'cookies-next' +import { queryTypes, useQueryState } from 'next-usequerystate' +import { useRouter } from 'next/router' +import { useTranslation } from 'next-i18next' +import InfiniteScroll from 'react-infinite-scroll-component' -import { serverSideTranslations } from "next-i18next/serverSideTranslations"; +import { serverSideTranslations } from 'next-i18next/serverSideTranslations' -import api from "~utils/api"; -import useDidMountEffect from "~utils/useDidMountEffect"; -import { elements, allElement } from "~utils/Element"; +import api from '~utils/api' +import useDidMountEffect from '~utils/useDidMountEffect' +import { elements, allElement } from '~utils/Element' -import GridRep from "~components/GridRep"; -import GridRepCollection from "~components/GridRepCollection"; -import FilterBar from "~components/FilterBar"; +import GridRep from '~components/GridRep' +import GridRepCollection from '~components/GridRepCollection' +import FilterBar from '~components/FilterBar' -import type { NextApiRequest, NextApiResponse } from "next"; +import type { NextApiRequest, NextApiResponse } from 'next' interface Props { - user?: User; - teams?: { count: number; total_pages: number; results: Party[] }; - raids: Raid[]; - sortedRaids: Raid[][]; + user?: User + teams?: { count: number; total_pages: number; results: Party[] } + raids: Raid[] + sortedRaids: Raid[][] } const ProfileRoute: React.FC = (props: Props) => { // Set up cookies - const cookie = getCookie("account"); + const cookie = getCookie('account') const accountData: AccountCookie = cookie ? JSON.parse(cookie as string) - : null; + : null const headers = accountData ? { Authorization: `Bearer ${accountData.token}` } - : {}; + : {} // Set up router - const router = useRouter(); - const { username } = router.query; + const router = useRouter() + const { username } = router.query // Import translations - const { t } = useTranslation("common"); + const { t } = useTranslation('common') // Set up app-specific states - const [raidsLoading, setRaidsLoading] = useState(true); - const [scrolled, setScrolled] = useState(false); + const [raidsLoading, setRaidsLoading] = useState(true) + const [scrolled, setScrolled] = useState(false) // Set up page-specific states - const [parties, setParties] = useState([]); - const [raids, setRaids] = useState(); - const [raid, setRaid] = useState(); + const [parties, setParties] = useState([]) + const [raids, setRaids] = useState() + const [raid, setRaid] = useState() // Set up infinite scrolling-related states - const [recordCount, setRecordCount] = useState(0); - const [currentPage, setCurrentPage] = useState(1); - const [totalPages, setTotalPages] = useState(1); + const [recordCount, setRecordCount] = useState(0) + const [currentPage, setCurrentPage] = useState(1) + const [totalPages, setTotalPages] = useState(1) // Set up filter-specific query states // Recency is in seconds - const [element, setElement] = useQueryState("element", { + const [element, setElement] = useQueryState('element', { defaultValue: -1, parse: (query: string) => parseElement(query), serialize: (value) => serializeElement(value), - }); - const [raidSlug, setRaidSlug] = useQueryState("raid", { - defaultValue: "all", - }); + }) + const [raidSlug, setRaidSlug] = useQueryState('raid', { + defaultValue: 'all', + }) const [recency, setRecency] = useQueryState( - "recency", + 'recency', queryTypes.integer.withDefault(-1) - ); + ) // Define transformers for element function parseElement(query: string) { let element: TeamElement | undefined = - query === "all" + query === 'all' ? allElement - : elements.find((element) => element.name.en.toLowerCase() === query); - return element ? element.id : -1; + : elements.find((element) => element.name.en.toLowerCase() === query) + return element ? element.id : -1 } function serializeElement(value: number | undefined) { - let name = ""; + let name = '' if (value != undefined) { - if (value == -1) name = allElement.name.en.toLowerCase(); - else name = elements[value].name.en.toLowerCase(); + if (value == -1) name = allElement.name.en.toLowerCase() + else name = elements[value].name.en.toLowerCase() } - return name; + return name } // Set the initial parties from props useEffect(() => { if (props.teams) { - setTotalPages(props.teams.total_pages); - setRecordCount(props.teams.count); - replaceResults(props.teams.count, props.teams.results); + setTotalPages(props.teams.total_pages) + setRecordCount(props.teams.count) + replaceResults(props.teams.count, props.teams.results) } - setCurrentPage(1); - }, []); + setCurrentPage(1) + }, []) // Add scroll event listener for shadow on FilterBar on mount useEffect(() => { - window.addEventListener("scroll", handleScroll); - return () => window.removeEventListener("scroll", handleScroll); - }, []); + window.addEventListener('scroll', handleScroll) + return () => window.removeEventListener('scroll', handleScroll) + }, []) // Handle errors const handleError = useCallback((error: any) => { if (error.response != null) { - console.error(error); + console.error(error) } else { - console.error("There was an error."); + console.error('There was an error.') } - }, []); + }, []) const fetchProfile = useCallback( ({ replace }: { replace: boolean }) => { @@ -126,7 +126,7 @@ const ProfileRoute: React.FC = (props: Props) => { recency: recency != -1 ? recency : undefined, page: currentPage, }, - }; + } if (username && !Array.isArray(username)) { api.endpoints.users @@ -135,62 +135,62 @@ const ProfileRoute: React.FC = (props: Props) => { params: { ...filters, ...{ headers: headers } }, }) .then((response) => { - setTotalPages(response.data.parties.total_pages); - setRecordCount(response.data.parties.count); + setTotalPages(response.data.parties.total_pages) + setRecordCount(response.data.parties.count) if (replace) replaceResults( response.data.parties.count, response.data.parties.results - ); - else appendResults(response.data.parties.results); + ) + else appendResults(response.data.parties.results) }) - .catch((error) => handleError(error)); + .catch((error) => handleError(error)) } }, [currentPage, parties, element, raid, recency] - ); + ) function replaceResults(count: number, list: Party[]) { if (count > 0) { - setParties(list.sort((a, b) => (a.created_at > b.created_at ? -1 : 1))); + setParties(list.sort((a, b) => (a.created_at > b.created_at ? -1 : 1))) } else { - setParties([]); + setParties([]) } } function appendResults(list: Party[]) { - setParties([...parties, ...list]); + setParties([...parties, ...list]) } // Fetch all raids on mount, then find the raid in the URL if present useEffect(() => { api.endpoints.raids.getAll().then((response) => { - const cleanRaids: Raid[] = response.data.map((r: any) => r.raid); - setRaids(cleanRaids); + const cleanRaids: Raid[] = response.data.map((r: any) => r.raid) + setRaids(cleanRaids) - setRaidsLoading(false); + setRaidsLoading(false) - const raid = cleanRaids.find((r) => r.slug === raidSlug); - setRaid(raid); + const raid = cleanRaids.find((r) => r.slug === raidSlug) + setRaid(raid) - return raid; - }); - }, [setRaids]); + return raid + }) + }, [setRaids]) // When the element, raid or recency filter changes, // fetch all teams again. useDidMountEffect(() => { - setCurrentPage(1); - fetchProfile({ replace: true }); - }, [element, raid, recency]); + setCurrentPage(1) + fetchProfile({ replace: true }) + }, [element, raid, recency]) // When the page changes, fetch all teams again. useDidMountEffect(() => { // Current page changed - if (currentPage > 1) fetchProfile({ replace: false }); - else if (currentPage == 1) fetchProfile({ replace: true }); - }, [currentPage]); + if (currentPage > 1) fetchProfile({ replace: false }) + else if (currentPage == 1) fetchProfile({ replace: true }) + }, [currentPage]) // Receive filters from the filter bar function receiveFilters({ @@ -198,30 +198,30 @@ const ProfileRoute: React.FC = (props: Props) => { raidSlug, recency, }: { - element?: number; - raidSlug?: string; - recency?: number; + element?: number + raidSlug?: string + recency?: number }) { - if (element == 0) setElement(0); - else if (element) setElement(element); + if (element == 0) setElement(0) + else if (element) setElement(element) if (raids && raidSlug) { - const raid = raids.find((raid) => raid.slug === raidSlug); - setRaid(raid); - setRaidSlug(raidSlug); + const raid = raids.find((raid) => raid.slug === raidSlug) + setRaid(raid) + setRaidSlug(raidSlug) } - if (recency) setRecency(recency); + if (recency) setRecency(recency) } // Methods: Navigation function handleScroll() { - if (window.pageYOffset > 90) setScrolled(true); - else setScrolled(false); + if (window.pageYOffset > 90) setScrolled(true) + else setScrolled(false) } function goTo(shortcode: string) { - router.push(`/p/${shortcode}`); + router.push(`/p/${shortcode}`) } // TODO: Add save functions @@ -240,8 +240,8 @@ const ProfileRoute: React.FC = (props: Props) => { key={`party-${i}`} onClick={goTo} /> - ); - }); + ) + }) } return ( @@ -309,25 +309,25 @@ const ProfileRoute: React.FC = (props: Props) => { {parties.length == 0 ? (
    -

    {t("teams.not_found")}

    +

    {t('teams.not_found')}

    ) : ( - "" + '' )} - ); -}; + ) +} export const getServerSidePaths = async () => { return { paths: [ // Object variant: - { params: { party: "string" } }, + { params: { party: 'string' } }, ], fallback: true, - }; -}; + } +} // prettier-ignore export const getServerSideProps = async ({ req, res, locale, query }: { req: NextApiRequest, res: NextApiResponse, locale: string, query: { [index: string]: string } }) => { @@ -403,31 +403,31 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex const organizeRaids = (raids: Raid[]) => { // Set up empty raid for "All raids" const all = { - id: "0", + id: '0', name: { - en: "All raids", - ja: "全て", + en: 'All raids', + ja: '全て', }, - slug: "all", + slug: 'all', level: 0, group: 0, element: 0, - }; + } const numGroups = Math.max.apply( Math, raids.map((raid) => raid.group) - ); - let groupedRaids = []; + ) + let groupedRaids = [] for (let i = 0; i <= numGroups; i++) { - groupedRaids[i] = raids.filter((raid) => raid.group == i); + groupedRaids[i] = raids.filter((raid) => raid.group == i) } return { raids: raids, sortedRaids: groupedRaids, - }; -}; + } +} -export default ProfileRoute; +export default ProfileRoute diff --git a/pages/_app.tsx b/pages/_app.tsx index adb2a362..1f403379 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,17 +1,17 @@ -import { useEffect } from "react" -import { getCookie } from "cookies-next" -import { appWithTranslation } from "next-i18next" -import { ThemeProvider } from "next-themes" +import { useEffect } from 'react' +import { getCookie } from 'cookies-next' +import { appWithTranslation } from 'next-i18next' +import { ThemeProvider } from 'next-themes' -import type { AppProps } from "next/app" -import Layout from "~components/Layout" +import type { AppProps } from 'next/app' +import Layout from '~components/Layout' -import { accountState } from "~utils/accountState" +import { accountState } from '~utils/accountState' -import "../styles/globals.scss" +import '../styles/globals.scss' function MyApp({ Component, pageProps }: AppProps) { - const cookie = getCookie("account") + const cookie = getCookie('account') const cookieData: AccountCookie = cookie ? JSON.parse(cookie as string) : null useEffect(() => { @@ -22,8 +22,8 @@ function MyApp({ Component, pageProps }: AppProps) { accountState.account.user = { id: cookieData.userId, username: cookieData.username, - picture: "", - element: "", + picture: '', + element: '', gender: 0, } } else { diff --git a/pages/new/index.tsx b/pages/new/index.tsx index 28970699..781f4b81 100644 --- a/pages/new/index.tsx +++ b/pages/new/index.tsx @@ -1,53 +1,53 @@ -import React, { useEffect } from "react"; -import { getCookie } from "cookies-next"; -import { serverSideTranslations } from "next-i18next/serverSideTranslations"; +import React, { useEffect } from 'react' +import { getCookie } from 'cookies-next' +import { serverSideTranslations } from 'next-i18next/serverSideTranslations' -import Party from "~components/Party"; +import Party from '~components/Party' -import { appState } from "~utils/appState"; -import api from "~utils/api"; +import { appState } from '~utils/appState' +import api from '~utils/api' -import type { NextApiRequest, NextApiResponse } from "next"; +import type { NextApiRequest, NextApiResponse } from 'next' interface Props { - jobs: Job[]; - jobSkills: JobSkill[]; - raids: Raid[]; - sortedRaids: Raid[][]; + jobs: Job[] + jobSkills: JobSkill[] + raids: Raid[] + sortedRaids: Raid[][] } const NewRoute: React.FC = (props: Props) => { function callback(path: string) { // This is scuffed, how do we do this natively? - window.history.replaceState(null, `Grid Tool`, `${path}`); + window.history.replaceState(null, `Grid Tool`, `${path}`) } useEffect(() => { - persistStaticData(); - }, [persistStaticData]); + persistStaticData() + }, [persistStaticData]) function persistStaticData() { - appState.raids = props.raids; - appState.jobs = props.jobs; - appState.jobSkills = props.jobSkills; + appState.raids = props.raids + appState.jobs = props.jobs + appState.jobSkills = props.jobSkills } return (
    - ); -}; + ) +} export const getServerSidePaths = async () => { return { paths: [ // Object variant: - { params: { party: "string" } }, + { params: { party: 'string' } }, ], fallback: true, - }; -}; + } +} // prettier-ignore export const getServerSideProps = async ({ req, res, locale, query }: { req: NextApiRequest, res: NextApiResponse, locale: string, query: { [index: string]: string } }) => { @@ -87,31 +87,31 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex const organizeRaids = (raids: Raid[]) => { // Set up empty raid for "All raids" const all = { - id: "0", + id: '0', name: { - en: "All raids", - ja: "全て", + en: 'All raids', + ja: '全て', }, - slug: "all", + slug: 'all', level: 0, group: 0, element: 0, - }; + } const numGroups = Math.max.apply( Math, raids.map((raid) => raid.group) - ); - let groupedRaids = []; + ) + let groupedRaids = [] for (let i = 0; i <= numGroups; i++) { - groupedRaids[i] = raids.filter((raid) => raid.group == i); + groupedRaids[i] = raids.filter((raid) => raid.group == i) } return { raids: raids, sortedRaids: groupedRaids, - }; -}; + } +} -export default NewRoute; +export default NewRoute diff --git a/pages/saved.tsx b/pages/saved.tsx index 304970e8..6ec6417c 100644 --- a/pages/saved.tsx +++ b/pages/saved.tsx @@ -1,120 +1,120 @@ -import React, { useCallback, useEffect, useState } from "react"; -import Head from "next/head"; +import React, { useCallback, useEffect, useState } from 'react' +import Head from 'next/head' -import { getCookie } from "cookies-next"; -import { queryTypes, useQueryState } from "next-usequerystate"; -import { useRouter } from "next/router"; -import { useTranslation } from "next-i18next"; -import InfiniteScroll from "react-infinite-scroll-component"; +import { getCookie } from 'cookies-next' +import { queryTypes, useQueryState } from 'next-usequerystate' +import { useRouter } from 'next/router' +import { useTranslation } from 'next-i18next' +import InfiniteScroll from 'react-infinite-scroll-component' -import { serverSideTranslations } from "next-i18next/serverSideTranslations"; -import clonedeep from "lodash.clonedeep"; +import { serverSideTranslations } from 'next-i18next/serverSideTranslations' +import clonedeep from 'lodash.clonedeep' -import api from "~utils/api"; -import useDidMountEffect from "~utils/useDidMountEffect"; -import { elements, allElement } from "~utils/Element"; +import api from '~utils/api' +import useDidMountEffect from '~utils/useDidMountEffect' +import { elements, allElement } from '~utils/Element' -import GridRep from "~components/GridRep"; -import GridRepCollection from "~components/GridRepCollection"; -import FilterBar from "~components/FilterBar"; +import GridRep from '~components/GridRep' +import GridRepCollection from '~components/GridRepCollection' +import FilterBar from '~components/FilterBar' -import type { NextApiRequest, NextApiResponse } from "next"; +import type { NextApiRequest, NextApiResponse } from 'next' interface Props { - teams?: { count: number; total_pages: number; results: Party[] }; - raids: Raid[]; - sortedRaids: Raid[][]; + teams?: { count: number; total_pages: number; results: Party[] } + raids: Raid[] + sortedRaids: Raid[][] } const SavedRoute: React.FC = (props: Props) => { // Set up cookies - const cookie = getCookie("account"); + const cookie = getCookie('account') const accountData: AccountCookie = cookie ? JSON.parse(cookie as string) - : null; + : null const headers = accountData ? { Authorization: `Bearer ${accountData.token}` } - : {}; + : {} // Set up router - const router = useRouter(); + const router = useRouter() // Import translations - const { t } = useTranslation("common"); + const { t } = useTranslation('common') // Set up app-specific states - const [raidsLoading, setRaidsLoading] = useState(true); - const [scrolled, setScrolled] = useState(false); + const [raidsLoading, setRaidsLoading] = useState(true) + const [scrolled, setScrolled] = useState(false) // Set up page-specific states - const [parties, setParties] = useState([]); - const [raids, setRaids] = useState(); - const [raid, setRaid] = useState(); + const [parties, setParties] = useState([]) + const [raids, setRaids] = useState() + const [raid, setRaid] = useState() // Set up infinite scrolling-related states - const [recordCount, setRecordCount] = useState(0); - const [currentPage, setCurrentPage] = useState(1); - const [totalPages, setTotalPages] = useState(1); + const [recordCount, setRecordCount] = useState(0) + const [currentPage, setCurrentPage] = useState(1) + const [totalPages, setTotalPages] = useState(1) // Set up filter-specific query states // Recency is in seconds - const [element, setElement] = useQueryState("element", { + const [element, setElement] = useQueryState('element', { defaultValue: -1, parse: (query: string) => parseElement(query), serialize: (value) => serializeElement(value), - }); - const [raidSlug, setRaidSlug] = useQueryState("raid", { - defaultValue: "all", - }); + }) + const [raidSlug, setRaidSlug] = useQueryState('raid', { + defaultValue: 'all', + }) const [recency, setRecency] = useQueryState( - "recency", + 'recency', queryTypes.integer.withDefault(-1) - ); + ) // Define transformers for element function parseElement(query: string) { let element: TeamElement | undefined = - query === "all" + query === 'all' ? allElement - : elements.find((element) => element.name.en.toLowerCase() === query); - return element ? element.id : -1; + : elements.find((element) => element.name.en.toLowerCase() === query) + return element ? element.id : -1 } function serializeElement(value: number | undefined) { - let name = ""; + let name = '' if (value != undefined) { - if (value == -1) name = allElement.name.en.toLowerCase(); - else name = elements[value].name.en.toLowerCase(); + if (value == -1) name = allElement.name.en.toLowerCase() + else name = elements[value].name.en.toLowerCase() } - return name; + return name } // Set the initial parties from props useEffect(() => { if (props.teams) { - setTotalPages(props.teams.total_pages); - setRecordCount(props.teams.count); - replaceResults(props.teams.count, props.teams.results); + setTotalPages(props.teams.total_pages) + setRecordCount(props.teams.count) + replaceResults(props.teams.count, props.teams.results) } - setCurrentPage(1); - }, []); + setCurrentPage(1) + }, []) // Add scroll event listener for shadow on FilterBar on mount useEffect(() => { - window.addEventListener("scroll", handleScroll); - return () => window.removeEventListener("scroll", handleScroll); - }, []); + window.addEventListener('scroll', handleScroll) + return () => window.removeEventListener('scroll', handleScroll) + }, []) // Handle errors const handleError = useCallback((error: any) => { if (error.response != null) { - console.error(error); + console.error(error) } else { - console.error("There was an error."); + console.error('There was an error.') } - }, []); + }, []) const fetchTeams = useCallback( ({ replace }: { replace: boolean }) => { @@ -125,63 +125,63 @@ const SavedRoute: React.FC = (props: Props) => { recency: recency != -1 ? recency : undefined, page: currentPage, }, - }; + } api .savedTeams({ ...filters, ...{ headers: headers } }) .then((response) => { - setTotalPages(response.data.total_pages); - setRecordCount(response.data.count); + setTotalPages(response.data.total_pages) + setRecordCount(response.data.count) if (replace) - replaceResults(response.data.count, response.data.results); - else appendResults(response.data.results); + replaceResults(response.data.count, response.data.results) + else appendResults(response.data.results) }) - .catch((error) => handleError(error)); + .catch((error) => handleError(error)) }, [currentPage, parties, element, raid, recency] - ); + ) function replaceResults(count: number, list: Party[]) { if (count > 0) { - setParties(list); + setParties(list) } else { - setParties([]); + setParties([]) } } function appendResults(list: Party[]) { - setParties([...parties, ...list]); + setParties([...parties, ...list]) } // Fetch all raids on mount, then find the raid in the URL if present useEffect(() => { api.endpoints.raids.getAll().then((response) => { - const cleanRaids: Raid[] = response.data.map((r: any) => r.raid); - setRaids(cleanRaids); + const cleanRaids: Raid[] = response.data.map((r: any) => r.raid) + setRaids(cleanRaids) - setRaidsLoading(false); + setRaidsLoading(false) - const raid = cleanRaids.find((r) => r.slug === raidSlug); - setRaid(raid); + const raid = cleanRaids.find((r) => r.slug === raidSlug) + setRaid(raid) - return raid; - }); - }, [setRaids]); + return raid + }) + }, [setRaids]) // When the element, raid or recency filter changes, // fetch all teams again. useDidMountEffect(() => { - setCurrentPage(1); - fetchTeams({ replace: true }); - }, [element, raid, recency]); + setCurrentPage(1) + fetchTeams({ replace: true }) + }, [element, raid, recency]) // When the page changes, fetch all teams again. useDidMountEffect(() => { // Current page changed - if (currentPage > 1) fetchTeams({ replace: false }); - else if (currentPage == 1) fetchTeams({ replace: true }); - }, [currentPage]); + if (currentPage > 1) fetchTeams({ replace: false }) + else if (currentPage == 1) fetchTeams({ replace: true }) + }, [currentPage]) // Receive filters from the filter bar function receiveFilters({ @@ -189,68 +189,68 @@ const SavedRoute: React.FC = (props: Props) => { raidSlug, recency, }: { - element?: number; - raidSlug?: string; - recency?: number; + element?: number + raidSlug?: string + recency?: number }) { - if (element == 0) setElement(0); - else if (element) setElement(element); + if (element == 0) setElement(0) + else if (element) setElement(element) if (raids && raidSlug) { - const raid = raids.find((raid) => raid.slug === raidSlug); - setRaid(raid); - setRaidSlug(raidSlug); + const raid = raids.find((raid) => raid.slug === raidSlug) + setRaid(raid) + setRaidSlug(raidSlug) } - if (recency) setRecency(recency); + if (recency) setRecency(recency) } // Methods: Favorites function toggleFavorite(teamId: string, favorited: boolean) { - if (favorited) unsaveFavorite(teamId); - else saveFavorite(teamId); + if (favorited) unsaveFavorite(teamId) + else saveFavorite(teamId) } function saveFavorite(teamId: string) { api.saveTeam({ id: teamId, params: headers }).then((response) => { if (response.status == 201) { - const index = parties.findIndex((p) => p.id === teamId); - const party = parties[index]; + const index = parties.findIndex((p) => p.id === teamId) + const party = parties[index] - party.favorited = true; + party.favorited = true - let clonedParties = clonedeep(parties); - clonedParties[index] = party; + let clonedParties = clonedeep(parties) + clonedParties[index] = party - setParties(clonedParties); + setParties(clonedParties) } - }); + }) } function unsaveFavorite(teamId: string) { api.unsaveTeam({ id: teamId, params: headers }).then((response) => { if (response.status == 200) { - const index = parties.findIndex((p) => p.id === teamId); - const party = parties[index]; + const index = parties.findIndex((p) => p.id === teamId) + const party = parties[index] - party.favorited = false; + party.favorited = false - let clonedParties = clonedeep(parties); - clonedParties.splice(index, 1); + let clonedParties = clonedeep(parties) + clonedParties.splice(index, 1) - setParties(clonedParties); + setParties(clonedParties) } - }); + }) } // Methods: Navigation function handleScroll() { - if (window.pageYOffset > 90) setScrolled(true); - else setScrolled(false); + if (window.pageYOffset > 90) setScrolled(true) + else setScrolled(false) } function goTo(shortcode: string) { - router.push(`/p/${shortcode}`); + router.push(`/p/${shortcode}`) } function renderParties() { @@ -270,14 +270,14 @@ const SavedRoute: React.FC = (props: Props) => { onClick={goTo} onSave={toggleFavorite} /> - ); - }); + ) + }) } return (
    - {t("saved.title")} + {t('saved.title')} @@ -295,7 +295,7 @@ const SavedRoute: React.FC = (props: Props) => { raidSlug={raidSlug ? raidSlug : undefined} recency={recency} > -

    {t("saved.title")}

    +

    {t('saved.title')}

    @@ -314,25 +314,25 @@ const SavedRoute: React.FC = (props: Props) => { {parties.length == 0 ? (
    -

    {t("saved.not_found")}

    +

    {t('saved.not_found')}

    ) : ( - "" + '' )}
    - ); -}; + ) +} export const getServerSidePaths = async () => { return { paths: [ // Object variant: - { params: { party: "string" } }, + { params: { party: 'string' } }, ], fallback: true, - }; -}; + } +} // prettier-ignore export const getServerSideProps = async ({ req, res, locale, query }: { req: NextApiRequest, res: NextApiResponse, locale: string, query: { [index: string]: string } }) => { @@ -399,31 +399,31 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex const organizeRaids = (raids: Raid[]) => { // Set up empty raid for "All raids" const all = { - id: "0", + id: '0', name: { - en: "All raids", - ja: "全て", + en: 'All raids', + ja: '全て', }, - slug: "all", + slug: 'all', level: 0, group: 0, element: 0, - }; + } const numGroups = Math.max.apply( Math, raids.map((raid) => raid.group) - ); - let groupedRaids = []; + ) + let groupedRaids = [] for (let i = 0; i <= numGroups; i++) { - groupedRaids[i] = raids.filter((raid) => raid.group == i); + groupedRaids[i] = raids.filter((raid) => raid.group == i) } return { raids: raids, sortedRaids: groupedRaids, - }; -}; + } +} -export default SavedRoute; +export default SavedRoute diff --git a/pages/teams.tsx b/pages/teams.tsx index b2405a9f..fa03697c 100644 --- a/pages/teams.tsx +++ b/pages/teams.tsx @@ -1,120 +1,120 @@ -import React, { useCallback, useEffect, useState } from "react"; -import Head from "next/head"; +import React, { useCallback, useEffect, useState } from 'react' +import Head from 'next/head' -import { getCookie } from "cookies-next"; -import { queryTypes, useQueryState } from "next-usequerystate"; -import { useRouter } from "next/router"; -import { useTranslation } from "next-i18next"; -import InfiniteScroll from "react-infinite-scroll-component"; +import { getCookie } from 'cookies-next' +import { queryTypes, useQueryState } from 'next-usequerystate' +import { useRouter } from 'next/router' +import { useTranslation } from 'next-i18next' +import InfiniteScroll from 'react-infinite-scroll-component' -import { serverSideTranslations } from "next-i18next/serverSideTranslations"; -import clonedeep from "lodash.clonedeep"; +import { serverSideTranslations } from 'next-i18next/serverSideTranslations' +import clonedeep from 'lodash.clonedeep' -import api from "~utils/api"; -import useDidMountEffect from "~utils/useDidMountEffect"; -import { elements, allElement } from "~utils/Element"; +import api from '~utils/api' +import useDidMountEffect from '~utils/useDidMountEffect' +import { elements, allElement } from '~utils/Element' -import GridRep from "~components/GridRep"; -import GridRepCollection from "~components/GridRepCollection"; -import FilterBar from "~components/FilterBar"; +import GridRep from '~components/GridRep' +import GridRepCollection from '~components/GridRepCollection' +import FilterBar from '~components/FilterBar' -import type { NextApiRequest, NextApiResponse } from "next"; +import type { NextApiRequest, NextApiResponse } from 'next' interface Props { - teams?: { count: number; total_pages: number; results: Party[] }; - raids: Raid[]; - sortedRaids: Raid[][]; + teams?: { count: number; total_pages: number; results: Party[] } + raids: Raid[] + sortedRaids: Raid[][] } const TeamsRoute: React.FC = (props: Props) => { // Set up cookies - const cookie = getCookie("account"); + const cookie = getCookie('account') const accountData: AccountCookie = cookie ? JSON.parse(cookie as string) - : null; + : null const headers = accountData ? { Authorization: `Bearer ${accountData.token}` } - : {}; + : {} // Set up router - const router = useRouter(); + const router = useRouter() // Import translations - const { t } = useTranslation("common"); + const { t } = useTranslation('common') // Set up app-specific states - const [raidsLoading, setRaidsLoading] = useState(true); - const [scrolled, setScrolled] = useState(false); + const [raidsLoading, setRaidsLoading] = useState(true) + const [scrolled, setScrolled] = useState(false) // Set up page-specific states - const [parties, setParties] = useState([]); - const [raids, setRaids] = useState(); - const [raid, setRaid] = useState(); + const [parties, setParties] = useState([]) + const [raids, setRaids] = useState() + const [raid, setRaid] = useState() // Set up infinite scrolling-related states - const [recordCount, setRecordCount] = useState(0); - const [currentPage, setCurrentPage] = useState(1); - const [totalPages, setTotalPages] = useState(1); + const [recordCount, setRecordCount] = useState(0) + const [currentPage, setCurrentPage] = useState(1) + const [totalPages, setTotalPages] = useState(1) // Set up filter-specific query states // Recency is in seconds - const [element, setElement] = useQueryState("element", { + const [element, setElement] = useQueryState('element', { defaultValue: -1, parse: (query: string) => parseElement(query), serialize: (value) => serializeElement(value), - }); - const [raidSlug, setRaidSlug] = useQueryState("raid", { - defaultValue: "all", - }); + }) + const [raidSlug, setRaidSlug] = useQueryState('raid', { + defaultValue: 'all', + }) const [recency, setRecency] = useQueryState( - "recency", + 'recency', queryTypes.integer.withDefault(-1) - ); + ) // Define transformers for element function parseElement(query: string) { let element: TeamElement | undefined = - query === "all" + query === 'all' ? allElement - : elements.find((element) => element.name.en.toLowerCase() === query); - return element ? element.id : -1; + : elements.find((element) => element.name.en.toLowerCase() === query) + return element ? element.id : -1 } function serializeElement(value: number | undefined) { - let name = ""; + let name = '' if (value != undefined) { - if (value == -1) name = allElement.name.en.toLowerCase(); - else name = elements[value].name.en.toLowerCase(); + if (value == -1) name = allElement.name.en.toLowerCase() + else name = elements[value].name.en.toLowerCase() } - return name; + return name } // Set the initial parties from props useEffect(() => { if (props.teams) { - setTotalPages(props.teams.total_pages); - setRecordCount(props.teams.count); - replaceResults(props.teams.count, props.teams.results); + setTotalPages(props.teams.total_pages) + setRecordCount(props.teams.count) + replaceResults(props.teams.count, props.teams.results) } - setCurrentPage(1); - }, []); + setCurrentPage(1) + }, []) // Add scroll event listener for shadow on FilterBar on mount useEffect(() => { - window.addEventListener("scroll", handleScroll); - return () => window.removeEventListener("scroll", handleScroll); - }, []); + window.addEventListener('scroll', handleScroll) + return () => window.removeEventListener('scroll', handleScroll) + }, []) // Handle errors const handleError = useCallback((error: any) => { if (error.response != null) { - console.error(error); + console.error(error) } else { - console.error("There was an error."); + console.error('There was an error.') } - }, []); + }, []) const fetchTeams = useCallback( ({ replace }: { replace: boolean }) => { @@ -125,63 +125,63 @@ const TeamsRoute: React.FC = (props: Props) => { recency: recency != -1 ? recency : undefined, page: currentPage, }, - }; + } api.endpoints.parties .getAll({ ...filters, ...{ headers: headers } }) .then((response) => { - setTotalPages(response.data.total_pages); - setRecordCount(response.data.count); + setTotalPages(response.data.total_pages) + setRecordCount(response.data.count) if (replace) - replaceResults(response.data.count, response.data.results); - else appendResults(response.data.results); + replaceResults(response.data.count, response.data.results) + else appendResults(response.data.results) }) - .catch((error) => handleError(error)); + .catch((error) => handleError(error)) }, [currentPage, parties, element, raid, recency] - ); + ) function replaceResults(count: number, list: Party[]) { if (count > 0) { - setParties(list.sort((a, b) => (a.created_at > b.created_at ? -1 : 1))); + setParties(list.sort((a, b) => (a.created_at > b.created_at ? -1 : 1))) } else { - setParties([]); + setParties([]) } } function appendResults(list: Party[]) { - setParties([...parties, ...list]); + setParties([...parties, ...list]) } // Fetch all raids on mount, then find the raid in the URL if present useEffect(() => { api.endpoints.raids.getAll().then((response) => { - const cleanRaids: Raid[] = response.data.map((r: any) => r.raid); - setRaids(cleanRaids); + const cleanRaids: Raid[] = response.data.map((r: any) => r.raid) + setRaids(cleanRaids) - setRaidsLoading(false); + setRaidsLoading(false) - const raid = cleanRaids.find((r) => r.slug === raidSlug); - setRaid(raid); + const raid = cleanRaids.find((r) => r.slug === raidSlug) + setRaid(raid) - return raid; - }); - }, [setRaids]); + return raid + }) + }, [setRaids]) // When the element, raid or recency filter changes, // fetch all teams again. useDidMountEffect(() => { - setCurrentPage(1); - fetchTeams({ replace: true }); - }, [element, raid, recency]); + setCurrentPage(1) + fetchTeams({ replace: true }) + }, [element, raid, recency]) // When the page changes, fetch all teams again. useDidMountEffect(() => { // Current page changed - if (currentPage > 1) fetchTeams({ replace: false }); - else if (currentPage == 1) fetchTeams({ replace: true }); - }, [currentPage]); + if (currentPage > 1) fetchTeams({ replace: false }) + else if (currentPage == 1) fetchTeams({ replace: true }) + }, [currentPage]) // Receive filters from the filter bar function receiveFilters({ @@ -189,68 +189,68 @@ const TeamsRoute: React.FC = (props: Props) => { raidSlug, recency, }: { - element?: number; - raidSlug?: string; - recency?: number; + element?: number + raidSlug?: string + recency?: number }) { - if (element == 0) setElement(0); - else if (element) setElement(element); + if (element == 0) setElement(0) + else if (element) setElement(element) if (raids && raidSlug) { - const raid = raids.find((raid) => raid.slug === raidSlug); - setRaid(raid); - setRaidSlug(raidSlug); + const raid = raids.find((raid) => raid.slug === raidSlug) + setRaid(raid) + setRaidSlug(raidSlug) } - if (recency) setRecency(recency); + if (recency) setRecency(recency) } // Methods: Favorites function toggleFavorite(teamId: string, favorited: boolean) { - if (favorited) unsaveFavorite(teamId); - else saveFavorite(teamId); + if (favorited) unsaveFavorite(teamId) + else saveFavorite(teamId) } function saveFavorite(teamId: string) { api.saveTeam({ id: teamId, params: headers }).then((response) => { if (response.status == 201) { - const index = parties.findIndex((p) => p.id === teamId); - const party = parties[index]; + const index = parties.findIndex((p) => p.id === teamId) + const party = parties[index] - party.favorited = true; + party.favorited = true - let clonedParties = clonedeep(parties); - clonedParties[index] = party; + let clonedParties = clonedeep(parties) + clonedParties[index] = party - setParties(clonedParties); + setParties(clonedParties) } - }); + }) } function unsaveFavorite(teamId: string) { api.unsaveTeam({ id: teamId, params: headers }).then((response) => { if (response.status == 200) { - const index = parties.findIndex((p) => p.id === teamId); - const party = parties[index]; + const index = parties.findIndex((p) => p.id === teamId) + const party = parties[index] - party.favorited = false; + party.favorited = false - let clonedParties = clonedeep(parties); - clonedParties[index] = party; + let clonedParties = clonedeep(parties) + clonedParties[index] = party - setParties(clonedParties); + setParties(clonedParties) } - }); + }) } // Methods: Navigation function handleScroll() { - if (window.pageYOffset > 90) setScrolled(true); - else setScrolled(false); + if (window.pageYOffset > 90) setScrolled(true) + else setScrolled(false) } function goTo(shortcode: string) { - router.push(`/p/${shortcode}`); + router.push(`/p/${shortcode}`) } function renderParties() { @@ -270,14 +270,14 @@ const TeamsRoute: React.FC = (props: Props) => { onClick={goTo} onSave={toggleFavorite} /> - ); - }); + ) + }) } return (
    - {t("teams.title")} + {t('teams.title')} = (props: Props) => { raidSlug={raidSlug ? raidSlug : undefined} recency={recency} > -

    {t("teams.title")}

    +

    {t('teams.title')}

    @@ -322,25 +322,25 @@ const TeamsRoute: React.FC = (props: Props) => { {parties.length == 0 ? (
    -

    {t("teams.not_found")}

    +

    {t('teams.not_found')}

    ) : ( - "" + '' )}
    - ); -}; + ) +} export const getServerSidePaths = async () => { return { paths: [ // Object variant: - { params: { party: "string" } }, + { params: { party: 'string' } }, ], fallback: true, - }; -}; + } +} // prettier-ignore export const getServerSideProps = async ({ req, res, locale, query }: { req: NextApiRequest, res: NextApiResponse, locale: string, query: { [index: string]: string } }) => { @@ -407,31 +407,31 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex const organizeRaids = (raids: Raid[]) => { // Set up empty raid for "All raids" const all = { - id: "0", + id: '0', name: { - en: "All raids", - ja: "全て", + en: 'All raids', + ja: '全て', }, - slug: "all", + slug: 'all', level: 0, group: 0, element: 0, - }; + } const numGroups = Math.max.apply( Math, raids.map((raid) => raid.group) - ); - let groupedRaids = []; + ) + let groupedRaids = [] for (let i = 0; i <= numGroups; i++) { - groupedRaids[i] = raids.filter((raid) => raid.group == i); + groupedRaids[i] = raids.filter((raid) => raid.group == i) } return { raids: raids, sortedRaids: groupedRaids, - }; -}; + } +} -export default TeamsRoute; +export default TeamsRoute diff --git a/types/AccountCookie.d.ts b/types/AccountCookie.d.ts index dcfd85bc..444f2e4a 100644 --- a/types/AccountCookie.d.ts +++ b/types/AccountCookie.d.ts @@ -1,5 +1,5 @@ interface AccountCookie { - userId: string; - username: string; - token: string; + userId: string + username: string + token: string } diff --git a/types/AxSkill.d.ts b/types/AxSkill.d.ts index f96f8d21..a8765194 100644 --- a/types/AxSkill.d.ts +++ b/types/AxSkill.d.ts @@ -1,12 +1,12 @@ interface AxSkill { name: { - [key: string]: string; - en: string; - ja: string; - }; - id: number; - minValue: number; - maxValue: number; - suffix?: string; - secondary?: AxSkill[]; + [key: string]: string + en: string + ja: string + } + id: number + minValue: number + maxValue: number + suffix?: string + secondary?: AxSkill[] } diff --git a/types/Character.d.ts b/types/Character.d.ts index ce21ade0..43e11fdc 100644 --- a/types/Character.d.ts +++ b/types/Character.d.ts @@ -1,40 +1,40 @@ interface Character { - type: "character"; + type: 'character' - id: string; - granblue_id: string; - character_id: readonly number[]; - element: number; - rarity: number; - gender: number; - max_level: number; + id: string + granblue_id: string + character_id: readonly number[] + element: number + rarity: number + gender: number + max_level: number name: { - [key: string]: string; - en: string; - ja: string; - }; + [key: string]: string + en: string + ja: string + } hp: { - min_hp: number; - max_hp: number; - max_hp_flb: number; - }; + min_hp: number + max_hp: number + max_hp_flb: number + } atk: { - min_atk: number; - max_atk: number; - max_atk_flb: number; - }; + min_atk: number + max_atk: number + max_atk_flb: number + } uncap: { - flb: boolean; - ulb: boolean; - }; + flb: boolean + ulb: boolean + } race: { - race1: number; - race2: number; - }; + race1: number + race2: number + } proficiency: { - proficiency1: number; - proficiency2: number; - }; - position?: number; - special: boolean; + proficiency1: number + proficiency2: number + } + position?: number + special: boolean } diff --git a/types/CheckedState.d.ts b/types/CheckedState.d.ts index e2b4c2b5..00c6a235 100644 --- a/types/CheckedState.d.ts +++ b/types/CheckedState.d.ts @@ -1,4 +1,4 @@ interface CheckedState { - id: number; - checked: boolean; + id: number + checked: boolean } diff --git a/types/ElementState.d.ts b/types/ElementState.d.ts index ff599d30..03e4d164 100644 --- a/types/ElementState.d.ts +++ b/types/ElementState.d.ts @@ -1,10 +1,10 @@ interface ElementState { - [key: string]: CheckedState; - null: CheckedState; - wind: CheckedState; - fire: CheckedState; - water: CheckedState; - earth: CheckedState; - dark: CheckedState; - light: CheckedState; + [key: string]: CheckedState + null: CheckedState + wind: CheckedState + fire: CheckedState + water: CheckedState + earth: CheckedState + dark: CheckedState + light: CheckedState } diff --git a/types/GridArray.d.ts b/types/GridArray.d.ts index dffafa69..92a0fb0f 100644 --- a/types/GridArray.d.ts +++ b/types/GridArray.d.ts @@ -1 +1 @@ -type GridArray = { [key: number]: T | undefined }; +type GridArray = { [key: number]: T | undefined } diff --git a/types/GridCharacter.d.ts b/types/GridCharacter.d.ts index 6acf8f04..592de829 100644 --- a/types/GridCharacter.d.ts +++ b/types/GridCharacter.d.ts @@ -1,6 +1,6 @@ interface GridCharacter { - id: string; - position: number; - object: Character; - uncap_level: number; + id: string + position: number + object: Character + uncap_level: number } diff --git a/types/GridSummon.d.ts b/types/GridSummon.d.ts index acf9fd61..bfde1535 100644 --- a/types/GridSummon.d.ts +++ b/types/GridSummon.d.ts @@ -1,8 +1,8 @@ interface GridSummon { - id: string; - main: boolean; - friend: boolean; - position: number; - object: Summon; - uncap_level: number; + id: string + main: boolean + friend: boolean + position: number + object: Summon + uncap_level: number } diff --git a/types/GridWeapon.d.ts b/types/GridWeapon.d.ts index 1c1ea27b..70592fde 100644 --- a/types/GridWeapon.d.ts +++ b/types/GridWeapon.d.ts @@ -1,10 +1,10 @@ interface GridWeapon { - id: string; - mainhand: boolean; - position: number; - object: Weapon; - uncap_level: number; - element: number; - weapon_keys?: Array; - ax?: Array; + id: string + mainhand: boolean + position: number + object: Weapon + uncap_level: number + element: number + weapon_keys?: Array + ax?: Array } diff --git a/types/Job.d.ts b/types/Job.d.ts index d60a70c4..7c1f5939 100644 --- a/types/Job.d.ts +++ b/types/Job.d.ts @@ -1,16 +1,16 @@ interface Job { - id: string; - row: string; - ml: boolean; - order: number; + id: string + row: string + ml: boolean + order: number name: { - [key: string]: string; - en: string; - ja: string; - }; + [key: string]: string + en: string + ja: string + } proficiency: { - proficiency1: number; - proficiency2: number; - }; - base_job?: Job; + proficiency1: number + proficiency2: number + } + base_job?: Job } diff --git a/types/JobSkill.d.ts b/types/JobSkill.d.ts index 24b5feb7..f1067964 100644 --- a/types/JobSkill.d.ts +++ b/types/JobSkill.d.ts @@ -1,16 +1,16 @@ interface JobSkill { - id: string; - job: Job; + id: string + job: Job name: { - [key: string]: string; - en: string; - ja: string; - }; - slug: string; - color: number; - main: boolean; - base: boolean; - sub: boolean; - emp: boolean; - order: number; + [key: string]: string + en: string + ja: string + } + slug: string + color: number + main: boolean + base: boolean + sub: boolean + emp: boolean + order: number } diff --git a/types/OnClickEvent.d.ts b/types/OnClickEvent.d.ts index b249c0ab..c0ee98a5 100644 --- a/types/OnClickEvent.d.ts +++ b/types/OnClickEvent.d.ts @@ -1,3 +1,3 @@ type OnClickEvent = ( event: React.MouseEvent -) => void; +) => void diff --git a/types/Party.d.ts b/types/Party.d.ts index 70e2bd82..c43a4d17 100644 --- a/types/Party.d.ts +++ b/types/Party.d.ts @@ -1,25 +1,25 @@ type JobSkillObject = { - [key: number]: JobSkill | undefined; - 0: JobSkill | undefined; - 1: JobSkill | undefined; - 2: JobSkill | undefined; - 3: JobSkill | undefined; -}; + [key: number]: JobSkill | undefined + 0: JobSkill | undefined + 1: JobSkill | undefined + 2: JobSkill | undefined + 3: JobSkill | undefined +} interface Party { - id: string; - name: string; - description: string; - raid: Raid; - job: Job; - job_skills: JobSkillObject; - shortcode: string; - extra: boolean; - favorited: boolean; - characters: Array; - weapons: Array; - summons: Array; - user: User; - created_at: string; - updated_at: string; + id: string + name: string + description: string + raid: Raid + job: Job + job_skills: JobSkillObject + shortcode: string + extra: boolean + favorited: boolean + characters: Array + weapons: Array + summons: Array + user: User + created_at: string + updated_at: string } diff --git a/types/ProficiencyState.d.ts b/types/ProficiencyState.d.ts index c72271eb..a71bfc43 100644 --- a/types/ProficiencyState.d.ts +++ b/types/ProficiencyState.d.ts @@ -1,13 +1,13 @@ interface ProficiencyState { - [key: string]: CheckedState; - sabre: CheckedState; - dagger: CheckedState; - spear: CheckedState; - axe: CheckedState; - staff: CheckedState; - melee: CheckedState; - gun: CheckedState; - bow: CheckedState; - harp: CheckedState; - katana: CheckedState; + [key: string]: CheckedState + sabre: CheckedState + dagger: CheckedState + spear: CheckedState + axe: CheckedState + staff: CheckedState + melee: CheckedState + gun: CheckedState + bow: CheckedState + harp: CheckedState + katana: CheckedState } diff --git a/types/Raid.d.ts b/types/Raid.d.ts index ff2a6654..5b6cf588 100644 --- a/types/Raid.d.ts +++ b/types/Raid.d.ts @@ -1,12 +1,12 @@ interface Raid { - id: string; + id: string name: { - [key: string]: string; - en: string; - ja: string; - }; - slug: string; - level: number; - group: number; - element: number; + [key: string]: string + en: string + ja: string + } + slug: string + level: number + group: number + element: number } diff --git a/types/RarityState.d.ts b/types/RarityState.d.ts index 0f51dcae..e0b17fed 100644 --- a/types/RarityState.d.ts +++ b/types/RarityState.d.ts @@ -1,5 +1,5 @@ interface RarityState { - [key: string]: CheckedState; - sr: CheckedState; - ssr: CheckedState; + [key: string]: CheckedState + sr: CheckedState + ssr: CheckedState } diff --git a/types/SimpleAxSkill.d.ts b/types/SimpleAxSkill.d.ts index 9290cc60..04b85938 100644 --- a/types/SimpleAxSkill.d.ts +++ b/types/SimpleAxSkill.d.ts @@ -1,4 +1,4 @@ interface SimpleAxSkill { - modifier: number; - strength: number; + modifier: number + strength: number } diff --git a/types/Summon.d.ts b/types/Summon.d.ts index e763c020..c71c62ce 100644 --- a/types/Summon.d.ts +++ b/types/Summon.d.ts @@ -1,30 +1,30 @@ interface Summon { - type: "summon"; + type: 'summon' - id: string; - granblue_id: number; - element: number; - max_level: number; + id: string + granblue_id: number + element: number + max_level: number name: { - [key: string]: string; - en: string; - ja: string; - }; + [key: string]: string + en: string + ja: string + } hp: { - min_hp: number; - max_hp: number; - max_hp_flb: number; - max_hp_ulb: number; - }; + min_hp: number + max_hp: number + max_hp_flb: number + max_hp_ulb: number + } atk: { - min_atk: number; - max_atk: number; - max_atk_flb: number; - max_atk_ulb: number; - }; + min_atk: number + max_atk: number + max_atk_flb: number + max_atk_ulb: number + } uncap: { - flb: boolean; - ulb: boolean; - }; - position?: number; + flb: boolean + ulb: boolean + } + position?: number } diff --git a/types/TeamElement.d.ts b/types/TeamElement.d.ts index 57232871..a8275831 100644 --- a/types/TeamElement.d.ts +++ b/types/TeamElement.d.ts @@ -1,7 +1,7 @@ interface TeamElement { - id: number; + id: number name: { - en: string; - ja: string; - }; + en: string + ja: string + } } diff --git a/types/User.d.ts b/types/User.d.ts index 96627319..2d344c6c 100644 --- a/types/User.d.ts +++ b/types/User.d.ts @@ -1,11 +1,11 @@ interface User { - id: string; - username: string; - granblueId: number; + id: string + username: string + granblueId: number picture: { - picture: string; - element: string; - }; - gender: number; - private: boolean; + picture: string + element: string + } + gender: number + private: boolean } diff --git a/types/UserCookie.d.ts b/types/UserCookie.d.ts index b7b194a2..df04aadc 100644 --- a/types/UserCookie.d.ts +++ b/types/UserCookie.d.ts @@ -1,6 +1,6 @@ interface UserCookie { - picture: string; - element: string; - language: string; - gender: number; + picture: string + element: string + language: string + gender: number } diff --git a/types/Weapon.d.ts b/types/Weapon.d.ts index eb90cd49..f2faeb43 100644 --- a/types/Weapon.d.ts +++ b/types/Weapon.d.ts @@ -1,34 +1,34 @@ interface Weapon { - type: "weapon"; + type: 'weapon' - id: string; - granblue_id: number; - element: number; - proficiency: number; - max_level: number; - max_skill_level: number; - series: number; - ax: number; + id: string + granblue_id: number + element: number + proficiency: number + max_level: number + max_skill_level: number + series: number + ax: number name: { - [key: string]: string; - en: string; - ja: string; - }; + [key: string]: string + en: string + ja: string + } hp: { - min_hp: number; - max_hp: number; - max_hp_flb: number; - max_hp_ulb: number; - }; + min_hp: number + max_hp: number + max_hp_flb: number + max_hp_ulb: number + } atk: { - min_atk: number; - max_atk: number; - max_atk_flb: number; - max_atk_ulb: number; - }; + min_atk: number + max_atk: number + max_atk_flb: number + max_atk_ulb: number + } uncap: { - flb: boolean; - ulb: boolean; - }; - position?: number; + flb: boolean + ulb: boolean + } + position?: number } diff --git a/types/WeaponKey.d.ts b/types/WeaponKey.d.ts index 7c059f77..99dacced 100644 --- a/types/WeaponKey.d.ts +++ b/types/WeaponKey.d.ts @@ -1,12 +1,12 @@ interface WeaponKey { - id: string; + id: string name: { - [key: string]: string; - en: string; - ja: string; - }; - series: integer; - slot: integer; - group: integer; - order: integer; + [key: string]: string + en: string + ja: string + } + series: integer + slot: integer + group: integer + order: integer } diff --git a/types/WeaponSeries.d.ts b/types/WeaponSeries.d.ts index 5ba5c516..a9b8581e 100644 --- a/types/WeaponSeries.d.ts +++ b/types/WeaponSeries.d.ts @@ -1,27 +1,27 @@ interface WeaponSeriesState { - [key: string]: CheckedState; - seraphic: CheckedState; - grand: CheckedState; - opus: CheckedState; - draconic: CheckedState; - ultima: CheckedState; - bahamut: CheckedState; - omega: CheckedState; - primal: CheckedState; - olden_primal: CheckedState; - militis: CheckedState; - beast: CheckedState; - rose: CheckedState; - xeno: CheckedState; - hollowsky: CheckedState; - astral: CheckedState; - epic: CheckedState; - ennead: CheckedState; - cosmos: CheckedState; - ancestral: CheckedState; - superlative: CheckedState; - vintage: CheckedState; - class_champion: CheckedState; - sephira: CheckedState; - new_world: CheckedState; + [key: string]: CheckedState + seraphic: CheckedState + grand: CheckedState + opus: CheckedState + draconic: CheckedState + ultima: CheckedState + bahamut: CheckedState + omega: CheckedState + primal: CheckedState + olden_primal: CheckedState + militis: CheckedState + beast: CheckedState + rose: CheckedState + xeno: CheckedState + hollowsky: CheckedState + astral: CheckedState + epic: CheckedState + ennead: CheckedState + cosmos: CheckedState + ancestral: CheckedState + superlative: CheckedState + vintage: CheckedState + class_champion: CheckedState + sephira: CheckedState + new_world: CheckedState } diff --git a/types/declarations.d.ts b/types/declarations.d.ts index 467391e5..73257409 100644 --- a/types/declarations.d.ts +++ b/types/declarations.d.ts @@ -1,2 +1,2 @@ -declare module "*.jpg"; -declare module "*.svg"; +declare module '*.jpg' +declare module '*.svg' diff --git a/types/index.d.ts b/types/index.d.ts index fba9b3b3..d37ca641 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -1,9 +1,9 @@ -export type SearchableObject = Character | Weapon | Summon | JobSkill; -export type SearchableObjectArray = (Character | Weapon | Summon | JobSkill)[]; +export type SearchableObject = Character | Weapon | Summon | JobSkill +export type SearchableObjectArray = (Character | Weapon | Summon | JobSkill)[] export type JobSkillObject = { - [key: number]: JobSkill | undefined; - 0: JobSkill | undefined; - 1: JobSkill | undefined; - 2: JobSkill | undefined; - 3: JobSkill | undefined; -}; + [key: number]: JobSkill | undefined + 0: JobSkill | undefined + 1: JobSkill | undefined + 2: JobSkill | undefined + 3: JobSkill | undefined +} diff --git a/utils/Element.tsx b/utils/Element.tsx index 0f576406..8c82ec17 100644 --- a/utils/Element.tsx +++ b/utils/Element.tsx @@ -1,59 +1,59 @@ export const allElement: TeamElement = { id: -1, name: { - en: "All", - ja: "全s", + en: 'All', + ja: '全s', }, -}; +} export const elements: TeamElement[] = [ { id: 0, name: { - en: "Null", - ja: "無", + en: 'Null', + ja: '無', }, }, { id: 1, name: { - en: "Wind", - ja: "風", + en: 'Wind', + ja: '風', }, }, { id: 2, name: { - en: "Fire", - ja: "火", + en: 'Fire', + ja: '火', }, }, { id: 3, name: { - en: "Water", - ja: "水", + en: 'Water', + ja: '水', }, }, { id: 4, name: { - en: "Earth", - ja: "土", + en: 'Earth', + ja: '土', }, }, { id: 5, name: { - en: "Dark", - ja: "闇", + en: 'Dark', + ja: '闇', }, }, { id: 6, name: { - en: "Light", - ja: "光", + en: 'Light', + ja: '光', }, }, -]; +] diff --git a/utils/accountState.tsx b/utils/accountState.tsx index 85e3697f..5ad320d8 100644 --- a/utils/accountState.tsx +++ b/utils/accountState.tsx @@ -1,20 +1,20 @@ -import { proxy } from "valtio"; +import { proxy } from 'valtio' interface AccountState { - [key: string]: any; + [key: string]: any account: { - authorized: boolean; + authorized: boolean user: | { - id: string; - username: string; - picture: string; - element: string; - gender: number; + id: string + username: string + picture: string + element: string + gender: number } - | undefined; - }; + | undefined + } } export const initialAccountState: AccountState = { @@ -22,6 +22,6 @@ export const initialAccountState: AccountState = { authorized: false, user: undefined, }, -}; +} -export const accountState = proxy(initialAccountState); +export const accountState = proxy(initialAccountState) diff --git a/utils/appState.tsx b/utils/appState.tsx index f59718b5..1782aa17 100644 --- a/utils/appState.tsx +++ b/utils/appState.tsx @@ -1,62 +1,62 @@ -import { proxy } from "valtio"; -import { JobSkillObject } from "~types"; +import { proxy } from 'valtio' +import { JobSkillObject } from '~types' const emptyJob: Job = { - id: "-1", - row: "", + id: '-1', + row: '', ml: false, order: 0, name: { - en: "", - ja: "", + en: '', + ja: '', }, proficiency: { proficiency1: 0, proficiency2: 0, }, -}; +} interface AppState { - [key: string]: any; + [key: string]: any party: { - id: string | undefined; - editable: boolean; - detailsVisible: boolean; - name: string | undefined; - description: string | undefined; - job: Job; - jobSkills: JobSkillObject; - raid: Raid | undefined; - element: number; - extra: boolean; - user: User | undefined; - favorited: boolean; - created_at: string; - updated_at: string; - }; + id: string | undefined + editable: boolean + detailsVisible: boolean + name: string | undefined + description: string | undefined + job: Job + jobSkills: JobSkillObject + raid: Raid | undefined + element: number + extra: boolean + user: User | undefined + favorited: boolean + created_at: string + updated_at: string + } grid: { weapons: { - mainWeapon: GridWeapon | undefined; - allWeapons: GridArray; - }; + mainWeapon: GridWeapon | undefined + allWeapons: GridArray + } summons: { - mainSummon: GridSummon | undefined; - friendSummon: GridSummon | undefined; - allSummons: GridArray; - }; - characters: GridArray; - }; + mainSummon: GridSummon | undefined + friendSummon: GridSummon | undefined + allSummons: GridArray + } + characters: GridArray + } search: { recents: { - characters: Character[]; - weapons: Weapon[]; - summons: Summon[]; - }; - }; - raids: Raid[]; - jobs: Job[]; - jobSkills: JobSkill[]; + characters: Character[] + weapons: Weapon[] + summons: Summon[] + } + } + raids: Raid[] + jobs: Job[] + jobSkills: JobSkill[] } export const initialAppState: AppState = { @@ -103,6 +103,6 @@ export const initialAppState: AppState = { raids: [], jobs: [], jobSkills: [], -}; +} -export const appState = proxy(initialAppState); +export const appState = proxy(initialAppState) diff --git a/utils/axData.tsx b/utils/axData.tsx index 7eff901b..971dc9ea 100644 --- a/utils/axData.tsx +++ b/utils/axData.tsx @@ -2,100 +2,100 @@ export const axData: AxSkill[][] = [ [ { name: { - en: "ATK", - ja: "攻撃", + en: 'ATK', + ja: '攻撃', }, id: 0, minValue: 1, maxValue: 3.5, - suffix: "%", + suffix: '%', secondary: [ { name: { - en: "C.A. DMG", - ja: "奥義ダメ", + en: 'C.A. DMG', + ja: '奥義ダメ', }, id: 3, minValue: 2, maxValue: 4, - suffix: "%", + suffix: '%', }, { name: { - en: "Double Attack Rate", - ja: "DA確率", + en: 'Double Attack Rate', + ja: 'DA確率', }, id: 5, minValue: 1, maxValue: 2, - suffix: "%", + suffix: '%', }, { name: { - en: "Triple Attack Rate", - ja: "TA確率", + en: 'Triple Attack Rate', + ja: 'TA確率', }, id: 6, minValue: 1, maxValue: 2, - suffix: "%", + suffix: '%', }, { name: { - en: "Skill DMG Cap", - ja: "アビ上限", + en: 'Skill DMG Cap', + ja: 'アビ上限', }, id: 7, minValue: 1, maxValue: 2, - suffix: "%", + suffix: '%', }, ], }, { name: { - en: "DEF", - ja: "防御", + en: 'DEF', + ja: '防御', }, id: 1, minValue: 1, maxValue: 8, - suffix: "%", + suffix: '%', secondary: [ { name: { - en: "HP", - ja: "HP", + en: 'HP', + ja: 'HP', }, id: 2, minValue: 1, maxValue: 3, - suffix: "%", + suffix: '%', }, { name: { - en: "Debuff Resistance", - ja: "弱体耐性", + en: 'Debuff Resistance', + ja: '弱体耐性', }, id: 9, minValue: 1, maxValue: 3, - suffix: "%", + suffix: '%', }, { name: { - en: "Healing", - ja: "回復性能", + en: 'Healing', + ja: '回復性能', }, id: 10, minValue: 2, maxValue: 5, - suffix: "%", + suffix: '%', }, { name: { - en: "Enmity", - ja: "背水", + en: 'Enmity', + ja: '背水', }, id: 11, minValue: 1, @@ -105,48 +105,48 @@ export const axData: AxSkill[][] = [ }, { name: { - en: "HP", - ja: "HP", + en: 'HP', + ja: 'HP', }, id: 2, minValue: 1, maxValue: 11, - suffix: "%", + suffix: '%', secondary: [ { name: { - en: "DEF", - ja: "防御", + en: 'DEF', + ja: '防御', }, id: 1, minValue: 1, maxValue: 3, - suffix: "%", + suffix: '%', }, { name: { - en: "Debuff Resistance", - ja: "弱体耐性", + en: 'Debuff Resistance', + ja: '弱体耐性', }, id: 9, minValue: 1, maxValue: 3, - suffix: "%", + suffix: '%', }, { name: { - en: "Healing", - ja: "回復性能", + en: 'Healing', + ja: '回復性能', }, id: 10, minValue: 2, maxValue: 5, - suffix: "%", + suffix: '%', }, { name: { - en: "Stamina", - ja: "渾身", + en: 'Stamina', + ja: '渾身', }, id: 12, minValue: 1, @@ -156,48 +156,48 @@ export const axData: AxSkill[][] = [ }, { name: { - en: "C.A. DMG", - ja: "奥義ダメ", + en: 'C.A. DMG', + ja: '奥義ダメ', }, id: 3, minValue: 2, maxValue: 8.5, - suffix: "%", + suffix: '%', secondary: [ { name: { - en: "ATK", - ja: "攻撃", + en: 'ATK', + ja: '攻撃', }, id: 0, minValue: 1, maxValue: 1.5, - suffix: "%", + suffix: '%', }, { name: { - en: "Elemental ATK", - ja: "全属性攻撃力", + en: 'Elemental ATK', + ja: '全属性攻撃力', }, id: 13, minValue: 1, maxValue: 5, - suffix: "%", + suffix: '%', }, { name: { - en: "C.A. DMG Cap", - ja: "奥義上限", + en: 'C.A. DMG Cap', + ja: '奥義上限', }, id: 8, minValue: 1, maxValue: 2, - suffix: "%", + suffix: '%', }, { name: { - en: "Stamina", - ja: "渾身", + en: 'Stamina', + ja: '渾身', }, id: 12, minValue: 1, @@ -207,53 +207,53 @@ export const axData: AxSkill[][] = [ }, { name: { - en: "Multiattack Rate", - ja: "連撃率", + en: 'Multiattack Rate', + ja: '連撃率', }, id: 4, minValue: 1, maxValue: 4, - suffix: "%", + suffix: '%', secondary: [ { name: { - en: "C.A. DMG", - ja: "奥義ダメ", + en: 'C.A. DMG', + ja: '奥義ダメ', }, id: 3, minValue: 2, maxValue: 4, - suffix: "%", + suffix: '%', }, { name: { - en: "Elemental ATK", - ja: "全属性攻撃力", + en: 'Elemental ATK', + ja: '全属性攻撃力', }, id: 13, minValue: 1, maxValue: 5, - suffix: "%", + suffix: '%', }, { name: { - en: "Double Attack Rate", - ja: "DA確率", + en: 'Double Attack Rate', + ja: 'DA確率', }, id: 5, minValue: 1, maxValue: 2, - suffix: "%", + suffix: '%', }, { name: { - en: "Triple Attack Rate", - ja: "TA確率", + en: 'Triple Attack Rate', + ja: 'TA確率', }, id: 6, minValue: 1, maxValue: 2, - suffix: "%", + suffix: '%', }, ], }, @@ -261,48 +261,48 @@ export const axData: AxSkill[][] = [ [ { name: { - en: "ATK", - ja: "攻撃", + en: 'ATK', + ja: '攻撃', }, id: 0, minValue: 1, maxValue: 3.5, - suffix: "%", + suffix: '%', secondary: [ { name: { - en: "C.A. DMG", - ja: "奥義ダメ", + en: 'C.A. DMG', + ja: '奥義ダメ', }, id: 3, minValue: 2, maxValue: 8.5, - suffix: "%", + suffix: '%', }, { name: { - en: "Multiattack Rate", - ja: "連撃確率", + en: 'Multiattack Rate', + ja: '連撃確率', }, id: 4, minValue: 1.5, maxValue: 4, - suffix: "%", + suffix: '%', }, { name: { - en: "Normal ATK DMG Cap", - ja: "通常ダメ上限", + en: 'Normal ATK DMG Cap', + ja: '通常ダメ上限', }, id: 14, minValue: 0.5, maxValue: 1.5, - suffix: "%", + suffix: '%', }, { name: { - en: "Supplemental Skill DMG", - ja: "アビ与ダメ上昇", + en: 'Supplemental Skill DMG', + ja: 'アビ与ダメ上昇', }, id: 15, minValue: 1, @@ -312,48 +312,48 @@ export const axData: AxSkill[][] = [ }, { name: { - en: "DEF", - ja: "防御", + en: 'DEF', + ja: '防御', }, id: 1, minValue: 1, maxValue: 8, - suffix: "%", + suffix: '%', secondary: [ { name: { - en: "Elemental DMG Reduction", - ja: "属性ダメ軽減", + en: 'Elemental DMG Reduction', + ja: '属性ダメ軽減', }, id: 17, minValue: 1, maxValue: 5, - suffix: "%", + suffix: '%', }, { name: { - en: "Debuff Resistance", - ja: "弱体耐性", + en: 'Debuff Resistance', + ja: '弱体耐性', }, id: 9, minValue: 1, maxValue: 3, - suffix: "%", + suffix: '%', }, { name: { - en: "Healing", - ja: "回復性能", + en: 'Healing', + ja: '回復性能', }, id: 10, minValue: 2, maxValue: 5, - suffix: "%", + suffix: '%', }, { name: { - en: "Enmity", - ja: "背水", + en: 'Enmity', + ja: '背水', }, id: 11, minValue: 1, @@ -363,48 +363,48 @@ export const axData: AxSkill[][] = [ }, { name: { - en: "HP", - ja: "HP", + en: 'HP', + ja: 'HP', }, id: 2, minValue: 1, maxValue: 11, - suffix: "%", + suffix: '%', secondary: [ { name: { - en: "Elemental DMG Reduction", - ja: "属性ダメ軽減", + en: 'Elemental DMG Reduction', + ja: '属性ダメ軽減', }, id: 17, minValue: 1, maxValue: 5, - suffix: "%", + suffix: '%', }, { name: { - en: "Debuff Resistance", - ja: "弱体耐性", + en: 'Debuff Resistance', + ja: '弱体耐性', }, id: 9, minValue: 1, maxValue: 3, - suffix: "%", + suffix: '%', }, { name: { - en: "Healing", - ja: "回復性能", + en: 'Healing', + ja: '回復性能', }, id: 10, minValue: 2, maxValue: 5, - suffix: "%", + suffix: '%', }, { name: { - en: "Stamina", - ja: "渾身", + en: 'Stamina', + ja: '渾身', }, id: 12, minValue: 1, @@ -414,28 +414,28 @@ export const axData: AxSkill[][] = [ }, { name: { - en: "C.A. DMG", - ja: "奥義ダメ", + en: 'C.A. DMG', + ja: '奥義ダメ', }, id: 3, minValue: 2, maxValue: 8.5, - suffix: "%", + suffix: '%', secondary: [ { name: { - en: "Multiattack Rate", - ja: "連撃率", + en: 'Multiattack Rate', + ja: '連撃率', }, id: 4, minValue: 1.5, maxValue: 4, - suffix: "%", + suffix: '%', }, { name: { - en: "Supplemental Skill DMG", - ja: "アビ与ダメ上昇", + en: 'Supplemental Skill DMG', + ja: 'アビ与ダメ上昇', }, id: 15, minValue: 1, @@ -443,8 +443,8 @@ export const axData: AxSkill[][] = [ }, { name: { - en: "Supplemental C.A. DMG", - ja: "奥義与ダメ上昇", + en: 'Supplemental C.A. DMG', + ja: '奥義与ダメ上昇', }, id: 16, minValue: 1, @@ -452,8 +452,8 @@ export const axData: AxSkill[][] = [ }, { name: { - en: "Stamina", - ja: "渾身", + en: 'Stamina', + ja: '渾身', }, id: 12, minValue: 1, @@ -463,18 +463,18 @@ export const axData: AxSkill[][] = [ }, { name: { - en: "Multiattack Rate", - ja: "連撃率", + en: 'Multiattack Rate', + ja: '連撃率', }, id: 4, minValue: 1, maxValue: 4, - suffix: "%", + suffix: '%', secondary: [ { name: { - en: "Supplemental C.A. DMG", - ja: "奥義与ダメ上昇", + en: 'Supplemental C.A. DMG', + ja: '奥義与ダメ上昇', }, id: 16, minValue: 1, @@ -482,18 +482,18 @@ export const axData: AxSkill[][] = [ }, { name: { - en: "Normal ATK DMG Cap", - ja: "通常ダメ上限", + en: 'Normal ATK DMG Cap', + ja: '通常ダメ上限', }, id: 14, minValue: 0.5, maxValue: 1.5, - suffix: "%", + suffix: '%', }, { name: { - en: "Stamina", - ja: "渾身", + en: 'Stamina', + ja: '渾身', }, id: 12, minValue: 1, @@ -501,8 +501,8 @@ export const axData: AxSkill[][] = [ }, { name: { - en: "Enmity", - ja: "背水", + en: 'Enmity', + ja: '背水', }, id: 11, minValue: 1, @@ -514,100 +514,100 @@ export const axData: AxSkill[][] = [ [ { name: { - en: "ATK", - ja: "攻撃", + en: 'ATK', + ja: '攻撃', }, id: 0, minValue: 1, maxValue: 3.5, - suffix: "%", + suffix: '%', secondary: [ { name: { - en: "C.A. DMG", - ja: "奥義ダメ", + en: 'C.A. DMG', + ja: '奥義ダメ', }, id: 3, minValue: 2, maxValue: 4, - suffix: "%", + suffix: '%', }, { name: { - en: "Double Attack Rate", - ja: "DA確率", + en: 'Double Attack Rate', + ja: 'DA確率', }, id: 5, minValue: 1, maxValue: 2, - suffix: "%", + suffix: '%', }, { name: { - en: "Triple Attack Rate", - ja: "TA確率", + en: 'Triple Attack Rate', + ja: 'TA確率', }, id: 6, minValue: 1, maxValue: 2, - suffix: "%", + suffix: '%', }, { name: { - en: "Skill DMG Cap", - ja: "アビ上限", + en: 'Skill DMG Cap', + ja: 'アビ上限', }, id: 7, minValue: 1, maxValue: 2, - suffix: "%", + suffix: '%', }, ], }, { name: { - en: "DEF", - ja: "防御", + en: 'DEF', + ja: '防御', }, id: 1, minValue: 1, maxValue: 8, - suffix: "%", + suffix: '%', secondary: [ { name: { - en: "HP", - ja: "HP", + en: 'HP', + ja: 'HP', }, id: 2, minValue: 1, maxValue: 3, - suffix: "%", + suffix: '%', }, { name: { - en: "Debuff Resistance", - ja: "弱体耐性", + en: 'Debuff Resistance', + ja: '弱体耐性', }, id: 9, minValue: 1, maxValue: 3, - suffix: "%", + suffix: '%', }, { name: { - en: "Healing", - ja: "回復性能", + en: 'Healing', + ja: '回復性能', }, id: 10, minValue: 2, maxValue: 5, - suffix: "%", + suffix: '%', }, { name: { - en: "Enmity", - ja: "背水", + en: 'Enmity', + ja: '背水', }, id: 11, minValue: 1, @@ -617,48 +617,48 @@ export const axData: AxSkill[][] = [ }, { name: { - en: "HP", - ja: "HP", + en: 'HP', + ja: 'HP', }, id: 2, minValue: 1, maxValue: 11, - suffix: "%", + suffix: '%', secondary: [ { name: { - en: "DEF", - ja: "防御", + en: 'DEF', + ja: '防御', }, id: 1, minValue: 1, maxValue: 3, - suffix: "%", + suffix: '%', }, { name: { - en: "Debuff Resistance", - ja: "弱体耐性", + en: 'Debuff Resistance', + ja: '弱体耐性', }, id: 9, minValue: 1, maxValue: 3, - suffix: "%", + suffix: '%', }, { name: { - en: "Healing", - ja: "回復性能", + en: 'Healing', + ja: '回復性能', }, id: 10, minValue: 2, maxValue: 5, - suffix: "%", + suffix: '%', }, { name: { - en: "Stamina", - ja: "渾身", + en: 'Stamina', + ja: '渾身', }, id: 12, minValue: 1, @@ -668,48 +668,48 @@ export const axData: AxSkill[][] = [ }, { name: { - en: "C.A. DMG", - ja: "奥義ダメ", + en: 'C.A. DMG', + ja: '奥義ダメ', }, id: 3, minValue: 2, maxValue: 8.5, - suffix: "%", + suffix: '%', secondary: [ { name: { - en: "ATK", - ja: "攻撃", + en: 'ATK', + ja: '攻撃', }, id: 0, minValue: 1, maxValue: 1.5, - suffix: "%", + suffix: '%', }, { name: { - en: "Elemental ATK", - ja: "全属性攻撃力", + en: 'Elemental ATK', + ja: '全属性攻撃力', }, id: 13, minValue: 1, maxValue: 5, - suffix: "%", + suffix: '%', }, { name: { - en: "C.A. DMG Cap", - ja: "奥義上限", + en: 'C.A. DMG Cap', + ja: '奥義上限', }, id: 8, minValue: 1, maxValue: 2, - suffix: "%", + suffix: '%', }, { name: { - en: "Stamina", - ja: "渾身", + en: 'Stamina', + ja: '渾身', }, id: 12, minValue: 1, @@ -719,75 +719,75 @@ export const axData: AxSkill[][] = [ }, { name: { - en: "Multiattack Rate", - ja: "連撃率", + en: 'Multiattack Rate', + ja: '連撃率', }, id: 4, minValue: 1, maxValue: 4, - suffix: "%", + suffix: '%', secondary: [ { name: { - en: "C.A. DMG", - ja: "奥義ダメ", + en: 'C.A. DMG', + ja: '奥義ダメ', }, id: 3, minValue: 2, maxValue: 4, - suffix: "%", + suffix: '%', }, { name: { - en: "Elemental ATK", - ja: "全属性攻撃力", + en: 'Elemental ATK', + ja: '全属性攻撃力', }, id: 13, minValue: 1, maxValue: 5, - suffix: "%", + suffix: '%', }, { name: { - en: "Double Attack Rate", - ja: "DA確率", + en: 'Double Attack Rate', + ja: 'DA確率', }, id: 5, minValue: 1, maxValue: 2, - suffix: "%", + suffix: '%', }, { name: { - en: "Triple Attack Rate", - ja: "TA確率", + en: 'Triple Attack Rate', + ja: 'TA確率', }, id: 6, minValue: 1, maxValue: 2, - suffix: "%", + suffix: '%', }, ], }, { name: { - en: "EXP Up", - ja: "EXP UP", + en: 'EXP Up', + ja: 'EXP UP', }, id: 18, minValue: 5, maxValue: 10, - suffix: "%", + suffix: '%', }, { name: { - en: "Rupies", - ja: "獲得ルピ", + en: 'Rupies', + ja: '獲得ルピ', }, id: 19, minValue: 10, maxValue: 20, - suffix: "%", + suffix: '%', }, ], -]; +] diff --git a/utils/emptyStates.tsx b/utils/emptyStates.tsx index b05f42c5..973d389e 100644 --- a/utils/emptyStates.tsx +++ b/utils/emptyStates.tsx @@ -7,7 +7,7 @@ export const emptyRarityState: RarityState = { id: 3, checked: true, }, -}; +} export const emptyElementState: ElementState = { null: { @@ -38,7 +38,7 @@ export const emptyElementState: ElementState = { id: 6, checked: false, }, -}; +} export const emptyProficiencyState: ProficiencyState = { sabre: { @@ -81,7 +81,7 @@ export const emptyProficiencyState: ProficiencyState = { id: 10, checked: false, }, -}; +} export const emptyWeaponSeriesState: WeaponSeriesState = { seraphic: { @@ -184,4 +184,4 @@ export const emptyWeaponSeriesState: WeaponSeriesState = { id: 29, checked: false, }, -}; +} diff --git a/utils/jobGroups.tsx b/utils/jobGroups.tsx index ea8840f1..52d5c9eb 100644 --- a/utils/jobGroups.tsx +++ b/utils/jobGroups.tsx @@ -1,60 +1,60 @@ interface JobGroup { - slug: string; + slug: string name: { - [key: string]: string; - en: string; - ja: string; - }; + [key: string]: string + en: string + ja: string + } } export const jobGroups: JobGroup[] = [ { - slug: "1", + slug: '1', name: { - en: "Row I", - ja: "Class I", + en: 'Row I', + ja: 'Class I', }, }, { - slug: "2", + slug: '2', name: { - en: "Row II", - ja: "Class II", + en: 'Row II', + ja: 'Class II', }, }, { - slug: "3", + slug: '3', name: { - en: "Row III", - ja: "Class III", + en: 'Row III', + ja: 'Class III', }, }, { - slug: "4", + slug: '4', name: { - en: "Row IV", - ja: "Class IV", + en: 'Row IV', + ja: 'Class IV', }, }, { - slug: "5", + slug: '5', name: { - en: "Row V", - ja: "Class V", + en: 'Row V', + ja: 'Class V', }, }, { - slug: "ex1", + slug: 'ex1', name: { - en: "Extra I", - ja: "EXTRA I", + en: 'Extra I', + ja: 'EXTRA I', }, }, { - slug: "ex2", + slug: 'ex2', name: { - en: "Extra II", - ja: "EXTRA II", + en: 'Extra II', + ja: 'EXTRA II', }, }, -]; +] diff --git a/utils/pictureData.tsx b/utils/pictureData.tsx index 52f73e29..9edbf767 100644 --- a/utils/pictureData.tsx +++ b/utils/pictureData.tsx @@ -1,316 +1,316 @@ interface Picture { name: { - [key: string]: string; - en: string; - ja: string; - }; - filename: string; - element: string; + [key: string]: string + en: string + ja: string + } + filename: string + element: string } export const pictureData: Picture[] = [ { name: { - en: "Gran 2019", - ja: "グラン", + en: 'Gran 2019', + ja: 'グラン', }, - filename: "gran_19", - element: "water", + filename: 'gran_19', + element: 'water', }, { name: { - en: "Djeeta 2019", - ja: "ジータ", + en: 'Djeeta 2019', + ja: 'ジータ', }, - filename: "djeeta_19", - element: "fire", + filename: 'djeeta_19', + element: 'fire', }, { name: { - en: "Gran 2020", - ja: "グラン", + en: 'Gran 2020', + ja: 'グラン', }, - filename: "gran_20", - element: "water", + filename: 'gran_20', + element: 'water', }, { name: { - en: "Djeeta 2020", - ja: "ジータ", + en: 'Djeeta 2020', + ja: 'ジータ', }, - filename: "djeeta_20", - element: "fire", + filename: 'djeeta_20', + element: 'fire', }, { name: { - en: "Gran - Farer of the Skies", - ja: "空駆ける新鋭 グランver", + en: 'Gran - Farer of the Skies', + ja: '空駆ける新鋭 グランver', }, - filename: "gran", - element: "water", + filename: 'gran', + element: 'water', }, { name: { - en: "Djeeta - Farer of the Skies", - ja: "空駆ける新鋭 ジータver", + en: 'Djeeta - Farer of the Skies', + ja: '空駆ける新鋭 ジータver', }, - filename: "djeeta", - element: "fire", + filename: 'djeeta', + element: 'fire', }, { name: { - en: "Cassius", - ja: "カシウス", + en: 'Cassius', + ja: 'カシウス', }, - filename: "cassius", - element: "dark", + filename: 'cassius', + element: 'dark', }, { name: { - en: "Percival", - ja: "パーシヴァル", + en: 'Percival', + ja: 'パーシヴァル', }, - filename: "percival", - element: "fire", + filename: 'percival', + element: 'fire', }, { name: { - en: "Vane", - ja: "ヴェイン", + en: 'Vane', + ja: 'ヴェイン', }, - filename: "vane", - element: "water", + filename: 'vane', + element: 'water', }, { name: { - en: "Heles", - ja: "ヘルエス", + en: 'Heles', + ja: 'ヘルエス', }, - filename: "heles", - element: "fire", + filename: 'heles', + element: 'fire', }, { name: { - en: "Lunalu", - ja: "ルナール", + en: 'Lunalu', + ja: 'ルナール', }, - filename: "lunalu", - element: "dark", + filename: 'lunalu', + element: 'dark', }, { name: { - en: "Catura", - ja: "シャトラ", + en: 'Catura', + ja: 'シャトラ', }, - filename: "catura", - element: "wind", + filename: 'catura', + element: 'wind', }, { name: { - en: "Yuisis", - ja: "ユイシス", + en: 'Yuisis', + ja: 'ユイシス', }, - filename: "yuisis", - element: "wind", + filename: 'yuisis', + element: 'wind', }, { name: { - en: "Meg", - ja: "メグ", + en: 'Meg', + ja: 'メグ', }, - filename: "meg", - element: "dark", + filename: 'meg', + element: 'dark', }, { name: { - en: "Seofon", - ja: "シエテ", + en: 'Seofon', + ja: 'シエテ', }, - filename: "seofon", - element: "wind", + filename: 'seofon', + element: 'wind', }, { name: { - en: "Quatre", - ja: "カトル", + en: 'Quatre', + ja: 'カトル', }, - filename: "quatre", - element: "water", + filename: 'quatre', + element: 'water', }, { name: { - en: "Tien", - ja: "エッセル", + en: 'Tien', + ja: 'エッセル', }, - filename: "tien", - element: "fire", + filename: 'tien', + element: 'fire', }, { name: { - en: "Seox", - ja: "シス", + en: 'Seox', + ja: 'シス', }, - filename: "seox", - element: "dark", + filename: 'seox', + element: 'dark', }, { name: { - en: "Aoidos", - ja: "アオイドス", + en: 'Aoidos', + ja: 'アオイドス', }, - filename: "aoidos", - element: "fire", + filename: 'aoidos', + element: 'fire', }, { name: { - en: "Sandalphon", - ja: "サンダルフォン", + en: 'Sandalphon', + ja: 'サンダルフォン', }, - filename: "sandalphon", - element: "light", + filename: 'sandalphon', + element: 'light', }, { name: { - en: "Vikala", - ja: "ビカラ", + en: 'Vikala', + ja: 'ビカラ', }, - filename: "vikala", - element: "dark", + filename: 'vikala', + element: 'dark', }, { name: { - en: "Belial", - ja: "ベリアル", + en: 'Belial', + ja: 'ベリアル', }, - filename: "belial", - element: "dark", + filename: 'belial', + element: 'dark', }, { name: { - en: "Zeta", - ja: "ゼタ", + en: 'Zeta', + ja: 'ゼタ', }, - filename: "zeta", - element: "fire", + filename: 'zeta', + element: 'fire', }, { name: { - en: "Beatrix", - ja: "ベアトリックス", + en: 'Beatrix', + ja: 'ベアトリックス', }, - filename: "beatrix", - element: "earth", + filename: 'beatrix', + element: 'earth', }, { name: { - en: "Yuel", - ja: "ユエル", + en: 'Yuel', + ja: 'ユエル', }, - filename: "yuel", - element: "fire", + filename: 'yuel', + element: 'fire', }, { name: { - en: "Societte", - ja: "ソシエ", + en: 'Societte', + ja: 'ソシエ', }, - filename: "societte", - element: "water", + filename: 'societte', + element: 'water', }, { name: { - en: "Kumbhira", - ja: "クビラ", + en: 'Kumbhira', + ja: 'クビラ', }, - filename: "kumbhira", - element: "light", + filename: 'kumbhira', + element: 'light', }, { name: { - en: "Narmaya", - ja: "ナルメア", + en: 'Narmaya', + ja: 'ナルメア', }, - filename: "narmaya", - element: "dark", + filename: 'narmaya', + element: 'dark', }, { name: { - en: "Siegfried", - ja: "ジークフリード", + en: 'Siegfried', + ja: 'ジークフリード', }, - filename: "siegfried", - element: "earth", + filename: 'siegfried', + element: 'earth', }, { name: { - en: "Naoise", - ja: "ノイシュ", + en: 'Naoise', + ja: 'ノイシュ', }, - filename: "naoise", - element: "light", + filename: 'naoise', + element: 'light', }, { name: { - en: "Scathacha", - ja: "スカーサハ", + en: 'Scathacha', + ja: 'スカーサハ', }, - filename: "scathacha", - element: "wind", + filename: 'scathacha', + element: 'wind', }, { name: { - en: "Seruel", - ja: "セルエル", + en: 'Seruel', + ja: 'セルエル', }, - filename: "seruel", - element: "light", + filename: 'seruel', + element: 'light', }, { name: { - en: "Shiva", - ja: "シヴァ", + en: 'Shiva', + ja: 'シヴァ', }, - filename: "shiva", - element: "fire", + filename: 'shiva', + element: 'fire', }, { name: { - en: "Europa", - ja: "エウロペ", + en: 'Europa', + ja: 'エウロペ', }, - filename: "europa", - element: "water", + filename: 'europa', + element: 'water', }, { name: { - en: "Grimnir", - ja: "グリームニル", + en: 'Grimnir', + ja: 'グリームニル', }, - filename: "grimnir", - element: "wind", + filename: 'grimnir', + element: 'wind', }, { name: { - en: "Alexiel", - ja: "ブローディア", + en: 'Alexiel', + ja: 'ブローディア', }, - filename: "alexiel", - element: "earth", + filename: 'alexiel', + element: 'earth', }, { name: { - en: "Sierokarte", - ja: "シェロカルテ", + en: 'Sierokarte', + ja: 'シェロカルテ', }, - filename: "siero", - element: "wind", + filename: 'siero', + element: 'wind', }, { name: { - en: "Vajra", - ja: "ヴァジラ", + en: 'Vajra', + ja: 'ヴァジラ', }, - filename: "vajra", - element: "water", + filename: 'vajra', + element: 'water', }, -]; +] diff --git a/utils/raidGroups.tsx b/utils/raidGroups.tsx index e18eb55c..58d20d0b 100644 --- a/utils/raidGroups.tsx +++ b/utils/raidGroups.tsx @@ -1,130 +1,130 @@ interface RaidGroup { name: { - [key: string]: string; - en: string; - ja: string; - }; + [key: string]: string + en: string + ja: string + } } export const raidGroups: RaidGroup[] = [ { name: { - en: "Assorted", - ja: "その他", + en: 'Assorted', + ja: 'その他', }, }, { name: { - en: "Guild Wars", - ja: "星の古戦場", + en: 'Guild Wars', + ja: '星の古戦場', }, }, { name: { - en: "Omega", - ja: "マグナ", + en: 'Omega', + ja: 'マグナ', }, }, { name: { - en: "T1 Summons", - ja: "召喚石マルチ1（旧）", + en: 'T1 Summons', + ja: '召喚石マルチ1（旧）', }, }, { name: { - en: "T2 Summons", - ja: "召喚石マルチ2（新）", + en: 'T2 Summons', + ja: '召喚石マルチ2（新）', }, }, { name: { - en: "Primarchs", - ja: "四大天使", + en: 'Primarchs', + ja: '四大天使', }, }, { name: { - en: "Nightmare", - ja: "HELL", + en: 'Nightmare', + ja: 'HELL', }, }, { name: { - en: "Omega (Impossible)", - ja: "マグナHL", + en: 'Omega (Impossible)', + ja: 'マグナHL', }, }, { name: { - en: "Omega II", - ja: "マグナII", + en: 'Omega II', + ja: 'マグナII', }, }, { name: { - en: "Tier 1 Summons (Impossible)", - ja: "旧召喚石HL", + en: 'Tier 1 Summons (Impossible)', + ja: '旧召喚石HL', }, }, { name: { - en: "Tier 3 Summons", - ja: "エピックHL", + en: 'Tier 3 Summons', + ja: 'エピックHL', }, }, { name: { - en: "Ennead", - ja: "エニアド", + en: 'Ennead', + ja: 'エニアド', }, }, { name: { - en: "Malice", - ja: "マリス", + en: 'Malice', + ja: 'マリス', }, }, { name: { - en: "6-Star Raids", - ja: "★★★★★★", + en: '6-Star Raids', + ja: '★★★★★★', }, }, { name: { - en: "Six-Dragons", - ja: "六竜HL", + en: 'Six-Dragons', + ja: '六竜HL', }, }, { name: { - en: "Nightmare (Impossible)", - ja: "高級HELL", + en: 'Nightmare (Impossible)', + ja: '高級HELL', }, }, { name: { - en: "Arcarum: Replicard Sandbox", - ja: "アーカルム　レプリカルド・サンドボックス", + en: 'Arcarum: Replicard Sandbox', + ja: 'アーカルム　レプリカルド・サンドボックス', }, }, { name: { - en: "Astrals", - ja: "星の民", + en: 'Astrals', + ja: '星の民', }, }, { name: { - en: "Disaster", - ja: "災害", + en: 'Disaster', + ja: '災害', }, }, { name: { - en: "Super Ultimate", - ja: "スーパーアルティメット", + en: 'Super Ultimate', + ja: 'スーパーアルティメット', }, }, -]; +] diff --git a/utils/skillGroups.tsx b/utils/skillGroups.tsx index 986ae820..8e8c726a 100644 --- a/utils/skillGroups.tsx +++ b/utils/skillGroups.tsx @@ -1,91 +1,91 @@ export interface SkillGroup { - id: number; + id: number name: { - [key: string]: string; - en: string; - ja: string; - }; + [key: string]: string + en: string + ja: string + } } export const skillClassification: SkillGroup[] = [ { id: 0, name: { - en: "Buffing", - ja: "強化アビリティ", + en: 'Buffing', + ja: '強化アビリティ', }, }, { id: 1, name: { - en: "Debuffing", - ja: "弱体アビリティ", + en: 'Debuffing', + ja: '弱体アビリティ', }, }, { id: 2, name: { - en: "Damaging", - ja: "ダメージアビリティ", + en: 'Damaging', + ja: 'ダメージアビリティ', }, }, { id: 3, name: { - en: "Healing", - ja: "回復アビリティ", + en: 'Healing', + ja: '回復アビリティ', }, }, { id: 4, name: { - en: "Field", - ja: "フィールドアビリティ", + en: 'Field', + ja: 'フィールドアビリティ', }, }, -]; +] export const skillGroups: SkillGroup[] = [ { id: 0, name: { - en: "Buffing", - ja: "強化アビリティ", + en: 'Buffing', + ja: '強化アビリティ', }, }, { id: 1, name: { - en: "Debuffing", - ja: "弱体アビリティ", + en: 'Debuffing', + ja: '弱体アビリティ', }, }, { id: 2, name: { - en: "Damaging", - ja: "ダメージアビリティ", + en: 'Damaging', + ja: 'ダメージアビリティ', }, }, { id: 3, name: { - en: "Healing", - ja: "回復アビリティ", + en: 'Healing', + ja: '回復アビリティ', }, }, { id: 4, name: { - en: "Extended Mastery", - ja: "リミットアビリティ", + en: 'Extended Mastery', + ja: 'リミットアビリティ', }, }, { id: 5, name: { - en: "Base", - ja: "ベースアビリティ", + en: 'Base', + ja: 'ベースアビリティ', }, }, -]; +] diff --git a/utils/stateValues.tsx b/utils/stateValues.tsx index 92d9abce..630fbd24 100644 --- a/utils/stateValues.tsx +++ b/utils/stateValues.tsx @@ -1,51 +1,51 @@ -export const rarities = ["sr", "ssr"]; +export const rarities = ['sr', 'ssr'] export const elements = [ - "null", - "wind", - "fire", - "water", - "earth", - "dark", - "light", -]; + 'null', + 'wind', + 'fire', + 'water', + 'earth', + 'dark', + 'light', +] export const proficiencies = [ - "sabre", - "dagger", - "spear", - "axe", - "staff", - "melee", - "gun", - "bow", - "harp", - "katana", -]; + 'sabre', + 'dagger', + 'spear', + 'axe', + 'staff', + 'melee', + 'gun', + 'bow', + 'harp', + 'katana', +] export const weaponSeries = [ - "seraphic", - "grand", - "opus", - "draconic", - "ultima", - "bahamut", - "omega", - "primal", - "olden_primal", - "militis", - "beast", - "rose", - "xeno", - "hollowsky", - "astral", - "epic", - "ennead", - "cosmos", - "ancestral", - "superlative", - "vintage", - "class_champion", - "sephira", - "new_world", -]; + 'seraphic', + 'grand', + 'opus', + 'draconic', + 'ultima', + 'bahamut', + 'omega', + 'primal', + 'olden_primal', + 'militis', + 'beast', + 'rose', + 'xeno', + 'hollowsky', + 'astral', + 'epic', + 'ennead', + 'cosmos', + 'ancestral', + 'superlative', + 'vintage', + 'class_champion', + 'sephira', + 'new_world', +] diff --git a/utils/timeAgo.tsx b/utils/timeAgo.tsx index 5499c88b..ac8cde33 100644 --- a/utils/timeAgo.tsx +++ b/utils/timeAgo.tsx @@ -1,25 +1,25 @@ const DIVISIONS: { amount: number; name: Intl.RelativeTimeFormatUnit }[] = [ - { amount: 60, name: "seconds" }, - { amount: 60, name: "minutes" }, - { amount: 24, name: "hours" }, - { amount: 7, name: "days" }, - { amount: 4.34524, name: "weeks" }, - { amount: 12, name: "months" }, - { amount: Number.POSITIVE_INFINITY, name: "years" }, -]; + { amount: 60, name: 'seconds' }, + { amount: 60, name: 'minutes' }, + { amount: 24, name: 'hours' }, + { amount: 7, name: 'days' }, + { amount: 4.34524, name: 'weeks' }, + { amount: 12, name: 'months' }, + { amount: Number.POSITIVE_INFINITY, name: 'years' }, +] -export function formatTimeAgo(date: Date, locale: string = "en-us") { - const formatter = new Intl.RelativeTimeFormat(locale, { numeric: "auto" }); +export function formatTimeAgo(date: Date, locale: string = 'en-us') { + const formatter = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' }) - let duration = (date.getTime() - new Date().getTime()) / 1000; + let duration = (date.getTime() - new Date().getTime()) / 1000 for (let i = 0; i <= DIVISIONS.length; i++) { - const division = DIVISIONS[i]; + const division = DIVISIONS[i] if (Math.abs(duration) < division.amount) { - return formatter.format(Math.round(duration), division.name); + return formatter.format(Math.round(duration), division.name) } - duration /= division.amount; + duration /= division.amount } } diff --git a/utils/useDidMountEffect.tsx b/utils/useDidMountEffect.tsx index c8307e0a..babddeec 100644 --- a/utils/useDidMountEffect.tsx +++ b/utils/useDidMountEffect.tsx @@ -1,12 +1,12 @@ -import React, { useEffect, useRef } from "react"; +import React, { useEffect, useRef } from 'react' const useDidMountEffect = (func: any, deps: any) => { - const didMount = useRef(false); + const didMount = useRef(false) useEffect(() => { - if (didMount.current) func(); - else didMount.current = true; - }, deps); -}; + if (didMount.current) func() + else didMount.current = true + }, deps) +} -export default useDidMountEffect; +export default useDidMountEffect