diff --git a/components/CharacterGrid/index.tsx b/components/CharacterGrid/index.tsx index ecfecafc..284a411b 100644 --- a/components/CharacterGrid/index.tsx +++ b/components/CharacterGrid/index.tsx @@ -15,6 +15,7 @@ import './index.scss' // Props interface Props { + new: boolean slug?: string createParty: () => Promise> pushHistory?: (path: string) => void @@ -38,6 +39,7 @@ const CharacterGrid = (props: Props) => { const [slug, setSlug] = useState() const [found, setFound] = useState(false) const [loading, setLoading] = useState(true) + const [firstLoadComplete, setFirstLoadComplete] = useState(false) // Create a temporary state to store previous character uncap values const [previousUncapValues, setPreviousUncapValues] = useState<{[key: number]: number}>({}) @@ -49,6 +51,19 @@ const CharacterGrid = (props: Props) => { else appState.party.editable = true }, [slug, props.slug]) + // Set the editable flag only on first load + useEffect(() => { + if (!loading && !firstLoadComplete) { + // If user is logged in and matches + if ((cookies.user && party.user && cookies.user.user_id === party.user.id) || props.new) + appState.party.editable = true + else + appState.party.editable = false + + setFirstLoadComplete(true) + } + }, [props.new, cookies, party, loading, firstLoadComplete]) + // Initialize an array of current uncap values for each characters useEffect(() => { let initialPreviousUncapValues: {[key: number]: number} = {} @@ -66,15 +81,6 @@ const CharacterGrid = (props: Props) => { function processResult(response: AxiosResponse) { // Store the response const party: Party = response.data.party - - // Get the party user and logged in user, if possible, to compare - const partyUser = (party.user) ? party.user.id : undefined - const loggedInUser = (cookies.user) ? cookies.user.user_id : '' - - if (partyUser != undefined && loggedInUser != undefined && partyUser === loggedInUser) - appState.party.editable = true - else - appState.party.editable = false // Store the important party and state-keeping values appState.party.id = party.id diff --git a/components/Party/index.tsx b/components/Party/index.tsx index f3b9035c..07d9ac68 100644 --- a/components/Party/index.tsx +++ b/components/Party/index.tsx @@ -18,11 +18,12 @@ import { AxiosResponse } from 'axios' // Props interface Props { + new?: boolean slug?: string pushHistory?: (path: string) => void } -const Party = (props: Props) => { +const Party = (props: Props) => { // Cookies const [cookies] = useCookies(['user']) const headers = useMemo(() => { @@ -134,11 +135,7 @@ const Party = (props: Props) => { useEffect(() => { const shortcode = (props.slug) ? props.slug : undefined - - if (shortcode) - fetchDetails(shortcode) - else - appState.party.editable = true + if (shortcode) fetchDetails(shortcode) }, [props.slug, fetchDetails]) // Render: JSX components @@ -152,6 +149,7 @@ const Party = (props: Props) => { const weaponGrid = ( { const summonGrid = ( { const characterGrid = ( Promise> pushHistory?: (path: string) => void @@ -39,6 +40,7 @@ const SummonGrid = (props: Props) => { const [slug, setSlug] = useState() const [found, setFound] = useState(false) const [loading, setLoading] = useState(true) + const [firstLoadComplete, setFirstLoadComplete] = useState(false) // Create a temporary state to store previous weapon uncap value const [previousUncapValues, setPreviousUncapValues] = useState<{[key: number]: number}>({}) @@ -50,6 +52,19 @@ const SummonGrid = (props: Props) => { else appState.party.editable = true }, [slug, props.slug]) + // Set the editable flag only on first load + useEffect(() => { + if (!loading && !firstLoadComplete) { + // If user is logged in and matches + if ((cookies.user && party.user && cookies.user.user_id === party.user.id) || props.new) + appState.party.editable = true + else + appState.party.editable = false + + setFirstLoadComplete(true) + } + }, [props.new, cookies, party, loading, firstLoadComplete]) + // Initialize an array of current uncap values for each summon useEffect(() => { let initialPreviousUncapValues: {[key: number]: number} = {} @@ -76,15 +91,6 @@ const SummonGrid = (props: Props) => { function processResult(response: AxiosResponse) { // Store the response const party: Party = response.data.party - - // Get the party user and logged in user, if possible, to compare - const partyUser = (party.user) ? party.user.id : undefined - const loggedInUser = (cookies.user) ? cookies.user.user_id : '' - - if (partyUser != undefined && loggedInUser != undefined && partyUser === loggedInUser) - appState.party.editable = true - else - appState.party.editable = false // Store the important party and state-keeping values appState.party.id = party.id diff --git a/components/WeaponGrid/index.tsx b/components/WeaponGrid/index.tsx index 39dd358a..753cc288 100644 --- a/components/WeaponGrid/index.tsx +++ b/components/WeaponGrid/index.tsx @@ -16,6 +16,7 @@ import './index.scss' // Props interface Props { + new: boolean slug?: string createParty: (extra: boolean) => Promise> pushHistory?: (path: string) => void @@ -39,6 +40,7 @@ const WeaponGrid = (props: Props) => { const [slug, setSlug] = useState() const [found, setFound] = useState(false) const [loading, setLoading] = useState(true) + const [firstLoadComplete, setFirstLoadComplete] = useState(false) // Create a temporary state to store previous weapon uncap values const [previousUncapValues, setPreviousUncapValues] = useState<{[key: number]: number}>({}) @@ -50,6 +52,19 @@ const WeaponGrid = (props: Props) => { else appState.party.editable = true }, [slug, props.slug]) + // Set the editable flag only on first load + useEffect(() => { + if (!loading && !firstLoadComplete) { + // If user is logged in and matches + if ((cookies.user && party.user && cookies.user.user_id === party.user.id) || props.new) + appState.party.editable = true + else + appState.party.editable = false + + setFirstLoadComplete(true) + } + }, [props.new, cookies, party, loading, firstLoadComplete]) + // Initialize an array of current uncap values for each weapon useEffect(() => { let initialPreviousUncapValues: {[key: number]: number} = {} @@ -72,15 +87,6 @@ const WeaponGrid = (props: Props) => { function processResult(response: AxiosResponse) { // Store the response const party: Party = response.data.party - - // Get the party user and logged in user, if possible, to compare - const partyUser = (party.user) ? party.user.id : undefined - const loggedInUser = (cookies.user) ? cookies.user.user_id : '' - - if (partyUser != undefined && loggedInUser != undefined && partyUser === loggedInUser) - appState.party.editable = true - else - appState.party.editable = false // Store the important party and state-keeping values appState.party.id = party.id diff --git a/pages/new/index.tsx b/pages/new/index.tsx index b4c75571..98ea6549 100644 --- a/pages/new/index.tsx +++ b/pages/new/index.tsx @@ -1,7 +1,7 @@ import React from 'react' import Party from '~components/Party' -const NewRoute: React.FC = () => { +const NewRoute = () => { function callback(path: string) { // This is scuffed, how do we do this natively? window.history.replaceState(null, `Grid Tool`, `${path}`) @@ -9,7 +9,7 @@ const NewRoute: React.FC = () => { return (
- +
) }