Use wouter for routing

framer · May 19, 2024 · 65c3efe · 65c3efe
1 parent a2278e2
commit 65c3efe
Show file tree

Hide file tree

Showing 12 changed files with 208 additions and 188 deletions.
diff --git a/plugins/semrush/package.json b/plugins/semrush/package.json
@@ -22,6 +22,7 @@
     "usehooks-ts": "^3.1.0",
     "valibot": "^0.30.0",
     "vite-plugin-mkcert": "^1",
+    "wouter": "^3.1.3",
     "zustand": "^4.5.2"
   },
   "devDependencies": {

diff --git a/plugins/semrush/src/App.tsx b/plugins/semrush/src/App.tsx
@@ -1,62 +1,28 @@
 import { QueryErrorResetBoundary } from "@tanstack/react-query";
-import { useEffect, useRef } from "react";
 import { ErrorBoundary } from "react-error-boundary";
-import { useResizeObserver } from "usehooks-ts";
-import { routes } from "./routes";
-import { useNavigationStore } from "./stores/navigationStore";
-import { PluginContainer } from "./components/PluginContainer";
-import { framer } from "framer-plugin";
-
-function usePluginResizeObserver(ref: React.RefObject<HTMLDivElement>) {
-  const { width = 260, height = 95 } = useResizeObserver({
-    ref,
-    box: "content-box",
-  });
-
-  useEffect(() => {
-    framer.showUI({
-      title: "Semrush",
-      width,
-      height,
-    });
-  }, [width, height]);
-
-  return { width, height };
-}
+import { Router } from "./pages/router";
 
 export function App() {
-  const pathname = useNavigationStore((state) => state.pathname);
-  const ref = useRef(null);
-  usePluginResizeObserver(ref);
-
-  const {
-    title,
-    element: Page,
-    displayAsSmall,
-  } = routes[pathname] || routes["/"];
-
   return (
-    <PluginContainer ref={ref} title={title} isSmall={displayAsSmall}>
-      <QueryErrorResetBoundary>
-        {({ reset }) => (
-          <ErrorBoundary
-            onReset={reset}
-            fallbackRender={({ resetErrorBoundary, error }) => (
-              <div className="col-lg justify-center items-center w-full">
-                <p className="text-framer-red">{error.message}</p>
-                <button
-                  className="bg-transparent hover:bg-transparent active:bg-transparent text-blue-600 outline-none"
-                  onClick={() => resetErrorBoundary()}
-                >
-                  Try again
-                </button>
-              </div>
-            )}
-          >
-            <Page />
-          </ErrorBoundary>
-        )}
-      </QueryErrorResetBoundary>
-    </PluginContainer>
+    <QueryErrorResetBoundary>
+      {({ reset }) => (
+        <ErrorBoundary
+          onReset={reset}
+          fallbackRender={({ resetErrorBoundary, error }) => (
+            <div className="col-lg justify-center items-center w-full">
+              <p className="text-framer-red">{error.message}</p>
+              <button
+                className="bg-transparent hover:bg-transparent active:bg-transparent text-blue-600 outline-none"
+                onClick={() => resetErrorBoundary()}
+              >
+                Try again
+              </button>
+            </div>
+          )}
+        >
+          <Router />
+        </ErrorBoundary>
+      )}
+    </QueryErrorResetBoundary>
   );
 }
diff --git a/plugins/semrush/src/api.ts b/plugins/semrush/src/api.ts
@@ -8,7 +8,7 @@ import {
 import SemrushClient, { Issue } from "./semrush";
 import { useEffect, useState } from "react";
 import { ISSUE_DESCRIPTIONS } from "./constants";
-import { useSemrushProjectStore } from "./stores/semrushProjectStore";
+import { useSemrushProjectStore } from "./stores";
 import { framer } from "framer-plugin";
 
 const semrush = new SemrushClient({

diff --git a/plugins/semrush/src/components/MenuOption.tsx b/plugins/semrush/src/components/MenuOption.tsx
@@ -1,4 +1,4 @@
-import { useNavigationStore } from "../stores/navigationStore";
+import { useLocation } from "wouter";
 
 export const MenuOption = ({
   children,
@@ -11,13 +11,13 @@ export const MenuOption = ({
   to: string;
   onClick?: () => void;
 }) => {
-  const navigate = useNavigationStore((state) => state.navigate);
+  const [, setLocation] = useLocation();
 
   return (
     <div
       className="h-[110px] w-[110px] col items-center justify-center bg-tertiary rounded-md cursor-pointer"
       onClick={() => {
-        navigate(to);
+        setLocation(to);
         onClick && onClick();
       }}
     >

diff --git a/plugins/semrush/src/components/PluginContainer.tsx b/plugins/semrush/src/components/PluginContainer.tsx
@@ -1,5 +1,4 @@
 import cx from "classnames";
-import { useNavigationStore } from "../stores/navigationStore";
 import React from "react";
 
 interface Props {
@@ -9,49 +8,47 @@ interface Props {
   isSmall?: boolean;
 }
 
-export const PluginContainer = React.forwardRef<HTMLDivElement, Props>(
-  ({ children, title, className, isSmall = false }, ref) => {
-    const goBack = useNavigationStore((state) => state.goBack);
-
-    return (
-      <div
-        ref={ref}
-        className={cx(
-          "flex flex-col h-fit min-w-[260px]",
-          {
-            "max-w-[260px]": isSmall,
-          },
-          className
-        )}
-      >
-        {title && (
-          <>
-            <div className={cx({ "px-15": isSmall })}>
-              <hr />
-            </div>
-            <div className="flex gap-[5px] items-center py-15 px-15">
-              <div onClick={() => goBack()} className="cursor-pointer">
-                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12">
-                  <path
-                    d="M 5 2 L 1.5 6 L 5 9.5"
-                    fill="transparent"
-                    strokeWidth={1.5}
-                    stroke="rgb(153,153,153)"
-                    strokeLinecap="round"
-                    strokeMiterlimit={10}
-                    strokeDasharray=""
-                  ></path>
-                </svg>
-              </div>
-              <h6>{title}</h6>
-            </div>
-          </>
-        )}
-        <div className={cx("w-full", { "px-15": isSmall })}>
+export const PluginContainer = ({
+  children,
+  title,
+  className,
+  isSmall,
+}: Props) => (
+  <div
+    className={cx(
+      "flex flex-col h-fit min-w-[260px]",
+      {
+        "max-w-[260px]": isSmall,
+      },
+      className
+    )}
+  >
+    {title && (
+      <>
+        <div className={cx({ "px-15": isSmall })}>
           <hr />
         </div>
-        <div className="col-lg p-15">{children}</div>
-      </div>
-    );
-  }
+        <div className="flex gap-[5px] items-center py-15 px-15">
+          <div onClick={() => history.back()} className="cursor-pointer">
+            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12">
+              <path
+                d="M 5 2 L 1.5 6 L 5 9.5"
+                fill="transparent"
+                strokeWidth={1.5}
+                stroke="rgb(153,153,153)"
+                strokeLinecap="round"
+                strokeMiterlimit={10}
+                strokeDasharray=""
+              ></path>
+            </svg>
+          </div>
+          <h6>{title}</h6>
+        </div>
+      </>
+    )}
+    <div className={cx("w-full", { "px-15": isSmall })}>
+      <hr />
+    </div>
+    <div className="col-lg p-15">{children}</div>
+  </div>
 );
diff --git a/plugins/semrush/src/pages/Setup.tsx b/plugins/semrush/src/pages/Setup.tsx
@@ -1,12 +1,12 @@
 import { useState } from "react";
-import { useNavigationStore } from "../stores/navigationStore";
 import { useValidateApiKeyMutation } from "../api";
 import { Button } from "../components/Button";
 import SemrushIcon from "../assets/icon.svg";
+import { Link, useLocation } from "wouter";
 
 export function Setup() {
+  const [, navigate] = useLocation();
   const [apiKey, setApiKey] = useState("");
-  const navigate = useNavigationStore((state) => state.navigate);
   const authMutation = useValidateApiKeyMutation({
     onSuccess: () => {
       navigate("/menu");
@@ -20,6 +20,7 @@ export function Setup() {
 
   return (
     <div className="col-lg">
+      <Link to="/menu">ss</Link>
       <section className="col-lg items-center">
         <img src={SemrushIcon} width={30} height={30} />
         <div className="col items-center">
@@ -36,7 +37,7 @@ export function Setup() {
           </p>
         </div>
       </section>
-      <section className="col pt-15">
+      <section className="col pt-15 grow">
         <input
           type="text"
           placeholder="API Key"

diff --git a/plugins/semrush/src/pages/audit/Report.tsx → ...semrush/src/pages/audit/report/Report.tsx b/plugins/semrush/src/pages/audit/Report.tsx → ...semrush/src/pages/audit/report/Report.tsx
@@ -1,15 +1,15 @@
 import cx from "classnames";
-import { useRunAuditMutation, useAuditQuery } from "../../api";
+import { useRunAuditMutation, useAuditQuery } from "../../../api";
 import {
   TableContainer,
   TableHead,
   TableRow,
   TableBody,
   TableCell,
-} from "../../components/Table";
-import { LoadingFrame } from "../../components/LoadingFrame";
-import { Button } from "../../components/Button";
-import { useSemrushProjectStore } from "../../stores/semrushProjectStore";
+} from "../../../components/Table";
+import { LoadingFrame } from "../../../components/LoadingFrame";
+import { Button } from "../../../components/Button";
+import { useSemrushProjectStore } from "../../../stores";
 
 export function AuditReport() {
   const { data: audit, isLoading: isLoadingAudit } = useAuditQuery();

diff --git a/plugins/semrush/src/pages/audit/report/issues/Issues.tsx b/plugins/semrush/src/pages/audit/report/issues/Issues.tsx
@@ -0,0 +1,3 @@
+export function AuditReportIssues() {
+  return <div>Audit report issues</div>;
+}