yadunut/clan-core
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

AppState context add

Browse Source
This commit is contained in:
Johannes Kirschbauer
2023-10-01 22:47:09 +02:00
parent 1c685bdf33
commit 7fdcd4db4b
14 changed files with 406 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
pkgs/ui/public/clan-dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 96 KiB

BIN
pkgs/ui/public/clan-white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 93 KiB

61
pkgs/ui/src/app/dashboard/page.tsx
View File

@@ -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>
);
}

130
pkgs/ui/src/app/layout.tsx
View File

@@ -4,6 +4,7 @@ import "./globals.css";
import localFont from "next/font/local"; import localFont from "next/font/local";
import * as React from "react"; import * as React from "react";
import { import {
Button,
CssBaseline, CssBaseline,
IconButton, IconButton,
ThemeProvider, ThemeProvider,
@@ -20,7 +21,14 @@ import MenuIcon from "@mui/icons-material/Menu";
import Image from "next/image"; import Image from "next/image";
import { tw } from "@/utils/tailwind"; import { tw } from "@/utils/tailwind";
import axios from "axios"; 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({ const roboto = localFont({
src: [ src: [
@@ -37,6 +45,17 @@ axios.defaults.baseURL = "http://localhost:2979";
// add negative margin for smooth transition to fill the space of the sidebar // add negative margin for smooth transition to fill the space of the sidebar
const translate = tw`lg:-ml-64 -ml-14`; 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({ export default function RootLayout({
children, children,
}: { }: {
@@ -82,47 +101,78 @@ export default function RootLayout({
<body id="__next" className={roboto.className}> <body id="__next" className={roboto.className}>
<CssBaseline /> <CssBaseline />
<Toaster /> <Toaster />
<MachineContextProvider> <WithAppState>
<div className="flex h-screen overflow-hidden"> <AppContext.Consumer>
<Sidebar {(appState) => {
show={showSidebar} const showSidebarDerived = Boolean(
onClose={() => setShowSidebar(false)} showSidebar &&
/> !appState.isLoading &&
<div appState.data.isJoined,
className={tw`${ );
!showSidebar && translate return (
} flex h-full w-full flex-col overflow-y-scroll transition-[margin] duration-150 ease-in-out`} <>
> <Background />
<div className="static top-0 mb-2 py-2"> <div className="flex h-screen overflow-hidden">
<div className="grid grid-cols-3"> <Sidebar
<div className="col-span-1"> show={showSidebarDerived}
<IconButton onClose={() => setShowSidebar(false)}
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
/> />
</div> <div
</div> className={tw`${
</div> !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="px-1">
<div className="relative flex h-full flex-1 flex-col"> <div className="relative flex h-full flex-1 flex-col">
<main>{children}</main> <main>
</div> <AutoRedirectEffect />
</div> <Button
</div> fullWidth
</div> onClick={() => {
</MachineContextProvider> appState.setAppState((s) => ({
...s,
isJoined: !s.isJoined,
}));
}}
>
Toggle Joined
</Button>
{children}
</main>
</div>
</div>
</div>
</div>
</>
);
}}
</AppContext.Consumer>
</WithAppState>
</body> </body>
</ThemeProvider> </ThemeProvider>
</StyledEngineProvider> </StyledEngineProvider>

141
pkgs/ui/src/app/page.tsx
View File

@@ -1,79 +1,72 @@
"use client"; "use client";
import React, { useEffect, useState } from "react"; import { RecentActivity } from "@/components/dashboard/activity";
import { import { AppOverview } from "@/components/dashboard/appOverview";
Button, import { NetworkOverview } from "@/components/dashboard/NetworkOverview";
IconButton, import { Notifications } from "@/components/dashboard/notifications";
Input, import { QuickActions } from "@/components/dashboard/quickActions";
InputAdornment, import { TaskQueue } from "@/components/dashboard/taskQueue";
Paper, import { useAppState } from "@/components/hooks/useAppContext";
TextField, import { MachineContextProvider } from "@/components/hooks/useMachines";
Typography, import { tw } from "@/utils/tailwind";
} from "@mui/material"; import JoinPrequel from "@/views/joinPrequel";
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 { useForm, SubmitHandler, Controller } from "react-hook-form"; interface DashboardCardProps {
import { Confirm } from "@/components/join/confirm"; children?: React.ReactNode;
import { Layout } from "@/components/join/layout"; rowSpan?: number;
import { ChevronRight } from "@mui/icons-material"; sx?: string;
}
type FormValues = { const DashboardCard = (props: DashboardCardProps) => {
flakeUrl: string; const { children, rowSpan, sx = "" } = props;
flakeAttribute: string; return (
<div
className={tw`col-span-full row-span-${rowSpan || 1} xl:col-span-1 ${sx}`}
>
{children}
</div>
);
}; };
export default function Page() { interface DashboardPanelProps {
const queryParams = useSearchParams(); children?: React.ReactNode;
const flakeUrl = queryParams.get("flake") || ""; }
const flakeAttribute = queryParams.get("attr") || "default"; const DashboardPanel = (props: DashboardPanelProps) => {
const { handleSubmit, control, formState, getValues, reset } = const { children } = props;
useForm<FormValues>({ defaultValues: { flakeUrl: "" } }); return (
<div className="col-span-full row-span-1 xl:col-span-2">{children}</div>
const onSubmit: SubmitHandler<FormValues> = (data) => console.log(data); );
};
return (
<Layout> export default function Dashboard() {
{!formState.isSubmitted && !flakeUrl && ( const { data } = useAppState();
<form if (!data.isJoined) {
onSubmit={handleSubmit(onSubmit)} return <JoinPrequel />;
className="w-full max-w-2xl justify-self-center" }
> if (data.isJoined) {
<Controller return (
name="flakeUrl" <MachineContextProvider>
control={control} <div className="flex h-screen w-full">
render={({ field }) => ( <div className="grid w-full auto-rows-max grid-cols-1 grid-rows-none gap-4 xl:grid-cols-2 2xl:grid-cols-3 ">
<Input <DashboardCard rowSpan={2}>
{...field} <NetworkOverview />
// variant="standard" </DashboardCard>
// label="Clan url" <DashboardCard rowSpan={2}>
required <RecentActivity />
fullWidth </DashboardCard>
startAdornment={ <DashboardCard>
<InputAdornment position="start">Clan Url:</InputAdornment> <Notifications />
} </DashboardCard>
endAdornment={ <DashboardCard>
<InputAdornment position="end"> <QuickActions />
<IconButton type="submit"> </DashboardCard>
<ChevronRight /> <DashboardPanel>
</IconButton> <AppOverview />
</InputAdornment> </DashboardPanel>
} <DashboardCard sx={tw`xl:col-span-full 2xl:col-span-1`}>
// }} <TaskQueue />
/> </DashboardCard>
)} </div>
/> </div>
</form> </MachineContextProvider>
)} );
{(formState.isSubmitted || flakeUrl) && ( }
<Confirm
handleBack={() => reset()}
flakeUrl={formState.isSubmitted ? getValues("flakeUrl") : flakeUrl}
/>
)}
</Layout>
);
} }

2
pkgs/ui/src/app/templates/[id]/page.tsx
View File

@@ -36,7 +36,6 @@ export async function generateStaticParams() {
} }
function getTemplate(params: { id: string }) { function getTemplate(params: { id: string }) {
console.log({ params });
// const res = await fetch(`https://.../posts/${params.id}`); // const res = await fetch(`https://.../posts/${params.id}`);
return { return {
short: `My Template ${params.id}`, short: `My Template ${params.id}`,
@@ -48,7 +47,6 @@ interface TemplateDetailProps {
} }
export default function TemplateDetail({ params }: TemplateDetailProps) { export default function TemplateDetail({ params }: TemplateDetailProps) {
const { data, isLoading } = useListMachines(); const { data, isLoading } = useListMachines();
console.log({ data, isLoading });
const details = getTemplate(params); const details = getTemplate(params);
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null); const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);

51
pkgs/ui/src/components/background.tsx Normal file
View File

@@ -0,0 +1,51 @@
import Image from "next/image";
import clanLight from "../../public/clan-dark.png";
import clanDark 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"
}
>
{(isLoading || !data.isJoined) && (
<>
<Image
className="dark:hidden"
alt="clan"
src={clanLight}
placeholder="blur"
quality={100}
fill
sizes="100vw"
style={{
objectFit: "cover",
}}
/>
<Image
className="hidden dark:block"
alt="clan"
src={clanDark}
placeholder="blur"
quality={100}
fill
sizes="100vw"
style={{
objectFit: "cover",
}}
/>
</>
)}
</div>
);
}
// position: fixed;
// height: 100vh;
// width: 100vw;
// overflow: hidden;
// z-index: -1;

5
pkgs/ui/src/components/flakeBadge/flakeBadge.tsx
View File

@@ -10,7 +10,10 @@ export const FlakeBadge = (props: FlakeBadgeProps) => (
label={`${props.flakeUrl}#${props.flakeAttr}`} label={`${props.flakeUrl}#${props.flakeAttr}`}
sx={{ sx={{
p: 2, p: 2,
"& .MuiChip-label": { "&.MuiChip-root": {
maxWidth: "unset",
},
"&.MuiChip-label": {
overflow: "unset", overflow: "unset",
}, },
}} }}

61
pkgs/ui/src/components/hooks/useAppContext.tsx Normal file
View File

@@ -0,0 +1,61 @@
import { useListMachines } from "@/api/default/default";
import { Machine, MachinesResponse } from "@/api/model";
import { AxiosError, AxiosResponse } from "axios";
import React, {
createContext,
Dispatch,
ReactNode,
SetStateAction,
useState,
} from "react";
import { KeyedMutator } from "swr";
type AppContextType = {
// data: AxiosResponse<{}, any> | undefined;
data: AppState;
isLoading: boolean;
error: AxiosError<any> | undefined;
setAppState: Dispatch<SetStateAction<AppState>>;
mutate: KeyedMutator<AxiosResponse<MachinesResponse, any>>;
swrKey: string | false | Record<any, any>;
};
const initialState = {
isLoading: true,
} as const;
export const AppContext = createContext<AppContextType>({} as AppContextType);
type AppState = {
isJoined?: boolean;
clanName?: string;
};
interface AppContextProviderProps {
children: ReactNode;
}
export const WithAppState = (props: AppContextProviderProps) => {
const { children } = props;
const { data: rawData, isLoading, error, mutate, swrKey } = useListMachines();
const [data, setAppState] = useState<AppState>({ isJoined: false });
return (
<AppContext.Provider
value={{
data,
setAppState,
isLoading,
error,
swrKey,
mutate,
}}
>
{children}
</AppContext.Provider>
);
};
export const useAppState = () => React.useContext(AppContext);

4
pkgs/ui/src/components/hooks/useVms.tsx
View File

@@ -33,7 +33,9 @@ export const useVms = (options: UseVmsOptions) => {
} catch (e) { } catch (e) {
const err = e as AxiosError<HTTPValidationError>; const err = e as AxiosError<HTTPValidationError>;
setError(err); setError(err);
toast.error(err.message); toast(
"Could not find default configuration. Please select a machine preset",
);
return undefined; return undefined;
} finally { } finally {
setIsLoading(false); setIsLoading(false);

77
pkgs/ui/src/components/join/configureVM.tsx
View File

@@ -10,10 +10,15 @@ import {
} from "@mui/material"; } from "@mui/material";
import { Controller, SubmitHandler, UseFormReturn } from "react-hook-form"; import { Controller, SubmitHandler, UseFormReturn } from "react-hook-form";
import { FlakeBadge } from "../flakeBadge/flakeBadge"; import { FlakeBadge } from "../flakeBadge/flakeBadge";
import { createVm, useGetVmLogs } from "@/api/default/default"; import {
createVm,
useGetVmLogs,
useInspectFlakeAttrs,
} from "@/api/default/default";
import { VmConfig } from "@/api/model"; import { VmConfig } from "@/api/model";
import { Dispatch, SetStateAction, useState } from "react"; import { Dispatch, SetStateAction, useEffect, useState } from "react";
import { toast } from "react-hot-toast"; import { toast } from "react-hot-toast";
import { useAppState } from "../hooks/useAppContext";
interface VmPropLabelProps { interface VmPropLabelProps {
children: React.ReactNode; children: React.ReactNode;
@@ -28,20 +33,26 @@ interface VmPropContentProps {
children: React.ReactNode; children: React.ReactNode;
} }
const VmPropContent = (props: VmPropContentProps) => ( const VmPropContent = (props: VmPropContentProps) => (
<div className="col-span-4 font-bold sm:col-span-3">{props.children}</div> <div className="col-span-4 sm:col-span-3">{props.children}</div>
); );
interface VmDetailsProps { interface VmDetailsProps {
vmConfig: VmConfig;
formHooks: UseFormReturn<VmConfig, any, undefined>; formHooks: UseFormReturn<VmConfig, any, undefined>;
setVmUuid: Dispatch<SetStateAction<string | null>>; setVmUuid: Dispatch<SetStateAction<string | null>>;
} }
export const ConfigureVM = (props: VmDetailsProps) => { export const ConfigureVM = (props: VmDetailsProps) => {
const { vmConfig, formHooks, setVmUuid } = props; const { formHooks, setVmUuid } = props;
const { control, handleSubmit } = formHooks; const { control, handleSubmit, watch, setValue } = formHooks;
const { cores, flake_attr, flake_url, graphics, memory_size } = vmConfig;
const [isStarting, setStarting] = useState(false); const [isStarting, setStarting] = useState(false);
const { setAppState } = useAppState();
const { isLoading, data } = useInspectFlakeAttrs({ url: watch("flake_url") });
useEffect(() => {
if (!isLoading && data?.data) {
setValue("flake_attr", data.data.flake_attrs[0] || "");
}
}, [isLoading, setValue, data]);
const onSubmit: SubmitHandler<VmConfig> = async (data) => { const onSubmit: SubmitHandler<VmConfig> = async (data) => {
setStarting(true); setStarting(true);
@@ -53,6 +64,7 @@ export const ConfigureVM = (props: VmDetailsProps) => {
setStarting(false); setStarting(false);
if (response.statusText === "OK") { if (response.statusText === "OK") {
toast.success(("Joined @ " + uuid) as string); toast.success(("Joined @ " + uuid) as string);
setAppState((s) => ({ ...s, isJoined: true }));
} else { } else {
toast.error("Could not join"); toast.error("Could not join");
} }
@@ -64,30 +76,40 @@ export const ConfigureVM = (props: VmDetailsProps) => {
className="grid grid-cols-4 gap-y-10" className="grid grid-cols-4 gap-y-10"
> >
<div className="col-span-4"> <div className="col-span-4">
<ListSubheader>General</ListSubheader> <ListSubheader sx={{ bgcolor: "inherit" }}>General</ListSubheader>
</div> </div>
<VmPropLabel>Flake</VmPropLabel> <VmPropLabel>Flake</VmPropLabel>
<VmPropContent> <VmPropContent>
<FlakeBadge flakeAttr={flake_attr} flakeUrl={flake_url} /> <FlakeBadge
flakeAttr={watch("flake_attr")}
flakeUrl={watch("flake_url")}
/>
</VmPropContent> </VmPropContent>
<VmPropLabel>Machine</VmPropLabel> <VmPropLabel>Machine</VmPropLabel>
<VmPropContent> <VmPropContent>
<Controller {!isLoading && (
name="flake_attr" <Controller
control={control} name="flake_attr"
render={({ field }) => ( control={control}
<Select {...field} variant="standard" fullWidth> render={({ field }) => (
{["default", "vm1"].map((attr) => ( <Select
<MenuItem value={attr} key={attr}> {...field}
{attr} variant="standard"
</MenuItem> fullWidth
))} disabled={isLoading}
</Select> >
)} {data?.data.flake_attrs.map((attr) => (
/> <MenuItem value={attr} key={attr}>
{attr}
</MenuItem>
))}
</Select>
)}
/>
)}
</VmPropContent> </VmPropContent>
<div className="col-span-4"> <div className="col-span-4">
<ListSubheader>VM</ListSubheader> <ListSubheader sx={{ bgcolor: "inherit" }}>VM</ListSubheader>
</div> </div>
<VmPropLabel>CPU Cores</VmPropLabel> <VmPropLabel>CPU Cores</VmPropLabel>
<VmPropContent> <VmPropContent>
@@ -103,7 +125,7 @@ export const ConfigureVM = (props: VmDetailsProps) => {
name="graphics" name="graphics"
control={control} control={control}
render={({ field }) => ( render={({ field }) => (
<Switch {...field} defaultChecked={vmConfig.graphics} /> <Switch {...field} defaultChecked={watch("graphics")} />
)} )}
/> />
</VmPropContent> </VmPropContent>
@@ -129,7 +151,12 @@ export const ConfigureVM = (props: VmDetailsProps) => {
<div className="col-span-4 grid items-center"> <div className="col-span-4 grid items-center">
{isStarting && <LinearProgress />} {isStarting && <LinearProgress />}
<Button type="submit" disabled={isStarting} variant="contained"> <Button
autoFocus
type="submit"
disabled={isStarting}
variant="contained"
>
Join Clan Join Clan
</Button> </Button>
</div> </div>

2
pkgs/ui/src/components/join/confirm.tsx
View File

@@ -22,7 +22,7 @@ export const Confirm = (props: ConfirmProps) => {
return userConfirmed ? ( return userConfirmed ? (
<ConfirmVM url={flakeUrl} handleBack={handleBack} /> <ConfirmVM url={flakeUrl} handleBack={handleBack} />
) : ( ) : (
<div className="mb-2 flex w-full max-w-2xl flex-col items-center justify-self-center pb-2"> <div className="mb-2 flex w-full max-w-2xl flex-col items-center justify-self-center pb-2 ">
{isLoading && ( {isLoading && (
<LoadingOverlay <LoadingOverlay
title={"Loading Flake"} title={"Loading Flake"}

25
pkgs/ui/src/components/join/confirmVM.tsx
View File

@@ -26,10 +26,10 @@ export function ConfirmVM(props: ConfirmVMProps) {
const formHooks = useForm<VmConfig>({ const formHooks = useForm<VmConfig>({
defaultValues: { defaultValues: {
flake_url: url, flake_url: url,
flake_attr: "vm1", flake_attr: "default",
cores: 1, cores: 4,
graphics: true, graphics: true,
memory_size: 1024, memory_size: 2048,
}, },
}); });
const [vmUuid, setVmUuid] = useState<string | null>(null); const [vmUuid, setVmUuid] = useState<string | null>(null);
@@ -37,7 +37,6 @@ export function ConfirmVM(props: ConfirmVMProps) {
const { setValue, watch, formState, handleSubmit } = formHooks; const { setValue, watch, formState, handleSubmit } = formHooks;
const { config, error, isLoading } = useVms({ const { config, error, isLoading } = useVms({
url, url,
// TODO: FIXME
attr: watch("flake_attr"), attr: watch("flake_attr"),
}); });
useEffect(() => { useEffect(() => {
@@ -52,12 +51,12 @@ export function ConfirmVM(props: ConfirmVMProps) {
<div className="mb-2 flex w-full max-w-2xl flex-col items-center justify-self-center pb-2"> <div className="mb-2 flex w-full max-w-2xl flex-col items-center justify-self-center pb-2">
{!formState.isSubmitted && ( {!formState.isSubmitted && (
<> <>
{error && ( {/* {error && (
<Alert severity="error" className="w-full max-w-2xl"> <Alert severity="error" className="w-full max-w-2xl">
<AlertTitle>Error</AlertTitle> <AlertTitle>Error</AlertTitle>
An Error occurred - See details below An Error occurred - See details below
</Alert> </Alert>
)} )} */}
<div className="mb-2 w-full max-w-2xl"> <div className="mb-2 w-full max-w-2xl">
{isLoading && ( {isLoading && (
<LoadingOverlay <LoadingOverlay
@@ -65,14 +64,10 @@ export function ConfirmVM(props: ConfirmVMProps) {
subtitle={<FlakeBadge flakeUrl={url} flakeAttr={url} />} subtitle={<FlakeBadge flakeUrl={url} flakeAttr={url} />}
/> />
)} )}
{config && (
<ConfigureVM <ConfigureVM formHooks={formHooks} setVmUuid={setVmUuid} />
vmConfig={config}
formHooks={formHooks} {/* {error && (
setVmUuid={setVmUuid}
/>
)}
{error && (
<> <>
<Button <Button
color="error" color="error"
@@ -93,7 +88,7 @@ export function ConfirmVM(props: ConfirmVMProps) {
} }
/> />
</> </>
)} )} */}
</div> </div>
</> </>
)} )}

67
pkgs/ui/src/views/joinPrequel.tsx Normal file
View File

@@ -0,0 +1,67 @@
"use client";
import React from "react";
import {
FormControl,
FormHelperText,
IconButton,
Input,
InputAdornment,
} from "@mui/material";
import { useSearchParams } from "next/navigation";
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;
};
export default function JoinPrequel() {
const queryParams = useSearchParams();
const flakeUrl = queryParams.get("flake") || "";
const { handleSubmit, control, formState, getValues, reset } =
useForm<FormValues>({ defaultValues: { flakeUrl: "" } });
return (
<Layout>
{!formState.isSubmitted && !flakeUrl && (
<form
onSubmit={handleSubmit(() => {})}
className="w-full max-w-2xl justify-self-center"
>
<Controller
name="flakeUrl"
control={control}
render={({ field }) => (
<Input
color="secondary"
aria-required="true"
{...field}
required
fullWidth
startAdornment={
<InputAdornment position="start">Clan</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>
);
}