Build a Finance SaaS Platform -20 (Update Transaction Data)

Add Select Account Componet

Add features/accounts/hooks/use-select-account.tsx

import { useRef, useState } from "react";

import { useGetAccounts } from "@/features/accounts/api/use-get-accounts";
import { useCreateAccount } from "@/features/accounts/api/use-create-account";

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle
} from "@/components/ui/dialog";

import { Button } from "@/components/ui/button";
import { Select } from "@/components/select";

export const useSelectAccount = (): [()=> JSX.Element,()=> Promise<unknown>] => {
  const accountQuery = useGetAccounts();
  const accountMutation = useCreateAccount();
  const onCreateAccount = (name: string)=> accountMutation.mutate({
    name
  });

  const accountOptions = (accountQuery.data ?? []).map((account) =>({
    label: account.name,
    value: account.id,
  }));

  const [promise, setPromise] = useState<{ resolve:(value: string | undefined)=> void} | null>(null);

  const selectValue = useRef<string>();
  
  const confirm = () => new Promise((resolve, reject) =>{
    setPromise({ resolve });
  })

  const handleClose = () => {
    setPromise(null);
  }

  const handleConfirm = ()=> {
    promise?.resolve(selectValue.current);
    handleClose();
  }

  const handleCancel = () => {
    promise?.resolve(undefined);
    handleClose();
  }

  const ComfirmationDialog = () => (
    <Dialog open={promise != null}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>
            Select Account
          </DialogTitle>
          <DialogDescription>
            Please select an account to continue.
          </DialogDescription>
        </DialogHeader>
        <Select
          placeholder="Select an account"
          options={accountOptions}
          onCreate={onCreateAccount}
          onChange={(value) => selectValue.current = value}
          disabled={accountQuery.isLoading || accountMutation.isPending}
        />
        <DialogFooter className="pt-2">
          <Button 
            onClick={handleCancel}
            variant="outline"
          >
            Cancel
          </Button>
          <Button onClick={handleConfirm}>
            Confirm
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );

  return [ComfirmationDialog, confirm];
}

Modify Page

Modify app/(dashboard)/transactions/page.tsx

...
import { toast } from "sonner"; 
import { transactions as transactionSchema } from "@/db/schema";
import { useSelectAccount } from "@/features/accounts/hooks/use-select-account";
import { useBulkCreateTransactions } from "@/features/transactions/api/use-bulk-create-transactions";
...
const [AccountDialog, confirm] = useSelectAccount();
const createTransactions = useBulkCreateTransactions();
...
const onSubmitImport = async (
    values: typeof transactionSchema.$inferInsert[],
  )=>{
    const accountId = await confirm();

    if(!accountId) {
      return toast.error("Please select an account to continue.");
    }

    const data = values.map((value) =>({
      ...value,
      accountId: accountId as string,
    }));

    createTransactions.mutate(data, {
      onSuccess: () => {
        handleCancleImport();
      }
    });
  };
 ...
 if (variant === VARIANTS.IMPORT) {
    return(
      <>
        <AccountDialog />
        <ImportCard 
          data={importResult.data}
          onCancel={handleCancleImport}
          onSummit={onSubmitImport}
        />
      </>
    )
 ...