fix: plugin API viewport.query destroys published pages (#385)

reearth · Dec 21, 2022 · de8c012 · de8c012
1 parent b050aa3
commit de8c012
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 16 deletions.
diff --git a/src/components/.eslintrc.yml b/src/components/.eslintrc.yml
@@ -50,3 +50,10 @@ overrides:
         - error
         - paths:
             - '@reearth/theme'
+  - files: molecules/Visualizer/**/*
+    rules:
+      'no-restricted-imports':
+        - error
+        - paths:
+            - name: react-router-dom
+              message: Cannot use react-router-dom in published pages. Don't use it.
diff --git a/src/components/molecules/Visualizer/useViewport.ts b/src/components/molecules/Visualizer/useViewport.ts
@@ -1,5 +1,4 @@
-import { useState, useEffect, RefObject } from "react";
-import { useSearchParams } from "react-router-dom";
+import { useState, useEffect, RefObject, useMemo } from "react";
 
 const viewportMobileMaxWidth = 768;
 
@@ -15,11 +14,12 @@ type Props = {
 };
 
 export default ({ wrapperRef }: Props) => {
+  const query = useMemo(() => paramsToObject(new URLSearchParams(window.location.search)), []);
   const [viewport, setViewport] = useState<Viewport>({
     width: undefined,
     height: undefined,
     isMobile: undefined,
-    query: {},
+    query,
   });
 
   useEffect(() => {
@@ -62,22 +62,10 @@ export default ({ wrapperRef }: Props) => {
     };
   }, [wrapperRef]);
 
-  const [searchParams] = useSearchParams();
-
-  useEffect(() => {
-    setViewport(viewport => {
-      const query = paramsToObject(searchParams.entries());
-      return {
-        ...viewport,
-        query,
-      };
-    });
-  }, [searchParams]);
-
   return viewport;
 };
 
-function paramsToObject(entries: IterableIterator<[string, string]>) {
+function paramsToObject(entries: URLSearchParams) {
   const result: Record<string, string> = {};
   for (const [key, value] of entries) {
     result[key] = value;