From 8aaf2a0dea78f2df512a4c30d997bbadfc0af2dc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nikola=20Dere=C5=BEi=C4=87?= <nikola.derezic@gmail.com>
Date: Tue, 6 Feb 2024 14:29:58 +0100
Subject: [PATCH] "Cancel" buttons replaced with <Link>

---
 app/ui/BillDeleteForm.tsx     | 14 ++++++--------
 app/ui/BillEditForm.tsx       |  2 +-
 app/ui/LocationDeleteForm.tsx |  3 ++-
 app/ui/LocationEditForm.tsx   | 26 ++++++++++----------------
 4 files changed, 19 insertions(+), 26 deletions(-)

diff --git a/app/ui/BillDeleteForm.tsx b/app/ui/BillDeleteForm.tsx
index df76fa0..f12fc50 100644
--- a/app/ui/BillDeleteForm.tsx
+++ b/app/ui/BillDeleteForm.tsx
@@ -4,22 +4,20 @@ import { FC } from "react";
 import { Bill, BillingLocation } from "../lib/db-types";
 import { useFormState } from "react-dom";
 import { Main } from "./Main";
-import { gotoHome } from "../lib/actions/navigationActions";
 import { deleteBillById } from "../lib/actions/billActions";
+import Link from "next/link";
 
 export interface BillDeleteFormProps {
     bill: Bill,
     location: BillingLocation
 }
 
-export const BillDeleteForm:FC<BillDeleteFormProps> = ({ bill, location }) =>
-{
-    const handleAction = deleteBillById.bind(null, location._id, bill._id, location.yearMonth.year, location.yearMonth.month);
+export const BillDeleteForm:FC<BillDeleteFormProps> = ({ bill, location }) => {
+
+    const { year, month } = location.yearMonth;
+    const handleAction = deleteBillById.bind(null, location._id, bill._id, year, month);
     const [ state, dispatch ] = useFormState(handleAction, null);
 
-    const handleCancel = () => {
-        gotoHome(location.yearMonth);
-    };
 
     return(
         <Main>
@@ -31,7 +29,7 @@ export const BillDeleteForm:FC<BillDeleteFormProps> = ({ bill, location }) =>
                         </p>
                         <div className="pt-4 text-center">
                           <button className="btn btn-primary">Confim</button>
-                          <button type="button" className="btn btn-neutral ml-3" onClick={handleCancel}>Cancel</button>
+                          <Link className="btn btn-neutral ml-3" href={`/bill/${location._id}-${bill._id}/edit/`}>Cancel</Link>
                         </div>
                     </form>
                 </div>
diff --git a/app/ui/BillEditForm.tsx b/app/ui/BillEditForm.tsx
index 443eb02..500ca12 100644
--- a/app/ui/BillEditForm.tsx
+++ b/app/ui/BillEditForm.tsx
@@ -126,7 +126,7 @@ export const BillEditForm:FC<BillEditFormProps> = ({ location, bill }) => {
 
                 <div className="pt-4">
                     <button type="submit" className="btn btn-primary">Save</button>
-                    <button type="button" className="btn btn-neutral ml-3" onClick={handleCancel}>Cancel</button>
+                    <Link className="btn btn-neutral ml-3" href={`/?year=${billYear}&month=${billMonth}`}>Cancel</Link>
                 </div>
                 
                 <div id="status-error" aria-live="polite" aria-atomic="true">
diff --git a/app/ui/LocationDeleteForm.tsx b/app/ui/LocationDeleteForm.tsx
index 30fe546..ad2f3c8 100644
--- a/app/ui/LocationDeleteForm.tsx
+++ b/app/ui/LocationDeleteForm.tsx
@@ -6,6 +6,7 @@ import { deleteLocationById } from "../lib/actions/locationActions";
 import { useFormState } from "react-dom";
 import { Main } from "./Main";
 import { gotoUrl } from "../lib/actions/navigationActions";
+import Link from "next/link";
 
 export interface LocationDeleteFormProps {
     /** location which should be deleted */
@@ -31,7 +32,7 @@ export const LocationDeleteForm:FC<LocationDeleteFormProps> = ({ location }) =>
                         </p>
                         <div className="pt-4 text-center">
                           <button className="btn btn-primary">Confim</button>
-                          <button type="button" className="btn btn-neutral ml-3" onClick={handleCancel}>Cancel</button>
+                          <Link className="btn btn-neutral ml-3" href={`/location/${location._id}/edit/`}>Cancel</Link>
                         </div>
                     </form>
                 </div>
diff --git a/app/ui/LocationEditForm.tsx b/app/ui/LocationEditForm.tsx
index 387dca0..31568d8 100644
--- a/app/ui/LocationEditForm.tsx
+++ b/app/ui/LocationEditForm.tsx
@@ -8,11 +8,16 @@ import { useFormState } from "react-dom";
 import Link from "next/link";
 import { gotoHome } from "../lib/actions/navigationActions";
 
-export interface LocationEditFormProps {
+export type LocationEditFormProps = {
     /** location which should be edited */
-    location?: BillingLocation,
+    location: BillingLocation,
     /** year adn month at a new billing location should be assigned */
-    yearMonth?: YearMonth   
+    yearMonth: undefined
+} | {
+    /** location which should be edited */
+    location: undefined,
+    /** year adn month at a new billing location should be assigned */
+    yearMonth: YearMonth
 }
 
 export const LocationEditForm:FC<LocationEditFormProps> = ({ location, yearMonth }) =>
@@ -21,14 +26,7 @@ export const LocationEditForm:FC<LocationEditFormProps> = ({ location, yearMonth
     const handleAction = updateOrAddLocation.bind(null, location?._id, yearMonth);
     const [ state, dispatch ] = useFormState(handleAction, initialState);
 
-    // redirect to the main page
-    const handleCancel = () => {
-        if(location)
-            gotoHome(location?.yearMonth);
-        else if(yearMonth)
-            gotoHome(yearMonth);
-            
-    };
+    let { year, month } = location ? location.yearMonth : yearMonth;
 
     return(
         <div className="card card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s my-1">
@@ -71,7 +69,7 @@ export const LocationEditForm:FC<LocationEditFormProps> = ({ location, yearMonth
 
                     <div className="pt-4">
                         <button className="btn btn-primary">Save</button>
-                        <button type="button" className="btn btn-neutral ml-3" onClick={handleCancel}>Cancel</button>
+                        <Link className="btn btn-neutral ml-3" href={`/?year=${year}&month=${month}`}>Cancel</Link>
                     </div>
                 </form>
             </div>
@@ -86,10 +84,6 @@ export const LocationEditFormSkeleton:FC = () =>
             <div className="card-body">
                 <input id="locationName" name="locationName" type="text" placeholder="Naziv lokacije" className="input input-bordered w-full" />
                 <textarea id="locationNotes" name="locationNotes" className="textarea textarea-bordered my-1 w-full block" placeholder="Opis"></textarea>
-                <div className="pt-4">
-                    <button className="btn btn-primary">Save</button>
-                    <button type="button" className="btn btn-neutral ml-3">Cancel</button>
-                </div>
             </div>
         </div>
     )