chore: update project types

Reference-to: #51, #49
Signed-off-by: Prince Muel <[email protected]>

src/components/atoms/form-control.tsx

@@ -1,12 +1,11 @@
-import type { Project } from '@src/@types';
 import clsx from 'clsx';
 
 const FormControl = <E extends React.ElementType = 'div'>({
   as,
   className,
   children,
   ...rest
-}: Project.ElementProps<E>) => {
+}: ElementProps<E>) => {
   const RenderedElement = as || 'div';
 
   return (

src/components/atoms/logout-button.tsx

@@ -1,4 +1,3 @@
-import { Project } from '@src/@types';
 import { client, useAuthDispatch, useLogoutQuery } from '@src/lib';
 import { useQueryClient } from '@tanstack/react-query';
 import { useState } from 'react';
@@ -23,14 +22,12 @@ const LogoutButton = (props: Props) => {
       setShouldLogout(false);
       toast.success(data.logout.message);
       dispatch('auth/logout');
-      client.setHeader('authorization', `Bearer`);
       queryClient.clear();
       navigate('/login');
     },
-    onError(error: Project.IErrorResponse) {
+    onError(error: IErrorResponse) {
       setShouldLogout(false);
       dispatch('auth/logout');
-      client.setHeader('authorization', `Bearer`);
       queryClient.clear();
       navigate('/login');
     },

src/components/atoms/text.tsx

@@ -1,10 +1,8 @@
-import type { Project } from '@src/@types';
-
 const Text = <E extends React.ElementType = 'p'>({
   children,
   as,
   ...rest
-}: Project.ElementProps<E>) => {
+}: ElementProps<E>) => {
   const RenderedElement = as || 'p';
   return <RenderedElement {...rest}>{children}</RenderedElement>;
 };

src/components/molecules/edit-item-list.tsx

@@ -10,12 +10,11 @@ import {
 import { v4 as uuid } from 'uuid';
 import { FormErrorText, FormLabel } from '../atoms';
 
-import { Project } from '@src/@types';
 import { PriceOutput } from './price-output';
 
 interface Props {
-  methods: UseFormReturn<Project.InvoiceFormType, any>;
-  invoice: Project.InvoiceFormType;
+  methods: UseFormReturn<InvoiceFormType, any>;
+  invoice: InvoiceFormType;
 }
 
 const EditItemList = ({ methods, invoice }: Props) => {

src/components/molecules/new-item-list.tsx

@@ -1,4 +1,3 @@
-import type { Project } from '@src/@types';
 import { calculateTotal, endsWith, useMedia } from '@src/lib';
 import clsx from 'clsx';
 import * as React from 'react';
@@ -13,7 +12,7 @@ import { FormErrorText, FormLabel } from '../atoms';
 import { PriceOutput } from './price-output';
 
 interface Props {
-  methods: UseFormReturn<Project.InvoiceFormType, any>;
+  methods: UseFormReturn<InvoiceFormType, any>;
 }
 
 const NewItemList = ({ methods }: Props) => {

src/components/molecules/query-result.tsx

@@ -1,4 +1,3 @@
-import type { Project } from '@src/@types';
 import * as React from 'react';
 import { toast } from 'react-toastify';
 import { LoadingSpinner } from '../atoms';
@@ -25,7 +24,7 @@ const QueryResult = <T,>({
   children,
 }: Props<T>) => {
   if (error) {
-    (error as Project.IErrorResponse).response.errors.forEach((err) => {
+    (error as IErrorResponse).response.errors.forEach((err) => {
       if (err.message.includes('Authorised'))
         toast.error('Something unexpected happened. Please try again.');
       else toast.error(err.message);

src/components/organisms/login.tsx

@@ -1,4 +1,3 @@
-import { Project } from '@src/@types';
 import { client, useAuthDispatch, useLoginMutation } from '@src/lib';
 import {
   LoginFormSchema,
@@ -26,11 +25,10 @@ const LoginForm = (props: Props) => {
   const { mutate: login, isLoading } = useLoginMutation(client, {
     onSuccess(data) {
       dispatch('auth/addToken');
-      dispatch('auth/addUser');
       toast.success('Login Successful');
       navigate('/');
     },
-    onError(e: Project.IErrorResponse) {
+    onError(e: IErrorResponse) {
       e.response.errors.forEach(async (error) => {
         toast.error(error.message);
       });

src/components/organisms/new-invoice.tsx

@@ -1,4 +1,3 @@
-import { Project } from '@src/@types';
 import {
   DateTime,
   InvoiceFormSchema,
@@ -7,9 +6,9 @@ import {
   client,
   constants,
   terms,
-  useAuthState,
   useCreateInvoiceMutation,
   useGetInvoicesQuery,
+  useSession,
   useZodForm,
 } from '@src/lib';
 import { useQueryClient } from '@tanstack/react-query';
@@ -22,7 +21,7 @@ import { Calendar, Dropdown, FormField, NewItemList } from '../molecules';
 interface Props {}
 
 const NewInvoiceForm = (props: Props) => {
-  const [status, setStatus] = useState<Project.InvoiceStatus>('PENDING');
+  const [status, setStatus] = useState<InvoiceStatus>('PENDING');
   const [selectedTerm, setSelectedTerm] = useState(terms[0].value);
   const [selectedDate, setSelectedDate] = useState(DateTime.TODAY);
 
@@ -41,9 +40,11 @@ const NewInvoiceForm = (props: Props) => {
     };
   }, [methods]);
 
-  const { user } = useAuthState();
+  const session = useSession();
+
   const navigate = useNavigate();
   const queryClient = useQueryClient();
+
   const { mutate: createInvoice } = useCreateInvoiceMutation(client, {
     onSuccess: (data, variables, context) => {
       queryClient.invalidateQueries({
@@ -67,7 +68,7 @@ const NewInvoiceForm = (props: Props) => {
         draft.total = calculateTotal(draft?.items, 'total');
 
         draft.tag = '';
-        draft.userId = user?.id as string;
+        draft.userId = session?.id as string;
       });
 
       const result = InvoiceFormSchema.safeParse(draft);

src/components/organisms/register.tsx

@@ -1,4 +1,3 @@
-import type { Project } from '@src/@types';
 import {
   RHFSubmitHandler,
   RegisterFormSchema,
@@ -28,7 +27,7 @@ const RegisterForm = (props: Props) => {
       toast.success(data.register?.message);
       navigate('/login');
     },
-    onError(e: Project.IErrorResponse) {
+    onError(e: IErrorResponse) {
       e.response.errors.forEach(async (error) => {
         toast.error(error.message);
       });

src/components/templates/home.tsx

@@ -3,7 +3,6 @@ import {
   EnvelopeOpenIcon,
   InboxArrowDownIcon,
 } from '@heroicons/react/24/solid';
-import type { Project } from '@src/@types';
 import {
   client,
   datetime,
@@ -20,7 +19,7 @@ import { StatusButton, Text } from '../atoms';
 import { PageSEO } from './seo';
 import styles from './templates.module.css';
 
-const status: Project.IStatus = ['PAID', 'PENDING', 'DRAFT'];
+const status: IStatus = ['PAID', 'PENDING', 'DRAFT'];
 const HeaderCells = ['S/N', 'Due Date', 'Amount', 'Customer', 'Status'];
 
 interface Props {}
@@ -41,8 +40,8 @@ const HomeTemplate = (props: Props) => {
   const invoices = React.useMemo(() => {
     return (data?.invoices || []).sort((a, b) => {
       return (
-        status.indexOf(a.status as Project.IStatus[number]) -
-        status.indexOf(b.status as Project.IStatus[number])
+        status.indexOf(a.status as IStatus[number]) -
+        status.indexOf(b.status as IStatus[number])
       );
     });
   }, [data?.invoices]);
@@ -84,6 +83,7 @@ const HomeTemplate = (props: Props) => {
           </div>
         </section>
 
+        {/*  Use suspense here */}
         <section className='h-container rounded-brand bg-neutral-300 px-10 py-12  dark:bg-brand-700'>
           <div className={styles['invoice__cards']}>
             <div className='flex flex-col gap-4 rounded-lg bg-neutral-100 p-4 dark:bg-brand-600'>

src/components/templates/invoices.tsx

@@ -1,5 +1,4 @@
 import { Listbox, Transition } from '@headlessui/react';
-import type { Project } from '@src/@types';
 import { icons } from '@src/common';
 import {
   capitalize,
@@ -19,7 +18,7 @@ import { Link } from 'react-router-dom';
 import { StatusButton, Text } from '../atoms';
 import { PageSEO } from './seo';
 
-const status: Project.IStatus = ['PAID', 'PENDING', 'DRAFT'];
+const status: IStatus = ['PAID', 'PENDING', 'DRAFT'];
 
 interface Props {}
 
@@ -45,8 +44,8 @@ const InvoicesTemplate = (props: Props) => {
       })
     : invoices.sort((a, b) => {
         return (
-          status.indexOf(a.status as Project.IStatus[number]) -
-          status.indexOf(b.status as Project.IStatus[number])
+          status.indexOf(a.status as IStatus[number]) -
+          status.indexOf(b.status as IStatus[number])
         );
       });
 

src/lib/helpers/utils.ts

@@ -1,4 +1,3 @@
-import type { Project } from '@src/@types';
 import {
   DehydrateOptions,
   QueryClient,
@@ -46,21 +45,17 @@ export function approximate(num = 0, fractionDigits = 0) {
   return Number.parseFloat(num.toFixed(fractionDigits));
 }
 
-export const isDraftInvoice = (
-  invoice?: Project.Invoice
-): invoice is Project.DraftInvoice => {
+export const isDraftInvoice = (invoice?: Invoice): invoice is DraftInvoice => {
   return invoice?.status === 'DRAFT';
 };
 
 export const isPendingInvoice = (
-  invoice?: Project.Invoice
-): invoice is Project.PendingInvoice => {
+  invoice?: Invoice
+): invoice is PendingInvoice => {
   return invoice?.status === 'PENDING';
 };
 
-export const isPaidInvoice = (
-  invoice?: Project.Invoice
-): invoice is Project.PaidInvoice => {
+export const isPaidInvoice = (invoice?: Invoice): invoice is PaidInvoice => {
   return invoice?.status === 'PAID';
 };
 
@@ -87,14 +82,14 @@ export function calculateTotal<T extends Item>(
 ): number;
 export function calculateTotal<T extends number>(quantity: T, price: T): number;
 export function calculateTotal(a?: unknown, b?: unknown) {
-  try {
-    if (!a) throw new TypeError('The item or value is not defined');
+  if (!a) return 0;
 
-    if (typeof a === 'number' && typeof b === 'number') {
-      return approximate(a * b, 2);
-    }
+  if (typeof a === 'number' && typeof b === 'number') {
+    return approximate(a * b, 2);
+  }
 
-    return (a as Item[])?.reduce((total, current) => {
+  if (Array.isArray(a)) {
+    return (a as Item[]).reduce((total, current) => {
       if (b === 'total') {
         total += parseNumSafe(Number(current.total));
       } else {
@@ -104,9 +99,9 @@ export function calculateTotal(a?: unknown, b?: unknown) {
       }
       return approximate(total, 2);
     }, 0);
-  } catch (e) {
-    return 0;
   }
+
+  return 0;
 }
 
 export function formatPrice(price = 0) {