API modifications'

web/api/config.tsx

@@ -5,4 +5,7 @@ const apiUrl = process.env.API_URL || "http://localhost:8081";
 // For useSWR
 const fetcher = (url: string) => axios.get(url).then((res) => res.data);
 
-export { apiUrl, fetcher };
+const apiInstance = axios.create({
+  baseURL: process.env.API_URL || "http://localhost:8081",
+});
+export { apiUrl, fetcher, apiInstance };

web/api/dto.ts

@@ -20,3 +20,8 @@ export type Task = {
 };
 
 export type Tasks = Task[];
+
+export type CreateProjectRequest = {
+  name: string;
+  description: string;
+};

web/components/layout/layout-navbar/components/navbar.button.tsx → web/components/layout/layout-navbar/navbar.button.tsx

@@ -41,7 +41,9 @@ const NavbarButton: React.FC<NavbarButtonProps> = ({
         <ThemeIcon color={color} variant="light">
           {icon}
         </ThemeIcon>
-        <Text size="sm">{label}</Text>
+        <Text lineClamp={1} size="sm">
+          {label}
+        </Text>
       </Group>
     </UnstyledButton>
   );

web/components/layout/layout-navbar/sections/actions.section.tsx

@@ -2,7 +2,7 @@ import { Navbar, Title } from "@mantine/core";
 import { useModals } from "@mantine/modals";
 import { FolderPlus, Note } from "tabler-icons-react";
 
-import NavbarButton from "../components/navbar.button";
+import NavbarButton from "../navbar.button";
 
 const ActionsSection: React.FC = () => {
   const modals = useModals();

web/components/layout/layout-navbar/sections/projects.section.tsx

@@ -1,4 +1,4 @@
-import NavbarButton from "../components/navbar.button";
+import NavbarButton from "../navbar.button";
 import Link from "next/link";
 import {
   Title,

web/hooks/useCreateProject.tsx

@@ -1,22 +1,16 @@
 import { useMutation } from "react-query";
-import { Project } from "../api/dto";
-import api from "../config/api";
+import { apiInstance } from "../api/config";
+import { CreateProjectRequest, Project } from "../api/dto";
 
-interface CreateProjectArgs {
-  name: string;
-  description: string;
-}
-
-const createProject = ({ name, description }: CreateProjectArgs) => {
-  return api
+const createProject = ({ name, description }: CreateProjectRequest) => {
+  return apiInstance
     .post("/project", { name, description })
     .then((res) => res.data) as Promise<Project>;
 };
 
 const useCreateProject = () => {
-  return useMutation(
-    (formData: CreateProjectArgs) => createProject(formData),
-    {}
+  return useMutation((formData: CreateProjectRequest) =>
+    createProject(formData)
   );
 };
 

web/hooks/useCreateTask.tsx

@@ -0,0 +1,4 @@
+interface CreateTaskArgs {
+  name: string;
+  description: string;
+}

web/hooks/useGetAllTasksByProject.tsx

@@ -8,7 +8,7 @@ interface useGetAllTasksByProjectProps {
 
 const useGetAllTasksByProject = ({ id }: useGetAllTasksByProjectProps) => {
   const url = `${apiUrl}/project/${id}/tasks`;
-  const { data, error } = useSWR<Tasks>(id ? url : null, id ? fetcher : null);
+  const { data, error } = useSWR<Tasks>(url, fetcher);
 
   return {
     tasks: data,

web/hooks/useGetProject.tsx

@@ -8,7 +8,7 @@ interface useGetProjectProps {
 
 const useGetProject = ({ id }: useGetProjectProps) => {
   const url = `${apiUrl}/project/${id}`;
-  const { data, error } = useSWR<Project>(id ? url : null, id ? fetcher : null);
+  const { data, error } = useSWR<Project>(url, fetcher);
   return {
     project: data,
     isLoading: !error && !data,