PxlLoewe/var-monorepo
1
0
Fork 0
Code Issues 22 Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Finished Hub ESLINT rule enforcement

Browse Source
This commit is contained in:
PxlLoewe
2025-07-09 23:26:09 -07:00
parent 98ed0cb5ca
commit eec72a51b8
26 changed files with 199 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/dispatch/app/_helpers/useDebounce.ts
View File

@@ -1,8 +0,0 @@
import { DependencyList, useEffect } from "react";
import useTimeout from "./useTimeout";
export const useDebounce = (callback: () => void, delay: number, dependencies: DependencyList) => {
const { reset, clear } = useTimeout(callback, delay);
useEffect(reset, [...dependencies, reset]);
useEffect(() => clear, [clear]);
};

30
apps/dispatch/app/_helpers/useTimeout.ts
View File

@@ -1,30 +0,0 @@
import { useCallback, useEffect, useRef } from "react";
export default function useTimeout(callback: () => void, delay: number) {
const callbackRef = useRef(callback);
const timeoutRef = useRef<NodeJS.Timeout>(null);
useEffect(() => {
callbackRef.current = callback;
}, [callback]);
const set = useCallback(() => {
timeoutRef.current = setTimeout(() => callbackRef.current(), delay);
}, [delay]);
const clear = useCallback(() => {
if (timeoutRef.current) clearTimeout(timeoutRef.current);
}, []);
useEffect(() => {
set();
return clear;
}, [delay, set, clear]);
const reset = useCallback(() => {
clear();
set();
}, [clear, set]);
return { reset, clear, set };
}

8
apps/hub/app/(app)/admin/config/action.tsx
View File

@@ -6,8 +6,8 @@ export const addMessage = async (notam: Prisma.ConfigCreateInput) => {
await prisma.config.create({
data: notam,
});
} catch (error) {
throw new Error("Failed to add message");
} catch (e) {
throw new Error(`Failed to add message: ${e instanceof Error ? e.message : "Unknown error"}`);
}
};
@@ -16,7 +16,7 @@ export const disableMessage = async () => {
await prisma.config.create({
data: {},
});
} catch (error) {
throw new Error("Failed to disable message");
} catch (e) {
throw new Error(`Failed to add message: ${e instanceof Error ? e.message : "Unknown error"}`);
}
};

2
apps/hub/app/(app)/admin/config/page.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { Check, MessageSquareWarning, Settings } from "lucide-react";
import { Check, Settings } from "lucide-react";
import { MessageForm } from "./_components/MessageForm";
import { PaginatedTable, PaginatedTableRef } from "_components/PaginatedTable";
import { ColumnDef } from "@tanstack/react-table";

22
apps/hub/app/(app)/admin/event/_components/AppointmentModal.tsx
View File

@@ -1,5 +1,5 @@
import { Event, Participant } from "@repo/db";
import { EventAppointmentOptionalDefaults } from "@repo/db/zod";
import { EventAppointmentOptionalDefaults, InputJsonValueType } from "@repo/db/zod";
import { ColumnDef } from "@tanstack/react-table";
import { useSession } from "next-auth/react";
import { RefObject, useRef } from "react";
@@ -45,7 +45,7 @@ export const AppointmentModal = ({
✕
</button>
</form>
<h3 className="font-bold text-lg">Termin {appointmentForm.watch("id")}</h3>
<form
onSubmit={appointmentForm.handleSubmit(async (values) => {
if (!event) return;
@@ -55,13 +55,13 @@ export const AppointmentModal = ({
})}
className="flex flex-col"
>
<DateInput
control={appointmentForm.control}
name="appointmentDate"
showTimeInput
timeCaption="Uhrzeit"
showTimeCaption
/>
<div className="flex justify-between mr-7">
<h3 className="font-bold text-lg">Termin {appointmentForm.watch("id")}</h3>
<DateInput
value={new Date(appointmentForm.watch("appointmentDate") || Date.now())}
onChange={(date) => appointmentForm.setValue("appointmentDate", date)}
/>
</div>
<div>
<PaginatedTable
hide={appointmentForm.watch("id") === undefined}
@@ -150,7 +150,7 @@ export const AppointmentModal = ({
attended: false,
appointmentCancelled: true,
statusLog: [
...(row.original.statusLog as any),
...(row.original.statusLog as InputJsonValueType[]),
{
event: "Gefehlt an Event",
timestamp: new Date().toISOString(),
@@ -169,7 +169,7 @@ export const AppointmentModal = ({
);
},
},
] as ColumnDef<Participant, any>[]
] as ColumnDef<Participant>[]
}
prismaModel={"participant"}
filter={{

8
apps/hub/app/(app)/admin/event/_components/ParticipantModal.tsx
View File

@@ -59,9 +59,7 @@ export const ParticipantModal = ({ participantForm, ref }: ParticipantModalProps
if (!participantForm.watch("id")) return;
const participant = participantForm.getValues();
await handleParticipantFinished(participant.id.toString()).catch((e) => {
const error = e as AxiosError;
});
await handleParticipantFinished(participant.id.toString()).catch(() => {});
toast.success("Workflow erfolgreich ausgeführt");
router.refresh();
@@ -119,10 +117,10 @@ export const ParticipantModal = ({ participantForm, ref }: ParticipantModalProps
<div className="flex flex-col">
<h3 className="text-xl">Verlauf</h3>
{(participantForm.watch("statusLog") as unknown as ParticipantLog[])?.map((s) => (
<div className="flex justify-between" key={(s as any).timestamp}>
<div className="flex justify-between" key={s.timestamp.toString()}>
<p>{s.event}</p>
<p>{s.user}</p>
<p>{new Date((s as any).timestamp).toLocaleString()}</p>
<p>{new Date(s.timestamp).toLocaleString()}</p>
</div>
))}
</div>

7
apps/hub/app/(app)/admin/event/action.ts
View File

@@ -1,11 +1,8 @@
"use server";
import { prisma, Prisma, Event, Participant, EventAppointment } from "@repo/db";
import { prisma, Prisma, Event, Participant } from "@repo/db";
export const upsertEvent = async (
event: Prisma.EventCreateInput,
id?: Event["id"],
) => {
export const upsertEvent = async (event: Prisma.EventCreateInput, id?: Event["id"]) => {
const newEvent = id
? await prisma.event.update({
where: { id: id },

1
apps/hub/app/(app)/admin/event/new/page.tsx
View File

@@ -1,4 +1,3 @@
import { prisma } from "@repo/db";
import { Form } from "../_components/Form";
export default async () => {

35
apps/hub/app/(app)/admin/event/page.tsx
View File

@@ -1,23 +1,36 @@
import { PartyPopperIcon } from "lucide-react";
import { PaginatedTable } from "../../../_components/PaginatedTable";
import Link from "next/link";
import { ColumnDef } from "@tanstack/react-table";
import { Event } from "@repo/db";
export default function Page() {
return (
<>
<PaginatedTable
showEditButton
prismaModel="event"
columns={[
{
header: "Name",
accessorKey: "name",
},
{
header: "Versteckt",
accessorKey: "hidden",
},
]}
columns={
[
{
header: "Name",
accessorKey: "name",
},
{
header: "Versteckt",
accessorKey: "hidden",
},
{
header: "Aktionen",
cell: ({ row }) => (
<div className="flex items-center gap-1">
<Link href={`/admin/event/${row.original.id}`}>
<button className="btn btn-sm">Edit</button>
</Link>
</div>
),
},
] as ColumnDef<Event>[]
}
leftOfSearch={
<span className="flex items-center gap-2">
<PartyPopperIcon className="w-5 h-5" /> Events

3
apps/hub/app/(app)/admin/keyword/_components/Form.tsx
View File

@@ -2,7 +2,6 @@
import { zodResolver } from "@hookform/resolvers/zod";
import { KeywordOptionalDefaultsSchema } from "@repo/db/zod";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { KEYWORD_CATEGORY, Keyword } from "@repo/db";
import { FileText } from "lucide-react";
import { Input } from "../../../../_components/ui/Input";
@@ -24,7 +23,7 @@ export const KeywordForm = ({ keyword }: { keyword?: Keyword }) => {
<form
onSubmit={form.handleSubmit(async (values) => {
setLoading(true);
const createdKeyword = await upsertKeyword(values, keyword?.id);
await upsertKeyword(values, keyword?.id);
setLoading(false);
if (!keyword) redirect(`/admin/keyword`);
})}

11
apps/hub/app/(app)/admin/keyword/page.tsx
View File

@@ -9,7 +9,6 @@ export default () => {
<>
<PaginatedTable
initialOrderBy={[{ id: "category", desc: true }]}
showEditButton
prismaModel="keyword"
searchFields={["name", "abreviation", "description"]}
columns={
@@ -26,6 +25,16 @@ export default () => {
header: "Name",
accessorKey: "name",
},
{
header: "Aktionen",
cell: ({ row }) => (
<div className="flex items-center gap-1">
<Link href={`/admin/keyword/${row.original.id}`}>
<button className="btn btn-sm">bearbeiten</button>
</Link>
</div>
),
},
] as ColumnDef<Keyword>[]
}
leftOfSearch={

3
apps/hub/app/(app)/admin/station/_components/Form.tsx
View File

@@ -1,8 +1,7 @@
"use client";
import { zodResolver } from "@hookform/resolvers/zod";
import { StationOptionalDefaultsSchema } from "@repo/db/zod";
import { set, useForm } from "react-hook-form";
import { z } from "zod";
import { useForm } from "react-hook-form";
import { BosUse, Country, Station } from "@repo/db";
import { FileText, LocateIcon, PlaneIcon } from "lucide-react";
import { Input } from "../../../../_components/ui/Input";

56
apps/hub/app/(app)/admin/station/page.tsx
View File

@@ -1,32 +1,46 @@
"use client";
import { DatabaseBackupIcon } from "lucide-react";
import { PaginatedTable } from "../../../_components/PaginatedTable";
import Link from "next/link";
import { ColumnDef } from "@tanstack/react-table";
import { Station } from "@repo/db";
const page = () => {
return (
<>
<PaginatedTable
showEditButton
prismaModel="station"
searchFields={["bosCallsign", "bosUse", "country", "operator"]}
columns={[
{
header: "BOS Name",
accessorKey: "bosCallsign",
},
{
header: "Bos Use",
accessorKey: "bosUse",
},
{
header: "Country",
accessorKey: "country",
},
{
header: "operator",
accessorKey: "operator",
},
]}
columns={
[
{
header: "BOS Name",
accessorKey: "bosCallsign",
},
{
header: "Bos Use",
accessorKey: "bosUse",
},
{
header: "Country",
accessorKey: "country",
},
{
header: "operator",
accessorKey: "operator",
},
{
header: "Aktionen",
cell: ({ row }) => (
<div className="flex items-center gap-1">
<Link href={`/admin/event/${row.original.id}`}>
<button className="btn btn-sm">Edit</button>
</Link>
</div>
),
},
] as ColumnDef<Station>[]
}
leftOfSearch={
<span className="flex items-center gap-2">
<DatabaseBackupIcon className="w-5 h-5" /> Stationen
@@ -35,9 +49,7 @@ const page = () => {
rightOfSearch={
<p className="text-2xl font-semibold text-left flex items-center gap-2 justify-between">
<Link href={"/admin/station/new"}>
<button className="btn btn-sm btn-outline btn-primary">
Erstellen
</button>
<button className="btn btn-sm btn-outline btn-primary">Erstellen</button>
</Link>
</p>
}

7
apps/hub/app/(app)/admin/user/[id]/_components/forms.tsx
View File

@@ -39,26 +39,23 @@ import { PaginatedTable, PaginatedTableRef } from "_components/PaginatedTable";
import { cn } from "@repo/shared-components";
import {
ChartBarBigIcon,
Check,
Eye,
LockKeyhole,
PlaneIcon,
RedoDot,
ShieldUser,
Timer,
Trash2,
Users,
X,
} from "lucide-react";
import Link from "next/link";
import { ColumnDef } from "@tanstack/react-table";
import { Error } from "_components/Error";
import { useSession } from "next-auth/react";
import { setStandardName } from "../../../../../../helper/discord";
import { setStandardName } from "(app)/../../helper/discord";
import { penaltyColumns } from "(app)/admin/penalty/columns";
import { addPenalty, editPenaltys } from "(app)/admin/penalty/actions";
import { reportColumns } from "(app)/admin/report/columns";
import { sendMail, sendMailByTemplate } from "../../../../../../helper/mail";
import { sendMailByTemplate } from "(app)/../../helper/mail";
interface ProfileFormProps {
user: User;

67
apps/hub/app/(app)/admin/user/page.tsx
View File

@@ -1,13 +1,16 @@
"use client";
import { User2 } from "lucide-react";
import { PaginatedTable } from "../../../_components/PaginatedTable";
import { getServerSession } from "api/auth/[...nextauth]/auth";
import Link from "next/link";
import { ColumnDef } from "@tanstack/react-table";
import { User } from "@repo/db";
import { useSession } from "next-auth/react";
const AdminUserPage = async () => {
const session = await getServerSession();
const AdminUserPage = () => {
const { data: session } = useSession();
return (
<>
<PaginatedTable
showEditButton
prismaModel="user"
searchFields={["publicId", "firstname", "lastname", "email"]}
initialOrderBy={[
@@ -16,28 +19,40 @@ const AdminUserPage = async () => {
desc: false,
},
]}
columns={[
{
header: "ID",
accessorKey: "publicId",
},
{
header: "Vorname",
accessorKey: "firstname",
},
{
header: "Nachname",
accessorKey: "lastname",
},
...(session?.user.permissions.includes("ADMIN_USER_ADVANCED")
? [
{
header: "Email",
accessorKey: "email",
},
]
: []),
]}
columns={
[
{
header: "ID",
accessorKey: "publicId",
},
{
header: "Vorname",
accessorKey: "firstname",
},
{
header: "Nachname",
accessorKey: "lastname",
},
...(session?.user.permissions.includes("ADMIN_USER_ADVANCED")
? [
{
header: "Email",
accessorKey: "email",
},
]
: []),
{
header: "Aktionen",
cell: ({ row }) => (
<div className="flex items-center gap-1">
<Link href={`/admin/event/${row.original.id}`}>
<button className="btn btn-sm">Anzeigen</button>
</Link>
</div>
),
},
] as ColumnDef<User>[]
} // Define the columns for the user table
leftOfSearch={
<p className="text-2xl font-semibold text-left flex items-center gap-2">
<User2 className="w-5 h-5" /> Benutzer

4
apps/hub/app/(app)/events/_components/EventCard.tsx
View File

@@ -17,7 +17,9 @@ export const EventCard = ({
Participants: Participant[];
};
selectedAppointments: EventAppointment[];
appointments: EventAppointment[];
appointments: (EventAppointment & {
Participants: { userId: string }[];
})[];
}) => {
return (
<div className="col-span-full">

33
apps/hub/app/(app)/events/_components/Modal.tsx
View File

@@ -16,7 +16,11 @@ import {
TriangleAlert,
} from "lucide-react";
import { useForm } from "react-hook-form";
import { ParticipantOptionalDefaults, ParticipantOptionalDefaultsSchema } from "@repo/db/zod";
import {
InputJsonValueType,
ParticipantOptionalDefaults,
ParticipantOptionalDefaultsSchema,
} from "@repo/db/zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { Select } from "../../../_components/ui/Select";
import { useRouter } from "next/navigation";
@@ -24,11 +28,14 @@ import { handleParticipantEnrolled } from "../../../../helper/events";
import { eventCompleted } from "@repo/shared-components";
import MDEditor from "@uiw/react-md-editor";
import toast from "react-hot-toast";
import { formatDate } from "date-fns";
interface ModalBtnProps {
title: string;
event: Event;
dates: EventAppointment[];
dates: (EventAppointment & {
Participants: { userId: string }[];
})[];
selectedAppointments: EventAppointment[];
participant?: Participant;
user: User;
@@ -88,14 +95,16 @@ const ModalBtn = ({
(date) =>
date.id === selectAppointmentForm.watch("eventAppointmentId") || selectedAppointment?.id,
);
const ownIndexInParticipantList = (selectedDate as any)?.Participants?.findIndex(
(p: Participant) => p.userId === user.id,
const ownIndexInParticipantList = selectedDate?.Participants?.findIndex(
(p) => p.userId === user.id,
);
const ownPlaceInParticipantList =
ownIndexInParticipantList === -1
? (selectedDate as any)?.Participants?.length + 1
: ownIndexInParticipantList + 1;
typeof ownIndexInParticipantList === "number"
? ownIndexInParticipantList === -1
? (selectedDate?.Participants?.length ?? 0) + 1
: ownIndexInParticipantList + 1
: undefined;
const missingRequirements =
event.requiredBadges?.length > 0 &&
@@ -167,13 +176,7 @@ const ModalBtn = ({
<Select
form={selectAppointmentForm}
options={dates.map((date) => ({
label: `${new Date(date.appointmentDate).toLocaleString("de-DE", {
year: "numeric",
month: "2-digit",
day: "2-digit",
hour: "2-digit",
minute: "2-digit",
})} - (${(date as any).Participants.length}/${event.maxParticipants})`,
label: `${formatDate(date.appointmentDate, "dd.MM.yyyy HH:mm")} - (${date.Participants.length}/${event.maxParticipants})`,
value: date.id,
}))}
name="eventAppointmentId"
@@ -296,7 +299,7 @@ const ModalBtn = ({
userId: participant!.userId,
appointmentCancelled: true,
statusLog: [
...(participant?.statusLog as any),
...(participant?.statusLog as unknown as InputJsonValueType[]),
{
data: {
appointmentId: selectedAppointment.id,

1
apps/hub/app/(app)/resources/_components/Card.tsx
View File

@@ -1,4 +1,3 @@
import { Download } from "lucide-react";
import Image, { StaticImageData } from "next/image";
import { ReactNode } from "react";

1
apps/hub/app/(auth)/oauth/_components/Authorize.tsx
View File

@@ -4,7 +4,6 @@ import { Service } from "../page";
import { generateToken } from "./action";
import { useSession } from "next-auth/react";
import { useErrorBoundary } from "react-error-boundary";
import { se } from "date-fns/locale";
import { PERMISSION } from "@repo/db";
export const Authorize = ({ service }: { service: Service }) => {

4
apps/hub/app/_components/ErrorBoundary.tsx
View File

@@ -11,10 +11,10 @@ export const CustomErrorBoundary = ({ children }: { children?: React.ReactNode }
let errorTest;
let errorCode = 500;
if ("statusCode" in error) {
errorCode = (error as any).statusCode;
errorCode = error.statusCode;
}
if ("message" in error || error instanceof Error) {
errorTest = (error as any).message;
errorTest = error.message;
} else if (typeof error === "string") {
errorTest = error;
} else {

48
apps/hub/app/_components/PaginatedTable.tsx
View File

@@ -1,8 +1,9 @@
"use client";
import { useEffect, useState, useCallback, Ref, useImperativeHandle } from "react";
import { useState, Ref, useImperativeHandle } from "react";
import SortableTable, { Pagination, SortableTableProps } from "./Table";
import { PrismaClient } from "@repo/db";
import { getData } from "./pagiantedTableActions";
import { useDebounce } from "@repo/shared-components";
export interface PaginatedTableRef {
refresh: () => void;
@@ -10,9 +11,8 @@ export interface PaginatedTableRef {
interface PaginatedTableProps<TData> extends Omit<SortableTableProps<TData>, "data"> {
prismaModel: keyof PrismaClient;
filter?: Record<string, any>;
filter?: Record<string, unknown>;
rowsPerPage?: number;
showEditButton?: boolean;
searchFields?: string[];
include?: Record<string, boolean>;
strictQuery?: boolean;
@@ -26,7 +26,6 @@ interface PaginatedTableProps<TData> extends Omit<SortableTableProps<TData>, "da
export function PaginatedTable<TData>({
prismaModel,
rowsPerPage = 10,
showEditButton = false,
searchFields = [],
filter,
include,
@@ -42,7 +41,6 @@ export function PaginatedTable<TData>({
const [page, setPage] = useState(0);
const [total, setTotal] = useState(0);
const [searchTerm, setSearchTerm] = useState("");
const [debouncedSearchTerm, setDebouncedSearchTerm] = useState(searchTerm);
const [orderBy, setOrderBy] = useState<Record<string, "asc" | "desc">>(
restProps.initialOrderBy
? restProps.initialOrderBy.reduce(
@@ -60,16 +58,19 @@ export function PaginatedTable<TData>({
prismaModel,
rowsPerPage,
page * rowsPerPage,
debouncedSearchTerm,
searchTerm,
searchFields,
filter,
include,
orderBy,
strictQuery
? restProps.columns
.filter((col: any) => "accessorKey" in col)
.map((col: any) => col.accessorKey)
.reduce((acc: Record<string, any>, key: string) => {
.filter(
(col): col is { accessorKey: string } =>
typeof (col as { accessorKey?: unknown }).accessorKey === "string",
)
.map((col) => col.accessorKey)
.reduce<Record<string, boolean>>((acc, key) => {
acc[key] = true;
return acc;
}, {})
@@ -82,35 +83,20 @@ export function PaginatedTable<TData>({
});
};
useEffect(() => {
RefreshTableData();
}, [filter, orderBy]);
useImperativeHandle(ref, () => ({
refresh: () => {
RefreshTableData();
},
}));
const debounce = (func: Function, delay: number) => {
let timer: NodeJS.Timeout;
return (...args: any[]) => {
clearTimeout(timer);
timer = setTimeout(() => func(...args), delay);
};
};
const handleSearchChange = useCallback(
debounce((value: string) => {
setDebouncedSearchTerm(value);
}, 500),
[],
useDebounce(
() => {
RefreshTableData();
},
500,
[searchTerm, page, rowsPerPage, orderBy, filter],
);
useEffect(() => {
RefreshTableData();
}, [page, debouncedSearchTerm]);
return (
<div className="space-y-4 m-4">
<div className="flex items-center gap-2">
@@ -122,7 +108,6 @@ export function PaginatedTable<TData>({
value={searchTerm}
onChange={(e) => {
setSearchTerm(e.target.value);
handleSearchChange(e.target.value);
setPage(0); // Reset to first page on search
}}
className="input input-bordered w-full max-w-xs justify-end"
@@ -134,7 +119,6 @@ export function PaginatedTable<TData>({
<SortableTable
data={data}
prismaModel={prismaModel}
showEditButton={showEditButton}
setOrderBy={setOrderBy}
{...restProps}
/>

2
apps/hub/app/_components/QueryClient.tsx
View File

@@ -3,7 +3,7 @@
import { toast } from "react-hot-toast";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactNode, useEffect, useState } from "react";
import { ReactNode, useState } from "react";
export function QueryProvider({ children }: { children: ReactNode }) {
const [queryClient] = useState(

19
apps/hub/app/_components/Table.tsx
View File

@@ -9,13 +9,11 @@ import {
flexRender,
} from "@tanstack/react-table";
import { ArrowLeft, ArrowRight, ChevronDown, ChevronUp } from "lucide-react"; // Icons for sorting
import Link from "next/link";
import { PrismaClient } from "@repo/db";
export interface SortableTableProps<TData> {
data: TData[];
columns: ColumnDef<TData>[];
showEditButton?: boolean;
prismaModel?: keyof PrismaClient;
setOrderBy?: (orderBy: Record<string, "asc" | "desc">) => void;
initialOrderBy?: SortingState;
@@ -26,28 +24,13 @@ export default function SortableTable<TData>({
columns,
initialOrderBy = [],
prismaModel,
showEditButton,
setOrderBy,
}: SortableTableProps<TData>) {
const [sorting, setSorting] = useState<SortingState>(initialOrderBy);
const table = useReactTable({
data,
columns: showEditButton
? [
...columns,
{
header: "Actions",
cell: ({ row }) => (
<div className="flex items-center gap-1">
<Link href={`/admin/${prismaModel as string}/${(row.original as any).id}`}>
<button className="btn btn-sm">Edit</button>
</Link>
</div>
),
},
]
: columns,
columns,
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
onSortingChange: setSorting,

4
apps/hub/app/_components/ui/Button.tsx
View File

@@ -15,7 +15,7 @@ export const Button = ({
return (
<button
{...(props as any)}
{...props}
className={cn("btn", props.className)}
disabled={isLoadingState || props.disabled}
onClick={async (e) => {
@@ -27,7 +27,7 @@ export const Button = ({
}}
>
{isLoadingState && <span className="loading loading-spinner loading-sm"></span>}
{props.children as any}
{props.children}
</button>
);
};

44
apps/hub/app/_components/ui/DateInput.tsx
View File

@@ -1,32 +1,24 @@
import DatePicker, { DatePickerProps, registerLocale } from "react-datepicker";
import { Control, Controller, FieldValues, Path } from "react-hook-form";
import { de } from "date-fns/locale";
registerLocale("de", de);
import { formatDate } from "date-fns";
interface DateInputProps<T extends FieldValues>
extends Omit<DatePickerProps, "onChange" | "selected"> {
control: Control<T>;
name: Path<T>;
}
export const DateInput = <T extends FieldValues>({
control,
name,
export const DateInput = ({
value,
onChange,
...props
}: DateInputProps<T>) => {
}: Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "onChange"> & {
value?: Date | null;
onChange?: (date: Date) => void;
}) => {
return (
<Controller
control={control}
name={name}
render={({ field }) => (
<DatePicker
className="input input-bordered mt-2"
locale={"de"}
onChange={(date) => field.onChange(date)}
selected={field.value}
{...props}
/>
)}
<input
type="datetime-local"
className="input"
value={formatDate(value || new Date(), "yyyy-MM-dd hh:mm")}
onChange={(e) => {
const date = e.target.value ? new Date(e.target.value) : null;
if (!date) return;
onChange?.(date);
}}
{...props}
/>
);
};