dovršen rendering homepage-a

app/lib/db-types.ts

@@ -1,12 +1,16 @@
-export type Location = {
-    id: number;
+import { ObjectId } from "mongodb";
+
+export interface Location {
+    id: ObjectId;
     name: string;
+    bills: Bill[];
+    /** the value is encoded as yyyymm (i.e. 202301) */
+    yearMonth: number;
 };
 
-export type Bill = {
-    id: number;
+export interface Bill {
+    id: ObjectId;
     name: string;
     paid: boolean;
-    amount?: number;
-    description?: string;
+    document?: string|null;
 };

app/lib/format.ts

@@ -0,0 +1,6 @@
+
+export const formatYearMonth = (yearMonth: number): string => {
+  const year = Math.floor(yearMonth / 100);
+  const month = yearMonth % 100;
+  return `${year}-${month<10?"0":""}${month}`;
+}

app/lib/global.d.ts

@@ -0,0 +1,8 @@
+import { MongoClient } from "mongodb";
+
+declare global {
+  namespace globalThis {
+    /** global Mongo Client used in development */
+    var _mongoClientPromise: Promise<MongoClient>
+  }
+}

app/lib/mongodb.ts

@@ -0,0 +1,34 @@
+import { MongoClient } from 'mongodb'
+
+if (!process.env.MONGODB_URI) {
+  throw new Error('Invalid environment variable: "MONGODB_URI"')
+}
+
+const uri = process.env.MONGODB_URI
+const options = { }
+
+let client
+let clientPromise: Promise<MongoClient>
+
+
+if (!process.env.MONGODB_URI) {
+  throw new Error('Please add your Mongo URI to .env.local')
+}
+
+if (process.env.NODE_ENV === 'development') {
+  // In development mode, use a global variable so that the value
+  // is preserved across module reloads caused by HMR (Hot Module Replacement).
+  if (!global._mongoClientPromise) {
+    client = new MongoClient(uri, options)
+    global._mongoClientPromise = client.connect()
+  }
+  clientPromise = global._mongoClientPromise
+} else {
+  // In production mode, it's best to not use a global variable.
+  client = new MongoClient(uri, options)
+  clientPromise = client.connect()
+}
+
+// Export a module-scoped MongoClient promise. By doing this in a
+// separate module, the client can be shared across functions.
+export default clientPromise

app/page.tsx

@@ -1,67 +1,46 @@
-import Link from 'next/link';
-import styles from '@/app/ui/home.module.css';
-import { lusitana } from './ui/fonts';
-import Image from 'next/image';
-
-import {
-  Cog8ToothIcon,
-  TrashIcon,
-  PlusCircleIcon,
-  DocumentIcon,
-  MapIcon,
-  MapPinIcon
-} from '@heroicons/react/24/outline';
 import { LocationCard } from './ui/LocationCard';
-import { BillEditForm } from './ui/BillEditForm';
-import { LocationEditForm } from './ui/LocationEditForm';
 import { MonthTitle } from './ui/MonthTitle';
 import { AddMonthButton } from './ui/AddMonthButton';
 import { AddLocationButton } from './ui/AddLocationButton';
+import clientPromise from './lib/mongodb';
+import { Location } from './lib/db-types';
 
-export default function Page() {
-  return (
+export const Page = async () => {
+
+ const client = await clientPromise;
+ const db = client.db("rezije");
+
+ const locations = await db.collection<Location>("lokacije")
+    .find({})
+    .sort({ yearMonth: -1 }) // sort by yearMonth descending
+    .limit(20)
+    .toArray();
+
+ return (
     <main className="flex min-h-screen flex-col p-6 bg-base-300">
         <p>https://tailwindcss.com/docs/font-weight</p>
         <p>https://heroicons.com/</p>
 
         <AddMonthButton />
-
-        <MonthTitle month={new Date(2023, 4)} />
-
-        <LocationCard
-          month={new Date(2023, 4)}
-          location={{id: 1, name: 'Budakova'}}
-          bills={[
-            {id: 1, name: 'GSKG', paid: true},
-            {id: 2, name: 'HEP Elektra', paid: false},
-            {id: 3, name: 'Iskon', paid: false},
-            {id: 4, name: 'Plinara', paid: false},
-          ]} />
-
-        <LocationCard
-          month={new Date(2023, 4)}
-          location={{id: 1, name: 'Kopernikova'}}
-          bills={[
-            {id: 1, name: 'Toplana', paid: true},
-            {id: 2, name: 'HEP Elektra', paid: true},
-            {id: 3, name: 'GSKG', paid: true},
-          ]} />
-
-        <AddLocationButton />
-
-        <MonthTitle month={new Date(2023, 5)} />
-
-        <LocationCard
-          month={new Date(2023, 5)}
-          location={{id: 1, name: 'Šišićeva'}}
-          bills={[
-            {id: 1, name: 'Toplana', paid: true},
-            {id: 2, name: 'HEP Elektra', paid: true},
-            {id: 3, name: 'GSKG', paid: true},
-          ]} />
-        
-        <BillEditForm bill={{id: 1, name: 'GSKG', description: 'Pričuva, Voda, Smeće', paid: true}} />
-        <LocationEditForm />
+        {
+          locations.map((location, ix, array) => {
+            
+            return (
+              <>
+                {
+                  location.yearMonth !== array[0].yearMonth && location.yearMonth !== array[ix-1].yearMonth ? <AddLocationButton /> : null
+                }
+                {
+                  // show month title if it's the first location in the month
+                  ix === 0 || location.yearMonth !== array[ix-1].yearMonth ? <MonthTitle yearMonth={location.yearMonth} /> : null
+                }
+                <LocationCard key={`${location._id}`} location={location} />
+              </>
+            )
+          })
+        }
     </main>
   );
 }
+
+export default Page;

app/ui/BillBadge.tsx

@@ -2,9 +2,8 @@ import { FC } from "react"
 import { Bill } from "../lib/db-types"
 
 export interface BillBadgeProps {
-    bill: Bill,
-    // onClick:()=>void,
+    bill: Bill
 };
 
 export const BillBadge:FC<BillBadgeProps> = ({bill: { name, paid }}) =>
-    <div className={`badge badge-lg badge-${paid?"success":"neutral"} cursor-pointer`}>{name}</div>
+    <div className={`badge badge-lg ${paid} ${paid?"badge-success":" badge-outline"} cursor-pointer`}>{name}</div>

app/ui/LocationCard.tsx

@@ -4,21 +4,20 @@ import { Cog8ToothIcon, PlusCircleIcon } from "@heroicons/react/24/outline";
 import { FC } from "react";
 import { BillBadge } from "./BillBadge";
 import { Bill, Location } from "../lib/db-types";
+import { formatYearMonth } from "../lib/format";
 
 export interface LocationCardProps {
-    month: Date,
-    location: Location,
-    bills: Bill[]
+    location: Location
 }
 
-export const LocationCard:FC<LocationCardProps> = ({month, location: { name }, bills}) => 
+export const LocationCard:FC<LocationCardProps> = ({location: { name, yearMonth, bills }}) => 
 <div className="card card-compact card-bordered max-w-[36em] bg-base-100 shadow-s my-1">
     <div className="card-body">
     <Cog8ToothIcon className="h-[1em] w-[1em] absolute cursor-pointer top-3 right-3 text-2xl" />
-    <h2 className="card-title">{month.getFullYear()}-{month.getMonth()+1} {name}</h2>
+    <h2 className="card-title">{formatYearMonth(yearMonth)} {name}</h2>
     <div className="card-actions">
         {
-            bills.map(bill => <BillBadge key={bill.id} bill={bill} />)
+            bills.map(bill => <BillBadge key={`${bill.id}`} bill={bill} />)
         }
         <div className="tooltip" data-tip="Dodaj novi tip računa">
             <PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-2xl" />

app/ui/MonthTitle.tsx

@@ -1,8 +1,9 @@
 import { FC } from "react";
+import { formatYearMonth } from "../lib/format";
 
 export interface MonthTitleProps {
-    month: Date;
+    yearMonth: number;
 }
 
-export const MonthTitle:FC<MonthTitleProps> = ({month}) =>
-<div className="divider text-2xl">{`${month.getFullYear()}-${month.getMonth()+1}`}</div>
+export const MonthTitle:FC<MonthTitleProps> = ({yearMonth}) =>
+<div className="divider text-2xl">{`${formatYearMonth(yearMonth)}`}</div>