More refactoring!

src/routes/+layout.svelte

@@ -1,4 +1,19 @@
-<style>
+<style>    
+    #content {
+        background: var(--light-2);
+
+        height: 100vh;
+        width: calc(100vw - 50px);
+        padding: 25px;
+        padding-top: 0px;
+
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        overflow-y: scroll;
+    }
+    
     :global(:root) {
         --dark-1: #2b2f36;
         --dark-2: #d8d8d8;
@@ -23,78 +38,17 @@
         box-shadow: 0px 2px 2.5px 0px var(--dark-2);
     }
 
-    #content {
-        background: var(--light-2);
-
-        height: 100vh;
-        width: calc(100vw - 50px);
-        padding: 25px;
-        padding-top: 0px;
-
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-
-        overflow-y: scroll;
-    }
-
-    #logo {
-
-        width: calc(100vw - 20px);
-
-        background: var(--dark-1);
-
-        padding: 5px;
-
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        align-items: center;
-
-        position: sticky;
-        top: 0;
-    }
-
-    #logo a {
-        padding: 10px;
-        color: var(--light-1);
-        font-weight: bold;
-    }
-
-    #logo img {
-        height: 30px;
-        width: auto;
-
-        display: block;
-    }
 </style>
 
 <script>
     /** @type {import('./$types').PageData} */
     export let data;
+
+    import Header from '$lib/components/Header.svelte';
 </script>
 
 <div id='content'>
-    <div id='logo'>
-        <a href='/'>
-            <img src='/icon_sanifae.svg' alt='Sanifae Logo'>
-        </a>
-        {#if data.username && data.username != 'false'}
-            <a href='/user/{data.username}'>
-                {data.username}
-            </a>
-            <a href='/logout'>
-                Log out
-            </a>
-            <a href='/new_post'>
-                Create
-            </a>
-        {:else}
-            <a href='/account'>
-                Log in / Register
-            </a>
-        {/if}
-    </div>
-    <slot></slot>
+    <Header data={data} />
+    <slot />
 </div>
 

src/routes/+page.svelte

@@ -1,23 +1,8 @@
 <script>
-    import Post from '$lib/components/Post.svelte';
-    import Button from '$lib/components/Button.svelte'
+    import PostList from '$lib/components/PostList.svelte';
 
     /** @type {import('./$types').PageData} */
     export let data;
 </script>
 
-{#each data.postJson.data as post}
-    <Post
-        success={post.success}
-        username={post.username}
-        content={post.content}
-        upvotes={post.upvotes}
-        downvotes={post.downvotes}
-        id={post.id}
-    ></Post>
-{/each}
-
-<p>
-    <Button clickFunc={() => { window.location.search = 'page=' + ((data.id)-1) }}>Previous page</Button>
-    <Button clickFunc={() => { window.location.search = 'page=' + ((data.id)+1) }}>Next page</Button>
-</p>
+<PostList data={data} />

src/routes/post/[post]/+page.js

@@ -7,10 +7,8 @@ export async function load({ fetch, params, url }) {
 
     await new Promise(resolve => setTimeout(resolve, 100));
 
-    const res = await fetch(`/api/postGet?id=${id}`);
+    const res = await fetch(`/api/postBulk?id=${id}`);
     const postJson = (await res.json());
 
-    console.log(postJson);
-
-    return postJson;
+    return {postJson};
 }

src/routes/post/[post]/+page.svelte

@@ -1,15 +1,8 @@
 <script>
-    import Post from '$lib/components/Post.svelte';
+    import PostList from '$lib/components/PostList.svelte';
 
     /** @type {import('./$types').PageData} */
     export let data;
 </script>
-<Post
-    success={data.data.success}
-    username={data.data.username}
-    content={data.data.content}
-    upvotes={data.data.upvotes}
-    downvotes={data.data.downvotes}
-    id={data.data.id}
-    isAuthor={data.isAuthor}
-></Post>
+
+<PostList data={data} />

src/routes/user/[user]/+page.js

@@ -16,5 +16,5 @@ export async function load({ fetch, params, url }) {
     const resUser = await fetch(`/api/userGet?user=${user}`);
     const postJsonUser = (await resUser.json()) || {};
 
-    return { postJson, id, postJsonUser };
+    return { postJson, id, postJsonUser, user };
 }

src/routes/user/[user]/+page.svelte

@@ -1,6 +1,7 @@
 <script>
-    import Post from '$lib/components/Post.svelte';
+    import Button from '$lib/components/Button.svelte'
     import Area from '$lib/components/Area.svelte';
+    import PostList from '$lib/components/PostList.svelte';
 
     /** @type {import('./$types').PageData} */
     export let data;
@@ -33,33 +34,18 @@
 {:else}
     <Area>
         <span slot="header">
-            <b>
-                Error
-            </b>
+            <a href='/users/{data.user}'>
+                {data.user}
+            </a>
         </span>
         <span slot="main">
         </span>
         <span slot="footer">
-            This user does not exist.
+            This user does not have any statistics available.
         </span>
     </Area>
 {/if}
 
 <h2>Posts</h2>
 
-{#each data.postJson as data}
-    <Post
-        success={data.data.success}
-        username={data.data.username}
-        content={data.data.content}
-        upvotes={data.data.upvotes}
-        downvotes={data.data.downvotes}
-        id={data.data.id}
-        isAuthor={data.isAuthor}
-    ></Post>
-{/each}
-
-<p>
-    <a data-sveltekit-reload href='?page={data.id+1}'>Next page</a>
-</p>
-<p></p>
+<PostList data={data} />