fix(state): fix project model preview & user menu

bimdata · Feb 3, 2021 · 7067a3e · 7067a3e
1 parent 63796eb
commit 7067a3e
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 30 deletions.
diff --git a/src/components/dashboard-welcome-tile/DashboardWelcomeTile.vue b/src/components/dashboard-welcome-tile/DashboardWelcomeTile.vue
@@ -22,7 +22,7 @@ export default {
   setup() {
     const { user } = useUser();
 
-    const firstName = ref(user.value.profile.given_name);
+    const firstName = ref(user.value.firstName);
 
     return {
       // References

diff --git a/src/components/project-model-preview/ProjectModelPreview.vue b/src/components/project-model-preview/ProjectModelPreview.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import { onMounted, ref } from "vue";
+import { ref } from "vue";
 import { useProjects } from "@/state/projects";
 
 export default {
@@ -44,11 +44,9 @@ export default {
     };
 
     const image = ref(null);
-    onMounted(() => {
-      fetchProjectPreviewImage(props.project).then(
-        imageURL => (image.value = imageURL)
-      );
-    });
+    fetchProjectPreviewImage(props.project).then(
+      imageURL => (image.value = imageURL)
+    );
 
     return {
       // References

diff --git a/src/components/user-menu/UserMenu.vue b/src/components/user-menu/UserMenu.vue
@@ -7,14 +7,18 @@
       class="user-menu__btn"
       @click="toggleMenu"
     >
-      <span class="user-menu__btn__picture">{{ initials }}</span>
-      <span class="user-menu__btn__fullname">{{
-        `${firstName} ${lastName}`
-      }}</span>
-      <span class="user-menu__btn__email">{{ email }}</span>
+      <span class="user-menu__btn__picture">
+        {{ initials }}
+      </span>
+      <span class="user-menu__btn__fullname">
+        {{ `${firstName} ${lastName}` }}
+      </span>
+      <span class="user-menu__btn__email">
+        {{ email }}
+      </span>
     </BIMDataButton>
     <transition name="fade">
-      <div class="user-menu__container" v-show="isOpen">
+      <div class="user-menu__container" v-show="showMenu">
         <BIMDataSelect
           :label="$t('Header.selectLanguage')"
           :options="$i18n.availableLocales"
@@ -30,7 +34,7 @@
 </template>
 
 <script>
-import { computed, ref } from "vue";
+import { computed, ref, watchEffect } from "vue";
 import { useUser } from "@/state/user";
 // Components
 import BIMDataButton from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataButton.js";
@@ -46,24 +50,31 @@ export default {
   setup() {
     const { user, signOut } = useUser();
 
-    const isOpen = ref(false);
-    const firstName = ref(user.value.profile.given_name);
-    const lastName = ref(user.value.profile.family_name);
-    const email = ref(user.value.profile.email);
+    const showMenu = ref(false);
+    const closeMenu = () => (showMenu.value = false);
+    const toggleMenu = () => (showMenu.value = !showMenu.value);
+
+    const firstName = ref("");
+    const lastName = ref("");
+    const email = ref("");
     const initials = computed(() =>
       `${firstName.value[0]}${lastName.value[0]}`.toUpperCase()
     );
-
-    const closeMenu = () => (isOpen.value = false);
-    const toggleMenu = () => (isOpen.value = !isOpen.value);
+    watchEffect(() => {
+      if (user.value) {
+        firstName.value = user.value.firstName;
+        lastName.value = user.value.lastName;
+        email.value = user.value.email;
+      }
+    });
 
     return {
       // References
-      isOpen,
-      firstName,
-      lastName,
       email,
+      firstName,
       initials,
+      lastName,
+      showMenu,
       // Methods
       closeMenu,
       toggleMenu,

diff --git a/src/router/resolvers.js b/src/router/resolvers.js
@@ -20,7 +20,7 @@ const projectsResolver = createViewResolver(route => {
 
   return loadSpaces()
     .then(() => selectSpace(+route.params.spaceID))
-    .then(() => loadProjects(currentSpace.value));
+    .then(() => loadProjects(currentSpace.value, { forceFetch: true }));
 });
 
 export { dashboardResolver, spacesResolver, projectsResolver };
diff --git a/src/state/projects.js b/src/state/projects.js
@@ -45,9 +45,10 @@ const selectProject = id => {
 
 const fetchProjectPreviewImage = async project => {
   let ifcs = await IfcService.fetchProjectIfcs(project);
-  ifcs = ifcs.filter(ifc => ifc.viewer_360_file);
-  ifcs.sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
-  return ifcs.length ? ifcs[0].viewer_360_file : null;
+  ifcs = ifcs.filter(ifc => ifc.viewer360File);
+  ifcs.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
+  const imageURL = ifcs.length ? ifcs[0].viewer360File : null;
+  return imageURL;
 };
 
 export function useProjects() {

diff --git a/src/state/user.js b/src/state/user.js
@@ -12,7 +12,12 @@ const authenticate = async redirectPath => {
   if (user) {
     if (!state.isAuthenticated) {
       state.isAuthenticated = true;
-      state.user = user;
+      state.user = {
+        accessToken: user.access_token,
+        firstName: user.profile.given_name,
+        lastName: user.profile.family_name,
+        email: user.profile.email
+      };
     }
   } else {
     await UserService.signIn(redirectPath);
@@ -37,7 +42,7 @@ const signOut = async () => {
 // Keep access token up to date across refresh
 watchEffect(() => {
   if (state.user) {
-    apiClient.accessToken = state.user.access_token;
+    apiClient.accessToken = state.user.accessToken;
   }
 });