Fix expense date resetting to today when editing (#167)

Author: WinnieTheShoe

src/components/AddExpense/AddExpensePage.tsx

@@ -111,7 +111,6 @@ export const AddOrEditExpensePage: React.FC<{
   enableSendingInvites: boolean;
   expenseId?: string;
 }> = ({ isStorageConfigured, enableSendingInvites, expenseId }) => {
-  const [date, setDate] = React.useState<Date | undefined>(new Date());
   const [open, setOpen] = React.useState(false);
 
   const showFriends = useAddExpenseStore((s) => s.showFriends);
@@ -123,6 +122,7 @@ export const AddOrEditExpensePage: React.FC<{
   const description = useAddExpenseStore((s) => s.description);
   const isFileUploading = useAddExpenseStore((s) => s.isFileUploading);
   const amtStr = useAddExpenseStore((s) => s.amountStr);
+  const expenseDate = useAddExpenseStore((s) => s.expenseDate);
 
   const {
     setCurrency,
@@ -132,6 +132,7 @@ export const AddOrEditExpensePage: React.FC<{
     setAmountStr,
     resetState,
     setSplitScreenOpen,
+    setExpenseDate,
   } = useAddExpenseStore((s) => s.actions);
 
   const addExpenseMutation = api.user.addOrEditExpense.useMutation();
@@ -173,7 +174,7 @@ export const AddOrEditExpensePage: React.FC<{
           paidBy: paidBy.id,
           category,
           fileKey,
-          expenseDate: date,
+          expenseDate,
           expenseId,
         },
         {
@@ -202,7 +203,7 @@ export const AddOrEditExpensePage: React.FC<{
           paidBy: paidBy.id,
           category,
           fileKey,
-          expenseDate: date,
+          expenseDate,
         },
         {
           onSuccess: (d) => {
@@ -385,23 +386,23 @@ export const AddOrEditExpensePage: React.FC<{
                           variant="ghost"
                           className={cn(
                             ' justify-start px-0 text-left font-normal',
-                            !date && 'text-muted-foreground',
+                            !expenseDate && 'text-muted-foreground',
                           )}
                         >
                           <CalendarIcon className="mr-2 h-6 w-6 text-cyan-500" />
-                          {date ? (
-                            format(date, 'yyyy-MM-dd') === format(new Date(), 'yyyy-MM-dd') ? (
+                          {expenseDate ? (
+                            format(expenseDate, 'yyyy-MM-dd') === format(new Date(), 'yyyy-MM-dd') ? (
                               'Today'
                             ) : (
-                              format(date, 'MMM dd')
+                              format(expenseDate, 'MMM dd')
                             )
                           ) : (
                             <span>Pick a date</span>
                           )}
                         </Button>
                       </PopoverTrigger>
                       <PopoverContent className="w-auto p-0">
-                        <Calendar mode="single" selected={date} onSelect={setDate} initialFocus />
+                        <Calendar mode="single" selected={expenseDate} onSelect={setExpenseDate} initialFocus />
                       </PopoverContent>
                     </Popover>
                   </div>

src/pages/add.tsx

@@ -26,6 +26,7 @@ const AddPage: NextPageWithUser<{
     setPaidBy,
     setAmountStr,
     setSplitType,
+    setExpenseDate,
   } = useAddExpenseStore((s) => s.actions);
   const currentUser = useAddExpenseStore((s) => s.currentUser);
 
@@ -118,6 +119,7 @@ const AddPage: NextPageWithUser<{
       setAmount(toFixedNumber(expenseQuery.data.amount));
       setSplitType(expenseQuery.data.splitType);
       useAddExpenseStore.setState({ showFriends: false });
+      setExpenseDate(expenseQuery.data.expenseDate);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [_expenseId, expenseQuery.data]);

src/store/addStore.ts

@@ -21,6 +21,7 @@ interface AddExpenseState {
   fileKey?: string;
   canSplitScreenClosed: boolean;
   splitScreenOpen: boolean;
+  expenseDate: Date | undefined;
   actions: {
     setAmount: (amount: number) => void;
     setAmountStr: (amountStr: string) => void;
@@ -40,6 +41,7 @@ interface AddExpenseState {
     setFileKey: (fileKey: string) => void;
     resetState: () => void;
     setSplitScreenOpen: (splitScreenOpen: boolean) => void;
+    setExpenseDate: (expenseDate: Date | undefined) => void;
   };
 }
 
@@ -60,6 +62,7 @@ export const useAddExpenseStore = create<AddExpenseState>()((set) => ({
   fileKey: undefined,
   canSplitScreenClosed: true,
   splitScreenOpen: false,
+  expenseDate: undefined,
   actions: {
     setAmount: (amount) =>
       set((s) => {
@@ -181,6 +184,7 @@ export const useAddExpenseStore = create<AddExpenseState>()((set) => ({
       }));
     },
     setSplitScreenOpen: (splitScreenOpen) => set({ splitScreenOpen }),
+    setExpenseDate: (expenseDate) => set({ expenseDate }),
   },
 }));