chore: replace magic numbers by functional values,

standardise api call with fetchApi instead of fetch + injected url,
refactor Modal usage with custom hook

Author: SaboniAmine

webapp/src/app/(dashboard)/[organizationId]/members/members-list.tsx

@@ -10,6 +10,7 @@ import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { z } from "zod";
 import { toast } from "sonner";
+import { fetchApi } from "@/utils/api";
 
 export default function MembersList({
     users,
@@ -44,36 +45,17 @@ export default function MembersList({
 
             await toast
                 .promise(
-                    fetch(
-                        `${process.env.NEXT_PUBLIC_API_URL}/organizations/${organizationId}/add-user`,
+                    fetchApi(
+                        `/organizations/${organizationId}/add-user`,
                         {
                             method: "POST",
-                            headers: {
-                                Accept: "application/json",
-                                "Content-Type": "application/json",
-                            },
                             body: body,
                         },
                     ).then(async (result) => {
-                        const data = await result.json();
-                        if (result.status !== 200) {
-                            const errorObject = data.detail;
-                            let errorMessage = "Failed to add user";
-
-                            if (
-                                Array.isArray(errorObject) &&
-                                errorObject.length > 0
-                            ) {
-                                errorMessage = errorObject
-                                    .map((error: any) => error.msg)
-                                    .join("\n");
-                            } else if (errorObject) {
-                                errorMessage = JSON.stringify(errorObject);
-                            }
-
-                            throw new Error(errorMessage);
+                        if (!result) {
+                            throw new Error("Failed to add user");
                         }
-                        return data;
+                        return result;
                     }),
                     {
                         loading: `Adding user ${email}...`,

webapp/src/app/(dashboard)/[organizationId]/page.tsx

@@ -11,6 +11,7 @@ import {
     getEquivalentCitizenPercentage,
     getEquivalentTvTime,
 } from "@/helpers/constants";
+import { REFRESH_INTERVAL_ONE_MINUTE, THIRTY_DAYS_MS, SECONDS_PER_DAY } from "@/helpers/time-constants";
 import { fetcher } from "@/helpers/swr";
 import { getOrganizationEmissionsByProject } from "@/server-functions/organizations";
 import { Organization } from "@/types/organization";
@@ -29,12 +30,12 @@ export default function OrganizationPage({
         isLoading,
         error,
     } = useSWR<Organization>(`/organizations/${organizationId}`, fetcher, {
-        refreshInterval: 1000 * 60, // Refresh every minute
+        refreshInterval: REFRESH_INTERVAL_ONE_MINUTE,
     });
 
     const today = new Date();
     const [date, setDate] = useState<DateRange | undefined>({
-        from: new Date(today.getTime() - 30 * 24 * 60 * 60 * 1000),
+        from: new Date(today.getTime() - THIRTY_DAYS_MS),
         to: today,
     });
     const [organizationReport, setOrganizationReport] = useState<
@@ -86,7 +87,7 @@ export default function OrganizationPage({
             label: "days",
             value: organizationReport?.duration
                 ? parseFloat(
-                      (organizationReport.duration / 86400, 0).toFixed(2),
+                      (organizationReport.duration / SECONDS_PER_DAY).toFixed(2),
                   )
                 : 0,
         },

webapp/src/app/(dashboard)/[organizationId]/projects/page.tsx

@@ -10,6 +10,8 @@ import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import { Table, TableBody } from "@/components/ui/table";
 import { fetcher } from "@/helpers/swr";
+import { REFRESH_INTERVAL_ONE_MINUTE } from "@/helpers/time-constants";
+import { useModal } from "@/hooks/useModal";
 import { getProjects, deleteProject } from "@/server-functions/projects";
 import { Project } from "@/types/project";
 import { use, useEffect, useState } from "react";
@@ -22,15 +24,15 @@ export default function ProjectsPage({
     params: Promise<{ organizationId: string }>;
 }) {
     const { organizationId } = use(params);
-    const [isModalOpen, setIsModalOpen] = useState(false);
+    const createModal = useModal();
+    const deleteModal = useModal();
     const [projectList, setProjectList] = useState<Project[]>([]);
-    const [deleteModalOpen, setDeleteModalOpen] = useState(false);
     const [projectToDelete, setProjectToDelete] = useState<Project | null>(
         null,
     );
 
     const handleClick = async () => {
-        setIsModalOpen(true);
+        createModal.open();
     };
 
     const refreshProjectList = async () => {
@@ -41,7 +43,7 @@ export default function ProjectsPage({
 
     const handleDeleteClick = (project: Project) => {
         setProjectToDelete(project);
-        setDeleteModalOpen(true);
+        deleteModal.open();
     };
 
     const handleDeleteConfirm = async (projectId: string) => {
@@ -61,7 +63,7 @@ export default function ProjectsPage({
         error,
         isLoading,
     } = useSWR<Project[]>(`/projects?organization=${organizationId}`, fetcher, {
-        refreshInterval: 1000 * 60, // Refresh every minute
+        refreshInterval: REFRESH_INTERVAL_ONE_MINUTE,
     });
 
     useEffect(() => {
@@ -104,8 +106,8 @@ export default function ProjectsPage({
                     </Button>
                     <CreateProjectModal
                         organizationId={organizationId}
-                        isOpen={isModalOpen}
-                        onClose={() => setIsModalOpen(false)}
+                        isOpen={createModal.isOpen}
+                        onClose={createModal.close}
                         onProjectCreated={refreshProjectList}
                     />
                 </div>
@@ -141,8 +143,8 @@ export default function ProjectsPage({
                 </Card>
                 {projectToDelete && (
                     <DeleteProjectModal
-                        open={deleteModalOpen}
-                        onOpenChange={setDeleteModalOpen}
+                        open={deleteModal.isOpen}
+                        onOpenChange={deleteModal.setIsOpen}
                         projectName={projectToDelete.name}
                         projectId={projectToDelete.id}
                         onDelete={handleDeleteConfirm}

webapp/src/app/(dashboard)/profile/page.tsx

@@ -4,23 +4,15 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { fiefAuth } from "@/helpers/fief";
 import { User } from "@/types/user";
+import { fetchApiServer } from "@/helpers/api-server";
 
 async function getUser(): Promise<User | null> {
     const userId = await fiefAuth.getUserId();
     if (!userId) {
         return null;
     }
-    const res = await fetch(
-        `${process.env.NEXT_PUBLIC_API_URL}/users/${userId}`,
-    );
-
-    if (!res.ok) {
-        // This will activate the closest `error.js` Error Boundary
-        console.error("Failed to fetch user", res.statusText);
-        return null;
-    }
 
-    return res.json();
+    return await fetchApiServer<User>(`/users/${userId}`);
 }
 
 export default async function ProfilePage() {

webapp/src/components/navbar.tsx

@@ -25,6 +25,7 @@ import {
 import CreateOrganizationModal from "./createOrganizationModal";
 import { getOrganizations } from "@/server-functions/organizations";
 import { Button } from "./ui/button";
+import { useModal } from "@/hooks/useModal";
 
 const USER_PROFILE_URL = process.env.NEXT_PUBLIC_FIEF_BASE_URL; // Redirect to Fief profile to handle profile updates there
 export default function NavBar({
@@ -40,7 +41,7 @@ export default function NavBar({
     const [selectedOrg, setSelectedOrg] = useState<string | null>(null);
     const iconStyles = "h-4 w-4 flex-shrink-0 text-muted-foreground";
     const pathname = usePathname();
-    const [isNewOrgModalOpen, setNewOrgModalOpen] = useState(false);
+    const newOrgModal = useModal();
     const [organizationList, setOrganizationList] = useState<
         Organization[] | undefined
     >([]);
@@ -120,7 +121,7 @@ export default function NavBar({
     }, [pathname, organizationList, selectedOrg]);
 
     const handleNewOrgClick = async () => {
-        setNewOrgModalOpen(true);
+        newOrgModal.open();
         setDropdownOpen(false); // Close the dropdown menu
     };
 
@@ -247,8 +248,8 @@ export default function NavBar({
                             </Select>
                         )}
                         <CreateOrganizationModal
-                            isOpen={isNewOrgModalOpen}
-                            onClose={() => setNewOrgModalOpen(false)}
+                            isOpen={newOrgModal.isOpen}
+                            onClose={newOrgModal.close}
                             onOrganizationCreated={refreshOrgList}
                         />
                         <NavItem

webapp/src/components/project-dashboard.tsx

@@ -18,6 +18,7 @@ import { toast } from "sonner";
 import ProjectDashboardBase from "./project-dashboard-base";
 import ProjectSettingsModal from "./project-settings-modal";
 import ShareProjectButton from "./share-project-button";
+import { useModal } from "@/hooks/useModal";
 
 export default function ProjectDashboard({
     project,
@@ -35,7 +36,7 @@ export default function ProjectDashboard({
     onSettingsClick,
     isLoading,
 }: ProjectDashboardProps) {
-    const [isSettingsModalOpen, setIsSettingsModalOpen] = useState(false);
+    const settingsModal = useModal();
     const [isExporting, setIsExporting] = useState(false);
 
     const handleJsonExport = () => {
@@ -163,7 +164,7 @@ export default function ProjectDashboard({
                     className="p-1 rounded-full"
                     variant="outline"
                     size="icon"
-                    onClick={() => setIsSettingsModalOpen(true)}
+                    onClick={settingsModal.open}
                 >
                     <SettingsIcon className="h-5 w-5" />
                 </Button>
@@ -192,8 +193,8 @@ export default function ProjectDashboard({
             />
 
             <ProjectSettingsModal
-                open={isSettingsModalOpen}
-                onOpenChange={setIsSettingsModalOpen}
+                open={settingsModal.isOpen}
+                onOpenChange={settingsModal.setIsOpen}
                 project={project}
                 onProjectUpdated={() => {
                     // Call the original onSettingsClick to refresh the data

webapp/src/helpers/dashboard-calculations.ts

@@ -4,6 +4,7 @@ import {
     getEquivalentCitizenPercentage,
     getEquivalentTvTime,
 } from "./constants";
+import { SECONDS_PER_DAY } from "./time-constants";
 
 export type RadialChartData = {
     energy: { label: string; value: number };
@@ -44,7 +45,7 @@ export function calculateRadialChartData(
             label: "days",
             value: parseFloat(
                 report
-                    .reduce((n, { duration }) => n + duration / 86400, 0)
+                    .reduce((n, { duration }) => n + duration / SECONDS_PER_DAY, 0)
                     .toFixed(2),
             ),
         },

webapp/src/helpers/time-constants.ts

@@ -0,0 +1,28 @@
+/**
+ * Time-related constants to avoid magic numbers
+ */
+
+// Base time units in milliseconds
+export const MILLISECONDS_PER_SECOND = 1000;
+export const SECONDS_PER_MINUTE = 60;
+export const MINUTES_PER_HOUR = 60;
+export const HOURS_PER_DAY = 24;
+export const DAYS_PER_WEEK = 7;
+export const WEEKS_PER_YEAR = 52;
+
+// Composite time units in milliseconds
+export const ONE_SECOND_MS = MILLISECONDS_PER_SECOND;
+export const ONE_MINUTE_MS = ONE_SECOND_MS * SECONDS_PER_MINUTE;
+export const ONE_HOUR_MS = ONE_MINUTE_MS * MINUTES_PER_HOUR;
+export const ONE_DAY_MS = ONE_HOUR_MS * HOURS_PER_DAY;
+export const ONE_WEEK_MS = ONE_DAY_MS * DAYS_PER_WEEK;
+
+// Common time intervals
+export const THIRTY_DAYS_MS = 30 * ONE_DAY_MS;
+
+// Seconds conversions
+export const SECONDS_PER_HOUR = SECONDS_PER_MINUTE * MINUTES_PER_HOUR;
+export const SECONDS_PER_DAY = SECONDS_PER_HOUR * HOURS_PER_DAY;
+
+// Common refresh intervals
+export const REFRESH_INTERVAL_ONE_MINUTE = ONE_MINUTE_MS;

webapp/src/hooks/useModal.ts

@@ -0,0 +1,18 @@
+import { useCallback, useState } from "react";
+
+/**
+ * Custom hook for managing modal open/close state
+ * Reduces boilerplate for modal state management
+ *
+ * @param defaultOpen - Initial open state (default: false)
+ * @returns Object with isOpen state and open/close/toggle functions
+ */
+export function useModal(defaultOpen = false) {
+    const [isOpen, setIsOpen] = useState(defaultOpen);
+
+    const open = useCallback(() => setIsOpen(true), []);
+    const close = useCallback(() => setIsOpen(false), []);
+    const toggle = useCallback(() => setIsOpen((prev) => !prev), []);
+
+    return { isOpen, open, close, toggle, setIsOpen };
+}

webapp/src/server-functions/experiments.ts

@@ -6,33 +6,26 @@ import { DateRange } from "react-day-picker";
 export async function createExperiment(
     experiment: Experiment,
 ): Promise<Experiment> {
-    const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/experiments`, {
+    const result = await fetchApi<Experiment>("/experiments", {
         method: "POST",
-        headers: {
-            "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-            ...experiment,
-        }),
+        body: JSON.stringify(experiment),
     });
 
-    if (!res.ok) {
+    if (!result) {
         throw new Error("Failed to create experiment");
     }
 
-    const result = await res.json();
     return result;
 }
 export async function getExperiments(projectId: string): Promise<Experiment[]> {
-    const res = await fetch(
-        `${process.env.NEXT_PUBLIC_API_URL}/projects/${projectId}/experiments`,
+    const result = await fetchApi<Experiment[]>(
+        `/projects/${projectId}/experiments`,
     );
 
-    if (!res.ok) {
-        throw new Error("Failed to fetch experiments");
+    if (!result) {
+        return [];
     }
 
-    const result = await res.json();
     return result.map((experiment: Experiment) => {
         return {
             id: experiment.id,