refactor: update types on the client

client/src/api/entries.ts

@@ -1,7 +1,8 @@
 import axios, { AxiosResponse } from "axios";
 
-import { BASE_URL, handleRequestError } from "~/utils";
-import { IEntry, Status } from "~/~/models/Entry";
+import { BASE_URL } from "~/utils/constants";
+import { handleRequestError } from "~/utils/handlers";
+import { IEntry, Status } from "~/utils/types";
 
 type UpdateResponse = {
   message: string;

client/src/api/tasks.ts

@@ -1,15 +1,13 @@
 import axios, { AxiosResponse } from "axios";
-import mongoose from "mongoose";
 
-import { BASE_URL, handleRequestError } from "~/utils";
-import { ITask } from "~/~/models/Task";
+import { BASE_URL } from "~/utils/constants";
+import { handleRequestError } from "~/utils/handlers";
+import { ITask } from "~/utils/types";
 
 type MessageResponse = {
   message: string;
 };
 
-type MongooseId = mongoose.Types.ObjectId;
-
 // Get user's tasks
 export async function getUserTasks() {
   try {
@@ -53,7 +51,7 @@ export async function createTask(title: string) {
 }
 
 // Update title
-export async function updateTask(taskId: MongooseId, title: string) {
+export async function updateTask(taskId: string, title: string) {
   try {
     const response: AxiosResponse<MessageResponse> = await axios.patch(
       `${BASE_URL}/tasks/${taskId}`,
@@ -73,7 +71,7 @@ export async function updateTask(taskId: MongooseId, title: string) {
 }
 
 // Delete
-export async function deleteTask(taskId: MongooseId) {
+export async function deleteTask(taskId: string) {
   try {
     const response: AxiosResponse<MessageResponse> = await axios.delete(
       `${BASE_URL}/tasks/${taskId}`,

client/src/api/users.ts

@@ -1,8 +1,8 @@
 import axios, { AxiosResponse } from "axios";
 
-import { BASE_URL, handleRequestError } from "~/utils";
-import { ITask } from "~/~/models/Task";
-import { IUser } from "~/~/models/User";
+import { BASE_URL } from "~/utils/constants";
+import { handleRequestError } from "~/utils/handlers";
+import { ITask, IUser } from "~/utils/types";
 
 export interface IMonthData {
   month: number;

client/src/components/CreateTaskForm.tsx

@@ -1,10 +1,8 @@
 import { FormEvent, useState } from "react";
 
-import { Input } from "./ui/Input";
-import { Button } from "./ui/Button";
-
+import { Input, Button } from "./ui";
 import { createTask } from "~/api/tasks";
-import { ITask } from "~/~/models/Task";
+import { ITask } from "~/utils/types";
 
 interface CreateTaskForm {
   handleOnCreate: (task: ITask) => void;

client/src/components/Entry.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useState } from "react";
 
 import { useAppContext, useMonthContext } from "~/hooks";
-import { cn, statusColor } from "~/utils";
-import { IEntry } from "~/~/models/Entry";
+import { cn, statusColor } from "~/utils/handlers";
+import { type IEntry } from "~/utils/types";
 
 interface EntryProps {
   entry: IEntry;

client/src/components/MonthCard.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useState } from "react";
-import mongoose from "mongoose";
 
 import { MonthCardDays } from "./MonthCardDays";
 import { MonthCardHeader } from "./MonthCardHeader";
@@ -10,11 +9,12 @@ import { CreateTaskForm } from "./CreateTaskForm";
 import { useAppContext, useEntries, useMonthRating } from "~/hooks";
 import { IMonthData } from "~/api/users";
 import { deleteTask } from "~/api/tasks";
-import { calculateStatusPercentage, filterDeletedRatings } from "~/utils";
-import { ITask } from "~/~/models/Task";
-import { Status } from "~/~/models/Entry";
 
-type MongooseId = mongoose.Types.ObjectId;
+import {
+  calculateStatusPercentage,
+  filterDeletedRatings,
+} from "~/utils/handlers";
+import { Status, type ITask } from "~/utils/types";
 
 interface MonthCardProps {
   year: number;
@@ -64,7 +64,7 @@ export function MonthCard({ year, monthData }: MonthCardProps) {
 
   // Delete
   async function handleDeleteTask(
-    taskId: MongooseId,
+    taskId: string,
     deletedTaskRatings: Status[],
   ) {
     const updatedTasks = monthTasks.filter((task) => task._id !== taskId);

client/src/components/MonthCardDays.tsx

@@ -1,5 +1,5 @@
 import { useAppContext } from "~/hooks";
-import { cn, getDaysInMonth } from "~/utils";
+import { cn, getDaysInMonth } from "~/utils/handlers";
 
 interface MonthCardDaysProps {
   year: number;

client/src/components/MonthCardHeader.tsx

@@ -1,4 +1,4 @@
-import { cn, getMonthFromIndex } from "~/utils";
+import { cn, getMonthFromIndex } from "~/utils/handlers";
 
 interface MonthCardHeaderProps {
   year: number;

client/src/components/Notice.tsx

@@ -1,4 +1,4 @@
-import { cn } from "~/utils";
+import { cn } from "~/utils/handlers";
 
 interface NoticeProps {
   text: string;

client/src/components/Rating.tsx

@@ -1,9 +1,8 @@
 import { Button } from "./ui/Button";
 
 import { useMonthContext } from "~/hooks";
-import { STATUSES } from "~/utils";
+import { Status, STATUSES } from "~/utils/types";
 import { updateEntryStatus } from "~/api/entries";
-import { Status } from "~/~/models/Entry";
 
 export function Rating() {
   const { selectedEntryId, setSelectedEntryId, setSelectedRating } =
@@ -13,7 +12,7 @@ export function Rating() {
     if (selectedEntryId) {
       setSelectedRating(status);
 
-      await updateEntryStatus(selectedEntryId, status);
+      await updateEntryStatus(String(selectedEntryId), status);
 
       setSelectedEntryId(null);
       setSelectedRating(null);

client/src/components/Task.tsx

@@ -1,22 +1,18 @@
 import { useState } from "react";
-import mongoose from "mongoose";
 
-import { Button } from "./ui/Button";
+import { Button } from "./ui";
 import { Entry } from "./Entry";
 
 import { useAppContext, useEntries } from "~/hooks";
 import { updateTask } from "~/api/tasks";
-import { ITask } from "~/~/models/Task";
-import { IEntry, Status } from "~/~/models/Entry";
-import { cn } from "~/utils";
-
-type MongooseId = mongoose.Types.ObjectId;
+import { cn } from "~/utils/handlers";
+import { IEntry, ITask, Status } from "~/utils/types";
 
 interface TaskProps {
   year: number;
   month: number;
   task: ITask;
-  onDelete: (id: MongooseId, deletedTaskRatings: Status[]) => void;
+  onDelete: (id: string, deletedTaskRatings: Status[]) => void;
 }
 
 // Task
@@ -41,7 +37,7 @@ export function Task({ task, year, month, onDelete }: TaskProps) {
       return;
     }
 
-    onDelete(task._id, taskRatings);
+    onDelete(String(task._id), taskRatings);
   }
 
   // Edit title

client/src/components/layouts/Header.tsx

@@ -1,7 +1,7 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
 
-import { Button } from "../ui/Button";
+import { Button } from "../ui";
 import { useAuthContext } from "~/hooks";
 
 export function Header() {

client/src/components/layouts/Login.tsx

@@ -4,8 +4,7 @@ import Link from "next/link";
 import axios from "axios";
 import jwt, { type JwtPayload } from "jsonwebtoken";
 
-import { Button } from "~/components/ui/Button";
-import { Input } from "~/components/ui/Input";
+import { Button, Input } from "~/components/ui";
 
 import { login } from "~/api/users";
 import { useAuthContext } from "~/hooks";

client/src/components/layouts/Register.tsx

@@ -1,9 +1,8 @@
-import Link from "next/link";
 import { useRouter } from "next/router";
 import { FormEvent, useState } from "react";
+import Link from "next/link";
 
-import { Button } from "~/components/ui/Button";
-import { Input } from "~/components/ui/Input";
+import { Button, Input } from "~/components/ui";
 
 import { createUser } from "~/api/users";
 

client/src/components/layouts/Timeline.tsx

@@ -1,8 +1,7 @@
 import { MonthCard } from "../MonthCard";
 import { Rating } from "../Rating";
 
-import { useAppContext } from "~/hooks";
-import { useUserYear } from "~/hooks";
+import { useAppContext, useUserYear } from "~/hooks";
 
 export function Timeline() {
   const { today } = useAppContext();

client/src/components/ui/Button.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 
-import { cn } from "~/utils";
+import { cn } from "~/utils/handlers";
 
 interface ButtonProps {
   children: ReactNode;

client/src/components/ui/Input.tsx

@@ -1,5 +1,6 @@
 import { ChangeEvent } from "react";
-import { cn } from "~/utils";
+
+import { cn } from "~/utils/handlers";
 
 interface InputProps {
   name: string;

client/src/components/ui/index.ts

@@ -0,0 +1,2 @@
+export * from "./Button";
+export * from "./Input";

client/src/context/monthContext.tsx

@@ -1,13 +1,10 @@
 import { createContext, ReactNode, useState } from "react";
-import mongoose from "mongoose";
 
-import { Status } from "~/~/models/Entry";
-
-type MongooseId = mongoose.Types.ObjectId;
+import { Status } from "~/utils/types";
 
 interface MonthContextProps {
-  selectedEntryId: MongooseId | null;
-  setSelectedEntryId: (entry: MongooseId | null) => void;
+  selectedEntryId: string | null;
+  setSelectedEntryId: (entry: string | null) => void;
   selectedRating: Status | null;
   setSelectedRating: (status: Status | null) => void;
 }
@@ -21,9 +18,7 @@ export const MonthContext = createContext<MonthContextProps | undefined>(
 );
 
 export function MonthContextProvider({ children }: MonthContextProviderProps) {
-  const [selectedEntryId, setSelectedEntryId] = useState<MongooseId | null>(
-    null,
-  );
+  const [selectedEntryId, setSelectedEntryId] = useState<string | null>(null);
   const [selectedRating, setSelectedRating] = useState<Status | null>(null);
 
   const value = {

client/src/hooks/context.ts

@@ -0,0 +1,39 @@
+import { useContext } from "react";
+
+import { AppContext, AuthContext, MonthContext } from "~/context";
+
+// App Context
+export function useAppContext() {
+  const context = useContext(AppContext);
+
+  if (!context) {
+    throw new Error(
+      "No context found. App's context must be used within a ContextProvider.",
+    );
+  }
+  return context;
+}
+
+// Auth Context
+export function useAuthContext() {
+  const context = useContext(AuthContext);
+
+  if (!context) {
+    throw new Error(
+      "No context found. App's context must be used within a AuthContextProvider.",
+    );
+  }
+  return context;
+}
+
+// Month Context
+export function useMonthContext() {
+  const context = useContext(MonthContext);
+
+  if (!context) {
+    throw new Error(
+      "No context found. Month context must be used within a ContextProvider.",
+    );
+  }
+  return context;
+}

client/src/hooks/index.ts

@@ -1,49 +1,3 @@
-import { useQuery } from "@tanstack/react-query";
-
-import { getEntries } from "~/api/entries";
-import { getUserTasks } from "~/api/tasks";
-import { getUserYear } from "~/api/users";
-
-export * from "./useAppContext";
-export * from "./useMonthContext";
+export * from "./context";
+export * from "./queries";
 export * from "./useMonthRating";
-export * from "./useAuthContext";
-
-// Year
-export function useUserYear(year: number) {
-  const { data, isLoading, isError } = useQuery({
-    queryKey: ["year"],
-    queryFn: () => getUserYear(year),
-  });
-
-  return { data, isLoading, isError };
-}
-
-// Tasks
-export function useTasks() {
-  const { data, isLoading, isError } = useQuery({
-    queryKey: ["tasks"],
-    queryFn: () => getUserTasks(),
-  });
-
-  return { data, isLoading, isError };
-}
-
-// Entries
-interface UseEntriesProps {
-  taskId?: string;
-  year: number;
-  month: number;
-  day?: number;
-}
-
-export function useEntries(props: UseEntriesProps) {
-  const { taskId, year, month, day } = props;
-
-  const { data, isLoading, isError } = useQuery({
-    queryKey: ["entires"],
-    queryFn: () => getEntries({ taskId, year, month, day }),
-  });
-
-  return { data, isLoading, isError };
-}