From f9d70a5d572532f9b23391e59d6a4b6c493c977f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michal=20Kv=C3=A1=C4=8Dek?= <michal.kvacek@performax.cz>
Date: Sun, 19 Nov 2023 00:44:01 +0100
Subject: [PATCH] Ne uplne otestovany prepis storu

---
 quasar.config.js                              |   1 +
 src/boot/apollo.js                            |  96 ++++++
 src/boot/axios.js                             |  75 ++---
 src/boot/chartJs.js                           |   4 +-
 src/components/FormSubmitButton.vue           |  43 +++
 src/components/FormWrapper.vue                |  30 +-
 .../aircrafts/AircraftDetailCard.vue          |   2 -
 src/components/banners/AccessDeniedBanner.vue |   2 -
 .../basicSkeletons/BasicListSkeleton.vue      |   7 +-
 src/components/event/EventsList.vue           |   4 +-
 src/components/flights/FlightBasicInfo.vue    |   1 -
 .../flights/FlightDetailSkeleton.vue          |   5 +-
 src/components/flights/FlightTrackMap.vue     |  15 +-
 .../flights/form/FlightFormNotes.vue          |   1 -
 src/components/poi/POIForm.vue                |   2 +-
 src/components/profile/PilotProfileCard.vue   |   8 +-
 src/composables/objects/aircraft.js           |  25 --
 src/composables/objects/copilot.js            |  23 --
 src/composables/objects/event.js              |  37 ---
 src/composables/objects/flight.js             |  36 ---
 src/composables/objects/organization.js       |  42 ---
 src/composables/objects/poi.js                |  22 --
 src/composables/photos/batchEdit.js           |  40 ---
 src/composables/photos/editor/crop.js         |  73 ++---
 src/composables/photos/editor/photo.js        |  16 -
 src/composables/photos/simpleEdit.js          |  22 --
 src/graphql/apollo.js                         | 109 -------
 src/graphql/mutations/flight.js               |   7 +-
 src/graphql/mutations/organization.js         |  26 +-
 src/layouts/ProfileLayout.vue                 |  12 +-
 src/layouts/PublicLayout.vue                  |  16 +-
 .../profile/aircraft/AircraftDetailPage.vue   |  31 +-
 src/pages/profile/aircraft/AircraftsPage.vue  |  12 +-
 .../profile/aircraft/EditAircraftPage.vue     |  10 +-
 .../profile/aircraft/NewAircraftsPage.vue     |   8 +-
 .../profile/copilot/CopilotDetailPage.vue     |  11 +-
 src/pages/profile/copilot/CopilotsPage.vue    |  13 +-
 src/pages/profile/copilot/EditCopilotPage.vue |  21 +-
 src/pages/profile/copilot/NewCopilotPage.vue  |   9 +-
 src/pages/profile/event/EditEventPage.vue     |  14 +-
 src/pages/profile/event/EventDetailPage.vue   |  13 +-
 src/pages/profile/event/EventsPage.vue        |  12 +-
 src/pages/profile/event/NewEventPage.vue      |   6 +-
 src/pages/profile/flight/EditFlightPage.vue   | 179 +++++++----
 src/pages/profile/flight/FlightDetailPage.vue | 103 +++----
 src/pages/profile/flight/FlightsPage.vue      |  13 +-
 src/pages/profile/flight/NewFlightPage.vue    |  40 ++-
 src/pages/profile/flight/PhotoEditorPage.vue  | 291 +++++++++---------
 .../organization/EditOrganizationPage.vue     |  14 +-
 .../organization/NewOrganizationPage.vue      |   6 +-
 .../organization/OrganizationDetailPage.vue   |  21 +-
 .../organization/OrganizationsPage.vue        |  16 +-
 .../profile/poi/EditPointOfInterestPage.vue   |  14 +-
 .../profile/poi/NewPointOfInterestPage.vue    |   7 +-
 .../profile/poi/PointOfInterestDetailPage.vue |  35 ++-
 .../profile/poi/PointsOfInterestPage.vue      |  13 +-
 src/pages/public/IndexPage.vue                |   8 +-
 src/pages/public/PilotProfilePage.vue         |  10 +-
 .../public/pilotProfile/CopilotDetailPage.vue |  17 +-
 .../public/pilotProfile/EventDetailPage.vue   |  22 +-
 .../public/pilotProfile/EventsListPage.vue    |  12 +-
 .../public/pilotProfile/FlightDetailPage.vue  |  32 +-
 .../public/pilotProfile/FlightsListPage.vue   |  19 +-
 src/stores/Aircrafts.js                       |  96 +++---
 src/stores/Airports.js                        |  26 +-
 src/stores/App.js                             |  41 +--
 src/stores/Copilots.js                        |  73 +++--
 src/stores/Events.js                          |  74 +++--
 src/stores/Flights.js                         | 157 ++++++----
 src/stores/Organizations.js                   | 156 +++++++---
 src/stores/Photo.js                           | 118 +++----
 src/stores/PointOfInterestType.js             |  50 ++-
 src/stores/PointsOfInterest.js                |  79 +++--
 src/stores/User.js                            | 164 +++++-----
 src/stores/helpers.js                         |  25 ++
 src/stores/index.js                           |  15 +-
 76 files changed, 1445 insertions(+), 1463 deletions(-)
 create mode 100644 src/boot/apollo.js
 create mode 100644 src/components/FormSubmitButton.vue
 delete mode 100644 src/composables/objects/aircraft.js
 delete mode 100644 src/composables/objects/copilot.js
 delete mode 100644 src/composables/objects/event.js
 delete mode 100644 src/composables/objects/organization.js
 delete mode 100644 src/composables/objects/poi.js
 delete mode 100644 src/composables/photos/batchEdit.js
 delete mode 100644 src/composables/photos/editor/photo.js
 delete mode 100644 src/composables/photos/simpleEdit.js
 delete mode 100644 src/graphql/apollo.js

diff --git a/quasar.config.js b/quasar.config.js
index b657d33..9f6b414 100644
--- a/quasar.config.js
+++ b/quasar.config.js
@@ -30,6 +30,7 @@ module.exports = configure(function (ctx) {
     // https://v2.quasar.dev/quasar-cli/boot-files
     boot: [
       "axios",
+      "apollo",
       "chartJs",
     ],
 
diff --git a/src/boot/apollo.js b/src/boot/apollo.js
new file mode 100644
index 0000000..add596f
--- /dev/null
+++ b/src/boot/apollo.js
@@ -0,0 +1,96 @@
+// import {boot} from "quasar/wrappers";
+import {ApolloClient, ApolloLink, fromPromise, InMemoryCache} from '@apollo/client/core'
+import {createUploadLink} from 'apollo-upload-client';
+import {onError} from "@apollo/client/link/error";
+import {useUserStore} from "stores/User";
+import {useAppStore} from "stores/App";
+import {Notify} from "quasar";
+import {errorObject, warningObject} from "src/composables/dialog";
+
+const handleRefreshToken = (store, forward, operation) => {
+    return fromPromise(useUserStore(store).refreshAccessToken()
+        .catch((error) => {
+            Notify.create(warningObject("Tvoje přihlášení vypřešlo. Přihlaš se prosím znovu."));
+            window.location = "/login";
+        }))
+        .filter((value) => Boolean(value))
+        .flatMap((accessToken) => {
+            const oldHeaders = operation.getContext().headers;
+            operation.setContext({
+                headers: {
+                    ...oldHeaders, authorization: `Bearer ${accessToken}`,
+                },
+            });
+
+            // retry the request, returning the new observable
+            return forward(operation);
+        });
+}
+
+
+
+export const apolloWrapper = {};
+export default (({store}) => {
+    const uploadLink = createUploadLink({
+        uri: process.env.API_URL + '/graphql',
+    })
+
+    const authLink = new ApolloLink((operation, forward) => {
+        const accessToken = useUserStore(store).getAccessToken();
+
+        if (accessToken) {
+            operation.setContext({
+                headers: {"Authorization": `Bearer ${accessToken}`},
+            });
+        }
+        return forward(operation);
+    });
+
+    const errorLink = onError(({graphQLErrors, networkError, operation, forward}) => {
+        if (networkError?.statusCode === 401) {
+            return handleRefreshToken(store, forward, operation);
+        }
+
+        if (graphQLErrors) {
+            for (const error of graphQLErrors) {
+                if (error.message === "Not found") {
+                    useAppStore(store).appStatus = 404;
+                } else if (error.message.includes("401") || error.message.includes("Not authorized")) {
+                    return handleRefreshToken(store, forward, operation);
+                } else {
+                    Notify.create(errorObject("API error: " + error.message));
+                }
+            }
+        }
+    });
+
+
+    const apolloClient = new ApolloClient({
+        link: ApolloLink.from([authLink, errorLink, uploadLink]), cache: new InMemoryCache(), connectToDevTools: true,
+    });
+    // const  apolloProvider = createApolloProvider({
+    //     defaultClient: apolloClient,
+    // });
+
+
+    apolloWrapper.query = (query, variables = {}) => {
+        return apolloClient.query({
+            query: query, fetchPolicy: 'no-cache', variables: variables
+        })
+            .then((response) => response)
+            .catch(err => {
+                console.error("Error during query: ", err)
+                return err;
+            })
+    };
+    apolloWrapper.mutate = (mutation, variables) => {
+        return apolloClient
+            .mutate({
+                mutation: mutation, fetchPolicy: 'no-cache', variables: variables,
+            })
+            .then((response) => response)
+            .catch(err => {
+                console.error("Error during mutation: ", err);
+            })
+    };
+});
diff --git a/src/boot/axios.js b/src/boot/axios.js
index 07ffed3..f486c57 100644
--- a/src/boot/axios.js
+++ b/src/boot/axios.js
@@ -3,55 +3,44 @@ import axios from 'axios'
 import {useUserStore} from "stores/User";
 
 const api = axios.create({
-  baseURL: process.env.API_URL,
-  withCredentials: true,
-  xsrfHeaderName: "X-CSRF-TOKEN",
-  headers: {
-    Accept: "application/json",
-    "Content-Type": "application/json;charset=UTF-8",
-  },
+    baseURL: process.env.API_URL,
+    withCredentials: true,
+    xsrfHeaderName: "X-CSRF-TOKEN",
+    headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json;charset=UTF-8",
+    },
 })
 
-api.interceptors.request.use((config) => {
-  const token = useUserStore().getAccessToken();
-  if (token) {
-    config.headers['Authorization'] = `Bearer ${token}`
-  }
+export default boot(({store}) => {
+    api.interceptors.request.use((config) => {
+        const token = useUserStore(store).getAccessToken();
+        if (token) {
+            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;
-})
-
-// Response interceptor for API calls
-api.interceptors.response.use((response) => {
-  return response
-}, async function (error) {
-  const originalRequest = error.config;
-  if (error.response.status === 401 && !['/refresh', '/login'].includes(originalRequest.url)) {
-    const newToken = await useUserStore().refreshAccessToken().catch(err => {
-      console.error(err);
-      return Promise.reject("Logged out");
+        return config;
     })
-    api.defaults.headers.common['Authorization'] = 'Bearer ' + newToken;
-    return api(originalRequest);
-  }
-  return Promise.reject(error);
-});
 
-
-export default boot(({app}) => {
-  // for use inside Vue files (Options API) through this.$axios and this.$api
-
-  // app.config.globalProperties.$axios = axios
-  // ^ ^ ^ this will allow you to use this.$axios (for Vue Options API form)
-  //       so you won't necessarily have to import axios in each vue file
-
-  app.config.globalProperties.$api = api
-  // ^ ^ ^ this will allow you to use this.$api (for Vue Options API form)
-  //       so you can easily perform requests against your app's API
+    // Response interceptor for API calls
+    api.interceptors.response.use(
+        (response) => response,
+        async function (error) {
+            const originalRequest = error.config;
+            if (error.response.status === 401 && !['/refresh', '/login'].includes(originalRequest.url)) {
+                const newToken = await useUserStore(store).refreshAccessToken().catch(err => {
+                    console.error(err);
+                    return Promise.reject("Logged out");
+                })
+                api.defaults.headers.common['Authorization'] = 'Bearer ' + newToken;
+                return api(originalRequest);
+            }
+            return Promise.reject(error);
+        });
 })
 
 export {axios, api}
diff --git a/src/boot/chartJs.js b/src/boot/chartJs.js
index 41daa61..84a3431 100644
--- a/src/boot/chartJs.js
+++ b/src/boot/chartJs.js
@@ -2,5 +2,5 @@ import {boot} from "quasar/wrappers";
 import {BarElement, CategoryScale, Chart as ChartJS, Filler, Legend, LinearScale, LineElement, PointElement, Title, Tooltip} from "chart.js";
 
 export default boot(({app}) => {
-  ChartJS.register(Title, Tooltip, Legend, PointElement, LineElement, Filler, BarElement, CategoryScale, LinearScale)
-})
+  ChartJS.register(Title, Tooltip, Legend, PointElement, LineElement, Filler, BarElement, CategoryScale, LinearScale);
+});
diff --git a/src/components/FormSubmitButton.vue b/src/components/FormSubmitButton.vue
new file mode 100644
index 0000000..22ad3aa
--- /dev/null
+++ b/src/components/FormSubmitButton.vue
@@ -0,0 +1,43 @@
+<script setup>
+import {computed} from "vue";
+import {useQuasar} from "quasar";
+
+const props = defineProps({
+  saveButton: {
+    type: [Object, Boolean],
+    required: false,
+    default: () => ({
+      label: "Uložit",
+      icon: "save",
+      align: "left"
+    })
+  }
+})
+const $q = useQuasar();
+const fullwidthBtn = computed(() => $q.screen.width <= $q.screen.sizes.md);
+</script>
+
+<template>
+  <div class="text-right">
+    <q-btn
+        color="primary"
+        type="submit"
+        size="lg"
+        :class="{'q-my-lg': true, 'btn--fullwidth': fullwidthBtn}"
+        :icon="props.saveButton.icon"
+        :loading="props.isRequestPending"
+    >
+      {{ props.saveButton.label }}
+
+      <template v-slot:loading>
+        <q-spinner/>
+      </template>
+    </q-btn>
+  </div>
+</template>
+
+<style>
+.btn--fullwidth {
+  width: 100%;
+}
+</style>
diff --git a/src/components/FormWrapper.vue b/src/components/FormWrapper.vue
index f2c34d8..ce8d8f4 100644
--- a/src/components/FormWrapper.vue
+++ b/src/components/FormWrapper.vue
@@ -2,6 +2,7 @@
 import {isRequestPending} from "src/composables/form/props";
 import {computed, useSlots} from "vue";
 import {useQuasar} from "quasar";
+import FormSubmitButton from "components/FormSubmitButton.vue";
 
 const props = defineProps({
   modelValue: {
@@ -23,38 +24,11 @@ const emits = defineEmits(["save"]);
 const saveForm = () => {
   emits("save", props.modelValue);
 }
-
-const $q = useQuasar();
-const fullwidthBtn = computed(() => $q.screen.width <= $q.screen.sizes.md);
-
 </script>
 
 <template>
   <q-form @submit.prevent="saveForm" ref="form">
     <slot name="default"/>
-
-    <div class="text-right">
-      <q-btn
-        color="primary"
-        type="submit"
-        size="lg"
-        :class="{'q-my-lg': true, 'btn--fullwidth': fullwidthBtn}"
-        v-if="saveButton"
-        :icon="props.saveButton.icon"
-        :loading="props.isRequestPending"
-      >
-        {{ props.saveButton.label }}
-
-        <template v-slot:loading>
-          <q-spinner />
-        </template>
-      </q-btn>
-    </div>
+    <FormSubmitButton v-if="saveButton" :save-button="saveButton" />
   </q-form>
 </template>
-
-<style>
-.btn--fullwidth {
-  width: 100%;
-}
-</style>
diff --git a/src/components/aircrafts/AircraftDetailCard.vue b/src/components/aircrafts/AircraftDetailCard.vue
index dd0b9bd..02e0d1f 100644
--- a/src/components/aircrafts/AircraftDetailCard.vue
+++ b/src/components/aircrafts/AircraftDetailCard.vue
@@ -1,5 +1,4 @@
 <script setup>
-import {aircraft} from "src/composables/objects/aircraft";
 import {confirmObject} from "src/composables/dialog";
 import {useQuasar} from "quasar";
 import {storeToRefs} from "pinia";
@@ -17,7 +16,6 @@ const $q = useQuasar();
 
 const loggedUser = storeToRefs(useUserStore()).user;
 
-
 const confirmDelete = (aircraftId) => {
   $q.dialog(confirmObject('Opravdu chceš smazat toto letadlo?'))
     .onOk(() => {
diff --git a/src/components/banners/AccessDeniedBanner.vue b/src/components/banners/AccessDeniedBanner.vue
index c289e9b..b12efdd 100644
--- a/src/components/banners/AccessDeniedBanner.vue
+++ b/src/components/banners/AccessDeniedBanner.vue
@@ -1,6 +1,4 @@
 <script setup>
-import {poi} from "src/composables/objects/poi";
-
 const props = defineProps({
     routeBack: {
     type: Object,
diff --git a/src/components/basicSkeletons/BasicListSkeleton.vue b/src/components/basicSkeletons/BasicListSkeleton.vue
index 995e781..ce36c52 100644
--- a/src/components/basicSkeletons/BasicListSkeleton.vue
+++ b/src/components/basicSkeletons/BasicListSkeleton.vue
@@ -1,5 +1,6 @@
 <script setup>
 import {randomInt} from "src/composables/random";
+import {computed} from "vue";
 
 const props = defineProps({
   itemsCountMin: {
@@ -11,14 +12,18 @@ const props = defineProps({
     type: Number,
     required:false,
     default: 5
+  },
+  items: {
+    type: Number, required: false,
   }
 })
 
+const renderedItems = computed(() => props.items || randomInt(props.itemsCountMin, props.itemsCountMax));
 </script>
 
 <template>
   <q-list bordered separator>
-    <q-item v-ripple v-for="i in randomInt(itemsCountMin, itemsCountMax)" :key="i">
+    <q-item v-ripple v-for="i in renderedItems" :key="i">
       <q-item-section avatar>
         <q-skeleton type="QAvatar" />
       </q-item-section>
diff --git a/src/components/event/EventsList.vue b/src/components/event/EventsList.vue
index 19dac40..10a8367 100644
--- a/src/components/event/EventsList.vue
+++ b/src/components/event/EventsList.vue
@@ -19,14 +19,14 @@ const getCoverPhotos = (item) => item.flights.filter(f => !!f.coverPhoto).map(f
 <template>
   <q-list bordered separator>
     <q-item
+      v-for="event of items" :key="event"
       clickable
       :to="{name: routeDetail.name, params: {...routeDetail.params, id: event.id}}"
       v-ripple
-      v-for="event of items" :key="event"
     >
       <q-item-section>
         <q-item-label>
-          <q-avatar icon="event" color="primary" text-color="white" v-if="event.flights.length === 0"/>
+          <q-avatar icon="event" color="primary" text-color="white" v-if="!event.flights || event.flights.length === 0"/>
           <AvatarsGroup :avatars="getCoverPhotos(event)" v-else/>
 
           {{ event.name }}
diff --git a/src/components/flights/FlightBasicInfo.vue b/src/components/flights/FlightBasicInfo.vue
index 65c83da..dade41b 100644
--- a/src/components/flights/FlightBasicInfo.vue
+++ b/src/components/flights/FlightBasicInfo.vue
@@ -1,5 +1,4 @@
 <script setup>
-import {flight} from "src/composables/objects/flight";
 import {FORMAT_DATE, FORMAT_TIME, formatDatetime, minutesToHumanReadable} from "src/composables/datetimeUtils";
 import WeatherInfo from "components/weather/WeatherInfo.vue";
 
diff --git a/src/components/flights/FlightDetailSkeleton.vue b/src/components/flights/FlightDetailSkeleton.vue
index 7071716..057d4be 100644
--- a/src/components/flights/FlightDetailSkeleton.vue
+++ b/src/components/flights/FlightDetailSkeleton.vue
@@ -1,5 +1,4 @@
 <script setup>
-import {randomInt} from "src/composables/random";
 import ListItemSkeleton from "components/basicSkeletons/ListItemSkeleton.vue";
 import BasicTextSkeleton from "components/basicSkeletons/BasicTextSkeleton.vue";
 </script>
@@ -16,7 +15,7 @@ import BasicTextSkeleton from "components/basicSkeletons/BasicTextSkeleton.vue";
 
         <q-item>
           <q-list>
-            <ListItemSkeleton v-for="i in randomInt(1, 3)" :key="i"/>
+            <ListItemSkeleton v-for="i in 3" :key="i"/>
           </q-list>
         </q-item>
 
@@ -26,7 +25,7 @@ import BasicTextSkeleton from "components/basicSkeletons/BasicTextSkeleton.vue";
       </q-list>
 
       <article class="q-my-lg">
-        <BasicTextSkeleton :lines="randomInt(2, 5)" :paragraphs="randomInt(1, 2)" />
+        <BasicTextSkeleton :lines="4" :paragraphs="2" />
       </article>
 
       <q-skeleton height="400px" square class="q-mt-lg"/>
diff --git a/src/components/flights/FlightTrackMap.vue b/src/components/flights/FlightTrackMap.vue
index 54aa9f7..38ba255 100644
--- a/src/components/flights/FlightTrackMap.vue
+++ b/src/components/flights/FlightTrackMap.vue
@@ -1,7 +1,6 @@
 <script setup>
-import {flight} from "src/composables/objects/flight";
 import MapWithMarkers from "components/map/MapWithMarkers.vue";
-import {computed, ref} from "vue";
+import {computed, reactive, ref} from "vue";
 import {Line} from "vue-chartjs"
 
 const props = defineProps({
@@ -12,23 +11,23 @@ const props = defineProps({
 })
 
 
-const mapPhotos = computed(() => flight.value.photos.filter(photo => photo.gpsLatitude && photo.gpsLongitude));
-const poisWithGPS = computed(() => flight.value.track.map(poi => poi.pointOfInterest || poi.airport));
+const mapPhotos = computed(() => props.flight.photos.filter(photo => photo.gpsLatitude && photo.gpsLongitude));
+const poisWithGPS = computed(() => props.flight.track.map(poi => poi.pointOfInterest || poi.airport));
 
-const mapMarkers = [flight.value.takeoffAirport].concat(poisWithGPS.value).concat([flight.value.landingAirport]);
+const mapMarkers = [props.flight.takeoffAirport].concat(poisWithGPS.value).concat([props.flight.landingAirport]);
 const pointsOfInterests = computed(() => mapMarkers
   .filter(marker => marker.gpsLatitude && marker.gpsLongitude)
   .map(
     marker => ({label: marker.name, position: {lat: marker.gpsLatitude, lng: marker.gpsLongitude}})
   ));
 
-const gpxTrack = flight.value.gpxTrack;
+const gpxTrack = props.flight.gpxTrack ? reactive(props.flight.gpxTrack) : null;
 const displayMap = computed(() => {
   return (
     !!gpxTrack ||
     mapPhotos.value.length > 0 ||
     poisWithGPS.value.length > 0 ||
-    flight.value.landingAirport.id !== flight.value.takeoffAirport.id
+    props.flight.landingAirport.id !== props.flight.takeoffAirport.id
   )
 });
 
@@ -82,7 +81,7 @@ const drawCurrentPositionMarker = (e) => {
     return;
   }
   const idx = res[0].index;
-  currentPositionMarker.value = flight.value.gpxTrack.coordinates[idx];
+  currentPositionMarker.value = props.flight.gpxTrack.coordinates[idx];
 }
 
 const chartOptions = {
diff --git a/src/components/flights/form/FlightFormNotes.vue b/src/components/flights/form/FlightFormNotes.vue
index 6ad3832..dbd91a6 100644
--- a/src/components/flights/form/FlightFormNotes.vue
+++ b/src/components/flights/form/FlightFormNotes.vue
@@ -5,7 +5,6 @@ import {setDefaultData} from "src/composables/form/formHandling";
 import RichTextEditor from "components/inputs/RichTextEditor.vue";
 import {commonProps} from "src/composables/inputs";
 import ComboboxInput from "components/inputs/ComboboxInput.vue";
-import {isRequestPending} from "src/composables/objects/flight";
 
 const props = defineProps({
   flight: {
diff --git a/src/components/poi/POIForm.vue b/src/components/poi/POIForm.vue
index b4f4d78..ee6ad42 100644
--- a/src/components/poi/POIForm.vue
+++ b/src/components/poi/POIForm.vue
@@ -24,7 +24,7 @@ const props = defineProps({
 
 const formData = reactive({
   name: null,
-  description: null,
+  description: "",
   gpsLatitude: null,
   gpsLongitude: null,
   type: null,
diff --git a/src/components/profile/PilotProfileCard.vue b/src/components/profile/PilotProfileCard.vue
index 128be8a..8fb4bbc 100644
--- a/src/components/profile/PilotProfileCard.vue
+++ b/src/components/profile/PilotProfileCard.vue
@@ -1,7 +1,13 @@
 <script setup>
-import {user as pilot} from "src/composables/objects/user";
 import {FORMAT_DATE, formatDatetime} from "src/composables/datetimeUtils";
 import AvatarFromPhoto from "components/avatars/AvatarFromPhoto.vue";
+
+const props = defineProps({
+  pilot: {
+    type: Object,
+    required: true
+  }
+});
 </script>
 
 <template>
diff --git a/src/composables/objects/aircraft.js b/src/composables/objects/aircraft.js
deleted file mode 100644
index d64bdf5..0000000
--- a/src/composables/objects/aircraft.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import {useAircraftsStore} from "stores/Aircrafts";
-import {ref} from "vue";
-import {storeToRefs} from "pinia";
-
-export const loading = ref(true);
-
-export const aircraft = ref(null);
-
-export const fetchAircraft = (aircraftId) => {
-  loading.value = true;
-  return useAircraftsStore().fetchDetail(aircraftId).then((data) => {
-    aircraft.value = data;
-  }).catch(err => {
-    console.error(err);
-  }).finally(() => loading.value = false);
-}
-
-
-export const aircrafts = storeToRefs(useAircraftsStore()).items;
-export const fetchAircrafts = () => {
-  loading.value = true;
-  useAircraftsStore().fetch().finally(() => loading.value = false);
-}
-
-export const isRequestPending = storeToRefs(useAircraftsStore).isMutationRunning;
diff --git a/src/composables/objects/copilot.js b/src/composables/objects/copilot.js
deleted file mode 100644
index 1bbb641..0000000
--- a/src/composables/objects/copilot.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import {ref} from "vue";
-import {useCopilotsStore} from "stores/Copilots";
-import {storeToRefs} from "pinia";
-
-export const loading = ref(true);
-export const copilot = ref(null);
-export const fetchCopilot = (copilotId, pilotUsername) => {
-  loading.value = true;
-  return useCopilotsStore().fetchDetail(parseInt(copilotId), pilotUsername)
-    .then(resp => {
-      copilot.value = resp;
-      return resp;
-    })
-    .finally(() => loading.value = false);
-}
-
-export const copilots = storeToRefs(useCopilotsStore()).items;
-export const fetchCopilots = () => {
-  loading.value = true;
-  return useCopilotsStore().fetch().finally(() => loading.value = false);
-}
-
-export const isRequestPending = storeToRefs(useCopilotsStore()).isMutationRunning;
diff --git a/src/composables/objects/event.js b/src/composables/objects/event.js
deleted file mode 100644
index cb3aa8c..0000000
--- a/src/composables/objects/event.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import {FORMAT_DATE, formatDatetime} from "src/composables/datetimeUtils";
-import {useEventsStore} from "stores/Events";
-import {ref} from "vue";
-import {storeToRefs} from "pinia";
-import {confirmObject} from "src/composables/dialog";
-import {useAppStore} from "stores/App";
-export const loading = ref(true);
-export const event = ref(null);
-export const fetchEvent = (eventId, username) => {
-  loading.value = true;
-  return useEventsStore().fetchDetail(parseInt(eventId), username)
-    .then(respEvent => {
-      event.value = respEvent;
-      return respEvent;
-    })
-    .finally(() => loading.value = false);
-};
-
-export const events = storeToRefs(useEventsStore()).items;
-
-export const fetchEvents = (username) => {
-  loading.value = true;
-  useEventsStore().fetch(username).finally(() => {
-    loading.value = false;
-  });
-};
-
-
-export const handleDeleteEvent = ($q, eventId, onOkCallback = () => {
-}) => {
-  $q.dialog(confirmObject(`Opravdu chceš smazat tento let?`))
-    .onOk(() => {
-      useEventsStore().delete(eventId).then(onOkCallback);
-    });
-};
-
-export const isRequestPending = storeToRefs(useEventsStore()).isRequestPending;
diff --git a/src/composables/objects/flight.js b/src/composables/objects/flight.js
index 278240c..5121fd9 100644
--- a/src/composables/objects/flight.js
+++ b/src/composables/objects/flight.js
@@ -1,8 +1,4 @@
 import {FORMAT_DATE, formatDatetime} from "src/composables/datetimeUtils";
-import {useFlightsStore} from "stores/Flights";
-import {ref} from "vue";
-import {storeToRefs} from "pinia";
-import {confirmObject} from "src/composables/dialog";
 
 export const flightName = (flight) => {
   const date = formatDatetime(flight.takeoffDatetime, FORMAT_DATE);
@@ -15,35 +11,3 @@ export const flightName = (flight) => {
     return `${flight.takeoffAirport.icaoCode} ${trackStr} ${flight.landingAirport.icaoCode} (${date})`;
   }
 }
-
-export const loading = ref(true);
-export const flight = ref(null);
-export const fetchFlight = (flightId, username) => {
-  loading.value = true;
-  return useFlightsStore().fetchDetail(parseInt(flightId), username)
-    .then(respFlight => {
-      flight.value = respFlight;
-      return respFlight;
-    })
-    .finally(() => loading.value = false);
-};
-
-export const flights = storeToRefs(useFlightsStore()).items;
-
-export const fetchFlights = (username = null) => {
-  loading.value = true;
-  useFlightsStore().fetch(username).finally(() => {
-    loading.value = false;
-  });
-};
-
-
-export const handleDeleteFlight = ($q, flightId, onOkCallback = () => {
-}) => {
-  $q.dialog(confirmObject(`Opravdu chceš smazat tento let?`))
-    .onOk(() => {
-      useFlightsStore().delete(flightId).then(onOkCallback);
-    });
-};
-
-export const isRequestPending = storeToRefs(useFlightsStore()).isRequestPending;
diff --git a/src/composables/objects/organization.js b/src/composables/objects/organization.js
deleted file mode 100644
index 405f60d..0000000
--- a/src/composables/objects/organization.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import {computed, ref} from "vue";
-import {storeToRefs} from "pinia";
-import {useOrganizationsStore} from "stores/Organizations";
-import {useUserStore} from "stores/User";
-import {successObject} from "src/composables/dialog";
-
-export const loading = ref(true);
-export const organization = ref(null);
-export const fetchOrganization = (organizationId) => {
-  loading.value = true;
-  return useOrganizationsStore().fetchDetail(parseInt(organizationId))
-    .then(resp => {
-      organization.value = resp;
-      return resp;
-    })
-    .finally(() => loading.value = false);
-}
-
-export const organizations = storeToRefs(useOrganizationsStore()).items;
-export const fetchOrganizations = () => {
-  loading.value = true;
-  return useOrganizationsStore().fetch().finally(() => loading.value = false);
-}
-
-export const isRequestPending = storeToRefs(useOrganizationsStore()).isMutationRunning;
-
-const loggedUser = storeToRefs(useUserStore()).user;
-export const myOrganizationIds = computed(() => loggedUser.value.organizations?.map(o => o.id) || []);
-
-export const addToOrganization = async (organizationId) => {
-  useOrganizationsStore().addUserToOrganization(organizationId).then((data) => {
-    organization.value.users = data.users;
-    useUserStore().fetchLoggedUserDetail();
-  });
-};
-
-export const removeFromOrganization = async (organizationId) => {
-  useOrganizationsStore().removeUserFromOrganization(organizationId).then((data) => {
-    organization.value.users = data.users;
-    useUserStore().fetchLoggedUserDetail();
-  });
-}
diff --git a/src/composables/objects/poi.js b/src/composables/objects/poi.js
deleted file mode 100644
index ba210c6..0000000
--- a/src/composables/objects/poi.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import {ref} from "vue";
-import {usePointsOfInterestStore} from "stores/PointsOfInterest";
-import {storeToRefs} from "pinia";
-
-export const loading = ref(true);
-export const poi = ref(null);
-export const fetchPoi = (poiId) => {
-  loading.value = true;
-  return usePointsOfInterestStore().fetchDetail(poiId)
-    .then(data => {
-      poi.value = data;
-      return data;
-    })
-    .finally(() => loading.value = false);
-};
-
-
-export const pointsOfInterest = storeToRefs(usePointsOfInterestStore()).items;
-export const fetchPOIList = () => {
-  loading.value = true;
-  return usePointsOfInterestStore().fetch().finally(() => loading.value = false);
-}
diff --git a/src/composables/photos/batchEdit.js b/src/composables/photos/batchEdit.js
deleted file mode 100644
index 51590c7..0000000
--- a/src/composables/photos/batchEdit.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import {ref} from "vue";
-import {usePhotosStore} from "stores/Photo";
-import {fetchFlight} from "src/composables/objects/flight";
-import {usePointsOfInterestStore} from "stores/PointsOfInterest";
-
-export const openBatchEdit = ref(false);
-export const editBatchPhotos = ref([]);
-export const openBatchPhotoForm = (photos) => {
-  openBatchEdit.value = true;
-  editBatchPhotos.value = photos;
-}
-
-export const handleBatchPhotoEdit = async (flightId, data) => {
-  const photoIds = data.photoIds;
-  delete data.photoIds;
-  delete data.id;
-
-  if (data.pointOfInterest && !data.pointOfInterest.id) {
-    const poiData = {
-      ...data.pointOfInterest,
-      isPublic: false,
-      description: "",
-    }
-    await usePointsOfInterestStore().create(poiData).then(poi => data.pointOfInterest = {id: poi.id, name: poi.name});
-  }
-
-  const promises = [];
-  for (const id of photoIds) {
-    const updateData = {};
-    if (data.name !== '') updateData.name = data.name;
-    if (data.description !== '') updateData.description = data.description;
-    if (data.pointOfInterest) updateData.pointOfInterest = data.pointOfInterest;
-
-    if (Object.keys(updateData).length === 0) continue;
-
-    promises.push(usePhotosStore().update(id, updateData));
-  }
-
-  Promise.all(promises).finally(() => fetchFlight(flightId))
-}
diff --git a/src/composables/photos/editor/crop.js b/src/composables/photos/editor/crop.js
index 0d446c2..095166d 100644
--- a/src/composables/photos/editor/crop.js
+++ b/src/composables/photos/editor/crop.js
@@ -1,55 +1,58 @@
 import {computed, ref, watch} from "vue";
 import {cropper} from "vue-picture-cropper";
 import {roundWithPrecision} from "src/composables/utils";
-import {photoAspectRatio} from "src/composables/photos/editor/photo";
 
-export const cropperImgSizes = computed(() => [cropper.getImageData().width, cropper.getImageData().height]);
+export const photoAspectRatio = ref(0);
+
+export const cropperImgSizes = computed(() => {
+    if (!cropper) return [];
+
+    return [cropper.getImageData().width, cropper.getImageData().height]
+});
 export const croppedArea = ref(null);
 export const selectedAspectRatio = ref(null);
 
 watch(() => selectedAspectRatio.value, (newVal) => {
-  cropper.setAspectRatio(newVal);
+    console.log(newVal);
+    cropper.setAspectRatio(newVal);
 })
 
 
 export const setCropData = () => {
-  const [w, h] = cropperImgSizes.value;
+    const [w, h] = cropperImgSizes.value;
 
-  console.log("crop end");
-
-  const cropData = cropper.getCropBoxData();
-  croppedArea.value = {
-    left: roundWithPrecision(cropData.left / w, 5),
-    top: roundWithPrecision(cropData.top / h, 5),
-    width: roundWithPrecision(cropData.width / w, 5),
-    height: roundWithPrecision(cropData.height / h, 5)
-  };
+    const cropData = cropper.getCropBoxData();
+    croppedArea.value = {
+        left: roundWithPrecision(cropData.left / w, 5),
+        top: roundWithPrecision(cropData.top / h, 5),
+        width: roundWithPrecision(cropData.width / w, 5),
+        height: roundWithPrecision(cropData.height / h, 5)
+    };
 }
 
-export const aspectRatioOptions = computed(() =>
-  [
-    {label: '16:9', value: roundWithPrecision(16 / 9, 5)},
-    {label: '4:3', value: roundWithPrecision(4 / 3, 5)},
-    {label: '9:16', value: roundWithPrecision(9 / 16, 5)},
-    {label: '3:4', value: roundWithPrecision(3 / 4, 5)},
-    {label: '1:1', value: 1},
-    {label: 'Volný', value: null},
-    {label: 'Původní', value: roundWithPrecision(photoAspectRatio.value, 5)},
-  ]
+export const aspectRatioOptions = computed(() => [
+        {label: '16:9', value: roundWithPrecision(16 / 9, 5)},
+        {label: '4:3', value: roundWithPrecision(4 / 3, 5)},
+        {label: '9:16', value: roundWithPrecision(9 / 16, 5)},
+        {label: '3:4', value: roundWithPrecision(3 / 4, 5)},
+        {label: '1:1', value: 1},
+        {label: 'Volný', value: null},
+        {label: 'Původní', value: roundWithPrecision(photoAspectRatio.value, 5)},
+    ]
 );
 
 export const cropperReady = (e) => {
-  if (croppedArea.value) {
-    const [w, h] = cropperImgSizes.value;
-    selectedAspectRatio.value = roundWithPrecision((croppedArea.value.width * w) / (croppedArea.value.height * h), 5);
+    if (croppedArea.value && croppedArea.value.height) {
+        const [w, h] = cropperImgSizes.value;
+        selectedAspectRatio.value = roundWithPrecision((croppedArea.value.width * w) / (croppedArea.value.height * h), 5);
 
-    cropper.setCropBoxData({
-      left: croppedArea.value.left * w,
-      top: croppedArea.value.top * h,
-      width: croppedArea.value.width * w,
-      height: croppedArea.value.height * h
-    });
-  } else {
-    selectedAspectRatio.value = roundWithPrecision(photoAspectRatio.value, 5);
-  }
+        cropper.setCropBoxData({
+            left: croppedArea.value.left * w,
+            top: croppedArea.value.top * h,
+            width: croppedArea.value.width * w,
+            height: croppedArea.value.height * h
+        });
+    } else {
+        selectedAspectRatio.value = roundWithPrecision(photoAspectRatio.value, 5);
+    }
 }
diff --git a/src/composables/photos/editor/photo.js b/src/composables/photos/editor/photo.js
deleted file mode 100644
index e43c29a..0000000
--- a/src/composables/photos/editor/photo.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import {computed, ref} from "vue";
-import {usePhotosStore} from "stores/Photo";
-
-export const loading = ref(true);
-export const photo = ref(null);
-export const fetchPhoto = (id) => {
-    loading.value = true;
-    return usePhotosStore().fetchDetail(id)
-        .then(resp => {
-            photo.value = resp;
-            return resp;
-        })
-        .finally(() => loading.value = false);
-};
-
-export const photoAspectRatio = computed(() => photo.value.width / photo.value.height);
diff --git a/src/composables/photos/simpleEdit.js b/src/composables/photos/simpleEdit.js
deleted file mode 100644
index 3b4b6a0..0000000
--- a/src/composables/photos/simpleEdit.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import {usePhotosStore} from "stores/Photo";
-import {fetchFlight} from "src/composables/objects/flight";
-import {usePointsOfInterestStore} from "stores/PointsOfInterest";
-import {ref} from "vue";
-
-export const handlePhotoUpdate = (flightId, formData) => {
-    const photoId = formData.id;
-    delete formData.id;
-
-    usePhotosStore().update(photoId, formData).then((data) => {
-        fetchFlight(flightId); // nenacita se mi nove vytvoreny POI z comboboxu
-        usePointsOfInterestStore().fetch();
-    });
-};
-
-export const openEdit = ref(false);
-export const editPhoto = ref(null);
-
-export const openPhotoEdit = (photo) => {
-    openEdit.value = true;
-    editPhoto.value = photo;
-};
diff --git a/src/graphql/apollo.js b/src/graphql/apollo.js
deleted file mode 100644
index 5805c74..0000000
--- a/src/graphql/apollo.js
+++ /dev/null
@@ -1,109 +0,0 @@
-import {ApolloClient, ApolloLink, fromPromise, InMemoryCache} from '@apollo/client/core'
-import {createApolloProvider} from "@vue/apollo-option";
-import {createUploadLink} from 'apollo-upload-client';
-import {onError} from "@apollo/client/link/error";
-import {useUserStore} from "stores/User";
-import {useAppStore} from "stores/App";
-import {Notify} from "quasar";
-import {errorObject, warningObject} from "src/composables/dialog";
-
-
-const uploadLink = createUploadLink({
-  uri: process.env.API_URL + '/graphql',
-})
-
-const handleRefreshToken = (forward, operation) => {
-  return fromPromise(
-    useUserStore().refreshAccessToken()
-      .catch((error) => {
-        Notify.create(warningObject("Tvoje přihlášení vypřešlo. Přihlaš se prosím znovu."));
-        window.location = "/login";
-      })
-  )
-    .filter((value) => Boolean(value))
-    .flatMap((accessToken) => {
-      const oldHeaders = operation.getContext().headers;
-      operation.setContext({
-        headers: {
-          ...oldHeaders,
-          authorization: `Bearer ${accessToken}`,
-        },
-      });
-
-      // retry the request, returning the new observable
-      return forward(operation);
-    });
-}
-
-const errorLink = onError(
-  ({graphQLErrors, networkError, operation, forward}) => {
-    if (networkError?.statusCode === 401) {
-      return handleRefreshToken(forward, operation);
-    }
-
-    if (graphQLErrors) {
-      for (const error of graphQLErrors) {
-        if (error.message === "Not found") {
-          useAppStore().appStatus = 404;
-        } else if (error.message.includes("401") || error.message.includes("Not authorized")) {
-          return handleRefreshToken(forward, operation);
-        } else {
-          Notify.create(errorObject("API error: " + error.message));
-        }
-      }
-    }
-  });
-
-const authLink = new ApolloLink((operation, forward) => {
-  const accessToken = useUserStore().getAccessToken();
-
-  if (accessToken) {
-    operation.setContext({
-      headers: {"Authorization": `Bearer ${accessToken}`},
-    });
-  }
-  return forward(operation);
-});
-
-export const apolloClient = new ApolloClient({
-  link: ApolloLink.from([authLink, errorLink, uploadLink]),
-  cache: new InMemoryCache(),
-  connectToDevTools: true,
-})
-
-export const apolloWrapper = {
-  query(query, variables = {}) {
-    return apolloClient.query({
-      query: query,
-      fetchPolicy: 'no-cache',
-      variables: variables
-    })
-      .then((response) => response)
-      .catch(err => {
-        console.error("Error during query: ", err)
-        return err;
-      })
-  },
-
-  mutate(mutation, variables, onUpdate = () => {
-  }) {
-    return apolloClient
-      .mutate({
-        mutation: mutation,
-        fetchPolicy: 'no-cache',
-        variables: variables,
-        update: () => {
-          onUpdate();
-        },
-      })
-      .then((response) => response)
-      .catch(err => {
-        console.error("Error during mutation: ", err);
-      })
-  },
-}
-
-// @see https://v4.apollo.vuejs.org/migration/
-export const apolloProvider = createApolloProvider({
-  defaultClient: apolloClient,
-})
diff --git a/src/graphql/mutations/flight.js b/src/graphql/mutations/flight.js
index 59808c9..b6425f7 100644
--- a/src/graphql/mutations/flight.js
+++ b/src/graphql/mutations/flight.js
@@ -4,11 +4,12 @@ import {FRAGMENT_FLIGHT_FULL_INFO} from "src/graphql/fragments/flight";
 export const CREATE_FLIGHT = gql`
 mutation createFlight($input: CreateFlightInput!) {
     createFlight(input: $input) {
-      id
+      ...flightFullInfo
     }
   }
-`
-// ^^ nesmim se tu ptat na aircraft, jinak mi to upadne
+  ${FRAGMENT_FLIGHT_FULL_INFO}
+`;
+
 export const EDIT_FLIGHT = gql`
 mutation editFlight($id: Int!, $input: EditFlightInput!) {
     editFlight(id: $id, input: $input) {
diff --git a/src/graphql/mutations/organization.js b/src/graphql/mutations/organization.js
index fc06918..27d96a0 100644
--- a/src/graphql/mutations/organization.js
+++ b/src/graphql/mutations/organization.js
@@ -7,7 +7,6 @@ export const CREATE_ORGANIZATION = gql`
       ...organizationFullInfo
     }
   }
-
   ${FRAGMENT_ORGANIZATION_FULL_INFO}
 `;
 
@@ -17,33 +16,26 @@ mutation editOrganization($id: Int!, $input: EditOrganizationInput!) {
     ...organizationFullInfo
   }
 }
-
-  ${FRAGMENT_ORGANIZATION_FULL_INFO}
+${FRAGMENT_ORGANIZATION_FULL_INFO}
 `;
 
 export const ADD_USER_TO_ORGANIZATION = gql`
 mutation addToOrganization($organizationId: Int!) {
   addToOrganization(organizationId: $organizationId) {
-    users {
-      id
-      name
-      email
-      avatarImageUrl
-    }
+    ...organizationFullInfo
   }
-}`;
+}
+${FRAGMENT_ORGANIZATION_FULL_INFO}
+`;
 
 export const REMOVE_USER_FROM_ORGANIZATION = gql`
 mutation removeFromOrganization($organizationId: Int!) {
   removeFromOrganization(organizationId: $organizationId) {
-    users {
-      id
-      name
-      email
-      avatarImageUrl
-    }
+    ...organizationFullInfo
   }
-}`;
+}
+${FRAGMENT_ORGANIZATION_FULL_INFO}
+`;
 
 // export const DELETE_ORGANIZATION = gql`
 // mutation deleteOrganization($id: Int!) {
diff --git a/src/layouts/ProfileLayout.vue b/src/layouts/ProfileLayout.vue
index d5f639f..9dff330 100644
--- a/src/layouts/ProfileLayout.vue
+++ b/src/layouts/ProfileLayout.vue
@@ -15,7 +15,7 @@
           {{ pageTitle || "Polétání.cz" }}
         </q-toolbar-title>
 
-        <TopMenuButton :logged-user="loggedUser" @logout="logout"/>
+        <TopMenuButton v-if="!isQueryRunning && user" :logged-user="user" @logout="logout"/>
 
       </q-toolbar>
     </q-header>
@@ -26,7 +26,9 @@
       bordered
     >
 
-      <q-img class="absolute-top" :src="loggedUser.titleImageUrl" style="height: 150px"/>
+      <q-img class="absolute-top" v-if="!isQueryRunning && user" :src="user.titleImageUrl" style="height: 150px" />
+      <q-spinner v-else />
+
       <q-scroll-area style="height: calc(100% - 150px); margin-top: 150px; border-right: 1px solid #ddd">
         <SidebarNavigation/>
       </q-scroll-area>
@@ -42,7 +44,7 @@
 </template>
 
 <script setup>
-import {onMounted, ref} from 'vue'
+import {onBeforeMount, onMounted, ref} from 'vue'
 import NavigationButton from "components/navigation/NavigationButton.vue";
 import {useUserStore} from "stores/User";
 import {storeToRefs} from "pinia";
@@ -68,10 +70,10 @@ const toggleLeftDrawer = () => {
   leftDrawerOpen.value = !leftDrawerOpen.value
 };
 
-onMounted(() => {
+onBeforeMount(() => {
   useUserStore().fetchLoggedUserDetail();
 })
-const loggedUser = storeToRefs(useUserStore()).user;
+const {isQueryRunning, user} = storeToRefs(useUserStore());
 
 const logout = () => {
   useUserStore().logout().then(() => {
diff --git a/src/layouts/PublicLayout.vue b/src/layouts/PublicLayout.vue
index dff86a2..e6eb116 100644
--- a/src/layouts/PublicLayout.vue
+++ b/src/layouts/PublicLayout.vue
@@ -6,7 +6,7 @@
           {{ pageTitle }}
         </q-toolbar-title>
 
-        <template v-if="loggedUser.id">
+        <template v-if="loggedUser && loggedUser.id">
           <router-link :to="{name: 'myFlights'}">
             <AvatarFromPhoto :size="35" :src="loggedUser.avatarImageUrl"/>
           </router-link>
@@ -46,11 +46,13 @@ useMeta(() => ({
   title: pageTitle.value !== '' ? `${pageTitle.value} - Polétání.cz` : 'Polétání.cz'
 }));
 
-// onMounted(() => {
-//   if (loggedUser || useUserStore().hasAccessToken()) {
-//     // poll once per 5 minutes to keep access token active
-//     setInterval(useUserStore().fetchLoggedUserDetail, 5*60*1000);
-//   }
-// })
+onMounted(() => {
+  useUserStore().fetchLoggedUserDetail();
+
+  if (loggedUser || useUserStore().hasAccessToken()) {
+    // poll once per 5 minutes to keep access token active
+    setInterval(useUserStore().fetchLoggedUserDetail, 5*60*1000);
+  }
+})
 
 </script>
diff --git a/src/pages/profile/aircraft/AircraftDetailPage.vue b/src/pages/profile/aircraft/AircraftDetailPage.vue
index 0ed447f..38aa8d0 100644
--- a/src/pages/profile/aircraft/AircraftDetailPage.vue
+++ b/src/pages/profile/aircraft/AircraftDetailPage.vue
@@ -5,43 +5,46 @@ import {useRoute, useRouter} from "vue-router";
 import {useQuasar} from "quasar";
 import AircraftDetailSkeleton from "components/aircrafts/AircraftDetailSkeleton.vue";
 import {successObject} from "src/composables/dialog";
-import {loading, aircraft, fetchAircraft} from "src/composables/objects/aircraft";
 import {useAppStore} from "stores/App";
 import FlightsList from "components/flights/FlightsList.vue";
 import AircraftDetailCard from "components/aircrafts/AircraftDetailCard.vue";
-import {poi} from "src/composables/objects/poi";
-import AccessDeniedBanner from "components/banners/AccessDeniedBanner.vue";
 import {storeToRefs} from "pinia";
-import {useUserStore} from "stores/User";
 
 const $q = useQuasar();
 const $router = useRouter();
 
 const aircraftId = parseInt(useRoute().params.id);
 onMounted(() => {
-  fetchAircraft(aircraftId);
+  useAircraftsStore().fetchDetail(aircraftId);
 })
 
-const deleteAircraft = (id) => {
-  useAircraftsStore().delete(id).then(() => {
-    $router.push({name: "aircrafts"});
-    $q.notify(successObject("Letadlo úspěšně odstraněno"));
-  });
-}
+const {aircraft, isQueryRunning} = storeToRefs(useAircraftsStore());
+watch(() => aircraft.value, (newVal) => {
+  if (!newVal) return;
 
-watch(aircraft, (newVal) => {
   useAppStore().setPageTitle(newVal.callSign);
   useAppStore().setBreadcrumbs([
     {label: "Letadla", to: {name: "aircrafts"}},
     {label: newVal.callSign}
   ])
 });
+
+const deleteAircraft = (id) => {
+  useAircraftsStore().destroy(id).then(() => {
+    $router.push({name: "aircrafts"});
+    $q.notify(successObject("Letadlo úspěšně odstraněno"));
+  });
+}
 </script>
 
 <template>
-  <AircraftDetailSkeleton v-if="loading || !aircraft"/>
+  <AircraftDetailSkeleton v-if="isQueryRunning || !aircraft"/>
+
   <template v-else>
-    <AircraftDetailCard :aircraft="aircraft" @delete="deleteAircraft" />
+    <AircraftDetailCard
+      :aircraft="aircraft"
+      @delete="deleteAircraft"
+    />
 
     <q-card class="flight-detail-card" flat>
       <h3>Lety</h3>
diff --git a/src/pages/profile/aircraft/AircraftsPage.vue b/src/pages/profile/aircraft/AircraftsPage.vue
index 4424b72..9591ede 100644
--- a/src/pages/profile/aircraft/AircraftsPage.vue
+++ b/src/pages/profile/aircraft/AircraftsPage.vue
@@ -1,21 +1,25 @@
 <script setup>
 import {onMounted} from "vue";
 import AircraftsList from "components/aircrafts/AircraftsList.vue";
-import {aircrafts, fetchAircrafts, loading} from "src/composables/objects/aircraft";
 import FAB from "components/FAB.vue";
 import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
+import {useAircraftsStore} from "stores/Aircrafts";
+import {storeToRefs} from "pinia";
 
+const store = useAircraftsStore();
 onMounted(() => {
-  fetchAircrafts();
+  store.fetch();
 })
+
+const {aircrafts, isQueryRunning} = storeToRefs(store);
 </script>
 
 <template>
-  <BasicListSkeleton v-if="loading"/>
+  <BasicListSkeleton v-if="isQueryRunning"/>
 
   <BasicInfoBanner
-    v-if="!loading && aircrafts.length === 0"
+    v-if="!isQueryRunning && aircrafts.length === 0"
     :route-add="{name: 'addAircraft'}"
     label-add="Vytvořit letadlo"
   >
diff --git a/src/pages/profile/aircraft/EditAircraftPage.vue b/src/pages/profile/aircraft/EditAircraftPage.vue
index b81e5ef..e5e70f3 100644
--- a/src/pages/profile/aircraft/EditAircraftPage.vue
+++ b/src/pages/profile/aircraft/EditAircraftPage.vue
@@ -6,9 +6,7 @@ import {useQuasar} from "quasar";
 import {onMounted} from "vue";
 import AircraftEditSkeleton from "components/aircrafts/AircraftEditSkeleton.vue";
 import {successObject} from "src/composables/dialog";
-import {aircraft, fetchAircraft, loading, isRequestPending} from "src/composables/objects/aircraft";
 import {useAppStore} from "stores/App";
-import {fetchOrganizations, organizations} from "src/composables/objects/organization";
 import AccessDeniedBanner from "components/banners/AccessDeniedBanner.vue";
 import {storeToRefs} from "pinia";
 import {useUserStore} from "stores/User";
@@ -25,9 +23,10 @@ const handleSave = (formData) => {
     $router.push({name: "aircraftDetail", params: {id: aircraftId}});
   })
 }
+const {aircraft, isMutationRunning, isQueryRunning} = storeToRefs(useAircraftsStore());
 
 onMounted(() => {
-  fetchAircraft(aircraftId).then(() => {
+  useAircraftsStore().fetchDetail(aircraftId).then(() => {
     useAppStore().setPageTitle(`${aircraft.value.callSign} - editace`);
     useAppStore().setBreadcrumbs([
       {to: {name: "aircraft"}, label: "Letadla"},
@@ -36,10 +35,11 @@ onMounted(() => {
     ])
   });
 });
+
 </script>
 
 <template>
-  <AircraftEditSkeleton v-if="loading"/>
+  <AircraftEditSkeleton v-if="isQueryRunning || !aircraft"/>
 
   <AccessDeniedBanner
     v-else-if="aircraft.createdById !== loggedUser.id"
@@ -52,7 +52,7 @@ onMounted(() => {
         @save="handleSave"
         :default-values="aircraft"
         :organizations="loggedUser.organizations"
-        :is-request-pending="isRequestPending"
+        :is-request-pending="isMutationRunning"
       />
     </q-card-section>
   </q-card>
diff --git a/src/pages/profile/aircraft/NewAircraftsPage.vue b/src/pages/profile/aircraft/NewAircraftsPage.vue
index 6f8c688..eb89c84 100644
--- a/src/pages/profile/aircraft/NewAircraftsPage.vue
+++ b/src/pages/profile/aircraft/NewAircraftsPage.vue
@@ -5,8 +5,7 @@ import {useRouter} from "vue-router";
 import {useQuasar} from "quasar";
 import {useAppStore} from "stores/App";
 import {successObject} from "src/composables/dialog";
-import {isRequestPending} from "src/composables/objects/aircraft";
-import {fetchOrganizations, organizations} from "src/composables/objects/organization";
+import {fetchOrganizations} from "src/composables/objects/organization";
 import {onMounted} from "vue";
 import {storeToRefs} from "pinia";
 import {useUserStore} from "stores/User";
@@ -30,13 +29,16 @@ onMounted(() => {
     {label: "Nové"}
   ]);
 });
+
+const {isMutationRunning} = storeToRefs(useAircraftsStore());
+
 </script>
 
 <template>
   <q-card class="q-mx-md q-my-md">
     <q-card-section>
       <AircraftForm
-        :is-request-pending="isRequestPending"
+        :is-request-pending="isMutationRunning"
         :organizations="loggedUser.organizations"
         @save="handleSave"
       />
diff --git a/src/pages/profile/copilot/CopilotDetailPage.vue b/src/pages/profile/copilot/CopilotDetailPage.vue
index 8a59619..8ac73ee 100644
--- a/src/pages/profile/copilot/CopilotDetailPage.vue
+++ b/src/pages/profile/copilot/CopilotDetailPage.vue
@@ -1,26 +1,29 @@
 <script setup>
 import {useRoute} from "vue-router";
 import {onMounted} from "vue";
-import {copilot, fetchCopilot, loading} from "src/composables/objects/copilot";
 import CopilotDetailSkeleton from "components/copilots/CopilotDetailSkeleton.vue";
 import {useAppStore} from "stores/App";
 import FAB from "components/FAB.vue";
 import FlightsList from "components/flights/FlightsList.vue";
+import {useCopilotsStore} from "stores/Copilots";
+import {storeToRefs} from "pinia";
 
 const copilotId = parseInt(useRoute().params.id);
 onMounted(() => {
-  fetchCopilot(copilotId).then(() => {
+  useCopilotsStore().fetchDetail(copilotId).then(() => {
     useAppStore().setPageTitle(copilot.value.name);
     useAppStore().setBreadcrumbs([
       {to: {name: "copilots"}, label: "Kopiloti"},
       {label: copilot.value.name}
     ])
   });
-})
+});
+
+const {isQueryRunning, copilot} = storeToRefs(useCopilotsStore());
 </script>
 
 <template>
-  <CopilotDetailSkeleton v-if="loading || !copilot"/>
+  <CopilotDetailSkeleton v-if="isQueryRunning || !copilot"/>
 
   <template v-else>
     <h3>Společné lety</h3>
diff --git a/src/pages/profile/copilot/CopilotsPage.vue b/src/pages/profile/copilot/CopilotsPage.vue
index 7910b1c..cfbe1a9 100644
--- a/src/pages/profile/copilot/CopilotsPage.vue
+++ b/src/pages/profile/copilot/CopilotsPage.vue
@@ -1,23 +1,26 @@
 <script setup>
 import {onMounted} from "vue";
-import {fetchCopilots, loading, copilots} from "src/composables/objects/copilot";
 import CopilotsList from "components/copilots/CopilotsList.vue";
 import FAB from "components/FAB.vue";
 import {useAppStore} from "stores/App";
 import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
+import {useCopilotsStore} from "stores/Copilots";
+import {storeToRefs} from "pinia";
 
 onMounted(() => {
-  fetchCopilots();
+  useCopilotsStore().fetch();
   useAppStore().setPageTitle("Spolucestující");
-})
+});
+
+const {isQueryRunning, copilots} = storeToRefs(useCopilotsStore());
 </script>
 
 <template>
-  <BasicListSkeleton :items-count-min="5" :items-count-max="10" v-if="loading"/>
+  <BasicListSkeleton :items="10" v-if="isQueryRunning"/>
 
   <BasicInfoBanner
-    v-else-if="!loading && copilots.length === 0"
+    v-else-if="!isQueryRunning && copilots.length === 0"
     :router-add="{name: 'addCopilot'}"
   >
     V tomto seznamu budou uvedeni všichni, kteří s tebou absolvovali nějaký tvůj let.
diff --git a/src/pages/profile/copilot/EditCopilotPage.vue b/src/pages/profile/copilot/EditCopilotPage.vue
index 6d3dc92..d75db27 100644
--- a/src/pages/profile/copilot/EditCopilotPage.vue
+++ b/src/pages/profile/copilot/EditCopilotPage.vue
@@ -1,6 +1,5 @@
 <script setup>
 import {onMounted} from "vue";
-import {loading, copilot, fetchCopilot, isRequestPending} from "src/composables/objects/copilot";
 import {useAppStore} from "stores/App";
 import CopilotEditSkeleton from "components/copilots/CopilotEditSkeleton.vue";
 import CopilotEditForm from "components/copilots/CopilotForm.vue";
@@ -8,38 +7,42 @@ import {useRoute, useRouter} from "vue-router";
 import {useCopilotsStore} from "stores/Copilots";
 import {successObject} from "src/composables/dialog";
 import {useQuasar} from "quasar";
+import {storeToRefs} from "pinia";
 
-const copilotId = parseInt(useRoute().params.id);
+const $q = useQuasar();
+const $router = useRouter();
+const $route = useRoute();
+
+const copilotId = parseInt($route.params.id);
 
 onMounted(() => {
-  fetchCopilot(copilotId).then(() => {
+  useCopilotsStore().fetchDetail(copilotId).then(() => {
     useAppStore().setPageTitle(`${copilot.value.name} - editace`);
     useAppStore().setBreadcrumbs([
       {to: {name: "copilots"}, label: "Kopiloti"},
       {to: {name: "copilotDetail", params: {id: copilotId}}, label: copilot.value.name},
       {label: "Editace"}
     ])
-  })
+  });
 });
 
-const $q = useQuasar();
-const $router = useRouter();
-
 const handleSave = (formData) => {
   useCopilotsStore().update(copilotId, formData).then(() => {
     $q.notify(successObject("Kopilot úspěšně upraven"));
     $router.push({name: "copilotDetail", params: {id: copilotId}});
   });
 }
+
+const {isQueryRunning, isMutationRunning, copilot} = storeToRefs(useCopilotsStore());
 </script>
 
 <template>
-  <CopilotEditSkeleton v-if="loading"/>
+  <CopilotEditSkeleton v-if="isQueryRunning || !copilot"/>
 
   <CopilotEditForm
     v-else
     :copilot="copilot"
-    :is-request-pending="isRequestPending"
+    :is-request-pending="isMutationRunning"
     @save="handleSave"
   />
 </template>
diff --git a/src/pages/profile/copilot/NewCopilotPage.vue b/src/pages/profile/copilot/NewCopilotPage.vue
index cf641b8..5911532 100644
--- a/src/pages/profile/copilot/NewCopilotPage.vue
+++ b/src/pages/profile/copilot/NewCopilotPage.vue
@@ -5,7 +5,7 @@ import {successObject} from "src/composables/dialog";
 import {useCopilotsStore} from "stores/Copilots";
 import CopilotForm from "components/copilots/CopilotForm.vue";
 import {useAppStore} from "stores/App";
-import {isRequestPending} from "src/composables/objects/copilot";
+import {storeToRefs} from "pinia";
 
 const $q = useQuasar();
 const router = useRouter();
@@ -21,8 +21,13 @@ useAppStore().setBreadcrumbs([
   {to: {name: "copilots"}, label: "Spolucestující"},
   {label: "Nový"}
 ]);
+
+const {isMutationRunning} = storeToRefs(useCopilotsStore());
 </script>
 
 <template>
-  <CopilotForm @save="handleSave" :is-request-pending="isRequestPending"/>
+  <CopilotForm
+    :is-request-pending="isMutationRunning"
+    @save="handleSave"
+  />
 </template>
diff --git a/src/pages/profile/event/EditEventPage.vue b/src/pages/profile/event/EditEventPage.vue
index 65cd74d..2d38971 100644
--- a/src/pages/profile/event/EditEventPage.vue
+++ b/src/pages/profile/event/EditEventPage.vue
@@ -1,6 +1,5 @@
 <script setup>
 import {onMounted} from "vue";
-import {loading, event, fetchEvent, isRequestPending} from "src/composables/objects/event";
 import {useAppStore} from "stores/App";
 import {useRoute, useRouter} from "vue-router";
 import {useEventsStore} from "stores/Events";
@@ -8,15 +7,16 @@ import {successObject} from "src/composables/dialog";
 import {useQuasar} from "quasar";
 import EventEditSkeleton from "components/event/EventEditSkeleton.vue";
 import EventForm from "components/event/EventForm.vue";
+import {storeToRefs} from "pinia";
 
 const eventId = parseInt(useRoute().params.id);
 
 onMounted(() => {
-  fetchEvent(eventId).then(() => {
-    useAppStore().setPageTitle(`${event.value.name} - editace`);
+  useEventsStore().fetchDetail(eventId).then((e) => {
+    useAppStore().setPageTitle(`${e.name} - editace`);
     useAppStore().setBreadcrumbs([
       {to: {name: "events"}, label: "Události"},
-      {to: {name: "eventDetail", params: {id: eventId}}, label: event.value.name},
+      {to: {name: "eventDetail", params: {id: eventId}}, label: e.name},
       {label: "Editace"}
     ])
   })
@@ -31,15 +31,17 @@ const handleSave = (formData) => {
     $router.push({name: "eventDetail", params: {id: eventId}});
   });
 }
+
+const {isQueryRunning, isMutationRunning, event} = storeToRefs(useEventsStore());
 </script>
 
 <template>
-  <EventEditSkeleton v-if="loading"/>
+  <EventEditSkeleton v-if="isQueryRunning"/>
 
   <EventForm
     v-else
     :event="event"
-    :is-request-pending="isRequestPending"
+    :is-request-pending="isMutationRunning"
     @save="handleSave"
   />
 </template>
diff --git a/src/pages/profile/event/EventDetailPage.vue b/src/pages/profile/event/EventDetailPage.vue
index d28934c..240e6b0 100644
--- a/src/pages/profile/event/EventDetailPage.vue
+++ b/src/pages/profile/event/EventDetailPage.vue
@@ -1,17 +1,17 @@
 <script setup>
 import {useRoute} from "vue-router";
 import {onMounted} from "vue";
-import {event, fetchEvent, loading} from "src/composables/objects/event";
 import EventDetailSkeleton from "components/event/EventDetailSkeleton.vue";
 import {useAppStore} from "stores/App";
 import FAB from "components/FAB.vue";
 import FlightsList from "components/flights/FlightsList.vue";
-import ListItemSkeleton from "components/basicSkeletons/ListItemSkeleton.vue";
-import {FORMAT_DATE, FORMAT_DATETIME_LONG, formatDatetime} from "../../../composables/datetimeUtils";
+import {FORMAT_DATE, formatDatetime} from "src/composables/datetimeUtils";
+import {useEventsStore} from "stores/Events";
+import {storeToRefs} from "pinia";
 
 const eventId = parseInt(useRoute().params.id);
 onMounted(() => {
-  fetchEvent(eventId).then(() => {
+  useEventsStore().fetchDetail(eventId).then(() => {
     useAppStore().setPageTitle(event.value.name);
     useAppStore().setBreadcrumbs([
       {to: {name: "events"}, label: "Události"},
@@ -19,13 +19,14 @@ onMounted(() => {
     ])
   });
 })
+
+const {isQueryRunning, event} = storeToRefs(useEventsStore());
 </script>
 
 <template>
-  <EventDetailSkeleton v-if="loading || !event"/>
+  <EventDetailSkeleton v-if="isQueryRunning || !event"/>
 
   <template v-else>
-
     <q-list bordered separator class="q-my-lg" v-if="event.dateFrom && event.dateTo">
       <q-item>
         <q-item-section>
diff --git a/src/pages/profile/event/EventsPage.vue b/src/pages/profile/event/EventsPage.vue
index 443843b..7b6e195 100644
--- a/src/pages/profile/event/EventsPage.vue
+++ b/src/pages/profile/event/EventsPage.vue
@@ -4,20 +4,22 @@ import {useAppStore} from "stores/App";
 import FAB from "components/FAB.vue";
 import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
-import {events, fetchEvents, loading} from "src/composables/objects/event";
 import EventsList from "components/event/EventsList.vue";
+import {storeToRefs} from "pinia";
+import {useEventsStore} from "stores/Events";
 
 onMounted(() => {
-  fetchEvents();
+  useEventsStore().fetch();
+  useAppStore().setPageTitle("Letecké události");
 });
 
-useAppStore().setPageTitle("Letecké události")
+const {isQueryRunning, events} = storeToRefs(useEventsStore());
 </script>
 
 <template>
-  <BasicListSkeleton :items-count-min="3" :items-count-max="8" v-if="loading"/>
+  <BasicListSkeleton :items-count-min="3" :items-count-max="8" v-if="isQueryRunning"/>
   <BasicInfoBanner
-    v-else-if="!loading && events.length === 0"
+    v-else-if="!isQueryRunning && events.length === 0"
     :route-add="{name: 'addEvent'}"
     label-add="Přidat"
   >
diff --git a/src/pages/profile/event/NewEventPage.vue b/src/pages/profile/event/NewEventPage.vue
index e59fc08..53bd873 100644
--- a/src/pages/profile/event/NewEventPage.vue
+++ b/src/pages/profile/event/NewEventPage.vue
@@ -4,8 +4,8 @@ import {useQuasar} from "quasar";
 import {successObject} from "src/composables/dialog";
 import {useEventsStore} from "stores/Events";
 import {useAppStore} from "stores/App";
-import {isRequestPending} from "src/composables/objects/event";
 import EventForm from "components/event/EventForm.vue";
+import {storeToRefs} from "pinia";
 
 const $q = useQuasar();
 const router = useRouter();
@@ -21,8 +21,10 @@ useAppStore().setBreadcrumbs([
   {to: {name: "events"}, label: "Události"},
   {label: "Nová"}
 ]);
+
+const {isMutationRunning} = storeToRefs(useEventsStore());
 </script>
 
 <template>
-  <EventForm @save="handleSave" :is-request-pending="isRequestPending"/>
+  <EventForm @save="handleSave" :is-request-pending="isMutationRunning"/>
 </template>
diff --git a/src/pages/profile/flight/EditFlightPage.vue b/src/pages/profile/flight/EditFlightPage.vue
index fda04fd..eb6514a 100644
--- a/src/pages/profile/flight/EditFlightPage.vue
+++ b/src/pages/profile/flight/EditFlightPage.vue
@@ -19,23 +19,21 @@ import PhotosList from "components/photos/PhotosEditorList.vue";
 import {errorObject, successObject, warningObject} from "src/composables/dialog";
 import PhotoFormDialog from "components/photos/PhotoFormDialog.vue";
 import FlightFormTrack from "components/flights/form/FlightFormTrack.vue";
-import {fetchFlight, flight, loading} from "src/composables/objects/flight";
 import FlightEditSkeleton from "components/flights/FlightEditSkeleton.vue";
 import BatchPhotoFormDialog from "components/photos/BatchPhotoFormDialog.vue";
 import {useAppStore} from "stores/App";
-import {editBatchPhotos, handleBatchPhotoEdit, openBatchEdit, openBatchPhotoForm} from "src/composables/photos/batchEdit";
-import {editPhoto, handlePhotoUpdate, openEdit, openPhotoEdit} from "src/composables/photos/simpleEdit";
-import {fetchEvents, events} from "src/composables/objects/event";
+import {useEventsStore} from "stores/Events";
 
 const $q = useQuasar();
 const $route = useRoute();
 const flightId = parseInt($route.params.id);
 
-const aircrafts = storeToRefs(useAircraftsStore()).items;
-const locations = storeToRefs(usePointsOfInterestStore()).items;
-const airports = storeToRefs(useAirportsStore()).items;
-const copilots = storeToRefs(useCopilotsStore()).items;
-
+const {aircrafts} = storeToRefs(useAircraftsStore());
+const {pointsOfInterest} = storeToRefs(usePointsOfInterestStore());
+const {airports} = storeToRefs(useAirportsStore());
+const {copilots} = storeToRefs(useCopilotsStore());
+const {events} = storeToRefs(useEventsStore());
+const {flight, isQueryRunning, isMutationRunning} = storeToRefs(useFlightsStore());
 
 const formStep = ref("basic");
 watch(() => $route.params.step, (val) => formStep.value = val);
@@ -47,12 +45,10 @@ onMounted(() => {
   usePointsOfInterestStore().fetch();
   useAirportsStore().fetch();
   useCopilotsStore().fetch();
+  useEventsStore().fetch();
 
-  fetchEvents();
-
-  fetchFlight(flightId).then(() => {
-    const flightNameFormatted = flightName(flight.value);
-
+  useFlightsStore().fetchDetail(flightId).then((f) => {
+    const flightNameFormatted = flightName(f);
     useAppStore().setPageTitle(`Editace - ${flightNameFormatted}`);
     useAppStore().setBreadcrumbs([
       {to: {name: "myFlights"}, label: "Moje lety"},
@@ -65,13 +61,13 @@ onMounted(() => {
 const handleFlightEdit = (data) => {
   useFlightsStore().update(flightId, data).then((data) => {
     $q.notify(successObject("Úspěšně upraveno"));
-    flight.value = data;
   })
 }
 
 const isRequestPending = storeToRefs(useFlightsStore()).isMutationRunning;
 const uploadInProgress = ref(false);
 
+
 const handlePhotosUpload = (data) => {
   // todo udelat batch napr. po 5 requestech
   // TODO: udelat batch i pro rotace a davkove upravy (info)
@@ -100,7 +96,7 @@ const handlePhotosUpload = (data) => {
 
 const _findPhotoIndex = (photoId) => flight.value.photos.findIndex((object) => object.id === photoId);
 const deletePhoto = (id) => {
-  usePhotosStore().delete(id).then((data) => {
+  usePhotosStore().destroy(id).then((data) => {
     flight.value.photos.splice(_findPhotoIndex(data.id), 1);
   });
 }
@@ -108,47 +104,110 @@ const deletePhoto = (id) => {
 const rotatePhotos = ({photos, direction}) => {
   const promises = [];
   for (const photo of photos) {
-    promises.push(usePhotosStore().changeOrientation(photo.id, direction));
+    promises.push(usePhotosStore().changeOrientation(photo.id, direction).then(data => {
+      const idx = _findPhotoIndex(data.id);
+      data.thumbnailUrl += "?t=" + (new Date()).getTime();
+      flight.value.photos[idx] = data;
+    }));
   }
 
   let success = 0;
   Promise.allSettled(promises).then(result => {
-    for (const updatedPhoto of result) {
-      const {status, value} = updatedPhoto;
-      if (status === 'fulfilled') success++;
-
-      const idx =_findPhotoIndex(value.id);
-      value.thumbnailUrl += "?t=" + (new Date()).getTime();
-      flight.value.photos[idx] = value;
+    for (const item of result) {
+      if (item.status === 'fulfilled') success++;
     }
-
     const error = result.length - success;
 
-    if (success > 0) {
-      $q.notify(successObject("Otočeno " + success + " fotografií"));
-    }
-
-    if (error > 0) {
-      $q.notify(errorObject(`Nepovedlo se otočit ${error} fotografi`))
-    }
+    if (success > 0) $q.notify(successObject("Otočeno " + success + " fotografií"));
+    if (error > 0) $q.notify(errorObject(`Nepovedlo se otočit ${error} fotografi`))
   });
 }
+
+const updateSinglePhoto = (id, formData) => usePhotosStore().update(id, formData).then((data) => {
+  const idx = _findPhotoIndex(data.id);
+  flight.value.photos[idx] = data;
+  usePointsOfInterestStore().fetch();
+});
+
+const handlePhotoUpdate = (flightId, formData) => {
+  const photoId = formData.id;
+  delete formData.id;
+
+  return updateSinglePhoto(photoId, formData);
+};
+
+const openEdit = ref(false);
+const editPhoto = ref(null);
+
+const openPhotoEdit = (photo) => {
+  openEdit.value = true;
+  editPhoto.value = photo;
+};
+
+
+// batch edit
+
+const openBatchEdit = ref(false);
+const editBatchPhotos = ref([]);
+const openBatchPhotoForm = (photos) => {
+  openBatchEdit.value = true;
+  editBatchPhotos.value = photos;
+}
+
+const handleBatchPhotoEdit = async (flightId, data) => {
+  const photoIds = data.photoIds;
+  delete data.photoIds;
+  delete data.id;
+
+  if (data.pointOfInterest && !data.pointOfInterest.id) {
+    const poiData = {
+      ...data.pointOfInterest,
+      isPublic: false,
+      description: "",
+    }
+    await usePointsOfInterestStore().create(poiData).then(poi => data.pointOfInterest = {id: poi.id, name: poi.name});
+  }
+
+  const promises = [];
+  for (const id of photoIds) {
+    const updateData = {};
+    if (data.name !== '') updateData.name = data.name;
+    if (data.description !== '') updateData.description = data.description;
+    if (data.pointOfInterest) updateData.pointOfInterest = data.pointOfInterest;
+
+    if (Object.keys(updateData).length === 0) continue;
+
+    promises.push(updateSinglePhoto(id, data));
+  }
+
+  let success = 0;
+  Promise.allSettled(promises).then(result => {
+    for (const item of result) {
+      if (item.status === 'fulfilled') success++;
+    }
+    const error = result.length - success;
+
+    if (success > 0) $q.notify(successObject("Upraveno " + success + " fotografií"));
+    if (error > 0) $q.notify(errorObject(`Nepovedlo se uložit ${error} fotografií`))
+  });
+}
+
 </script>
 
 <template>
   <FlightFormSteps :router-edit-mode="true" :flightId="flightId"/>
 
-  <FlightEditSkeleton :step="formStep" v-if="loading"/>
+  <FlightEditSkeleton :step="formStep" v-if="isQueryRunning || !flight"/>
 
   <template v-else>
     <q-tab-panels v-model="formStep">
       <q-tab-panel name="basic">
         <FlightFormBasic
-          @save="handleFlightEdit"
-          :flight="flight"
-          :locations="locations"
-          :airports="airports"
-          :aircrafts="aircrafts"
+            @save="handleFlightEdit"
+            :flight="flight"
+            :locations="pointsOfInterest"
+            :airports="airports"
+            :aircrafts="aircrafts"
         />
       </q-tab-panel>
 
@@ -158,43 +217,43 @@ const rotatePhotos = ({photos, direction}) => {
 
       <q-tab-panel name="track">
         <FlightFormTrack
-          v-if="locations"
-          :flight="flight"
-          :locations="locations"
-          :airports="airports"
-          @save="handleFlightEdit"
+            v-if="pointsOfInterest"
+            :flight="flight"
+            :locations="pointsOfInterest"
+            :airports="airports"
+            @save="handleFlightEdit"
         />
       </q-tab-panel>
 
       <q-tab-panel name="photos">
         <FlightFormPhotos
-          :flight="flight"
-          :is-request-pending="isRequestPending || uploadInProgress"
-          @save="handlePhotosUpload"
+            :flight="flight"
+            :is-request-pending="isRequestPending || uploadInProgress"
+            @save="handlePhotosUpload"
         />
 
         <PhotosList
-          :photos="flight.photos"
-          @edit="openPhotoEdit"
-          @batch-edit="openBatchPhotoForm"
-          @batch-rotate="rotatePhotos"
-          @delete="deletePhoto"
+            :photos="flight.photos"
+            @edit="openPhotoEdit"
+            @batch-edit="openBatchPhotoForm"
+            @batch-rotate="rotatePhotos"
+            @delete="deletePhoto"
         />
 
         <!-- Dialogs for photo edit -->
         <PhotoFormDialog
-          v-model="openEdit"
-          :locations="locations"
-          :photo="editPhoto"
-          @save="handlePhotoUpdate(flightId, $event)"
+            v-model="openEdit"
+            :locations="pointsOfInterest"
+            :photo="editPhoto"
+            @save="handlePhotoUpdate(flightId, $event)"
         />
 
         <BatchPhotoFormDialog
-          v-model="openBatchEdit"
-          :locations="locations"
-          :photos="editBatchPhotos"
-          @save="handleBatchPhotoEdit(flightId, $event)"
-          @delete="deletePhoto"
+            v-model="openBatchEdit"
+            :locations="pointsOfInterest"
+            :photos="editBatchPhotos"
+            @save="handleBatchPhotoEdit(flightId, $event)"
+            @delete="deletePhoto"
         />
       </q-tab-panel>
 
diff --git a/src/pages/profile/flight/FlightDetailPage.vue b/src/pages/profile/flight/FlightDetailPage.vue
index f8d3f4b..85d5497 100644
--- a/src/pages/profile/flight/FlightDetailPage.vue
+++ b/src/pages/profile/flight/FlightDetailPage.vue
@@ -2,11 +2,11 @@
 import {useRoute, useRouter} from "vue-router";
 import {computed, onMounted, ref, watch} from "vue";
 import FlightDetailSkeleton from "components/flights/FlightDetailSkeleton.vue";
-import {fetchFlight, flight, flightName, handleDeleteFlight, loading} from "src/composables/objects/flight";
+import {flightName} from "src/composables/objects/flight";
 import {useAppStore} from "stores/App";
 import FlightBasicInfo from "components/flights/FlightBasicInfo.vue";
 import {copyToClipboard, useQuasar} from "quasar";
-import {successObject} from "src/composables/dialog";
+import {confirmObject, successObject} from "src/composables/dialog";
 import {useFlightsStore} from "stores/Flights";
 import FlightTrackMap from "components/flights/FlightTrackMap.vue";
 import {useUserStore} from "stores/User";
@@ -19,37 +19,35 @@ const $router = useRouter();
 const flightId = parseInt(useRoute().params.id);
 const loggedUser = storeToRefs(useUserStore()).user;
 
-onMounted(() => {
-  fetchFlight(flightId);
+onMounted(() => {flight.value
+  useFlightsStore().fetchDetail(flightId).then(f => {
+    const flightNameFormatted = flightName(f);
+    useAppStore().setPageTitle(flightNameFormatted);
+    useAppStore().setBreadcrumbs([
+      {to: {name: "myFlights"}, label: "Moje lety"},
+      {label: flightNameFormatted}
+    ]);
+  })
 })
 
-watch(flight, (newVal) => {
-  const flightNameFormatted = flightName(newVal);
-  useAppStore().setPageTitle(flightNameFormatted);
-  useAppStore().setBreadcrumbs([
-    {to: {name: "myFlights"}, label: "Moje lety"},
-    {label: flightNameFormatted}
-  ]);
-});
-
 const handleDeleteAndRedirect = () => {
-  const flightId = flight.value.id;
-
-  handleDeleteFlight($q, flightId, (flight) => {
-    $router.push({name: "myFlights"});
-    $q.notify(successObject(`Úspěšně smazáno`));
-  })
+  $q.dialog(confirmObject("Opravdu chceš smazat tento let?"))
+    .onOk(() => {
+      useFlightsStore().destroy(flightId).then(() => {
+        $router.push({name: "myFlights"});
+        $q.notify(successObject(`Úspěšně smazáno`));
+      });
+    });
 }
 
 
 const togglePublicVisibility = () => {
   const newVisibility = !flight.value.isPublic;
   useFlightsStore()
-      .update(flightId, {isPublic: newVisibility})
-      .then((updatedFlight) => {
-        flight.value = updatedFlight;
-        $q.notify(successObject(newVisibility ? "Úspěšně publikováno" : "Úspěšně skryto"));
-      });
+    .update(flightId, {isPublic: newVisibility})
+    .then(() => {
+      $q.notify(successObject(newVisibility ? "Úspěšně publikováno" : "Úspěšně skryto"));
+    });
 };
 
 const copyLinkToClipboard = () => {
@@ -62,43 +60,36 @@ const copyLinkToClipboard = () => {
     $q.notify(successObject("Odkaz zkopírován"))
   });
 };
+
+const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
 </script>
 
-
 <template>
-  <FlightDetailSkeleton v-if="loading || !flight"/>
+  <FlightDetailSkeleton v-if="isQueryRunning || !flight"/>
 
   <q-card class="flight-detail-card" v-else>
     <q-img :src="flight.coverPhoto.url" v-if="flight.coverPhoto">
-       <div class="absolute-bottom custom-caption">
-          <div class="text-h5"> {{ flightName(flight) }} </div>
-        </div>
+      <div class="absolute-bottom custom-caption">
+        <div class="text-h5"> {{ flightName(flight) }}</div>
+      </div>
     </q-img>
 
     <q-card-actions class="q-my-md">
       <div class="col-grow">
-<!--        <q-btn-->
-<!--            flat-->
-<!--            :to="{name: 'flightEdit', params:{id: flight.id}}"-->
-<!--            icon="edit"-->
-<!--            text-color="primary"-->
-<!--            label="Upravit"-->
-<!--        />-->
-
         <q-btn
-            @click="togglePublicVisibility"
-            :icon="flight.isPublic ? 'visibility_off' : 'visibility'"
-            :disable="!loggedUser.publicUsername"
-            flat
-            :label="flight.isPublic ? 'Skrýt' : 'Zveřejnit'"
+          @click="togglePublicVisibility"
+          :icon="flight.isPublic ? 'visibility_off' : 'visibility'"
+          :disable="!loggedUser.publicUsername"
+          flat
+          :label="flight.isPublic ? 'Skrýt' : 'Zveřejnit'"
         />
 
         <q-btn
-            icon="link"
-            @click="copyLinkToClipboard()"
-            flat
-            v-if="flight.isPublic"
-            label="Získat odkaz"
+          icon="link"
+          @click="copyLinkToClipboard()"
+          flat
+          v-if="flight.isPublic"
+          label="Získat odkaz"
         />
       </div>
       <q-btn @click="handleDeleteAndRedirect" icon="delete" flat text-color="red" label="Smazat"/>
@@ -124,30 +115,30 @@ const copyLinkToClipboard = () => {
         <q-btn flat class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'photos'}}" icon="edit" color="primary">Upravit fotky</q-btn>
       </div>
       <BasicInfoBanner
-          v-if="flight.photos.length === 0"
-          :route-add="{name: 'flightEdit', params: {id: flightId, step: 'photos'}}"
+        v-if="flight.photos.length === 0"
+        :route-add="{name: 'flightEdit', params: {id: flightId, step: 'photos'}}"
       >
         U tohoto letu nemáš nahrané žádné fotografie.
       </BasicInfoBanner>
       <PhotoGallery
-          v-else
-          :photos="flight.photos"
+        v-else
+        :photos="flight.photos"
       />
 
       <q-separator/>
 
       <div class="text-right">
-        <q-btn class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'track'}}" icon="edit" color="primary">Upravit trasu</q-btn>
+        <q-btn flat class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'track'}}" icon="edit" color="primary">Upravit trasu</q-btn>
       </div>
       <BasicInfoBanner
-          v-if="flight.track.length === 0 && !flight.gpxTrack"
-          :route-add="{name: 'flightEdit', params: {id: flightId, step: 'track'}}"
+        v-if="flight.track.length === 0 && !flight.gpxTrack"
+        :route-add="{name: 'flightEdit', params: {id: flightId, step: 'track'}}"
       >
         Nemáš nastavenou žádnou trasu.
       </BasicInfoBanner>
       <FlightTrackMap
-          v-else
-          :flight="flight"
+        v-else
+        :flight="flight"
       />
     </q-card-section>
   </q-card>
diff --git a/src/pages/profile/flight/FlightsPage.vue b/src/pages/profile/flight/FlightsPage.vue
index bef3329..456fc19 100644
--- a/src/pages/profile/flight/FlightsPage.vue
+++ b/src/pages/profile/flight/FlightsPage.vue
@@ -4,30 +4,33 @@ import {useQuasar} from "quasar";
 import FlightsList from "components/flights/FlightsList.vue";
 import FlightsListSkeleton from "components/flights/FlightsListSkeleton.vue";
 import FAB from "components/FAB.vue";
-import {fetchFlights, flights, handleDeleteFlight, loading} from "src/composables/objects/flight";
 import {useAppStore} from "stores/App";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
+import {useFlightsStore} from "stores/Flights";
+import {storeToRefs} from "pinia";
 
 const $q = useQuasar();
 
 useAppStore().setPageTitle("Moje lety")
 onMounted(() => {
-  fetchFlights();
+  useFlightsStore().fetch();
 })
+
+const {flights, isQueryRunning} = storeToRefs(useFlightsStore());
 </script>
 
 <template>
-  <FlightsListSkeleton v-if="loading"/>
+  <FlightsListSkeleton v-if="isQueryRunning"/>
 
   <BasicInfoBanner
-    v-else-if="!loading && flights.length === 0"
+    v-else-if="!isQueryRunning && flights.length === 0"
     :route-add="{name: 'addFlight'}"
     label-add="Přidat let"
   >
     Nemáš zaznamenaný žádný let.
   </BasicInfoBanner>
 
-  <FlightsList v-else :items="flights" @delete="handleDeleteFlight($q, $event)"/>
+  <FlightsList v-else :items="flights"/>
 
   <FAB mode="add" :router-link="{name: 'addFlight'}"/>
 </template>
diff --git a/src/pages/profile/flight/NewFlightPage.vue b/src/pages/profile/flight/NewFlightPage.vue
index 742b7bd..1f5ebb8 100644
--- a/src/pages/profile/flight/NewFlightPage.vue
+++ b/src/pages/profile/flight/NewFlightPage.vue
@@ -1,28 +1,21 @@
 <script setup>
-import {onMounted, ref} from "vue";
+import {computed, onMounted, ref} from "vue";
 import {useAircraftsStore} from "stores/Aircrafts";
 import {useFlightsStore} from "stores/Flights";
 import {useRouter} from "vue-router";
 import {usePointsOfInterestStore} from "stores/PointsOfInterest";
 import {storeToRefs} from "pinia";
 import {useAirportsStore} from "stores/Airports";
+import {useAppStore} from "stores/App";
 import FlightFormSteps from "components/flights/form/FlightFormSteps.vue";
 import FlightFormBasic from "components/flights/form/FlightFormBasic.vue";
-import {useAppStore} from "stores/App";
-import {isRequestPending} from "src/composables/objects/flight";
 import FlightEditSkeleton from "components/flights/FlightEditSkeleton.vue";
 
-const loading = ref(true);
 onMounted(() => {
-  const promises = [
-    useAircraftsStore().fetch(),
-    usePointsOfInterestStore().fetch(),
-    useFlightsStore().fetch(),
-    useAirportsStore().fetch(),
-  ];
-
-  loading.value = true;
-  Promise.all(promises).finally(() => loading.value = false);
+  useAircraftsStore().fetch()
+  usePointsOfInterestStore().fetch()
+  useFlightsStore().fetch()
+  useAirportsStore().fetch()
 
   useAppStore().setPageTitle("Nový let");
   useAppStore().setBreadcrumbs([
@@ -31,9 +24,14 @@ onMounted(() => {
   ]);
 });
 
-const aircrafts = storeToRefs(useAircraftsStore()).items;
-const locations = storeToRefs(usePointsOfInterestStore()).items;
-const airports = storeToRefs(useAirportsStore()).items;
+const {isMutationRunning} = storeToRefs(useFlightsStore());
+const {aircrafts} = storeToRefs(useAircraftsStore());
+const {pointsOfInterest} = storeToRefs(usePointsOfInterestStore());
+const {airports} = storeToRefs(useAirportsStore());
+
+const loading = computed(() => [
+  useAircraftsStore().isQueryRunning, usePointsOfInterestStore().isQueryRunning, useAirportsStore().isQueryRunning
+].some(i => i.value))
 
 const router = useRouter();
 const handleSave = (formData) => {
@@ -49,11 +47,11 @@ const handleSave = (formData) => {
   <FlightEditSkeleton step="basic" v-if="loading"/>
   <template v-else>
     <FlightFormBasic
-      @save="handleSave"
-      :is-request-pending="isRequestPending"
-      :aircrafts="aircrafts"
-      :airports="airports"
-      :locations="locations"
+        @save="handleSave"
+        :is-request-pending="isMutationRunning"
+        :aircrafts="aircrafts"
+        :airports="airports"
+        :locations="pointsOfInterest"
     />
   </template>
 </template>
diff --git a/src/pages/profile/flight/PhotoEditorPage.vue b/src/pages/profile/flight/PhotoEditorPage.vue
index f65df63..aa98d33 100644
--- a/src/pages/profile/flight/PhotoEditorPage.vue
+++ b/src/pages/profile/flight/PhotoEditorPage.vue
@@ -7,11 +7,13 @@ import {flightName} from "src/composables/objects/flight";
 import VuePictureCropper from 'vue-picture-cropper';
 import {croppedAreaForPreview, getPreviewUrl} from "src/composables/photos/editor/preview";
 import {compare, onResize, splitter, splitterWidth} from "src/composables/photos/editor/splitter";
-import {aspectRatioOptions, croppedArea, cropperReady, selectedAspectRatio, setCropData} from "src/composables/photos/editor/crop";
-import {fetchPhoto, loading, photo, photoAspectRatio} from "src/composables/photos/editor/photo";
+import {aspectRatioOptions, croppedArea, cropperReady, photoAspectRatio, selectedAspectRatio, setCropData} from "src/composables/photos/editor/crop";
 import {debounce, useQuasar} from "quasar";
 import {successObject} from "src/composables/dialog";
 import PhotoEditorSkeleton from "components/photos/PhotoEditorSkeleton.vue";
+import {storeToRefs} from "pinia";
+import FormSubmitButton from "components/FormSubmitButton.vue";
+import FormWrapper from "components/FormWrapper.vue";
 
 const $route = useRoute();
 const $q = useQuasar();
@@ -43,24 +45,24 @@ watch(() => [adjustment.value, croppedAreaForPreview.value], debounce(() => {
 const savePhotoAdjustment = (photoId) => {
   const adjustmentInput = {...adjustment.value};
 
-  if (croppedArea.value.left !== null) {
+  if (croppedArea.value && croppedArea.value.left !== null) {
     adjustmentInput.crop = {...croppedArea.value}
   }
 
   usePhotosStore().adjust(photoId, adjustmentInput).then((data) => {
     noCacheTimestamp.value = (new Date()).getTime();
-    photo.value = data;
-
     $q.notify(successObject("Fotka úspěšně upravena"));
   });
 };
 
 onMounted(() => {
-  fetchPhoto(photoId).then(() => {
-    const flightNameFormatted = flightName(photo.value.flight);
+  usePhotosStore().fetchDetail(photoId).then((p) => {
+    const flightNameFormatted = flightName(p.flight);
 
-    if (photo.value.adjustment) {
-      const photoAdjustment = photo.value.adjustment;
+    photoAspectRatio.value = p.width / p.height;
+
+    if (p.adjustment) {
+      const photoAdjustment = p.adjustment;
       const src = photoAdjustment || defaultAdjustments;
       for (const i in defaultAdjustments) {
         adjustment.value[i] = src[i];
@@ -77,33 +79,35 @@ onMounted(() => {
     }
     useAppStore().setBreadcrumbs([
       {to: {name: "myFlights"}, label: "Moje lety"},
-      {to: {name: "flightDetail", params: {id: photo.value.flightId}}, label: flightNameFormatted},
-      {to: {name: "flightEdit", params: {id: photo.value.flightId, step: 'photos'}}, label: "Fotografie"},
+      {to: {name: "flightDetail", params: {id: p.flightId}}, label: flightNameFormatted},
+      {to: {name: "flightEdit", params: {id: p.flightId, step: 'photos'}}, label: "Fotografie"},
       {label: "Foto editor"}
     ]);
   })
 
   useAppStore().setPageTitle("Foto editor");
 });
+
+const {isQueryRunning, isMutationRunning, photo} = storeToRefs(usePhotosStore());
 </script>
 
 <template>
   <q-resize-observer @resize="onResize" :debounce="100"/>
 
-  <PhotoEditorSkeleton v-if="loading" />
+  <PhotoEditorSkeleton v-if="isQueryRunning"/>
 
-  <template v-if="!loading">
+  <template v-if="!isQueryRunning">
     <q-card :style="`width: ${splitterWidth}px; margin: 0 auto`">
       <VuePictureCropper
-        v-if="editorTab === 'crop'"
-        :img="uncroppedAdjusted"
-        :boxStyle="{
+          v-if="editorTab === 'crop'"
+          :img="uncroppedAdjusted"
+          :boxStyle="{
             width: '100%',
             height: '100%',
             backgroundColor: '#f8f8f8',
             margin: 'auto',
           }"
-        :options="{
+          :options="{
           viewMode: 1,
           autoCropArea: 1,
           dragMode: 'none',
@@ -111,8 +115,8 @@ onMounted(() => {
           draggable: false,
           rotatable: false,
         }"
-        @cropend="setCropData"
-        @ready="cropperReady"
+          @cropend="setCropData"
+          @ready="cropperReady"
       />
 
       <div class="overflow-hidden relative-position" v-else-if="editorTab === 'rotate'">
@@ -123,29 +127,29 @@ onMounted(() => {
       <div class="overflow-hidden" v-else>
         <q-img fit="contain" :src="croppedAdjusted" v-show="!compare"/>
         <q-splitter
-          v-show="compare"
-          v-model="splitter"
-          :limits="[0, 100]"
-          :style="{
+            v-show="compare"
+            v-model="splitter"
+            :limits="[0, 100]"
+            :style="{
               height: Math.round(splitterWidth / photoAspectRatio) + 'px',
               width: splitterWidth.value + 'px'
             }"
-          before-class="overflow-hidden"
-          after-class="overflow-hidden">
+            before-class="overflow-hidden"
+            after-class="overflow-hidden">
           <template #before>
             <img
-              :width="splitterWidth"
-              class="absolute-top-left"
-              :src="croppedUnadjusted"
-              alt="before"
+                :width="splitterWidth"
+                class="absolute-top-left"
+                :src="croppedUnadjusted"
+                alt="before"
             />
           </template>
           <template #after>
             <img
-              :width="splitterWidth"
-              class="absolute-top-right"
-              :src="croppedAdjusted"
-              alt="after"
+                :width="splitterWidth"
+                class="absolute-top-right"
+                :src="croppedAdjusted"
+                alt="after"
             />
           </template>
         </q-splitter>
@@ -167,121 +171,120 @@ onMounted(() => {
         </q-tabs>
         <q-separator/>
 
-        <q-tab-panels v-model="editorTab" animated>
-          <q-tab-panel name="colors">
-            <q-list>
-              <q-item>
-                <q-item-section avatar>
-                  <q-icon name="contrast"/>
-                </q-item-section>
-                <q-item-section>
-                  <q-slider
-                    v-model="adjustment.contrast"
-                    :min="0.5"
-                    :max="1.5"
-                    :step="0.01"
-                    label-always
-                    @dblclick="adjustment.contrast=1"
-                    :label="true"
-                  />
-                </q-item-section>
-              </q-item>
 
-              <q-item>
-                <q-item-section avatar>
-                  <q-icon name="brightness_6"/>
-                </q-item-section>
-                <q-item-section>
-                  <q-slider
-                    v-model="adjustment.brightness"
-                    :min="0.5"
-                    :max="1.5"
-                    :step="0.01"
-                    :label="true"
-                    label-always
-                    @dblclick="adjustment.brightness = 1"
-                  />
-                </q-item-section>
-              </q-item>
-
-              <q-item>
-                <q-item-section avatar>
-                  <q-icon name="palette"/>
-                </q-item-section>
-                <q-item-section>
-                  <q-slider
-                    v-model="adjustment.saturation"
-                    :min="0"
-                    :max="2"
-                    :step="0.05"
-                    :label="true"
-                    label-always
-                    @dblclick="adjustment.saturation = 1"
-                  />
-                </q-item-section>
-              </q-item>
-            </q-list>
-          </q-tab-panel>
-          <q-tab-panel name="details">
-            <q-list>
-              <q-item>
-                <q-item-section avatar>
-                  <q-icon name="deblur"/>
-                </q-item-section>
-                <q-item-section>
-                  <q-slider
-                    v-model="adjustment.sharpness"
-                    :min="-3"
-                    :max="8"
-                    :step="1"
-                    :label="true"
-                    label-always
-                    snap
-                    @dblclick="adjustment.sharpness=1"
-                  />
-                </q-item-section>
-              </q-item>
-            </q-list>
-          </q-tab-panel>
-          <q-tab-panel name="rotate">
-            <q-list>
-              <q-item>
-                <q-item-section avatar>
-                  <q-btn round flat icon="rotate_left" @click="adjustment.rotate -= 0.1"/>
-                </q-item-section>
-                <q-item-section>
+        <FormWrapper :is-request-pending="isMutationRunning" @save="savePhotoAdjustment(photoId)">
+          <q-tab-panels v-model="editorTab" animated>
+            <q-tab-panel name="colors">
+              <q-list>
+                <q-item>
+                  <q-item-section avatar>
+                    <q-icon name="contrast"/>
+                  </q-item-section>
+                  <q-item-section>
                     <q-slider
-                      v-model="adjustment.rotate"
-                      :min="-45"
-                      :max="45"
-                      :step="0.1"
-                      :label="true"
-                      label-always
-                      @dblclick="adjustment.rotate=0"
+                        v-model="adjustment.contrast"
+                        :min="0.5"
+                        :max="1.5"
+                        :step="0.01"
+                        label-always
+                        @dblclick="adjustment.contrast=1"
+                        :label="true"
                     />
-                </q-item-section>
-                <q-item-section avatar>
-                  <q-btn round flat icon="rotate_right" @click="adjustment.rotate += 0.1"/>
-                </q-item-section>
-              </q-item>
-            </q-list>
-          </q-tab-panel>
-          <q-tab-panel name="crop">
-            <q-btn-toggle
-              no-caps
-              spread
-              v-model="selectedAspectRatio"
-              toggle-color="primary"
-              :options="aspectRatioOptions"
-              class="q-ma-lg"
-            />
-          </q-tab-panel>
-        </q-tab-panels>
+                  </q-item-section>
+                </q-item>
+
+                <q-item>
+                  <q-item-section avatar>
+                    <q-icon name="brightness_6"/>
+                  </q-item-section>
+                  <q-item-section>
+                    <q-slider
+                        v-model="adjustment.brightness"
+                        :min="0.5"
+                        :max="1.5"
+                        :step="0.01"
+                        :label="true"
+                        label-always
+                        @dblclick="adjustment.brightness = 1"
+                    />
+                  </q-item-section>
+                </q-item>
+
+                <q-item>
+                  <q-item-section avatar>
+                    <q-icon name="palette"/>
+                  </q-item-section>
+                  <q-item-section>
+                    <q-slider
+                        v-model="adjustment.saturation"
+                        :min="0"
+                        :max="2"
+                        :step="0.05"
+                        :label="true"
+                        label-always
+                        @dblclick="adjustment.saturation = 1"
+                    />
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-tab-panel>
+            <q-tab-panel name="details">
+              <q-list>
+                <q-item>
+                  <q-item-section avatar>
+                    <q-icon name="deblur"/>
+                  </q-item-section>
+                  <q-item-section>
+                    <q-slider
+                        v-model="adjustment.sharpness"
+                        :min="-3"
+                        :max="8"
+                        :step="1"
+                        :label="true"
+                        label-always
+                        snap
+                        @dblclick="adjustment.sharpness=1"
+                    />
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-tab-panel>
+            <q-tab-panel name="rotate">
+              <q-list>
+                <q-item>
+                  <q-item-section avatar>
+                    <q-btn round flat icon="rotate_left" @click="adjustment.rotate -= 0.1"/>
+                  </q-item-section>
+                  <q-item-section>
+                    <q-slider
+                        v-model="adjustment.rotate"
+                        :min="-45"
+                        :max="45"
+                        :step="0.1"
+                        :label="true"
+                        label-always
+                        @dblclick="adjustment.rotate=0"
+                    />
+                  </q-item-section>
+                  <q-item-section avatar>
+                    <q-btn round flat icon="rotate_right" @click="adjustment.rotate += 0.1"/>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-tab-panel>
+            <q-tab-panel name="crop">
+              <q-btn-toggle
+                  no-caps
+                  spread
+                  v-model="selectedAspectRatio"
+                  toggle-color="primary"
+                  :options="aspectRatioOptions"
+                  class="q-ma-lg"
+              />
+            </q-tab-panel>
+          </q-tab-panels>
+        </FormWrapper>
       </q-card-section>
-      <q-card-actions>
-        <q-space/>
-        <q-btn color="primary" icon="save" @click="savePhotoAdjustment(photoId)">Uložit</q-btn>
-      </q-card-actions>
     </q-card>
   </template>
 </template>
diff --git a/src/pages/profile/organization/EditOrganizationPage.vue b/src/pages/profile/organization/EditOrganizationPage.vue
index 56d21f0..e8134e7 100644
--- a/src/pages/profile/organization/EditOrganizationPage.vue
+++ b/src/pages/profile/organization/EditOrganizationPage.vue
@@ -1,6 +1,5 @@
 <script setup>
 import {onMounted} from "vue";
-import {loading, organization, fetchOrganization, isRequestPending} from "src/composables/objects/organization";
 import {useAppStore} from "stores/App";
 import {useRoute, useRouter} from "vue-router";
 import {useOrganizationsStore} from "stores/Organizations";
@@ -8,15 +7,16 @@ import {successObject} from "src/composables/dialog";
 import {useQuasar} from "quasar";
 import OrganizationEditSkeleton from "components/organizations/OrganizationEditSkeleton.vue";
 import OrganizationForm from "components/organizations/OrganizationForm.vue";
+import {storeToRefs} from "pinia";
 
 const organizationId = parseInt(useRoute().params.id);
 
 onMounted(() => {
-  fetchOrganization(organizationId).then(() => {
-    useAppStore().setPageTitle(`${organization.value.name} - editace`);
+  useOrganizationsStore().fetchDetail(organizationId).then((o) => {
+    useAppStore().setPageTitle(`${o.name} - editace`);
     useAppStore().setBreadcrumbs([
       {to: {name: "organizations"}, label: "Organizace"},
-      {to: {name: "organizationDetail", params: {id: organizationId}}, label: organization.value.name},
+      {to: {name: "organizationDetail", params: {id: organizationId}}, label: o.name},
       {label: "Editace"}
     ])
   })
@@ -30,15 +30,17 @@ const handleSave = (formData) => {
     $router.push({name: "organizationDetail", params: {id: organizationId}});
   });
 }
+
+const {isQueryRunning, isMutationRunning, organization} = storeToRefs(useOrganizationsStore());
 </script>
 
 <template>
-  <OrganizationEditSkeleton v-if="loading"/>
+  <OrganizationEditSkeleton v-if="isQueryRunning"/>
 
   <OrganizationForm
     v-else
     :organization="organization"
-    :is-request-pending="isRequestPending"
+    :is-request-pending="isMutationRunning"
     @save="handleSave"
   />
 </template>
diff --git a/src/pages/profile/organization/NewOrganizationPage.vue b/src/pages/profile/organization/NewOrganizationPage.vue
index 29ed6bd..e4cec43 100644
--- a/src/pages/profile/organization/NewOrganizationPage.vue
+++ b/src/pages/profile/organization/NewOrganizationPage.vue
@@ -4,8 +4,8 @@ import {useQuasar} from "quasar";
 import {successObject} from "src/composables/dialog";
 import {useOrganizationsStore} from "stores/Organizations";
 import {useAppStore} from "stores/App";
-import {isRequestPending} from "src/composables/objects/organization";
 import OrganizationForm from "components/organizations/OrganizationForm.vue";
+import {storeToRefs} from "pinia";
 
 const $q = useQuasar();
 const router = useRouter();
@@ -21,8 +21,10 @@ useAppStore().setBreadcrumbs([
   {to: {name: "organizations"}, label: "Organizace"},
   {label: "Nová"}
 ]);
+
+const {isMutationRunning} = storeToRefs(useOrganizationsStore());
 </script>
 
 <template>
-  <OrganizationForm @save="handleSave" :is-request-pending="isRequestPending"/>
+  <OrganizationForm @save="handleSave" :is-request-pending="isMutationRunning"/>
 </template>
diff --git a/src/pages/profile/organization/OrganizationDetailPage.vue b/src/pages/profile/organization/OrganizationDetailPage.vue
index 6e93062..55da0b1 100644
--- a/src/pages/profile/organization/OrganizationDetailPage.vue
+++ b/src/pages/profile/organization/OrganizationDetailPage.vue
@@ -1,7 +1,6 @@
 <script setup>
 import {useRoute} from "vue-router";
-import {onMounted} from "vue";
-import {organization, fetchOrganization, loading, myOrganizationIds, addToOrganization, removeFromOrganization} from "src/composables/objects/organization";
+import {computed, onMounted} from "vue";
 import {useAppStore} from "stores/App";
 import FAB from "components/FAB.vue";
 import {storeToRefs} from "pinia";
@@ -11,39 +10,41 @@ import AircraftsList from "components/aircrafts/AircraftsList.vue";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 import {useQuasar} from "quasar";
 import AvatarFromPhoto from "components/avatars/AvatarFromPhoto.vue";
+import {useOrganizationsStore} from "stores/Organizations";
 
 const organizationId = parseInt(useRoute().params.id);
 const loggedUser = storeToRefs(useUserStore()).user;
 const $q = useQuasar();
 
 onMounted(() => {
-  fetchOrganization(organizationId).then(() => {
-    useAppStore().setPageTitle(organization.value.name);
+  useOrganizationsStore().fetchDetail(organizationId).then((o) => {
+    useAppStore().setPageTitle(o.name);
     useAppStore().setBreadcrumbs([
       {to: {name: "organizations"}, label: "Organizace"},
-      {label: organization.value.name}
+      {label: o.name}
     ])
   });
 });
 
+const myOrganizationIds = computed(() =>  (loggedUser.value && loggedUser.value.organizations?.map(o => o.id)) || []);
+const {isQueryRunning, organization} = storeToRefs(useOrganizationsStore());
 </script>
 
 <template>
   <h3>Členové</h3>
 
-
   <div class="q-my-md">
-    <q-btn color="positive" @click="addToOrganization(organizationId)" v-if="!myOrganizationIds.includes(organizationId)">
+    <q-btn color="positive" @click="useOrganizationsStore().addUserToOrganization(organizationId)" v-if="!myOrganizationIds.includes(organizationId)">
       <q-icon name="add"/>
       Přidat se
     </q-btn>
-    <q-btn color="warning" @click="removeFromOrganization(organizationId)" v-else>
+    <q-btn color="warning" @click="useOrganizationsStore().removeUserFromOrganization(organizationId)" v-else>
       <q-icon name="remove"/>
       Opustit organizaci
     </q-btn>
   </div>
 
-  <BasicListSkeleton :items-count-min="1" :items-count-max="5" v-if="loading || !organization"/>
+  <BasicListSkeleton :items-count-min="1" :items-count-max="5" v-if="isQueryRunning || !organization"/>
   <template v-else>
     <q-list bordered separator v-if="organization.users.length > 0">
       <q-item v-for="user in organization.users" :key="user">
@@ -64,7 +65,7 @@ onMounted(() => {
 
   <h3>Letadla</h3>
 
-  <BasicListSkeleton :items-count-min="1" :items-count-max="5" v-if="loading || !organization"/>
+  <BasicListSkeleton :items-count-min="1" :items-count-max="5" v-if="isQueryRunning || !organization"/>
   <template v-else>
     <AircraftsList :items="organization.aircrafts" v-if="organization.aircrafts.length > 0"/>
     <BasicInfoBanner v-else>
diff --git a/src/pages/profile/organization/OrganizationsPage.vue b/src/pages/profile/organization/OrganizationsPage.vue
index ae2850e..128ef4c 100644
--- a/src/pages/profile/organization/OrganizationsPage.vue
+++ b/src/pages/profile/organization/OrganizationsPage.vue
@@ -1,22 +1,28 @@
 <script setup>
 import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
-import { onMounted} from "vue";
-import {fetchOrganizations, loading, myOrganizationIds, organizations} from "src/composables/objects/organization";
+import {computed, onMounted} from "vue";
 import {useAppStore} from "stores/App";
 import FAB from "components/FAB.vue";
 import OrganizationsList from "components/organizations/OrganizationsList.vue";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
+import {useOrganizationsStore} from "stores/Organizations";
+import {storeToRefs} from "pinia";
+import {useUserStore} from "stores/User";
 
 onMounted(() => {
-  fetchOrganizations();
+  useOrganizationsStore().fetch();
   useAppStore().setPageTitle("Organizace");
 });
 
+const loggedUser = storeToRefs(useUserStore()).user;
+const myOrganizationIds = computed(() => (loggedUser.value && loggedUser.value.organizations?.map(o => o.id)) || []);
+
+const {isQueryRunning, organizations} = storeToRefs(useOrganizationsStore());
 </script>
 
 <template>
-  <BasicListSkeleton v-if="loading"/>
-  <BasicInfoBanner v-else-if="!loading && organizations.length === 0" :route-add='{name: "addOrganization"}'>
+  <BasicListSkeleton v-if="isQueryRunning"/>
+  <BasicInfoBanner v-else-if="!isQueryRunning && organizations.length === 0" :route-add='{name: "addOrganization"}'>
     Aktuálně nejsou dostupné žádné organizace, ke kterým by ses mohl/a přidat.
     Zaregistruj sem svůj aeroklub, abyste mohli sdílet letadla.
   </BasicInfoBanner>
diff --git a/src/pages/profile/poi/EditPointOfInterestPage.vue b/src/pages/profile/poi/EditPointOfInterestPage.vue
index 5e2fce8..fdc7095 100644
--- a/src/pages/profile/poi/EditPointOfInterestPage.vue
+++ b/src/pages/profile/poi/EditPointOfInterestPage.vue
@@ -1,6 +1,5 @@
 <script setup>
 import POIEditSkeleton from "components/poi/POIEditSkeleton.vue";
-import {fetchPoi, loading, poi} from "src/composables/objects/poi";
 import {onMounted} from "vue";
 import {useRoute, useRouter} from "vue-router";
 import {usePointsOfInterestStore} from "stores/PointsOfInterest";
@@ -16,11 +15,11 @@ import AccessDeniedBanner from "components/banners/AccessDeniedBanner.vue";
 const poiId = parseInt(useRoute().params.id);
 
 onMounted(() => {
-  fetchPoi(poiId).then(() => {
-    useAppStore().setPageTitle(`${poi.value.name} - editace`);
+  usePointsOfInterestStore().fetchDetail(poiId).then((p) => {
+    useAppStore().setPageTitle(`${p.name} - editace`);
     useAppStore().setBreadcrumbs([
       {to: {name: "poi"}, label: "Zajímavá místa"},
-      {to: {name: "poiDetail", params: {id: poiId}}, label: poi.value.name},
+      {to: {name: "poiDetail", params: {id: poiId}}, label: p.name},
       {label: "Editace"},
     ]);
   });
@@ -30,6 +29,7 @@ onMounted(() => {
 
 const poiTypes = storeToRefs(usePointsOfInterestTypeStore()).items;
 const loggedUser = storeToRefs(useUserStore()).user;
+const {isQueryRunning, pointOfInterest, isMutationRunning} = storeToRefs(usePointsOfInterestStore());
 
 const $q = useQuasar();
 const router = useRouter();
@@ -42,10 +42,10 @@ const handleSave = (data) => {
 </script>
 
 <template>
-  <POIEditSkeleton v-if="loading"/>
+  <POIEditSkeleton v-if="isQueryRunning"/>
   <AccessDeniedBanner
-    v-else-if="poi.createdById !== loggedUser.id"
+    v-else-if="pointOfInterest.createdById !== loggedUser.id"
     :route-back="{name: 'poiDetail', params: {id: poiId}}"
   />
-  <POIForm :poi="poi" :types="poiTypes" v-else @save="handleSave"/>
+  <POIForm :poi="pointOfInterest" :types="poiTypes" v-else @save="handleSave"/>
 </template>
diff --git a/src/pages/profile/poi/NewPointOfInterestPage.vue b/src/pages/profile/poi/NewPointOfInterestPage.vue
index 6f7164b..684bc62 100644
--- a/src/pages/profile/poi/NewPointOfInterestPage.vue
+++ b/src/pages/profile/poi/NewPointOfInterestPage.vue
@@ -16,15 +16,16 @@ const handleSave = (formData) => {
     router.push({name: "poi"});
   })
 }
-const isRequestPending = storeToRefs(usePointsOfInterestStore()).isMutationRunning;
-
 useAppStore().setPageTitle("Nové zajímavé místo");
 useAppStore().setBreadcrumbs([
   {to: "poi", label: "Zajímavá místa"},
   {label: "Nové"},
 ])
+
+const {isMutationRunning} = storeToRefs(usePointsOfInterestStore());
+
 </script>
 
 <template>
-  <POIForm @save="handleSave" :is-request-pending="isRequestPending"/>
+  <POIForm @save="handleSave" :is-request-pending="isMutationRunnin"/>
 </template>
diff --git a/src/pages/profile/poi/PointOfInterestDetailPage.vue b/src/pages/profile/poi/PointOfInterestDetailPage.vue
index 2e5f461..834fda1 100644
--- a/src/pages/profile/poi/PointOfInterestDetailPage.vue
+++ b/src/pages/profile/poi/PointOfInterestDetailPage.vue
@@ -3,57 +3,58 @@ import {onMounted} from "vue";
 import {useRoute} from "vue-router";
 import POIDetailSkeleton from "components/poi/POIDetailSkeleton.vue";
 import FAB from "components/FAB.vue";
-import {fetchPoi, loading, poi} from "src/composables/objects/poi";
-import PhotosList from "components/photos/PhotosEditorList.vue";
 import {useAppStore} from "stores/App";
 import EmbeddedMap from "components/map/EmbeddedMap.vue";
 import {useUserStore} from "stores/User";
 import {storeToRefs} from "pinia";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 import FlightsList from "components/flights/FlightsList.vue";
+import {usePointsOfInterestStore} from "stores/PointsOfInterest";
+import PhotoGallery from "components/photos/PhotoGallery.vue";
 
 const loggedUser = storeToRefs(useUserStore()).user;
 
 onMounted(() => {
-  fetchPoi(useRoute().params.id).then(() => {
-    useAppStore().setPageTitle(`${poi.value.name}`);
+  usePointsOfInterestStore().fetchDetail(useRoute().params.id).then((p) => {
+    useAppStore().setPageTitle(`${p.name}`);
     useAppStore().setBreadcrumbs([
       {to: {name: "poi"}, label: "Zajímavá místa"},
-      {label: poi.value.name},
+      {label: p.name},
     ])
   });
-})
+});
+
+const {isQueryRunning, pointOfInterest} = storeToRefs(usePointsOfInterestStore());
 </script>
 
 <template>
-  <POIDetailSkeleton v-if="loading || !poi"/>
+  <POIDetailSkeleton v-if="isQueryRunning || !pointOfInterest"/>
 
   <template v-else>
-    <article v-html="poi.description" class="q-my-lg" />
+    <article v-html="pointOfInterest.description" class="q-my-lg" />
 
     <EmbeddedMap
-      v-if="poi.gpsLatitude && poi.gpsLongitude"
-      :gps-latitude="poi.gpsLatitude"
-      :gps-longitude="poi.gpsLongitude"
+      v-if="pointOfInterest.gpsLatitude && pointOfInterest.gpsLongitude"
+      :gps-latitude="pointOfInterest.gpsLatitude"
+      :gps-longitude="pointOfInterest.gpsLongitude"
       :zoom="13"
     />
     <BasicInfoBanner v-else>
       Tento bod nemá nastavenou polohu. Po nastavení polohy tu bude zobrazena mapa.
     </BasicInfoBanner>
 
-    <PhotosList
-      :photos="poi.photos"
-      :show-actions="false"
-      v-if="poi.photos.length > 0"
+    <PhotoGallery
+      :photos="pointOfInterest.photos"
+      v-if="pointOfInterest.photos.length > 0"
     />
 
     <BasicInfoBanner v-else>
       Pokud přidáš toto místo k nějaké fotce, zobrazí se tu.
     </BasicInfoBanner>
 
-    <FlightsList :items="poi.flights" v-if="poi.flights.length > 0 && loggedUser.id === poi.createdById"/>
+    <FlightsList :items="pointOfInterest.flights" v-if="pointOfInterest.flights.length > 0 && loggedUser.id === pointOfInterest.createdById"/>
 
-    <FAB v-if="poi.createdById === loggedUser.id" :router-link="{name: 'poiEdit', params:{id: poi.id}}" mode="edit"/>
+    <FAB v-if="pointOfInterest.createdById === loggedUser.id" :router-link="{name: 'poiEdit', params:{id: pointOfInterest.id}}" mode="edit"/>
   </template>
 
 </template>
diff --git a/src/pages/profile/poi/PointsOfInterestPage.vue b/src/pages/profile/poi/PointsOfInterestPage.vue
index ee6b738..bfc4c39 100644
--- a/src/pages/profile/poi/PointsOfInterestPage.vue
+++ b/src/pages/profile/poi/PointsOfInterestPage.vue
@@ -1,24 +1,25 @@
 <script setup>
 import {onMounted} from "vue";
-import {fetchPOIList, loading, pointsOfInterest} from "src/composables/objects/poi";
 import {useAppStore} from "stores/App";
 import POIList from "components/poi/POIList.vue";
 import FAB from "components/FAB.vue";
 import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
-import {flights} from "src/composables/objects/flight";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
+import {usePointsOfInterestStore} from "stores/PointsOfInterest";
+import {storeToRefs} from "pinia";
 
 onMounted(() => {
-  fetchPOIList();
+  usePointsOfInterestStore().fetch();
+  useAppStore().setPageTitle("Zajímavá místa");
 });
 
-useAppStore().setPageTitle("Zajímavá místa")
+const {isQueryRunning, pointsOfInterest} = storeToRefs(usePointsOfInterestStore());
 </script>
 
 <template>
-  <BasicListSkeleton :items-count-min="5" :items-count-max="10" v-if="loading"/>
+  <BasicListSkeleton :items="10" v-if="isQueryRunning"/>
   <BasicInfoBanner
-    v-else-if="!loading && pointsOfInterest.length === 0"
+    v-else-if="!isQueryRunning && pointsOfInterest.length === 0"
     :route-add="{name: 'addPoi'}"
     label-add="Přidat"
   >
diff --git a/src/pages/public/IndexPage.vue b/src/pages/public/IndexPage.vue
index 9be1002..42470c6 100644
--- a/src/pages/public/IndexPage.vue
+++ b/src/pages/public/IndexPage.vue
@@ -24,7 +24,7 @@
 
           <div class="col col-md-6">
             <div class="info-box bg-semi-transparent q-mx-lg  q-py-lg q-px-lg rounded-borders">
-              <div class="text-h2 text-center">Pochlub se polétáním</div>
+              <div class="text-h3 text-center">Pochlub se polétáním</div>
 
               <q-timeline color="primary" class="q-my-lg">
                 <q-timeline-entry title="Zaznamenej si let">
@@ -59,9 +59,9 @@
                 </q-timeline-entry>
               </q-timeline>
 
-                      <div class="text-center q-my-lg">
-          <q-btn size="xl" :to="{name: 'registration'}" rounded color="secondary">Založit profil</q-btn>
-        </div>
+              <div class="text-center q-my-lg">
+                <q-btn size="xl" :to="{name: 'registration'}" rounded color="secondary">Založit profil</q-btn>
+              </div>
             </div>
           </div>
         </div>
diff --git a/src/pages/public/PilotProfilePage.vue b/src/pages/public/PilotProfilePage.vue
index 78d6617..dd0767d 100644
--- a/src/pages/public/PilotProfilePage.vue
+++ b/src/pages/public/PilotProfilePage.vue
@@ -1,13 +1,19 @@
 <script setup>
 import {useRoute} from "vue-router";
-import {user as pilot, loading as pilotLoading} from "src/composables/objects/user";
 import PublicProfileSkeleton from "components/profile/PublicProfileSkeleton.vue";
 import {storeToRefs} from "pinia";
 import {useUserStore} from "stores/User";
 import PilotProfileCard from "components/profile/PilotProfileCard.vue";
+import {onMounted} from "vue";
 
 const loggedUser = storeToRefs(useUserStore()).user;
 const username = useRoute().params.username;
+
+const {publicUser: pilot, isQueryRunning: pilotLoading} = storeToRefs(useUserStore());
+
+onMounted(() => {
+  useUserStore().fetchPublicUserDetail(username);
+})
 </script>
 
 <template>
@@ -16,7 +22,7 @@ const username = useRoute().params.username;
       <router-view :logged-user="loggedUser" :username="username"/>
     </div>
     <div class="col-12 col-md-4">
-      <PublicProfileSkeleton v-if="pilotLoading"/>
+      <PublicProfileSkeleton v-if="pilotLoading || !pilot"/>
       <PilotProfileCard v-else :pilot="pilot"/>
     </div>
   </div>
diff --git a/src/pages/public/pilotProfile/CopilotDetailPage.vue b/src/pages/public/pilotProfile/CopilotDetailPage.vue
index 6b4876b..bad7457 100644
--- a/src/pages/public/pilotProfile/CopilotDetailPage.vue
+++ b/src/pages/public/pilotProfile/CopilotDetailPage.vue
@@ -1,11 +1,12 @@
 <script setup>
 import {useRoute} from "vue-router";
-import {copilot, fetchCopilot, loading as copilotLoading} from "src/composables/objects/copilot";
-import {fetchUser, user as pilot, loading as pilotLoading} from "src/composables/objects/user";
 import {onMounted} from "vue";
 import FlightsList from "components/flights/FlightsList.vue";
 import {useAppStore} from "stores/App";
 import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
+import {useUserStore} from "stores/User";
+import {useCopilotsStore} from "stores/Copilots";
+import {storeToRefs} from "pinia";
 
 const $route = useRoute();
 const copilotId = parseInt($route.params.id);
@@ -22,17 +23,19 @@ const props = defineProps({
   }
 });
 
+const {copilot, isQueryRunning} = storeToRefs(useCopilotsStore());
+const {publicUser, isQueryRunning: isPilotQueryRunning} = storeToRefs(useUserStore());
 
 onMounted(() => {
   Promise.all([
-    fetchUser(props.username),
-    fetchCopilot(copilotId, props.username)
+    useUserStore().fetchPublicUserDetail(props.username),
+    useCopilotsStore().fetchDetail(copilotId, props.username)
   ]).then(() => {
-    useAppStore().setPageTitle(`${pilot.value.name} + ${copilot.value.name}`);
+    useAppStore().setPageTitle(`${publicUser.value.name} + ${copilot.value.name}`);
     useAppStore().setBreadcrumbs([
       {to: {name: 'homepage'}, label: "Polétání.cz"},
       {to: {name: "publicProfileDetail", params: {username: props.username}}, label: `@${props.username}`},
-      {label: pilot.value.name}
+      {label: publicUser.value.name}
     ]);
   });
 });
@@ -40,7 +43,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <BasicListSkeleton v-if="copilotLoading || pilotLoading" class="q-mb-md"/>
+  <BasicListSkeleton v-if="isQueryRunning || isPilotQueryRunning || !copilot" class="q-mb-md"/>
 
   <template v-else>
     <h3>Společné lety</h3>
diff --git a/src/pages/public/pilotProfile/EventDetailPage.vue b/src/pages/public/pilotProfile/EventDetailPage.vue
index 982ec47..d29f953 100644
--- a/src/pages/public/pilotProfile/EventDetailPage.vue
+++ b/src/pages/public/pilotProfile/EventDetailPage.vue
@@ -1,25 +1,23 @@
 <script setup>
 import {onMounted, watch} from "vue";
-import {event, fetchEvent, loading} from "src/composables/objects/event";
 import {useRoute} from "vue-router";
 import {useAppStore} from "stores/App";
-import FlightDetailSkeleton from "components/flights/FlightDetailSkeleton.vue";
-import {fetchUser, loading as pilotLoading, user as pilot} from "src/composables/objects/user";
-import PublicProfileSkeleton from "components/profile/PublicProfileSkeleton.vue";
-import PilotProfileCard from "components/profile/PilotProfileCard.vue";
 import EventDetailSkeleton from "components/event/EventDetailSkeleton.vue";
 import {FORMAT_DATE, formatDatetime} from "src/composables/datetimeUtils";
-import FAB from "components/FAB.vue";
 import FlightsList from "components/flights/FlightsList.vue";
+import {useEventsStore} from "stores/Events";
+import {useUserStore} from "stores/User";
+import {storeToRefs} from "pinia";
 
 const routeParams = useRoute().params;
 onMounted(() => {
-  fetchEvent(routeParams.id, routeParams.username);
-  fetchUser(routeParams.username)
+  useEventsStore().fetchDetail(routeParams.id, routeParams.username);
+  useUserStore().fetchPublicUserDetail(routeParams.username);
 })
 
-watch(event, (newVal) => {
-  // const eventNameFormatted = eventName(newVal);
+const {isQueryRunning, event} = storeToRefs(useEventsStore());
+
+watch(() => event.value, (newVal) => {
   useAppStore().setPageTitle(newVal.name);
   useAppStore().setBreadcrumbs([
     {to: {name: 'homepage'}, label: "Polétání.cz"},
@@ -33,8 +31,7 @@ watch(event, (newVal) => {
 
 <template>
   <div>
-    <EventDetailSkeleton v-if="loading || !event"/>
-
+    <EventDetailSkeleton v-if="isQueryRunning || !event"/>
 
     <template v-else>
       <q-banner class="bg-warning text-white q-mx-md q-my-md" v-if="!event.isPublic">
@@ -66,6 +63,7 @@ watch(event, (newVal) => {
       <FlightsList
         v-else
         :items="event.flights"
+        class="q-my-lg"
         :route-detail="{name: 'publicFlightDetail', params: {username: routeParams.username}}"
       />
 
diff --git a/src/pages/public/pilotProfile/EventsListPage.vue b/src/pages/public/pilotProfile/EventsListPage.vue
index dc6be52..171f82b 100644
--- a/src/pages/public/pilotProfile/EventsListPage.vue
+++ b/src/pages/public/pilotProfile/EventsListPage.vue
@@ -1,10 +1,11 @@
 <script setup>
 import FlightsListSkeleton from "components/flights/FlightsListSkeleton.vue";
-import {event, events, fetchEvents, loading} from "src/composables/objects/event";
 import EventsList from "components/event/EventsList.vue";
 import {onMounted, watch} from "vue";
 import PublicFlightEventSwitcher from "components/navigation/PublicFlightEventSwitcher.vue";
 import {useAppStore} from "stores/App";
+import {useEventsStore} from "stores/Events";
+import {storeToRefs} from "pinia";
 
 const props = defineProps({
   loggedUser: {
@@ -28,20 +29,19 @@ onMounted(() => {
       {to: {name: "publicProfileDetail", params: {username: props.username}}, label: `@${props.username}`},
       {label: "Události"}
     ]);
-    fetchEvents(props.username);
+    useEventsStore().fetch(props.username);
   }
 );
 
-
+const {isQueryRunning, events} = storeToRefs(useEventsStore());
 </script>
 
 <template>
   <PublicFlightEventSwitcher :username="username"/>
 
-  <FlightsListSkeleton v-if="loading"/>
+  <FlightsListSkeleton v-if="isQueryRunning"/>
 
-
-  <q-banner class="bg-primary text-white" v-else-if="!loading && events.length === 0">
+  <q-banner class="bg-primary text-white" v-else-if="!isQueryRunning && events.length === 0">
     Tento pilot zatím nepublikoval žádnou udalost.
   </q-banner>
 
diff --git a/src/pages/public/pilotProfile/FlightDetailPage.vue b/src/pages/public/pilotProfile/FlightDetailPage.vue
index f09d528..014d4ee 100644
--- a/src/pages/public/pilotProfile/FlightDetailPage.vue
+++ b/src/pages/public/pilotProfile/FlightDetailPage.vue
@@ -1,34 +1,34 @@
 <script setup>
 import {onMounted, watch} from "vue";
-import {fetchFlight, flight, flightName, loading} from "src/composables/objects/flight";
 import {useRoute} from "vue-router";
 import FlightTrackMap from "components/flights/FlightTrackMap.vue";
 import FlightBasicInfo from "components/flights/FlightBasicInfo.vue";
 import {useAppStore} from "stores/App";
 import FlightDetailSkeleton from "components/flights/FlightDetailSkeleton.vue";
-import {fetchUser, loading as pilotLoading, user as pilot} from "src/composables/objects/user";
 import PhotoGallery from "components/photos/PhotoGallery.vue";
+import {storeToRefs} from "pinia";
+import {useFlightsStore} from "stores/Flights";
+import {flightName} from "src/composables/objects/flight";
 
 const routeParams = useRoute().params;
 onMounted(() => {
-  fetchFlight(routeParams.id, routeParams.username);
-  fetchUser(routeParams.username)
+  useFlightsStore().fetchDetail(routeParams.id, routeParams.username).then(f => {
+    const flightNameFormatted = flightName(f);
+    useAppStore().setPageTitle(flightNameFormatted);
+    useAppStore().setBreadcrumbs([
+      {to: {name: 'homepage'}, label: "Polétání.cz"},
+      {to: {name: "publicProfileDetail", params: {username: routeParams.username}}, label: `@${routeParams.username}`},
+      {label: flightNameFormatted}
+    ]);
+  })
 })
 
-watch(flight, (newVal) => {
-  const flightNameFormatted = flightName(newVal);
-  useAppStore().setPageTitle(flightNameFormatted);
-  useAppStore().setBreadcrumbs([
-    {to: {name: 'homepage'}, label: "Polétání.cz"},
-    {to: {name: "publicProfileDetail", params: {username: routeParams.username}}, label: `@${routeParams.username}`},
-    {label: flightNameFormatted}
-  ]);
-});
+const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
 </script>
 
 <template>
   <div>
-    <FlightDetailSkeleton v-if="loading || !flight"/>
+    <FlightDetailSkeleton v-if="isQueryRunning || !flight"/>
 
     <template v-else>
       <q-banner class="bg-warning text-white q-mx-md q-my-md" v-if="!flight.isPublic">
@@ -44,8 +44,8 @@ watch(flight, (newVal) => {
 
         <q-card-section>
           <FlightBasicInfo
-            :flight="flight"
-            :copilot-detail-route="{name: 'publicCopilotDetail', params: {username: routeParams.username}}"
+              :flight="flight"
+              :copilot-detail-route="{name: 'publicCopilotDetail', params: {username: routeParams.username}}"
           />
 
           <article class="q-my-lg" v-html="flight.description"/>
diff --git a/src/pages/public/pilotProfile/FlightsListPage.vue b/src/pages/public/pilotProfile/FlightsListPage.vue
index 4593670..36ea222 100644
--- a/src/pages/public/pilotProfile/FlightsListPage.vue
+++ b/src/pages/public/pilotProfile/FlightsListPage.vue
@@ -1,11 +1,12 @@
 <script setup>
-import {fetchFlights, flights, loading as flightsLoading} from "src/composables/objects/flight";
-import {fetchUser, user as pilot} from "src/composables/objects/user";
 import FlightsListSkeleton from "components/flights/FlightsListSkeleton.vue";
 import FlightsList from "components/flights/FlightsList.vue";
 import PublicFlightEventSwitcher from "components/navigation/PublicFlightEventSwitcher.vue";
 import {onMounted} from "vue";
 import {useAppStore} from "stores/App";
+import {useUserStore} from "stores/User";
+import {useFlightsStore} from "stores/Flights";
+import {storeToRefs} from "pinia";
 
 const props = defineProps({
   loggedUser: {
@@ -20,23 +21,27 @@ const props = defineProps({
 });
 
 onMounted(() => {
-  fetchUser(props.username).then(user => {
+  useUserStore().fetchPublicUserDetail(props.username).then(user => {
     useAppStore().setPageTitle(user.publicUsername);
     useAppStore().setBreadcrumbs([
       {to: {name: 'homepage'}, label: "Polétání.cz"},
       {label: `@${user.publicUsername}`},
     ])
   })
-  fetchFlights(props.username);
-})
+
+  useFlightsStore().fetch(props.username);
+});
+
+const {flights, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
+const {publicUser: pilot} = storeToRefs(useUserStore());
 </script>
 
 <template>
   <PublicFlightEventSwitcher :username="username" />
 
-  <FlightsListSkeleton v-if="flightsLoading"/>
+  <FlightsListSkeleton v-if="areFlightsLoading"/>
 
-  <q-banner class="bg-primary text-white" v-else-if="!flightsLoading && flights.length === 0">
+  <q-banner class="bg-primary text-white" v-else-if="!areFlightsLoading && flights.length === 0">
     Tento pilot zatím nepublikoval žádný let.
   </q-banner>
 
diff --git a/src/stores/Aircrafts.js b/src/stores/Aircrafts.js
index 803c4e9..e57c2d1 100644
--- a/src/stores/Aircrafts.js
+++ b/src/stores/Aircrafts.js
@@ -1,57 +1,57 @@
-import {defineStore} from 'pinia'
-import {apolloWrapper} from "src/graphql/apollo";
+import {defineStore} from "pinia";
+import {ref} from "vue";
 import {AIRCRAFT_DETAIL, AIRCRAFTS_LIST} from "src/graphql/queries/aircrafts";
-import {CREATE_AIRCRAFT, DELETE_AIRCRAFT, EDIT_AIRCRAFT} from "src/graphql/mutations/aircrafts";
-import {deleteFromItems, updateInItems} from "stores/helpers";
+import {deleteFromItems, mutate, query, updateInItems} from "stores/helpers";
+import {CREATE_AIRCRAFT, EDIT_AIRCRAFT, DELETE_AIRCRAFT} from "src/graphql/mutations/aircrafts";
 
-export const useAircraftsStore = defineStore('Aircrafts', {
-  state: () => ({
-    items: [],
-    isMutationRunning: false
-  }),
+export const useAircraftsStore = defineStore('Aircrafts', () => {
+    const aircraft = ref(null);
+    const aircrafts = ref([]);
+    const isMutationRunning = ref(false);
+    const isQueryRunning = ref(false);
 
-  getters: {
-    getDetail: (state) => (aircraftId) => state.items.find(a => a.id === aircraftId) || {}
-  },
+    const fetchDetail = (id) => {
+      return query({
+        isQueryRunning,
+        query: AIRCRAFT_DETAIL,
+        variables: {id},
+      }).then(item => aircraft.value = item);
+    };
 
-  actions: {
-    fetchDetail(id) {
-      return apolloWrapper
-        .query(AIRCRAFT_DETAIL, {id})
-        .then((result) => result.data.aircraft);
-    },
-    create(formData) {
-      delete formData['id'];
+    const fetch = () => {
+      return query({
+        isQueryRunning,
+        query: AIRCRAFTS_LIST
+      }).then(items => aircrafts.value = items);
+    }
 
-      this.isMutationRunning = true;
-      return apolloWrapper.mutate(CREATE_AIRCRAFT, {input: formData}).then(({data}) => {
-        // this.items.push(data.createAircraft);
+    const create = (input) => {
+      return mutate({
+        isMutationRunning,
+        mutation: CREATE_AIRCRAFT,
+        variables: {input}
+      }).then(item => aircrafts.value.push(item))
+    }
 
-        return data.createAircraft;
-      }).finally(() => this.isMutationRunning = false);
-    },
-    delete(id) {
-      return apolloWrapper.mutate(DELETE_AIRCRAFT, {id}).then(({data}) => {
-        deleteFromItems(this.items, 'id', id);
+    const update = (id, input) => {
+      return mutate({
+        isMutationRunning,
+        mutation: EDIT_AIRCRAFT,
+        variables: {id, input}
+      }).then(item => updateInItems(aircrafts.value, 'id', item))
+    }
 
-        return data;
-      });
-    },
-    update(id, formData) {
-      this.isMutationRunning = true;
-      return apolloWrapper.mutate(EDIT_AIRCRAFT, {id: id, input: formData}).then(({data}) => {
-        const aircraft = data.editAircraft;
-        updateInItems(this.items, 'id', aircraft);
-        return aircraft;
-      }).finally(() => this.isMutationRunning = false);
-    },
-    fetch() {
-      return apolloWrapper
-        .query(AIRCRAFTS_LIST)
-        .then((result) => {
-          this.items = result.data.aircrafts;
-          return this.items;
-        });
+    const destroy = (id) => {
+      return mutate({
+        isMutationRunning,
+        mutation: DELETE_AIRCRAFT,
+        variables: {id}
+      }).then(item => deleteFromItems(aircrafts.value, 'id', item))
+    }
+
+    return {
+      aircrafts, aircraft, isQueryRunning, isMutationRunning, fetchDetail, fetch, create,
+      update, destroy
     }
   }
-})
+);
diff --git a/src/stores/Airports.js b/src/stores/Airports.js
index 8539f0e..93850ad 100644
--- a/src/stores/Airports.js
+++ b/src/stores/Airports.js
@@ -1,20 +1,18 @@
 import {defineStore} from 'pinia'
-import {apolloWrapper} from "src/graphql/apollo";
 import {AIRPORTS_LIST} from "src/graphql/queries/airports";
+import {ref} from "vue";
+import {query} from "stores/helpers";
 
-export const useAirportsStore = defineStore('Airports', {
-  state: () => ({
-    items: [],
-  }),
+export const useAirportsStore = defineStore('Airports', () => {
+  const airports = ref([])
+  const isQueryRunning = ref(false);
 
-  actions: {
-    fetch() {
-      return apolloWrapper
-        .query(AIRPORTS_LIST)
-        .then((result) => {
-          this.items = result.data.airports;
-          return result.data.airports;
-        });
-    }
+  const fetch = () => {
+    return query({
+      isQueryRunning,
+      query: AIRPORTS_LIST,
+    }).then(items => airports.value = items);
   }
+
+  return {airports, isQueryRunning, fetch};
 })
diff --git a/src/stores/App.js b/src/stores/App.js
index f79e278..82b7193 100644
--- a/src/stores/App.js
+++ b/src/stores/App.js
@@ -1,22 +1,27 @@
 import {defineStore} from 'pinia'
+import {ref} from "vue";
 
-export const useAppStore = defineStore('App', {
-  state: () => ({
-    pageTitle: null,
-    breadcrumbs: [],
-    appStatus: 200
-  }),
-  actions: {
-    resetAfterRouteChange() {
-      this.setPageTitle("");
-      this.setBreadcrumbs([]);
-      this.appStatus = 200;
-    },
-    setPageTitle(pageTitle) {
-      this.pageTitle = pageTitle;
-    },
-    setBreadcrumbs(breadcrumbs) {
-      this.breadcrumbs = breadcrumbs;
-    }
+export const useAppStore = defineStore('App', () => {
+  const pageTitle = ref(null);
+  const breadcrumbs = ref([]);
+  const appStatus = ref(200);  // TODO: toto nejspis nebude potreba!
+
+  const resetAfterRouteChange = () => {
+    setPageTitle("");
+    setBreadcrumbs([]);
+    appStatus.value = 200;
+  };
+
+  const setPageTitle = (value) => {
+    // TODO: je toto vubec potreba?
+    pageTitle.value = value;
+  }
+  const setBreadcrumbs = (items) => {
+    // TODO: je toto vubec potreba?
+    breadcrumbs.value = items;
+  }
+
+  return {
+    pageTitle, breadcrumbs, appStatus, resetAfterRouteChange, setPageTitle, setBreadcrumbs
   }
 })
diff --git a/src/stores/Copilots.js b/src/stores/Copilots.js
index 4d12e41..eda45fa 100644
--- a/src/stores/Copilots.js
+++ b/src/stores/Copilots.js
@@ -1,41 +1,48 @@
 import {defineStore} from 'pinia'
-import {apolloWrapper} from "src/graphql/apollo";
 import {COPILOT_DETAIL, COPILOTS_LIST} from "src/graphql/queries/copilots";
 import {CREATE_COPILOT, EDIT_COPILOT} from "src/graphql/mutations/copilot";
-import {updateInItems} from "stores/helpers";
+import {mutate, query, updateInItems} from "stores/helpers";
+import {ref} from "vue";
 
-export const useCopilotsStore = defineStore('Copilots', {
-  state: () => ({
-    items: [],
-    isMutationRunning: false,
-  }),
+export const useCopilotsStore = defineStore('Copilots', () => {
+  const copilot = ref(null);
+  const copilots = ref([]);
+  const isMutationRunning = ref(false);
+  const isQueryRunning = ref(false);
 
-  actions: {
-    fetchDetail(copilotId, pilotUsername) {
-      return apolloWrapper.query(COPILOT_DETAIL, {id: copilotId, pilotUsername: pilotUsername}).then(({data}) => data.copilot);
-    },
-    fetch() {
-      return apolloWrapper.query(COPILOTS_LIST).then(result => {
-        this.items = result.data.copilots;
-        return result.data.copilots;
-      });
-    },
-    create(formData) {
-      delete formData['id'];
+  const fetchDetail = (id) => {
+    return query({
+      isQueryRunning,
+      query: COPILOT_DETAIL,
+      variables: {id},
+    }).then(item => copilot.value = item);
+  };
 
-      this.isMutationRunning = true;
-      return apolloWrapper.mutate(CREATE_COPILOT, {input: formData}).then(({data}) => {
-        const copilot = data.createCopilot;
-        this.items.push(copilot);
-        return copilot;
-      }).finally(() => this.isMutationRunning = false);
-    },
-    update(id, formData) {
-      return apolloWrapper.mutate(EDIT_COPILOT, {id: id, input: formData}).then(({data}) => {
-        const copilot = data.editCopilot;
-        updateInItems(this.items, "id", copilot);
-        return copilot;
-      }).finally(() => this.isMutationRunning = false);
-    },
+  const fetch = () => {
+    return query({
+      isQueryRunning,
+      query: COPILOTS_LIST,
+    }).then(items => copilots.value = items);
+  }
+
+  const create = (input) => {
+    return mutate({
+      isMutationRunning,
+      mutation: CREATE_COPILOT,
+      variables: {input},
+    }).then(item => copilots.value.push(item))
+  }
+
+  const update = (id, input) => {
+    return mutate({
+      isMutationRunning,
+      mutation: EDIT_COPILOT,
+      variables: {id, input}
+    }).then(item => updateInItems(copilots.value, 'id', item))
+  }
+
+  return {
+    copilot, copilots, isMutationRunning, isQueryRunning,
+    fetch, fetchDetail, create, update
   }
 })
diff --git a/src/stores/Events.js b/src/stores/Events.js
index e56bfbd..964a739 100644
--- a/src/stores/Events.js
+++ b/src/stores/Events.js
@@ -1,42 +1,48 @@
 import {defineStore} from 'pinia'
-import {apolloWrapper} from "src/graphql/apollo";
 import {CREATE_EVENT, EDIT_EVENT} from "src/graphql/mutations/event";
-import {updateInItems} from "stores/helpers";
+import {mutate, query, updateInItems} from "stores/helpers";
+import {ref} from "vue";
 import {EVENT_DETAIL, EVENTS_LIST} from "src/graphql/queries/event";
 
-export const useEventsStore = defineStore('Events', {
-  state: () => ({
-    items: [],
-    isMutationRunning: false,
-  }),
+export const useEventsStore = defineStore('Copilots', () => {
+  const event = ref(null);
+  const events = ref([]);
+  const isMutationRunning = ref(false);
+  const isQueryRunning = ref(false);
 
-  actions: {
-    fetchDetail(eventId, username) {
-      return apolloWrapper.query(EVENT_DETAIL, {id: eventId, username: username}).then(({data}) => data.event);
-    },
-    fetch(username) {
-      return apolloWrapper.query(EVENTS_LIST, {username}).then(result => {
-        this.items = result.data.events;
-        return result.data.events;
-      });
-    },
-    create(formData) {
-      delete formData['id'];
+  const fetchDetail = (id) => {
+    return query({
+      isQueryRunning,
+      query: EVENT_DETAIL,
+      variables: {id},
+    }).then(item => event.value = item);
+  };
 
-      this.isMutationRunning = true;
-      return apolloWrapper.mutate(CREATE_EVENT, {input: formData}).then(({data}) => {
-        const event = data.createEvent;
-        event.flights = event.flights || [];
-        this.items.push(event);
-        return event;
-      }).finally(() => this.isMutationRunning = false);
-    },
-    update(id, formData) {
-      return apolloWrapper.mutate(EDIT_EVENT, {id: id, input: formData}).then(({data}) => {
-        const event = data.editEvent;
-        updateInItems(this.items, "id", event);
-        return event;
-      }).finally(() => this.isMutationRunning = false);
-    },
+  const fetch = (username = undefined) => {
+    return query({
+      isQueryRunning,
+      query: EVENTS_LIST,
+      variables: {username}
+    }).then(items => events.value = items);
+  }
+
+  const create = (input) => {
+    return mutate({
+      isMutationRunning,
+      mutation: CREATE_EVENT,
+      variables: {input},
+    }).then(item => events.value.push(item))
+  }
+
+  const update = (id, input) => {
+    return mutate({
+      isMutationRunning,
+      mutation: EDIT_EVENT,
+      variables: {id, input}
+    }).then(item => updateInItems(events.value, 'id', item))
+  }
+
+  return {
+    event, events, isMutationRunning, isQueryRunning, fetch, fetchDetail, create, update
   }
 })
diff --git a/src/stores/Flights.js b/src/stores/Flights.js
index 06b5222..27bef2a 100644
--- a/src/stores/Flights.js
+++ b/src/stores/Flights.js
@@ -1,67 +1,114 @@
 import {defineStore} from 'pinia'
-import {apolloWrapper} from "src/graphql/apollo"
 import {FLIGHT_DETAIL, FLIGHTS_LIST} from "src/graphql/queries/flights";
 import {EDIT_FLIGHT, CREATE_FLIGHT, DELETE_FLIGHT} from "src/graphql/mutations/flight";
-import {updateInItems} from "stores/helpers";
+import {deleteFromItems, mutate, query, updateInItems} from "stores/helpers";
+import {ref} from "vue";
+import {DELETE_AIRCRAFT} from "src/graphql/mutations/aircrafts";
 
-export const useFlightsStore = defineStore('Flights', {
-  state: () => ({
-    items: [],
-    isMutationRunning: false
-  }),
+export const useFlightsStore = defineStore('Flights', () => {
+  const flight = ref(null);
+  const flights = ref([]);
+  const isMutationRunning = ref(false);
+  const isQueryRunning = ref(false);
 
-  getters: {
-    getDetail: (state) => (flightId) => {
-      return state.items.find(f => f.id === flightId);
-    },
-  },
+   const fetchDetail = (id, username) => {
+    return query({
+      isQueryRunning,
+      query: FLIGHT_DETAIL,
+      variables: {username, id},
+    }).then(item => flight.value = item);
+  };
 
-  actions: {
-    create(formData) {
-      delete formData['id'];
-      return apolloWrapper.mutate(CREATE_FLIGHT, {input: formData}).then(({data}) => {
-        const flightId = data.createFlight.id;
+  const fetch = (username = undefined) => {
+    return query({
+      isQueryRunning,
+      query: FLIGHTS_LIST,
+      variables: {username}
+    }).then(items => flights.value = items);
+  }
 
-        // pitomy ohack kvuli tomu, ze se mi nedari dostat z API rovnou informace o nove vytvorenem letadle
-        this.fetchDetail(flightId).then(flight => {
-          this.items.push(flight);
-        })
 
-        return data.createFlight;
-      })
-    },
-    update(id, formData) {
-      this.isMutationRunning = true;
-      return apolloWrapper.mutate(EDIT_FLIGHT, {id: id, input: formData}).then(({data}) => {
-        const flight = data.editFlight;
-        updateInItems(this.items, "id", flight);
+  const create = (input) => {
+    return mutate({
+      isMutationRunning,
+      mutation: CREATE_FLIGHT,
+      variables: {input},
+    }).then(item => {
+      flights.value.push(item);
+      return item;
+    })
+  }
 
-        return flight;
-      }).finally(() => this.isMutationRunning = false);
-    },
-    fetchDetail(id, username = null) {
-      if (typeof id !== "number") {
-        id = parseInt(id);
-      }
-      return apolloWrapper.query(FLIGHT_DETAIL, {id, username}).then(result => result.data.flight);
-    },
-    fetch(username = null) {
-      return apolloWrapper
-        .query(FLIGHTS_LIST, {username})
-        .then((resp) => {
-          const data = resp.data;
-          this.items = data.flights;
-          return data.flights;
-        }).catch(err => console.log(err));
-    },
-    delete(id) {
-      return apolloWrapper.mutate(DELETE_FLIGHT, {id}).then(({data}) => {
+  const update = (id, input) => {
+    return mutate({
+      isMutationRunning,
+      mutation: EDIT_FLIGHT,
+      variables: {id, input}
+    }).then(item => {
+      updateInItems(flights.value, 'id', item);
+      flight.value = item;
+    })
+  }
 
-        const idx = this.items.indexOf(this.items.find(f => f.id === id));
-        this.items.splice(idx, 1);
+   const destroy = (id) => {
+      return mutate({
+        isMutationRunning,
+        mutation: DELETE_FLIGHT,
+        variables: {id}
+      }).then(item => deleteFromItems(flights.value, 'id', item))
+    }
 
-        return data.deleteFlight;
-      })
-    },
-  },
+
+  return {
+    flight, flights, isMutationRunning, isQueryRunning, fetchDetail, fetch, create, update, destroy
+  }
+  //
+  // actions: {
+  //   create(formData) {
+  //     delete formData['id'];
+  //     return apolloWrapper.mutate(CREATE_FLIGHT, {input: formData}).then(({data}) => {
+  //       const flightId = data.createFlight.id;
+  //
+  //       // pitomy ohack kvuli tomu, ze se mi nedari dostat z API rovnou informace o nove vytvorenem letadle
+  //       this.fetchDetail(flightId).then(flight => {
+  //         this.items.push(flight);
+  //       })
+  //
+  //       return data.createFlight;
+  //     })
+  //   },
+  //   update(id, formData) {
+  //     this.isMutationRunning = true;
+  //     return apolloWrapper.mutate(EDIT_FLIGHT, {id: id, input: formData}).then(({data}) => {
+  //       const flight = data.editFlight;
+  //       updateInItems(this.items, "id", flight);
+  //
+  //       return flight;
+  //     }).finally(() => this.isMutationRunning = false);
+  //   },
+  //   fetchDetail(id, username = null) {
+  //     if (typeof id !== "number") {
+  //       id = parseInt(id);
+  //     }
+  //     return apolloWrapper.query(FLIGHT_DETAIL, {id, username}).then(result => result.data.flight);
+  //   },
+  //   fetch(username = null) {
+  //     return apolloWrapper
+  //       .query(FLIGHTS_LIST, {username})
+  //       .then((resp) => {
+  //         const data = resp.data;
+  //         this.items = data.flights;
+  //         return data.flights;
+  //       }).catch(err => console.log(err));
+  //   },
+  //   delete(id) {
+  //     return apolloWrapper.mutate(DELETE_FLIGHT, {id}).then(({data}) => {
+  //
+  //       const idx = this.items.indexOf(this.items.find(f => f.id === id));
+  //       this.items.splice(idx, 1);
+  //
+  //       return data.deleteFlight;
+  //     })
+  //   },
+  // },
 });
diff --git a/src/stores/Organizations.js b/src/stores/Organizations.js
index 76c9f8a..99bd369 100644
--- a/src/stores/Organizations.js
+++ b/src/stores/Organizations.js
@@ -1,56 +1,118 @@
 import {defineStore} from 'pinia'
-import {apolloWrapper} from "src/graphql/apollo";
+import {apolloWrapper} from "boot/apollo";
 import {ADD_USER_TO_ORGANIZATION, CREATE_ORGANIZATION, EDIT_ORGANIZATION, REMOVE_USER_FROM_ORGANIZATION} from "src/graphql/mutations/organization";
 import {ORGANIZATION_DETAIL, ORGANIZATIONS_LIST} from "src/graphql/queries/organization";
-import {updateInItems} from "stores/helpers";
+import {mutate, query, updateInItems} from "stores/helpers";
+import {ref} from "vue";
+import {useUserStore} from "stores/User";
 
-export const useOrganizationsStore = defineStore('Organizations', {
-  state: () => ({
-    items: [],
-    isMutationRunning: false,
-  }),
+export const useOrganizationsStore = defineStore('Organizations', () => {
 
-  actions: {
-    fetchDetail(organizationId) {
-      return apolloWrapper.query(ORGANIZATION_DETAIL, {id: organizationId}).then(({data}) => data.organization);
-    },
-    fetch() {
-      return apolloWrapper.query(ORGANIZATIONS_LIST).then(result => {
-        this.items = result.data.organizations;
-        return result.data.organizations;
-      });
-    },
-    create(formData) {
-      delete formData['id'];
+    const organization = ref(null);
+    const organizations = ref([]);
+    const isMutationRunning = ref(false);
+    const isQueryRunning = ref(false);
 
-      this.isMutationRunning = true;
-      return apolloWrapper.mutate(CREATE_ORGANIZATION, {input: formData}).then(({data}) => {
-        const organization = data.createOrganization;
-        this.items.push(organization);
-        return organization;
-      }).finally(() => this.isMutationRunning = false);
-    },
+    const fetchDetail = (id) => query({
+        isQueryRunning,
+        query: ORGANIZATION_DETAIL,
+        variables: {id}
+    }).then(item => organization.value = item);
 
-    addUserToOrganization(organizationId) {
-      this.isMutationRunning = true;
-      return apolloWrapper.mutate(ADD_USER_TO_ORGANIZATION, {organizationId}).then(({data}) => {
-        return data.addToOrganization;
-      }).finally(() => this.isMutationRunning = false);
-    },
+    const fetch = () => query({
+        isQueryRunning,
+        query: ORGANIZATIONS_LIST
+    }).then(items => organizations.value = items);
 
-    removeUserFromOrganization(organizationId) {
-      this.isMutationRunning = true;
-      return apolloWrapper.mutate(REMOVE_USER_FROM_ORGANIZATION, {organizationId}).then(({data}) => {
-        return data.removeFromOrganization;
-      }).finally(() => this.isMutationRunning = false);
-    },
+    const create = (input) => mutate({
+        isMutationRunning,
+        mutation: CREATE_ORGANIZATION,
+        variables: {input}
+    }).then(item => organizations.value.push(item));
 
-    update(id, formData) {
-      return apolloWrapper.mutate(EDIT_ORGANIZATION, {id: id, input: formData}).then(({data}) => {
-        const organization = data.editOrganization;
-        updateInItems(this.items, "id", organization);
-        return organization;
-      }).finally(() => this.isMutationRunning = false);
-    },
-  }
-})
+    const update = (id, input) => mutate({
+        isMutationRunning,
+        mutation: EDIT_ORGANIZATION,
+        variables: {id, input}
+    }).then(item => {
+        updateInItems(organizations.value, 'id', item);
+        return item;
+    });
+
+    const addUserToOrganization = (organizationId) => mutate({
+        isMutationRunning,
+        mutation: ADD_USER_TO_ORGANIZATION,
+        variables: {organizationId}
+    }).then(item => {
+        useUserStore().user.organizations.push(item);
+        organization.value.users = item.users;
+        return item;
+    });
+
+    const removeUserFromOrganization = (organizationId) => mutate({
+        isMutationRunning,
+        mutation: REMOVE_USER_FROM_ORGANIZATION,
+        variables: {organizationId},
+    }).then(item => {
+        const idx = useUserStore().user.organizations.findIndex(o => o.id === organizationId);
+        useUserStore().user.organizations.splice(idx, 1);
+        organization.value.users = item.users;
+        return item;
+    });
+
+    return {
+        organization, organizations, isMutationRunning, isQueryRunning, fetchDetail, fetch, create, update,
+        addUserToOrganization, removeUserFromOrganization
+    };
+
+    //
+    //
+    // state: () => ({
+    //   items: [],
+    //   isMutationRunning: false,
+    // }),
+    //
+    // actions: {
+    //   fetchDetail(organizationId) {
+    //     return apolloWrapper.query(ORGANIZATION_DETAIL, {id: organizationId}).then(({data}) => data.organization);
+    //   },
+    //   fetch() {
+    //     return apolloWrapper.query(ORGANIZATIONS_LIST).then(result => {
+    //       this.items = result.data.organizations;
+    //       return result.data.organizations;
+    //     });
+    //   },
+    //   create(formData) {
+    //     delete formData['id'];
+    //
+    //     this.isMutationRunning = true;
+    //     return apolloWrapper.mutate(CREATE_ORGANIZATION, {input: formData}).then(({data}) => {
+    //       const organization = data.createOrganization;
+    //       this.items.push(organization);
+    //       return organization;
+    //     }).finally(() => this.isMutationRunning = false);
+    //   },
+    //
+    //   addUserToOrganization(organizationId) {
+    //     this.isMutationRunning = true;
+    //     return apolloWrapper.mutate(ADD_USER_TO_ORGANIZATION, {organizationId}).then(({data}) => {
+    //       return data.addToOrganization;
+    //     }).finally(() => this.isMutationRunning = false);
+    //   },
+    //
+    //   removeUserFromOrganization(organizationId) {
+    //     this.isMutationRunning = true;
+    //     return apolloWrapper.mutate(REMOVE_USER_FROM_ORGANIZATION, {organizationId}).then(({data}) => {
+    //       return data.removeFromOrganization;
+    //     }).finally(() => this.isMutationRunning = false);
+    //   },
+    //
+    //   update(id, formData) {
+    //     return apolloWrapper.mutate(EDIT_ORGANIZATION, {id: id, input: formData}).then(({data}) => {
+    //       const organization = data.editOrganization;
+    //       updateInItems(this.items, "id", organization);
+    //       return organization;
+    //     }).finally(() => this.isMutationRunning = false);
+    //   },
+    // }
+});
diff --git a/src/stores/Photo.js b/src/stores/Photo.js
index 2519dec..ca46b63 100644
--- a/src/stores/Photo.js
+++ b/src/stores/Photo.js
@@ -1,65 +1,79 @@
 import {defineStore} from "pinia";
-import {apolloWrapper} from "src/graphql/apollo";
 import {ADJUST_PHOTO, CHANGE_PHOTO_ORIENTATION, DELETE_PHOTO, EDIT_PHOTO, UPLOAD_PHOTO} from "src/graphql/mutations/photo";
 import {PHOTO_DETAIL} from "src/graphql/queries/photo";
+import {ref} from "vue";
+import {mutate, query} from "stores/helpers";
 
-export const usePhotosStore = defineStore('Photos', {
-  state: () => ({
-    isMutationRunning: false,
-  }),
+export const usePhotosStore = defineStore('Photos', () => {
+    const photo = ref(null);
+    const isMutationRunning = ref(false);
+    const isQueryRunning = ref(false);
 
-  actions: {
-    fetchDetail(id) {
-      return apolloWrapper.query(PHOTO_DETAIL, {id}).then(({data}) => {
-        return data.photo;
-      });
-    },
-    upload(flightId, formData) {
-      if (!flightId) {
-        console.error("No flightId specified for photo upload! Aborting");
-        return;
-      }
+    const fetchDetail = (id) => query({
+        isQueryRunning,
+        query: PHOTO_DETAIL,
+        variables: {id}
+    }).then(item => photo.value = item);
 
-      formData.flightId = flightId;
+    const upload = (flightId, input) => {
+        if (!flightId) {
+            console.error("No flightId specified for photo upload! Aborting");
+            return;
+        }
 
-      if (!formData.name) {
-        formData.name = "";
-      }
+        input.flightId = flightId;
 
-      if (!formData.description) {
-        formData.description = "";
-      }
+        if (!input.name) {
+            input.name = "";
+        }
 
-      this.isMutationRunning = true;
-      return apolloWrapper.mutate(UPLOAD_PHOTO, {input: formData}).then(({data}) => {
-        return data.uploadPhoto;
-      }).finally(() => this.isMutationRunning = false);
-    },
-    update(id, formData) {
-      this.isMutationRunning = true;
-      return apolloWrapper.mutate(EDIT_PHOTO, {id, input: formData}).then(({data}) => {
-        return data.editPhoto;
-      }).finally(() => this.isMutationRunning = false);
-    },
+        if (!input.description) {
+            input.description = "";
+        }
 
-    changeOrientation(id, direction) {
-      this.isMutationRunning = true;
-      return apolloWrapper.mutate(CHANGE_PHOTO_ORIENTATION, {id, direction}).then(({data}) => {
-        return data.changeOrientation;
-      }).finally(() => this.isMutationRunning = false);
-    },
+        // TODO: ^^ patri tohle do storu?
 
-    adjust(id, adjustment) {
-      this.isMutationRunning = true;
-      return apolloWrapper.mutate(ADJUST_PHOTO, {id, adjustment}).then(({data}) => {
-        return data.adjustPhoto;
-      }).finally(() => this.isMutationRunning = false);
-    },
-    delete(photoId) {
-      this.isMutationRunning = true;
-      return apolloWrapper.mutate(DELETE_PHOTO, {id: photoId}).then(({data}) => {
-        return data.deletePhoto;
-      }).finally(() => this.isMutationRunning = false);
+        return mutate({
+            isMutationRunning,
+            mutation: UPLOAD_PHOTO,
+            variables: {input}
+        })
+    };
+
+    const update = (id, input) => mutate({
+        isMutationRunning,
+        mutation: EDIT_PHOTO,
+        variables: {id, input}
+    }).then(item => {
+        photo.value = item;
+        return item;
+    })
+
+    const changeOrientation = (id, direction) => mutate({
+        isMutationRunning,
+        mutation: CHANGE_PHOTO_ORIENTATION,
+        variables: {id, direction}
+    }).then(item => {
+        photo.value = item;
+        return item;
+    });
+
+    const adjust = (id, adjustment) => mutate({
+        isMutationRunning,
+        mutation: ADJUST_PHOTO,
+        variables: {id, adjustment}
+    }).then(item => {
+        photo.value = item;
+        return item;
+    });
+
+    const destroy = (id) => mutate({
+        isMutationRunning,
+        mutation: DELETE_PHOTO,
+        variables: {id}
+    });
+
+    return {
+        photo, isMutationRunning, isQueryRunning, fetchDetail, upload, update, changeOrientation, adjust, destroy
     }
-  }
 });
diff --git a/src/stores/PointOfInterestType.js b/src/stores/PointOfInterestType.js
index cc10ded..d5b46c6 100644
--- a/src/stores/PointOfInterestType.js
+++ b/src/stores/PointOfInterestType.js
@@ -1,39 +1,25 @@
 import {defineStore} from 'pinia'
-import {apolloWrapper} from "src/graphql/apollo";
 import {POI_TYPE_DETAIL, POI_TYPE_LIST} from "src/graphql/queries/poi_type";
+import {ref} from "vue";
+import {query} from "stores/helpers";
 
-export const usePointsOfInterestTypeStore = defineStore('PointsOfInterestType', {
-  state: () => ({
-    items: []
-  }),
+export const usePointsOfInterestTypeStore = defineStore('PointsOfInterestType', () => {
+
+    const type = ref(null);
+    const types = ref([]);
+    const isQueryRunning = ref(false);
+
+    const fetchDetail = (id) => query({
+        isQueryRunning,
+        query: POI_TYPE_DETAIL,
+        variables: {id}
+    }).then(item => type.value = item);
 
 
-  actions: {
-    // create(input) {
-    //   return apolloWrapper.mutate(CREATE_POI, {input}).then((data) => {
-    //     const poi = data.data.createPointOfInterest;
-    //     this.items.push(poi);
-    //     return poi;
-    //   })
-    // },
-    // update(id, input) {
-    //   return apolloWrapper.mutate(EDIT_POI, {id, input}).then((data) => {
-    //     console.log("Pridat update POI ve store");
-    //     return data.data.editPointOfInterest;
-    //   })
-    // },
+    const fetch = () => query({
+        isQueryRunning,
+        query: POI_TYPE_LIST,
+    }).then(item => types.value = item);
 
-    fetchDetail(id) {
-      if (typeof id !== "number") {
-        id = parseInt(id);
-      }
-      return apolloWrapper.query(POI_TYPE_DETAIL, {id}).then(result => result.data.pointOfInterest);
-    },
-    fetch() {
-      return apolloWrapper.query(POI_TYPE_LIST).then(result => {
-        this.items = result.data.pointOfInterestTypes;
-        return result.data.pointOfInterestTypes;
-      });
-    }
-  }
+    return {types, fetchDetail, fetch};
 })
diff --git a/src/stores/PointsOfInterest.js b/src/stores/PointsOfInterest.js
index d90a1a8..5984309 100644
--- a/src/stores/PointsOfInterest.js
+++ b/src/stores/PointsOfInterest.js
@@ -1,52 +1,49 @@
 import {defineStore} from 'pinia'
-import {apolloWrapper} from "src/graphql/apollo";
 import {POI_DETAIL, POI_LIST} from "src/graphql/queries/poi";
 import {CREATE_POI, EDIT_POI} from "src/graphql/mutations/poi";
-import {updateInItems} from "stores/helpers";
+import {mutate, query, updateInItems} from "stores/helpers";
+import {ref} from "vue";
 
 
-export const usePointsOfInterestStore = defineStore('PointsOfInterest', {
-  state: () => ({
-    items: [],
-    isMutationRunning: false,
-  }),
+export const usePointsOfInterestStore = defineStore('PointsOfInterest', () => {
 
-  getters: {
-    getDetail: (state) => (poiId) => {
-      return state.items.find(p => p.id === poiId);
-    },
-  },
+    const pointOfInterest = ref(null);
+    const pointsOfInterest = ref([]);
+    const isMutationRunning = ref(false);
+    const isQueryRunning = ref(false);
 
-  actions: {
-    create(input) {
-      this.isMutationRunning = true;
-      return apolloWrapper.mutate(CREATE_POI, {input}).then((data) => {
-        const poi = data.data.createPointOfInterest;
-        this.items.push(poi);
-        return poi;
-      }).finally(() => this.isMutationRunning = false);
-    },
-    update(id, input) {
-      this.isMutationRunning = true;
+    const fetchDetail = (id) => {
+        return query({
+            isQueryRunning,
+            query: POI_DETAIL,
+            variables: {id},
+        }).then(item => pointOfInterest.value = item);
+    };
 
-      return apolloWrapper.mutate(EDIT_POI, {id, input}).then((data) => {
-        const poi = data.data.editPointOfInterest;
-        updateInItems(this.items, "id", poi);
-        return poi;
-      }).finally(() => this.isMutationRunning = false);
-    },
+    const fetch = () => {
+        return query({
+            isQueryRunning,
+            query: POI_LIST,
+        }).then(items => pointsOfInterest.value = items);
+    }
 
-    fetchDetail(id) {
-      if (typeof id !== "number") {
-        id = parseInt(id);
-      }
-      return apolloWrapper.query(POI_DETAIL, {id}).then(result => result.data.pointOfInterest);
-    },
-    fetch() {
-      return apolloWrapper.query(POI_LIST).then(result => {
-        this.items = result.data.pointsOfInterest;
-        return result.data.pointsOfInterest;
-      });
+    const create = (input) => {
+        return mutate({
+            isMutationRunning,
+            mutation: CREATE_POI,
+            variables: {input},
+        }).then(item => pointsOfInterest.value.push(item))
+    }
+
+    const update = (id, input) => {
+        return mutate({
+            isMutationRunning,
+            mutation: EDIT_POI,
+            variables: {id, input}
+        }).then(item => updateInItems(pointsOfInterest.value, 'id', item))
+    }
+
+    return {
+        pointOfInterest, pointsOfInterest, isMutationRunning, isQueryRunning, fetch, fetchDetail, create, update
     }
-  }
 })
diff --git a/src/stores/User.js b/src/stores/User.js
index e36a533..03ee13d 100644
--- a/src/stores/User.js
+++ b/src/stores/User.js
@@ -1,90 +1,94 @@
 import {defineStore} from 'pinia'
 import {api} from "boot/axios";
-import {apolloWrapper} from "src/graphql/apollo";
 import {EDIT_USER} from "src/graphql/mutations/user";
 import {LOGGED_USER_DETAIL, USER_DETAIL} from "src/graphql/queries/user";
+import {ref} from "vue";
+import {mutate, query} from "stores/helpers";
 
-export const useUserStore = defineStore('LoggedUser', {
-  state: () => ({
-    user: {},
-    isRefreshing: false,
-    isMutationRunning: false,
-  }),
+export const useUserStore = defineStore('LoggedUser', () => {
+    const user = ref(null);
+    const publicUser = ref(null);
+    const isQueryRunning = ref(false);
+    const isMutationRunning = ref(false);
+    const isRefreshing = ref(false);
 
-  actions: {
-    update(formData) {
-      this.isMutationRunning = true;
+    const fetchLoggedUserDetail = () => query({
+        isQueryRunning,
+        query: LOGGED_USER_DETAIL
+    }).then(item => {
+        user.value = item;
+        return item;
+    });
 
-      apolloWrapper.mutate(EDIT_USER, {input: formData}).then((response) => {
-        const user = response.data?.editLoggedUser;
-        this.user = user;
-        return user;
-      }).finally(() => this.isMutationRunning = false);
-    },
+    const fetchPublicUserDetail = (username) => query({
+        isQueryRunning,
+        query: USER_DETAIL,
+        variables: {username}
+    }).then(item => {
+        publicUser.value = item;
+        return item;
+    });
 
-    fetchLoggedUserDetail() {
-      return apolloWrapper.query(LOGGED_USER_DETAIL).then((response) => {
-        const user = response.data?.loggedUser;
-        this.user = user;
-        return user;
-      })
-    },
+    const update = (input) => mutate({
+        isMutationRunning,
+        mutation: EDIT_USER,
+        variables: {input}
+    }).then(item => {
+        user.value = item;
+        return item;
+    });
 
-    fetchDetail(username) {
-      return apolloWrapper.query(USER_DETAIL, {username}).then((response) => {
-        return response.data?.user;
-      });
-    },
-
-    async register(formData) {
-      return api.post('/registration', formData).then(response => {
-        const registeredUser = response.data;
-        const isSuccess = response.status === 201
-      })
-    },
-
-    async login(formData) {
-      return api.post("/login", formData).then(({data}) => {
-        this.setTokens(data);
-        this.user = data.user;
-      })
-    },
-    logout() {
-      return api.post("/logout").then(response => {
-        Object.assign(this.user, {});
-        localStorage.removeItem("accessToken");
-        localStorage.removeItem("accessTokenValidity");
-      });
-    },
-
-    setTokens({access_token, access_token_validity}) {
-      const now = new Date().getTime() / 1000;
-      localStorage.setItem("accessToken", access_token);
-      localStorage.setItem("accessTokenValidity", now + access_token_validity);
-    },
-
-    getAccessToken() {
-      const tokenValidity = localStorage.getItem("accessTokenValidity");
-      const now = new Date().getTime() / 1000;
-
-      if (tokenValidity < now) {
-        localStorage.removeItem("accessToken");
-        localStorage.removeItem("accessTokenValidity");
-      }
-
-      return localStorage.getItem(`accessToken`);
-    },
-
-    hasAccessToken() {
-      return !!localStorage.getItem("accessToken");
-    },
-
-    async refreshAccessToken() {
-      return api.post("/refresh")
-        .then(({data}) => {
-          this.setTokens(data);
-          return data.access_token;
+    const register = async (formData) => {
+        return api.post('/registration', formData).then(response => {
+            const registeredUser = response.data;
+            const isSuccess = response.status === 201
         })
-    },
-  }
-})
+    };
+
+    const login = async (formData) => {
+        return api.post("/login", formData).then(({data}) => {
+            setTokens(data);
+            this.user = data.user;
+        })
+    };
+
+    const logout = () => {
+        return api.post("/logout").then(response => {
+            localStorage.removeItem("accessToken");
+            localStorage.removeItem("accessTokenValidity");
+            user.value = null;
+        });
+    };
+
+    const setTokens = ({access_token, access_token_validity}) => {
+        const now = new Date().getTime() / 1000;
+        localStorage.setItem("accessToken", access_token);
+        localStorage.setItem("accessTokenValidity", now + access_token_validity);
+    };
+
+    const getAccessToken = () => {
+        const tokenValidity = localStorage.getItem("accessTokenValidity");
+        const now = new Date().getTime() / 1000;
+
+        if (tokenValidity < now) {
+            localStorage.removeItem("accessToken");
+            localStorage.removeItem("accessTokenValidity");
+        }
+
+        return localStorage.getItem(`accessToken`);
+    };
+
+    const hasAccessToken = () => !!localStorage.getItem("accessToken");
+
+    const refreshAccessToken = async () => api.post("/refresh")
+        .then(({data}) => {
+            setTokens(data);
+            return data.access_token;
+        });
+
+    return {
+        isQueryRunning, isMutationRunning, user, publicUser, fetchLoggedUserDetail, fetchPublicUserDetail, update,
+        register, login, logout,
+        getAccessToken, hasAccessToken, refreshAccessToken, isRefreshing
+    }
+});
diff --git a/src/stores/helpers.js b/src/stores/helpers.js
index dacd588..20cbd79 100644
--- a/src/stores/helpers.js
+++ b/src/stores/helpers.js
@@ -1,8 +1,13 @@
+import {apolloWrapper} from "boot/apollo";
+import {getOperationName} from "@apollo/client/utilities";
+
 export const updateInItems = (items, key, data) => {
   const idx = items.findIndex(i => i[key] === data[key]);
   if (idx >= 0)
     items[idx] = data;
   else items.push(data);
+
+  return items;
 }
 
 export const deleteFromItems = (items, key, value) => {
@@ -11,3 +16,23 @@ export const deleteFromItems = (items, key, value) => {
 
   items.splice(idx, 1);
 }
+
+export const query = ({isQueryRunning, query, variables}) => {
+  if (variables && variables.id) {
+    variables.id = parseInt(variables.id);
+  }
+
+  isQueryRunning.value = true;
+  const queryName = query.definitions[0].selectionSet.selections[0].name.value;
+  return apolloWrapper.query(query, variables)
+    .then((result) => result.data[queryName])
+    .finally(() => isQueryRunning.value = false);
+}
+
+export const mutate = ({isMutationRunning, mutation, variables}) => {
+  isMutationRunning.value = true;
+  const mutationName = getOperationName(mutation);
+  return apolloWrapper.mutate(mutation, variables)
+    .then(result => result.data[mutationName])
+    .finally(() => isMutationRunning.value = false);
+}
diff --git a/src/stores/index.js b/src/stores/index.js
index ca5bee5..077ddab 100644
--- a/src/stores/index.js
+++ b/src/stores/index.js
@@ -1,20 +1,7 @@
 import { store } from 'quasar/wrappers'
 import { createPinia } from 'pinia'
 
-/*
- * If not building with SSR mode, you can
- * directly export the Store instantiation;
- *
- * The function below can be async too; either use
- * async/await or return a Promise which resolves
- * with the Store instance.
- */
-
 export default store((/* { ssrContext } */) => {
-  const pinia = createPinia()
-
-  // You can add Pinia plugins here
-  // pinia.use(SomePiniaPlugin)
-
+  const pinia = createPinia();
   return pinia
 })