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 (