strap about page custom query

yoga-app/src/app/about/page.tsx

@@ -11,13 +11,26 @@ import FooterComponent from "@/components/footer.component";
 import SubscribeComponent from "@/components/subscribe.component";
 import SubHeaderComponent from "@/components/subHeader.component";
 import BootstrapComponent from "@/components/bootstrap.component";
+import webApi from "@/app/api/web-client/web-api";
+import aboutUsComponent from "@/components/about.us.component";
+
+export default async function About() {
+    const pageData = await webApi.getAboutPage();
+
+    const {header,ourServices, aboutUs} = pageData;
 
-export default function About() {
     return (
         <>
-            <SubHeaderComponent />
-            <OurServicesComponent />
-            <AboutUsComponent />
+            <SubHeaderComponent header1={header?.header1} header2={header?.header2} description={header?.description}/>
+            <OurServicesComponent title={ourServices?.title!} header={ourServices?.header!} description={ourServices?.description!}  />
+            <AboutUsComponent
+                title={aboutUs.title!}
+                header={aboutUs.header!}
+                description={aboutUs.description!}
+                content={aboutUs.content!}
+                buttonText={aboutUs.buttonLabel!}
+                buttonUrl={aboutUs.buttonLink!}
+            />
             <OurSpecialitiesComponent />
             <ContactUsComponent />
             <PricingComponent />

yoga-app/src/app/api/http-client.ts

@@ -0,0 +1,20 @@
+
+
+class HttpClient{
+
+    public async  httpGet(url: string):Promise<Response>{
+        const response = await fetch(url,{
+            headers: {
+                'Content-type': 'application-json'
+            }
+        });
+        return response;
+
+    }
+
+}
+
+
+const client: HttpClient = new HttpClient();
+
+export default client;

yoga-app/src/app/api/strapi/strapi-api.ts

@@ -1,7 +1,20 @@
+import {About_Plain} from "@/types/generated-strapi-interfaces/api/about";
+import strapiClient from "@/app/api/strapi/strapi-client";
+import {Payload} from "@/types/generated-strapi-interfaces/common/Payload";
+import {StrapiQuery} from "@/app/api/strapi/strapi-query";
 
 
 class StrapiApi{
-    constructor() {
+    constructor( ) {
+    }
+
+    public async getAboutPage(): Promise<About_Plain>{
+        const payload =  await strapiClient.httpGetJson<About_Plain>(
+            StrapiQuery.aboutUrl
+
+        );
+        return payload?.data;
+
     }
 
     public getHomePage(){
@@ -11,4 +24,4 @@ class StrapiApi{
 }
 
 const api = new StrapiApi();
-export default api;
+export default api;

yoga-app/src/app/api/strapi/strapi-client.ts

@@ -0,0 +1,40 @@
+import httpClient from "@/app/api/http-client";
+import {Payload} from "@/types/generated-strapi-interfaces/common/Payload";
+
+const STRAPI_URL =  process.env.STRAPI_URL;
+
+class StrapiClient{
+
+    constructor(private strapiUrl: string = "http://localhost:1337") {
+    }
+    public async  httpGet(path: string){
+        return await httpClient.httpGet(this.strapiUrl + path);
+    }
+    public async httpGetJson<T>(url: string): Promise<Payload<T>>{
+        const response =  await this.httpGet(url);
+        return await response.json();
+    }
+
+    public async findContentType<T>(contentType: string,options?: FindContentOptions): Promise<Payload<T>>{
+        const searchParams = new URLSearchParams();
+        if ( options?.populateAll ){
+            searchParams.append("populate","*");
+        }
+        if (options?.localeAll){
+            searchParams.append("_locale","all");
+        }
+
+
+
+        const response =  await this.httpGet("/api/"+contentType+"?"+searchParams.toString());
+        return await response.json();
+    }
+}
+
+export interface FindContentOptions{
+    populateAll?: boolean;
+    localeAll?: boolean;
+}
+
+const client = new StrapiClient(STRAPI_URL);
+export default client;

yoga-app/src/app/api/strapi/strapi-query.ts

@@ -0,0 +1,3 @@
+export const StrapiQuery = {
+    aboutUrl: "/api/about?populate[header][fields][0]=header1&populate[header][fields][1]=description&populate[ourServices][fields][0]=*&populate[aboutUs][fields][0]=*&populate[ourSpecialities][fields][0]=*&populate[ourSpecialities][populate][specialityLeft1][fields][0]=*&populate[ourSpecialities][populate][specialityLeft2][fields][0]=*&populate[ourSpecialities][populate][specialityLeft3][fields][0]=*&populate[ourSpecialities][populate][specialityLeft4][fields][0]=*&populate[ourSpecialities][populate][specialityRight1][fields][0]=*&populate[ourSpecialities][populate][specialityRight2][fields][0]=*&populate[ourSpecialities][populate][specialityRight3][fields][0]=*&populate[ourSpecialities][populate][specialityRight4][fields][0]=*"
+}

yoga-app/src/app/api/web-client/web-api.ts

@@ -0,0 +1,20 @@
+
+import {About_Plain} from '@/types/generated-strapi-interfaces/api/about';
+import strapiApi from "@/app/api/strapi/strapi-api";
+
+
+class WebApi {
+
+    public getHomePage(){
+
+    }
+
+    public async getAboutPage(): Promise<About_Plain> {
+        return await strapiApi.getAboutPage();
+    }
+}
+
+
+const client = new WebApi();
+
+export default client;

yoga-app/src/app/api/web-client/web-client.ts

@@ -1,15 +0,0 @@
-
-
-
-class WebClient {
-
-    public getHomePage(){
-
-    }
-
-}
-
-
-const client = new WebClient();
-
-export default client;