Use user id param in api call routes (#19)

* Use user id param in api call routes

* Add missing hook dependency

src/components/calendar/CalendarCell.tsx

@@ -39,9 +39,7 @@ const CalendarCell = ({
   onClick,
   rangeStatus,
 }: CalendarCellProps) => {
-  const {
-    user: { token },
-  } = useUser();
+  const { user } = useUser();
   const calendarEventsContext = useCalendarEvents();
   const [active, setActive] = React.useState(false);
   const [current, setCurrent] = React.useState(false);
@@ -84,7 +82,7 @@ const CalendarCell = ({
     setEventIdBeingDeleted(calendarEventId);
 
     try {
-      await calendarService.destroyCalendarEvent(calendarEventId, token);
+      await calendarService.destroyCalendarEvent(calendarEventId, user);
       calendarEventsContext.removeCalendarEvent(calendarEventId);
       showSnackbar('Your habit entry has been deleted from the calendar.', {
         dismissible: true,

src/components/calendar/DayHabitModalDialog.tsx

@@ -29,9 +29,7 @@ const DayHabitModalDialog = ({
   onClose,
   date,
 }: DayHabitModalDialogProps) => {
-  const {
-    user: { token },
-  } = useUser();
+  const { user } = useUser();
   const { habits } = useHabits();
   const calendarEventsContext = useCalendarEvents();
   const [submitting, setSubmitting] = React.useState(false);
@@ -56,7 +54,7 @@ const DayHabitModalDialog = ({
       const newCalendarEvent = await calendarService.createCalendarEvent(
         date,
         selectedBadHabit as number,
-        token
+        user
       );
       calendarEventsContext.addCalendarEvent(newCalendarEvent);
       showSnackbar('Your habit entry has been added to the calendar!', {

src/components/habit/add-habit/AddHabitDialogButton.tsx

@@ -26,9 +26,7 @@ type AddHabitDialogButtonProps = {
 const AddHabitDialogButton = ({
   disabled = false,
 }: AddHabitDialogButtonProps) => {
-  const {
-    user: { token },
-  } = useUser();
+  const { user } = useUser();
   const [open, setOpen] = React.useState(false);
   const [habitName, setHabitName] = React.useState('');
   const [habitDescription, setHabitDescription] = React.useState('');
@@ -57,7 +55,7 @@ const AddHabitDialogButton = ({
         habitName,
         habitDescription,
         habitTrait as 'good' | 'bad',
-        token
+        user
       );
       habitsContext.addHabit(newHabit);
       showSnackbar('Your habit has been added!', {
@@ -101,7 +99,7 @@ const AddHabitDialogButton = ({
         variant="soft"
         startDecorator={<AddRounded />}
         onClick={handleDialogOpen}
-        disabled={disabled || !token}
+        disabled={disabled || !user.token}
       >
         Add habit
       </Button>

src/components/habit/edit-habit/EditHabitDialog.tsx

@@ -32,9 +32,7 @@ const EditHabitDialog = ({
   habit,
   onClose,
 }: EditHabitDialogProps) => {
-  const {
-    user: { token },
-  } = useUser();
+  const { user } = useUser();
   const [isOpen, setIsOpen] = React.useState(false);
   const [name, setName] = React.useState('');
   const [description, setDescription] = React.useState('');
@@ -91,7 +89,7 @@ const EditHabitDialog = ({
           description,
           trait: trait as 'good' | 'bad',
         },
-        token
+        user
       );
       habitsContext.updateHabit(updatedHabit);
       updateHabitInsideCalendarEvents(updatedHabit);

src/components/habit/view-habit/HabitItem.tsx

@@ -25,9 +25,7 @@ type HabitItemProps = {
 };
 
 const HabitItem = ({ habit, onEdit }: HabitItemProps) => {
-  const {
-    user: { token },
-  } = useUser();
+  const { user } = useUser();
   const [isBeingDeleted, setIsBeingDeleted] = React.useState(false);
   const habitsContext = useHabits();
   const { showSnackbar } = useSnackbar();
@@ -36,7 +34,7 @@ const HabitItem = ({ habit, onEdit }: HabitItemProps) => {
     setIsBeingDeleted(true);
 
     try {
-      await habitService.destroyHabit(habit.id, token);
+      await habitService.destroyHabit(habit.id, user);
       habitsContext.removeHabit(habit.id);
       showSnackbar('Your habit has been deleted!', {
         dismissible: true,

src/context/CalendarEvents/CalendarEventsProvider.tsx

@@ -13,10 +13,7 @@ type Props = {
 };
 
 const CalendarEventsProvider = ({ children }: Props) => {
-  const {
-    user: { token },
-    logout,
-  } = useUser();
+  const { user, logout } = useUser();
   const { showSnackbar } = useSnackbar();
   const [fetchingCalendarEvents, setFetchingCalendarEvents] =
     React.useState(false);
@@ -25,15 +22,15 @@ const CalendarEventsProvider = ({ children }: Props) => {
   );
 
   React.useEffect(() => {
-    if (!token) {
+    if (!user.token) {
       clearCalendarEvents();
       return undefined;
     }
 
     setFetchingCalendarEvents(true);
 
     calendarService
-      .getCalendarEvents(token)
+      .getCalendarEvents(user)
       .then((res) => {
         setCalendarEvents(res);
       })
@@ -51,7 +48,7 @@ const CalendarEventsProvider = ({ children }: Props) => {
       .finally(() => {
         setFetchingCalendarEvents(false);
       });
-  }, [token, logout, showSnackbar]);
+  }, [user, logout, showSnackbar]);
 
   const addCalendarEvent = (calendarEvent: CalendarEvent) => {
     setCalendarEvents((prevCalendarEvents) => [

src/context/Habits/HabitsProvider.tsx

@@ -7,31 +7,29 @@ type HabitsProviderProps = {
 };
 
 const HabitsProvider = ({ children }: HabitsProviderProps) => {
-  const {
-    user: { token },
-  } = useUser();
+  const { user } = useUser();
 
   const [fetchingHabits, setFetchingHabits] = React.useState(false);
   const [habits, setHabits] = React.useState<Habit[]>([]);
 
   React.useEffect(() => {
-    if (!token) {
+    if (!user.token) {
       clearHabits();
       return undefined;
     }
 
     setFetchingHabits(true);
 
     habitService
-      .getHabits(token)
+      .getHabits(user)
       .then((res) => {
         setHabits(res);
         setFetchingHabits(false);
       })
       .finally(() => {
         setFetchingHabits(false);
       });
-  }, [token]);
+  }, [user]);
 
   const addHabit = (habit: Habit) => {
     setHabits((prevHabits) => [...prevHabits, habit]);
@@ -44,6 +42,7 @@ const HabitsProvider = ({ children }: HabitsProviderProps) => {
   };
 
   const updateHabit = (habit: Habit) => {
+    console.log('ctx updateHabit', habit);
     setHabits((prevHabits) =>
       prevHabits.map((prevHabit) =>
         prevHabit.id === habit.id ? { ...prevHabit, ...habit } : prevHabit

src/services/calendar.ts

@@ -1,44 +1,44 @@
-import { CalendarEvent } from '@context';
+import { CalendarEvent, type LocalUser } from '@context';
 
 import { composeAuthorizationHeader, destroy, get, patch, post } from './http';
 
 export const createCalendarEvent = (
   date: Date,
   habitId: number,
-  accessToken: string
+  user: LocalUser
 ) => {
   return post<CalendarEvent>(
-    '/calendar-events',
+    `/users/${user.id}/calendar-events`,
     {
       date: date.toISOString(),
       habit: habitId,
     },
-    composeAuthorizationHeader(accessToken)
+    composeAuthorizationHeader(user.token)
   );
 };
 
-export const getCalendarEvents = (accessToken: string) => {
+export const getCalendarEvents = (user: LocalUser) => {
   return get<CalendarEvent[]>(
-    '/calendar-events',
-    composeAuthorizationHeader(accessToken)
+    `/users/${user.id}/calendar-events`,
+    composeAuthorizationHeader(user.token)
   );
 };
 
 export const updateCalendarEvent = (
   id: number,
   calendarEvent: Omit<CalendarEvent, 'id'>,
-  accessToken: string
+  user: LocalUser
 ) => {
   return patch<CalendarEvent>(
-    `/calendar-events/${id}`,
+    `/users/${user.id}/calendar-events/${id}`,
     calendarEvent,
-    composeAuthorizationHeader(accessToken)
+    composeAuthorizationHeader(user.token)
   );
 };
 
-export const destroyCalendarEvent = (id: number, accessToken: string) => {
+export const destroyCalendarEvent = (id: number, user: LocalUser) => {
   return destroy<CalendarEvent>(
-    `/calendar-events/${id}`,
-    composeAuthorizationHeader(accessToken)
+    `/users/${user.id}/calendar-events/${id}`,
+    composeAuthorizationHeader(user.token)
   );
 };

src/services/habit.ts

@@ -1,43 +1,46 @@
-import { Habit } from '@context';
+import { Habit, type LocalUser } from '@context';
 
 import { composeAuthorizationHeader, destroy, get, patch, post } from './http';
 
 export const createHabit = (
   name: string,
   description: string,
   trait: 'good' | 'bad',
-  accessToken: string
+  user: LocalUser
 ) => {
   return post<Habit>(
-    '/habits',
+    `/users/${user.id}/habits`,
     {
       name,
       description,
       trait,
     },
-    composeAuthorizationHeader(accessToken)
+    composeAuthorizationHeader(user.token)
   );
 };
 
-export const getHabits = (accessToken: string) => {
-  return get<Habit[]>('/habits', composeAuthorizationHeader(accessToken));
+export const getHabits = (user: LocalUser) => {
+  return get<Habit[]>(
+    `/users/${user.id}/habits`,
+    composeAuthorizationHeader(user.token)
+  );
 };
 
 export const updateHabit = (
   id: number,
   habit: Omit<Habit, 'id'>,
-  accessToken: string
+  user: LocalUser
 ) => {
   return patch<Habit>(
-    `/habits/${id}`,
+    `/users/${user.id}/habits/${id}`,
     habit,
-    composeAuthorizationHeader(accessToken)
+    composeAuthorizationHeader(user.token)
   );
 };
 
-export const destroyHabit = (id: number, accessToken: string) => {
+export const destroyHabit = (id: number, user: LocalUser) => {
   return destroy<Habit>(
-    `/habits/${id}`,
-    composeAuthorizationHeader(accessToken)
+    `/users/${user.id}/habits/${id}`,
+    composeAuthorizationHeader(user.token)
   );
 };