Merge pull request 'removed unused part' (#534) from hsjobeki-main into main
All checks were successful
checks / test (push) Successful in 48s
assets1 / test (push) Successful in 49s
checks-impure / test (push) Successful in 1m32s

Reviewed-on: #534
This commit is contained in:
DavHau 2023-11-18 10:17:42 +00:00
commit 46188f70de
4 changed files with 63 additions and 134 deletions

View File

@ -17,8 +17,7 @@ import { Toaster } from "react-hot-toast";
import "./globals.css";
import { darkTheme, lightTheme } from "./theme/themes";
import Background from "@/components/background";
import { AppContext, WithAppState } from "@/components/hooks/useAppContext";
import { WithAppState } from "@/components/hooks/useAppContext";
const roboto = localFont({
src: [
@ -58,63 +57,47 @@ export default function RootLayout({
<CssBaseline />
<Toaster />
<WithAppState>
<AppContext.Consumer>
{(appState) => {
const showSidebarDerived = Boolean(
showSidebar &&
!appState.isLoading &&
appState.data.isJoined,
);
return (
<>
<Background />
<div className="flex h-screen overflow-hidden bg-neutral-95">
<ThemeProvider theme={darkTheme}>
<Sidebar
show={showSidebarDerived}
onClose={() => setShowSidebar(false)}
/>
</ThemeProvider>
<div
className={tw`${
!showSidebarDerived && translate
} flex h-full w-full flex-col overflow-y-scroll transition-[margin] duration-150 ease-in-out`}
<div className="flex h-screen overflow-hidden bg-neutral-95">
<ThemeProvider theme={darkTheme}>
<Sidebar
show={showSidebar}
onClose={() => setShowSidebar(false)}
/>
</ThemeProvider>
<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={showSidebar}
onClick={() => setShowSidebar((c) => !c)}
>
<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 dark:invert lg:hidden">
<Image
src="/favicon.png"
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>
{!showSidebar && <MenuIcon />}
</IconButton>
</div>
</>
);
}}
</AppContext.Consumer>
<div className="col-span-1 block w-full bg-fixed text-center font-semibold dark:invert lg:hidden">
<Image
src="/favicon.png"
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>
</WithAppState>
</body>
</ThemeProvider>

View File

@ -1,75 +1,27 @@
"use client";
import { NetworkOverview } from "@/components/dashboard/NetworkOverview";
import { RecentActivity } from "@/components/dashboard/activity";
import { AppOverview } from "@/components/dashboard/appOverview";
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 { LoadingOverlay } from "@/components/join/loadingOverlay";
import JoinPrequel from "@/views/joinPrequel";
// 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} 2xl:col-span-1 ${sx}`}>
// <div className={tw`row-span-2`}>
// {children}
// </div>
// );
// };
// interface DashboardPanelProps {
// children?: React.ReactNode;
// }
// const DashboardPanel = (props: DashboardPanelProps) => {
// const { children } = props;
// return (
// <div className="col-span-full row-span-1 2xl:col-span-2">{children}</div>
// );
// };
export default function Dashboard() {
const { data, isLoading } = useAppState();
if (isLoading) {
return (
<div className="grid h-full place-items-center">
<div className="mt-8 w-full max-w-xl">
<LoadingOverlay
title="Clan Experience"
subtitle="Loading"
variant="circle"
/>
return (
<div className="flex w-full">
<div className="grid w-full grid-flow-row grid-cols-3 gap-4">
<div className="row-span-2">
<NetworkOverview />
</div>
</div>
);
}
if (!data.isJoined) {
return <JoinPrequel />;
}
if (data.isJoined) {
return (
<div className="flex w-full">
<div className="grid w-full grid-flow-row grid-cols-3 gap-4">
<div className="row-span-2">
<NetworkOverview />
</div>
<div className="col-span-2">
<AppOverview />
</div>
<div className="row-span-2">
<RecentActivity />
</div>
<QuickActions />
<Notifications />
<TaskQueue />
<div className="col-span-2">
<AppOverview />
</div>
<div className="row-span-2">
<RecentActivity />
</div>
<QuickActions />
<Notifications />
<TaskQueue />
</div>
);
}
</div>
);
}

View File

@ -3,18 +3,15 @@ import {
default as clanDark,
default as clanLight,
} from "../../public/clan-dark.png";
import { useAppState } from "./hooks/useAppContext";
export default function Background() {
const { data, isLoading } = useAppState();
return (
<div
className={
"fixed -z-10 h-[100vh] w-[100vw] overflow-hidden opacity-10 blur-md dark:opacity-40"
"fixed top-0 h-[100vh] w-[100vw] overflow-hidden opacity-10 blur-md dark:opacity-40"
}
>
{(isLoading || !data.isJoined) && (
{
<>
<Image
className="dark:hidden"
@ -41,7 +38,7 @@ export default function Background() {
}}
/>
</>
)}
}
</div>
);
}

View File

@ -11,18 +11,18 @@ import Image from "next/image";
import { ReactNode } from "react";
import { tw } from "@/utils/tailwind";
import AppsIcon from "@mui/icons-material/Apps";
import BackupIcon from "@mui/icons-material/Backup";
import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
import DashboardIcon from "@mui/icons-material/Dashboard";
import DevicesIcon from "@mui/icons-material/Devices";
import WorkspacesIcon from "@mui/icons-material/Workspaces";
import Link from "next/link";
type MenuEntry = {
icon: ReactNode;
label: string;
to: string;
disabled: boolean;
disabled?: boolean;
} & {
subMenuEntries?: MenuEntry[];
};
@ -32,19 +32,16 @@ const menuEntries: MenuEntry[] = [
icon: <DashboardIcon />,
label: "Dashoard",
to: "/",
disabled: false,
},
{
icon: <DevicesIcon />,
label: "Machines",
to: "/machines",
disabled: false,
},
{
icon: <AppsIcon />,
label: "Applications",
to: "/applications",
disabled: true,
icon: <WorkspacesIcon />,
label: "Manage",
to: "/join",
},
{
icon: <BackupIcon />,