From 741dd195881907f4899a843340dbdf17ad4db69a Mon Sep 17 00:00:00 2001 From: Schneider Roland Date: Sun, 12 Jan 2025 21:56:22 +0100 Subject: [PATCH] strap about page custom query --- api.http | 7 +- yoga-app/src/app/about/page.tsx | 21 +++- yoga-app/src/app/api/http-client.ts | 20 ++++ yoga-app/src/app/api/strapi/strapi-api.ts | 17 ++- yoga-app/src/app/api/strapi/strapi-client.ts | 40 +++++++ yoga-app/src/app/api/strapi/strapi-query.ts | 3 + yoga-app/src/app/api/web-client/web-api.ts | 20 ++++ yoga-app/src/app/api/web-client/web-client.ts | 15 --- .../src/components/about.us.component.tsx | 20 +++- yoga-app/src/components/nav.component.tsx | 4 +- .../src/components/our.services.component.tsx | 14 ++- .../src/components/subHeader.component.tsx | 11 +- .../generated-strapi-interfaces/api/about.ts | 51 ++++++--- .../components/shared/TitleDescription.ts | 16 +++ .../components/yoga-site/AboutUs.ts | 28 +++++ .../components/yoga-site/HeaderB.ts | 19 ++++ .../yoga-site/OurServicesComponent.ts | 19 ++++ .../yoga-site/OurSpecialitiesComponent.ts | 47 ++++++++ yoga-app/src/util/i18n.util.ts | 21 ++++ yoga-cms/auto-gen-queries/about.json | 42 +++++++ yoga-cms/auto-gen-queries/about.txt | 1 + yoga-cms/config/plugins.ts | 5 + .../generated-strapi-interfaces/api/about.ts | 51 ++++++--- .../components/shared/TitleDescription.ts | 16 +++ .../components/yoga-site/AboutUs.ts | 28 +++++ .../components/yoga-site/HeaderB.ts | 19 ++++ .../yoga-site/OurServicesComponent.ts | 19 ++++ .../yoga-site/OurSpecialitiesComponent.ts | 47 ++++++++ .../api/about/content-types/about/schema.json | 59 +++++++--- .../components/shared/title-description.json | 15 +++ .../src/components/yoga-site/about-us.json | 27 +++++ .../src/components/yoga-site/header-b.json | 19 ++++ .../yoga-site/our-services-component.json | 19 ++++ .../yoga-site/our-specialities-component.json | 59 ++++++++++ yoga-cms/types/generated/components.d.ts | 103 ++++++++++++++++++ yoga-cms/types/generated/contentTypes.d.ts | 45 +++++++- 36 files changed, 878 insertions(+), 89 deletions(-) create mode 100644 yoga-app/src/app/api/http-client.ts create mode 100644 yoga-app/src/app/api/strapi/strapi-client.ts create mode 100644 yoga-app/src/app/api/strapi/strapi-query.ts create mode 100644 yoga-app/src/app/api/web-client/web-api.ts delete mode 100644 yoga-app/src/app/api/web-client/web-client.ts create mode 100644 yoga-app/src/types/generated-strapi-interfaces/components/shared/TitleDescription.ts create mode 100644 yoga-app/src/types/generated-strapi-interfaces/components/yoga-site/AboutUs.ts create mode 100644 yoga-app/src/types/generated-strapi-interfaces/components/yoga-site/HeaderB.ts create mode 100644 yoga-app/src/types/generated-strapi-interfaces/components/yoga-site/OurServicesComponent.ts create mode 100644 yoga-app/src/types/generated-strapi-interfaces/components/yoga-site/OurSpecialitiesComponent.ts create mode 100644 yoga-app/src/util/i18n.util.ts create mode 100644 yoga-cms/auto-gen-queries/about.json create mode 100644 yoga-cms/auto-gen-queries/about.txt create mode 100644 yoga-cms/generated-strapi-interfaces/components/shared/TitleDescription.ts create mode 100644 yoga-cms/generated-strapi-interfaces/components/yoga-site/AboutUs.ts create mode 100644 yoga-cms/generated-strapi-interfaces/components/yoga-site/HeaderB.ts create mode 100644 yoga-cms/generated-strapi-interfaces/components/yoga-site/OurServicesComponent.ts create mode 100644 yoga-cms/generated-strapi-interfaces/components/yoga-site/OurSpecialitiesComponent.ts create mode 100644 yoga-cms/src/components/shared/title-description.json create mode 100644 yoga-cms/src/components/yoga-site/about-us.json create mode 100644 yoga-cms/src/components/yoga-site/header-b.json create mode 100644 yoga-cms/src/components/yoga-site/our-services-component.json create mode 100644 yoga-cms/src/components/yoga-site/our-specialities-component.json diff --git a/api.http b/api.http index b50ba5b..6a48eba 100644 --- a/api.http +++ b/api.http @@ -8,6 +8,11 @@ Accept: application/json ### GET request with a header -GET {{domain}}/api/about?locale=hu&populate=* +GET {{domain}}/api/about?populate=deep +Accept: application/json +#Authorization: Bearer {{token}} + +### GET request with a header +GET {{domain}}/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]=* Accept: application/json #Authorization: Bearer {{token}} diff --git a/yoga-app/src/app/about/page.tsx b/yoga-app/src/app/about/page.tsx index 5c465e0..30ba47a 100644 --- a/yoga-app/src/app/about/page.tsx +++ b/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 ( <> - - - + + + diff --git a/yoga-app/src/app/api/http-client.ts b/yoga-app/src/app/api/http-client.ts new file mode 100644 index 0000000..bef940b --- /dev/null +++ b/yoga-app/src/app/api/http-client.ts @@ -0,0 +1,20 @@ + + +class HttpClient{ + + public async httpGet(url: string):Promise{ + const response = await fetch(url,{ + headers: { + 'Content-type': 'application-json' + } + }); + return response; + + } + +} + + +const client: HttpClient = new HttpClient(); + +export default client; diff --git a/yoga-app/src/app/api/strapi/strapi-api.ts b/yoga-app/src/app/api/strapi/strapi-api.ts index 52a97f5..e2688b9 100644 --- a/yoga-app/src/app/api/strapi/strapi-api.ts +++ b/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{ + const payload = await strapiClient.httpGetJson( + StrapiQuery.aboutUrl + + ); + return payload?.data; + } public getHomePage(){ @@ -11,4 +24,4 @@ class StrapiApi{ } const api = new StrapiApi(); -export default api; \ No newline at end of file +export default api; diff --git a/yoga-app/src/app/api/strapi/strapi-client.ts b/yoga-app/src/app/api/strapi/strapi-client.ts new file mode 100644 index 0000000..d21368f --- /dev/null +++ b/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(url: string): Promise>{ + const response = await this.httpGet(url); + return await response.json(); + } + + public async findContentType(contentType: string,options?: FindContentOptions): Promise>{ + 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; diff --git a/yoga-app/src/app/api/strapi/strapi-query.ts b/yoga-app/src/app/api/strapi/strapi-query.ts new file mode 100644 index 0000000..d88ac0a --- /dev/null +++ b/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]=*" +} diff --git a/yoga-app/src/app/api/web-client/web-api.ts b/yoga-app/src/app/api/web-client/web-api.ts new file mode 100644 index 0000000..db46e06 --- /dev/null +++ b/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 { + return await strapiApi.getAboutPage(); + } +} + + +const client = new WebApi(); + +export default client; diff --git a/yoga-app/src/app/api/web-client/web-client.ts b/yoga-app/src/app/api/web-client/web-client.ts deleted file mode 100644 index 1ba5dc8..0000000 --- a/yoga-app/src/app/api/web-client/web-client.ts +++ /dev/null @@ -1,15 +0,0 @@ - - - -class WebClient { - - public getHomePage(){ - - } - -} - - -const client = new WebClient(); - -export default client; \ No newline at end of file diff --git a/yoga-app/src/components/about.us.component.tsx b/yoga-app/src/components/about.us.component.tsx index 12db39d..f298e4d 100644 --- a/yoga-app/src/components/about.us.component.tsx +++ b/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 (
@@ -18,15 +26,15 @@ const AboutUsComponent = () =>{
-
About us
-

Take Your Yoga to the Next Level

-

Quis autem vel eum iure reprehenderit qui in eao voluptate velit esse quam nihil molestiae consequatur vel illum.

+
{title}
+

{header}

+

{description}

-
Modi tempora incidunt ut labore dolore magnam aliquam auerat volutaem.
+
{content}
diff --git a/yoga-app/src/components/nav.component.tsx b/yoga-app/src/components/nav.component.tsx index 43eb4cd..6e6e5e4 100644 --- a/yoga-app/src/components/nav.component.tsx +++ b/yoga-app/src/components/nav.component.tsx @@ -36,7 +36,7 @@ const Nav: FC = ({menuItems}:Props) => { @@ -71,7 +71,7 @@ const MenuItemComponent: FC = ({menuItem, dropdownItem}: MenuIte
    { - menuItem.children.map(item => ) + menuItem.children.map((item,index) => ) }
diff --git a/yoga-app/src/components/our.services.component.tsx b/yoga-app/src/components/our.services.component.tsx index 8c52dd5..663142d 100644 --- a/yoga-app/src/components/our.services.component.tsx +++ b/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 (
-
Our Services
-

Practice Whereever You Want Whenever You Need

-

Taciti fames lacinia orci finibus metus elit tempus faucibus urna nunc dui rhoncus - aibendum vea porttitor volutrat felis massa feugiat

+
{title}
+

{header}

+

{description}

diff --git a/yoga-app/src/components/subHeader.component.tsx b/yoga-app/src/components/subHeader.component.tsx index e36e45d..c95b6c4 100644 --- a/yoga-app/src/components/subHeader.component.tsx +++ b/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 (