dovršen rendering homepage-a

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;