chore(web): fix classic notification bar (#804)

reearth · Nov 9, 2023 · 1ca1531 · 1ca1531
1 parent 0b02908
commit 1ca1531
Show file tree

Hide file tree

Showing 39 changed files with 136 additions and 512 deletions.
diff --git a/web/package.json b/web/package.json
@@ -188,4 +188,4 @@
         "use-file-input": "1.0.0",
         "uuid": "9.0.1"
     }
-}
+}
diff --git a/web/src/beta/features/Editor/tabs/map/BottomPanel/LayerStyleCard.tsx b/web/src/beta/features/Editor/tabs/map/BottomPanel/LayerStyleCard.tsx
@@ -1,4 +1,4 @@
-import { ReactNode, useCallback, useState } from "react";
+import { ReactNode, useCallback, useRef, useState } from "react";
 
 import TextInput from "@reearth/beta/components/fields/common/TextInput";
 import Icon from "@reearth/beta/components/Icon";
@@ -32,26 +32,31 @@ const LayerStyleCard: React.FC<Props> = ({
   const [isHovered, setIsHovered] = useState(false);
   const [isEditing, setIsEditing] = useState(false);
   const [newName, setNewName] = useState(name);
-  const [clickTimeoutId, setClickTimeoutId] = useState<any>(null);
+  const clickTimeoutRef = useRef<NodeJS.Timeout>();
+  const clickedNameCount = useRef(0);
 
   const handleClick = useCallback(() => {
-    if (clickTimeoutId !== null) {
-      clearTimeout(clickTimeoutId);
-      setClickTimeoutId(null);
+    console.log(clickedNameCount.current);
+    if (clickTimeoutRef.current) {
+      clearTimeout(clickTimeoutRef.current);
     }
-    const timeoutId = window.setTimeout(() => {
+    clickTimeoutRef.current = setTimeout(() => {
+      clickedNameCount.current = 0;
       onSelect?.(!selected);
-    }, 200);
-    setClickTimeoutId(timeoutId);
-  }, [clickTimeoutId, onSelect, selected]);
+    }, 100);
+  }, [onSelect, selected]);
 
   const handleNameClick = useCallback(() => {
-    if (clickTimeoutId !== null) {
-      clearTimeout(clickTimeoutId);
-      setClickTimeoutId(null);
+    const newClickCount = clickedNameCount.current + 1;
+    console.log(newClickCount);
+    clickedNameCount.current = newClickCount;
+    // if (clickTimeoutRef.current) {
+    //   clearTimeout(clickTimeoutRef.current);
+    // }
+    if (clickedNameCount.current === 2) {
+      setIsEditing(true);
     }
-    setIsEditing(true);
-  }, [clickTimeoutId]);
+  }, []);
 
   const handleMouseEnter = useCallback(() => {
     setIsHovered(true);

diff --git a/web/src/classic/components/atoms/Notification/index.stories.tsx b/web/src/classic/components/atoms/Notification/index.stories.tsx
diff --git a/web/src/classic/components/atoms/Notification/index.test.tsx b/web/src/classic/components/atoms/Notification/index.test.tsx
diff --git a/web/src/classic/components/atoms/Notification/index.tsx b/web/src/classic/components/atoms/Notification/index.tsx
diff --git a/web/src/classic/components/organisms/Authentication/RootPage/hooks.ts b/web/src/classic/components/organisms/Authentication/RootPage/hooks.ts
@@ -3,9 +3,9 @@ import { useCallback, useEffect, useMemo } from "react";
 import { useNavigate } from "react-router-dom";
 
 import { useGetTeamsQuery } from "@reearth/classic/gql";
-import { useWorkspace, useNotification, useUserId } from "@reearth/classic/state";
 import { useAuth, useCleanUrl } from "@reearth/services/auth";
 import { useT } from "@reearth/services/i18n";
+import { useWorkspace, useNotification, useUserId } from "@reearth/services/state";
 
 export type Mode = "layer" | "widget";
 

diff --git a/web/src/classic/components/organisms/Common/AssetContainer/hooks.ts b/web/src/classic/components/organisms/Common/AssetContainer/hooks.ts
@@ -9,8 +9,8 @@ import {
   Maybe,
   AssetSortType as GQLSortType,
 } from "@reearth/classic/gql";
-import { useNotification } from "@reearth/classic/state";
 import { useT } from "@reearth/services/i18n";
+import { useNotification } from "@reearth/services/state";
 
 export type AssetNodes = NonNullable<GetAssetsQuery["assets"]["nodes"][number]>[];
 

diff --git a/web/src/classic/components/organisms/Dashboard/hooks.ts b/web/src/classic/components/organisms/Dashboard/hooks.ts
@@ -14,14 +14,14 @@ import {
   Visualizer,
   GetProjectsQuery,
 } from "@reearth/classic/gql";
+import { useStorytellingFetcher } from "@reearth/services/api";
+import { useT } from "@reearth/services/i18n";
 import {
   useWorkspace,
   useProject,
   useUnselectProject,
   useNotification,
-} from "@reearth/classic/state";
-import { useStorytellingFetcher } from "@reearth/services/api";
-import { useT } from "@reearth/services/i18n";
+} from "@reearth/services/state";
 import { ProjectType } from "@reearth/types";
 
 export type ProjectNodes = NonNullable<GetProjectsQuery["projects"]["nodes"][number]>[];

diff --git a/web/src/classic/components/organisms/EarthEditor/CanvasArea/hooks.ts b/web/src/classic/components/organisms/EarthEditor/CanvasArea/hooks.ts
@@ -21,6 +21,9 @@ import {
   WidgetAreaAlign,
   ValueType,
 } from "@reearth/classic/gql";
+import { valueTypeToGQL, ValueTypes, valueToGQL, LatLng } from "@reearth/classic/util/value";
+import { config } from "@reearth/services/config";
+import { useLang } from "@reearth/services/i18n";
 import {
   useSceneId,
   useSceneMode,
@@ -32,10 +35,7 @@ import {
   useZoomedLayerId,
   useClock,
   useSelectedWidgetArea,
-} from "@reearth/classic/state";
-import { valueTypeToGQL, ValueTypes, valueToGQL, LatLng } from "@reearth/classic/util/value";
-import { config } from "@reearth/services/config";
-import { useLang } from "@reearth/services/i18n";
+} from "@reearth/services/state";
 
 import {
   convertWidgets,

diff --git a/web/src/classic/components/organisms/EarthEditor/DataSourcePane/hooks.ts b/web/src/classic/components/organisms/EarthEditor/DataSourcePane/hooks.ts
@@ -12,15 +12,15 @@ import {
   useRemoveDatasetMutation,
   useGetDatasetSchemasWithCountQuery,
 } from "@reearth/classic/gql";
+import { useT, useLang } from "@reearth/services/i18n";
 import {
   useSceneId,
   useNotification,
   useSelected,
   useProject,
   NotificationType,
   useCurrentTheme,
-} from "@reearth/classic/state";
-import { useT, useLang } from "@reearth/services/i18n";
+} from "@reearth/services/state";
 
 export default () => {
   const t = useT();

diff --git a/web/src/classic/components/organisms/EarthEditor/DatasetInfoPane/hooks.ts b/web/src/classic/components/organisms/EarthEditor/DatasetInfoPane/hooks.ts
@@ -5,8 +5,8 @@ import {
   useGetDatasetsForDatasetInfoPaneQuery,
   useGetScenePluginsForDatasetInfoPaneQuery,
 } from "@reearth/classic/gql";
-import { useNotification, useProject, useRootLayerId, useSelected } from "@reearth/classic/state";
 import { useT } from "@reearth/services/i18n";
+import { useNotification, useProject, useRootLayerId, useSelected } from "@reearth/services/state";
 
 import { processDatasets, processDatasetHeaders, processPrimitives } from "./convert";
 

diff --git a/web/src/classic/components/organisms/EarthEditor/ExportPane/hooks.ts b/web/src/classic/components/organisms/EarthEditor/ExportPane/hooks.ts
@@ -1,8 +1,8 @@
 import { useCallback } from "react";
 
 import { Format } from "@reearth/classic/components/molecules/EarthEditor/ExportPane";
-import { useRootLayerId, useSelected } from "@reearth/classic/state";
 import { useAuth } from "@reearth/services/auth";
+import { useRootLayerId, useSelected } from "@reearth/services/state";
 
 const ext: { [key in Format]: string } = {
   kml: "kml",

diff --git a/web/src/classic/components/organisms/EarthEditor/Header/hooks.ts b/web/src/classic/components/organisms/EarthEditor/Header/hooks.ts
@@ -12,9 +12,9 @@ import {
   useCheckProjectAliasLazyQuery,
   useCreateTeamMutation,
 } from "@reearth/classic/gql";
-import { useSceneId, useWorkspace, useProject, useNotification } from "@reearth/classic/state";
 import { useAuth } from "@reearth/services/auth";
 import { useT } from "@reearth/services/i18n";
+import { useSceneId, useWorkspace, useProject, useNotification } from "@reearth/services/state";
 
 export default () => {
   const url = window.REEARTH_CONFIG?.published?.split("{}");

diff --git a/web/src/classic/components/organisms/EarthEditor/LeftMenu/hooks.ts b/web/src/classic/components/organisms/EarthEditor/LeftMenu/hooks.ts
@@ -1,4 +1,4 @@
-import { useIsCapturing } from "@reearth/classic/state";
+import { useIsCapturing } from "@reearth/services/state";
 
 export default () => {
   const [isCapturing] = useIsCapturing();

diff --git a/web/src/classic/components/organisms/EarthEditor/OutlinePane/hooks.tsx b/web/src/classic/components/organisms/EarthEditor/OutlinePane/hooks.tsx
@@ -27,6 +27,9 @@ import {
   PluginExtensionType,
   GetLayersFromLayerIdQuery,
 } from "@reearth/classic/gql";
+import deepFind from "@reearth/classic/util/deepFind";
+import deepGet from "@reearth/classic/util/deepGet";
+import { useLang, useT } from "@reearth/services/i18n";
 import {
   useSceneId,
   useSelected,
@@ -35,10 +38,7 @@ import {
   useWidgetAlignEditorActivated,
   useZoomedLayerId,
   useSelectedWidgetArea,
-} from "@reearth/classic/state";
-import deepFind from "@reearth/classic/util/deepFind";
-import deepGet from "@reearth/classic/util/deepGet";
-import { useLang, useT } from "@reearth/services/i18n";
+} from "@reearth/services/state";
 
 const convertFormat = (format: Format) => {
   if (format === "kml") return LayerEncodingFormat.Kml;

diff --git a/web/src/classic/components/organisms/EarthEditor/PrimitiveHeader/hooks.ts b/web/src/classic/components/organisms/EarthEditor/PrimitiveHeader/hooks.ts
@@ -1,8 +1,8 @@
 import { useMemo } from "react";
 
 import { useGetPrimitivesQuery, useAddLayerItemFromPrimitiveMutation } from "@reearth/classic/gql";
-import { useSceneId, useSelected } from "@reearth/classic/state";
 import { useLang } from "@reearth/services/i18n";
+import { useSceneId, useSelected } from "@reearth/services/state";
 
 // ポリゴンやポリラインは現在編集できないため、それらを新規レイヤーとして追加しても何も表示されない
 const hiddenExtensions = ["reearth/polyline", "reearth/polygon", "reearth/rect"];

diff --git a/web/src/classic/components/organisms/EarthEditor/PropertyPane/hooks-queries.ts b/web/src/classic/components/organisms/EarthEditor/PropertyPane/hooks-queries.ts
@@ -6,7 +6,7 @@ import {
   useGetLinkableDatasetsQuery,
   useGetLayersFromLayerIdQuery,
 } from "@reearth/classic/gql";
-import { Selected } from "@reearth/classic/state";
+import { Selected } from "@reearth/services/state";
 
 import { convert, Pane, convertLinkableDatasets, convertLayers } from "./convert";