AppState context add

2023-10-01 22:47:09 +02:00
parent 82db33d047
commit f9c35ceaa4
14 changed files with 406 additions and 220 deletions
--- a/pkgs/ui/src/app/dashboard/page.tsx
+++ b/pkgs/ui/src/app/dashboard/page.tsx
@@ -1,61 +0,0 @@
-"use client";
-import { RecentActivity } from "@/components/dashboard/activity";
-import { AppOverview } from "@/components/dashboard/appOverview";
-import { NetworkOverview } from "@/components/dashboard/NetworkOverview";
-import { Notifications } from "@/components/dashboard/notifications";
-import { QuickActions } from "@/components/dashboard/quickActions";
-import { TaskQueue } from "@/components/dashboard/taskQueue";
-import { tw } from "@/utils/tailwind";
-
-interface DashboardCardProps {
-  children?: React.ReactNode;
-  rowSpan?: number;
-  sx?: string;
-}
-const DashboardCard = (props: DashboardCardProps) => {
-  const { children, rowSpan, sx = "" } = props;
-  return (
-    <div
-      className={tw`col-span-full row-span-${rowSpan || 1} xl:col-span-1 ${sx}`}
-    >
-      {children}
-    </div>
-  );
-};
-
-interface DashboardPanelProps {
-  children?: React.ReactNode;
-}
-const DashboardPanel = (props: DashboardPanelProps) => {
-  const { children } = props;
-  return (
-    <div className="col-span-full row-span-1 xl:col-span-2">{children}</div>
-  );
-};
-
-export default function Dashboard() {
-  return (
-    <div className="flex h-screen w-full">
-      <div className="grid w-full auto-rows-max grid-cols-1 grid-rows-none gap-4 xl:grid-cols-2 2xl:grid-cols-3 ">
-        <DashboardCard rowSpan={2}>
-          <NetworkOverview />
-        </DashboardCard>
-        <DashboardCard rowSpan={2}>
-          <RecentActivity />
-        </DashboardCard>
-        <DashboardCard>
-          <Notifications />
-        </DashboardCard>
-        <DashboardCard>
-          <QuickActions />
-        </DashboardCard>
-        <DashboardPanel>
-          <AppOverview />
-        </DashboardPanel>
-        <DashboardCard sx={tw`xl:col-span-full 2xl:col-span-1`}>
-          <TaskQueue />
-        </DashboardCard>
-      </div>
-    </div>
-  );
-}
--- a/pkgs/ui/src/app/layout.tsx
+++ b/pkgs/ui/src/app/layout.tsx
@@ -4,6 +4,7 @@ import "./globals.css";
 import localFont from "next/font/local";
 import * as React from "react";
 import {
+  Button,
  CssBaseline,
  IconButton,
  ThemeProvider,
@@ -20,7 +21,14 @@ import MenuIcon from "@mui/icons-material/Menu";
 import Image from "next/image";
 import { tw } from "@/utils/tailwind";
 import axios from "axios";
-import { MachineContextProvider } from "@/components/hooks/useMachines";
+
+import {
+  AppContext,
+  WithAppState,
+  useAppState,
+} from "@/components/hooks/useAppContext";
+import Background from "@/components/background";
+import { usePathname, redirect } from "next/navigation";

 const roboto = localFont({
  src: [
@@ -37,6 +45,17 @@ axios.defaults.baseURL = "http://localhost:2979";
 // add negative margin for smooth transition to fill the space of the sidebar
 const translate = tw`lg:-ml-64 -ml-14`;

+const AutoRedirectEffect = () => {
+  const { isLoading, data } = useAppState();
+  const pathname = usePathname();
+  React.useEffect(() => {
+    if (!isLoading && !data.isJoined && pathname !== "/") {
+      redirect("/");
+    }
+  }, [isLoading, data, pathname]);
+  return <></>;
+};
+
 export default function RootLayout({
  children,
 }: {
@@ -82,47 +101,78 @@ export default function RootLayout({
          <body id="__next" className={roboto.className}>
            <CssBaseline />
            <Toaster />
-            <MachineContextProvider>
-              <div className="flex h-screen overflow-hidden">
-                <Sidebar
-                  show={showSidebar}
-                  onClose={() => setShowSidebar(false)}
-                />
-                <div
-                  className={tw`${
-                    !showSidebar && translate
-                  } flex h-full w-full flex-col overflow-y-scroll transition-[margin] duration-150 ease-in-out`}
-                >
-                  <div className="static top-0 mb-2 py-2">
-                    <div className="grid grid-cols-3">
-                      <div className="col-span-1">
-                        <IconButton
-                          hidden={true}
-                          onClick={() => setShowSidebar((c) => !c)}
-                        >
-                          {!showSidebar && <MenuIcon />}
-                        </IconButton>
-                      </div>
-                      <div className="col-span-1 block w-full text-center font-semibold text-white lg:hidden ">
-                        <Image
-                          src="/logo.svg"
-                          alt="Clan Logo"
-                          width={58}
-                          height={58}
-                          priority
+            <WithAppState>
+              <AppContext.Consumer>
+                {(appState) => {
+                  const showSidebarDerived = Boolean(
+                    showSidebar &&
+                      !appState.isLoading &&
+                      appState.data.isJoined,
+                  );
+                  return (
+                    <>
+                      <Background />
+                      <div className="flex h-screen overflow-hidden">
+                        <Sidebar
+                          show={showSidebarDerived}
+                          onClose={() => setShowSidebar(false)}
                        />
-                      </div>
-                    </div>
-                  </div>
+                        <div
+                          className={tw`${
+                            !showSidebarDerived && translate
+                          } flex h-full w-full flex-col overflow-y-scroll transition-[margin] duration-150 ease-in-out`}
+                        >
+                          <div className="static top-0 mb-2 py-2">
+                            <div className="grid grid-cols-3">
+                              <div className="col-span-1">
+                                <IconButton
+                                  hidden={true}
+                                  onClick={() => setShowSidebar((c) => !c)}
+                                >
+                                  {!showSidebar && appState.data.isJoined && (
+                                    <MenuIcon />
+                                  )}
+                                </IconButton>
+                              </div>
+                              <div className="col-span-1 block w-full bg-fixed text-center font-semibold text-white lg:hidden">
+                                <Image
+                                  src="/logo.svg"
+                                  alt="Clan Logo"
+                                  width={58}
+                                  height={58}
+                                  priority
+                                />
+                              </div>
+                            </div>
+                          </div>

-                  <div className="px-1">
-                    <div className="relative flex h-full flex-1 flex-col">
-                      <main>{children}</main>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </MachineContextProvider>
+                          <div className="px-1">
+                            <div className="relative flex h-full flex-1 flex-col">
+                              <main>
+                                <AutoRedirectEffect />
+                                <Button
+                                  fullWidth
+                                  onClick={() => {
+                                    appState.setAppState((s) => ({
+                                      ...s,
+                                      isJoined: !s.isJoined,
+                                    }));
+                                  }}
+                                >
+                                  Toggle Joined
+                                </Button>
+
+                                {children}
+                              </main>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </>
+                  );
+                }}
+              </AppContext.Consumer>
+            </WithAppState>
          </body>
        </ThemeProvider>
      </StyledEngineProvider>
--- a/pkgs/ui/src/app/page.tsx
+++ b/pkgs/ui/src/app/page.tsx
@@ -1,79 +1,72 @@
 "use client";
-import React, { useEffect, useState } from "react";
-import {
-  Button,
-  IconButton,
-  Input,
-  InputAdornment,
-  Paper,
-  TextField,
-  Typography,
-} from "@mui/material";
-import { useSearchParams } from "next/navigation";
-import { useInspectFlake } from "@/api/default/default";
-import { ConfirmVM } from "@/components/join/confirmVM";
-import { LoadingOverlay } from "@/components/join/loadingOverlay";
-import { FlakeBadge } from "@/components/flakeBadge/flakeBadge";
-import { Log } from "@/components/join/log";
+import { RecentActivity } from "@/components/dashboard/activity";
+import { AppOverview } from "@/components/dashboard/appOverview";
+import { NetworkOverview } from "@/components/dashboard/NetworkOverview";
+import { Notifications } from "@/components/dashboard/notifications";
+import { QuickActions } from "@/components/dashboard/quickActions";
+import { TaskQueue } from "@/components/dashboard/taskQueue";
+import { useAppState } from "@/components/hooks/useAppContext";
+import { MachineContextProvider } from "@/components/hooks/useMachines";
+import { tw } from "@/utils/tailwind";
+import JoinPrequel from "@/views/joinPrequel";

-import { useForm, SubmitHandler, Controller } from "react-hook-form";
-import { Confirm } from "@/components/join/confirm";
-import { Layout } from "@/components/join/layout";
-import { ChevronRight } from "@mui/icons-material";
-
-type FormValues = {
-  flakeUrl: string;
-  flakeAttribute: string;
+interface DashboardCardProps {
+  children?: React.ReactNode;
+  rowSpan?: number;
+  sx?: string;
+}
+const DashboardCard = (props: DashboardCardProps) => {
+  const { children, rowSpan, sx = "" } = props;
+  return (
+    <div
+      className={tw`col-span-full row-span-${rowSpan || 1} xl:col-span-1 ${sx}`}
+    >
+      {children}
+    </div>
+  );
 };

-export default function Page() {
-  const queryParams = useSearchParams();
-  const flakeUrl = queryParams.get("flake") || "";
-  const flakeAttribute = queryParams.get("attr") || "default";
-  const { handleSubmit, control, formState, getValues, reset } =
-    useForm<FormValues>({ defaultValues: { flakeUrl: "" } });
-
-  const onSubmit: SubmitHandler<FormValues> = (data) => console.log(data);
-
-  return (
-    <Layout>
-      {!formState.isSubmitted && !flakeUrl && (
-        <form
-          onSubmit={handleSubmit(onSubmit)}
-          className="w-full max-w-2xl justify-self-center"
-        >
-          <Controller
-            name="flakeUrl"
-            control={control}
-            render={({ field }) => (
-              <Input
-                {...field}
-                // variant="standard"
-                // label="Clan url"
-                required
-                fullWidth
-                startAdornment={
-                  <InputAdornment position="start">Clan Url:</InputAdornment>
-                }
-                endAdornment={
-                  <InputAdornment position="end">
-                    <IconButton type="submit">
-                      <ChevronRight />
-                    </IconButton>
-                  </InputAdornment>
-                }
-                // }}
-              />
-            )}
-          />
-        </form>
-      )}
-      {(formState.isSubmitted || flakeUrl) && (
-        <Confirm
-          handleBack={() => reset()}
-          flakeUrl={formState.isSubmitted ? getValues("flakeUrl") : flakeUrl}
-        />
-      )}
-    </Layout>
-  );
+interface DashboardPanelProps {
+  children?: React.ReactNode;
+}
+const DashboardPanel = (props: DashboardPanelProps) => {
+  const { children } = props;
+  return (
+    <div className="col-span-full row-span-1 xl:col-span-2">{children}</div>
+  );
+};
+
+export default function Dashboard() {
+  const { data } = useAppState();
+  if (!data.isJoined) {
+    return <JoinPrequel />;
+  }
+  if (data.isJoined) {
+    return (
+      <MachineContextProvider>
+        <div className="flex h-screen w-full">
+          <div className="grid w-full auto-rows-max grid-cols-1 grid-rows-none gap-4 xl:grid-cols-2 2xl:grid-cols-3 ">
+            <DashboardCard rowSpan={2}>
+              <NetworkOverview />
+            </DashboardCard>
+            <DashboardCard rowSpan={2}>
+              <RecentActivity />
+            </DashboardCard>
+            <DashboardCard>
+              <Notifications />
+            </DashboardCard>
+            <DashboardCard>
+              <QuickActions />
+            </DashboardCard>
+            <DashboardPanel>
+              <AppOverview />
+            </DashboardPanel>
+            <DashboardCard sx={tw`xl:col-span-full 2xl:col-span-1`}>
+              <TaskQueue />
+            </DashboardCard>
+          </div>
+        </div>
+      </MachineContextProvider>
+    );
+  }
 }
--- a/pkgs/ui/src/app/templates/[id]/page.tsx
+++ b/pkgs/ui/src/app/templates/[id]/page.tsx
@@ -36,7 +36,6 @@ export async function generateStaticParams() {
 }

 function getTemplate(params: { id: string }) {
-  console.log({ params });
  // const res = await fetch(`https://.../posts/${params.id}`);
  return {
    short: `My Template ${params.id}`,
@@ -48,7 +47,6 @@ interface TemplateDetailProps {
 }
 export default function TemplateDetail({ params }: TemplateDetailProps) {
  const { data, isLoading } = useListMachines();
-  console.log({ data, isLoading });
  const details = getTemplate(params);

  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);