Create a courseStore

.env

+VITE_APP_BACK_URL=http://localhost:1337

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@quasar/extras": "^1.15.1",
+    "axios": "^0.27.2",
     "pinia": "^2.0.17",
     "quasar": "^2.7.7",
     "vue": "^3.2.37",

pnpm-lock.yaml

@@ -8,6 +8,7 @@ specifiers:
   '@vitejs/plugin-vue': ^3.0.1
   '@vue/test-utils': ^2.0.2
   '@vue/tsconfig': ^0.1.3
+  axios: ^0.27.2
   jsdom: ^20.0.0
   npm-run-all: ^4.1.5
   pinia: ^2.0.17
@@ -22,6 +23,7 @@ specifiers:
 
 dependencies:
   '@quasar/extras': 1.15.1
+  axios: 0.27.2
   pinia: 2.0.18_j6bzmzd4ujpabbp5objtwxyjp4
   quasar: 2.7.7
   vue: 3.2.37
@@ -333,7 +335,15 @@ packages:
 
   /asynckit/0.4.0:
     resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
-    dev: true
+
+  /axios/0.27.2:
+    resolution: {integrity: sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==}
+    dependencies:
+      follow-redirects: 1.15.1
+      form-data: 4.0.0
+    transitivePeerDependencies:
+      - debug
+    dev: false
 
   /balanced-match/1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
@@ -425,7 +435,6 @@ packages:
     engines: {node: '>= 0.8'}
     dependencies:
       delayed-stream: 1.0.0
-    dev: true
 
   /concat-map/0.0.1:
     resolution: {integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=}
@@ -507,7 +516,6 @@ packages:
   /delayed-stream/1.0.0:
     resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
     engines: {node: '>=0.4.0'}
-    dev: true
 
   /domexception/4.0.0:
     resolution: {integrity: sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==}
@@ -822,6 +830,16 @@ packages:
       to-regex-range: 5.0.1
     dev: true
 
+  /follow-redirects/1.15.1:
+    resolution: {integrity: sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+    dev: false
+
   /form-data/4.0.0:
     resolution: {integrity: sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==}
     engines: {node: '>= 6'}
@@ -829,7 +847,6 @@ packages:
       asynckit: 0.4.0
       combined-stream: 1.0.8
       mime-types: 2.1.35
-    dev: true
 
   /fsevents/2.3.2:
     resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
@@ -1179,14 +1196,12 @@ packages:
   /mime-db/1.52.0:
     resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
     engines: {node: '>= 0.6'}
-    dev: true
 
   /mime-types/2.1.35:
     resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
     engines: {node: '>= 0.6'}
     dependencies:
       mime-db: 1.52.0
-    dev: true
 
   /minimatch/3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}

src/main.ts

@@ -4,7 +4,8 @@ import { createPinia } from 'pinia'
 import App from '@/App.vue'
 import router from '@/router'
 
-import { Quasar } from 'quasar'
+// Import Quasar plugins
+import { Notify, Quasar } from 'quasar'
 import quasarLang from 'quasar/lang/fr'
 import quasarIconSet from 'quasar/icon-set/svg-mdi-v6'
 
@@ -21,7 +22,12 @@ const app = createApp(App)
 app.use(createPinia())
 app.use(router)
 app.use(Quasar, {
-  plugins: {}, // import Quasar plugins and add here
+  plugins: {
+    Notify,
+  },
+  config: {
+    notify: {},
+  },
   lang: quasarLang,
   iconSet: quasarIconSet,
 })

src/plugins/axios.ts

+import type { AxiosRequestHeaders } from 'axios'
+import axios from 'axios'
+
+// Full config:  https://github.com/axios/axios#request-config
+// axios.defaults.baseURL = import.meta.env.VITE_APP_BACK_URL
+// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN
+// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
+
+let config = {
+  baseURL: (import.meta.env.VITE_APP_BACK_URL as string) + '/api',
+  // timeout: 60 * 1000, // Timeout
+  // withCredentials: true, // Check cross-site Access-Control
+}
+
+const _axios = axios.create(config)
+
+const urlProtected: string[] = []
+
+_axios.interceptors.request.use(
+  function (config) {
+    // Do something before request is sent
+    if (urlProtected.some((url) => (new RegExp(url)).test(config.url as string))) {
+      (config.headers as AxiosRequestHeaders).authorization = `Bearer ${localStorage.getItem('JWT_ACCESS')}`
+    }
+    return config
+  },
+  function (error) {
+    // Do something with request error
+    return Promise.reject(error)
+  },
+)
+
+// Add a response interceptor
+_axios.interceptors.response.use(
+  function (response) {
+    // Do something with response data
+    return response
+  },
+  async function (error) {
+    /*
+    if(error.response.status === 403 && !!localStorage.getItem('JWT_ACCESS')){
+        localStorage.removeItem('JWT_ACCESS')
+        CoreService.setFlashMessage('sessionExpired', '')
+        await router.push({name: 'SignIn'})
+    }
+    */
+    return Promise.reject(error)
+  },
+)
+
+export default _axios

src/stores/useCourseStore.ts

+import { defineStore } from 'pinia'
+import type { CourseDetail, CourseList, CourseWithThumbnail } from '#/Course'
+import _axios from '@/plugins/axios'
+import type { StrapiError, StrapiObject } from '#/index'
+import type { AxiosError } from 'axios'
+
+export interface CourseStateStore {
+  courseDisplayed: CourseDetail | null;
+  courses: StrapiObject<CourseWithThumbnail>[];
+}
+
+export const useCourseStore = defineStore('Course', {
+  state: (): CourseStateStore => ({
+    courseDisplayed: null,
+    courses: [],
+  }),
+
+  actions: {
+    async loadCourses(): Promise<void> {
+      try {
+        const response = await _axios.get<CourseList>('/courses?populate[]=thumbnail')
+        this.courses = response.data.data
+      } catch (error) {
+        throw Error((error as AxiosError<StrapiError>).response?.data.error.message)
+      }
+    },
+  },
+})

src/views/HomeView.vue

 <script lang="ts" setup>
-
-import SignComponent from '@/components/Core/SignComponent.vue'</script>
+import SignComponent from '@/components/Core/SignComponent.vue'
+import { onMounted } from 'vue'
+import { useCourseStore } from '@/stores/useCourseStore'
+import { useQuasar } from 'quasar'
+
+const courseStore = useCourseStore()
+const { notify } = useQuasar()
+onMounted(async () => {
+  try {
+    await courseStore.loadCourses()
+  } catch (error) {
+    notify({
+      message: (error as Error).message,
+      type: 'negative',
+    })
+  }
+})
+</script>
 
 <template>
   <main>

types/Course.d.ts

+import { Picture } from '#/Picture'
+import { StrapiDetail, StrapiList, StrapiModel, StrapiPopulateObject } from '#/index'
+
+export interface CourseWithThumbnail extends StrapiModel {
+  id: number;
+  title: string;
+  content: string;
+  abstract: string;
+  createAd: string;
+  updatedAt: string;
+  publishedAt: string;
+  locale: string;
+  thumbnail: StrapiPopulateObject<Picture>;
+}
+
+export type CourseList = StrapiList<CourseWithThumbnail>
+export type CourseDetail = StrapiDetail<CourseWithThumbnail>

types/Picture.d.ts

+import { StrapiModel } from '#/index'
+
+export interface PictureFormat {
+  ext: string;
+  hash: string;
+  height: number;
+  mime: string;
+  name: string;
+  path: string | null;
+  size: number;
+  url: string;
+  width: number;
+}
+
+export interface Picture extends StrapiModel {
+  alternativeText: string;
+  caption: string;
+  createdAt: string;
+  ext: string;
+  formats: PictureFormat[];
+  hash: string;
+  height: number;
+  mime: string;
+  name: string;
+  previewUrl: string;
+  provider: string;
+  provider_metadata: string | null;
+  size: number;
+  updatedAt: string;
+  url: string;
+  width: number;
+}

types/index.d.ts

+export interface StrapiModel {
+  id: number;
+}
+
+export interface StrapiObject<T extends StrapiModel> {
+  id: number;
+  attributes: Omit<T, 'id'>;
+}
+
+export interface StrapiPopulateObject<T extends StrapiModel> {
+  data: StrapiObject<T>;
+}
+
+export interface StrapiDetail<T extends StrapiModel> extends StrapiPopulateObject<T> {
+  meta: {};
+}
+
+export interface StrapiList<T extends StrapiModel> {
+  data: StrapiObject<T>[];
+  meta: {
+    pagination: {
+      page: number;
+      pageCount: number;
+      pageSize: number;
+      total: number;
+    };
+  };
+}
+
+export interface StrapiError {
+  data: null | string;
+  error: {
+    details: {};
+    message: string;
+    name: string;
+    status: number;
+  };
+}