zias/stats
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

oh lord. prettier eslint and all that

Browse Source
This commit is contained in:
Carl-Gerhard Lindesvärd
2023-11-02 20:24:41 +01:00
parent e1f37b439e
commit 107feda4ad
121 changed files with 1856 additions and 1684 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
apps/web/src/modals/AddClient.tsx
View File

@@ -1,32 +1,33 @@
import { api, handleError } from "@/utils/api";
import { ModalContent, ModalHeader } from "./Modal/Container";
import { Controller, useForm } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { Button } from "@/components/ui/button";
import { ButtonContainer } from "@/components/ButtonContainer";
import { popModal } from ".";
import { toast } from "@/components/ui/use-toast";
import { InputWithLabel } from "@/components/forms/InputWithLabel";
import { useRefetchActive } from "@/hooks/useRefetchActive";
import { Combobox } from "@/components/ui/combobox";
import { Label } from "@/components/ui/label";
import { Copy } from "lucide-react";
import { clipboard } from "@/utils/clipboard";
import dynamic from "next/dynamic";
import { useOrganizationParams } from "@/hooks/useOrganizationParams";
import { ButtonContainer } from '@/components/ButtonContainer';
import { InputWithLabel } from '@/components/forms/InputWithLabel';
import { Button } from '@/components/ui/button';
import { Combobox } from '@/components/ui/combobox';
import { Label } from '@/components/ui/label';
import { toast } from '@/components/ui/use-toast';
import { useOrganizationParams } from '@/hooks/useOrganizationParams';
import { useRefetchActive } from '@/hooks/useRefetchActive';
import { api, handleError } from '@/utils/api';
import { clipboard } from '@/utils/clipboard';
import { zodResolver } from '@hookform/resolvers/zod';
import { Copy } from 'lucide-react';
import dynamic from 'next/dynamic';
import { Controller, useForm } from 'react-hook-form';
import { z } from 'zod';
const Syntax = dynamic(import('@/components/Syntax'))
import { popModal } from '.';
import { ModalContent, ModalHeader } from './Modal/Container';
const Syntax = dynamic(import('@/components/Syntax'));
const validator = z.object({
name: z.string().min(1, "Required"),
projectId: z.string().min(1, "Required"),
name: z.string().min(1, 'Required'),
projectId: z.string().min(1, 'Required'),
});
type IForm = z.infer<typeof validator>;
export default function CreateProject() {
const params = useOrganizationParams()
const params = useOrganizationParams();
const refetch = useRefetchActive();
const query = api.project.list.useQuery({
organizationSlug: params.organization,
@@ -35,8 +36,8 @@ export default function CreateProject() {
onError: handleError,
onSuccess() {
toast({
title: "Success",
description: "Client created!",
title: 'Success',
description: 'Client created!',
});
refetch();
},
@@ -44,8 +45,8 @@ export default function CreateProject() {
const { register, handleSubmit, formState, control } = useForm<IForm>({
resolver: zodResolver(validator),
defaultValues: {
name: "",
projectId: "",
name: '',
projectId: '',
},
});
@@ -110,7 +111,7 @@ export default function CreateProject() {
<InputWithLabel
label="Name"
placeholder="Name"
{...register("name")}
{...register('name')}
className="mb-4"
/>
<Controller

47
apps/web/src/modals/AddProject.tsx
View File

@@ -1,15 +1,16 @@
import { api, handleError } from "@/utils/api";
import { ModalContent, ModalHeader } from "./Modal/Container";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { Button } from "@/components/ui/button";
import { ButtonContainer } from "@/components/ButtonContainer";
import { popModal } from ".";
import { toast } from "@/components/ui/use-toast";
import { InputWithLabel } from "@/components/forms/InputWithLabel";
import { useRefetchActive } from "@/hooks/useRefetchActive";
import { useOrganizationParams } from "@/hooks/useOrganizationParams";
import { ButtonContainer } from '@/components/ButtonContainer';
import { InputWithLabel } from '@/components/forms/InputWithLabel';
import { Button } from '@/components/ui/button';
import { toast } from '@/components/ui/use-toast';
import { useOrganizationParams } from '@/hooks/useOrganizationParams';
import { useRefetchActive } from '@/hooks/useRefetchActive';
import { api, handleError } from '@/utils/api';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { popModal } from '.';
import { ModalContent, ModalHeader } from './Modal/Container';
const validator = z.object({
name: z.string().min(1),
@@ -18,23 +19,23 @@ const validator = z.object({
type IForm = z.infer<typeof validator>;
export default function AddProject() {
const params = useOrganizationParams()
const refetch = useRefetchActive()
const params = useOrganizationParams();
const refetch = useRefetchActive();
const mutation = api.project.create.useMutation({
onError: handleError,
onSuccess() {
toast({
title: 'Success',
description: 'Project created! Lets create a client for it 🤘',
})
refetch()
popModal()
}
});
refetch();
popModal();
},
});
const { register, handleSubmit, formState } = useForm<IForm>({
resolver: zodResolver(validator),
defaultValues: {
name: "",
name: '',
},
});
@@ -51,8 +52,12 @@ export default function AddProject() {
>
<InputWithLabel label="Name" placeholder="Name" {...register('name')} />
<ButtonContainer>
<Button type="button" variant="outline" onClick={() => popModal()}>Cancel</Button>
<Button type="submit" disabled={!formState.isDirty}>Create</Button>
<Button type="button" variant="outline" onClick={() => popModal()}>
Cancel
</Button>
<Button type="submit" disabled={!formState.isDirty}>
Create
</Button>
</ButtonContainer>
</form>
</ModalContent>

17
apps/web/src/modals/Confirm.tsx
View File

@@ -1,14 +1,15 @@
import { ModalContent, ModalHeader } from "./Modal/Container";
import { Button } from "@/components/ui/button";
import { ButtonContainer } from "@/components/ButtonContainer";
import { popModal } from ".";
import { ButtonContainer } from '@/components/ButtonContainer';
import { Button } from '@/components/ui/button';
export type ConfirmProps = {
import { popModal } from '.';
import { ModalContent, ModalHeader } from './Modal/Container';
export interface ConfirmProps {
title: string;
text: string;
onConfirm: () => void;
onCancel?: () => void;
};
}
export default function Confirm({
title,
@@ -24,7 +25,7 @@ export default function Confirm({
<Button
variant="outline"
onClick={() => {
popModal("Confirm");
popModal('Confirm');
onCancel?.();
}}
>
@@ -32,7 +33,7 @@ export default function Confirm({
</Button>
<Button
onClick={() => {
popModal("Confirm");
popModal('Confirm');
onConfirm();
}}
>

51
apps/web/src/modals/EditClient.tsx
View File

@@ -1,19 +1,20 @@
import { api, handleError } from "@/utils/api";
import { ModalContent, ModalHeader } from "./Modal/Container";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { useEffect } from "react";
import { Button } from "@/components/ui/button";
import { ButtonContainer } from "@/components/ButtonContainer";
import { popModal } from ".";
import { toast } from "@/components/ui/use-toast";
import { InputWithLabel } from "@/components/forms/InputWithLabel";
import { useRefetchActive } from "@/hooks/useRefetchActive";
import { useEffect } from 'react';
import { ButtonContainer } from '@/components/ButtonContainer';
import { InputWithLabel } from '@/components/forms/InputWithLabel';
import { Button } from '@/components/ui/button';
import { toast } from '@/components/ui/use-toast';
import { useRefetchActive } from '@/hooks/useRefetchActive';
import { api, handleError } from '@/utils/api';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
type EditClientProps = {
import { popModal } from '.';
import { ModalContent, ModalHeader } from './Modal/Container';
interface EditClientProps {
id: string;
};
}
const validator = z.object({
id: z.string().min(1),
@@ -23,25 +24,25 @@ const validator = z.object({
type IForm = z.infer<typeof validator>;
export default function EditClient({ id }: EditClientProps) {
const refetch = useRefetchActive()
const refetch = useRefetchActive();
const mutation = api.client.update.useMutation({
onError: handleError,
onSuccess() {
toast({
title: 'Success',
description: 'Client updated.',
})
popModal()
refetch()
}
});
popModal();
refetch();
},
});
const query = api.client.get.useQuery({ id });
const data = query.data;
const { register, handleSubmit, reset, formState } = useForm<IForm>({
resolver: zodResolver(validator),
defaultValues: {
id: "",
name: "",
id: '',
name: '',
},
});
@@ -61,8 +62,12 @@ export default function EditClient({ id }: EditClientProps) {
>
<InputWithLabel label="Name" placeholder="Name" {...register('name')} />
<ButtonContainer>
<Button type="button" variant="outline" onClick={() => popModal()}>Cancel</Button>
<Button type="submit" disabled={!formState.isDirty}>Save</Button>
<Button type="button" variant="outline" onClick={() => popModal()}>
Cancel
</Button>
<Button type="submit" disabled={!formState.isDirty}>
Save
</Button>
</ButtonContainer>
</form>
</ModalContent>

53
apps/web/src/modals/EditProject.tsx
View File

@@ -1,19 +1,20 @@
import { api, handleError } from "@/utils/api";
import { ModalContent, ModalHeader } from "./Modal/Container";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { useEffect } from "react";
import { Button } from "@/components/ui/button";
import { ButtonContainer } from "@/components/ButtonContainer";
import { popModal } from ".";
import { toast } from "@/components/ui/use-toast";
import { InputWithLabel } from "@/components/forms/InputWithLabel";
import { useRefetchActive } from "@/hooks/useRefetchActive";
import { useEffect } from 'react';
import { ButtonContainer } from '@/components/ButtonContainer';
import { InputWithLabel } from '@/components/forms/InputWithLabel';
import { Button } from '@/components/ui/button';
import { toast } from '@/components/ui/use-toast';
import { useRefetchActive } from '@/hooks/useRefetchActive';
import { api, handleError } from '@/utils/api';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
type EditProjectProps = {
import { popModal } from '.';
import { ModalContent, ModalHeader } from './Modal/Container';
interface EditProjectProps {
id: string;
};
}
const validator = z.object({
id: z.string().min(1),
@@ -23,25 +24,25 @@ const validator = z.object({
type IForm = z.infer<typeof validator>;
export default function EditProject({ id }: EditProjectProps) {
const refetch = useRefetchActive()
const refetch = useRefetchActive();
const mutation = api.project.update.useMutation({
onError: handleError,
onSuccess() {
toast({
title: 'Success',
description: 'Project updated.',
})
popModal()
refetch()
}
});
popModal();
refetch();
},
});
const query = api.project.get.useQuery({ id });
const data = query.data;
const { register, handleSubmit, reset,formState } = useForm<IForm>({
const { register, handleSubmit, reset, formState } = useForm<IForm>({
resolver: zodResolver(validator),
defaultValues: {
id: "",
name: "",
id: '',
name: '',
},
});
@@ -61,8 +62,12 @@ export default function EditProject({ id }: EditProjectProps) {
>
<InputWithLabel label="Name" placeholder="Name" {...register('name')} />
<ButtonContainer>
<Button type="button" variant="outline" onClick={() => popModal()}>Cancel</Button>
<Button type="submit" disabled={!formState.isDirty}>Save</Button>
<Button type="button" variant="outline" onClick={() => popModal()}>
Cancel
</Button>
<Button type="submit" disabled={!formState.isDirty}>
Save
</Button>
</ButtonContainer>
</form>
</ModalContent>

15
apps/web/src/modals/Modal/Container.tsx
View File

@@ -1,10 +1,11 @@
import { Button } from "@/components/ui/button";
import { X } from "lucide-react";
import { popModal } from "..";
import { Button } from '@/components/ui/button';
import { X } from 'lucide-react';
type ModalContentProps = {
import { popModal } from '..';
interface ModalContentProps {
children: React.ReactNode;
};
}
export function ModalContent({ children }: ModalContentProps) {
return (
@@ -14,9 +15,9 @@ export function ModalContent({ children }: ModalContentProps) {
);
}
type ModalHeaderProps = {
interface ModalHeaderProps {
title: string | React.ReactNode;
};
}
export function ModalHeader({ title }: ModalHeaderProps) {
return (

69
apps/web/src/modals/SaveReport.tsx
View File

@@ -1,47 +1,48 @@
import { api, handleError } from "@/utils/api";
import { ModalContent, ModalHeader } from "./Modal/Container";
import { Controller, useForm, useWatch } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { Button } from "@/components/ui/button";
import { ButtonContainer } from "@/components/ButtonContainer";
import { popModal } from ".";
import { toast } from "@/components/ui/use-toast";
import { InputWithLabel } from "@/components/forms/InputWithLabel";
import { useRefetchActive } from "@/hooks/useRefetchActive";
import { type IChartInput } from "@/types";
import { Label } from "@/components/ui/label";
import { Combobox } from "@/components/ui/combobox";
import { useOrganizationParams } from "@/hooks/useOrganizationParams";
import { useRouter } from "next/router";
import { ButtonContainer } from '@/components/ButtonContainer';
import { InputWithLabel } from '@/components/forms/InputWithLabel';
import { Button } from '@/components/ui/button';
import { Combobox } from '@/components/ui/combobox';
import { Label } from '@/components/ui/label';
import { toast } from '@/components/ui/use-toast';
import { useOrganizationParams } from '@/hooks/useOrganizationParams';
import { useRefetchActive } from '@/hooks/useRefetchActive';
import type { IChartInput } from '@/types';
import { api, handleError } from '@/utils/api';
import { zodResolver } from '@hookform/resolvers/zod';
import { useRouter } from 'next/router';
import { Controller, useForm, useWatch } from 'react-hook-form';
import { z } from 'zod';
type SaveReportProps = {
import { popModal } from '.';
import { ModalContent, ModalHeader } from './Modal/Container';
interface SaveReportProps {
report: IChartInput;
reportId?: string;
};
}
const validator = z.object({
name: z.string().min(1, "Required"),
projectId: z.string().min(1, "Required"),
dashboardId: z.string().min(1, "Required"),
name: z.string().min(1, 'Required'),
projectId: z.string().min(1, 'Required'),
dashboardId: z.string().min(1, 'Required'),
});
type IForm = z.infer<typeof validator>;
export default function SaveReport({ report }: SaveReportProps) {
const router = useRouter()
const router = useRouter();
const { organization } = useOrganizationParams();
const refetch = useRefetchActive();
const save = api.report.save.useMutation({
onError: handleError,
onSuccess(res) {
toast({
title: "Success",
description: "Report saved.",
title: 'Success',
description: 'Report saved.',
});
popModal();
refetch();
router.push(`/${organization}/reports/${res.id}`)
router.push(`/${organization}/reports/${res.id}`);
},
});
@@ -49,26 +50,26 @@ export default function SaveReport({ report }: SaveReportProps) {
useForm<IForm>({
resolver: zodResolver(validator),
defaultValues: {
name: "",
projectId: "",
dashboardId: "",
name: '',
projectId: '',
dashboardId: '',
},
});
const dashboardMutation = api.dashboard.create.useMutation({
onError: handleError,
onSuccess(res) {
setValue("dashboardId", res.id);
setValue('dashboardId', res.id);
dashboasrdQuery.refetch();
toast({
title: "Success",
description: "Dashboard created.",
title: 'Success',
description: 'Dashboard created.',
});
},
});
const projectId = useWatch({
name: "projectId",
name: 'projectId',
control,
});
@@ -82,7 +83,7 @@ export default function SaveReport({ report }: SaveReportProps) {
},
{
enabled: !!projectId,
},
}
);
const projects = (projectQuery.data ?? []).map((item) => ({
@@ -113,7 +114,7 @@ export default function SaveReport({ report }: SaveReportProps) {
<InputWithLabel
label="Report name"
placeholder="Name"
{...register("name")}
{...register('name')}
defaultValue={report.name}
/>
<Controller

39
apps/web/src/modals/index.tsx
View File

@@ -1,14 +1,14 @@
import { Suspense, useEffect, useRef, useState } from 'react';
import { Loader } from 'lucide-react';
import mitt from 'mitt';
import dynamic from 'next/dynamic';
import { useOnClickOutside } from 'usehooks-ts';
import { type ConfirmProps } from './Confirm';
import type { ConfirmProps } from './Confirm';
const Loading = () => (
<div className='fixed top-0 z-50 flex h-screen w-screen items-center justify-center overflow-auto bg-backdrop'>
<Loader className='mb-8 animate-spin' size={40} />
<div className="fixed top-0 z-50 flex h-screen w-screen items-center justify-center overflow-auto bg-backdrop">
<Loader className="mb-8 animate-spin" size={40} />
</div>
);
@@ -48,26 +48,29 @@ const emitter = mitt<{
type ModalRoutes = keyof typeof modals;
type StateItem = {
interface StateItem {
key: string;
name: ModalRoutes;
props: Record<string, unknown>;
};
}
type ModalWrapperProps = {
interface ModalWrapperProps {
children: React.ReactNode;
name: ModalRoutes;
isOnTop: boolean;
};
}
function ModalWrapper({ children, name, isOnTop }: ModalWrapperProps) {
const ref = useRef<HTMLDivElement>(null);
useOnClickOutside(ref, (event) => {
const target = event.target as HTMLElement;
const isPortal = typeof target.closest === 'function' ? !!target.closest('[data-radix-popper-content-wrapper]') : false
if (isOnTop && !isPortal) {
const isPortal =
typeof target.closest === 'function'
? !!target.closest('[data-radix-popper-content-wrapper]')
: false;
if (isOnTop && !isPortal) {
emitter.emit('pop', {
name,
});
@@ -75,8 +78,8 @@ function ModalWrapper({ children, name, isOnTop }: ModalWrapperProps) {
});
return (
<div className='fixed top-0 z-50 flex h-screen w-screen items-center justify-center overflow-auto'>
<div ref={ref} className='w-inherit m-auto py-4'>
<div className="fixed top-0 z-50 flex h-screen w-screen items-center justify-center overflow-auto">
<div ref={ref} className="w-inherit m-auto py-4">
<Suspense>{children}</Suspense>
</div>
</div>
@@ -141,7 +144,9 @@ export function ModalProvider() {
});
return (
<>
{!!state.length && <div className="fixed top-0 left-0 right-0 bottom-0 bg-[rgba(0,0,0,0.2)]"></div>}
{!!state.length && (
<div className="fixed top-0 left-0 right-0 bottom-0 bg-[rgba(0,0,0,0.2)]"></div>
)}
{state.map((item, index) => {
const Modal = modals[item.name];
return (
@@ -168,7 +173,7 @@ type OrUndefined<T> = T extends Record<string, never> ? undefined : T;
export const pushModal = <
T extends StateItem['name'],
B extends OrUndefined<GetComponentProps<(typeof modals)[T]>>
B extends OrUndefined<GetComponentProps<(typeof modals)[T]>>,
>(
name: T,
...rest: B extends undefined ? [] : [B]
@@ -179,7 +184,7 @@ export const pushModal = <
});
export const replaceModal = <
T extends StateItem['name'],
B extends OrUndefined<GetComponentProps<(typeof modals)[T]>>
B extends OrUndefined<GetComponentProps<(typeof modals)[T]>>,
>(
name: T,
...rest: B extends undefined ? [] : [B]
@@ -197,4 +202,4 @@ export const unshiftModal = (name: StateItem['name']) =>
name,
});
export const showConfirm = (props: ConfirmProps) => pushModal('Confirm', props);
export const showConfirm = (props: ConfirmProps) => pushModal('Confirm', props);