From 0ce7b11c3c5ac00c9a29baf85394aae446fa2c06 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 09:56:36 +0100
Subject: [PATCH 1/6] optimizirano generiranje popisa lokacija

---
 app/ui/MonthLocationList.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/app/ui/MonthLocationList.tsx b/app/ui/MonthLocationList.tsx
index eb484a1..01b3584 100644
--- a/app/ui/MonthLocationList.tsx
+++ b/app/ui/MonthLocationList.tsx
@@ -7,7 +7,7 @@ import { MonthCard } from "./MonthCard";
 import Pagination from "./Pagination";
 import { LocationCard } from "./LocationCard";
 import { BillingLocation, YearMonth } from "../lib/db-types";
-import { useParams, useRouter, useSearchParams } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
 
 const getNextYearMonth = (yearMonth:YearMonth) => {
     const {year, month} = yearMonth;
@@ -77,11 +77,15 @@ export const MonthLocationList:React.FC<MonthLocationListProps  > = ({
                 monthsArray.map(([monthKey, { yearMonth, locations, monthlyExpense }], monthIx) => 
                 <MonthCard yearMonth={yearMonth} key={`month-${monthKey}`} monthlyExpense={monthlyExpense} expanded={ yearMonth.month === expandedMonth } onToggle={handleMonthToggle} >
                     {
-                        locations.map((location, ix) => <LocationCard key={`location-${location._id}`} location={location} />)
+                        yearMonth.month === expandedMonth ? 
+                            locations.map((location, ix) => <LocationCard key={`location-${location._id}`} location={location} />)
+                            : null
                     }
                     {
-                        // show AddLocationButton as a last item in the first month
-                        monthIx === 0 ? <AddLocationButton yearMonth={yearMonth} /> : null
+                        yearMonth.month === expandedMonth ? 
+                            // show AddLocationButton as a last item in the first month
+                            (monthIx === 0 ? <AddLocationButton yearMonth={yearMonth} /> : null)
+                            : null
                     }
                 </MonthCard>
                 )

From 7f083496881511c9fb57c6dd29fcc68afecc0727 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 09:56:43 +0100
Subject: [PATCH 2/6] uveden umjetni delay

---
 app/lib/actions/locationActions.ts | 9 +++++++++
 app/lib/asyncTimeout.ts            | 2 ++
 2 files changed, 11 insertions(+)
 create mode 100644 app/lib/asyncTimeout.ts

diff --git a/app/lib/actions/locationActions.ts b/app/lib/actions/locationActions.ts
index 3db4f29..efad42c 100644
--- a/app/lib/actions/locationActions.ts
+++ b/app/lib/actions/locationActions.ts
@@ -8,6 +8,7 @@ import { withUser } from '@/app/lib/auth';
 import { AuthenticatedUser } from '../types/next-auth';
 import { gotoHome } from './navigationActions';
 import { Noto_Sans_Tamil_Supplement } from 'next/font/google';
+import { asyncTimeout } from '../asyncTimeout';
 
 export type State = {
     errors?: {
@@ -81,6 +82,8 @@ export const updateOrAddLocation = withUser(async (user:AuthenticatedUser, locat
         });
     }
 
+    await asyncTimeout(1000);
+
     if(yearMonth) await gotoHome(yearMonth);
 
     return {
@@ -109,6 +112,8 @@ export const fetchAllLocations = withUser(async (user:AuthenticatedUser, year:nu
         })
         .toArray();
 
+    await asyncTimeout(1000);
+
     return(locations);
 })
 
@@ -126,6 +131,8 @@ export const fetchLocationById = withUser(async (user:AuthenticatedUser, locatio
         return(null);
     }
 
+    await asyncTimeout(1000);
+
     return(billLocation);
 })
 
@@ -138,5 +145,7 @@ export const deleteLocationById = withUser(async (user:AuthenticatedUser, locati
     // find a location with the given locationID
     const post = await dbClient.collection<BillingLocation>("lokacije").deleteOne({ _id: locationID, userId });
     
+    await asyncTimeout(1000);
+
     await gotoHome(yearMonth)
 })
\ No newline at end of file
diff --git a/app/lib/asyncTimeout.ts b/app/lib/asyncTimeout.ts
new file mode 100644
index 0000000..c65d4ae
--- /dev/null
+++ b/app/lib/asyncTimeout.ts
@@ -0,0 +1,2 @@
+
+export const asyncTimeout = (ms: number = 1000) => new Promise(resolve => setTimeout(resolve, ms));
\ No newline at end of file

From cf97b3d4b57da42dd9be77f1144b2e21776dfc25 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:16:31 +0100
Subject: [PATCH 3/6] <suspense> added to LocationEditPage

---
 app/location/[id]/edit/LocationEditPage.tsx |  16 ++++
 app/location/[id]/edit/page.tsx             |  20 ++--
 app/ui/LocationEditForm.tsx                 | 101 +++++++++++---------
 3 files changed, 84 insertions(+), 53 deletions(-)
 create mode 100644 app/location/[id]/edit/LocationEditPage.tsx

diff --git a/app/location/[id]/edit/LocationEditPage.tsx b/app/location/[id]/edit/LocationEditPage.tsx
new file mode 100644
index 0000000..50d0b31
--- /dev/null
+++ b/app/location/[id]/edit/LocationEditPage.tsx
@@ -0,0 +1,16 @@
+import { notFound } from 'next/navigation';
+import { LocationEditForm } from '@/app/ui/LocationEditForm';
+import { fetchLocationById } from '@/app/lib/actions/locationActions';
+
+export default async function LocationEditPage({ locationId }: { locationId:string }) {
+
+    const location = await fetchLocationById(locationId);
+
+    if (!location) {
+        return(notFound());
+    }
+
+    const result = <LocationEditForm location={location} yearMonth={location.yearMonth} />;
+    
+    return (result);
+}
\ No newline at end of file
diff --git a/app/location/[id]/edit/page.tsx b/app/location/[id]/edit/page.tsx
index b28cd30..251f944 100644
--- a/app/location/[id]/edit/page.tsx
+++ b/app/location/[id]/edit/page.tsx
@@ -1,13 +1,15 @@
-import { notFound } from 'next/navigation';
-import { LocationEditForm } from '@/app/ui/LocationEditForm';
-import { fetchLocationById } from '@/app/lib/actions/locationActions';
+import { Suspense } from 'react';
+import LocationEditPage from './LocationEditPage';
+import { Main } from '@/app/ui/Main';
+import { LocationEditFormSkeleton } from '@/app/ui/LocationEditForm';
 
 export default async function Page({ params:{ id } }: { params: { id:string } }) {
 
-    const location = await fetchLocationById(id);
-
-    if (!location) {
-        return(notFound());
-    }
-    return (<LocationEditForm location={location} yearMonth={location.yearMonth} />);
+    return (
+        <Main>
+            <Suspense fallback={<LocationEditFormSkeleton />}>
+                <LocationEditPage  locationId={id} />
+            </Suspense>
+        </Main>
+    );
 }
\ No newline at end of file
diff --git a/app/ui/LocationEditForm.tsx b/app/ui/LocationEditForm.tsx
index 97b5c49..387dca0 100644
--- a/app/ui/LocationEditForm.tsx
+++ b/app/ui/LocationEditForm.tsx
@@ -5,7 +5,6 @@ import { FC } from "react";
 import { BillingLocation, YearMonth } from "../lib/db-types";
 import { updateOrAddLocation } from "../lib/actions/locationActions";
 import { useFormState } from "react-dom";
-import { Main } from "./Main";
 import Link from "next/link";
 import { gotoHome } from "../lib/actions/navigationActions";
 
@@ -32,52 +31,66 @@ export const LocationEditForm:FC<LocationEditFormProps> = ({ location, yearMonth
     };
 
     return(
-        <Main>
-            <div className="card card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s my-1">
-                <div className="card-body">
-                    <form action={dispatch}>
+        <div className="card card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s my-1">
+            <div className="card-body">
+                <form action={dispatch}>
+                    {
+                        location && 
+                            <Link href={`/location/${location._id}/delete`} className="absolute bottom-5 right-4 tooltip" data-tip="Delete Location">
+                                <TrashIcon className="h-[1em] w-[1em] text-error text-2xl" />
+                            </Link>
+                    }
+                    <input id="locationName" name="locationName" type="text" placeholder="Naziv lokacije" className="input input-bordered w-full" defaultValue={location?.name ?? ""} />
+                    <div id="status-error" aria-live="polite" aria-atomic="true">
+                        {state.errors?.locationName &&
+                        state.errors.locationName.map((error: string) => (
+                            <p className="mt-2 text-sm text-red-500" key={error}>
+                            {error}
+                            </p>
+                        ))}
+                    </div>
+
+                    <textarea id="locationNotes" name="locationNotes" className="textarea textarea-bordered my-1 w-full block" placeholder="Opis" defaultValue={location?.notes ?? ""}></textarea>
+                    <div id="status-error" aria-live="polite" aria-atomic="true">
+                        {state.errors?.locationNotes &&
+                        state.errors.locationNotes.map((error: string) => (
+                            <p className="mt-2 text-sm text-red-500" key={error}>
+                            {error}
+                            </p>
+                        ))}
+                    </div>
+
+                    <div id="status-error" aria-live="polite" aria-atomic="true">
                         {
-                            location && 
-                                <Link href={`/location/${location._id}/delete`} className="absolute bottom-5 right-4 tooltip" data-tip="Delete Location">
-                                    <TrashIcon className="h-[1em] w-[1em] text-error text-2xl" />
-                                </Link>
+                            state.message &&
+                                <p className="mt-2 text-sm text-red-500">
+                                    {state.message}
+                                </p>
                         }
-                        <input id="locationName" name="locationName" type="text" placeholder="Naziv lokacije" className="input input-bordered w-full" defaultValue={location?.name ?? ""} />
-                        <div id="status-error" aria-live="polite" aria-atomic="true">
-                            {state.errors?.locationName &&
-                            state.errors.locationName.map((error: string) => (
-                                <p className="mt-2 text-sm text-red-500" key={error}>
-                                {error}
-                                </p>
-                            ))}
-                        </div>
+                    </div>
 
-                        <textarea id="locationNotes" name="locationNotes" className="textarea textarea-bordered my-1 w-full block" placeholder="Opis" defaultValue={location?.notes ?? ""}></textarea>
-                        <div id="status-error" aria-live="polite" aria-atomic="true">
-                            {state.errors?.locationNotes &&
-                            state.errors.locationNotes.map((error: string) => (
-                                <p className="mt-2 text-sm text-red-500" key={error}>
-                                {error}
-                                </p>
-                            ))}
-                        </div>
-
-                        <div id="status-error" aria-live="polite" aria-atomic="true">
-                            {
-                                state.message &&
-                                    <p className="mt-2 text-sm text-red-500">
-                                        {state.message}
-                                    </p>
-                            }
-                        </div>
-
-                        <div className="pt-4">
-                          <button className="btn btn-primary">Save</button>
-                          <button type="button" className="btn btn-neutral ml-3" onClick={handleCancel}>Cancel</button>
-                        </div>
-                    </form>
-                </div>
+                    <div className="pt-4">
+                        <button className="btn btn-primary">Save</button>
+                        <button type="button" className="btn btn-neutral ml-3" onClick={handleCancel}>Cancel</button>
+                    </div>
+                </form>
             </div>
-        </Main>
+        </div>
+    )
+}
+
+export const LocationEditFormSkeleton:FC = () =>
+{
+    return(
+        <div className="skeleton card card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s my-1">
+            <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>
     )
 }

From f0581eb5334898a77e76677155490a6659bb3da9 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:17:12 +0100
Subject: [PATCH 4/6] za actions dodan "noStore"

---
 app/lib/actions/locationActions.ts | 10 +++++++++-
 app/lib/actions/monthActions.ts    |  5 +++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/app/lib/actions/locationActions.ts b/app/lib/actions/locationActions.ts
index efad42c..4db8fe0 100644
--- a/app/lib/actions/locationActions.ts
+++ b/app/lib/actions/locationActions.ts
@@ -7,7 +7,7 @@ import { ObjectId } from 'mongodb';
 import { withUser } from '@/app/lib/auth';
 import { AuthenticatedUser } from '../types/next-auth';
 import { gotoHome } from './navigationActions';
-import { Noto_Sans_Tamil_Supplement } from 'next/font/google';
+import { unstable_noStore as noStore } from 'next/cache';
 import { asyncTimeout } from '../asyncTimeout';
 
 export type State = {
@@ -35,6 +35,8 @@ const UpdateLocation = FormSchema.omit({ _id: true });
  */
 export const updateOrAddLocation = withUser(async (user:AuthenticatedUser, locationId: string | undefined, yearMonth: YearMonth | undefined, prevState:State, formData: FormData) => {
 
+    noStore();
+
     const validatedFields = UpdateLocation.safeParse({
         locationName: formData.get('locationName'),
         locationNotes: formData.get('locationNotes'),
@@ -95,6 +97,8 @@ export const updateOrAddLocation = withUser(async (user:AuthenticatedUser, locat
 
 export const fetchAllLocations = withUser(async (user:AuthenticatedUser, year:number) => {
 
+    noStore();
+
     const dbClient = await getDbClient();
 
     const { id: userId } = user;
@@ -119,6 +123,8 @@ export const fetchAllLocations = withUser(async (user:AuthenticatedUser, year:nu
 
 export const fetchLocationById = withUser(async (user:AuthenticatedUser, locationID:string) => {
 
+    noStore();
+
     const dbClient = await getDbClient();
 
     const { id: userId } = user;
@@ -138,6 +144,8 @@ export const fetchLocationById = withUser(async (user:AuthenticatedUser, locatio
 
 export const deleteLocationById = withUser(async (user:AuthenticatedUser, locationID:string, yearMonth:YearMonth) => {
 
+    noStore();
+
     const dbClient = await getDbClient();
 
     const { id: userId } = user;
diff --git a/app/lib/actions/monthActions.ts b/app/lib/actions/monthActions.ts
index 3e7948a..7b3d843 100644
--- a/app/lib/actions/monthActions.ts
+++ b/app/lib/actions/monthActions.ts
@@ -5,6 +5,7 @@ import { ObjectId } from 'mongodb';
 import { Bill, BillingLocation, YearMonth } from '../db-types';
 import { AuthenticatedUser } from '../types/next-auth';
 import { withUser } from '../auth';
+import { unstable_noStore as noStore } from 'next/cache';
 
 /**
  * Server-side action which adds a new month to the database
@@ -15,6 +16,8 @@ import { withUser } from '../auth';
  * @returns 
  */
 export const addMonth = withUser(async (user:AuthenticatedUser, { year, month }: YearMonth) => {
+    noStore();
+    
     const { id: userId } = user;
 
     // update the bill in the mongodb
@@ -60,6 +63,8 @@ export const addMonth = withUser(async (user:AuthenticatedUser, { year, month }:
 });
 
 export const fetchAvailableYears = withUser(async (user:AuthenticatedUser) => {
+    noStore();
+
     const { id: userId } = user;
 
     const dbClient = await getDbClient();

From 93dd9bf3f45fbd17f2daff004150565ded0a6a40 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:19:23 +0100
Subject: [PATCH 5/6] uklonjen umjetan delay

---
 app/lib/actions/locationActions.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/lib/actions/locationActions.ts b/app/lib/actions/locationActions.ts
index 4db8fe0..e094c9d 100644
--- a/app/lib/actions/locationActions.ts
+++ b/app/lib/actions/locationActions.ts
@@ -84,7 +84,7 @@ export const updateOrAddLocation = withUser(async (user:AuthenticatedUser, locat
         });
     }
 
-    await asyncTimeout(1000);
+    // await asyncTimeout(1000);
 
     if(yearMonth) await gotoHome(yearMonth);
 
@@ -116,7 +116,7 @@ export const fetchAllLocations = withUser(async (user:AuthenticatedUser, year:nu
         })
         .toArray();
 
-    await asyncTimeout(1000);
+    // await asyncTimeout(1000);
 
     return(locations);
 })
@@ -137,7 +137,7 @@ export const fetchLocationById = withUser(async (user:AuthenticatedUser, locatio
         return(null);
     }
 
-    await asyncTimeout(1000);
+    // await asyncTimeout(1000);
 
     return(billLocation);
 })
@@ -153,7 +153,7 @@ export const deleteLocationById = withUser(async (user:AuthenticatedUser, locati
     // find a location with the given locationID
     const post = await dbClient.collection<BillingLocation>("lokacije").deleteOne({ _id: locationID, userId });
     
-    await asyncTimeout(1000);
+    // await asyncTimeout(1000);
 
     await gotoHome(yearMonth)
 })
\ No newline at end of file

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 6/6] "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>
     )