From 909474d4cbb6c0df0658e28d25f269e128e73adf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com> Date: Thu, 11 Jan 2024 21:44:44 -0600 Subject: [PATCH] fix: no null return before hook --- .../[id]/components/Model/TankDisplay.tsx | 8 ++++--- .../components/Model/components/TankArmor.tsx | 17 ++++++++------ .../components/Model/components/TankModel.tsx | 23 +++++++++++-------- .../[id]/components/RotationInputs.tsx | 14 +++++------ 4 files changed, 35 insertions(+), 27 deletions(-) diff --git a/src/app/tools/tankopedia/[id]/components/Model/TankDisplay.tsx b/src/app/tools/tankopedia/[id]/components/Model/TankDisplay.tsx index 2211f5e9c..fff394397 100644 --- a/src/app/tools/tankopedia/[id]/components/Model/TankDisplay.tsx +++ b/src/app/tools/tankopedia/[id]/components/Model/TankDisplay.tsx @@ -42,8 +42,6 @@ export function TankDisplay() { return state.protagonist; }); - if (!protagonist) return null; - function handlePointerDown() { window.addEventListener('pointermove', handlePointerMove); window.addEventListener('pointerup', handlePointerUp); @@ -71,6 +69,8 @@ export function TankDisplay() { }); useEffect(() => { + if (!protagonist) return void 0; + const tankModelDefinition = awaitedModelDefinitions[protagonist.tank.id]; const turretModelDefinition = tankModelDefinition.turrets[protagonist.turret.id]; @@ -84,7 +84,9 @@ export function TankDisplay() { turretModelDefinition.yaw, ); }); - }, [protagonist.gun, protagonist.turret]); + }, [protagonist?.gun, protagonist?.turret]); + + if (!protagonist) return null; return ( diff --git a/src/app/tools/tankopedia/[id]/components/Model/components/TankArmor.tsx b/src/app/tools/tankopedia/[id]/components/Model/components/TankArmor.tsx index 60c377794..c8ee3ee8e 100644 --- a/src/app/tools/tankopedia/[id]/components/Model/components/TankArmor.tsx +++ b/src/app/tools/tankopedia/[id]/components/Model/components/TankArmor.tsx @@ -34,7 +34,16 @@ export function TankArmor({ ...props }: TankArmorProps) { return state.antagonist; }); const showSpacedArmor = useTankopedia((state) => state.model.showSpacedArmor); + const model = useTankopedia((state) => state.model); + useEffect(() => { + (async () => { + setAwaitedModelDefinitions(await modelDefinitions); + })(); + }, []); + + // it's ok to have hooks after this early termination because this will never be true + // it's more for typescript to stop throwing a fit if (!protagonist || !antagonist) return null; const armorGltf = useLoader( @@ -45,13 +54,6 @@ export function TankArmor({ ...props }: TankArmorProps) { GLTFLoader, asset(`3d/tanks/models/${protagonist.tank.id}.glb`), ); - const model = useTankopedia((state) => state.model); - - useEffect(() => { - (async () => { - setAwaitedModelDefinitions(await modelDefinitions); - })(); - }, []); if (!awaitedModelDefinitions) return null; @@ -247,6 +249,7 @@ export function TankArmor({ ...props }: TankArmorProps) { (isSpaced && !showSpacedArmor) ) return null; + return ( state.model); + const hullContainer = useRef(null); + const turretContainer = useRef(null); + const gunContainer = useRef(null); + + useEffect(() => { + (async () => { + setAwaitedModelDefinitions(await modelDefinitions); + })(); + }, []); if (!protagonist) return null; @@ -40,18 +50,8 @@ export function TankModel() { GLTFLoader, asset(`3d/tanks/models/${protagonist.tank.id}.glb`), ); - const model = useTankopedia((state) => state.model); - const hullContainer = useRef(null); - const turretContainer = useRef(null); - const gunContainer = useRef(null); const nodes = Object.values(gltf.nodes); - useEffect(() => { - (async () => { - setAwaitedModelDefinitions(await modelDefinitions); - })(); - }, []); - if (!awaitedModelDefinitions) return null; const tankModelDefinition = awaitedModelDefinitions[protagonist.tank.id]; @@ -150,6 +150,7 @@ export function TankModel() { } if (!isVisible) return null; + return ( { hullYawInput.current!.value = `${-Math.round( model.hullYaw * (180 / Math.PI), @@ -41,6 +34,13 @@ export function RotationInputs() { )}`; }, [model.gunPitch]); + if (!protagonist) return null; + + const tankModelDefinition = awaitedModelDefinitions[protagonist.tank.id]; + const turretModelDefinition = + tankModelDefinition.turrets[protagonist.turret.id]; + const gunModelDefinition = turretModelDefinition.guns[protagonist.gun.id]; + return (