From 864c29933a8164cc375a74442c7a313536946b63 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Sat, 13 Jan 2024 18:49:03 -0600
Subject: [PATCH] fix: armor desync

---
 .../[id]/components/Model/components/TankArmor.tsx    | 11 ++++-------
 .../[id]/components/Model/components/TankModel.tsx    | 10 ++++------
 2 files changed, 8 insertions(+), 13 deletions(-)

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 d7b005f2c..b3c18ef7f 100644
--- a/src/app/tools/tankopedia/[id]/components/Model/components/TankArmor.tsx
+++ b/src/app/tools/tankopedia/[id]/components/Model/components/TankArmor.tsx
@@ -1,5 +1,5 @@
-import { GroupProps, useLoader } from '@react-three/fiber';
-import { useEffect, useRef, useState } from 'react';
+import { useLoader } from '@react-three/fiber';
+import { memo, useEffect, useRef, useState } from 'react';
 import { Euler, Group, Mesh, Vector3 } from 'three';
 import { GLTFLoader } from 'three-stdlib';
 import { degToRad } from 'three/src/math/MathUtils';
@@ -19,9 +19,7 @@ import { nameToArmorId } from '../../../../../../../core/blitzkrieg/nameToArmorI
 import { resolveArmor } from '../../../../../../../core/blitzkrieg/resolveThickness';
 import { useTankopedia } from '../../../../../../../stores/tankopedia';
 
-interface TankArmorProps extends GroupProps {}
-
-export function TankArmor({ ...props }: TankArmorProps) {
+export const TankArmor = memo(() => {
   const wrapper = useRef<Group>(null);
   const [awaitedModelDefinitions, setAwaitedModelDefinitions] = useState<
     ModelDefinitions | undefined
@@ -153,7 +151,6 @@ export function TankArmor({ ...props }: TankArmorProps) {
   return (
     <HeadsUpDisplay>
       <group
-        {...props}
         ref={wrapper}
         rotation={[-Math.PI / 2, 0, 0]}
         visible={initialTankopediaState.mode === 'armor'}
@@ -288,4 +285,4 @@ export function TankArmor({ ...props }: TankArmorProps) {
       </group>
     </HeadsUpDisplay>
   );
-}
+});
diff --git a/src/app/tools/tankopedia/[id]/components/Model/components/TankModel.tsx b/src/app/tools/tankopedia/[id]/components/Model/components/TankModel.tsx
index 25920b008..2c45d6c79 100644
--- a/src/app/tools/tankopedia/[id]/components/Model/components/TankModel.tsx
+++ b/src/app/tools/tankopedia/[id]/components/Model/components/TankModel.tsx
@@ -1,5 +1,5 @@
 import { ThreeEvent, useLoader, useThree } from '@react-three/fiber';
-import { useEffect, useRef, useState } from 'react';
+import { memo, useEffect, useRef, useState } from 'react';
 import {
   Euler,
   Group,
@@ -27,9 +27,7 @@ import mutateTankopedia, {
   useTankopedia,
 } from '../../../../../../../stores/tankopedia';
 
-export function TankModel() {
-  // "TypeError: dispatcher.use is not a function"
-  // const awaitedModelDefinitions = use(modelDefinitions);
+export const TankModel = memo(() => {
   const [awaitedModelDefinitions, setAwaitedModelDefinitions] = useState<
     ModelDefinitions | undefined
   >(undefined);
@@ -116,7 +114,7 @@ export function TankModel() {
     return () => {
       modelTransformEvent.off(handleModelTransform);
     };
-  }, [awaitedModelDefinitions]);
+  });
 
   if (!awaitedModelDefinitions) return;
 
@@ -317,4 +315,4 @@ export function TankModel() {
       </group>
     </group>
   );
-}
+});