diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx index 405e7e8..dc8ba91 100644 --- a/packages/app/src/App.tsx +++ b/packages/app/src/App.tsx @@ -35,6 +35,13 @@ export default function App() { towerDampening: 4 }); + const [fallback, setFallback] = useState>({ + name: "Battlesquid", + year: new Date().getFullYear() + }); + + const [requestOk, setRequestOk] = useState(true); + const [mobileOpened, { toggle: toggleMobile }] = useDisclosure(); const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true); @@ -52,13 +59,30 @@ export default function App() { const [ready, setReady] = useState(false); useEffect(() => { + setRequestOk(true); setReady( localStorage.getItem("token") !== null && !result.fetching ) }, [result.fetching]); - const appContent = ready + useEffect(() => { + if (result.data?.user) { + setFallback({ + name: parameters.name, + year: parameters.year + }); + } else { + setRequestOk(false); + setParameters({ + ...parameters, + name: fallback.name, + year: fallback.year + }) + } + }, [result.data]); + + const content = ready ? ( <> { - - }} /> - {appContent} + {content} diff --git a/packages/app/src/components/sidebar.tsx b/packages/app/src/components/sidebar.tsx index 3d2f6d5..ae6108f 100644 --- a/packages/app/src/components/sidebar.tsx +++ b/packages/app/src/components/sidebar.tsx @@ -1,6 +1,6 @@ import { AppShell, Button, Checkbox, ColorInput, Divider, NumberInput, Stack, TextInput, Tooltip } from "@mantine/core"; import { SkylineModelParameters } from "../App"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import { useSceneStore } from "../scene"; import { STLExporter } from "three/examples/jsm/Addons.js"; @@ -10,19 +10,30 @@ export interface GenerateOptions { } interface SidebarProps { - ready: boolean; + authenticated: boolean; + ok: boolean; setParameters: React.Dispatch>; parameters: SkylineModelParameters; - onExport(): void; } export function Sidebar(props: SidebarProps) { - const { ready, parameters, setParameters } = props; + const { authenticated, ok, parameters, setParameters } = props; const [name, setName] = useState(parameters.name); const [year, setYear] = useState(parameters.year); + const [modified, setModified] = useState(false); const { scene, dirty } = useSceneStore(); - if (!ready) { + useEffect(() => { + setModified(false); + }, [ok]); + + useEffect(() => { + if (!ok) { + setModified(true); + } + }, [name]) + + if (!authenticated) { return (

skyline

@@ -46,6 +57,7 @@ export function Sidebar(props: SidebarProps) { placeholder="Github Username" value={name} onChange={e => setName(e.target.value)} + error={ok || modified ? "" : `Unable to find profile for "${name}".`} />