From 3216de4cb71df8ec11fbc0eb07f71d03789433cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michal=20Kv=C3=A1=C4=8Dek?= <michal.kvacek@performax.cz>
Date: Sun, 10 Dec 2023 23:11:11 +0100
Subject: [PATCH] Bugfixing

---
 src/boot/axios.js                             | 10 +++---
 .../photos/skeletons/PhotoGallerySkeleton.vue | 14 ++++++--
 src/layouts/PublicLayout.vue                  |  3 +-
 src/pages/public/AircraftDetailPage.vue       | 19 ++++++-----
 .../public/PointOfInterestDetailPage.vue      | 33 +++++++++++--------
 src/stores/Aircrafts.js                       |  2 +-
 src/stores/User.js                            |  4 +--
 7 files changed, 52 insertions(+), 33 deletions(-)

diff --git a/src/boot/axios.js b/src/boot/axios.js
index bc75909..31d1990 100644
--- a/src/boot/axios.js
+++ b/src/boot/axios.js
@@ -20,12 +20,12 @@ export default boot(({store}) => {
             config.headers['Authorization'] = `Bearer ${token}`
         }
 
-    if (['/refresh', '/login'].includes(config.url)) {
-      delete config.headers['Authorization'];
-    }
+        if (['/refresh', '/login'].includes(config.url)) {
+            delete config.headers['Authorization'];
+        }
 
-    return config;
-  })
+        return config;
+    })
 
     // Response interceptor for API calls
     api.interceptors.response.use(
diff --git a/src/components/photos/skeletons/PhotoGallerySkeleton.vue b/src/components/photos/skeletons/PhotoGallerySkeleton.vue
index 5e7c6cc..b81e504 100644
--- a/src/components/photos/skeletons/PhotoGallerySkeleton.vue
+++ b/src/components/photos/skeletons/PhotoGallerySkeleton.vue
@@ -1,7 +1,17 @@
 <script setup>
-
+const props = defineProps({
+  photos: {
+    type: Number,
+    required: false,
+    default: 9
+  }
+});
 </script>
 
 <template>
-  gallery skeleton
+  <div class="row">
+    <div class="col-6 col-sm-4 col-md-4 col-lg-3 q-pa-sm" v-for="i in props.photos" :key="i">
+      <q-skeleton type="rect" width="100%" height="200px" />
+    </div>
+  </div>
 </template>
diff --git a/src/layouts/PublicLayout.vue b/src/layouts/PublicLayout.vue
index dbb2d2c..dd8803d 100644
--- a/src/layouts/PublicLayout.vue
+++ b/src/layouts/PublicLayout.vue
@@ -37,7 +37,8 @@ import {useUserStore} from "stores/User";
 
 export default {
   preFetch() {
-    return useUserStore().fetchLoggedUserDetail({refresh: true});
+    // todo: nevim proc tu nefunguje refresh, neposila se credentials
+    return useUserStore().fetchLoggedUserDetail({refresh: false});
   }
 }
 </script>
diff --git a/src/pages/public/AircraftDetailPage.vue b/src/pages/public/AircraftDetailPage.vue
index ee647a6..66b13c5 100644
--- a/src/pages/public/AircraftDetailPage.vue
+++ b/src/pages/public/AircraftDetailPage.vue
@@ -1,11 +1,20 @@
+<script>
+import {useAircraftsStore} from "stores/Aircrafts";
+
+export default {
+  preFetch({currentRoute}) {
+    return useAircraftsStore().fetchPublicDetail(currentRoute.params.id);
+  }
+}
+</script>
 <script setup>
-import {useRoute, useRouter} from "vue-router";
+import {useRouter} from "vue-router";
 import {useMeta, useQuasar} from "quasar";
 import AircraftDetailSkeleton from "components/aircrafts/skeletons/AircraftDetailSkeleton.vue";
 import {useAppStore} from "stores/App";
 import FlightsList from "components/flights/FlightsList.vue";
 import {storeToRefs} from "pinia";
-import {onMounted, onServerPrefetch} from "vue";
+import {onMounted} from "vue";
 import {metaData} from "src/composables/meta";
 import PhotoGallery from "components/photos/PhotoGallery.vue";
 import ContentCard from "components/ContentCard.vue";
@@ -15,16 +24,10 @@ import {usePhotosStore} from "stores/Photos";
 import {useFlightsStore} from "stores/Flights";
 import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
-import {useAircraftsStore} from "stores/Aircrafts";
 import PhotoGallerySkeleton from "components/photos/skeletons/PhotoGallerySkeleton.vue";
 
 const $q = useQuasar();
 const $router = useRouter();
-const $route = useRoute();
-
-onServerPrefetch(() => {
-  return useAircraftsStore().fetchPublicDetail($route.params.id);
-});
 
 const loggedUser = storeToRefs(useUserStore()).user;
 const {aircraft, isQueryRunning} = storeToRefs(useAircraftsStore());
diff --git a/src/pages/public/PointOfInterestDetailPage.vue b/src/pages/public/PointOfInterestDetailPage.vue
index 621a4a3..d4f0f9a 100644
--- a/src/pages/public/PointOfInterestDetailPage.vue
+++ b/src/pages/public/PointOfInterestDetailPage.vue
@@ -1,3 +1,13 @@
+<script>
+import {usePointsOfInterestStore} from "stores/PointsOfInterest";
+
+export default {
+  preFetch({currentRoute}) {
+    return usePointsOfInterestStore().fetchPublicDetail(currentRoute.params.id);
+  }
+}
+</script>
+
 <script setup>
 import {storeToRefs} from "pinia";
 import {usePhotosStore} from "stores/Photos";
@@ -11,23 +21,13 @@ import {useMeta} from "quasar";
 import {metaData} from "src/composables/meta";
 import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
-import {usePointsOfInterestStore} from "stores/PointsOfInterest";
-import {onServerPrefetch} from "vue";
-import {useRoute} from "vue-router";
-
-const $route = useRoute();
-
-onServerPrefetch(() => {
-  return usePointsOfInterestStore().fetchPublicDetail($route.params.id);
-});
+import {onMounted} from "vue";
+import PhotoGallerySkeleton from "components/photos/skeletons/PhotoGallerySkeleton.vue";
 
 const {pointOfInterest, isQueryRunning} = storeToRefs(usePointsOfInterestStore());
 const {photos, isQueryRunning: arePhotosLoading} = storeToRefs(usePhotosStore());
 const {flights, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
 
-usePhotosStore().fetchPublic({pointOfInterestId: pointOfInterest.value.id});
-useFlightsStore().fetchPublic({pointOfInterestId: pointOfInterest.value.id});
-
 useAppStore().setPageTitle(pointOfInterest.value.name);
 useMeta(() => metaData({
   title: pointOfInterest.value.name,
@@ -38,6 +38,12 @@ useAppStore().setBreadcrumbs([
   {to: {name: 'homepage'}, label: "Polétání.cz"},
   {label: pointOfInterest.value.name}
 ]);
+
+onMounted(() => {
+  usePhotosStore().fetchPublic({pointOfInterestId: pointOfInterest.value.id});
+  useFlightsStore().fetchPublic({pointOfInterestId: pointOfInterest.value.id});
+});
+
 </script>
 
 <template>
@@ -54,7 +60,8 @@ useAppStore().setBreadcrumbs([
             :zoom="13"
         />
 
-        <PhotoGallery :photos="photos" class="q-my-lg"/>
+        <PhotoGallerySkeleton v-if="arePhotosLoading && !pointOfInterest" />
+        <PhotoGallery :photos="photos" class="q-my-lg" v-else />
 
         <h3>Lety na místo {{ pointOfInterest.name }}</h3>
 
diff --git a/src/stores/Aircrafts.js b/src/stores/Aircrafts.js
index 50b4d91..8ec1834 100644
--- a/src/stores/Aircrafts.js
+++ b/src/stores/Aircrafts.js
@@ -22,7 +22,7 @@ export const useAircraftsStore = defineStore('Aircrafts', () => {
     const fetchPublicDetail = (id) => query({
         isQueryRunning,
         query: AIRCRAFT_PUBLIC_DETAIL,
-        variables: {id, public: true},
+        variables: {id},
     }).then(item => {
         aircraft.value = item;
         return item;
diff --git a/src/stores/User.js b/src/stores/User.js
index 0993083..a6a7d35 100644
--- a/src/stores/User.js
+++ b/src/stores/User.js
@@ -66,9 +66,7 @@ export const useUserStore = defineStore('LoggedUser', () => {
     };
 
     const setTokens = ({access_token, access_token_validity}) => {
-        const now = new Date().getTime() / 1000;
-        // TODO: asi nefunguje expirace
-        cookies.set("accessToken", access_token, {expires: now + access_token_validity})
+        cookies.set("accessToken", access_token, {expires: `${access_token_validity}s`})
     };
 
     const getAccessToken = () => {