feat(layout): new way to present data

draconicdevelopment · Jun 11, 2020 · 1edd57c · 1edd57c
1 parent 16e7029
commit 1edd57c
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 16 deletions.
diff --git a/layouts/board.vue b/layouts/board.vue
@@ -10,13 +10,18 @@
       <div>
         <div class="user">
           <div>
-            <span class="user-name">{{ state.displayName }}</span>
+            <span class="user-name">{{ authState.user.displayName }}</span>
             <span class="logout-btn">
               <button @click="logOut">Sign out</button>
             </span>
           </div>
           <div class="user-avatar-wrap">
-            <div class="user-avatar"></div>
+            <img
+              class="user-avatar"
+              :src="authState.user.profilePicture"
+              height="64"
+              width="64"
+            />
           </div>
         </div>
       </div>
@@ -159,28 +164,19 @@ import {
   useContext,
 } from 'nuxt-composition-api';
 import { useState } from '../plugins/state';
-import { useFirebaseAuth, useFirestore } from '../plugins/firebase';
+import { useFirebaseAuth } from '../plugins/firebase';
 
 export default defineComponent({
   setup() {
     const state = reactive({
       display: false,
-      displayName: '',
     });
 
     const context = useContext();
     const authState = useState();
 
-    useFetch(async () => {
+    useFetch(() => {
       if (!authState.user.loggedIn) context.redirect('/');
-
-      const db = useFirestore();
-      const userData = await db
-        .collection('users')
-        .doc(authState.user.uid)
-        .get();
-
-      state.displayName = userData.data()?.displayName;
     });
 
     async function logOut() {
@@ -192,6 +188,7 @@ export default defineComponent({
         uid: '',
         email: '',
         loggedIn: false,
+        admin: false,
       };
 
       context.redirect('/');

diff --git a/pages/index.vue b/pages/index.vue
@@ -32,7 +32,7 @@ import {
   useFetch,
   useContext,
 } from 'nuxt-composition-api';
-import { useFirebaseAuth } from '../plugins/firebase';
+import { useFirebaseAuth, useFirestore } from '../plugins/firebase';
 import { useState } from '../plugins/state';
 import { StateType } from '../plugins/types';
 
@@ -49,6 +49,7 @@ export default defineComponent({
     const passwordProv = ref('');
 
     const auth = useFirebaseAuth();
+    const firestore = useFirestore();
 
     async function signInWithEmailAndPassword() {
       try {
@@ -57,10 +58,20 @@ export default defineComponent({
           passwordProv.value,
         );
 
-        if (user && user.user) {
+        const dataResult = await firestore
+          .collection('users')
+          .doc(user.user?.uid)
+          .get();
+
+        const userData = dataResult.data();
+
+        if (user.user && userData) {
           authState.user = {
             uid: user.user.uid,
             email: user.user.email,
+            displayName: userData.displayName,
+            profilePicture: userData.profilePicture,
+            admin: userData.admin,
             loggedIn: true,
           };
 

diff --git a/pages/plugin/_prefix/admin.vue b/pages/plugin/_prefix/admin.vue
@@ -7,9 +7,16 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, Ref } from 'nuxt-composition-api';
+import {
+  defineComponent,
+  ref,
+  Ref,
+  useFetch,
+  useContext,
+} from 'nuxt-composition-api';
 import { DocumentData } from '@firebase/firestore-types';
 import { useFirestore } from '@/plugins/firebase';
+import { useState } from '@/plugins/state';
 
 import { dashUserCard } from '@/components/atoms/user-card';
 
@@ -19,6 +26,14 @@ export default defineComponent({
     dashUserCard,
   },
   setup() {
+    const context = useContext();
+    const authState = useState();
+
+    useFetch(() => {
+      console.log(authState);
+      if (!authState.user.admin) context.redirect('/board');
+    });
+
     const users: Ref<Array<DocumentData>> = ref([]);
 
     const db = useFirestore();