diff --git a/components/Header/index.tsx b/components/Header/index.tsx index 57cad9d1..91504b11 100644 --- a/components/Header/index.tsx +++ b/components/Header/index.tsx @@ -10,6 +10,7 @@ import Link from 'next/link' import api from '~utils/api' import { accountState, initialAccountState } from '~utils/accountState' import { appState, initialAppState } from '~utils/appState' +import { getLocalId } from '~utils/localId' import { retrieveLocaleCookies } from '~utils/retrieveCookies' import { @@ -189,12 +190,16 @@ const Header = () => { function remixTeam() { setOriginalName(partySnapshot.name ? partySnapshot.name : t('no_title')) - if (partySnapshot.shortcode) - api.remix(partySnapshot.shortcode).then((response) => { - const remix = response.data.party - router.push(`/p/${remix.shortcode}`) - setRemixToastOpen(true) - }) + if (partySnapshot.shortcode) { + const body = getLocalId() + api + .remix({ shortcode: partySnapshot.shortcode, body: body }) + .then((response) => { + const remix = response.data.party + router.push(`/p/${remix.shortcode}`) + setRemixToastOpen(true) + }) + } } function toggleFavorite() { diff --git a/components/Party/index.tsx b/components/Party/index.tsx index 347bc49e..3bc61ce1 100644 --- a/components/Party/index.tsx +++ b/components/Party/index.tsx @@ -1,7 +1,7 @@ import React, { useEffect, useState } from 'react' import { getCookie } from 'cookies-next' import { useRouter } from 'next/router' -import { useSnapshot } from 'valtio' +import { subscribe, useSnapshot } from 'valtio' import clonedeep from 'lodash.clonedeep' import ls from 'local-storage' @@ -12,10 +12,12 @@ import SummonGrid from '~components/SummonGrid' import CharacterGrid from '~components/CharacterGrid' import api from '~utils/api' +import { accountState } from '~utils/accountState' import { appState, initialAppState } from '~utils/appState' +import { getLocalId } from '~utils/localId' import { GridType } from '~utils/enums' import { retrieveCookies } from '~utils/retrieveCookies' -import { accountCookie, setEditKey, unsetEditKey } from '~utils/userToken' +import { setEditKey, unsetEditKey } from '~utils/userToken' import type { DetailsObject } from '~types' @@ -42,6 +44,7 @@ const Party = (props: Props) => { const { party } = useSnapshot(appState) const [editable, setEditable] = useState(false) const [currentTab, setCurrentTab] = useState(GridType.Weapon) + const [refresh, setRefresh] = useState(false) // Retrieve cookies const cookies = retrieveCookies() @@ -53,6 +56,14 @@ const Party = (props: Props) => { if (props.team) storeParty(props.team) }, []) + // Subscribe to app state to listen for account changes and + // unsubscribe when component is unmounted + const unsubscribe = subscribe(accountState, () => { + setRefresh(true) + }) + + useEffect(() => () => unsubscribe(), []) + // Set editable on first load useEffect(() => { // Get cookie @@ -86,7 +97,7 @@ const Party = (props: Props) => { appState.party.editable = editable setEditable(editable) - }) + }, [refresh]) // Set selected tab from props useEffect(() => { @@ -99,7 +110,7 @@ const Party = (props: Props) => { if (details) payload = formatDetailsObject(details) return await api.endpoints.parties - .create({ ...payload, ...localId() }) + .create({ ...payload, ...getLocalId() }) .then((response) => storeParty(response.data.party)) } @@ -290,15 +301,6 @@ const Party = (props: Props) => { } } - // Methods: Unauth validation - function localId() { - const cookie = accountCookie() - const parsed = JSON.parse(cookie as string) - if (parsed && !parsed.token) { - return { local_id: parsed.userId } - } else return {} - } - // Render: JSX components const navigation = ( { + setRefresh(true) + }) + + useEffect(() => () => unsubscribe(), []) + const accountCookie = getCookie('account') const userCookie = getCookie('user') @@ -42,9 +57,37 @@ function MyApp({ Component, pageProps }: AppProps) { } } else { console.log(`You are not currently logged in.`) + setCookieFromLocalStorage() } }, []) + useEffect(() => { + setCookieFromLocalStorage() + }, [refresh]) + + function setCookieFromLocalStorage() { + const localUserId: string | null = get('userId') + const cookies = retrieveCookies() + if ( + localUserId && + (!cookies || (cookies && cookies.account && !cookies.account.token)) + ) { + const expiresAt = new Date() + expiresAt.setDate(expiresAt.getDate() + 60) + + const cookieObj = { + userId: localUserId, + username: undefined, + token: undefined, + } + + setCookie('account', cookieObj, { + path: '/', + expires: expiresAt, + }) + } + } + return ( diff --git a/pages/new/index.tsx b/pages/new/index.tsx index 69c8ae7d..a89e554a 100644 --- a/pages/new/index.tsx +++ b/pages/new/index.tsx @@ -1,6 +1,8 @@ import React, { useEffect, useState } from 'react' -import { useRouter } from 'next/router' +import { getCookie, setCookie } from 'cookies-next' +import { get, set } from 'local-storage' import { serverSideTranslations } from 'next-i18next/serverSideTranslations' +import { useRouter } from 'next/router' import { v4 as uuidv4 } from 'uuid' import clonedeep from 'lodash.clonedeep' @@ -19,7 +21,6 @@ import type { AxiosError } from 'axios' import type { NextApiRequest, NextApiResponse } from 'next' import type { PageContextObj, ResponseStatus } from '~types' import { GridType } from '~utils/enums' -import { setCookie } from 'cookies-next' interface Props { context?: PageContextObj @@ -59,6 +60,13 @@ const NewRoute: React.FC = ({ } }, [router.asPath]) + // Persist generated userId in storage + useEffect(() => { + const cookie = getCookie('account') + const data: AccountCookie = JSON.parse(cookie as string) + if (!get('userId') && data && !data.token) set('userId', data.userId) + }, []) + useEffect(() => { if (context && context.jobs && context.jobSkills) { appState.raids = context.raids diff --git a/utils/api.tsx b/utils/api.tsx index 862dac3c..391dfeb1 100644 --- a/utils/api.tsx +++ b/utils/api.tsx @@ -120,9 +120,9 @@ class Api { return axios.get(resourceUrl, params) } - remix(shortcode: string, params?: {}) { + remix({ shortcode, body, params}: { shortcode: string, body?: {}, params?: {} }) { const resourceUrl = `${this.url}/parties/${shortcode}/remix` - return axios.post(resourceUrl, params) + return axios.post(resourceUrl, body, params) } savedTeams(params: {}) { diff --git a/utils/localId.tsx b/utils/localId.tsx new file mode 100644 index 00000000..643d79af --- /dev/null +++ b/utils/localId.tsx @@ -0,0 +1,9 @@ +import { accountCookie } from './userToken' + +export function getLocalId() { + const cookie = accountCookie() + const parsed = JSON.parse(cookie as string) + if (parsed && !parsed.token) { + return { local_id: parsed.userId } + } else return {} +}