Cambio logica di globalizzazione delle informazioni di sessione

Author: deme3

.eslintrc.js

@@ -12,9 +12,9 @@ module.exports = {
     "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
   },
   globals: {
-    defineProps: 'readonly',
-    defineEmits: 'readonly',
-    defineExpose: 'readonly',
-    withDefaults: 'readonly'
-  }
+    defineProps: "readonly",
+    defineEmits: "readonly",
+    defineExpose: "readonly",
+    withDefaults: "readonly",
+  },
 };

src/App.vue

@@ -14,14 +14,20 @@
     <Searchbar @search-offer="searchOffer" />
     <Navbar v-if="sessionToken" />
   </header>
-  <router-view :ads="ads" :userInfo="userInfo" />
+  <router-view
+    :ads="ads"
+    v-if="
+      (getCookie('sessionToken') !== '' && userInfo._id !== '') ||
+      getCookie('sessionToken') == ''
+    "
+  />
 </template>
 
 <script>
 import Searchbar from "@/components/Searchbar.vue";
 import Navbar from "@/components/Navbar.vue";
 
-import { defineComponent, ref, reactive, watch } from "vue";
+import { defineComponent, ref, reactive, watch, provide } from "vue";
 import { useRoute } from "vue-router";
 
 export default defineComponent({
@@ -40,6 +46,7 @@ export default defineComponent({
       biography: "",
       sessionToken: "",
     });
+    provide("userInfo", userInfo);
 
     const searchOffer = async function (searchterms) {
       console.log("Searching for: " + searchterms);
@@ -124,7 +131,14 @@ export default defineComponent({
       },
     ];
 
-    return { searchOffer, sessionToken, showLoginBtn, ads, userInfo };
+    return {
+      searchOffer,
+      sessionToken,
+      showLoginBtn,
+      ads,
+      userInfo,
+      getCookie,
+    };
   },
 });
 </script>

src/views/Annunci.vue

@@ -41,36 +41,32 @@
 
 <script setup>
 import SearchResult from "@/components/SearchResult.vue";
-import { watch, ref } from "vue";
+import { watch, ref, inject } from "vue";
 import { useRouter } from "vue-router";
 const router = useRouter();
 
-const props = defineProps({
-  userInfo: {
-    _id: String,
-  },
-});
+const userInfo = inject("userInfo");
 
 let ads = ref([]);
 
 watch(
-  () => props.userInfo._id,
+  () => userInfo._id,
   async () => {
-    if (props.userInfo._id !== "") {
+    if (userInfo._id !== "") {
       await loadAds();
     }
   }
 );
 
 async function loadAds() {
-  let adsFetch = await fetch(`/api/ads/list/${props.userInfo._id}`);
+  let adsFetch = await fetch(`/api/ads/list/${userInfo._id}`);
 
   if (adsFetch.ok) {
     ads.value = await adsFetch.json();
   }
 }
 
-if (props.userInfo._id !== "") loadAds();
+if (userInfo._id !== "") loadAds();
 
 document.title = "TeacherFinder – I miei annunci";
 </script>

src/views/Impostazioni.vue

@@ -1,7 +1,7 @@
 <template>
   <h1>Impostazioni</h1>
   <div class="impostazioni tf-box">
-    <UserCard v-bind="props.userInfo" />
+    <UserCard v-bind="userInfo" />
     <TextEntry description="Nickname" v-model:text="form.nickname" />
     <TextEntry
       description="Biografia"
@@ -68,12 +68,14 @@
 </style>
 
 <script setup>
-import { reactive, watch, computed } from "vue";
+import { reactive, computed, inject } from "vue";
 import UserCard from "@/components/UserCard.vue";
 import TextEntry from "@/components/TextEntry.vue";
 import ToggleEntry from "@/components/ToggleEntry.vue";
 
 document.title = "TeacherFinder – Impostazioni";
+const userInfo = reactive(inject("userInfo"));
+console.log(userInfo);
 
 const notificationsString = (formObject) => {
   let str = "";
@@ -97,60 +99,24 @@ const notificationsStringToFormObject = (str) => {
 };
 
 const hasChanged = (fieldName) => {
-  return form[fieldName] != props.userInfo[fieldName];
+  return form[fieldName] != userInfo[fieldName];
 };
 
-const props = defineProps({
-  ads: Array,
-  userInfo: {
-    firstName: String,
-    lastName: String,
-    nickname: String,
-    biography: String,
-    notifications: String,
-  },
-});
-
 const form = reactive({
-  nickname: props.userInfo.nickname,
-  biography: props.userInfo.biography,
+  nickname: userInfo.nickname,
+  biography: userInfo.biography,
   notifications: {
-    ...notificationsStringToFormObject(props.userInfo.notifications),
+    ...notificationsStringToFormObject(userInfo.notifications),
   },
 });
 
-watch(
-  () => props.userInfo.nickname,
-  () => {
-    form.nickname = props.userInfo.nickname;
-  }
-);
-
-watch(
-  () => props.userInfo.biography,
-  () => {
-    form.biography = props.userInfo.biography;
-  }
-);
-
-watch(
-  () => props.userInfo.notifications,
-  () => {
-    Object.assign(
-      form.notifications,
-      notificationsStringToFormObject(props.userInfo.notifications)
-    );
-  }
-);
-
 function loadSettings() {
-  if (props.userInfo.nickname !== "") form.nickname = props.userInfo.nickname;
-  if (props.userInfo.biography !== "")
-    form.biography = props.userInfo.biography;
-  if (typeof props.userInfo.notifications?.rifiutato !== "undefined")
+  if (userInfo.nickname !== "") form.nickname = userInfo.nickname;
+  if (userInfo.biography !== "") form.biography = userInfo.biography;
+  if (typeof userInfo.notifications?.rifiutato !== "undefined")
     Object.assign(
       form.notifications,
-      notificationsStringToFormObject(props.userInfo.notifications)
+      notificationsStringToFormObject(userInfo.notifications)
     );
 }
 
@@ -164,19 +130,17 @@ const logout = async () => {
 };
 
 const cancelEdits = () => {
-  form.nickname = props.userInfo.nickname;
-  form.biography = props.userInfo.biography;
+  form.nickname = userInfo.nickname;
+  form.biography = userInfo.biography;
   form.notifications = {
-    ...notificationsStringToFormObject(props.userInfo.notifications),
+    ...notificationsStringToFormObject(userInfo.notifications),
   };
 };
 
-loadSettings();
-
 const saveEdits = async () => {
   // REST api salvataggio modifiche
   let query = {
-    sessionToken: props.userInfo.sessionToken,
+    sessionToken: userInfo.sessionToken,
     updates: {},
   };
   if (hasChanged("nickname")) query.updates.nickname = form.nickname;
@@ -198,26 +162,28 @@ const saveEdits = async () => {
     console.log(res);
 
     if (res.acknowledged && res.modifiedCount >= 1) {
-      window.location.reload();
-      // Non posso aggiornare le prop, quindi aggiorno per ricaricare tutto
+      if (query.updates.nickname) userInfo.nickname = query.updates.nickname;
+      if (query.updates.biography) userInfo.biography = query.updates.biography;
+      if (query.updates.notifications)
+        userInfo.notifications = query.updates.notifications;
     }
   }
 };
 
 const haveNotificationsChanged = () => {
-  return (
-    notificationsString(form.notifications) != props.userInfo.notifications
-  );
+  return notificationsString(form.notifications) != userInfo.notifications;
 };
 
 const settingsModified = computed(() => {
-  console.log(props.userInfo.nickname, form.nickname);
-  console.log(props.userInfo.biography, form.biography);
-  console.log(props.userInfo.notifications, form.notifications);
+  console.log(userInfo.nickname, form.nickname);
+  console.log(userInfo.biography, form.biography);
+  console.log(userInfo.notifications, form.notifications);
   return !(
     hasChanged("nickname") ||
     hasChanged("biography") ||
     haveNotificationsChanged()
   );
 });
+
+loadSettings();
 </script>