Added reusable entrypoint

ui/src/pages/index.astro

@@ -1,12 +1,12 @@
 ---
 import Layout from "../layouts/Layout.astro";
-import EntryPoint from "../react/Bazooka";
+import Dashboard from "../react/Dashboard";
 import Footer from "../components/Footer.astro";
 ---
 
 <Layout title="Bazooka">
 	<main class="max-w-6xl px-4 mt-6 md:mt-14 mx-auto">
-		<EntryPoint client:load />
+		<Dashboard client:load />
 		<Footer />
 	</main>
 </Layout>

ui/src/react/Bazooka.tsx → ui/src/react/Dashboard.tsx

@@ -1,40 +1,23 @@
 import { useState } from "react";
-import { ToastContainer } from "react-toastify";
 import Display from "../components/Display";
 import SideBar from "../components/SideBar";
-import {
-  useQuery,
-  QueryClient,
-  QueryClientProvider,
-} from "@tanstack/react-query";
+import { useQuery, QueryClient } from "@tanstack/react-query";
 import "react-toastify/dist/ReactToastify.css";
 import { fetchProcesses } from "../queries/process/fetch";
 import type { Process } from "../lib/types";
 import { onError } from "../lib/error";
 import { QueryKeys } from "../queries/keys";
+import EntryPoint from "./EntryPoint";
 
-interface BazookaProps {
+interface DashboardProps {
   queryClient: QueryClient;
 }
 
-export default function EntryPoint() {
-  const queryClient = new QueryClient();
-  return (
-    <QueryClientProvider client={queryClient}>
-      <Bazooka queryClient={queryClient} />
-      <ToastContainer
-        theme="dark"
-        position="top-right"
-        autoClose={5000}
-        hideProgressBar
-        draggable
-        closeOnClick
-      />
-    </QueryClientProvider>
-  );
+export default function Dashboard() {
+  return <EntryPoint Component={DashboardComponent} />;
 }
 
-export function Bazooka({ queryClient }: BazookaProps) {
+export function DashboardComponent({ queryClient }: DashboardProps) {
   const [PIDs, setPIDs] = useState<number[]>([]);
 
   const processesQuery = useQuery({

ui/src/react/EntryPoint.tsx

@@ -0,0 +1,27 @@
+import { ToastContainer } from "react-toastify";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import type { FC } from "react";
+
+interface Props {
+  Component: FC<any>;
+}
+
+export default function EntryPoint({ Component }: Props) {
+  const queryClient = new QueryClient();
+
+  const props = { queryClient };
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Component {...props} />
+      <ToastContainer
+        theme="dark"
+        position="top-right"
+        autoClose={5000}
+        hideProgressBar
+        draggable
+        closeOnClick
+      />
+    </QueryClientProvider>
+  );
+}