[yoga-20] subscribe.component.tsx: make image editable

api.http

@@ -29,7 +29,7 @@ GET {{domain}}/api/yoga-single-services?filters[name][$eq]=service4
 Accept: application/json
 
 ### GET service page
-GET {{domain}}/api/service-list-page?fields[0]=*&populate[services][fields][0]=*&populate[services][populate][image][fields][0]=name&populate[services][populate][image][fields][1]=mime&populate[services][populate][image][fields][2]=url&populate[common][fields][0]=*&populate[common][populate][logoImage][fields][0]=name&populate[common][populate][logoImage][fields][1]=mime&populate[common][populate][logoImage][fields][2]=url&populate[subscribeNow][fields][0]=*&populate[footer][fields][0]=*&populate[footer][populate][links][fields][0]=*&populate[footer][populate][contactUsEmail][fields][0]=*&populate[footer][populate][contactUsLocation][fields][0]=*&populate[footer][populate][contactUsPhoneNumber][fields][0]=*
+GET {{domain}}/api/service-list-page?fields[0]=*&populate[services][fields][0]=*&populate[services][populate][image][fields][0]=name&populate[services][populate][image][fields][1]=mime&populate[services][populate][image][fields][2]=url&populate[common][fields][0]=*&populate[common][populate][logoImage][fields][0]=name&populate[common][populate][logoImage][fields][1]=mime&populate[common][populate][logoImage][fields][2]=url&populate[subscribeNow][fields][0]=*&populate[subscribeNow][populate][image][fields][0]=name&populate[subscribeNow][populate][image][fields][1]=mime&populate[subscribeNow][populate][image][fields][2]=url&populate[footer][fields][0]=*&populate[footer][populate][links][fields][0]=*&populate[footer][populate][contactUsEmail][fields][0]=*&populate[footer][populate][contactUsLocation][fields][0]=*&populate[footer][populate][contactUsPhoneNumber][fields][0]=*&populate[footer][populate][logo][fields][0]=name&populate[footer][populate][logo][fields][1]=mime&populate[footer][populate][logo][fields][2]=url
 Accept: application/json
 
 

yoga-app/src/api/strapi/query/about.json

@@ -72,7 +72,16 @@
       }
     },
     "subscribeNow": {
-      "fields": ["*"]
+      "fields": ["*"],
+      "populate": {
+        "image": {
+          "fields": [
+            "name",
+            "mime",
+            "url"
+          ]
+        }
+      }
     },
     "footer": {
       "fields": ["*"],

yoga-app/src/api/strapi/query/contact.json

@@ -16,7 +16,16 @@
       "fields": ["*"]
     },
     "subscribe": {
-      "fields": ["*"]
+      "fields": ["*"],
+      "populate": {
+        "image": {
+          "fields": [
+            "name",
+            "mime",
+            "url"
+          ]
+        }
+      }
   },
     "footer": {
       "fields": ["*"],

yoga-app/src/api/strapi/query/faq.json

@@ -51,7 +51,16 @@
       }
     },
     "subscribe": {
-      "fields": ["*"]
+      "fields": ["*"],
+      "populate": {
+        "image": {
+          "fields": [
+            "name",
+            "mime",
+            "url"
+          ]
+        }
+      }
   },
     "footer": {
       "fields": ["*"],

yoga-app/src/api/strapi/query/home.json

@@ -43,7 +43,16 @@
       }
     },
     "subscribeNow": {
-      "fields": ["*"]
+      "fields": ["*"],
+      "populate": {
+        "image": {
+          "fields": [
+            "name",
+            "mime",
+            "url"
+          ]
+        }
+      }
   },
     "blogs": {
       "fields": ["*"],

yoga-app/src/api/strapi/query/prices.json

@@ -48,7 +48,16 @@
       }
     },
     "subscribe": {
-      "fields": ["*"]
+      "fields": ["*"],
+      "populate": {
+        "image": {
+          "fields": [
+            "name",
+            "mime",
+            "url"
+          ]
+        }
+      }
     },
     "footer": {
       "fields": ["*"],

yoga-app/src/api/strapi/query/service-list.json

@@ -18,7 +18,16 @@
       }
     },
     "subscribeNow": {
-      "fields": ["*"]
+      "fields": ["*"],
+      "populate": {
+        "image": {
+          "fields": [
+            "name",
+            "mime",
+            "url"
+          ]
+        }
+    }
   },
     "footer": {
       "fields": ["*"],

yoga-app/src/api/strapi/query/service.json

@@ -10,7 +10,16 @@
       }
     },
     "subscribeNow": {
-      "fields": ["*"]
+      "fields": ["*"],
+      "populate": {
+        "image": {
+          "fields": [
+            "name",
+            "mime",
+            "url"
+          ]
+        }
+    }
   },
     "footer": {
       "fields": ["*"],

yoga-app/src/api/strapi/query/services.json

@@ -90,7 +90,16 @@
       }
     },
     "subscribe": {
-      "fields": ["*"]
+      "fields": ["*"],
+      "populate": {
+        "image": {
+          "fields": [
+            "name",
+            "mime",
+            "url"
+          ]
+        }
+    }
   },
     "footer": {
       "fields": ["*"],

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

@@ -7,16 +7,31 @@ class StrapiClient{
 
     constructor(private strapiUrl: string = "http://localhost:1337") {
     }
+
     public getImageUrl(imagePath: string) {
         if (!imagePath) {
             return "dummy.png"
         }
         return '/image/' + imagePath;
     }
+
     public async httpGet(path: string) {
-        console.info("httpGet", path);
+        let result = undefined;
-        return await httpClient.httpGet(this.strapiUrl + path);
+        try {
+            const absoluteUrl = this.strapiUrl + path;
+            console.info("httpGet", {path,absoluteUrl});
+            result = await httpClient.httpGet(this.strapiUrl + path);
+        } catch (e) {
+            console.log("httpGet error", e);
+            throw e;
         }
+        if (!result.ok) {
+            console.info("httpGet not ok", result);
+            throw new Error(result.statusText);
+        }
+        return result;
+    }
+
     public async httpGetJson<T>(url: string): Promise<Payload<T>> {
         const response = await this.httpGet(url);
         return await response.json();
@@ -32,7 +47,6 @@ class StrapiClient{
         }
 
 
-
         const response = await this.httpGet("/api/" + contentType + "?" + searchParams.toString());
         return await response.json();
     }

yoga-app/src/app/page.tsx

@@ -39,7 +39,7 @@ export default async function Home() {
               { contactUs && <ContactUsComponent contactUs={contactUs} /> }
               { prices && <PricingComponent config={prices}/> }
               { feedbacks && <FeedbackComponent config={feedbacks} /> }
-              { blogs && <BlogPostsComponent config={blogs} /> }
+              { blogs && blogs.posts?.length && <BlogPostsComponent config={blogs} /> }
               { subscribeNow && <SubscribeComponent config={subscribeNow} /> }
               { footer && <FooterComponent config={footer} /> }
           <AosComponent />

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

@@ -12,7 +12,7 @@ import SubHeaderComponent from "@/components/subHeader.component";
 
 export default async function Services() {
     const {
-        header,
+        header = undefined,
         description,
         ourServices,
         contactUs,
@@ -22,7 +22,7 @@ export default async function Services() {
         footer,
         subscribe,
         common
-    } = await strapiApi.getServicesPage();
+    } = await strapiApi.getServicesPage()
     return (
         <>
             <SubHeaderComponent  header={{header1:header,description}} common={common}/>

yoga-app/src/components/subscribe.component.module.css

@@ -0,0 +1,4 @@
+
+.roundedImage img{
+    border-bottom-right-radius: 60px;
+}

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

@@ -3,14 +3,22 @@ import {
     YogaSubscribeNowComponent_Plain
 } from "@/types/generated-strapi-interfaces/api/yoga-subscribe-now-component";
 import clsx from "clsx";
+import {StrapiFile} from "@/types/types";
+import strapiApi from "@/api/strapi/strapi-api";
+import styles from './subscribe.component.module.css'
+
 export interface Props{
     config: YogaSubscribeNowComponent_Plain,
-    styleClass?: string
+    styleClass?: string,
 }
 const SubscribeComponent = ({
-                                config: {title,header,placeHolderEmail,buttonSubscribeLabel},
+                                config: {title,header,placeHolderEmail,buttonSubscribeLabel, image = undefined},
     styleClass
 }: Props) => {
+    const imageFile: StrapiFile = image as StrapiFile;
+    if (!imageFile || !imageFile.url) {
+        return null
+    }
     return (
         <section className={clsx("subscribe_section",styleClass)}>
             <div className="container">
@@ -32,8 +40,8 @@ const SubscribeComponent = ({
                             </div>
                         </div>
                         <div className="col-lg-5 col-md-5 col-sm-6 col-xs-12">
-                            <figure className="subscribe_image mb-0">
+                            <figure  className={clsx(styles.roundedImage,"subscribe_image","mb-0",)}>
-                                <YogaImageComponent src="/assets/images/subscribe_image.png" alt=""/>
+                                <YogaImageComponent   src={strapiApi.getImageUrl(imageFile.url)} alt=""/>
                             </figure>
                         </div>
                     </div>

yoga-app/src/types/generated-strapi-interfaces/api/yoga-subscribe-now-component.ts

@@ -1,5 +1,9 @@
 // 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';
+
 export interface YogaSubscribeNowComponent {
   id: number;
   attributes: {
@@ -7,6 +11,7 @@ export interface YogaSubscribeNowComponent {
     header?: string;
     placeHolderEmail?: string;
     buttonSubscribeLabel?: string;
+    image?: { data: Media };
   };
 }
 export interface YogaSubscribeNowComponent_Plain {
@@ -15,6 +20,7 @@ export interface YogaSubscribeNowComponent_Plain {
   header?: string;
   placeHolderEmail?: string;
   buttonSubscribeLabel?: string;
+  image?: Media_Plain;
 }
 
 export interface YogaSubscribeNowComponent_NoRelations {
@@ -23,6 +29,7 @@ export interface YogaSubscribeNowComponent_NoRelations {
   header?: string;
   placeHolderEmail?: string;
   buttonSubscribeLabel?: string;
+  image?: number;
 }
 
 export interface YogaSubscribeNowComponent_AdminPanelLifeCycle {
@@ -31,4 +38,5 @@ export interface YogaSubscribeNowComponent_AdminPanelLifeCycle {
   header?: string;
   placeHolderEmail?: string;
   buttonSubscribeLabel?: string;
+  image?: AdminPanelRelationPropertyModification<Media_Plain>;
 }

yoga-cms/generated-strapi-interfaces/api/yoga-subscribe-now-component.ts

@@ -1,5 +1,9 @@
 // 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';
+
 export interface YogaSubscribeNowComponent {
   id: number;
   attributes: {
@@ -7,6 +11,7 @@ export interface YogaSubscribeNowComponent {
     header?: string;
     placeHolderEmail?: string;
     buttonSubscribeLabel?: string;
+    image?: { data: Media };
   };
 }
 export interface YogaSubscribeNowComponent_Plain {
@@ -15,6 +20,7 @@ export interface YogaSubscribeNowComponent_Plain {
   header?: string;
   placeHolderEmail?: string;
   buttonSubscribeLabel?: string;
+  image?: Media_Plain;
 }
 
 export interface YogaSubscribeNowComponent_NoRelations {
@@ -23,6 +29,7 @@ export interface YogaSubscribeNowComponent_NoRelations {
   header?: string;
   placeHolderEmail?: string;
   buttonSubscribeLabel?: string;
+  image?: number;
 }
 
 export interface YogaSubscribeNowComponent_AdminPanelLifeCycle {
@@ -31,4 +38,5 @@ export interface YogaSubscribeNowComponent_AdminPanelLifeCycle {
   header?: string;
   placeHolderEmail?: string;
   buttonSubscribeLabel?: string;
+  image?: AdminPanelRelationPropertyModification<Media_Plain>;
 }

yoga-cms/src/api/yoga-subscribe-now-component/content-types/yoga-subscribe-now-component/schema.json

@@ -4,7 +4,8 @@
   "info": {
     "singularName": "yoga-subscribe-now-component",
     "pluralName": "yoga-subscribe-now-components",
-    "displayName": "YogaSubscribeNowComponent"
+    "displayName": "YogaSubscribeNowComponent",
+    "description": ""
   },
   "options": {
     "draftAndPublish": true
@@ -22,6 +23,14 @@
     },
     "buttonSubscribeLabel": {
       "type": "string"
+    },
+    "image": {
+      "allowedTypes": [
+        "images",
+        "files"
+      ],
+      "type": "media",
+      "multiple": false
     }
   }
 }

yoga-cms/types/generated/contentTypes.d.ts

@@ -2038,6 +2038,7 @@ export interface ApiYogaSubscribeNowComponentYogaSubscribeNowComponent
   extends Struct.CollectionTypeSchema {
   collectionName: 'yoga_subscribe_now_components';
   info: {
+    description: '';
     displayName: 'YogaSubscribeNowComponent';
     pluralName: 'yoga-subscribe-now-components';
     singularName: 'yoga-subscribe-now-component';
@@ -2051,6 +2052,7 @@ export interface ApiYogaSubscribeNowComponentYogaSubscribeNowComponent
     createdBy: Schema.Attribute.Relation<'oneToOne', 'admin::user'> &
       Schema.Attribute.Private;
     header: Schema.Attribute.String;
+    image: Schema.Attribute.Media<'images' | 'files'>;
     locale: Schema.Attribute.String & Schema.Attribute.Private;
     localizations: Schema.Attribute.Relation<
       'oneToMany',