fix(frontend): use proper routing

teknologi-umum · May 26, 2024 · 08189b0 · 08189b0
1 parent 0e68e03
commit 08189b0
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 48 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -15,6 +15,7 @@
  "license": "GPL-3.0",
  "devDependencies": {
  "@teknologi-umum/eslint-config-base": "^0.0.11",
+ "@types/node": "^20.12.12",
  "@typescript-eslint/eslint-plugin": "^5.62.0",
  "@typescript-eslint/parser": "^5.62.0",
  "eslint": "^8.57.0",
@@ -27,8 +28,8 @@
  "dependencies": {
  "@fontsource/ibm-plex-sans": "^5.0.20",
  "@fontsource/libre-franklin": "^5.0.18",
+ "@solidjs/router": "^0.13.3",
  "rxjs": "^7.8.1",
- "solid-app-router": "^0.4.2",
  "solid-js": "^1.8.17"
  }
 }
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
diff --git a/frontend/src/components/EndpointStatusCard/index.tsx b/frontend/src/components/EndpointStatusCard/index.tsx
@@ -1,9 +1,9 @@
 import { map, Observable, take } from "rxjs";
-import { Link } from "solid-app-router";
 import { createSignal, onMount } from "solid-js";
 import Status from "@/components/Status";
 import type { Response } from "@/types";
 import styles from "./styles.module.css";
+import {A} from "@solidjs/router";
 
 interface EndpointStatusCardProps {
  name: string;
@@ -33,12 +33,12 @@ export default function EndpointStatusCard(props: EndpointStatusCardProps) {
  return (
  <div class={styles["endpoint-card"]}>
  <div class={styles["endpoint-card__header"]}>
- <Link
+ <A
  class={styles["endpoint-card__title"]}
  href={"/by?name=" + encodeURIComponent(props.name)}
  >
  {props.name}
- </Link>
+ </A>
  <a class={styles["endpoint-card__url"]} href={props.url}>
  {props.url}
  </a>

diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
@@ -1,16 +1,18 @@
 import { render } from "solid-js/web";
-import { Router } from "solid-app-router";
-import App from "@/App";
 import "@/index.css";
 
 import "@fontsource/ibm-plex-sans/500.css";
 import "@fontsource/ibm-plex-sans/700.css";
 import "@fontsource/libre-franklin/400.css";
+import OverviewPage from "@/pages/Overview";
+import DetailPage from "@/pages/Detail";
+import {Route, Router} from "@solidjs/router";
 
 render(
  () => (
  <Router>
- <App />
+ <Route path="/" component={OverviewPage} />
+ <Route path="/by" component={DetailPage} />
  </Router>
  ),
  document.getElementById("root") as HTMLElement

diff --git a/frontend/src/pages/Detail/index.tsx b/frontend/src/pages/Detail/index.tsx
@@ -1,5 +1,5 @@
 import { fromEvent, map } from "rxjs";
-import { Link, Navigate, useSearchParams } from "solid-app-router";
+import { A, Navigate, useSearchParams } from "@solidjs/router";
 import { createResource, Match, onMount, Switch } from "solid-js";
 import DarkModeToggle from "@/components/DarkModeToggle";
 import EndpointOverviewCard from "@/components/EndpointOverviewCard";
@@ -44,9 +44,9 @@ export default function DetailPage() {
  <div class={styles.detail__header}>
  <div class={styles["detail__header-left"]}>
  <h1 class={styles.detail__title}>Status for {searchParams.name}</h1>
- <Link href="/" class={styles.detail__back}>
+ <A href="/" class={styles.detail__back}>
  <LeftArrowIcon /> Back to Home
- </Link>
+ </A>
  </div>
  <DarkModeToggle />
  </div>

diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
@@ -1,21 +1,17 @@
 import { defineConfig, loadEnv } from "vite";
 import solidPlugin from "vite-plugin-solid";
-import { resolve } from "path";
+import { resolve } from "node:path";
 
 export default ({ mode }: { mode: string }) => {
  const env = loadEnv(mode, import.meta.url, "");
 
  return defineConfig({
  plugins: [solidPlugin()],
- build: {
- target: "esnext",
- polyfillDynamicImport: false
- },
  resolve: {
  alias: {
  "@": resolve("src"),
  "@config": env.VITE_CONFIG_PATH || resolve("..", "config.json")
  }
  }
  });
-};
+};