fix fetch

backend/go.mod

@@ -1,6 +1,6 @@
 module pocketbase
 
-go 1.24.0
+go 1.23.2
 
 require (
 	github.com/chai2010/webp v1.4.0

components/section/MainBlocks.vue

@@ -78,9 +78,7 @@ type Component = {
   ];
 };
 
-const props = defineProps<{
+defineProps<{
   component: Component;
-  data: Object;
-  infoData: Object;
 }>();
 </script>

composables/useMyFetch.ts

@@ -1,7 +1,7 @@
 import { ofetch } from "ofetch";
 
 export interface RequestOptions<T> extends RequestInit {
-  onError?: (error: Error, statusCode: number) => void;
+  onErrorOccured?: (error: Error, statusCode: number) => void;
   onSuccess?: (data: T, statusCode: number) => void;
   onStart?: () => void;
 }
@@ -21,10 +21,7 @@ export interface RequestOptions<T> extends RequestInit {
  * @example
  * const { data } = useMyFetch<{ name: string }>('/api/user')
  */
-export const useMyFetch = async <T>(
-  url: string,
-  options?: RequestOptions<T>
-): Promise<T | undefined> => {
+export const useMyFetch = async <T>(url: string, options?: RequestOptions<T>): Promise<T > => {
   if (options?.onStart) options.onStart();
   let response = null;
   try {
@@ -35,8 +32,7 @@ export const useMyFetch = async <T>(
     options.credentials = "include";
 
     if (import.meta.server) {
-      const api_uri =
-        event?.node.req.headers["api-uri"] || "http://localhost:4000";
+      const api_uri = event?.node.req.headers["api-uri"] || "http://localhost:4000";
       url = api_uri + url;
       options.headers = event?.headers;
     }
@@ -50,23 +46,23 @@ export const useMyFetch = async <T>(
     }
 
     // handle errors if any
-    if (!response.ok && typeof options.onError == "function") {
-      options.onError(new Error(response.statusText), response.status);
+    if (!response.ok && typeof options.onErrorOccured == "function") {
+      options.onErrorOccured(new Error(response.statusText), response.status);
     }
 
     // handle success to be able clearly marked that request has finished
     if (response.ok && typeof options.onSuccess == "function") {
-      options.onSuccess(response._data.data, response.status);
+      options.onSuccess( response._data, response.status);
     }
 
     return response._data as T;
   } catch (e) {
     // handle errors if any
-    if (typeof options?.onError == "function") {
-      options.onError(e as Error, response?.status || 500);
+    if (typeof options?.onErrorOccured == "function") {
+      options.onErrorOccured(e as Error, response?.status || 500);
     } else {
       console.error(e);
     }
-    return undefined;
+    return {} as T;
   }
 };

layouts/default.vue

@@ -6,11 +6,12 @@
       class="flex-1 py-[25px] sm:py-[55px] md:py-[75px] space-y-[55px] sm:space-y-[75px] md:space-y-[100px] text-inter">
       <slot />
     </div>
-    <FooterBlock />
+    <!-- <FooterBlock /> -->
   </div>
 </template>
 
 <script setup lang="ts">
+// import FooterBlock from "~/components/section/FooterBlock.vue";
 useHead({
   link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.png" }],
 });

nuxt.config.ts

@@ -42,6 +42,9 @@ export default defineNuxtConfig({
       watch: {
         ignored: ["**/backend/pb_data/**"],
       },
+      hmr: {
+        clientPort: 3000, // useful if proxying
+      }
     },
   },
   typescript: {

stores/menuStore.ts

@@ -1,8 +1,11 @@
 import { usePB } from "~/composables/usePB";
 import type {
-  CountryList,
+  Country,
   Currencies,
+  Currency,
   FooterListResponse,
+  GenericResponse,
+  GenericResponseItems,
   MenuListResponse,
   PBFooterItem,
   PBMenuItem,
@@ -10,6 +13,7 @@ import type {
 } from "~/types";
 import { useStore } from "./store";
 import { ref, watch } from "vue";
+import { useMyFetch } from "#imports";
 
 function buildTreeRecursive(
   data: (PBMenuItem | UIMenuItem)[],
@@ -41,8 +45,8 @@ export const useMenuStore = defineStore("menuStore", () => {
   const menuItems = ref<MenuListResponse>();
 
   const footerItems = ref<FooterListResponse>();
-  const countryList = ref<CountryList[]>();
-  const currencies = ref<Currencies[]>();
+  const countryList = ref<Country[]>();
+  const currencies = ref<Currency[]>();
 
   // curr/country
   const selectedCountry = ref();
@@ -87,8 +91,8 @@ export const useMenuStore = defineStore("menuStore", () => {
 
   const getCountryList = async () => {
     try {
-      const res = await fetch(
-        `http://127.0.0.1:4000/api/public/country/list`,
+      const {data} = await useMyFetch<GenericResponse<Country[]>>(
+        `/api/public/country/list`,
         {
           headers: {
             "Content-Type": "application/json",
@@ -96,12 +100,12 @@ export const useMenuStore = defineStore("menuStore", () => {
         }
       );
 
-      if (!res.ok) {
-        throw new Error(`HTTP error: ${res.status}`);
-      }
+      // if (!res.ok) {
+      //   throw new Error(`HTTP error: ${res.status}`);
+      // }
 
-      const data = await res.json();
-      countryList.value = data.data
+      // const data = await res.json();
+      countryList.value = data
       if (countryList.value)
         selectedPhoneCountry.value = countryList.value[0]
 
@@ -112,21 +116,25 @@ export const useMenuStore = defineStore("menuStore", () => {
 
   const getCurrencies = async () => {
     try {
-      const res = await fetch(
-        `http://127.0.0.1:4000/api/public/currencies`,
+      const {data} = await useMyFetch<GenericResponseItems<Currency[]>>(
+        `/api/public/currencies`,
         {
           headers: {
             "Content-Type": "application/json",
           },
+          onErrorOccured: (_, status) => { throw new Error(`HTTP error: ${status}`) },
         }
       );
 
-      if (!res.ok) {
-        throw new Error(`HTTP error: ${res.status}`);
-      }
+      // if (!res.ok) {
+      //   throw new Error(`HTTP error: ${res.status}`);
+      // }
+
+      // const data = await res.json();
+      currencies.value = data.items
+
+      // console.log(data.items, "data");
       
-      const data = await res.json();
-      currencies.value = data.data.items
     } catch (error) {
       console.error("getList error:", error);
     }

stores/productStore.ts

@@ -1,24 +1,30 @@
+import { NuxtErrorBoundary } from "#components";
+import { useMyFetch } from "#imports";
+import type { GenericResponse, UserCart } from "~/types";
+
 export const useProductStore = defineStore("productStore", () => {
   const productList = ref();
   const modules = ref();
 
   async function getList(count: number, categoryId = 1) {
     try {
-      const res = await fetch(
-        `http://127.0.0.1:4000/api/public/products/category/${categoryId}?p=1&elems=${count}`,
+      const {data} = await useMyFetch<GenericResponse<object>>(
+        `/api/public/products/category/${categoryId}?p=1&elems=${count}`,
         {
           headers: {
             "Content-Type": "application/json",
           },
+          onErrorOccured: (_, status) => { throw  new Error(`HTTP error: ${status}`) },
         }
       );
+console.log(data);
 
-      if (!res.ok) {
-        throw new Error(`HTTP error: ${res.status}`);
-      }
+      // if (!res.ok) {
+      //   throw new Error(`HTTP error: ${res.status}`);
+      // }
 
-      const data = await res.json();
-      productList.value = data.data.items;
+      // const data = await res.json();
+      // productList.value = data.data.items;
     } catch (error) {
       console.error("getList error:", error);
     }
@@ -72,21 +78,22 @@ export const useProductStore = defineStore("productStore", () => {
     }
   }
 
-  const cart = ref();
+  const cart = ref({} as UserCart);
   async function getCart() {
     try {
-      const res = await fetch(`http://127.0.0.1:4000/api/public/user/cart`, {
+      const {data} = await useMyFetch<GenericResponse<UserCart>>(`/api/public/user/cart`, {
         headers: {
           "Content-Type": "application/json",
         },
+        onErrorOccured: (_, status) => { throw new Error(`HTTP error: ${status}`) },
       });
 
-      if (!res.ok) {
-        throw new Error(`HTTP error: ${res.status}`);
-      }
+      // if (!res.ok) {
+      //   throw new Error(`HTTP error: ${res.status}`);
+      // }
 
-      const data = await res.json();
-      console.log(data);
+      // const data = await res.json();
+      // console.log(data);
 
       cart.value = data;
     } catch (error) {

stores/store.ts

@@ -1,5 +1,6 @@
+import { useMyFetch } from "#imports";
 import { usePB } from "~/composables/usePB";
-import type { componentsListType, PBPageItem } from "~/types";
+import type { componentsListType, GenericResponse, PBPageItem, PlanPrediction } from "~/types";
 // import { useI18n } from "vue-i18n";
 
 export const useStore = defineStore("store", () => {
@@ -10,7 +11,7 @@ export const useStore = defineStore("store", () => {
   // calculator
   const monthlySavings = ref(137);
   const storagePeriod = ref(10);
-  const totalInvestment = ref()
+  const totalInvestment:Ref<number> = ref(0)
   const minValue = ref()
 
   // login
@@ -71,21 +72,17 @@ export const useStore = defineStore("store", () => {
 
   async function getCalculator() {
     try {
-      const res = await fetch(
-        `http://127.0.0.1:4000/api/public/plan-prediction/easy/calculate?monthly_deposit=${monthlySavings.value}&years=${storagePeriod.value}`,
+      const {data} = await useMyFetch<GenericResponse<PlanPrediction>>(
+        `/api/public/plan-prediction/easy/calculate?monthly_deposit=${monthlySavings.value}&years=${storagePeriod.value}`,
         {
           headers: {
             "Content-Type": "application/json",
           },
+          onErrorOccured: (_, status) => { throw new Error(`HTTP error: ${status}`) },
         }
       );
 
-      if (!res.ok) {
-        throw new Error(`HTTP error: ${res.status}`);
-      }
-
-      const data = await res.json();
-      totalInvestment.value = data.data.total_investement_value
+      totalInvestment.value = data.total_investement_value
 
     } catch (error) {
       console.error("getList error:", error);
@@ -94,21 +91,22 @@ export const useStore = defineStore("store", () => {
 
   async function getMinValue() {
     try {
-      const res = await fetch(
-        'http://127.0.0.1:4000/api/public/plan-prediction/free/minimum',
+      const {data} = await useMyFetch<GenericResponse<number>>(
+        '/api/public/plan-prediction/free/minimum',
         {
           headers: {
             "Content-Type": "application/json",
           },
+          onErrorOccured: (_, status) => { throw new Error(`HTTP error: ${status}`) },
         }
       );
 
-      if (!res.ok) {
-        throw new Error(`HTTP error: ${res.status}`);
-      }
+      // if (!res.ok) {
+      //   throw new Error(`HTTP error: ${res.status}`);
+      // }
 
-      const data = await res.json();
-      minValue.value = data.data
+      // const data = await res.json();
+      minValue.value = data
 
     } catch (error) {
       console.error("getList error:", error);

taskfile.yml

@@ -69,29 +69,29 @@ tasks:
     desc: "build and watch frontend in dev mode"
     cmds:
       - |
-        pnpm run dev
+        bun run dev
 
   preview_front:
     aliases: [pf]
     desc: "build and preview frontend"
     cmds:
       - |
-        pnpm run build && pnpm run preview
+        bun run build && bun run preview
 
   rebuild_front:
     aliases: [rf]
     desc: "remove all and install all packages"
     cmds:
       - |
-        rm -rf ./node_modules ./pnpm-lock.yaml ./.nuxt ./.output
-        pnpm install
+        rm -rf ./node_modules ./bun-lock ./.nuxt ./.output
+        bun install
 
   # build_docker_image:
   #   aliases: [bdi]
   #   desc: "build docker image"
   #   cmds:
   #     - |
-  #       pnpm run build
+  #       bun run build
   #       task compile_gnu
   #       cat <<EOF > temp.Dockerfile
   #       FROM node:slim

types/PlanPrediction.ts

@@ -0,0 +1,40 @@
+export interface PlanPrediction {
+  total_investement_value: number
+  total_input_price_increase: number
+  total_input_price_increase_covered_pieces: number
+  months_spent_on_plan: number
+  money_spent: number
+  bought_pieces: number
+  annual_investment_return: number
+  investment_piece: InvestmentPiece
+  max_pieces_in_package: number
+  period_to_first_piece: PeriodToFirstPiece
+}
+
+export interface InvestmentPiece {
+  referenced_product_id: number
+  name: string
+  cover_picture_uuid: string
+  weight: string
+  active: boolean
+  price: number
+  price_per_gram: number
+  currency_iso: string
+  currency_conversion_rate: string
+  max_comission_value: number
+  average_input_price_increase: number
+  features: Feature[]
+}
+
+export interface Feature {
+  feature_id: number
+  feature: string
+  value_id: number
+  value: string
+}
+
+export interface PeriodToFirstPiece {
+  years: number
+  months: number
+  days: number
+}

types/index.ts

@@ -1,3 +1,5 @@
+import type { DefineComponent } from "vue";
+
 export interface ListResponse {
   page: number;
   perPage: number;
@@ -69,7 +71,7 @@ export interface PBPageItem {
   section_name: string;
 }
 
-import type { DefineComponent } from "vue";
+
 export interface SectionLangData {
   title: string;
   description: string;
@@ -97,12 +99,12 @@ export type componentsListType = {
 };
 
 // menuStore
-export type CountryList = {
-  call_prefix: string;
-  currency_iso_code: string;
-  iso_code: string;
-  name: string;
-}
+// export type CountryList = {
+//   call_prefix: string;
+//   currency_iso_code: string;
+//   iso_code: string;
+//   name: string;
+// }
 
 export type Countries = {
   call_prefix: string;
@@ -157,3 +159,47 @@ export type ProductType = {
   cart_item_id?: number
   product_id?: number
 }
+
+
+export interface Country {
+  iso_code: string
+  currency_iso_code: string
+  call_prefix: string
+  need_postcode: boolean
+  postcode_format: string
+  is_default: boolean
+  active: boolean
+  name: string
+}
+
+export interface Currency {
+  iso_code: string
+  name: string
+  UpdatedAt: string
+  iso_code_num: number
+  precision: number
+  sign: string
+  active: boolean
+  suffix: boolean
+}
+
+export interface UserCart {
+  id: number
+  checkout_in_progress: boolean
+  total_value: number
+  currency_iso: string
+}
+
+export interface GenericResponse<Data> {
+  data: Data 
+  message?: string
+  status: number
+}
+
+export interface GenericResponseItems<Data> {
+  data: { items: Data , items_count: number }
+  message?: string
+  status: number
+}
+
+export type { InvestmentPiece, PlanPrediction, PeriodToFirstPiece} from './PlanPrediction'