Merge pull request #29 from rezahedi/edit-stops

Add Note and Expense to each Stops in Plan Detail

Author: rezahedi

src/App.tsx

@@ -14,8 +14,6 @@ import {
   Bookmarked,
   Done,
   Profile,
-  CreateNew,
-  EditPlan,
   Settings,
 } from "@/pages/dashboard";
 import MainLayout from "@/Components/Layout/MainLayout";
@@ -54,12 +52,10 @@ function App() {
               }
             >
               <Route index element={<MyPlans />} />
-              <Route path=":planId" element={<EditPlan />} />
               <Route path="bookmarked" element={<Bookmarked />} />
               <Route path="done" element={<Done />} />
               <Route path="profile" element={<Profile />} />
               <Route path="settings" element={<Settings />} />
-              <Route path="create" element={<CreateNew />} />
             </Route>
             <Route path="*" element={<NotFound404 />} />
           </Route>

src/Components/Common/BookmarkButton.tsx

@@ -43,7 +43,12 @@ const BookmarkButton = ({
   };
 
   return (
-    <IconButton onClick={handleBookmark} variant="ghost" className={className}>
+    <IconButton
+      onClick={handleBookmark}
+      variant="ghost"
+      className={className}
+      title={bookmark ? "Remove Bookmark" : "Add Bookmark"}
+    >
       <BookmarkIcon
         className={bookmark ? "text-accent fill-accent" : "text-ring"}
       />

src/Components/Common/CitiesSection.tsx

@@ -2,10 +2,10 @@ import React, { useState, useEffect } from "react";
 import { Skeleton } from "@/Components/ui/skeleton";
 import { fetchData } from "@/util";
 import { Link } from "react-router-dom";
-import { CityType } from "@/context/PlanTypes";
+import { CityDetail } from "@/types";
 
 const CitiesSection = ({ title }: { title: string }) => {
-  const [cities, setCities] = useState<CityType[]>([]);
+  const [cities, setCities] = useState<CityDetail[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
 

src/Components/Footer.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from "react";
 import { fetchData } from "@/util";
-import { CityType } from "@/context/PlanTypes";
+import { CityDetail } from "@/types";
 import { Link } from "react-router-dom";
 
 function Footer() {
-  const [cities, setCities] = useState<CityType[]>([]);
+  const [cities, setCities] = useState<CityDetail[]>([]);
 
   useEffect(() => {
     const fetchCities = async () => {
@@ -79,7 +79,7 @@ function Footer() {
             <div className="text-sm">
               <ul className="list-none p-0 m-0 text-sm flex flex-col gap-2">
                 <li className="font-bold text-lg">Last Updated Cities</li>
-                {cities.map((city: CityType) => (
+                {cities.map((city: CityDetail) => (
                   <Link key={city.placeId} to={`/city/${city.placeId}`}>
                     <li>{city.name}</li>
                   </Link>

src/context/ItineraryContext.tsx

@@ -1,20 +1,21 @@
 import React, { createContext, useContext, useEffect, useState } from "react";
-import { Place } from "@/types";
-import { PlanType } from "./PlanTypes";
+import { Place, PlanDTO, PlanWithDetail } from "@/types";
 import { useAuth } from "./AuthContext";
 import { useParams } from "react-router-dom";
 import usePlanApi from "@/hooks/usePlanApi";
 import usePlanOptimistic from "@/hooks/usePlanOptimistic";
 
 type contextType = {
-  plan: PlanType | null;
+  plan: PlanWithDetail | null;
   setTitle: (title: string) => void;
   setDescription: (description: string) => void;
   addImage: (image: string) => void;
   setPolyline: (polyline: string) => void;
   addPlace: (place: Place) => void;
   removePlace: (placeId: string) => void;
-  createPlan: (plan: PlanType) => void;
+  setExpense: (placeId: string, expense: number) => void;
+  setNote: (placeId: string, note: string) => void;
+  createPlan: (plan: PlanDTO) => void;
   saving: boolean;
   loading: boolean;
   error: string | null;
@@ -25,7 +26,6 @@ const ItineraryContext = createContext<contextType | undefined>(undefined);
 const ItineraryProvider = ({ children }: { children: React.ReactNode }) => {
   const { plan, setPlan, saving, loading, createPlan, getPlan, updatePlan } =
     usePlanApi();
-  // const [optimisticPlan, setOptimisticPlan] = useState<PlanType | null>(null);
   const { optimisticPlan, dispatch } = usePlanOptimistic(null);
   const [error, setError] = useState<string | null>(null);
   const { token } = useAuth();
@@ -50,7 +50,13 @@ const ItineraryProvider = ({ children }: { children: React.ReactNode }) => {
     (async () => {
       const originalPlan = plan;
       // Replace plan's properties with whatever is in optimisticPlan
-      setPlan({ ...plan, ...optimisticPlan });
+      setPlan({
+        ...plan,
+        title: optimisticPlan.title || plan.title,
+        description: optimisticPlan.description || plan.description,
+        images: optimisticPlan.images || plan.images,
+        stops: optimisticPlan.stops || plan.stops,
+      });
       try {
         await updatePlan(planId, optimisticPlan);
       } catch (err: unknown) {
@@ -99,6 +105,26 @@ const ItineraryProvider = ({ children }: { children: React.ReactNode }) => {
     dispatch({ type: "removePlace", payload: placeId, init: plan.stops || [] });
   };
 
+  const setExpense = (placeId: string, expense: number) => {
+    if (!plan || !placeId) return;
+
+    dispatch({
+      type: "setExpense",
+      payload: { placeId, expense },
+      init: plan.stops || [],
+    });
+  };
+
+  const setNote = (placeId: string, note: string) => {
+    if (!plan || !placeId) return;
+
+    dispatch({
+      type: "setNote",
+      payload: { placeId, note },
+      init: plan.stops || [],
+    });
+  };
+
   return (
     <ItineraryContext.Provider
       value={{
@@ -109,6 +135,8 @@ const ItineraryProvider = ({ children }: { children: React.ReactNode }) => {
         addImage,
         addPlace,
         removePlace,
+        setExpense,
+        setNote,
         createPlan,
         saving,
         loading,

src/context/PlanTypes.ts

@@ -1,16 +1,16 @@
 import { useAuth } from "@/context/AuthContext";
-import { PlanType } from "@/context/PlanTypes";
+import { PlanDTO, PlanWithDetail } from "@/types";
 import { useState } from "react";
 
 const API_BASE_URL = `${import.meta.env.VITE_API_BASE_URL}/api/v1`;
 
 export default function usePlanApi() {
-  const [plan, setPlan] = useState<PlanType | null>(null);
+  const [plan, setPlan] = useState<PlanWithDetail | null>(null);
   const [saving, setSaving] = useState<boolean>(false);
   const [loading, setLoading] = useState<boolean>(false);
   const { token } = useAuth();
 
-  const createPlan = async (plan: PlanType) => {
+  const createPlan = async (plan: PlanDTO) => {
     if (!token) {
       setPlan(null);
       throw new Error("You must be logged in to create a plan");
@@ -65,7 +65,7 @@ export default function usePlanApi() {
     }
   };
 
-  const updatePlan = async (planId: string, planData: PlanType) => {
+  const updatePlan = async (planId: string, planData: Partial<PlanDTO>) => {
     if (!token) {
       setPlan(null);
       throw new Error("You must be logged in to edit a plan");

src/hooks/usePlanApi.ts

@@ -1,6 +1,9 @@
-import { PlaceType, PlanType } from "@/context/PlanTypes";
+import { Place } from "./../types/index";
+import { PlanDTO } from "@/types";
 import { useReducer } from "react";
 
+type PartialPlanDTO = Partial<PlanDTO>;
+
 type Action =
   | {
       type: "setTitle" | "setDescription";
@@ -14,15 +17,28 @@ type Action =
   | {
       type: "removePlace";
       payload: string;
-      init: PlaceType[];
+      init: Place[];
     }
   | {
       type: "addPlace";
-      payload: PlaceType;
-      init: PlaceType[];
+      payload: Place;
+      init: Place[];
+    }
+  | {
+      type: "setExpense";
+      payload: { placeId: string; expense: number };
+      init: Place[];
+    }
+  | {
+      type: "setNote";
+      payload: { placeId: string; note: string };
+      init: Place[];
     };
 
-const reducer = (state: PlanType | null, action: Action): PlanType | null => {
+const reducer = (
+  state: PartialPlanDTO | null,
+  action: Action,
+): PartialPlanDTO | null => {
   switch (action.type) {
     case "setTitle":
       return {
@@ -65,12 +81,44 @@ const reducer = (state: PlanType | null, action: Action): PlanType | null => {
       };
     }
 
+    case "setExpense": {
+      let stops = [...(state?.stops || action.init)];
+
+      return {
+        ...state,
+        stops: stops.map((p) =>
+          p.placeId === action.payload.placeId
+            ? {
+                ...p,
+                expense: action.payload.expense,
+              }
+            : p,
+        ),
+      };
+    }
+
+    case "setNote": {
+      let stops = [...(state?.stops || action.init)];
+
+      return {
+        ...state,
+        stops: stops.map((p) =>
+          p.placeId === action.payload.placeId
+            ? {
+                ...p,
+                note: action.payload.note,
+              }
+            : p,
+        ),
+      };
+    }
+
     default:
       return state;
   }
 };
 
-export default function usePlanOptimistic(init: PlanType | null) {
+export default function usePlanOptimistic(init: PlanDTO | null) {
   const [optimisticPlan, dispatch] = useReducer(reducer, init);
 
   return { optimisticPlan, dispatch };

src/hooks/usePlanOptimistic.ts

@@ -6,7 +6,7 @@ import { fetchData } from "@/util";
 import Pagination from "@/Components/Common/Pagination";
 import PlanCardSkeleton from "@/Components/Common/PlanCardSkeleton";
 import { useAuth } from "@/context/AuthContext";
-import { Plan, City } from "@/types";
+import { Plan, CityDetail } from "@/types";
 import Title from "@/Components/Header/Title";
 
 const PAGE_SIZE = 8;
@@ -18,7 +18,7 @@ const CityPage = () => {
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [plans, setPlans] = useState<Plan[]>([]);
   const [pagesCount, setPagesCount] = useState<number>(0);
-  const [city, setCity] = useState<City | null>(null);
+  const [city, setCity] = useState<CityDetail | null>(null);
   const [error, setError] = useState<string | null>(null);
   const { token } = useAuth();
 

src/pages/CityPage.tsx

@@ -2,11 +2,11 @@ import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import { ChevronRightIcon } from "lucide-react";
 import PopularCities from "./PopularCities";
-import { CityType } from "@/context/PlanTypes";
 import { fetchData } from "@/util";
+import { CityDetail } from "@/types";
 
 const ExploreBlock = () => {
-  const [cities, setCities] = useState<CityType[]>([]);
+  const [cities, setCities] = useState<CityDetail[]>([]);
 
   useEffect(() => {
     (async () => {