Merge branch 'release/1.9.0'

app/api/locations/available-years/route.ts

@@ -0,0 +1,9 @@
+import { fetchAvailableYears } from '@/app/lib/actions/monthActions';
+import { NextResponse } from 'next/server';
+ 
+export async function GET(request: Request) {
+
+  const availableYears = await fetchAvailableYears();
+
+  return NextResponse.json({ availableYears });
+}

app/api/locations/by-id/route.ts

@@ -0,0 +1,13 @@
+import { fetchLocationById } from '@/app/lib/actions/locationActions';
+import type { NextApiRequest } from 'next'
+import { NextResponse } from 'next/server';
+ 
+export const GET = async (
+  req: NextApiRequest,
+) => {
+  const url = new URL(req.url as string);
+  const locationId = url.searchParams.get('id');
+  const location = await fetchLocationById(locationId as string);
+
+  return NextResponse.json({ location });
+}

app/api/locations/in-year/route.ts

@@ -0,0 +1,14 @@
+import { fetchAllLocations } from '@/app/lib/actions/locationActions';
+import type { NextApiRequest } from 'next'
+import { NextResponse } from 'next/server';
+ 
+export const GET = async (
+  req: NextApiRequest,
+) => {
+  // get year from query params
+  const url = new URL(req.url as string);
+  const year = parseInt(url.searchParams.get('year') as string, 10);
+  const locations = await fetchAllLocations(year);
+
+  return NextResponse.json({ locations });
+}

app/lib/actions/monthActions.ts

@@ -70,7 +70,7 @@ export const fetchAvailableYears = withUser(async (user:AuthenticatedUser) => {
     const dbClient = await getDbClient();
 
     // query mnogodb for all `yearMonth` values
-    const years = await dbClient.collection<BillingLocation>("lokacije")
+    const years:number[] = await dbClient.collection<BillingLocation>("lokacije")
         .distinct("yearMonth.year", { userId })
 
     // sort the years in descending order

app/location/[id]/add/LocationAddPage.tsx

@@ -1,8 +1,7 @@
-import { notFound } from 'next/navigation';
+"use client";
+
 import { LocationEditForm } from '@/app/ui/LocationEditForm';
-import { fetchLocationById } from '@/app/lib/actions/locationActions';
 import { YearMonth } from '@/app/lib/db-types';
-import { Main } from '@/app/ui/Main';
 
 export default async function LocationAddPage({ yearMonth }: { yearMonth:YearMonth }) {
     return (<LocationEditForm yearMonth={yearMonth} />);

app/location/[id]/add/page.tsx

@@ -1,15 +1,16 @@
 import { parseYearMonth } from '@/app/lib/format';
-import { LocationEditFormSkeleton } from '@/app/ui/LocationEditForm';
-import LocationAddPage from './LocationAddPage';
 import { Main } from '@/app/ui/Main';
-import { Suspense } from 'react';
+import dynamic from 'next/dynamic'
+
+const LocationAddPage = dynamic(
+    () => import('./LocationAddPage'),
+    { ssr: false }
+  )
 
 export default async function Page({ params:{ id } }: { params: { id:string } }) {
     return (
         <Main>
-            <Suspense fallback={<LocationEditFormSkeleton />}>
-                <LocationAddPage yearMonth={ parseYearMonth(id) } />
-            </Suspense>
+            <LocationAddPage yearMonth={ parseYearMonth(id) } />
         </Main>
     );
 }

app/location/[id]/delete/LocationDeletePage.tsx

@@ -1,14 +1,54 @@
+"use client";
+
 import { notFound } from 'next/navigation';
-import { fetchLocationById } from '@/app/lib/actions/locationActions';
-import { LocationDeleteForm } from '@/app/ui/LocationDeleteForm';
+import { LocationDeleteForm, LocationDeleteFormSkeleton } from '@/app/ui/LocationDeleteForm';
+import { WithId } from 'mongodb';
+import { BillingLocation } from '@/app/lib/db-types';
+import { useEffect, useState } from 'react';
 
-export const LocationDeletePage = async ({ locationId }: { locationId:string }) => {
+const fetchLocationById = async (locationId: string) => {
+    const response = await fetch(`/api/locations/by-id?id=${locationId}`);
+    const json = await response.json();
+    return json.location as WithId<BillingLocation>;
+}
 
-    const location = await fetchLocationById(locationId);
+const LocationDeletePage = ({ locationId }: { locationId:string }) => {
+    
+    const [state, stateSet] = useState<{
+        status: 'loading' | 'error' | 'success';
+        location?: WithId<BillingLocation>;
+        error?: string;
+    }>({ status: 'loading' });
 
-    if (!location) {
-        return(notFound());
+    useEffect(() => {
+
+        const fetchLocation = async () => {
+            try {
+                const location = await fetchLocationById(locationId);
+                stateSet({ location, status: 'success' });
+            } catch(error:any) {
+                stateSet({ status: 'error', error: error.message });
+            }
+        };
+
+        fetchLocation();
+        
+    }, [locationId]);
+
+    switch(state.status) {
+        case "error":
+            return(<div>Error: {state.error}</div>);
+        case "loading":
+            return(<LocationDeleteFormSkeleton />);
+        case "success":
+            if (!state.location) {
+                return(notFound());
+            }
+            
+            return(<LocationDeleteForm location={state.location} />);
+        default:
+            return(<div>Error: Unknown status</div>);
     }
+}
 
-    return (<LocationDeleteForm location={location} />);
-}
+export default LocationDeletePage;

app/location/[id]/delete/page.tsx

@@ -1,17 +1,17 @@
-import { notFound } from 'next/navigation';
-import { fetchLocationById } from '@/app/lib/actions/locationActions';
-import { LocationDeleteForm } from '@/app/ui/LocationDeleteForm';
 import { Main } from '@/app/ui/Main';
-import { Suspense } from 'react';
-import { LocationDeletePage } from './LocationDeletePage';
+import dynamic from 'next/dynamic'
+
+const LocationDeletePage = dynamic(
+    () => import('./LocationDeletePage'),
+    { ssr: false }
+  )
+  
 
 export default async function Page({ params:{ id } }: { params: { id:string } }) {
 
     return (
         <Main>
-            <Suspense fallback={<div>Loading...</div>}>
-                <LocationDeletePage locationId={id} />
-            </Suspense>
+            <LocationDeletePage locationId={id} />
         </Main>
     );
 }

app/location/[id]/edit/LocationEditPage.tsx

@@ -1,16 +1,53 @@
+"use client";
+
 import { notFound } from 'next/navigation';
-import { LocationEditForm } from '@/app/ui/LocationEditForm';
-import { fetchLocationById } from '@/app/lib/actions/locationActions';
+import { LocationEditForm, LocationEditFormSkeleton } from '@/app/ui/LocationEditForm';
+import { useEffect, useState } from 'react';
+import { WithId } from 'mongodb';
+import { BillingLocation } from '@/app/lib/db-types';
 
-export default async function LocationEditPage({ locationId }: { locationId:string }) {
 
-    const location = await fetchLocationById(locationId);
+const fetchLocationById = async (locationId: string) => {
+    const response = await fetch(`/api/locations/by-id?id=${locationId}`);
+    const json = await response.json();
+    return json.location as WithId<BillingLocation>;
+}
 
-    if (!location) {
-        return(notFound());
+export default function LocationEditPage({ locationId }: { locationId:string }) {
+
+    const [state, stateSet] = useState<{
+        status: 'loading' | 'error' | 'success';
+        location?: WithId<BillingLocation>;
+        error?: string;
+    }>({ status: 'loading' });
+
+    useEffect(() => {
+
+        const fetchLocation = async () => {
+            try {
+                const location = await fetchLocationById(locationId);
+                stateSet({ location, status: 'success' });
+            } catch(error:any) {
+                stateSet({ status: 'error', error: error.message });
+            }
+        };
+
+        fetchLocation();
+        
+    }, [locationId]);
+
+    switch(state.status) {
+        case "error":
+            return(<div>Error: {state.error}</div>);
+        case "loading":
+            return(<LocationEditFormSkeleton />);
+        case "success":
+            if (!state.location) {
+                return(notFound());
+            }
+
+            return(<LocationEditForm location={state.location} />);
+        default:
+            return(<div>Error: Unknown status</div>);
     }
-
-    const result = <LocationEditForm location={location} />;
-    
-    return (result);
 }

app/location/[id]/edit/page.tsx

@@ -1,15 +1,17 @@
-import { Suspense } from 'react';
-import LocationEditPage from './LocationEditPage';
 import { Main } from '@/app/ui/Main';
-import { LocationEditFormSkeleton } from '@/app/ui/LocationEditForm';
+import dynamic from 'next/dynamic'
+
+const LocationEditPage = dynamic(
+    () => import('./LocationEditPage'),
+    { ssr: false }
+  )
+  
 
 export default async function Page({ params:{ id } }: { params: { id:string } }) {
 
     return (
         <Main>
-            <Suspense fallback={<LocationEditFormSkeleton />}>
-                <LocationEditPage  locationId={id} />
-            </Suspense>
+            <LocationEditPage locationId={id} />
         </Main>
     );
 }

app/page.tsx

@@ -1,7 +1,11 @@
 import { FC, Suspense } from 'react';
 import { Main } from './ui/Main';
-import HomePage from './ui/HomePage';
-import { HomePageSkeleton } from './ui/MonthCardSceleton';
+import dynamic from 'next/dynamic'
+
+const HomePage = dynamic(
+  () => import('./ui/HomePage'),
+  { ssr: false }
+)
 
 export interface PageProps {
   searchParams?: {
@@ -14,9 +18,7 @@ const Page:FC<PageProps> = async ({ searchParams }) => {
 
  return (
     <Main>
-      <Suspense fallback={<HomePageSkeleton />}>
-        <HomePage searchParams={searchParams} />
-      </Suspense>
+      <HomePage />
     </Main>
   );
 }

app/ui/BillEditForm.tsx

@@ -6,7 +6,6 @@ import React, { FC } from "react";
 import { useFormState } from "react-dom";
 import { updateOrAddBill } from "../lib/actions/billActions";
 import Link from "next/link";
-import { gotoHome } from "../lib/actions/navigationActions";
 import { formatYearMonth } from "../lib/format";
 
 // Next.js does not encode an utf-8 file name correctly when sending a form with a file attachment
@@ -35,12 +34,7 @@ export const BillEditForm:FC<BillEditFormProps> = ({ location, bill }) => {
 
     const [ isPaid, setIsPaid ] = React.useState<boolean>(paid);
 
-    // redirect to the main page
-    const handleCancel = () => {
-        gotoHome(location.yearMonth);
-    };
-
-    const billPaid_handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const billPaid_handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
         setIsPaid(event.target.checked);
     }
 

app/ui/HomePage.tsx

@@ -1,30 +1,118 @@
-import { fetchAllLocations } from '@/app/lib/actions/locationActions';
-import { fetchAvailableYears } from '@/app/lib/actions/monthActions';
+"use client";
+
 import { BillingLocation, YearMonth } from '@/app/lib/db-types';
-import { FC } from 'react';
+import { FC, useEffect, useState } from 'react';
 import { MonthLocationList } from '@/app/ui/MonthLocationList';
+import { WithId } from 'mongodb';
+import { MonthCardSkeleton } from './MonthCardSkeleton';
+import { useSearchParams } from 'next/navigation';
 
 export interface HomePageProps {
-  searchParams?: {
-    year?: string;
-    month?: string;
-  };
 }
 
-export const HomePage:FC<HomePageProps> = async ({ searchParams }) => {
+type MonthsLocations = {
+    [key:string]:{
+    yearMonth: YearMonth,
+    locations: BillingLocation[],
+    monthlyExpense: number
+  }
+}
 
-  let availableYears: number[];
+const fetchAllLocations = async (year: number) => {
+  const response = await fetch(`/api/locations/in-year/?year=${year}`);
+  const { locations } : { locations: WithId<BillingLocation>[] } = await response.json();
+  return locations;
+}
 
-  // const asyncTimout = (ms:number) => new Promise(resolve => setTimeout(resolve, ms));
-  // await asyncTimout(5000);
+const fetchAvailableYears = async () => {
+  const response = await fetch(`/api/locations/available-years/`);
+  const { availableYears }: { availableYears: number[]} = await response.json();
+  return availableYears;
+}
 
-  try {
-    availableYears = await fetchAvailableYears();
-  } catch (error:any) {
+export const HomePage:FC<HomePageProps> = () => {
+
+  const searchParams = useSearchParams();
+  const year = searchParams.get('year');
+  const currentYear = year ? parseInt(year, 10) : new Date().getFullYear();
+
+  const [ homePageStatus, setHomePageStatus ] = useState<{
+    status: "loading" | "loaded" | "error",
+    availableYears: number[],
+    months?: MonthsLocations,
+    error?: string
+  }>({
+    status: "loading",
+    availableYears: [],
+  });
+
+  const {availableYears, months, status, error} = homePageStatus;
+
+  useEffect(() => {
+
+    const fetchData = async () => {
+
+      try {
+        const locations = await fetchAllLocations(currentYear);
+
+        // group locations by month
+        const months = locations.reduce((acc, location) => {
+          const {year, month} =  location.yearMonth;
+          const key = `${year}-${month}`;
+
+          const locationsInMonth = acc[key];
+
+          if(locationsInMonth) {
+            return({
+              ...acc,
+              [key]: {
+                yearMonth: location.yearMonth,
+                locations: [...locationsInMonth.locations, location],
+                monthlyExpense: locationsInMonth.monthlyExpense + location.bills.reduce((acc, bill) => bill.paid ? acc + (bill.payedAmount ?? 0) : acc, 0)
+              }
+            })
+          }
+
+          return({
+            ...acc,
+            [key]: {
+              yearMonth: location.yearMonth,
+              locations: [location],
+              monthlyExpense: location.bills.reduce((acc, bill) => bill.paid ? acc + (bill.payedAmount ?? 0) : acc, 0)
+            }
+          });
+        }, {} as MonthsLocations);
+        
+        setHomePageStatus({
+          availableYears: await fetchAvailableYears(),
+          months,
+          status: "loaded",
+        });
+
+      } catch (error: any) {
+        setHomePageStatus({
+          status: "error",
+          availableYears: [],
+          error: error.message
+        });
+      }
+    }
+
+    fetchData();
+  }, [currentYear]);
+
+  if(status === "loading") {
     return (
-      <main className="flex min-h-screen flex-col p-6 bg-base-300">
-        <p className="text-center text-2xl text-red-500">{error.message}</p>
-      </main>);
+      <>
+        <MonthCardSkeleton checked={true} />
+        <MonthCardSkeleton />
+        <MonthCardSkeleton />
+      </>
+    );
+  }
+
+  if(status === "error") {
+    return(<p className="text-center text-2xl text-red-500">{error}</p>);
   }
 
   // if the database is in it's initial state, show the add location button for the current month
@@ -32,42 +120,6 @@ export const HomePage:FC<HomePageProps> = async ({ searchParams }) => {
     return (<MonthLocationList />);
   }
 
-  const currentYear = Number(searchParams?.year) || availableYears[0];
-  
-  const locations = await fetchAllLocations(currentYear);
-
-  // group locations by month
-  const months = locations.reduce((acc, location) => {
-    const {year, month} =  location.yearMonth;
-    const key = `${year}-${month}`;
-
-    const locationsInMonth = acc[key];
-
-    if(locationsInMonth) {
-      return({
-        ...acc,
-        [key]: {
-          yearMonth: location.yearMonth,
-          locations: [...locationsInMonth.locations, location],
-          monthlyExpense: locationsInMonth.monthlyExpense + location.bills.reduce((acc, bill) => bill.paid ? acc + (bill.payedAmount ?? 0) : acc, 0)
-        }
-      })
-    }
-
-    return({
-      ...acc,
-      [key]: {
-        yearMonth: location.yearMonth,
-        locations: [location],
-        monthlyExpense: location.bills.reduce((acc, bill) => bill.paid ? acc + (bill.payedAmount ?? 0) : acc, 0)
-      }
-    });
-  }, {} as {[key:string]:{
-    yearMonth: YearMonth,
-    locations: BillingLocation[],
-    monthlyExpense: number
-  } });
-
  return (
     <MonthLocationList availableYears={availableYears} months={months} />
   );

app/ui/LocationDeleteForm.tsx

@@ -29,11 +29,23 @@ export const LocationDeleteForm:FC<LocationDeleteFormProps> = ({ location }) =>
                         Please confirm deletion of location “<strong>{location.name}</strong>”.
                     </p>
                     <div className="pt-4 text-center">
-                        <button className="btn btn-primary">Confim</button>
-                        <Link className="btn btn-neutral ml-3" href={`/location/${location._id}/edit/`}>Cancel</Link>
+                        <button className="btn btn-primary w-[5.5em]">Confim</button>
+                        <Link className="btn btn-neutral w-[5.5em] ml-3" href={`/location/${location._id}/edit/`}>Cancel</Link>
                     </div>
                 </form>
             </div>
         </div>
     );
 }
+
+
+export const LocationDeleteFormSkeleton:FC = () =>
+<div className="card card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s my-1">
+<div className="card-body">
+    <p className="py-6 px-6"></p>
+    <div className="pt-4 text-center">
+        <div className="btn skeleton w-[5.5em]"></div>
+        <div className="btn ml-3 skeleton w-[5.5em]"></div>
+    </div>
+</div>
+</div>

app/ui/LocationEditForm.tsx

@@ -6,7 +6,6 @@ import { BillingLocation, YearMonth } from "../lib/db-types";
 import { updateOrAddLocation } from "../lib/actions/locationActions";
 import { useFormState } from "react-dom";
 import Link from "next/link";
-import { gotoHome } from "../lib/actions/navigationActions";
 
 export type LocationEditFormProps = {
     /** location which should be edited */
@@ -48,7 +47,7 @@ export const LocationEditForm:FC<LocationEditFormProps> = ({ location, yearMonth
                         ))}
                     </div>
 
-                    <textarea id="locationNotes" name="locationNotes" className="textarea textarea-bordered my-1 w-full block" placeholder="Opis" defaultValue={location?.notes ?? ""}></textarea>
+                    <textarea id="locationNotes" name="locationNotes" className="textarea textarea-bordered my-1 w-full block h-[8em]" 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) => (
@@ -66,10 +65,9 @@ export const LocationEditForm:FC<LocationEditFormProps> = ({ location, yearMonth
                                 </p>
                         }
                     </div>
-
                     <div className="pt-4">
-                        <button className="btn btn-primary">Save</button>
-                        <Link className="btn btn-neutral ml-3" href={`/?year=${year}&month=${month}`}>Cancel</Link>
+                        <button className="btn btn-primary w-[5.5em]">Save</button>
+                        <Link className="btn btn-neutral w-[5.5em] ml-3" href={`/?year=${year}&month=${month}`}>Cancel</Link>
                     </div>
                 </form>
             </div>
@@ -80,10 +78,14 @@ export const LocationEditForm:FC<LocationEditFormProps> = ({ location, yearMonth
 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 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 id="locationName" className="input w-full skeleton"></div>
+                <div id="locationNotes" className="textarea my-1 w-full block h-[8em] skeleton"></div>
+                <div className="pt-4">
+                    <div className="btn w-[5.5em] skeleton"></div>
+                    <div className="btn w-[5.5em] ml-3 skeleton"></div>
+                </div>
             </div>
         </div>
     )

app/ui/MonthCardSkeleton.tsx

@@ -15,18 +15,9 @@ export interface MonthCardSkeletonProps {
 export const MonthCardSkeleton: React.FC<MonthCardSkeletonProps> = ({checked=false}) =>
     <div className={`skeleton collapse collapse-plus bg-base-200 my-1`}>
       <input type="checkbox" name="my-accordion-3" checked={checked} disabled />
-      <div className="collapse-title text-xl font-medium w-[15em]">
-      </div>
+      <div className="text-xl w-[15em]"></div>
       <div className="collapse-content">
         <LocationCardSkeleton />
         <LocationCardSkeleton />
       </div>
     </div>;
-
-
-export const HomePageSkeleton: React.FC = () =>
-<>
-    <MonthCardSkeleton checked={true} />
-    <MonthCardSkeleton />
-    <MonthCardSkeleton />
-</>;

docker-compose-deploy.yml

@@ -9,7 +9,7 @@ networks:
 
 services:
   web-app:
-    image: utility-bills-tracker:1.8.0
+    image: utility-bills-tracker:1.9.0
     networks:
       - traefik-network
       - mongo-network