From 073b9fbe179639c4128cf28f5fb455b547673bf9 Mon Sep 17 00:00:00 2001 From: MohammedZuhairAhmed Date: Thu, 18 Jul 2024 00:08:42 +0530 Subject: [PATCH 1/3] Add Menu page changes --- src/api/index.ts | 31 +++--- src/components/menu/Menu.tsx | 165 +++++++++++++++---------------- src/components/menu/MenuCard.tsx | 9 +- src/reducer/index.ts | 49 +++++---- src/routes/index.tsx | 6 +- src/types/index.ts | 28 +++--- 6 files changed, 133 insertions(+), 155 deletions(-) diff --git a/src/api/index.ts b/src/api/index.ts index 2b7287a..6d5b6bb 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -4,8 +4,7 @@ import { setFooterData, setHeaderData, setHomePageData, - // COMMENT: Uncomment below line - // setMenuPageData, + setMenuPageData, } from "../reducer"; import { initializeContentstackSdk } from "../sdk/utils"; import * as Utils from "@contentstack/utils"; @@ -106,18 +105,16 @@ export const fetchInitialData = async ( } }; -// COMMENT: Uncomment below code - -// export const fetchMenuPageData = async ( -// dispatch: Dispatch, -// setLoading: (status: boolean) => void -// ): Promise => { -// const data: any = await getEntryByUrl({ -// contentTypeUid: CONTENT_TYPES.PAGE, -// entryUrl: "/menu", -// referenceFieldPath: ["sections.menu.course.dishes"], -// jsonRtePath: undefined, -// }); -// dispatch(setMenuPageData(data[0].sections[0].menu.course)); -// setLoading(false); -// }; +export const fetchMenuPageData = async ( + dispatch: Dispatch, + setLoading: (status: boolean) => void +): Promise => { + const data: any = await getEntryByUrl({ + contentTypeUid: CONTENT_TYPES.PAGE, + entryUrl: "/menu", + referenceFieldPath: ["sections.menu.course.dishes"], + jsonRtePath: undefined, + }); + dispatch(setMenuPageData(data[0].sections[0].menu.course)); + setLoading(false); +}; diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx index ba2e616..5b5c3f6 100644 --- a/src/components/menu/Menu.tsx +++ b/src/components/menu/Menu.tsx @@ -3,100 +3,93 @@ import MenuCard from "./MenuCard"; import { useDispatch, useSelector } from "react-redux"; import { RootState } from "../../store"; import { LoadingSkeleton } from "../LoadingSkeleton"; -// COMMENT: Uncomment below 2 import statements - -// import { TMenu, TDishes } from "../../types"; -// import { fetchMenuPageData } from "../../api"; +import { TMenu, TDishes } from "../../types"; +import { fetchMenuPageData } from "../../api"; const Menu: React.FC = () => { - // COMMENT: Uncomment from line 14 to 96 - - // const dispatch = useDispatch(); - // const [loading, setLoading] = useState(true); - // const [activeIndex, setActiveIndex] = useState(0 ?? null); - - // const menuPageData = useSelector( - // (state: RootState) => state.main.menuPageData - // ); - // useEffect(() => { - // fetchMenuPageData(dispatch, setLoading); - // }, [dispatch]); + const dispatch = useDispatch(); + const [loading, setLoading] = useState(true); + const [activeIndex, setActiveIndex] = useState(0 ?? null); - // const memoizedMenuPageData = useMemo(() => menuPageData, [menuPageData]); + const menuPageData = useSelector( + (state: RootState) => state.main.menuPageData + ); + useEffect(() => { + fetchMenuPageData(dispatch, setLoading); + }, [dispatch]); - // const categories = memoizedMenuPageData?.map( - // (course: TMenu) => course.course_name - // ); - // const dishes = memoizedMenuPageData?.map((course: TMenu) => course.dishes); - // const flatDishes: TDishes[] = dishes - // ?.flat() - // .filter( - // (dish, index, self) => index === self.findIndex((d) => d.uid === dish.uid) - // ); + const memoizedMenuPageData = useMemo(() => menuPageData, [menuPageData]); - // const styleAlternateWords = (text: string) => { - // return text - // .split(" ") - // .map((char, index) => - // index % 2 === 1 ? {char} : char - // ) - // .reduce( - // (acc, curr) => ( - // <> - // {acc} {curr} - // - // ), - // <> - // ); - // }; + const categories = memoizedMenuPageData?.map( + (course: TMenu) => course.course_name + ); + const dishes = memoizedMenuPageData?.map((course: TMenu) => course.dishes); + const flatDishes: TDishes[] = dishes + ?.flat() + .filter( + (dish, index, self) => index === self.findIndex((d) => d.uid === dish.uid) + ); - // return ( - //
- //
- // Discover - //

{styleAlternateWords("Our Dining Menu")}

- //
- //
- // {loading ? ( - // - // ) : ( - // <> - //
- //

setActiveIndex(0)} - // > - // ALL CATEGORIES - //

- // {categories?.map((category, index) => ( - //

setActiveIndex(index + 1)} - // > - // {category} - //

- // ))} - //
- // - // )} - //
+ const styleAlternateWords = (text: string) => { + return text + .split(" ") + .map((char, index) => + index % 2 === 1 ? {char} : char + ) + .reduce( + (acc, curr) => ( + <> + {acc} {curr} + + ), + <> + ); + }; - // {!loading && ( - //
- // {activeIndex === 0 ? ( - // - // ) : ( - // - // )} - //
- // )} - //
- // ); + return ( +
+
+ Discover +

{styleAlternateWords("Our Dining Menu")}

+
+
+ {loading ? ( + + ) : ( + <> +
+

setActiveIndex(0)} + > + ALL CATEGORIES +

+ {categories?.map((category, index) => ( +

setActiveIndex(index + 1)} + > + {category} +

+ ))} +
+ + )} +
- // COMMENT: Delete below line - return <>; + {!loading && ( +
+ {activeIndex === 0 ? ( + + ) : ( + + )} +
+ )} +
+ ); }; export default Menu; diff --git a/src/components/menu/MenuCard.tsx b/src/components/menu/MenuCard.tsx index 4409749..ae127fa 100644 --- a/src/components/menu/MenuCard.tsx +++ b/src/components/menu/MenuCard.tsx @@ -1,14 +1,11 @@ import React from "react"; -// COMMENT: Uncomment below import statement -// import { TDishes } from "../../types"; +import { TDishes } from "../../types"; -// COMMENT: Replace any[] with TDishes[] -const MenuCard: React.FC<{ data: any[] }> = ({ data }) => { +const MenuCard: React.FC<{ data: TDishes[] }> = ({ data }) => { return (
{data ? ( - // COMMENT: Replace any with TDishes - data.map((menuItem: any) => ( + data.map((menuItem: TDishes) => (
) => { state.homePageData = action.payload; }, - // COMMENT: Uncomment below lines - // setMenuPageData: (state, action: PayloadAction) => { - // state.menuPageData = action.payload; - // }, + setMenuPageData: (state, action: PayloadAction) => { + state.menuPageData = action.payload; + }, }, }); @@ -105,8 +101,7 @@ export const { setHeaderData, setFooterData, setHomePageData, - // COMMENT: Uncomment below line - // setMenuPageData, + setMenuPageData, } = mainSlice.actions; export default mainSlice.reducer; diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 12f9ec9..de22eb6 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -3,8 +3,7 @@ import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; import Header from "../components/header/Header"; import Footer from "../components/footer/Footer"; import Home from "../components/home/Home"; -// COMMENT: Uncomment below import statement -// import Menu from "../components/menu/Menu"; +import Menu from "../components/menu/Menu"; import { fetchInitialData } from "../api"; import { useDispatch } from "react-redux"; import LoadingScreen from "../components/LoadingScreen"; @@ -29,8 +28,7 @@ const AppRoutes: React.FC = () => {
} /> - {/* COMMENT: Replace below element from to */} - } /> + } /> } />
diff --git a/src/types/index.ts b/src/types/index.ts index a3bf4be..1bca99b 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -51,19 +51,17 @@ export type TLink = { title: string; }; -// COMMENT: Uncomment below lines - -// export type TDishes = { -// uid: string; -// image: { -// url: string; -// }; -// title: string; -// description: string; -// price: number; -// }; +export type TDishes = { + uid: string; + image: { + url: string; + }; + title: string; + description: string; + price: number; +}; -// export type TMenu = { -// course_name: string; -// dishes: TDishes[]; -// }; +export type TMenu = { + course_name: string; + dishes: TDishes[]; +}; From 5d72d39f6e9483a294c91867165516e14161f386 Mon Sep 17 00:00:00 2001 From: MohammedZuhairAhmed Date: Thu, 18 Jul 2024 00:23:04 +0530 Subject: [PATCH 2/3] Add Live Preview changes --- package-lock.json | 71 ++++++++++++++++++++++++++++++++++++ package.json | 1 + src/components/menu/Menu.tsx | 5 ++- src/routes/index.tsx | 5 ++- src/sdk/utils.ts | 45 +++++++++++++++++++++++ 5 files changed, 125 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index daa4c5b..fc6164e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "1.0.0", "license": "MIT", "dependencies": { + "@contentstack/live-preview-utils": "^2.0.2", "@contentstack/venus-components": "^2.2.4", "@reduxjs/toolkit": "^2.2.1", "@testing-library/jest-dom": "^5.17.0", @@ -2021,6 +2022,19 @@ "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz", "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==" }, + "node_modules/@contentstack/live-preview-utils": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@contentstack/live-preview-utils/-/live-preview-utils-2.0.2.tgz", + "integrity": "sha512-sj0bAxfyiJTpRDln21fAs9j7y8Pp9zpYrW4uX/nvCoC3ASz5GVDgrqlm4obEB5skcew/kFXIVO3q506HTMyAVA==", + "dependencies": { + "goober": "^2.1.14", + "just-camel-case": "^4.0.2", + "morphdom": "^2.6.1", + "mustache": "^4.2.0", + "post-robot": "^8.0.31", + "uuid": "^8.3.2" + } + }, "node_modules/@contentstack/utils": { "version": "1.3.3", "resolved": "https://registry.npmjs.org/@contentstack/utils/-/utils-1.3.3.tgz", @@ -7892,6 +7906,22 @@ "node": ">=10" } }, + "node_modules/cross-domain-safe-weakmap": { + "version": "1.0.29", + "resolved": "https://registry.npmjs.org/cross-domain-safe-weakmap/-/cross-domain-safe-weakmap-1.0.29.tgz", + "integrity": "sha512-VLoUgf2SXnf3+na8NfeUFV59TRZkIJqCIATaMdbhccgtnTlSnHXkyTRwokngEGYdQXx8JbHT9GDYitgR2sdjuA==", + "dependencies": { + "cross-domain-utils": "^2.0.0" + } + }, + "node_modules/cross-domain-utils": { + "version": "2.0.38", + "resolved": "https://registry.npmjs.org/cross-domain-utils/-/cross-domain-utils-2.0.38.tgz", + "integrity": "sha512-zZfi3+2EIR9l4chrEiXI2xFleyacsJf8YMLR1eJ0Veb5FTMXeJ3DpxDjZkto2FhL/g717WSELqbptNSo85UJDw==", + "dependencies": { + "zalgo-promise": "^1.0.11" + } + }, "node_modules/cross-fetch": { "version": "3.1.8", "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.8.tgz", @@ -10851,6 +10881,14 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/goober": { + "version": "2.1.14", + "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.14.tgz", + "integrity": "sha512-4UpC0NdGyAFqLNPnhCT2iHpza2q+RAY3GV85a/mRPdzyPQMsj0KmMMuetdIkzWRbJ+Hgau1EZztq8ImmiMGhsg==", + "peerDependencies": { + "csstype": "^3.0.10" + } + }, "node_modules/gopd": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz", @@ -14282,6 +14320,11 @@ "node": ">=4.0" } }, + "node_modules/just-camel-case": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/just-camel-case/-/just-camel-case-4.0.2.tgz", + "integrity": "sha512-df6QI/EIq+6uHe/wtaa9Qq7/pp4wr4pJC/r1+7XhVL6m5j03G6h9u9/rIZr8rDASX7CxwDPQnZjffCo2e6PRLw==" + }, "node_modules/keyv": { "version": "4.5.4", "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz", @@ -14821,6 +14864,11 @@ "node": "*" } }, + "node_modules/morphdom": { + "version": "2.7.3", + "resolved": "https://registry.npmjs.org/morphdom/-/morphdom-2.7.3.tgz", + "integrity": "sha512-rvGK92GxSuPEZLY8D/JH07cG3BxyA+/F0Bxg32OoGAEFFhGWA3OqVpqPZlOgZTCR52clXrmz+z2pYSJ6gOig1w==" + }, "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", @@ -14838,6 +14886,14 @@ "multicast-dns": "cli.js" } }, + "node_modules/mustache": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/mustache/-/mustache-4.2.0.tgz", + "integrity": "sha512-71ippSywq5Yb7/tVYyGbkBggbU8H3u5Rz56fH60jGFgr8uHwxs+aSKeqmluIVzM0m0kB7xQjKS6qPfd0b2ZoqQ==", + "bin": { + "mustache": "bin/mustache" + } + }, "node_modules/mz": { "version": "2.7.0", "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz", @@ -15587,6 +15643,16 @@ "node": ">= 0.4" } }, + "node_modules/post-robot": { + "version": "8.0.31", + "resolved": "https://registry.npmjs.org/post-robot/-/post-robot-8.0.31.tgz", + "integrity": "sha512-nUhtKgtmcgyuPm4RnIhUB3gsDYJBHOgFry3TvOxhIHpgfwYY/T69d4oB90tw4YUllFZUUwqLEv1Wgyg6eOoJ7A==", + "dependencies": { + "cross-domain-safe-weakmap": "^1.0.1", + "cross-domain-utils": "^2.0.0", + "zalgo-promise": "^1.0.3" + } + }, "node_modules/postcss": { "version": "8.4.31", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", @@ -21383,6 +21449,11 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } + }, + "node_modules/zalgo-promise": { + "version": "1.0.48", + "resolved": "https://registry.npmjs.org/zalgo-promise/-/zalgo-promise-1.0.48.tgz", + "integrity": "sha512-LLHANmdm53+MucY9aOFIggzYtUdkSBFxUsy4glTTQYNyK6B3uCPWTbfiGvSrEvLojw0mSzyFJ1/RRLv+QMNdzQ==" } } } diff --git a/package.json b/package.json index 57e4ecc..24022c9 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "private": true, "author": "Contentstack", "dependencies": { + "@contentstack/live-preview-utils": "^2.0.2", "@contentstack/venus-components": "^2.2.4", "@reduxjs/toolkit": "^2.2.1", "@testing-library/jest-dom": "^5.17.0", diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx index 5b5c3f6..45983c8 100644 --- a/src/components/menu/Menu.tsx +++ b/src/components/menu/Menu.tsx @@ -5,6 +5,7 @@ import { RootState } from "../../store"; import { LoadingSkeleton } from "../LoadingSkeleton"; import { TMenu, TDishes } from "../../types"; import { fetchMenuPageData } from "../../api"; +import { onEntryChange } from "../../sdk/utils"; const Menu: React.FC = () => { const dispatch = useDispatch(); @@ -15,7 +16,9 @@ const Menu: React.FC = () => { (state: RootState) => state.main.menuPageData ); useEffect(() => { - fetchMenuPageData(dispatch, setLoading); + onEntryChange(() => { + fetchMenuPageData(dispatch, setLoading); + }); }, [dispatch]); const memoizedMenuPageData = useMemo(() => menuPageData, [menuPageData]); diff --git a/src/routes/index.tsx b/src/routes/index.tsx index de22eb6..7c43661 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -8,13 +8,16 @@ import { fetchInitialData } from "../api"; import { useDispatch } from "react-redux"; import LoadingScreen from "../components/LoadingScreen"; import { NotFound } from "../components/NotFound"; +import { onEntryChange } from "../sdk/utils"; const AppRoutes: React.FC = () => { const dispatch = useDispatch(); const [loading, setLoading] = useState(true); useEffect(() => { - fetchInitialData(dispatch, setLoading); + onEntryChange(() => { + fetchInitialData(dispatch, setLoading); + }); }, [dispatch]); return ( diff --git a/src/sdk/utils.ts b/src/sdk/utils.ts index 8b3643a..4fb1dcf 100644 --- a/src/sdk/utils.ts +++ b/src/sdk/utils.ts @@ -1,4 +1,36 @@ import Contentstack from "contentstack"; +import ContentstackLivePreview from "@contentstack/live-preview-utils"; + +const getLivePreviewHostByRegion = (region: string) => { + switch (region) { + case "US": + return "rest-preview.contentstack.com"; + case "EU": + return "eu-rest-preview.contentstack.com"; + case "AZURE_NA": + return "azure-na-rest-preview.contentstack.com"; + case "AZURE_EU": + return "azure-eu-rest-preview.contentstack.com"; + default: + return "rest-preview.contentstack.com"; + } +}; +const getHostByRegion = (region: string) => { + switch (region) { + case "US": + return "app.contentstack.com"; + case "EU": + return "eu-app.contentstack.com"; + case "AZURE_NA": + return "azure-na-app.contentstack.com"; + case "AZURE_EU": + return "azure-eu-app.contentstack.com"; + case "GCP_NA": + return "gcp-na-api.contentstack.com"; + default: + return "app.contentstack.com"; + } +}; export const initializeContentstackSdk = () => { const { @@ -6,6 +38,7 @@ export const initializeContentstackSdk = () => { REACT_APP_CONTENTSTACK_DELIVERY_TOKEN, REACT_APP_CONTENTSTACK_ENVIRONMENT, REACT_APP_CONTENTSTACK_REGION, + REACT_APP_CONTENTSTACK_PREVIEW_TOKEN, } = process.env; const region: Contentstack.Region | undefined = (function ( @@ -39,6 +72,18 @@ export const initializeContentstackSdk = () => { delivery_token: REACT_APP_CONTENTSTACK_DELIVERY_TOKEN as string, environment: REACT_APP_CONTENTSTACK_ENVIRONMENT as string, region: region, + live_preview: { + enable: true, + host: getLivePreviewHostByRegion(REACT_APP_CONTENTSTACK_REGION as string), + preview_token: REACT_APP_CONTENTSTACK_PREVIEW_TOKEN as string, + }, }); + + ContentstackLivePreview.init({ + stackSdk: Stack, + }); + return Stack; }; + +export const onEntryChange = ContentstackLivePreview.onEntryChange; From 69e477a727c74d1c8dd0cd1b073799d5bc0c306d Mon Sep 17 00:00:00 2001 From: MohammedZuhairAhmed Date: Thu, 18 Jul 2024 01:26:55 +0530 Subject: [PATCH 3/3] FEAT: Add Live Preview with Live Edit Tags and Multi-Region Support --- .env.sample | 1 + README.md | 6 ++- package-lock.json | 7 +-- package.json | 1 + src/api/index.ts | 5 ++ src/components/footer/Footer.tsx | 24 ++++++--- src/components/header/Header.tsx | 3 +- src/components/home/Home.tsx | 15 ++++-- src/components/menu/Menu.tsx | 7 ++- src/components/menu/MenuCard.tsx | 11 ++-- src/reducer/index.ts | 86 +++++++++++++++++++++++++++++++- src/sdk/utils.ts | 11 ++++ src/types/index.ts | 84 ++++++++++++++++++++++++++++--- 13 files changed, 230 insertions(+), 31 deletions(-) diff --git a/.env.sample b/.env.sample index 9c5b8ca..1ad4c3d 100644 --- a/.env.sample +++ b/.env.sample @@ -1,6 +1,7 @@ REACT_APP_CONTENTSTACK_API_KEY=YOUR_STACK_API_KEY REACT_APP_CONTENTSTACK_DELIVERY_TOKEN=YOUR_DELIVERY_TOKEN REACT_APP_CONTENTSTACK_ENVIRONMENT=YOUR_ENVIRONMENT +REACT_APP_CONTENTSTACK_PREVIEW_TOKEN=YOUR_PREVIEW_TOKEN # Supported Regions: # For AWS North America, set region as US diff --git a/README.md b/README.md index 3d7f3d0..31cc449 100644 --- a/README.md +++ b/README.md @@ -29,6 +29,7 @@ This is a React starter app that integrates with Contentstack's Content Delivery ``` REACT_APP_CONTENTSTACK_API_KEY=YOUR_STACK_API_KEY REACT_APP_CONTENTSTACK_DELIVERY_TOKEN=YOUR_DELIVERY_TOKEN + REACT_APP_CONTENTSTACK_PREVIEW_TOKEN=YOUR_PREVIEW_TOKEN REACT_APP_CONTENTSTACK_ENVIRONMENT=YOUR_ENVIRONMENT REACT_APP_CONTENTSTACK_REGION=YOUR_STACK_REGION ``` @@ -42,7 +43,7 @@ This is a React starter app that integrates with Contentstack's Content Delivery To configure the app with your Contentstack account: -- Replace `YOUR_STACK_API_KEY`, `YOUR_DELIVERY_TOKEN`, `YOUR_ENVIRONMENT` and `YOUR_STACK_REGION` in the `.env` file with your Contentstack API key, delivery token, environment name and region respectively. +- Replace `YOUR_STACK_API_KEY`, `YOUR_DELIVERY_TOKEN`, `YOUR_PREVIEW_TOKEN`, `YOUR_ENVIRONMENT` and `YOUR_STACK_REGION` in the `.env` file with your Contentstack API key, delivery token, environment name and region respectively. **Supported Regions:** @@ -52,6 +53,8 @@ To configure the app with your Contentstack account: - **Azure Europe:** `AZURE_EU` - **GCP North America:** `GCP_NA` +> 🚨 **Important Note:** **Live Preview** is not supported in the **GCP NA** region! 🚨 + ## Usage 1. Once the app is running, navigate to `http://localhost:3000` in your web browser. @@ -62,6 +65,7 @@ To configure the app with your Contentstack account: - Integration with Contentstack's Content Delivery API. - Dynamic rendering of content fetched from Contentstack. +- Live Preview of the Content ## License diff --git a/package-lock.json b/package-lock.json index fc6164e..922d196 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "license": "MIT", "dependencies": { "@contentstack/live-preview-utils": "^2.0.2", + "@contentstack/utils": "^1.3.8", "@contentstack/venus-components": "^2.2.4", "@reduxjs/toolkit": "^2.2.1", "@testing-library/jest-dom": "^5.17.0", @@ -2036,9 +2037,9 @@ } }, "node_modules/@contentstack/utils": { - "version": "1.3.3", - "resolved": "https://registry.npmjs.org/@contentstack/utils/-/utils-1.3.3.tgz", - "integrity": "sha512-Zj2ejyfbxZlXrF1Wl9lhwK2mCCWo5ooiDnSlNA8nupZ1nDsTfouYERgps8r/uyzm18Vda2wBitxloThxKAyzsA==" + "version": "1.3.8", + "resolved": "https://registry.npmjs.org/@contentstack/utils/-/utils-1.3.8.tgz", + "integrity": "sha512-BKZcZs2/odh9nmugLmiNVBEbz34gjfgibZOsRlYV9ux7t+GkfjbELDjWJpKenL6G5Mb270VXVuDbNqkDLK96Zw==" }, "node_modules/@contentstack/venus-components": { "version": "2.2.4", diff --git a/package.json b/package.json index 24022c9..3ae79df 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "author": "Contentstack", "dependencies": { "@contentstack/live-preview-utils": "^2.0.2", + "@contentstack/utils": "^1.3.8", "@contentstack/venus-components": "^2.2.4", "@reduxjs/toolkit": "^2.2.1", "@testing-library/jest-dom": "^5.17.0", diff --git a/src/api/index.ts b/src/api/index.ts index 6d5b6bb..a1f88f1 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -8,6 +8,7 @@ import { } from "../reducer"; import { initializeContentstackSdk } from "../sdk/utils"; import * as Utils from "@contentstack/utils"; +import { addEditableTags } from "@contentstack/utils"; const Stack = initializeContentstackSdk(); @@ -67,6 +68,7 @@ export const fetchHeaderData = async ( dispatch: Dispatch ): Promise => { const data = await getEntry(CONTENT_TYPES.HEADER); + addEditableTags(data[0][0], CONTENT_TYPES.HEADER, true, "en-us"); dispatch(setHeaderData(data[0][0])); }; @@ -74,6 +76,7 @@ export const fetchFooterData = async ( dispatch: Dispatch ): Promise => { const data = await getEntry(CONTENT_TYPES.FOOTER); + addEditableTags(data[0][0], CONTENT_TYPES.FOOTER, true, "en-us"); dispatch(setFooterData(data[0][0])); }; @@ -86,6 +89,7 @@ export const fetchHomePageData = async ( referenceFieldPath: undefined, jsonRtePath: undefined, }); + addEditableTags(data[0], CONTENT_TYPES.PAGE, true, "en-us"); dispatch(setHomePageData(data[0])); }; @@ -115,6 +119,7 @@ export const fetchMenuPageData = async ( referenceFieldPath: ["sections.menu.course.dishes"], jsonRtePath: undefined, }); + addEditableTags(data[0], CONTENT_TYPES.PAGE, true, "en-us"); dispatch(setMenuPageData(data[0].sections[0].menu.course)); setLoading(false); }; diff --git a/src/components/footer/Footer.tsx b/src/components/footer/Footer.tsx index 9076deb..9c7e599 100644 --- a/src/components/footer/Footer.tsx +++ b/src/components/footer/Footer.tsx @@ -13,10 +13,10 @@ const Footer: React.FC = () => {
{navigation_links && (
-

{navigation_links?.title}

+

{navigation_links?.title}

-

{copyright}

+

{copyright}

); }; diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx index 940720e..2caa41a 100644 --- a/src/components/header/Header.tsx +++ b/src/components/header/Header.tsx @@ -18,12 +18,13 @@ const Header: React.FC = () => {
- Logo + Logo