Merge pull request #27 from seanmorley15/development

Development

migrations/0010_lean_gamma_corps.sql

@@ -0,0 +1 @@
+ALTER TABLE "user" ADD COLUMN "icon" text;

migrations/meta/0010_snapshot.json

@@ -0,0 +1,207 @@
+{
+  "id": "d6cd08c8-9dc8-42df-aab9-0f5800602864",
+  "prevId": "1d83805d-6ee2-4dae-87a6-5af6f2d5add3",
+  "version": "5",
+  "dialect": "pg",
+  "tables": {
+    "featuredAdventures": {
+      "name": "featuredAdventures",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "serial",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "location": {
+          "name": "location",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "session": {
+      "name": "session",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "expires_at": {
+          "name": "expires_at",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "session_user_id_user_id_fk": {
+          "name": "session_user_id_user_id_fk",
+          "tableFrom": "session",
+          "tableTo": "user",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "sharedAdventures": {
+      "name": "sharedAdventures",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "data": {
+          "name": "data",
+          "type": "json",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "user": {
+      "name": "user",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "username": {
+          "name": "username",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "first_name": {
+          "name": "first_name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "last_name": {
+          "name": "last_name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "icon": {
+          "name": "icon",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "hashed_password": {
+          "name": "hashed_password",
+          "type": "varchar",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "userVisitedAdventures": {
+      "name": "userVisitedAdventures",
+      "schema": "",
+      "columns": {
+        "adventure_id": {
+          "name": "adventure_id",
+          "type": "serial",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "adventure_name": {
+          "name": "adventure_name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "location": {
+          "name": "location",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "visited_date": {
+          "name": "visited_date",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "userVisitedAdventures_user_id_user_id_fk": {
+          "name": "userVisitedAdventures_user_id_user_id_fk",
+          "tableFrom": "userVisitedAdventures",
+          "tableTo": "user",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    }
+  },
+  "enums": {},
+  "schemas": {},
+  "_meta": {
+    "columns": {},
+    "schemas": {},
+    "tables": {}
+  }
+}

migrations/meta/_journal.json

@@ -71,6 +71,13 @@
       "when": 1712407140727,
       "tag": "0009_spotty_madame_web",
       "breakpoints": true
+    },
+    {
+      "idx": 10,
+      "version": "5",
+      "when": 1712842196443,
+      "tag": "0010_lean_gamma_corps",
+      "breakpoints": true
     }
   ]
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "adventurelog",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "Embark, Explore, Remember. 🌍",
   "private": true,
   "scripts": {

src/lib/components/UserAvatar.svelte

@@ -2,7 +2,14 @@
   import { enhance } from "$app/forms";
   import { goto } from "$app/navigation";
   export let user: any;
-  let firstLetter = user.first_name.charAt(0);
+
+  let icon: string = "";
+
+  if (user.icon != null && user.icon != "") {
+    icon = user.icon;
+  } else {
+    icon = user.username.charAt(0);
+  }
 
   async function navToSettings() {
     goto("/settings");
@@ -15,7 +22,7 @@
 <div class="dropdown dropdown-bottom dropdown-end" tabindex="0" role="button">
   <div class="avatar placeholder">
     <div class="bg-neutral text-neutral-content rounded-full w-10 ml-4">
-      <span class="text-2xl -mt-0.5">{firstLetter}</span>
+      <span class="text-2xl -mt-0.5">{icon}</span>
     </div>
   </div>
   <!-- svelte-ignore a11y-missing-attribute -->
@@ -26,6 +33,7 @@
   >
     <!-- svelte-ignore a11y-missing-attribute -->
     <!-- svelte-ignore a11y-missing-attribute -->
+    <p class="text-lg ml-4 font-bold">Hi, {user.first_name} {user.last_name}</p>
     <li><a>Profile</a></li>
     <li><button on:click={navToLog}>My Log</button></li>
     <li><button on:click={navToSettings}>Settings</button></li>

src/lib/db/schema.ts

@@ -23,6 +23,7 @@ export const userTable = pgTable("user", {
   username: text("username").notNull(),
   first_name: text("first_name").notNull(),
   last_name: text("last_name").notNull(),
+  icon: text("icon"),
   hashed_password: varchar("hashed_password").notNull(),
 });
 

src/lib/server/auth.ts

@@ -19,6 +19,7 @@ export const lucia = new Lucia(adapter, {
       id: attributes.id,
       first_name: attributes.first_name,
       last_name: attributes.last_name,
+      icon: attributes.icon,
     };
   },
 });
@@ -35,5 +36,6 @@ export interface DatabaseUser {
   username: string;
   first_name: string;
   last_name: string;
+  icon: string;
   hashed_password: string;
 }

src/routes/log/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   export let data;
   let adventures: Adventure[] = [];
+  let isLoading = true;
 
   import AdventureCard from "$lib/components/AdventureCard.svelte";
   import type { Adventure } from "$lib/utils/types";
@@ -36,6 +37,7 @@
   onMount(async () => {
     console.log(data);
     adventures = data.result.adventures;
+    isLoading = false;
   });
 
   let count = 0;
@@ -243,6 +245,12 @@
   </div>
 {/if}
 
+{#if isLoading}
+  <div class="flex justify-center items-center w-full mt-16">
+    <span class="loading loading-spinner w-24 h-24"></span>
+  </div>
+{/if}
+
 {#if isShowingToast}
   <SucessToast action={toastAction} />
 {/if}
@@ -274,14 +282,14 @@
   {/each}
 </div>
 
-{#if adventures.length == 0}
+{#if adventures.length == 0 && !isLoading}
   <div class="flex flex-col items-center justify-center mt-16">
     <article class="prose mb-4"><h2>Add some adventures!</h2></article>
     <img src={mapDrawing} width="25%" alt="Logo" />
   </div>
 {/if}
 
-{#if adventures.length != 0}
+{#if adventures.length != 0 && !isLoading}
   <div class="flex justify-center items-center w-full mt-4">
     <article class="prose">
       <h2 class="text-center">Actions</h2>

src/routes/settings/+page.server.ts

@@ -20,6 +20,7 @@ export const actions: Actions = {
     let username = formData.get("username");
     let firstName = formData.get("first_name");
     let lastName = formData.get("last_name");
+    let icon = formData.get("icon");
 
     let password = formData.get("password");
 
@@ -32,6 +33,15 @@ export const actions: Actions = {
         };
     }
 
+    if (icon.length > 1) {
+        return {
+            status: 400,
+            body: {
+                message: "Icon must be a single character"
+            }
+        };
+    }
+
     if (password) {
         let hashedPassword = await new Argon2id().hash(password);
         console.log(hashedPassword)
@@ -47,6 +57,7 @@ export const actions: Actions = {
             username: username,
             first_name: firstName,
             last_name: lastName,
+            icon: icon
         })
         .where(eq(userTable.id, userId));
 

src/routes/settings/+page.svelte

@@ -6,6 +6,7 @@
     let first_name = data.user?.first_name;
     let last_name = data.user?.last_name;
     let user_id = data.user?.id;
+    let icon = data.user?.icon;
 </script>
 
 <h1 class="text-center font-extrabold text-4xl mb-6">Settings Page</h1>
@@ -37,6 +38,14 @@
             id="last_name"
             class="block mb-2 input input-bordered w-full max-w-xs"
         /><br />
+        <label for="icon">Profile Icon (emoji)</label>
+        <input
+            type="emoji"
+            bind:value={icon}
+            name="icon"
+            id="icon"
+            class="block mb-2 input input-bordered w-full max-w-xs"
+        /><br />
         <label for="password">Password</label>
         <input
             type="password"

src/routes/signup/+page.svelte

@@ -1,17 +1,56 @@
 <!-- routes/signup/+page.svelte -->
 <script lang="ts">
   import { enhance } from "$app/forms";
+  import { getRandomQuote } from "$lib";
+  import { onMount } from "svelte";
+  let quote: string = "";
+  onMount(async () => {
+    quote = getRandomQuote();
+  });
 </script>
 
-<h1>Sign up</h1>
+<article class="text-center text-4xl font-extrabold">
-<form method="post" use:enhance>
+  <h1>Signup</h1>
-  <label for="username">Username</label>
+</article>
-  <label for="first_name">First Name</label>
+
-  <input name="first_name" id="first_name" /><br />
+<div class="flex justify-center">
-  <label for="last_name">Last Name</label>
+  <form method="post" use:enhance class="w-full max-w-xs">
-  <input name="last_name" id="last_name" /><br />
+    <label for="username">Username</label>
-  <input name="username" id="username" /><br />
+    <input
-  <label for="password">Password</label>
+      name="username"
-  <input type="password" name="password" id="password" /><br />
+      id="username"
-  <button>Continue</button>
+      class="block mb-2 input input-bordered w-full max-w-xs"
-</form>
+    /><br />
+    <label for="first_name">First Name</label>
+    <input
+      name="first_name"
+      id="first_name"
+      class="block mb-2 input input-bordered w-full max-w-xs"
+    /><br />
+    <label for="last_name">Last Name</label>
+    <input
+      name="last_name"
+      id="last_name"
+      class="block mb-2 input input-bordered w-full max-w-xs"
+    /><br />
+    <label for="password">Password</label>
+    <input
+      type="password"
+      name="password"
+      id="password"
+      class="block mb-2 input input-bordered w-full max-w-xs"
+    /><br />
+    <button class="py-2 px-4 btn btn-primary">Signup</button>
+  </form>
+</div>
+
+<div class="flex justify-center mt-12 mr-25 ml-25">
+  <blockquote class="w-80 text-center text-lg break-words">
+    {#if quote != ""}
+      "{quote}"
+    {/if}
+    <!-- <footer class="text-sm">- Steve Jobs</footer> -->
+  </blockquote>
+</div>
+
+<!-- username first last pass -->