diff --git a/pkgs/ui/src/app/join/page.tsx b/pkgs/ui/src/app/join/page.tsx new file mode 100644 index 000000000..a693cb70a --- /dev/null +++ b/pkgs/ui/src/app/join/page.tsx @@ -0,0 +1,5 @@ +import JoinPrequel from "@/views/joinPrequel"; + +export default function Page() { + return ; +} diff --git a/pkgs/ui/src/app/layout.tsx b/pkgs/ui/src/app/layout.tsx index 53dde9326..9681f368e 100644 --- a/pkgs/ui/src/app/layout.tsx +++ b/pkgs/ui/src/app/layout.tsx @@ -11,7 +11,7 @@ import { useMediaQuery, useTheme, } from "@mui/material"; -import { ChangeEvent, useState } from "react"; +import { useState } from "react"; import { Toaster } from "react-hot-toast"; import { StyledEngineProvider } from "@mui/material/styles"; @@ -25,10 +25,10 @@ import axios from "axios"; import { AppContext, WithAppState, - useAppState, + // useAppState, } from "@/components/hooks/useAppContext"; import Background from "@/components/background"; -import { usePathname, redirect } from "next/navigation"; +// import { usePathname, redirect } from "next/navigation"; const roboto = localFont({ src: [ @@ -45,16 +45,16 @@ 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 <>; -}; +// 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, @@ -84,9 +84,9 @@ export default function RootLayout({ } }, [userPrefersDarkmode, useDarkTheme, setUseDarkTheme]); - const changeThemeHandler = (target: ChangeEvent, currentValue: boolean) => { - setUseDarkTheme(currentValue); - }; + // const changeThemeHandler = (target: ChangeEvent, currentValue: boolean) => { + // setUseDarkTheme(currentValue); + // }; return ( @@ -105,9 +105,7 @@ export default function RootLayout({ {(appState) => { const showSidebarDerived = Boolean( - showSidebar && - !appState.isLoading && - appState.data.isJoined, + showSidebar && !appState.isLoading && appState.data.isJoined ); return ( <> @@ -149,7 +147,7 @@ export default function RootLayout({
- + {/* */} - err.msg.split("\n")) - ?.flat() - .filter(Boolean) || [] - } - /> - - )} */}
)} diff --git a/pkgs/ui/src/components/join/loadingOverlay.tsx b/pkgs/ui/src/components/join/loadingOverlay.tsx index 63c5381eb..8ae22e3ac 100644 --- a/pkgs/ui/src/components/join/loadingOverlay.tsx +++ b/pkgs/ui/src/components/join/loadingOverlay.tsx @@ -1,18 +1,27 @@ "use client"; -import { LinearProgress, Typography } from "@mui/material"; +import { CircularProgress, LinearProgress, Typography } from "@mui/material"; interface LoadingOverlayProps { title: React.ReactNode; subtitle: React.ReactNode; + variant?: "linear" | "circle"; } export const LoadingOverlay = (props: LoadingOverlayProps) => { - const { title, subtitle } = props; + const { title, subtitle, variant = "linear" } = props; return (
- {title} - -
{subtitle}
- +
+ {title} +
+
+ {subtitle} +
+ {variant === "linear" && } + {variant === "circle" && ( +
+ +
+ )}
); }; diff --git a/pkgs/ui/src/components/join/vmBuildLogs.tsx b/pkgs/ui/src/components/join/vmBuildLogs.tsx index 72440bfd4..bad19ccc2 100644 --- a/pkgs/ui/src/components/join/vmBuildLogs.tsx +++ b/pkgs/ui/src/components/join/vmBuildLogs.tsx @@ -9,11 +9,7 @@ interface VmBuildLogsProps { export const VmBuildLogs = (props: VmBuildLogsProps) => { const { vmUuid } = props; - const { - data: logs, - isLoading, - error, - } = useGetVmLogs(vmUuid as string, { + const { data: logs, isLoading } = useGetVmLogs(vmUuid as string, { swr: { enabled: vmUuid !== null, }, diff --git a/pkgs/ui/src/components/sidebar/index.tsx b/pkgs/ui/src/components/sidebar/index.tsx index a89f59b65..59eac48da 100644 --- a/pkgs/ui/src/components/sidebar/index.tsx +++ b/pkgs/ui/src/components/sidebar/index.tsx @@ -1,17 +1,14 @@ import { - Alert, Divider, - Icon, IconButton, List, ListItem, ListItemButton, ListItemIcon, ListItemText, - Snackbar, } from "@mui/material"; import Image from "next/image"; -import { ReactNode, useState } from "react"; +import { ReactNode } from "react"; import DashboardIcon from "@mui/icons-material/Dashboard"; import DevicesIcon from "@mui/icons-material/Devices"; @@ -29,7 +26,7 @@ type MenuEntry = { icon: ReactNode; label: string; to: string; - missing: boolean; + disabled: boolean; } & { subMenuEntries?: MenuEntry[]; }; @@ -39,37 +36,37 @@ const menuEntries: MenuEntry[] = [ icon: , label: "Dashoard", to: "/", - missing: false, + disabled: false, }, { icon: , label: "Machines", to: "/machines", - missing: false, + disabled: false, }, { icon: , label: "Applications", to: "/applications", - missing: true, + disabled: true, }, { icon: , label: "Network", to: "/network", - missing: true, + disabled: true, }, { icon: , label: "Templates", to: "/templates", - missing: false, + disabled: false, }, { icon: , label: "Backups", to: "/backups", - missing: true, + disabled: true, }, ]; @@ -83,22 +80,6 @@ interface SidebarProps { export function Sidebar(props: SidebarProps) { const { show, onClose } = props; - const [open, setOpen] = React.useState(false); - const handleClick = () => { - setOpen(true); - }; - - const handleClose = ( - event?: React.SyntheticEvent | Event, - reason?: string, - ) => { - if (reason === "clickaway") { - return; - } - - setOpen(false); - }; - return (