Chore/front cleaning

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,14 @@ export default function MembersList({
 
             await toast
                 .promise(
-                    fetch(
-                        `${process.env.NEXT_PUBLIC_API_URL}/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);
+                    fetchApi(`/organizations/${organizationId}/add-user`, {
+                        method: "POST",
+                        body: body,
+                    }).then(async (result) => {
+                        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,11 @@ 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 +34,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 +91,9 @@ 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/[projectId]/settings/page.tsx

@@ -16,14 +16,11 @@ async function updateProjectAction(projectId: string, formData: FormData) {
     const description = formData.get("description") as string;
     const isPublic = formData.has("isPublic");
 
-    console.log("SAVING PROJECT:", { name, description, public: isPublic });
-
-    const response = await updateProject(projectId, {
+    await updateProject(projectId, {
         name,
         description,
         public: isPublic,
     });
-    console.log("RESPONSE:", response);
 
     revalidatePath(`/projects/${projectId}/settings`);
 }

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,16 @@ 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 () => {
@@ -61,7 +64,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 +107,8 @@ export default function ProjectsPage({
                     </Button>
                     <CreateProjectModal
                         organizationId={organizationId}
-                        isOpen={isModalOpen}
-                        onClose={() => setIsModalOpen(false)}
+                        isOpen={createModal.isOpen}
+                        onClose={createModal.close}
                         onProjectCreated={refreshProjectList}
                     />
                 </div>

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/createExperimentModal.tsx

@@ -27,7 +27,6 @@ export default function CreateExperimentModal({
     onClose: () => void;
     onExperimentCreated: () => void;
 }) {
-    console.log("projectId", projectId);
     const [isCopied, setIsCopied] = useState(false);
     const [isSaving, setIsSaving] = useState(false);
     const [isCreated, setIsCreated] = useState(false);
@@ -74,7 +73,6 @@ export default function CreateExperimentModal({
         setIsSaving(true);
 
         try {
-            console.log("experimentData", experimentData);
             const newExperiment = await createExperiment(experimentData);
             setCreatedExperiment(newExperiment);
             setIsCreated(true);

webapp/src/components/createProjectModal.tsx

@@ -36,8 +36,6 @@ const CreateProjectModal: React.FC<ModalProps> = ({
         name: "",
         description: "",
     });
-    const [isCreated, setIsCreated] = useState(false);
-    const [createdProject, setCreatedProject] = useState<Project | null>(null);
     const [isLoading, setIsLoading] = useState(false);
 
     const handleSave = async () => {
@@ -49,8 +47,6 @@ const CreateProjectModal: React.FC<ModalProps> = ({
                         organizationId,
                         formData,
                     );
-                    setCreatedProject(newProject);
-                    setIsCreated(true);
                     await onProjectCreated(); // Call the callback to refresh the project list
                     handleClose(); // Automatically close the modal after successful creation
                     return newProject; // Return for the success message
@@ -72,8 +68,6 @@ const CreateProjectModal: React.FC<ModalProps> = ({
     const handleClose = () => {
         // Reset state when closing
         setFormData({ name: "", description: "" });
-        setIsCreated(false);
-        setCreatedProject(null);
         onClose();
     };
 

webapp/src/components/date-range-picker.tsx

@@ -69,7 +69,6 @@ export function DateRangePicker({ date, onDateChange }: DateRangePickerProps) {
                         defaultMonth={date?.from}
                         selected={tempDateRange}
                         onSelect={(range) => {
-                            console.log("onSelect called with:", range);
                             setTempDateRange(range);
                         }}
                         numberOfMonths={2}

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/components/ui/calendar.tsx

@@ -59,9 +59,7 @@ function Calendar({
                 Chevron: ({ className, orientation, ...props }) => {
                     const Icon =
                         orientation === "left" ? ChevronLeft : ChevronRight;
-                    return (
-                        <Icon className={cn("h-4 w-4", className)} {...props} />
-                    );
+                    return <Icon className={cn("h-4 w-4", className)} {...props} />;
                 },
             }}
             {...props}

webapp/src/helpers/api-client.ts

@@ -36,7 +36,7 @@ export async function fetchApiClient<T>(
         } catch (e) {
             // Ignore JSON parsing errors
         }
-        console.log(errorMessage);
+        console.error(errorMessage);
         return null;
     }