From 5fda34fef93f31ef976e5c36bb57a99eeae12b55 Mon Sep 17 00:00:00 2001
From: dhain <d.hain@gmx.at>
Date: Mon, 26 Sep 2022 19:03:45 +0200
Subject: [PATCH 1/6] bootstrap icons dependency

---
 frontend/svelte/package.json | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/svelte/package.json b/frontend/svelte/package.json
index 3086444..0926410 100644
--- a/frontend/svelte/package.json
+++ b/frontend/svelte/package.json
@@ -19,5 +19,8 @@
 		"typescript": "^4.7.4",
 		"vite": "^3.1.0"
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"bootstrap-icons": "^1.9.1"
+	}
 }

From 1c1d758ab15b2d132417cf15621ec922e1d33871 Mon Sep 17 00:00:00 2001
From: dhain <d.hain@gmx.at>
Date: Mon, 26 Sep 2022 23:07:39 +0200
Subject: [PATCH 2/6] jwt oba nix geht

---
 .../api/note/content-types/note/schema.json   |  5 ++-
 frontend/svelte/src/models/PomeloUtils.ts     | 14 ++++++-
 frontend/svelte/src/routes/+page.svelte       | 41 ++++++-------------
 frontend/svelte/src/routes/+page.ts           | 17 ++++++++
 4 files changed, 45 insertions(+), 32 deletions(-)
 create mode 100644 frontend/svelte/src/routes/+page.ts

diff --git a/backend/strapi/src/api/note/content-types/note/schema.json b/backend/strapi/src/api/note/content-types/note/schema.json
index 5c0c29b..356eed2 100644
--- a/backend/strapi/src/api/note/content-types/note/schema.json
+++ b/backend/strapi/src/api/note/content-types/note/schema.json
@@ -21,8 +21,9 @@
     },
     "owners": {
       "type": "relation",
-      "relation": "oneToMany",
-      "target": "plugin::users-permissions.user"
+      "relation": "manyToMany",
+      "target": "plugin::users-permissions.user",
+      "inversedBy": "notes"
     },
     "lastViewed": {
       "type": "datetime",
diff --git a/frontend/svelte/src/models/PomeloUtils.ts b/frontend/svelte/src/models/PomeloUtils.ts
index 62c9903..e61190e 100644
--- a/frontend/svelte/src/models/PomeloUtils.ts
+++ b/frontend/svelte/src/models/PomeloUtils.ts
@@ -1,3 +1,5 @@
+import {parseCookies} from "nookies";
+
 /**
  * Capitalises first letter of string.
  * @param str
@@ -18,4 +20,14 @@ export async function bearerFetch(endpoint: string, jwt: string, baseUrl: string
             Authorization: `Bearer ${jwt}`
         }
     });
-}
\ No newline at end of file
+}
+
+
+const getJwtCookie = () => {
+    return parseCookies("/").jwt;
+};
+
+/**
+ * JWT Cookie
+ */
+export const jwt: string = getJwtCookie();
\ No newline at end of file
diff --git a/frontend/svelte/src/routes/+page.svelte b/frontend/svelte/src/routes/+page.svelte
index 871b615..491a930 100644
--- a/frontend/svelte/src/routes/+page.svelte
+++ b/frontend/svelte/src/routes/+page.svelte
@@ -1,40 +1,23 @@
 <script lang="ts">
     import type {Note} from "../types";
+    import {bearerFetch, jwt} from "../models/PomeloUtils";
     import {onMount} from "svelte";
-    import {parseCookies} from "nookies";
-    import {bearerFetch} from "../models/PomeloUtils";
-    import {User} from "../models/user";
 
-    let user: User;
+    const endpoint = "/notes";
 
+    let notes: Note[];
+    // onMount(async () => {
+    //     const response = await bearerFetch(endpoint, jwt);
+    //     debugger;
+    //     var data = await response.json();
+    //     console.log("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa")
+    // });
 
-    onMount(async () => {
-        const jwt = parseCookies("/").jwt;
-        let invalid = !jwt;
-
-        if (!invalid) {
-            const request = await bearerFetch("/users/me", jwt);
-            const response = await  request.json();
-
-            if ('error' in response){
-                invalid = true;
-            } else {
-                user = new User(response);
-            }
-        }
-
-        if (invalid) {
-            window.location = "/login";
-        }
+    onMount(() => {
+        console.log("snasidbsa dghsasa");
     });
 
-
-
-    //TODO: TEMP!!!
-    const tempJson = "[{\"id\":0,\"title\":\"samc\",\"content\":\"SAAAAAAAAAAMC\",\"lastOpened\":\"2022-09-25T10:45:49.903Z\"},{\"id\":1,\"title\":\"Push\",\"content\":\"Kollege Pusch\",\"lastOpened\":\"2022-09-25T10:50:49.903Z\"},{\"id\":2,\"title\":\"Mike\",\"content\":\"C Meister\",\"lastOpened\":\"2022-09-25T10:09:13.903Z\"},{\"id\":3,\"title\":\"kekw\",\"content\":\"OMEGALUL\",\"lastOpened\":\"2022-09-25T12:03:49.903Z\"}]";
-    //TODO: TEMP!!!
-
-    let notes: Note[] = JSON.parse(tempJson);
+    console.log(notes);
     sortNotesByDate();
     window.localStorage.setItem("notes", JSON.stringify(notes));
 
diff --git a/frontend/svelte/src/routes/+page.ts b/frontend/svelte/src/routes/+page.ts
new file mode 100644
index 0000000..6f6de71
--- /dev/null
+++ b/frontend/svelte/src/routes/+page.ts
@@ -0,0 +1,17 @@
+import {bearerFetch, jwt} from "../models/PomeloUtils";
+
+/** @type {import('./$types').PageLoad} */
+export async function load({params}) {
+    let invalid = !jwt;
+
+    if (!invalid) {
+        const request = await bearerFetch("/users/me", jwt);
+        const response = await request.json();
+
+        invalid = "error" in response;
+    }
+
+    if (invalid) {
+        window.location = "/login";
+    }
+}
\ No newline at end of file

From 545369101658a1b3585579025bcfe46aaeef0412 Mon Sep 17 00:00:00 2001
From: dhain <d.hain@gmx.at>
Date: Tue, 27 Sep 2022 10:15:32 +0200
Subject: [PATCH 3/6] localstorage weg

---
 frontend/svelte/package-lock.json             |  4 +---
 frontend/svelte/src/{ => models}/types.ts     |  0
 frontend/svelte/src/routes/+layout.js         |  1 -
 frontend/svelte/src/routes/+page.svelte       | 24 +------------------
 frontend/svelte/src/routes/+page.ts           |  2 +-
 .../svelte/src/routes/editor/+page.svelte     |  2 +-
 6 files changed, 4 insertions(+), 29 deletions(-)
 rename frontend/svelte/src/{ => models}/types.ts (100%)
 delete mode 100644 frontend/svelte/src/routes/+layout.js

diff --git a/frontend/svelte/package-lock.json b/frontend/svelte/package-lock.json
index beb453c..63551ad 100644
--- a/frontend/svelte/package-lock.json
+++ b/frontend/svelte/package-lock.json
@@ -8,9 +8,7 @@
 			"name": "svelte_pages",
 			"version": "0.0.1",
 			"dependencies": {
-				"bootstrap-icons": "^1.9.1"
-			},
-			"dependencies": {
+				"bootstrap-icons": "^1.9.1",
 				"nookies": "^2.5.2"
 			},
 			"devDependencies": {
diff --git a/frontend/svelte/src/types.ts b/frontend/svelte/src/models/types.ts
similarity index 100%
rename from frontend/svelte/src/types.ts
rename to frontend/svelte/src/models/types.ts
diff --git a/frontend/svelte/src/routes/+layout.js b/frontend/svelte/src/routes/+layout.js
deleted file mode 100644
index 5829b7e..0000000
--- a/frontend/svelte/src/routes/+layout.js
+++ /dev/null
@@ -1 +0,0 @@
-export const ssr = false;
\ No newline at end of file
diff --git a/frontend/svelte/src/routes/+page.svelte b/frontend/svelte/src/routes/+page.svelte
index 491a930..c58033b 100644
--- a/frontend/svelte/src/routes/+page.svelte
+++ b/frontend/svelte/src/routes/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import type {Note} from "../types";
+    import type {Note} from "../models/types";
     import {bearerFetch, jwt} from "../models/PomeloUtils";
     import {onMount} from "svelte";
 
@@ -18,8 +18,6 @@
     });
 
     console.log(notes);
-    sortNotesByDate();
-    window.localStorage.setItem("notes", JSON.stringify(notes));
 
     /**
      * Reloads the Notes Listing
@@ -29,23 +27,6 @@
         notes = notes.filter(i => i === i);
     }
 
-    /**
-     * Sorts the "notes" Array by the lastOpened Property of a Note
-     */
-    function sortNotesByDate() {
-        notes.sort(function (x, y) {
-            if (x.lastOpened > y.lastOpened) {
-                return 1;
-            }
-
-            if (x.lastOpened < y.lastOpened) {
-                return -1;
-            }
-
-            return 0;
-        });
-    }
-
     /**
      * Gives the user a prompt to input the new title of the note and creates it if the title is valid
      */
@@ -55,9 +36,7 @@
         if (newTitle != null && newTitle != '') {
             addNote(newTitle);
             console.log(notes)
-            sortNotesByDate();
             reloadNotesListing();
-            window.localStorage.setItem("notes", JSON.stringify(notes));
         }
     }
 
@@ -119,7 +98,6 @@
      * @param note The note the user clicked on
      */
     function onNoteLiClick(note) {
-        window.localStorage.setItem("clickedNoteId", note.id);
         window.location = "/editor";
     }
 </script>
diff --git a/frontend/svelte/src/routes/+page.ts b/frontend/svelte/src/routes/+page.ts
index 6f6de71..7dead99 100644
--- a/frontend/svelte/src/routes/+page.ts
+++ b/frontend/svelte/src/routes/+page.ts
@@ -12,6 +12,6 @@ export async function load({params}) {
     }
 
     if (invalid) {
-        window.location = "/login";
+        // window.location = "/login";
     }
 }
\ No newline at end of file
diff --git a/frontend/svelte/src/routes/editor/+page.svelte b/frontend/svelte/src/routes/editor/+page.svelte
index eeab65c..b8f0b1a 100644
--- a/frontend/svelte/src/routes/editor/+page.svelte
+++ b/frontend/svelte/src/routes/editor/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import type {Note} from "../../types";
+    import type {Note} from "../../models/types";
 
     let notes: Note[] = JSON.parse(window.localStorage.getItem("notes"));
     const clickedNoteId = window.localStorage.getItem("clickedNoteId");

From fe1d24a23e0a1b05a14b53416b300dfda98e2e22 Mon Sep 17 00:00:00 2001
From: dhain <d.hain@gmx.at>
Date: Tue, 27 Sep 2022 10:44:27 +0200
Subject: [PATCH 4/6] funktioniert mit actual strapi JSON layout

---
 frontend/svelte/src/models/types.ts     |  7 +-
 frontend/svelte/src/routes/+page.svelte | 89 +++++++++++++------------
 frontend/svelte/src/routes/+page.ts     | 31 ++++-----
 3 files changed, 67 insertions(+), 60 deletions(-)

diff --git a/frontend/svelte/src/models/types.ts b/frontend/svelte/src/models/types.ts
index 9814953..5ded795 100644
--- a/frontend/svelte/src/models/types.ts
+++ b/frontend/svelte/src/models/types.ts
@@ -1,6 +1,11 @@
 export interface Note {
     id: number;
+    attributes: Attribute;
+}
+
+export interface Attribute {
     title: string;
     content: string;
-    lastOpened: string;
+
+    lastViewed: Date;
 }
\ No newline at end of file
diff --git a/frontend/svelte/src/routes/+page.svelte b/frontend/svelte/src/routes/+page.svelte
index c58033b..8818689 100644
--- a/frontend/svelte/src/routes/+page.svelte
+++ b/frontend/svelte/src/routes/+page.svelte
@@ -5,14 +5,11 @@
 
     const endpoint = "/notes";
 
-    let notes: Note[];
-    // onMount(async () => {
-    //     const response = await bearerFetch(endpoint, jwt);
-    //     debugger;
-    //     var data = await response.json();
-    //     console.log("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa")
-    // });
+    //:TODO TEMP!!!
+    const jsonStr = "[{\"id\":0,\"attributes\":{\"title\":\"mike\",\"content\":\"C Moasta\",\"lastViewed\":\"2022-09-27\"}},{\"id\":1,\"attributes\":{\"title\":\"samc\",\"content\":\"drupal gott\",\"lastViewed\":\"1999-09-09\"}}]";
+    //:TODO TEMP!!!
 
+    let notes: Note[] = JSON.parse(jsonStr);
     onMount(() => {
         console.log("snasidbsa dghsasa");
     });
@@ -34,29 +31,31 @@
         let newTitle = prompt('Name of the new Note');
         console.log(notes)
         if (newTitle != null && newTitle != '') {
-            addNote(newTitle);
+            // addNote(newTitle);
             console.log(notes)
             reloadNotesListing();
         }
     }
 
-    /**
-     * Adds a new note to the "notes" Array with:
-     *  * the latest id + 1 (or 0 if no notes exist)
-     *  * no content
-     * @param title The title of the new Note
-     */
-    function addNote(title: string) {
-        let date = new Date();
-        let newNoteId = (notes.length == 0) ? 0 : notes[notes.length - 1].id + 1
-        let note: Note = {
-            id: newNoteId,
-            title: title,
-            content: "",
-            lastOpened: date.toISOString()
-        };
-        notes.push(note);
-    }
+    // //so a schas
+    // /**
+    //  * Adds a new note to the "notes" Array with:
+    //  *  * the latest id + 1 (or 0 if no notes exist)
+    //  *  * no content
+    //  * @param title The title of the new Note
+    //  */
+    // function addNote(title: string) {
+    //     let date = new Date();
+    //     let newNoteId = (notes.length == 0) ? 0 : notes[notes.length - 1].id + 1
+    //     let note: Note = {
+    //         id: newNoteId,
+    //         attributes:
+    //         title: title,
+    //         content: "",
+    //         lastOpened: date.toISOString()
+    //     };
+    //     notes.push(note);
+    // }
 
     /**
      * Gives the user a prompt if they are sure to delete this note and deletes it if they confirm
@@ -121,28 +120,30 @@
     </div>
 
     <div class="offset-md-4 col-md-4">
-        <!-- Notes listing -->
-        <ul>
-            {#each notes as note}
-                <li on:mouseover={() => handleMouseOverLi(note.id)}
-                    on:mouseout={() => handleMouseOutLi(note.id)}>
-                    <div class="row">
-                        <div class="col-md-10" on:click={() => onNoteLiClick(note)}>
+        {#if notes.length !== 0}
+            <!-- Notes listing -->
+            <ul>
+                {#each notes as note}
+                    <li on:mouseover={() => handleMouseOverLi(note.id)}
+                        on:mouseout={() => handleMouseOutLi(note.id)}>
+                        <div class="row">
+                            <div class="col-md-10" on:click={() => onNoteLiClick(note)}>
                         <span>
-                            {note.title} <br/>
-                            {note.lastOpened}
+                            {note.attributes.title} <br/>
+                            {note.attributes.lastViewed}
                         </span>
+                            </div>
+                            <div class="col-md-1">
+                                <button style="display: none" id={"noteButton" + note.id}
+                                        on:click={() => removeNotePrompt(note)}>
+                                    <i class="bi bi-x"></i>
+                                </button>
+                            </div>
                         </div>
-                        <div class="col-md-1">
-                            <button style="display: none" id={"noteButton" + note.id}
-                                    on:click={() => removeNotePrompt(note)}>
-                                <i class="bi bi-x"></i>
-                            </button>
-                        </div>
-                    </div>
-                </li>
-            {/each}
-        </ul>
+                    </li>
+                {/each}
+            </ul>
+        {/if}
     </div>
 </div>
 </body>
diff --git a/frontend/svelte/src/routes/+page.ts b/frontend/svelte/src/routes/+page.ts
index 7dead99..b73412f 100644
--- a/frontend/svelte/src/routes/+page.ts
+++ b/frontend/svelte/src/routes/+page.ts
@@ -1,17 +1,18 @@
 import {bearerFetch, jwt} from "../models/PomeloUtils";
 
-/** @type {import('./$types').PageLoad} */
-export async function load({params}) {
-    let invalid = !jwt;
-
-    if (!invalid) {
-        const request = await bearerFetch("/users/me", jwt);
-        const response = await request.json();
-
-        invalid = "error" in response;
-    }
-
-    if (invalid) {
-        // window.location = "/login";
-    }
-}
\ No newline at end of file
+// /** @type {import('./$types').PageLoad} */
+// export async function load() {
+//     let invalid = !jwt;
+//
+//     if (!invalid) {
+//         const request = await bearerFetch("/users/me", jwt);
+//         const response = await request.json();
+//
+//         invalid = "error" in response;
+//     }
+//
+//     if (invalid) {
+//         // @ts-ignore
+//         window.location = "/login";
+//     }
+// }
\ No newline at end of file

From 6da2807b0a3126e7c7993a0bdd4cd9adad6ccc24 Mon Sep 17 00:00:00 2001
From: dhain <d.hain@gmx.at>
Date: Wed, 28 Sep 2022 10:59:17 +0200
Subject: [PATCH 5/6] bissl styling bei listing

---
 frontend/svelte/src/routes/+page.svelte | 45 +++++++++++++++++--------
 frontend/svelte/src/routes/+page.ts     |  2 +-
 2 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/frontend/svelte/src/routes/+page.svelte b/frontend/svelte/src/routes/+page.svelte
index 8818689..060fd09 100644
--- a/frontend/svelte/src/routes/+page.svelte
+++ b/frontend/svelte/src/routes/+page.svelte
@@ -1,12 +1,11 @@
 <script lang="ts">
     import type {Note} from "../models/types";
-    import {bearerFetch, jwt} from "../models/PomeloUtils";
     import {onMount} from "svelte";
 
     const endpoint = "/notes";
 
     //:TODO TEMP!!!
-    const jsonStr = "[{\"id\":0,\"attributes\":{\"title\":\"mike\",\"content\":\"C Moasta\",\"lastViewed\":\"2022-09-27\"}},{\"id\":1,\"attributes\":{\"title\":\"samc\",\"content\":\"drupal gott\",\"lastViewed\":\"1999-09-09\"}}]";
+    const jsonStr = "[{\"id\":0,\"attributes\":{\"title\":\"mike\",\"content\":\"C Moasta\",\"lastViewed\":\"2022-09-27\"}},{\"id\":1,\"attributes\":{\"title\":\"samc\",\"content\":\"drupal gott\",\"lastViewed\":\"1999-09-09\"}},{\"id\":2,\"attributes\":{\"title\":\"DIO\",\"content\":\"in all CAPS\",\"lastViewed\":\"2022-09-27\"}},{\"id\":3,\"attributes\":{\"title\":\"Eren\",\"content\":\"Jäger\",\"lastViewed\":\"2022-09-27\"}},{\"id\":4,\"attributes\":{\"title\":\"stow\",\"content\":\"Beitn Chef\",\"lastViewed\":\"2022-09-27\"}},{\"id\":5,\"attributes\":{\"title\":\"Wonder of U\",\"content\":\"Umm... so, personally... this is the first time this has happened, so I'm a bit surprised. Only a centimeter away... I mean, I don't think there's ever been someone who's gotten that close to me... without a, you know... calamity occurring. I'm not really... not really sure what happens at one centimeter away... 'cause it's my first time. I don't really understand it either. Seriously. But in the flow of calamity... there's nobody who can attack me. Not a single person. That, I know for sure. Wonder of U.\",\"lastViewed\":\"2022-09-27\"}}]";
     //:TODO TEMP!!!
 
     let notes: Note[] = JSON.parse(jsonStr);
@@ -98,6 +97,7 @@
      */
     function onNoteLiClick(note) {
         window.location = "/editor";
+        note.attributes.lastViewed = new Date().toISOString();
     }
 </script>
 
@@ -113,12 +113,15 @@
 </head>
 
 <body>
+<div class="container">
 <div class="row">
     <!-- Add Note Button -->
     <div class="offset-md-7 col-md-1">
         <button class="btn btn-primary" on:click={() => addNotePrompt()}>Add Note</button>
     </div>
+</div>
 
+<div class="row">
     <div class="offset-md-4 col-md-4">
         {#if notes.length !== 0}
             <!-- Notes listing -->
@@ -127,13 +130,16 @@
                     <li on:mouseover={() => handleMouseOverLi(note.id)}
                         on:mouseout={() => handleMouseOutLi(note.id)}>
                         <div class="row">
-                            <div class="col-md-10" on:click={() => onNoteLiClick(note)}>
-                        <span>
-                            {note.attributes.title} <br/>
-                            {note.attributes.lastViewed}
-                        </span>
+                            <div class="col-10" on:click={() => onNoteLiClick(note)}>
+                                <div>
+                                    {note.attributes.title}
+                                </div>
+                                <div class="list-date-text">
+                                    {note.attributes.lastViewed}
+                                </div>
                             </div>
-                            <div class="col-md-1">
+
+                            <div class="col-1">
                                 <button style="display: none" id={"noteButton" + note.id}
                                         on:click={() => removeNotePrompt(note)}>
                                     <i class="bi bi-x"></i>
@@ -146,6 +152,7 @@
         {/if}
     </div>
 </div>
+</div>
 </body>
 </html>
 
@@ -153,6 +160,7 @@
     html,
     :root {
         --main-txt-color: black;
+        --sub-txt-color: gray;
         --cross-txt-color: red;
 
         --color-primary: #fff494;
@@ -169,19 +177,23 @@
         background-color: #ffffff;
     }
 
-    a {
-        color: var(--main-txt-color);
-        text-decoration: none;
-    }
-
     li {
         list-style: none;
         padding: 6px 10px;
+        margin-bottom: 5px;
+        margin-top: 5px;
         border-bottom: 1px solid #ddd;
+        border-top: 1px solid #ddd;
+        border-radius: 10px;
         border-bottom-color: var(--color-primary-900);
+        border-top-color: var(--color-primary-900);
         background-color: var(--color-primary-600);
     }
 
+    li:hover {
+        background-color: var(--color-primary-700);
+    }
+
     li button {
         float: right;
         border: none;
@@ -190,10 +202,11 @@
         margin: 0;
         font-size: 18px;
         cursor: pointer;
+        transform: scale(1.5);
     }
 
     li button:hover {
-        transform: scale(1.7);
+        transform: scale(2);
     }
 
     li:last-child {
@@ -219,4 +232,8 @@
         border: var(--color-primary-900);
         color: var(--main-txt-color);
     }
+
+    .list-date-text {
+        color: var(--sub-txt-color);
+    }
 </style>
\ No newline at end of file
diff --git a/frontend/svelte/src/routes/+page.ts b/frontend/svelte/src/routes/+page.ts
index b73412f..e5159f4 100644
--- a/frontend/svelte/src/routes/+page.ts
+++ b/frontend/svelte/src/routes/+page.ts
@@ -1,5 +1,5 @@
 import {bearerFetch, jwt} from "../models/PomeloUtils";
-
+//
 // /** @type {import('./$types').PageLoad} */
 // export async function load() {
 //     let invalid = !jwt;

From 982f845cfcf28852752078a4f48e721525a21588 Mon Sep 17 00:00:00 2001
From: dhain <d.hain@gmx.at>
Date: Tue, 4 Oct 2022 10:25:06 +0200
Subject: [PATCH 6/6] listing cums from strap NO MORE local json &str date in
 listing very butiful

---
 frontend/svelte/src/models/PomeloUtils.ts |   1 +
 frontend/svelte/src/routes/+page.svelte   | 144 ++++++++++++----------
 frontend/svelte/src/routes/+page.ts       |  36 +++---
 3 files changed, 97 insertions(+), 84 deletions(-)

diff --git a/frontend/svelte/src/models/PomeloUtils.ts b/frontend/svelte/src/models/PomeloUtils.ts
index e61190e..5d290ae 100644
--- a/frontend/svelte/src/models/PomeloUtils.ts
+++ b/frontend/svelte/src/models/PomeloUtils.ts
@@ -24,6 +24,7 @@ export async function bearerFetch(endpoint: string, jwt: string, baseUrl: string
 
 
 const getJwtCookie = () => {
+    // @ts-ignore
     return parseCookies("/").jwt;
 };
 
diff --git a/frontend/svelte/src/routes/+page.svelte b/frontend/svelte/src/routes/+page.svelte
index 060fd09..f52d418 100644
--- a/frontend/svelte/src/routes/+page.svelte
+++ b/frontend/svelte/src/routes/+page.svelte
@@ -1,20 +1,28 @@
 <script lang="ts">
     import type {Note} from "../models/types";
     import {onMount} from "svelte";
+    import {bearerFetch, jwt} from "../models/PomeloUtils";
 
     const endpoint = "/notes";
 
-    //:TODO TEMP!!!
-    const jsonStr = "[{\"id\":0,\"attributes\":{\"title\":\"mike\",\"content\":\"C Moasta\",\"lastViewed\":\"2022-09-27\"}},{\"id\":1,\"attributes\":{\"title\":\"samc\",\"content\":\"drupal gott\",\"lastViewed\":\"1999-09-09\"}},{\"id\":2,\"attributes\":{\"title\":\"DIO\",\"content\":\"in all CAPS\",\"lastViewed\":\"2022-09-27\"}},{\"id\":3,\"attributes\":{\"title\":\"Eren\",\"content\":\"Jäger\",\"lastViewed\":\"2022-09-27\"}},{\"id\":4,\"attributes\":{\"title\":\"stow\",\"content\":\"Beitn Chef\",\"lastViewed\":\"2022-09-27\"}},{\"id\":5,\"attributes\":{\"title\":\"Wonder of U\",\"content\":\"Umm... so, personally... this is the first time this has happened, so I'm a bit surprised. Only a centimeter away... I mean, I don't think there's ever been someone who's gotten that close to me... without a, you know... calamity occurring. I'm not really... not really sure what happens at one centimeter away... 'cause it's my first time. I don't really understand it either. Seriously. But in the flow of calamity... there's nobody who can attack me. Not a single person. That, I know for sure. Wonder of U.\",\"lastViewed\":\"2022-09-27\"}}]";
-    //:TODO TEMP!!!
+    //
+    // //:TODO TEMP!!!
+    // const jsonStr = "[{\"id\":0,\"attributes\":{\"title\":\"mike\",\"content\":\"C Moasta\",\"lastViewed\":\"2022-09-27\"}},{\"id\":1,\"attributes\":{\"title\":\"samc\",\"content\":\"drupal gott\",\"lastViewed\":\"1999-09-09\"}},{\"id\":2,\"attributes\":{\"title\":\"DIO\",\"content\":\"in all CAPS\",\"lastViewed\":\"2022-09-27\"}},{\"id\":3,\"attributes\":{\"title\":\"Eren\",\"content\":\"Jäger\",\"lastViewed\":\"2022-09-27\"}},{\"id\":4,\"attributes\":{\"title\":\"stow\",\"content\":\"Beitn Chef\",\"lastViewed\":\"2022-09-27\"}},{\"id\":5,\"attributes\":{\"title\":\"Wonder of U\",\"content\":\"Umm... so, personally... this is the first time this has happened, so I'm a bit surprised. Only a centimeter away... I mean, I don't think there's ever been someone who's gotten that close to me... without a, you know... calamity occurring. I'm not really... not really sure what happens at one centimeter away... 'cause it's my first time. I don't really understand it either. Seriously. But in the flow of calamity... there's nobody who can attack me. Not a single person. That, I know for sure. Wonder of U.\",\"lastViewed\":\"2022-09-27\"}}]";
+    // //:TODO TEMP!!!
+    //
+    // let notes: Note[] = JSON.parse(jsonStr);
 
-    let notes: Note[] = JSON.parse(jsonStr);
-    onMount(() => {
-        console.log("snasidbsa dghsasa");
+    let notes: Note[];
+    onMount(async () => {
+        const response = await bearerFetch(endpoint, jwt);
+        let data = await response.json();
+        notes = data.data;
+        notes.forEach(note => {
+            note.attributes.lastViewed = new Date(note.attributes.lastViewed);
+        });
+        console.log(notes);
     });
 
-    console.log(notes);
-
     /**
      * Reloads the Notes Listing
      * (by doing something very intelligent)
@@ -30,48 +38,49 @@
         let newTitle = prompt('Name of the new Note');
         console.log(notes)
         if (newTitle != null && newTitle != '') {
-            // addNote(newTitle);
+            addNote(newTitle);
             console.log(notes)
             reloadNotesListing();
         }
     }
 
-    // //so a schas
-    // /**
-    //  * Adds a new note to the "notes" Array with:
-    //  *  * the latest id + 1 (or 0 if no notes exist)
-    //  *  * no content
-    //  * @param title The title of the new Note
-    //  */
-    // function addNote(title: string) {
-    //     let date = new Date();
-    //     let newNoteId = (notes.length == 0) ? 0 : notes[notes.length - 1].id + 1
-    //     let note: Note = {
-    //         id: newNoteId,
-    //         attributes:
-    //         title: title,
-    //         content: "",
-    //         lastOpened: date.toISOString()
-    //     };
-    //     notes.push(note);
-    // }
+    /**
+     * Adds a new note to the "notes" Array with:
+     *  * the latest id + 1 (or 0 if no notes exist)
+     *  * no content
+     *  * the current date as the "lastViewed" property
+     * @param title The title of the new Note
+     */
+    function addNote(title: string) {
+        const date = new Date();
+        const newNoteId: number = (notes.length == 0) ? 0 : notes[notes.length - 1].id + 1
+        const note: Note = {
+            id: newNoteId,
+            attributes: {
+                title: title,
+                content: "",
+                lastViewed: date
+            }
+        };
+        notes.push(note);
+    }
 
     /**
      * Gives the user a prompt if they are sure to delete this note and deletes it if they confirm
-     * @param note The note to be removed
+     * @param note The note to be deleted
      */
-    function removeNotePrompt(note) {
+    function deleteNotePrompt(note) {
         const reallyDelete = confirm("Do you really want to delete this Note?");
         if (reallyDelete) {
-            removeNote(note);
+            deleteNote(note);
         }
     }
 
     /**
-     * Removes the note from the "notes" Array
-     * @param note The note to be removed
+     * Deletes the note from the "notes" Array
+     * @param note The note to be deleted
      */
-    function removeNote(note) {
+    function deleteNote(note) {
         notes = notes.filter(i => i !== note);
     }
 
@@ -97,7 +106,7 @@
      */
     function onNoteLiClick(note) {
         window.location = "/editor";
-        note.attributes.lastViewed = new Date().toISOString();
+        note.attributes.lastViewed = new Date();
     }
 </script>
 
@@ -114,45 +123,45 @@
 
 <body>
 <div class="container">
-<div class="row">
-    <!-- Add Note Button -->
-    <div class="offset-md-7 col-md-1">
-        <button class="btn btn-primary" on:click={() => addNotePrompt()}>Add Note</button>
+    <div class="row">
+        <!-- Add Note Button -->
+        <div class="offset-md-7 col-md-1">
+            <button class="btn btn-primary" on:click={() => addNotePrompt()}>Add Note</button>
+        </div>
     </div>
-</div>
 
-<div class="row">
-    <div class="offset-md-4 col-md-4">
-        {#if notes.length !== 0}
-            <!-- Notes listing -->
-            <ul>
-                {#each notes as note}
-                    <li on:mouseover={() => handleMouseOverLi(note.id)}
-                        on:mouseout={() => handleMouseOutLi(note.id)}>
-                        <div class="row">
-                            <div class="col-10" on:click={() => onNoteLiClick(note)}>
-                                <div>
-                                    {note.attributes.title}
+    <div class="row">
+        <div class="offset-md-4 col-md-4">
+            {#if notes}
+                <!-- Notes listing -->
+                <ul>
+                    {#each notes as note}
+                        <li on:mouseover={() => handleMouseOverLi(note.id)}
+                            on:mouseout={() => handleMouseOutLi(note.id)}>
+                            <div class="row">
+                                <div class="col-10" on:click={() => onNoteLiClick(note)}>
+                                    <div>
+                                        {note.attributes.title}
+                                    </div>
+                                    <div class="list-date-text">
+                                        {note.attributes.lastViewed.toLocaleDateString()}
+                                    </div>
                                 </div>
-                                <div class="list-date-text">
-                                    {note.attributes.lastViewed}
+
+                                <div class="col-1">
+                                    <button style="display: none" id={"noteButton" + note.id}
+                                            on:click={() => deleteNotePrompt(note)}>
+                                        <i class="bi bi-x"></i>
+                                    </button>
                                 </div>
                             </div>
-
-                            <div class="col-1">
-                                <button style="display: none" id={"noteButton" + note.id}
-                                        on:click={() => removeNotePrompt(note)}>
-                                    <i class="bi bi-x"></i>
-                                </button>
-                            </div>
-                        </div>
-                    </li>
-                {/each}
-            </ul>
-        {/if}
+                        </li>
+                    {/each}
+                </ul>
+            {/if}
+        </div>
     </div>
 </div>
-</div>
 </body>
 </html>
 
@@ -235,5 +244,6 @@
 
     .list-date-text {
         color: var(--sub-txt-color);
+        font-size: 0.8314159265358979323846264338rem;
     }
 </style>
\ No newline at end of file
diff --git a/frontend/svelte/src/routes/+page.ts b/frontend/svelte/src/routes/+page.ts
index e5159f4..49e20b3 100644
--- a/frontend/svelte/src/routes/+page.ts
+++ b/frontend/svelte/src/routes/+page.ts
@@ -1,18 +1,20 @@
 import {bearerFetch, jwt} from "../models/PomeloUtils";
-//
-// /** @type {import('./$types').PageLoad} */
-// export async function load() {
-//     let invalid = !jwt;
-//
-//     if (!invalid) {
-//         const request = await bearerFetch("/users/me", jwt);
-//         const response = await request.json();
-//
-//         invalid = "error" in response;
-//     }
-//
-//     if (invalid) {
-//         // @ts-ignore
-//         window.location = "/login";
-//     }
-// }
\ No newline at end of file
+
+/** @type {import('./$types').PageLoad} */
+export async function load() {
+    let invalid = !jwt;
+
+    if (!invalid) {
+        const request = await bearerFetch("/users/me", jwt);
+        const response = await request.json();
+
+        invalid = "error" in response;
+    }
+
+    if (invalid) {
+        if (typeof window !== 'undefined') {
+            // @ts-ignore
+            window.location = "/login";
+        }
+    }
+}
\ No newline at end of file