Cookies v SSR

src/pages/public/AircraftDetailPage.vue

@@ -1,22 +1,11 @@
-<script>
-import {useAircraftsStore} from "stores/Aircrafts";
-
-export default {
-  preFetch({currentRoute}) {
-    return useAircraftsStore().fetchPublicDetail(currentRoute.params.id);
-  }
-}
-</script>
-
 <script setup>
-import {useRouter} from "vue-router";
+import {useRoute, useRouter} from "vue-router";
 import {useMeta, useQuasar} from "quasar";
 import AircraftDetailSkeleton from "components/aircrafts/skeletons/AircraftDetailSkeleton.vue";
-import {confirmObject, successObject} from "src/composables/dialog";
 import {useAppStore} from "stores/App";
 import FlightsList from "components/flights/FlightsList.vue";
 import {storeToRefs} from "pinia";
-import {computed, onMounted, watch} from "vue";
+import {onMounted, onServerPrefetch} from "vue";
 import {metaData} from "src/composables/meta";
 import PhotoGallery from "components/photos/PhotoGallery.vue";
 import ContentCard from "components/ContentCard.vue";
@@ -26,18 +15,22 @@ 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());
 const {photos, isQueryRunning: arePhotosLoading} = storeToRefs(usePhotosStore());
 const {flights, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
 
-usePhotosStore().fetchPublic({aircraftId: aircraft.value.id});
-useFlightsStore().fetchPublic({aircraftId: aircraft.value.id})
-
 useAppStore().setPageTitle(aircraft.value.callSign);
 useMeta(() => metaData({
   title: aircraft.value.callSign,
@@ -49,12 +42,17 @@ useMeta(() => metaData({
     aircraft.value.organization?.name,
     aircraft.value.manufacturer
   ],
-  description: aircraft.value.description
+  description: aircraft.value.description || `Detail letadla ${aircraft.value.callSign}.`
 }));
 useAppStore().setBreadcrumbs([
   {label: "Polétání.cz", to: {name: "homepage"}},
   {label: aircraft.value.callSign}
 ]);
+
+onMounted(() => {
+  usePhotosStore().fetchPublic({aircraftId: aircraft.value.id});
+  useFlightsStore().fetchPublic({aircraftId: aircraft.value.id})
+});
 </script>
 
 <template>
@@ -66,7 +64,8 @@ useAppStore().setBreadcrumbs([
         <q-card-section>
           <AircraftInfo :aircraft="aircraft"/>
 
-          <PhotoGallery :photos="photos"/>
+          <PhotoGallerySkeleton v-if="arePhotosLoading && !photos.length"/>
+          <PhotoGallery :photos="photos" v-else/>
 
           <h3>Lety</h3>
 

src/pages/public/PointOfInterestDetailPage.vue

@@ -1,13 +1,3 @@
-<script>
-import {usePointsOfInterestStore} from "stores/PointsOfInterest";
-
-export default {
-  preFetch({currentRoute, store}) {
-    return usePointsOfInterestStore(store).fetchPublicDetail(currentRoute.params.id);
-  }
-}
-</script>
-
 <script setup>
 import {storeToRefs} from "pinia";
 import {usePhotosStore} from "stores/Photos";
@@ -21,6 +11,15 @@ 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);
+});
 
 const {pointOfInterest, isQueryRunning} = storeToRefs(usePointsOfInterestStore());
 const {photos, isQueryRunning: arePhotosLoading} = storeToRefs(usePhotosStore());

src/pages/public/pilotProfile/CopilotDetailPage.vue

@@ -2,18 +2,17 @@
 import {useCopilotsStore} from "stores/Copilots";
 
 export default {
-  preFetch({store, currentRoute}) {
-    return useCopilotsStore(store).fetchPublicDetail(currentRoute.params.id, currentRoute.params.username);
+  preFetch({currentRoute}) {
+    return useCopilotsStore().fetchPublicDetail(currentRoute.params.id, currentRoute.params.username);
   }
 }
 </script>
-
 <script setup>
 import FlightsList from "components/flights/FlightsList.vue";
 import {useAppStore} from "stores/App";
 import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
 import {storeToRefs} from "pinia";
-import {onMounted} from "vue";
+import {onMounted, onServerPrefetch} from "vue";
 import {useFlightsStore} from "stores/Flights";
 import {usePhotosStore} from "stores/Photos";
 import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
@@ -21,13 +20,21 @@ import ContentCard from "components/ContentCard.vue";
 import PhotoGallery from "components/photos/PhotoGallery.vue";
 import {useMeta} from "quasar";
 import {metaData} from "src/composables/meta";
+// import {useCopilotsStore} from "stores/Copilots";
+// import {useRoute} from "vue-router";
 
 const props = defineProps({
   pilot: {
     type: Object,
     required: false
   },
-});
+})
+
+// const currentRoute = useRoute();
+//
+// onServerPrefetch(() => {
+//
+// })
 
 const {copilot, isQueryRunning} = storeToRefs(useCopilotsStore());
 const {flights, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
@@ -47,8 +54,10 @@ useMeta(() => metaData({
   image: copilot.value.titleImage?.url
 }));
 
-useFlightsStore().fetchPublic({copilotId: copilot.value.id});
-usePhotosStore().fetchPublic({copilotId: copilot.value.id})
+onMounted(() => {
+  useFlightsStore().fetchPublic({copilotId: copilot.value.id});
+  usePhotosStore().fetchPublic({copilotId: copilot.value.id})
+})
 </script>
 
 <template>
@@ -63,10 +72,10 @@ usePhotosStore().fetchPublic({copilotId: copilot.value.id})
         <h3>Společné lety</h3>
         <FlightsListSkeleton v-if="areFlightsLoading && flights.length === 0"/>
         <FlightsList
-          v-else
-          :items="flights"
-          :public="true"
-          class="q-mb-md"
+            v-else
+            :items="flights"
+            :public="true"
+            class="q-mb-md"
         />
       </q-card-section>
     </template>