Refactoring 2
This commit is contained in:
Darren Clarke
parent
dd14dfe72e
commit
e4b78ceec2
76 changed files with 870 additions and 734 deletions
|
|
@ -1,55 +0,0 @@
|
|||
"use client";
|
||||
|
||||
import { FC, useEffect } from "react";
|
||||
import { Grid } from "@mui/material";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Button, Dialog } from "ui";
|
||||
|
||||
interface CreateProps {
|
||||
title: string;
|
||||
entity: string;
|
||||
formAction: any;
|
||||
formState: any;
|
||||
children: any;
|
||||
}
|
||||
|
||||
export const Create: FC<CreateProps> = ({
|
||||
title,
|
||||
entity,
|
||||
formAction,
|
||||
formState,
|
||||
children,
|
||||
}) => {
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
if (formState.success) {
|
||||
router.push(`/${entity}/${formState.values.id}`);
|
||||
}
|
||||
}, [formState.success, router]);
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open
|
||||
title={title}
|
||||
formAction={formAction}
|
||||
onClose={() => router.push(`/${entity}`)}
|
||||
buttons={
|
||||
<Grid container justifyContent="space-between">
|
||||
<Grid item>
|
||||
<Button
|
||||
text="Cancel"
|
||||
kind="secondary"
|
||||
onClick={() => router.push(`/${entity}`)}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Button text="Save" kind="primary" type="submit" />
|
||||
</Grid>
|
||||
</Grid>
|
||||
}
|
||||
>
|
||||
{children}
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
"use client";
|
||||
|
||||
import { FC } from "react";
|
||||
import { Grid, Box } from "@mui/material";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { typography } from "@/app/_styles/theme";
|
||||
|
||||
interface DeleteDialogProps {
|
||||
title: string;
|
||||
entity: string;
|
||||
children: any;
|
||||
}
|
||||
|
||||
export const DeleteDialog: FC<DeleteDialogProps> = ({ title, entity, children }) => {
|
||||
const router = useRouter();
|
||||
|
||||
const { h3 } = typography;
|
||||
|
||||
return (
|
||||
<Box sx={{ height: "100vh", backgroundColor: "#ddd", p: 3 }}>
|
||||
<Grid container direction="column">
|
||||
<Grid item>
|
||||
<Box sx={h3}>{title}</Box>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
{children}
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,97 +0,0 @@
|
|||
"use client";
|
||||
|
||||
import { FC, useState } from "react";
|
||||
import { Box, Grid } from "@mui/material";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Dialog, Button, colors, typography } from "ui";
|
||||
|
||||
interface DetailProps {
|
||||
title: string;
|
||||
entity: string;
|
||||
id: string;
|
||||
children: any;
|
||||
deleteAction?: Function;
|
||||
}
|
||||
|
||||
export const Detail: FC<DetailProps> = ({
|
||||
title,
|
||||
entity,
|
||||
id,
|
||||
children,
|
||||
deleteAction,
|
||||
}) => {
|
||||
const router = useRouter();
|
||||
const { almostBlack } = colors;
|
||||
const { bodyLarge } = typography;
|
||||
const [showDeleteConfirmation, setShowDeleteConfirmation] = useState(false);
|
||||
|
||||
const continueDeleteAction = async () => {
|
||||
await deleteAction?.(id);
|
||||
setShowDeleteConfirmation(false);
|
||||
router.push(`/${entity}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Dialog
|
||||
open
|
||||
title={title}
|
||||
onClose={() => router.push(`/${entity}`)}
|
||||
buttons={
|
||||
<Grid container justifyContent="space-between">
|
||||
<Grid item container xs="auto" spacing={2}>
|
||||
{deleteAction && (
|
||||
<Grid item>
|
||||
<Button
|
||||
text="Delete"
|
||||
kind="destructive"
|
||||
onClick={() => setShowDeleteConfirmation(true)}
|
||||
/>
|
||||
</Grid>
|
||||
)}
|
||||
<Grid item>
|
||||
<Button
|
||||
text="Edit"
|
||||
kind="secondary"
|
||||
href={`/${entity}/${id}/edit`}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Button text="Done" kind="primary" href={`/${entity}`} />
|
||||
</Grid>
|
||||
</Grid>
|
||||
}
|
||||
>
|
||||
{children}
|
||||
</Dialog>
|
||||
<Dialog
|
||||
open={showDeleteConfirmation}
|
||||
size="xs"
|
||||
title="Really delete?"
|
||||
buttons={
|
||||
<Grid container justifyContent="space-between">
|
||||
<Grid item>
|
||||
<Button
|
||||
text="Cancel"
|
||||
kind="secondary"
|
||||
onClick={() => setShowDeleteConfirmation(false)}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Button
|
||||
text="Delete"
|
||||
kind="destructive"
|
||||
onClick={continueDeleteAction}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
}
|
||||
>
|
||||
<Box sx={{ ...bodyLarge, color: almostBlack }}>
|
||||
Are you sure you want to delete this record?
|
||||
</Box>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
"use client";
|
||||
|
||||
import { FC, useEffect } from "react";
|
||||
import { Grid } from "@mui/material";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Button, Dialog } from "ui";
|
||||
|
||||
interface EditProps {
|
||||
title: string;
|
||||
entity: string;
|
||||
formAction: any;
|
||||
formState: any;
|
||||
children: any;
|
||||
}
|
||||
|
||||
export const Edit: FC<EditProps> = ({
|
||||
title,
|
||||
entity,
|
||||
formState,
|
||||
formAction,
|
||||
children,
|
||||
}) => {
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
if (formState.success) {
|
||||
router.push(`/${entity}`);
|
||||
}
|
||||
}, [formState.success, router, entity]);
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open
|
||||
title={title}
|
||||
formAction={formAction}
|
||||
onClose={() => router.push(`/${entity}`)}
|
||||
buttons={
|
||||
<Grid container justifyContent="space-between">
|
||||
<Grid item>
|
||||
<Button
|
||||
text="Cancel"
|
||||
kind="secondary"
|
||||
onClick={() => router.push(`/${entity}`)}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Button text="Save" kind="primary" type="submit" />
|
||||
</Grid>
|
||||
</Grid>
|
||||
}
|
||||
>
|
||||
{children}
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
|
@ -5,7 +5,7 @@ import { Grid } from "@mui/material";
|
|||
import { CssBaseline } from "@mui/material";
|
||||
import { SessionProvider } from "next-auth/react";
|
||||
import { css, Global } from "@emotion/react";
|
||||
import { fonts } from "@/app/_styles/theme";
|
||||
import { fonts } from "ui";
|
||||
import { Sidebar } from "./Sidebar";
|
||||
|
||||
export const InternalLayout: FC<PropsWithChildren> = ({ children }) => {
|
||||
|
|
|
|||
|
|
@ -1,35 +0,0 @@
|
|||
"use client";
|
||||
|
||||
import { FC } from "react";
|
||||
import { GridColDef } from "@mui/x-data-grid-pro";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { List as InternalList, Button } from "ui";
|
||||
import type { Selectable } from "kysely";
|
||||
import { Database } from "@/app/_lib/database";
|
||||
|
||||
interface ListProps {
|
||||
title: string;
|
||||
entity: string;
|
||||
rows: Selectable<keyof Database>[];
|
||||
columns: GridColDef<any>[];
|
||||
}
|
||||
|
||||
export const List: FC<ListProps> = ({ title, entity, rows, columns }) => {
|
||||
const router = useRouter();
|
||||
|
||||
const onRowClick = (id: string) => {
|
||||
router.push(`/${entity}/${id}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<InternalList
|
||||
title={title}
|
||||
rows={rows}
|
||||
columns={columns}
|
||||
onRowClick={onRowClick}
|
||||
buttons={
|
||||
<Button text="Create" kind="primary" href={`/${entity}/create`} />
|
||||
}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -16,8 +16,8 @@ import {
|
|||
} from "@mui/icons-material";
|
||||
import { signIn } from "next-auth/react";
|
||||
import Image from "next/image";
|
||||
import LinkLogo from "@/app/../public/link-logo-small.png";
|
||||
import { colors } from "@/app/_styles/theme";
|
||||
import LinkLogo from "@/app/_images/link-logo-small.png";
|
||||
import { colors } from "ui";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
|
||||
type LoginProps = {
|
||||
|
|
|
|||
|
|
@ -1,32 +0,0 @@
|
|||
type ServiceLayoutProps = {
|
||||
children: any;
|
||||
detail: any;
|
||||
edit: any;
|
||||
create: any;
|
||||
params: {
|
||||
segment: string[];
|
||||
};
|
||||
};
|
||||
|
||||
export const ServiceLayout = ({
|
||||
children,
|
||||
detail,
|
||||
edit,
|
||||
create,
|
||||
params: { segment },
|
||||
}: ServiceLayoutProps) => {
|
||||
const length = segment?.length ?? 0;
|
||||
const isCreate = length === 1 && segment[0] === "create";
|
||||
const isEdit = length === 2 && segment[1] === "edit";
|
||||
const id = length > 0 && !isCreate ? segment[0] : null;
|
||||
const isDetail = length === 1 && !!id && !isCreate && !isEdit;
|
||||
|
||||
return (
|
||||
<>
|
||||
{children}
|
||||
{isDetail && detail}
|
||||
{isEdit && edit}
|
||||
{isCreate && create}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -24,8 +24,8 @@ import {
|
|||
import { usePathname } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { typography, fonts } from "@/app/_styles/theme";
|
||||
import LinkLogo from "@/public/link-logo-small.png";
|
||||
import { typography, fonts } from "ui";
|
||||
import LinkLogo from "@/app/_images/link-logo-small.png";
|
||||
import { useSession, signOut } from "next-auth/react";
|
||||
|
||||
const openWidth = 270;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue