fix: sonarqube scanner reported bug, code smells.

yushiang-demo · Nov 6, 2023 · 1612903 · 1612903
1 parent 3907719
commit 1612903
Show file tree

Hide file tree

Showing 9 changed files with 101 additions and 66 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -1,5 +1,7 @@
+FROM node:18-alpine AS base
+
 # Stage 1: Build the application
-FROM node:18-alpine as builder
+FROM base AS builder
 
 # Set the working directory
 WORKDIR /app
@@ -8,13 +10,13 @@ WORKDIR /app
 ENV NODE_ENV production
 
 # Copy source code
-COPY ./ ./
+COPY . .
 
 # Install and build
 RUN yarn && yarn build
 
 # Stage 2: Create the final image
-FROM node:18-alpine
+FROM base AS runner
 
 # Set the working directory
 WORKDIR /app

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

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

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

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

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

diff --git a/packages/three/components/TransformControls/index.js b/packages/three/components/TransformControls/index.js
@@ -11,6 +11,73 @@ export const TRANSFORM_CONTROLS_MODE = {
 const TransformControls = (() => {
   const object = new THREE.Mesh();
 
+  const initControls = ({ three, setTransformControls }) => {
+    const { scene, cameraControls } = three;
+
+    const control = new Controls(
+      cameraControls.getCamera(),
+      cameraControls.domElement
+    );
+    setTransformControls(control);
+    control.setSpace("local");
+    object.frustumCulled = false;
+    scene.add(object);
+
+    control.attach(object);
+    scene.add(control);
+
+    return () => {
+      scene.remove(object);
+      scene.remove(control);
+      control.dispose();
+    };
+  };
+
+  const bindChangedEvents = ({
+    three,
+    transformControls,
+    onChange,
+    onDraggingChanged,
+  }) => {
+    if (!transformControls) return;
+
+    const { cameraControls } = three;
+    const { onBeforeRender } = object;
+    const draggingChanged = (event) => {
+      const dragging = event.value;
+      onDraggingChanged(dragging);
+      cameraControls.setEnable(!dragging);
+      object.onBeforeRender = dragging
+        ? () => {
+            onChange({
+              position: object.position.toArray(),
+              scale: object.scale.toArray(),
+              quaternion: object.quaternion.toArray(),
+            });
+          }
+        : onBeforeRender;
+    };
+    transformControls.addEventListener("dragging-changed", draggingChanged);
+
+    return () => {
+      transformControls.removeEventListener(
+        "dragging-changed",
+        draggingChanged
+      );
+    };
+  };
+
+  const changeControlsMode = ({ mode, transformControls }) => {
+    if (!transformControls) return;
+    transformControls.setMode(mode);
+  };
+
+  const setControlsTransform = ({ position, scale, quaternion }) => {
+    if (position) object.position.fromArray(position);
+    if (quaternion) object.quaternion.fromArray(quaternion);
+    if (scale) object.scale.fromArray(scale);
+  };
+
   return ({
     three,
     position,
@@ -23,65 +90,24 @@ const TransformControls = (() => {
     const [transformControls, setTransformControls] = useState(null);
 
     useEffect(() => {
-      const { scene, cameraControls } = three;
-
-      const control = new Controls(
-        cameraControls.getCamera(),
-        cameraControls.domElement
-      );
-      setTransformControls(control);
-      control.setSpace("local");
-      object.frustumCulled = false;
-      scene.add(object);
-
-      control.attach(object);
-      scene.add(control);
-
-      return () => {
-        scene.remove(object);
-        scene.remove(control);
-        control.dispose();
-      };
+      return initControls({ three, setTransformControls });
     }, [three]);
 
     useEffect(() => {
-      if (!transformControls) return;
-
-      const { cameraControls } = three;
-      const { onBeforeRender } = object;
-      const draggingChanged = (event) => {
-        const dragging = event.value;
-        onDraggingChanged(dragging);
-        cameraControls.setEnable(!dragging);
-        object.onBeforeRender = dragging
-          ? () => {
-              onChange({
-                position: object.position.toArray(),
-                scale: object.scale.toArray(),
-                quaternion: object.quaternion.toArray(),
-              });
-            }
-          : onBeforeRender;
-      };
-      transformControls.addEventListener("dragging-changed", draggingChanged);
-
-      return () => {
-        transformControls.removeEventListener(
-          "dragging-changed",
-          draggingChanged
-        );
-      };
+      return bindChangedEvents({
+        three,
+        transformControls,
+        onChange,
+        onDraggingChanged,
+      });
     }, [three, transformControls, onChange, onDraggingChanged]);
 
     useEffect(() => {
-      if (!transformControls) return;
-      transformControls.setMode(mode);
-    }, [three, mode, transformControls]);
+      changeControlsMode({ mode, transformControls });
+    }, [mode, transformControls]);
 
     useEffect(() => {
-      if (position) object.position.fromArray(position);
-      if (quaternion) object.quaternion.fromArray(quaternion);
-      if (scale) object.scale.fromArray(scale);
+      setControlsTransform({ position, scale, quaternion });
     }, [position, scale, quaternion]);
 
     return null;

diff --git a/pages/_document.js b/pages/_document.js
@@ -1,5 +1,4 @@
-import Document from "next/document";
-import { Html, Head, Main, NextScript } from "next/document";
+import Document, { Html, Head, Main, NextScript } from "next/document";
 import { ServerStyleSheet } from "styled-components";
 
 export default class MyDocument extends Document {

diff --git a/public/resources/media.html b/public/resources/media.html
@@ -1,5 +1,8 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
+  <head>
+    <title>Pano-to-mesh</title>
+  </head>
   <body>
     <h1>Pano-to-mesh</h1>
   </body>