From dc782eb4802285dc39cc162a741175d6c81c50f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aron=20Sch=C3=BCler?= <aron.schueler@ambient.digital>
Date: Sun, 28 Jan 2024 12:55:08 +0100
Subject: [PATCH] feat: convert user.ts into a pinia store and redirect away
 from creation form

---
 src/components/TopBar.vue    | 10 +++++-----
 src/components/UserMenu.vue  |  8 ++++----
 src/components/user.ts       |  5 +++--
 src/views/AddCommentForm.vue | 12 ++++++------
 src/views/NewProject.vue     | 30 ++++++++++++++++++++++--------
 src/views/UpvoteButton.vue   | 12 ++++++------
 6 files changed, 46 insertions(+), 31 deletions(-)

diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
index fa0fa72..e009869 100644
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -6,7 +6,7 @@ import { Bars3Icon, BellIcon, XMarkIcon } from "@heroicons/vue/24/outline";
 import { signOut, userNavigation, useUser } from "./user";
 import UserMenu from "./UserMenu.vue";
 
-const { user } = useUser();
+const userStore = useUser();
 
 const appNavigation = [
   {
@@ -101,9 +101,9 @@ const appNavigation = [
         <div class="flex items-center px-5">
           <div class="flex-shrink-0">
             <img
-              v-if="user?.photoURL && user.photoURL !== ''"
+              v-if="userStore.user?.photoURL && userStore.user.photoURL !== ''"
               class="h-8 w-8 rounded-full"
-              :src="user.photoURL"
+              :src="userStore.user.photoURL"
               alt=""
             />
 
@@ -116,11 +116,11 @@ const appNavigation = [
 
           <div class="ml-3">
             <div class="text-base font-medium text-white">
-              {{ user?.displayName }}
+              {{ userStore.user?.displayName }}
             </div>
 
             <div class="text-sm font-medium text-indigo-300">
-              {{ user?.email }}
+              {{ userStore.user?.email }}
             </div>
           </div>
 
diff --git a/src/components/UserMenu.vue b/src/components/UserMenu.vue
index 9e2c751..673bd8f 100644
--- a/src/components/UserMenu.vue
+++ b/src/components/UserMenu.vue
@@ -3,11 +3,11 @@ import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
 import { BellIcon, UserCircleIcon } from "@heroicons/vue/20/solid";
 
 import { signOut, userNavigation, useUser } from "./user";
-const { user, isLoggedIn } = useUser();
+const userStore = useUser();
 </script>
 
 <template>
-  <div v-if="isLoggedIn" class="hidden lg:ml-4 lg:block">
+  <div v-if="userStore.isLoggedIn" class="hidden lg:ml-4 lg:block">
     <div class="flex items-center">
       <button
         type="button"
@@ -31,9 +31,9 @@ const { user, isLoggedIn } = useUser();
             <span class="sr-only">Open user menu</span>
 
             <img
-              v-if="user?.photoURL && user.photoURL !== ''"
+              v-if="userStore.user?.photoURL && userStore.user.photoURL !== ''"
               class="h-8 w-8 rounded-full"
-              :src="user.photoURL"
+              :src="userStore.user.photoURL"
               alt=""
             />
 
diff --git a/src/components/user.ts b/src/components/user.ts
index 860ea63..48acad8 100644
--- a/src/components/user.ts
+++ b/src/components/user.ts
@@ -4,6 +4,7 @@ import {
   User,
   UserCredential,
 } from "firebase/auth";
+import { defineStore } from "pinia";
 import { ref } from "vue";
 
 import { app } from "@/firebase";
@@ -14,7 +15,7 @@ export const userNavigation = [
 ];
 
 // User firebase to receive current user and autheticaiton status.
-export const useUser = () => {
+export const useUser = defineStore("user", () => {
   const user = ref<User | null>(null);
   const isLoggedIn = ref(false);
 
@@ -28,7 +29,7 @@ export const useUser = () => {
     user,
     isLoggedIn,
   };
-};
+});
 
 export const logInWithFirebase: (
   email: string,
diff --git a/src/views/AddCommentForm.vue b/src/views/AddCommentForm.vue
index a56a239..0b45126 100644
--- a/src/views/AddCommentForm.vue
+++ b/src/views/AddCommentForm.vue
@@ -11,7 +11,7 @@ const props = defineProps<{
   projectUid: string;
 }>();
 
-const { user } = useUser();
+const userStore = useUser();
 type FormData = {
   comment: string;
 };
@@ -26,12 +26,12 @@ const { handleSubmit } = useForm<FormData>({
 const onSubmit = handleSubmit(
   // Success
   (values: FormData) => {
-    if (!user.value?.uid) return;
+    if (!userStore.user?.uid) return;
     // handle form submission here
     commentStore.addCommentToProject(
       values.comment,
       props.projectUid,
-      user.value.uid,
+      userStore.user.uid,
     );
   },
   // Failure
@@ -45,10 +45,10 @@ const { value: comment, errorMessage: commentError } =
 </script>
 
 <template>
-  <div v-if="user?.uid" class="mt-6 flex gap-x-3">
+  <div v-if="userStore.user?.uid" class="mt-6 flex gap-x-3">
     <img
-      v-if="user?.photoURL && user.photoURL !== ''"
-      :src="user.photoURL"
+      v-if="userStore.user?.photoURL && userStore.user.photoURL !== ''"
+      :src="userStore.user.photoURL"
       alt=""
       class="h-6 w-6 flex-none rounded-full bg-gray-50"
     />
diff --git a/src/views/NewProject.vue b/src/views/NewProject.vue
index fa50932..e195a38 100644
--- a/src/views/NewProject.vue
+++ b/src/views/NewProject.vue
@@ -19,6 +19,8 @@ export type ProjectCreationFormData = {
 
 const storage = getStorage();
 
+const isSubmitting = true;
+const isValidating = true;
 const { handleSubmit, resetForm } = useForm<ProjectCreationFormData>({
   validationSchema: {
     title: string().required("The title is required."),
@@ -97,23 +99,27 @@ const uploadScreenshots = async (uuid: string) => {
 
 const router = useRouter();
 const projectStore = useProjectStore();
-const { user } = useUser();
+const userStore = useUser();
 
+if (!userStore.isLoggedIn) {
+  router.push("/");
+}
 watch(
-  () => user.value,
-  (user) => {
-    if (!user) router.push("/login");
+  () => userStore.isLoggedIn,
+  (isLoggedIn) => {
+    if (!isLoggedIn) {
+      router.push("/");
+    }
   },
-  { immediate: true },
 );
 
 const onSubmit = handleSubmit(
   // Success
   async (values: ProjectCreationFormData) => {
-    if (!user.value) return;
+    if (!userStore.user) return;
 
     // handle form submission here
-    projectStore.addProject(values, user.value.uid).then(async (uid) => {
+    projectStore.addProject(values, userStore.user.uid).then(async (uid) => {
       await uploadLogo(uid);
       await uploadScreenshots(uid);
 
@@ -137,6 +143,7 @@ const { value: tags, errorMessage: tagsError } = useField<string[]>("tags");
 </script>
 
 <template>
+  {{ userStore.isLoggedIn }}
   <form class="space-y-8 divide-y divide-gray-200" @submit="onSubmit">
     <div class="space-y-8 divide-y divide-gray-200 sm:space-y-5">
       <div>
@@ -336,7 +343,14 @@ const { value: tags, errorMessage: tagsError } = useField<string[]>("tags");
           Reset
         </button>
 
-        <button type="submit" class="button primary min-w-20">Submit</button>
+        <button
+          type="submit"
+          class="button min-w-20"
+          :class="[isSubmitting || isValidating ? 'disabled' : 'primary']"
+          :disabled="isSubmitting || isValidating"
+        >
+          Submit
+        </button>
       </div>
     </div>
   </form>
diff --git a/src/views/UpvoteButton.vue b/src/views/UpvoteButton.vue
index 371f5d8..b10a108 100644
--- a/src/views/UpvoteButton.vue
+++ b/src/views/UpvoteButton.vue
@@ -8,7 +8,7 @@ import { Project } from "@/types";
 defineProps<{
   project: Project;
 }>();
-const { user } = useUser();
+const userStore = useUser();
 const store = useProjectStore();
 </script>
 
@@ -17,18 +17,18 @@ const store = useProjectStore();
     type="button"
     class="z-20 flex h-8 w-16 flex-row items-center justify-between self-center rounded-lg px-2.5 py-0.5 transition-colors transition-shadow hover:shadow-lg"
     :class="[
-      user && project.upvotes.includes(user.uid)
+      userStore.user && project.upvotes.includes(userStore.user.uid)
         ? 'bg-indigo-200'
         : 'bg-indigo-100',
     ]"
-    :disabled="!user || user.isAnonymous"
-    @click="store.upvoteProject(project._id, user?.uid)"
+    :disabled="!userStore.user || userStore.user.isAnonymous"
+    @click="store.upvoteProject(project._id, userStore.user?.uid)"
   >
     <HeartIcon
       class="size-5"
       aria-hidden="true"
       :class="[
-        user && project.upvotes.includes(user.uid)
+        userStore.user && project.upvotes.includes(userStore.user.uid)
           ? 'text-red-500'
           : 'text-gray-500',
       ]"
@@ -37,7 +37,7 @@ const store = useProjectStore();
     <span
       class="text-xs text-indigo-800 transition"
       :class="[
-        user && project.upvotes.includes(user.uid)
+        userStore.user && project.upvotes.includes(userStore.user.uid)
           ? 'font-semibold'
           : 'font-medium',
       ]"