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;

yoga-app/src/components/about.us.component.tsx

@@ -1,6 +1,14 @@
 import YogaImageComponent from "@/components/yoga.image.component";
 
-const AboutUsComponent = () =>{
+export interface Props{
+    title: string;
+    header: string;
+    description: string;
+    content: string;
+    buttonText: string,
+    buttonUrl: string
+}
+const AboutUsComponent = ({title,header,description,content,buttonText,buttonUrl}: Props) =>{
     return (
         <section className="aboutus_section">
             <div className="container">
@@ -18,15 +26,15 @@ const AboutUsComponent = () =>{
                     </div>
                     <div className="col-lg-5 col-md-5 col-sm-12 col-xs-12" data-aos="fade-right">
                         <div className="aboutus_content">
-                            <h5>About us</h5>
-                            <h2>Take Your Yoga to the Next Level</h2>
-                            <p>Quis autem vel eum iure reprehenderit qui in eao voluptate velit esse quam nihil molestiae consequatur vel illum.</p>
+                            <h5>{title}</h5>
+                            <h2>{header}</h2>
+                            <p>{description}</p>
                             <div className="aboutus_line_wrapper">
-                                <h6>Modi tempora incidunt ut labore dolore magnam aliquam auerat volutaem.</h6>
+                                <h6>{content}</h6>
                                 <figure className="mb-0 purple_line"><YogaImageComponent src="/assets/images/aboutus_line.png" alt="" className="img-fluid" /></figure>
                             </div>
                             <div className="btn_wrapper">
-                                <a href="/about" className="text-decoration-none get_started_btn">Get Started</a>
+                                <a href={buttonUrl} className="text-decoration-none get_started_btn">{buttonText}</a>
                             </div>
                         </div>
                     </div>

yoga-app/src/components/nav.component.tsx

@@ -36,7 +36,7 @@ const Nav: FC<Props> = ({menuItems}:Props) => {
                         </button>
                         <div className="collapse navbar-collapse" id="navbarSupportedContent">
                             <ul className="navbar-nav">
-                                {menuItems.map( menuItem => <MenuItemComponent menuItem={menuItem} />)}
+                                {menuItems.map( (menuItem,index) => <MenuItemComponent key={"nav"+menuItem.href+"_"+index} menuItem={menuItem} />)}
                             </ul>
                         </div>
                     </nav>
@@ -71,7 +71,7 @@ const MenuItemComponent: FC<MenuItemProps>  = ({menuItem, dropdownItem}: MenuIte
             <div className="dropdown-menu drop-down-content">
                 <ul className="list-unstyled drop-down-pages">
                     {
-                        menuItem.children.map(item => <MenuItemComponent menuItem={item}  dropdownItem={true}/>)
+                        menuItem.children.map((item,index) => <MenuItemComponent key={"child_"+item.href+"_"+index} menuItem={item}  dropdownItem={true}/>)
                     }
                 </ul>
             </div>

yoga-app/src/components/our.services.component.tsx

@@ -1,16 +1,20 @@
 import YogaImageComponent from "@/components/yoga.image.component";
 
-const OurServiceComponent = () => {
+export interface Props{
+    title: string;
+    header: string;
+    description: string;
+}
+const OurServiceComponent = ({title,header,description}: Props) => {
     return (
         <section className="services_section">
             <div className="container">
                 <div className="row">
                     <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                         <div className="services_content">
-                            <h5>Our Services</h5>
-                            <h2>Practice Whereever You Want Whenever You Need </h2>
-                            <p>Taciti fames lacinia orci finibus metus elit tempus faucibus urna nunc dui rhoncus
-                                aibendum vea porttitor volutrat felis massa feugiat</p>
+                            <h5>{title}</h5>
+                            <h2>{header} </h2>
+                            <p>{description}</p>
                         </div>
                     </div>
                 </div>

yoga-app/src/components/subHeader.component.tsx

@@ -1,8 +1,13 @@
 import YogaImageComponent from "@/components/yoga.image.component";
 import Nav from "@/components/nav.component";
 import {MAIN_MENU} from "@/util/const";
+import {HeaderB} from "@/types/generated-strapi-interfaces/components/yoga-site/HeaderB";
 
-const SubHeaderComponent = () =>{
+
+export interface Props extends HeaderB{
+}
+
+const SubHeaderComponent = ({header1,header2,description}: Props) =>{
     return (
         <div className="sub-banner-section">
              <Nav menuItems={MAIN_MENU} />
@@ -11,8 +16,8 @@ const SubHeaderComponent = () =>{
                     <div className="row">
                         <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                             <div className="banner-section-content">
-                                <h1 data-aos="fade-up">About Us</h1>
-                                <p data-aos="fade-right">Duis aute irure dolor in reprehenderit in volurate velit cillum nulla pariatur nostrud exercitation.</p>
+                                <h1 data-aos="fade-up">{header1}</h1>
+                                <p data-aos="fade-right">{description}</p>
                                 <div className="btn_wrapper">
                                     <span className="sub_home_span">Home </span><i className="fa-solid fa-angles-right" aria-hidden="true"></i><span className="sub_span"> About</span>
                                 </div>

yoga-app/src/types/generated-strapi-interfaces/api/about.ts

@@ -1,34 +1,55 @@
 // Interface automatically generated by schemas-to-ts
 
-import { Media } from '../components/shared/Media';
-import { Media_Plain } from '../components/shared/Media';
-import { AdminPanelRelationPropertyModification } from '../common/AdminPanelRelationPropertyModification';
+import { HeaderB } from '../components/yoga-site/HeaderB';
+import { OurServicesComponent } from '../components/yoga-site/OurServicesComponent';
+import { AboutUs } from '../components/yoga-site/AboutUs';
+import { OurSpecialitiesComponent } from '../components/yoga-site/OurSpecialitiesComponent';
+import { HeaderB_Plain } from '../components/yoga-site/HeaderB';
+import { OurServicesComponent_Plain } from '../components/yoga-site/OurServicesComponent';
+import { AboutUs_Plain } from '../components/yoga-site/AboutUs';
+import { OurSpecialitiesComponent_Plain } from '../components/yoga-site/OurSpecialitiesComponent';
+import { HeaderB_NoRelations } from '../components/yoga-site/HeaderB';
+import { OurServicesComponent_NoRelations } from '../components/yoga-site/OurServicesComponent';
+import { AboutUs_NoRelations } from '../components/yoga-site/AboutUs';
+import { OurSpecialitiesComponent_NoRelations } from '../components/yoga-site/OurSpecialitiesComponent';
 
 export interface About {
   id: number;
   attributes: {
-    createdAt: Date;    updatedAt: Date;    publishedAt?: Date;    title?: string;
-    description?: any;
-    image?: { data: Media };
+    createdAt: Date;    updatedAt: Date;    publishedAt?: Date;    header?: HeaderB;
+    ourServices: OurServicesComponent;
+    aboutUs: AboutUs;
+    ourSpecialities?: OurSpecialitiesComponent;
+    locale: string;
+    localizations?: { data: About[] };
   };
 }
 export interface About_Plain {
   id: number;
-  createdAt: Date;  updatedAt: Date;  publishedAt?: Date;  title?: string;
-  description?: any;
-  image?: Media_Plain;
+  createdAt: Date;  updatedAt: Date;  publishedAt?: Date;  header?: HeaderB_Plain;
+  ourServices: OurServicesComponent_Plain;
+  aboutUs: AboutUs_Plain;
+  ourSpecialities?: OurSpecialitiesComponent_Plain;
+  locale: string;
+  localizations?: About_Plain[];
 }
 
 export interface About_NoRelations {
   id: number;
-  createdAt: Date;  updatedAt: Date;  publishedAt?: Date;  title?: string;
-  description?: any;
-  image?: number;
+  createdAt: Date;  updatedAt: Date;  publishedAt?: Date;  header?: HeaderB_NoRelations;
+  ourServices: OurServicesComponent_NoRelations;
+  aboutUs: AboutUs_NoRelations;
+  ourSpecialities?: OurSpecialitiesComponent_NoRelations;
+  locale: string;
+  localizations?: About[];
 }
 
 export interface About_AdminPanelLifeCycle {
   id: number;
-  createdAt: Date;  updatedAt: Date;  publishedAt?: Date;  title?: string;
-  description?: any;
-  image?: AdminPanelRelationPropertyModification<Media_Plain>;
+  createdAt: Date;  updatedAt: Date;  publishedAt?: Date;  header?: HeaderB_Plain;
+  ourServices: OurServicesComponent_Plain;
+  aboutUs: AboutUs_Plain;
+  ourSpecialities?: OurSpecialitiesComponent_Plain;
+  locale: string;
+  localizations?: About[];
 }

yoga-app/src/types/generated-strapi-interfaces/components/shared/TitleDescription.ts

@@ -0,0 +1,16 @@
+// Interface automatically generated by schemas-to-ts
+
+export interface TitleDescription {
+  title?: string;
+  description?: string;
+}
+export interface TitleDescription_Plain {
+  title?: string;
+  description?: string;
+}
+
+export interface TitleDescription_NoRelations {
+  title?: string;
+  description?: string;
+}
+

yoga-app/src/types/generated-strapi-interfaces/components/yoga-site/AboutUs.ts

@@ -0,0 +1,28 @@
+// Interface automatically generated by schemas-to-ts
+
+export interface AboutUs {
+  title?: string;
+  header?: string;
+  description?: string;
+  content?: string;
+  buttonLabel?: string;
+  buttonLink?: string;
+}
+export interface AboutUs_Plain {
+  title?: string;
+  header?: string;
+  description?: string;
+  content?: string;
+  buttonLabel?: string;
+  buttonLink?: string;
+}
+
+export interface AboutUs_NoRelations {
+  title?: string;
+  header?: string;
+  description?: string;
+  content?: string;
+  buttonLabel?: string;
+  buttonLink?: string;
+}
+

yoga-app/src/types/generated-strapi-interfaces/components/yoga-site/HeaderB.ts

@@ -0,0 +1,19 @@
+// Interface automatically generated by schemas-to-ts
+
+export interface HeaderB {
+  header1?: string;
+  header2?: string;
+  description?: string;
+}
+export interface HeaderB_Plain {
+  header1?: string;
+  header2?: string;
+  description?: string;
+}
+
+export interface HeaderB_NoRelations {
+  header1?: string;
+  header2?: string;
+  description?: string;
+}
+

yoga-app/src/types/generated-strapi-interfaces/components/yoga-site/OurServicesComponent.ts

@@ -0,0 +1,19 @@
+// Interface automatically generated by schemas-to-ts
+
+export interface OurServicesComponent {
+  title?: string;
+  header?: string;
+  description?: string;
+}
+export interface OurServicesComponent_Plain {
+  title?: string;
+  header?: string;
+  description?: string;
+}
+
+export interface OurServicesComponent_NoRelations {
+  title?: string;
+  header?: string;
+  description?: string;
+}
+

yoga-app/src/types/generated-strapi-interfaces/components/yoga-site/OurSpecialitiesComponent.ts

@@ -0,0 +1,47 @@
+// Interface automatically generated by schemas-to-ts
+
+import { TitleDescription } from '../shared/TitleDescription';
+import { TitleDescription_Plain } from '../shared/TitleDescription';
+import { TitleDescription_NoRelations } from '../shared/TitleDescription';
+
+export interface OurSpecialitiesComponent {
+  title?: string;
+  header?: string;
+  description?: string;
+  specialityLeft1?: TitleDescription;
+  specialityLeft2?: TitleDescription;
+  specialityLeft3?: TitleDescription;
+  specialityLeft4?: TitleDescription;
+  specialityRight1?: TitleDescription;
+  specialityRight2?: TitleDescription;
+  specialityRight3?: TitleDescription;
+  specialityRight4?: TitleDescription;
+}
+export interface OurSpecialitiesComponent_Plain {
+  title?: string;
+  header?: string;
+  description?: string;
+  specialityLeft1?: TitleDescription_Plain;
+  specialityLeft2?: TitleDescription_Plain;
+  specialityLeft3?: TitleDescription_Plain;
+  specialityLeft4?: TitleDescription_Plain;
+  specialityRight1?: TitleDescription_Plain;
+  specialityRight2?: TitleDescription_Plain;
+  specialityRight3?: TitleDescription_Plain;
+  specialityRight4?: TitleDescription_Plain;
+}
+
+export interface OurSpecialitiesComponent_NoRelations {
+  title?: string;
+  header?: string;
+  description?: string;
+  specialityLeft1?: TitleDescription_NoRelations;
+  specialityLeft2?: TitleDescription_NoRelations;
+  specialityLeft3?: TitleDescription_NoRelations;
+  specialityLeft4?: TitleDescription_NoRelations;
+  specialityRight1?: TitleDescription_NoRelations;
+  specialityRight2?: TitleDescription_NoRelations;
+  specialityRight3?: TitleDescription_NoRelations;
+  specialityRight4?: TitleDescription_NoRelations;
+}
+

yoga-app/src/util/i18n.util.ts

@@ -0,0 +1,21 @@
+export interface LocalizedObject<T> {
+    locale: string;
+    localizations?: LocalizedObject<T>[];
+}
+
+export function getLocalizedObject<T>(localizedObject: LocalizedObject<T>, locale: string = "hu"): T {
+    const defaultObject = localizedObject;
+    if ( defaultObject.locale == locale ){
+        return defaultObject as T;
+    }
+    if (localizedObject && localizedObject.localizations) {
+        for (let i = 0; i < (localizedObject?.localizations?.length || 0); i++) {
+            const obj: LocalizedObject<T> = localizedObject.localizations[i];
+            if ( obj.locale == locale ){
+                return obj as T;
+            }
+        }
+    }
+    return defaultObject as T;
+
+}