Merge pull request #67 from yushiang-demo/fix-remove-uuid-from-compon…

…ent-key Fix: remove uuid from key
yushiang-demo · Nov 14, 2023 · cfdc830 · cfdc830
2 parents 1204daa + aa6f829
commit cfdc830
Show file tree

Hide file tree

Showing 7 changed files with 8 additions and 11 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -23,7 +23,7 @@ The format is based on [Keep a Changelog](https://github.com/olivierlacan/keep-a
 
 ### Fixed
 
-- Fix sonarqube bug and code smells. (https://github.com/yushiang-demo/pano-to-mesh/pull/65)
+- Fix sonarqube bug and code smells. (https://github.com/yushiang-demo/pano-to-mesh/pull/65) (https://github.com/yushiang-demo/pano-to-mesh/pull/67)
 - Fix model normalization and upgrade to `three^0.158`. (https://github.com/yushiang-demo/pano-to-mesh/pull/64)
 - Fix size error and animation not found issue when changing mesh. (https://github.com/yushiang-demo/pano-to-mesh/pull/63)
 

diff --git a/apps/editors/decoration/ModeSwitch/index.js b/apps/editors/decoration/ModeSwitch/index.js
@@ -1,4 +1,3 @@
-import { v4 as uuid } from "uuid";
 import { useEffect } from "react";
 import Toolbar from "../../../../components/Toolbar";
 import Icons from "../../../../components/Icon";
@@ -16,7 +15,7 @@ const ModeSwitch = ({ mode, setMode, data }) => {
     <Toolbar>
       {data.map(({ Component, targetMode }) => (
         <Component
-          key={uuid()}
+          key={targetMode}
           $highlight={mode === targetMode}
           onClick={changeMode(targetMode)}
         />

diff --git a/apps/editors/decoration/media.js b/apps/editors/decoration/media.js
@@ -1,9 +1,11 @@
+import { v4 as uuid } from "uuid";
 import { DEFAULT_PROPS } from "../../../components/MediaManager/types";
 
 export const getNewMedia = (type, transformation) => {
   if (!transformation) return null;
 
   const baseProps = {
+    id: uuid(),
     transformation,
     type,
     readonly: false,

diff --git a/components/MediaManager/index.js b/components/MediaManager/index.js
@@ -1,4 +1,3 @@
-import { v4 as uuid } from "uuid";
 import React from "react";
 import {
   Css3DObject,
@@ -70,7 +69,7 @@ const MediaManager = ({ three, data, readonly: globalReadonly }) => {
   };
 
   return data.map((prop) => (
-    <React.Fragment key={uuid()}>{getMediaByType(prop)}</React.Fragment>
+    <React.Fragment key={prop.id}>{getMediaByType(prop)}</React.Fragment>
   ));
 };
 

diff --git a/components/ObjectSelector/index.js b/components/ObjectSelector/index.js
@@ -1,4 +1,3 @@
-import { v4 as uuid } from "uuid";
 import { useState, forwardRef, useMemo } from "react";
 
 import { MeshIndexMap } from "@pano-to-mesh/three";
@@ -40,7 +39,7 @@ const ObjectSelector = ({ media, mouse, ...props }, ref) => {
         const Component = data.type === MEDIA_3D.MODEL ? Model : Basic;
         return (
           <Component
-            key={uuid()}
+            key={data.id}
             type={data.type}
             data={data.data}
             transformation={data.transformation}

diff --git a/components/RouteSwitch/index.js b/components/RouteSwitch/index.js
@@ -1,4 +1,3 @@
-import { v4 as uuid } from "uuid";
 import { useRouter } from "next/router";
 import Icons from "../Icon";
 import { FloatDiv, Item } from "./styled";
@@ -26,7 +25,7 @@ const RouterSwitch = ({ data }) => {
   return (
     <FloatDiv>
       {data.map(({ link, Icon }) => (
-        <Item key={uuid()} onClick={redirectTo(link)}>
+        <Item key={link} onClick={redirectTo(link)}>
           <Icon $highlight={needsHighlight(link)} />
         </Item>
       ))}

diff --git a/components/Select/index.js b/components/Select/index.js
@@ -1,4 +1,3 @@
-import { v4 as uuid } from "uuid";
 import { Wrapper, Current, Menu, MenuItem, HighlightMenuItem } from "./styled";
 
 const Select = ({ candidates, current, onChange }) => {
@@ -11,7 +10,7 @@ const Select = ({ candidates, current, onChange }) => {
             candidate === current ? HighlightMenuItem : MenuItem;
           return (
             <Component
-              key={uuid()}
+              key={candidate}
               onClick={() => {
                 onChange(candidate);
               }}