From 86dda89db9c0b5a463b9ad74a913bcf1bd0f9933 Mon Sep 17 00:00:00 2001 From: Schneider Roland Date: Tue, 21 Jan 2025 23:19:02 +0100 Subject: [PATCH] footer, feedback, subscribe --- api.http | 6 ++ yoga-app/src/app/about/page.tsx | 19 +++-- yoga-app/src/app/api/strapi/query/about.json | 25 +++++- yoga-app/src/app/api/strapi/strapi-api.ts | 24 ++++-- yoga-app/src/app/blog/[blogId]/page.tsx | 16 ++++ yoga-app/src/app/blog/page.tsx | 6 ++ yoga-app/src/app/faq/page.tsx | 4 +- yoga-app/src/app/page.tsx | 4 +- yoga-app/src/app/prices/page.tsx | 4 +- yoga-app/src/app/services/page.tsx | 4 +- .../src/components/blog.posts.component.tsx | 35 ++------ .../components/blog.single.post.component.tsx | 34 ++++++++ yoga-app/src/components/feedbackComponent.tsx | 65 +++++++++++++++ .../src/components/feedbackItemComponent.tsx | 32 ++++++++ yoga-app/src/components/footer.component.tsx | 64 ++++++++------- yoga-app/src/components/quotes.component.tsx | 70 ---------------- .../src/components/subscribe.component.tsx | 17 ++-- .../generated-strapi-interfaces/api/about.ts | 12 +++ .../api/yoga-blog-posts-component.ts | 7 ++ .../api/yoga-footer.ts | 62 ++++++++++++++ .../api/yoga-subscribe-now-component.ts | 34 ++++++++ .../components/yoga-site/Button.ts | 16 ++++ .../components/yoga-site/Link.ts | 16 ++++ .../generated-strapi-interfaces/api/about.ts | 12 +++ .../api/yoga-blog-posts-component.ts | 7 ++ .../api/yoga-footer.ts | 62 ++++++++++++++ .../api/yoga-subscribe-now-component.ts | 34 ++++++++ .../components/yoga-site/Button.ts | 16 ++++ .../components/yoga-site/Link.ts | 16 ++++ .../api/about/content-types/about/schema.json | 10 +++ .../yoga-blog-posts-component/schema.json | 8 +- .../content-types/yoga-footer/schema.json | 55 +++++++++++++ .../yoga-footer/controllers/yoga-footer.ts | 7 ++ .../src/api/yoga-footer/routes/yoga-footer.ts | 7 ++ .../api/yoga-footer/services/yoga-footer.ts | 7 ++ .../yoga-subscribe-now-component/schema.json | 27 ++++++ .../yoga-subscribe-now-component.ts | 7 ++ .../routes/yoga-subscribe-now-component.ts | 7 ++ .../services/yoga-subscribe-now-component.ts | 7 ++ yoga-cms/src/components/yoga-site/button.json | 15 ++++ yoga-cms/src/components/yoga-site/link.json | 16 ++++ yoga-cms/types/generated/components.d.ts | 25 ++++++ yoga-cms/types/generated/contentTypes.d.ts | 82 +++++++++++++++++++ 43 files changed, 841 insertions(+), 162 deletions(-) create mode 100644 yoga-app/src/app/blog/[blogId]/page.tsx create mode 100644 yoga-app/src/app/blog/page.tsx create mode 100644 yoga-app/src/components/blog.single.post.component.tsx create mode 100644 yoga-app/src/components/feedbackComponent.tsx create mode 100644 yoga-app/src/components/feedbackItemComponent.tsx delete mode 100644 yoga-app/src/components/quotes.component.tsx create mode 100644 yoga-app/src/types/generated-strapi-interfaces/api/yoga-footer.ts create mode 100644 yoga-app/src/types/generated-strapi-interfaces/api/yoga-subscribe-now-component.ts create mode 100644 yoga-app/src/types/generated-strapi-interfaces/components/yoga-site/Button.ts create mode 100644 yoga-app/src/types/generated-strapi-interfaces/components/yoga-site/Link.ts create mode 100644 yoga-cms/generated-strapi-interfaces/api/yoga-footer.ts create mode 100644 yoga-cms/generated-strapi-interfaces/api/yoga-subscribe-now-component.ts create mode 100644 yoga-cms/generated-strapi-interfaces/components/yoga-site/Button.ts create mode 100644 yoga-cms/generated-strapi-interfaces/components/yoga-site/Link.ts create mode 100644 yoga-cms/src/api/yoga-footer/content-types/yoga-footer/schema.json create mode 100644 yoga-cms/src/api/yoga-footer/controllers/yoga-footer.ts create mode 100644 yoga-cms/src/api/yoga-footer/routes/yoga-footer.ts create mode 100644 yoga-cms/src/api/yoga-footer/services/yoga-footer.ts create mode 100644 yoga-cms/src/api/yoga-subscribe-now-component/content-types/yoga-subscribe-now-component/schema.json create mode 100644 yoga-cms/src/api/yoga-subscribe-now-component/controllers/yoga-subscribe-now-component.ts create mode 100644 yoga-cms/src/api/yoga-subscribe-now-component/routes/yoga-subscribe-now-component.ts create mode 100644 yoga-cms/src/api/yoga-subscribe-now-component/services/yoga-subscribe-now-component.ts create mode 100644 yoga-cms/src/components/yoga-site/button.json create mode 100644 yoga-cms/src/components/yoga-site/link.json diff --git a/api.http b/api.http index c69310d..45b7093 100644 --- a/api.http +++ b/api.http @@ -16,3 +16,9 @@ Accept: application/json GET {{domain}}/api/about?populate[header][fields][0]=header1&populate[header][fields][1]=description&populate[blogs][fields][0]=*&populate[blogs][populate][posts][fields][0]=name&populate[blogs][populate][posts][fields][1]=id&populate[blogs][populate][posts][fields][2]=header&populate[blogs][populate][posts][populate][tags][fields][0]=*&populate[blogs][populate][posts][populate][teaserImage][fields][0]=name&populate[blogs][populate][posts][populate][teaserImage][fields][1]=mime&populate[blogs][populate][posts][populate][teaserImage][fields][2]=url&populate[feedbacks][fields][0]=*&populate[feedbacks][populate][feedbacks][fields][0]=*&populate[feedbacks][populate][feedbacks][populate][customerImage][fields][0]=name&populate[feedbacks][populate][feedbacks][populate][customerImage][fields][1]=mime&populate[feedbacks][populate][feedbacks][populate][customerImage][fields][2]=url&populate[ourServices][fields][0]=*&populate[ourServices][populate][services][fields][0]=*&populate[ourServices][populate][services][populate][image][fields][0]=name&populate[ourServices][populate][services][populate][image][fields][1]=mime&populate[ourServices][populate][services][populate][image][fields][2]=url&populate[aboutUs][fields][0]=*&populate[aboutUs][populate][image][fields][0]=name&populate[aboutUs][populate][image][fields][1]=mime&populate[aboutUs][populate][image][fields][2]=url&populate[contactUs][fields][0]=*&populate[prices][fields][0]=*&populate[prices][populate][prices][fields][0]=*&populate[prices][populate][prices][populate][icon][fields][0]=name&populate[prices][populate][prices][populate][icon][fields][1]=mime&populate[prices][populate][prices][populate][icon][fields][2]=url&populate[prices][populate][prices][populate][image][fields][0]=name&populate[prices][populate][prices][populate][image][fields][1]=mime&populate[prices][populate][prices][populate][image][fields][2]=url&populate[ourSpecialities][fields][0]=*&populate[ourSpecialities][populate][left1][fields][0]=*&populate[ourSpecialities][populate][left2][fields][0]=*&populate[ourSpecialities][populate][left3][fields][0]=*&populate[ourSpecialities][populate][left4][fields][0]=*&populate[ourSpecialities][populate][right1][fields][0]=*&populate[ourSpecialities][populate][right2][fields][0]=*&populate[ourSpecialities][populate][right3][fields][0]=*&populate[ourSpecialities][populate][right4][fields][0]=* Accept: application/json #Authorization: Bearer {{token}} + + +### GET request with a header +GET {{domain}}/api/yoga-blog-posts/wmhqy1n8japcfpy0of4hauwm +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 9185ca3..085f6c8 100644 --- a/yoga-app/src/app/about/page.tsx +++ b/yoga-app/src/app/about/page.tsx @@ -5,15 +5,13 @@ import AboutUsComponent from "@/components/about.us.component"; import OurSpecialitiesComponent from "@/components/our.specialities.component"; import ContactUsComponent from "@/components/contact.us.component"; import PricingComponent from "@/components/pricing.component"; -import QuotesComponent from "@/components/quotes.component"; +import FeedbackComponent from "@/components/feedbackComponent"; import BlogPostsComponent from "@/components/blog.posts.component"; 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"; -import pricingComponent from "@/components/pricing.component"; export default async function About() { const pageData = await webApi.getAboutPage(); @@ -24,22 +22,25 @@ export default async function About() { contactUs, ourSpecialities, prices, - blogs + blogs, + subscribeNow, + footer, + feedbacks } = pageData; return ( <> - - + { header && } + { ourServices && } { aboutUs && } { ourSpecialities && } { contactUs && } { prices && } - + { feedbacks && } { blogs && } - - + {subscribeNow && } + { footer && } diff --git a/yoga-app/src/app/api/strapi/query/about.json b/yoga-app/src/app/api/strapi/query/about.json index 7423895..7cfc042 100644 --- a/yoga-app/src/app/api/strapi/query/about.json +++ b/yoga-app/src/app/api/strapi/query/about.json @@ -3,11 +3,34 @@ "header": { "fields": ["header1","description"] }, + "footer": { + "fields": ["*"], + "populate": { + "links": { + "fields": ["*"] + }, + "contactUsEmail": { + "fields": ["*"] + }, + "contactUsLocation": { + "fields": ["*"] + }, + "contactUsPhoneNumber": { + "fields": ["*"] + } + } + }, + "subscribeNow": { + "fields": ["*"] + }, "blogs": { "fields": ["*"], "populate": { + "button": { + "fields": ["*"] + }, "posts": { - "fields": ["name", "id", "header" ], + "fields": ["name", "id", "header","documentId" ], "populate": { "tags": { "fields": ["*" ] diff --git a/yoga-app/src/app/api/strapi/strapi-api.ts b/yoga-app/src/app/api/strapi/strapi-api.ts index 330d92e..d79948d 100644 --- a/yoga-app/src/app/api/strapi/strapi-api.ts +++ b/yoga-app/src/app/api/strapi/strapi-api.ts @@ -3,28 +3,36 @@ import strapiClient from "@/app/api/strapi/strapi-client"; import {StrapiQuery} from "@/app/api/strapi/strapi-query"; import qs from "qs"; import aboutQuery from "@/app/api/strapi/query/about.json"; +import {YogaBlogPost_Plain} from "@/types/generated-strapi-interfaces/api/yoga-blog-post"; class StrapiApi{ constructor( ) { } + protected async getJson(path: string, params?: object){ + const query = params ? qs.stringify(params,{ arrayFormat: 'indices' , encode: false}) : ""; + const payload = await strapiClient.httpGetJson( + path+ query + ); + return payload?.data; + } public getImageUrl(imagePath: string){ return strapiClient.getImageUrl(imagePath); } public async getAboutPage(): Promise{ - const query = qs.stringify(aboutQuery,{ arrayFormat: 'indices' , encode: false}) - const payload = await strapiClient.httpGetJson( - "/api/about?"+ query - - ); - return payload?.data; - + return this.getJson("/api/about?",aboutQuery); } public getHomePage(){ - console.info('Get Home Page'); + return this.getJson("/api/home?",aboutQuery); + + } + + public getBlog(blogId: string): Promise{ + return this.getJson("/api/yoga-blog-posts/"+blogId,undefined); + } } diff --git a/yoga-app/src/app/blog/[blogId]/page.tsx b/yoga-app/src/app/blog/[blogId]/page.tsx new file mode 100644 index 0000000..da88289 --- /dev/null +++ b/yoga-app/src/app/blog/[blogId]/page.tsx @@ -0,0 +1,16 @@ +import strapiApi from "@/app/api/strapi/strapi-api"; +import clsx from "clsx"; + +export default async function BlogComponent({ + params, + }: { + params: Promise<{ blogId: string }> +}){ + const blogId = (await params).blogId + const blog = await strapiApi.getBlog(blogId); + return ( +
+

{blog.header}

+
+ ) +} diff --git a/yoga-app/src/app/blog/page.tsx b/yoga-app/src/app/blog/page.tsx new file mode 100644 index 0000000..0dac2bd --- /dev/null +++ b/yoga-app/src/app/blog/page.tsx @@ -0,0 +1,6 @@ + +export default function BlogListComponent(){ + return ( +
Blog list
+ ) +} diff --git a/yoga-app/src/app/faq/page.tsx b/yoga-app/src/app/faq/page.tsx index 3583560..7cd76ce 100644 --- a/yoga-app/src/app/faq/page.tsx +++ b/yoga-app/src/app/faq/page.tsx @@ -5,7 +5,7 @@ import AboutUsComponent from "@/components/about.us.component"; import OurSpecialitiesComponent from "@/components/our.specialities.component"; import ContactUsComponent from "@/components/contact.us.component"; import PricingComponent from "@/components/pricing.component"; -import QuotesComponent from "@/components/quotes.component"; +import FeedbackComponent from "@/components/feedbackComponent"; import BlogPostsComponent from "@/components/blog.posts.component"; import FooterComponent from "@/components/footer.component"; import SubscribeComponent from "@/components/subscribe.component"; @@ -18,7 +18,7 @@ export default function About() { - + diff --git a/yoga-app/src/app/page.tsx b/yoga-app/src/app/page.tsx index 54c2a50..8365f84 100644 --- a/yoga-app/src/app/page.tsx +++ b/yoga-app/src/app/page.tsx @@ -5,7 +5,7 @@ import AboutUsComponent from "@/components/about.us.component"; import OurSpecialitiesComponent from "@/components/our.specialities.component"; import ContactUsComponent from "@/components/contact.us.component"; import PricingComponent from "@/components/pricing.component"; -import QuotesComponent from "@/components/quotes.component"; +import FeedbackComponent from "@/components/feedbackComponent"; import BlogPostsComponent from "@/components/blog.posts.component"; import FooterComponent from "@/components/footer.component"; import SubscribeComponent from "@/components/subscribe.component"; @@ -22,7 +22,7 @@ export default function Home() { - + diff --git a/yoga-app/src/app/prices/page.tsx b/yoga-app/src/app/prices/page.tsx index 3583560..7cd76ce 100644 --- a/yoga-app/src/app/prices/page.tsx +++ b/yoga-app/src/app/prices/page.tsx @@ -5,7 +5,7 @@ import AboutUsComponent from "@/components/about.us.component"; import OurSpecialitiesComponent from "@/components/our.specialities.component"; import ContactUsComponent from "@/components/contact.us.component"; import PricingComponent from "@/components/pricing.component"; -import QuotesComponent from "@/components/quotes.component"; +import FeedbackComponent from "@/components/feedbackComponent"; import BlogPostsComponent from "@/components/blog.posts.component"; import FooterComponent from "@/components/footer.component"; import SubscribeComponent from "@/components/subscribe.component"; @@ -18,7 +18,7 @@ export default function About() { - + diff --git a/yoga-app/src/app/services/page.tsx b/yoga-app/src/app/services/page.tsx index 3583560..7cd76ce 100644 --- a/yoga-app/src/app/services/page.tsx +++ b/yoga-app/src/app/services/page.tsx @@ -5,7 +5,7 @@ import AboutUsComponent from "@/components/about.us.component"; import OurSpecialitiesComponent from "@/components/our.specialities.component"; import ContactUsComponent from "@/components/contact.us.component"; import PricingComponent from "@/components/pricing.component"; -import QuotesComponent from "@/components/quotes.component"; +import FeedbackComponent from "@/components/feedbackComponent"; import BlogPostsComponent from "@/components/blog.posts.component"; import FooterComponent from "@/components/footer.component"; import SubscribeComponent from "@/components/subscribe.component"; @@ -18,7 +18,7 @@ export default function About() { - + diff --git a/yoga-app/src/components/blog.posts.component.tsx b/yoga-app/src/components/blog.posts.component.tsx index 6f98f83..7611475 100644 --- a/yoga-app/src/components/blog.posts.component.tsx +++ b/yoga-app/src/components/blog.posts.component.tsx @@ -1,11 +1,13 @@ import YogaImageComponent from "@/components/yoga.image.component"; import {YogaBlogPostsComponent_Plain} from "@/types/generated-strapi-interfaces/api/yoga-blog-posts-component"; +import BlogSinglePostComponent from "@/components/blog.single.post.component"; export interface Props { config: YogaBlogPostsComponent_Plain } -const BlogPostsComponent = ( {config: { title,header,description,posts} }: Props) => { +const BlogPostsComponent = ( {config: { title,header,description,posts, button} }: Props) => { + const teaserPosts = posts?.length ? posts.slice(0,2) : []; return (
@@ -18,37 +20,10 @@ const BlogPostsComponent = ( {config: { title,header,description,posts} }: Props
-
-
-
-
- YOGA -

Yoga Effects on Brain Health: A Systematic Review of the Current Literature

-
- -
-
-
-
-
-
-
-
- FITNESS -

Maintaining a regular yoga practice can provide physical health

-
- -
-
-
-
+ {teaserPosts.map( value => )}
diff --git a/yoga-app/src/components/blog.single.post.component.tsx b/yoga-app/src/components/blog.single.post.component.tsx new file mode 100644 index 0000000..b60ab94 --- /dev/null +++ b/yoga-app/src/components/blog.single.post.component.tsx @@ -0,0 +1,34 @@ +import YogaImageComponent from "@/components/yoga.image.component"; +import {YogaBlogPostsComponent_Plain} from "@/types/generated-strapi-interfaces/api/yoga-blog-posts-component"; +import {YogaBlogPost_Plain} from "@/types/generated-strapi-interfaces/api/yoga-blog-post"; +import {StrapiFile} from "@/types/types"; +import strapiApi from "@/app/api/strapi/strapi-api"; + +export interface Props { + post: YogaBlogPost_Plain & {documentId?: string} +} + +const BlogSinglePostComponent = ({post: {header,teaserImage,tags,documentId} }: Props) => { + const teaserFile: StrapiFile = teaserImage as StrapiFile; + const tagText = tags?.length ? tags[0].tag : null; + return ( +
+
+
+ +
+
+ {tagText} +

{header}

+
+ +
+
+
+
+ ); +} + +export default BlogSinglePostComponent; diff --git a/yoga-app/src/components/feedbackComponent.tsx b/yoga-app/src/components/feedbackComponent.tsx new file mode 100644 index 0000000..577c239 --- /dev/null +++ b/yoga-app/src/components/feedbackComponent.tsx @@ -0,0 +1,65 @@ +'use client' +import YogaImageComponent from "@/components/yoga.image.component"; +import { + YogaCustomerFeedbackComponent_Plain +} from "@/types/generated-strapi-interfaces/api/yoga-customer-feedback-component"; +import FeedbackItemComponent from "@/components/feedbackItemComponent"; +import {useState} from "react"; + +export interface Props{ + config: YogaCustomerFeedbackComponent_Plain +} + +const FeedbackComponent = ({ config: { feedbacks }}: Props) => { + + const [index, setIndex] = useState(0); + const move = (val: number) =>{ + setIndex(prevState => { + let i = prevState; + i = i + val; + i = Math.min( Math.max(i,0), feedbacks.length ) + return i; + }) + } + return ( +
+
+
+
+
+
+ {feedbacks && feedbacks.map( (feedback,i) => { + return () + } )} +
+ move(-1)} + > + + Previous + + move(1)} + + > + + Next + +
+
+
+
+ +
+
+ +
+
+
+ + ); +} + +export default FeedbackComponent; diff --git a/yoga-app/src/components/feedbackItemComponent.tsx b/yoga-app/src/components/feedbackItemComponent.tsx new file mode 100644 index 0000000..2a790ee --- /dev/null +++ b/yoga-app/src/components/feedbackItemComponent.tsx @@ -0,0 +1,32 @@ +import YogaImageComponent from "@/components/yoga.image.component"; +import { + YogaCustomerFeedbackComponent_Plain +} from "@/types/generated-strapi-interfaces/api/yoga-customer-feedback-component"; +import {YogaCustomerFeedback_Plain} from "@/types/generated-strapi-interfaces/api/yoga-customer-feedback"; +import {StrapiFile} from "@/types/types"; +import strapiApi from "@/app/api/strapi/strapi-api"; +import clsx from "clsx"; + +export interface Props { + config: YogaCustomerFeedback_Plain, + active: boolean +} + +const FeedbackComponent = ({active,config: {customerName, feedback, customerImage, customerDescription}}: Props) => { + const imageFile: StrapiFile = customerImage as StrapiFile; + return ( +
+
+ +

“{feedback}”

+
+

{customerName}

+ {customerDescription} +
+
+ + ); +} + +export default FeedbackComponent; diff --git a/yoga-app/src/components/footer.component.tsx b/yoga-app/src/components/footer.component.tsx index 8574eec..97cbd5d 100644 --- a/yoga-app/src/components/footer.component.tsx +++ b/yoga-app/src/components/footer.component.tsx @@ -1,8 +1,24 @@ import Link from "next/link"; import YogaImageComponent from "@/components/yoga.image.component"; +import {YogaFooter_Plain} from "@/types/generated-strapi-interfaces/api/yoga-footer"; + +export interface Props{ + config: YogaFooter_Plain +} +const FooterComponent = ({ config: { + aboutUsHeader, + aboutUsContent, + quickLinksHeader, + links, + contactInfoHeader, + contactUsEmail, + contactUsLocation, + contactUsPhoneNumber, + copyRight +} }: Props) => { + -const FooterComponent = () => { return (