fix: linting issues

longtv2222 · Dec 20, 2023 · 73640bc · 73640bc
1 parent c4b974d
commit 73640bc
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 36 deletions.
diff --git a/prototype/src/App.tsx b/prototype/src/App.tsx
@@ -5,18 +5,20 @@ import Scene from "./components/Models/Autobianchi Stellina"
 import Maserati from "./components/Models/Maserati_mc20"
 import { Leva, levaStore, useControls, button } from 'leva'
 import { Suspense, useEffect, useRef, useState } from 'react'
-import { Model } from './components/Models/model'
+import { Model, ModelProps, models } from './components/Models/model'
+
+interface Cars {
+  readonly Model:(props: ModelProps) => JSX.Element;
+  readonly interior: string;
+  readonly exterior: string;
+}
 
 export default function App() {
-  const carNameComponentMap: Record<string, {
-    readonly interior: string,
-    readonly exterior: string,
-    readonly Model: (props: Model) => JSX.Element,
-  }> = {
+  const carNameComponentMap: Record<Model, Cars> = {
     "Lamborghini Aventador J": {
       Model: Lamborghini,
       interior: "#000000",
-      exterior: "#9a9898"
+      exterior: "#9a9898",
     },
     "Maserati MC20": {
       Model: Maserati,
@@ -33,47 +35,47 @@ export default function App() {
   const [carsState, setCarsState] = useState(() => carNameComponentMap);
   const carsStateRef = useRef(carsState);
 
+  useEffect(() => {
+    carsStateRef.current = carsState;
+  }, [carsState]);
+
   const resetCarColor = () => {
-    const model: string = levaStore.get("Select");
+    const model = levaStore.get("Select") as Model;
     set({
-      Exterior: carNameComponentMap[model]?.exterior,
-      Interior: carNameComponentMap[model]?.interior,
+      Exterior: carNameComponentMap[model].exterior,
+      Interior: carNameComponentMap[model].interior,
     });
   };
 
   const setCarInterior = (interior: string) => {
-    const model: string = levaStore.get("Select");
+    const model = levaStore.get("Select") as Model;
     setCarsState({
       ...carsStateRef.current,
       [model]: {
-        ...carsStateRef.current[model]!,
+        ...carsStateRef.current[model],
         interior
       }
     })
   };
 
   const setCarExterior = (exterior: string) => {
-    const model: string = levaStore.get("Select");
+    const model = levaStore.get("Select") as Model;
     setCarsState({
       ...carsStateRef.current,
       [model]: {
-        ...carsStateRef.current[model]!,
+        ...carsStateRef.current[model],
         exterior
       }
     })
   };
 
-  useEffect(() => {
-    carsStateRef.current = carsState;
-  }, [carsState]);
-
   const [{ Rotation, Stats: stats }, set] = useControls(() => ({
     Select: {
-      options: Object.keys(carNameComponentMap),
-      onChange: (value) => {
+      options: models,
+      onChange: (value: Model) => {
         set({
-          Exterior: carsStateRef.current[value]?.exterior,
-          Interior: carsStateRef.current[value]?.interior,
+          Exterior: carsStateRef.current[value].exterior,
+          Interior: carsStateRef.current[value].interior,
         });
       }
     },
@@ -87,7 +89,7 @@ export default function App() {
     },
     Rotation: false,
     Stats: true,
-    "Reset Color": button(resetCarColor),
+    "Reset color": button(resetCarColor),
   }));
 
   const { progress } = useProgress()
@@ -96,11 +98,11 @@ export default function App() {
     <>
       <Canvas camera={{ position: [0, 0, 10] }} shadows={true} frameloop="demand">
         <Suspense fallback={null}>
-          {Object.entries(carNameComponentMap)
-            .map(([name, car]) => (
-              car.Model({
-                exterior: carsState[name]?.exterior!,
-                interior: carsState[name]?.interior!,
+          {models
+            .map(name => (
+              carNameComponentMap[name].Model({
+                exterior: carsState[name].exterior,
+                interior: carsState[name].interior,
                 visible: levaStore.get("Select") === name,
               })
             ))}

diff --git a/prototype/src/components/Models/Autobianchi Stellina.tsx b/prototype/src/components/Models/Autobianchi Stellina.tsx
@@ -5,7 +5,7 @@ Auto-generated by: https://github.com/pmndrs/gltfjsx
 import * as THREE from 'three'
 import { useGLTF } from '@react-three/drei'
 import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader'
-import { Model } from "./model"
+import { ModelProps } from "./model"
 
 type GLTFResult = GLTF & {
   nodes: {
@@ -186,7 +186,7 @@ type GLTFResult = GLTF & {
   }
 }
 
-export default function Car(props: Model) {
+export default function Car(props: ModelProps) {
   const { nodes, materials } = useGLTF('/scene.gltf') as GLTFResult
 
   return (

diff --git a/prototype/src/components/Models/Lamborghini.tsx b/prototype/src/components/Models/Lamborghini.tsx
@@ -4,7 +4,7 @@ Auto-generated by: https://github.com/pmndrs/gltfjsx
 import * as THREE from 'three'
 import { useGLTF } from '@react-three/drei'
 import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader'
-import { Model } from './model'
+import { ModelProps } from './model'
 
 type GLTFResult = GLTF & {
   nodes: {
@@ -72,7 +72,7 @@ type GLTFResult = GLTF & {
   materials: object
 }
 
-export default function Lamborghini(props: Model) {
+export default function Lamborghini(props: ModelProps) {
   const { nodes } = useGLTF('/lamborghini.glb') as GLTFResult;
 
   return (

diff --git a/prototype/src/components/Models/Maserati_mc20.tsx b/prototype/src/components/Models/Maserati_mc20.tsx
@@ -9,7 +9,7 @@ Title: Maserati MC20
 import * as THREE from 'three'
 import { useGLTF } from '@react-three/drei'
 import { GLTF } from 'three-stdlib'
-import { Model } from './model'
+import { ModelProps } from './model'
 
 type GLTFResult = GLTF & {
   nodes: {
@@ -561,7 +561,7 @@ type GLTFResult = GLTF & {
   }
 }
 
-export default function Car(props: Model) {
+export default function Car(props: ModelProps) {
   const { nodes, materials } = useGLTF('/maserati_mc20.glb') as GLTFResult
   return (
     <group {...props} dispose={null} position={[-2.2, -1, 4]} scale={[2, 2, 2]}>

diff --git a/prototype/src/components/Models/model.ts b/prototype/src/components/Models/model.ts
@@ -1,4 +1,4 @@
-export interface Model {
+export interface ModelProps {
     /**
      * Set color of the model
      */
@@ -11,4 +11,8 @@ export interface Model {
      * To show or hide model
      */
     readonly visible: boolean
-}
+}
+
+
+export const models = ["Lamborghini Aventador J", "Maserati MC20", "Autobianchi Stellina"] as const;
+export type Model = typeof models[number];