chore: update project dir structure

References: #49, #51

Signed-off-by: Prince Muel <[email protected]>

src/components/atoms/avatar.tsx

@@ -1,5 +1,4 @@
-import { useAuthState } from '@src/context';
-import { trim } from '@src/helpers';
+import { trim, useAuthState } from '@src/lib';
 
 interface Props {
   src?: string;

src/components/atoms/form-label.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React from 'react';
+import * as React from 'react';
 
 interface Props
   extends React.DetailedHTMLProps<

src/components/atoms/logout-button.tsx

@@ -1,7 +1,5 @@
 import { IErrorResponse } from '@src/@types';
-import { useAuthDispatch } from '@src/context';
-import { useLogoutQuery } from '@src/hooks';
-import { client } from '@src/lib';
+import { client, useAuthDispatch, useLogoutQuery } from '@src/lib';
 import { useQueryClient } from '@tanstack/react-query';
 import { useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
@@ -34,7 +32,7 @@ const LogoutButton = (props: Props) => {
 
   const logout = useCallback(() => {
     refetch();
-  }, []);
+  }, [refetch]);
 
   return (
     <button type='button' onClick={logout}>

src/components/atoms/status-button.tsx

@@ -1,4 +1,4 @@
-import { capitalize } from '@src/helpers';
+import { capitalize } from '@src/lib';
 import clsx from 'clsx';
 
 interface Props {

src/components/atoms/theme-button.tsx

@@ -1,4 +1,4 @@
-import { useSetTheme, useTheme } from '@src/context';
+import { useSetTheme, useTheme } from '@src/lib';
 import { clsx } from 'clsx';
 
 const ThemeButton = () => {

src/components/molecules/actions-btns.tsx

@@ -1,4 +1,4 @@
-import { InvoiceType } from '@src/hooks';
+import type { InvoiceType } from '@src/lib';
 import clsx from 'clsx';
 import { Link } from 'react-router-dom';
 

src/components/molecules/calendar.tsx

@@ -1,6 +1,6 @@
 import { Menu, Transition } from '@headlessui/react';
 import { icons } from '@src/common';
-import { DateTime, datetime } from '@src/helpers';
+import { DateTime, datetime } from '@src/lib';
 import clsx from 'clsx';
 import { Dayjs } from 'dayjs';
 import * as React from 'react';

src/components/molecules/dropdown.tsx

@@ -1,6 +1,6 @@
 import { Listbox, Transition } from '@headlessui/react';
 import { icons } from '@src/common';
-import { pluralize } from '@src/helpers';
+import { pluralize } from '@src/lib';
 import { Dispatch, Fragment, SetStateAction } from 'react';
 
 interface Props {

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

@@ -1,5 +1,4 @@
-import { calculateTotal, endsWith } from '@src/helpers';
-import { useMedia } from '@src/hooks';
+import { calculateTotal, endsWith, useMedia } from '@src/lib';
 import clsx from 'clsx';
 import * as React from 'react';
 import {
@@ -10,7 +9,7 @@ import {
 } from 'react-hook-form';
 import { v4 as uuid } from 'uuid';
 import { FormErrorText, FormLabel } from '../atoms';
-import { InvoiceFormType } from './@types';
+import type { InvoiceFormType } from './@types';
 import { PriceOutput } from './price-output';
 
 interface Props {

src/components/molecules/invoice-item-details.tsx

@@ -1,5 +1,9 @@
-import { calculateTotal, formatPrice } from '@src/helpers';
-import { InvoiceItemType, useMedia } from '@src/hooks';
+import {
+  InvoiceItemType,
+  calculateTotal,
+  formatPrice,
+  useMedia,
+} from '@src/lib';
 import clsx from 'clsx';
 import * as React from 'react';
 import { Text } from '../atoms';

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

@@ -1,5 +1,4 @@
-import { calculateTotal, endsWith } from '@src/helpers';
-import { useMedia } from '@src/hooks';
+import { calculateTotal, endsWith, useMedia } from '@src/lib';
 import clsx from 'clsx';
 import * as React from 'react';
 import {

src/components/organisms/edit-invoice.tsx

@@ -3,17 +3,15 @@ import {
   InvoiceFormSchema,
   RHFSubmitHandler,
   calculateTotal,
-  constants,
+  client,
   hasValues,
   terms,
-  useZodForm,
-} from '@src/helpers';
-import {
   useGetInvoiceQuery,
   useGetInvoicesQuery,
   useUpdateInvoiceMutation,
-} from '@src/hooks';
-import { client } from '@src/lib';
+  useZodForm,
+  constants,
+} from '@src/lib';
 import { useQueryClient } from '@tanstack/react-query';
 import { produce } from 'immer';
 import { useState } from 'react';

src/components/organisms/invoice-details.tsx

@@ -1,5 +1,4 @@
-import { datetime } from '@src/helpers';
-import { InvoiceType, useMedia } from '@src/hooks';
+import { InvoiceType, datetime, useMedia } from '@src/lib';
 import * as React from 'react';
 import { BackLink, StatusButton, Text } from '../atoms';
 import { InvoiceActions, InvoiceItemDetails } from '../molecules';

src/components/organisms/login.tsx

@@ -1,8 +1,11 @@
 import { IErrorResponse } from '@src/@types';
 import { icons } from '@src/common';
-import { LoginFormSchema, RHFSubmitHandler, useZodForm } from '@src/helpers';
-import { useLoginMutation, usePersist } from '@src/hooks';
-import { client } from '@src/lib';
+import { client, useLoginMutation, usePersist } from '@src/lib';
+import {
+  LoginFormSchema,
+  RHFSubmitHandler,
+  useZodForm,
+} from '@src/lib/helpers';
 import { FormProvider } from 'react-hook-form';
 import { Link, useNavigate } from 'react-router-dom';
 import { toast } from 'react-toastify';

src/components/organisms/new-invoice.tsx

@@ -1,16 +1,17 @@
 import type { InvoiceStatus } from '@src/@types';
-import { useAuthState } from '@src/context';
 import {
   DateTime,
   InvoiceFormSchema,
   RHFSubmitHandler,
   calculateTotal,
+  client,
   constants,
   terms,
+  useAuthState,
+  useCreateInvoiceMutation,
+  useGetInvoicesQuery,
   useZodForm,
-} from '@src/helpers';
-import { useCreateInvoiceMutation, useGetInvoicesQuery } from '@src/hooks';
-import { client } from '@src/lib';
+} from '@src/lib';
 import { useQueryClient } from '@tanstack/react-query';
 import { produce } from 'immer';
 import { useEffect, useState } from 'react';

src/components/organisms/register.tsx

@@ -1,7 +1,11 @@
 import type { IErrorResponse } from '@src/@types';
-import { RHFSubmitHandler, RegisterFormSchema, useZodForm } from '@src/helpers';
-import { useRegisterMutation } from '@src/hooks';
-import { client } from '@src/lib';
+import {
+  RHFSubmitHandler,
+  RegisterFormSchema,
+  client,
+  useRegisterMutation,
+  useZodForm,
+} from '@src/lib';
 import { FormProvider } from 'react-hook-form';
 import { Link, useNavigate } from 'react-router-dom';
 import { toast } from 'react-toastify';

src/components/organisms/sidebar.tsx

@@ -1,6 +1,6 @@
 import { Avatar, Logo, ThemeButton } from '../atoms';
 
-type Props = {};
+interface Props {}
 
 const Sidebar = (props: Props) => {
   return (

src/components/templates/home.tsx

@@ -3,10 +3,15 @@ import {
   EnvelopeOpenIcon,
   InboxArrowDownIcon,
 } from '@heroicons/react/24/solid';
-import { IStatus } from '@src/@types';
-import { datetime, formatPrice, hasValues, pluralize } from '@src/helpers';
-import { useGetInvoicesQuery } from '@src/hooks';
-import { client } from '@src/lib';
+import type { IStatus } from '@src/@types';
+import {
+  client,
+  datetime,
+  formatPrice,
+  hasValues,
+  pluralize,
+  useGetInvoicesQuery,
+} from '@src/lib';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 import { StatusButton, Text } from '../atoms';

src/components/templates/invoice.tsx

@@ -1,12 +1,12 @@
 import { Dialog, Transition } from '@headlessui/react';
 import {
   InvoiceType,
+  client,
   useDeleteInvoiceMutation,
   useGetInvoiceQuery,
   useGetInvoicesQuery,
   useUpdateInvoiceMutation,
-} from '@src/hooks';
-import { client } from '@src/lib';
+} from '@src/lib';
 import { useQueryClient } from '@tanstack/react-query';
 import { Fragment, useCallback, useRef, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';

src/components/templates/invoices.tsx

@@ -3,15 +3,16 @@ import type { IStatus } from '@src/@types';
 import { icons } from '@src/common';
 import {
   capitalize,
+  client,
   datetime,
   formatPrice,
   hasValues,
   reverse,
   statuses,
   trim,
-} from '@src/helpers';
-import { useGetInvoicesQuery, useMedia } from '@src/hooks';
-import { client } from '@src/lib';
+  useGetInvoicesQuery,
+  useMedia,
+} from '@src/lib';
 import { Fragment, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { StatusButton, Text } from '../atoms';

src/components/templates/seo.tsx

@@ -1,4 +1,4 @@
-import { constants } from '@src/helpers';
+import { constants } from '@src/lib';
 import * as React from 'react';
 import { Helmet } from 'react-helmet-async';
 

src/lib/client/graphql.ts

@@ -1,5 +1,5 @@
-import { constants } from '@src/helpers';
 import { GraphQLClient } from 'graphql-request';
+import { constants } from '../helpers';
 
 const endpoint = `${constants.BASE_URL}`; //  process?.env?.NEXT_PUBLIC_GRAPHQL_ENDPOINT ??
 

src/context/auth.tsx → src/lib/context/auth.tsx

@@ -1,3 +1,4 @@
+import { IUser } from '@src/@types';
 import { produce } from 'immer';
 import {
   Dispatch,
@@ -7,9 +8,8 @@ import {
   useMemo,
   useReducer,
 } from 'react';
-import type { IUser } from '../@types';
+import { client } from '../client';
 import { useGetUserQuery, useRefreshAuthQuery } from '../hooks';
-import { client } from '../lib';
 interface IState {
   token?: string;
   user?: Partial<IUser>;

src/context/modal.tsx → src/lib/context/modal.tsx

@@ -25,14 +25,35 @@ const initialState: IModalState = {
   current: null,
 };
 
+const reducer = (state: IModalState, action: IModalActions) => {
+  switch (action.type) {
+    case 'OPEN_MODAL':
+      return {
+        ...state,
+        open: true,
+        current: action.payload.id,
+      };
+    case 'CLOSE_MODAL':
+      return {
+        ...state,
+        open: false,
+        current: null,
+      };
+    default: {
+      //@ts-expect-error ignore ts-error
+      throw new Error(`Unhandled action type: ${action.type}`);
+    }
+  }
+};
+
 const Store = createContext<IModalState | null>(null);
 const StoreDispatch = createContext<Dispatch<IModalActions> | null>(null);
 
-type ProviderProps = {
+interface Props {
   children: ReactNode;
-};
+}
 
-export const ModalProvider = ({ children }: ProviderProps) => {
+export const ModalProvider = ({ children }: Props) => {
   const [state, dispatch] = useReducer(reducer, initialState);
 
   return (
@@ -57,24 +78,3 @@ export const useModalDispatch = () => {
     throw new Error('useModalDispatch must be used within a ModalProvider');
   return context;
 };
-
-const reducer = (state: IModalState, action: IModalActions) => {
-  switch (action.type) {
-    case 'OPEN_MODAL':
-      return {
-        ...state,
-        open: true,
-        current: action.payload.id,
-      };
-    case 'CLOSE_MODAL':
-      return {
-        ...state,
-        open: false,
-        current: null,
-      };
-    default: {
-      //@ts-expect-error
-      throw new Error(`Unhandled action type: ${action.type}`);
-    }
-  }
-};

src/context/theme.tsx → src/lib/context/theme.tsx

@@ -1,5 +1,5 @@
-import { off, on } from '@src/helpers';
 import * as React from 'react';
+import { off, on } from '../helpers';
 
 type ThemeMode = 'dark' | 'light';
 type ThemeState = ReturnType<typeof useThemeMode>[0] | null;
@@ -8,9 +8,9 @@ type SetThemeState = ReturnType<typeof useThemeMode>[1] | null;
 const ThemeContext = React.createContext<ThemeState>(null);
 const SetThemeContext = React.createContext<SetThemeState>(null);
 
-type Props = {
+interface Props {
   children: React.ReactNode;
-};
+}
 
 const ThemeProvider = ({ children }: Props) => {
   const [mode, setMode] = useThemeMode();

src/helpers/datetime.ts → src/lib/helpers/datetime.ts

@@ -1,10 +1,11 @@
 import { uuid } from '@src/common';
-import dayjs from 'dayjs';
+import dayjs, { extend } from 'dayjs';
 import LocaleData from 'dayjs/plugin/localeData';
 import UTC from 'dayjs/plugin/utc';
 
-dayjs.extend(LocaleData);
-dayjs.extend(UTC);
+extend(LocaleData);
+extend(UTC);
+
 interface IDay {
   id: ReturnType<typeof uuid>;
   date: dayjs.Dayjs;
@@ -17,8 +18,6 @@ export class DateTime {
   static MONTHS = dayjs.monthsShort();
   static TODAY = dayjs.utc();
 
-  constructor() {}
-
   private uuid() {
     return uuid();
   }

src/helpers/error-handler.ts → src/lib/helpers/error-handler.ts

@@ -1,7 +1,9 @@
-type ErrorWithMessage = {
+interface ErrorWithMessage {
   message: string;
-};
-type ErrorDataWithMessage = { data: { message: string } };
+}
+interface ErrorDataWithMessage {
+  data: { message: string };
+}
 
 export function getErrorMessage(error: unknown) {
   return toErrorWithMessage(error).message;