From 95bbfe646e432fc445c990a89f5bb65b4345f18b Mon Sep 17 00:00:00 2001 From: Hardik Sharma <hardik00051@gmail.com> Date: Fri, 19 Aug 2022 15:36:30 +0530 Subject: [PATCH] chore: added formatting, removed mock data --- .../services/contentPagesRegistryService.ts | 21 +- packages/content-pages/src/App.js | 4 +- .../components/CollapsibleBlockComponent.js | 5 +- .../src/components/RichtextBlockComponent.js | 12 +- packages/content-pages/src/components/mock.js | 1100 ----------------- .../content-pages/src/pages/ContentPage.js | 58 +- 6 files changed, 50 insertions(+), 1150 deletions(-) delete mode 100644 packages/content-pages/src/components/mock.js diff --git a/packages/common-lib/src/services/contentPagesRegistryService.ts b/packages/common-lib/src/services/contentPagesRegistryService.ts index bf4a0b84..15f3d786 100644 --- a/packages/common-lib/src/services/contentPagesRegistryService.ts +++ b/packages/common-lib/src/services/contentPagesRegistryService.ts @@ -1,23 +1,22 @@ import { get, post, update as coreUpdate } from './RestClient' import qs from 'qs' -export const getContentPageData = async (slug="", header = {}) => { +export const getContentPageData = async (slug = '', header = {}) => { let headers = { ...header, Authorization: 'Bearer ' + localStorage.getItem('token') } - const result = await get(`http://localhost:3000/api/v1/contentPages/${slug}`, { - headers - }) + const result = await get( + `http://localhost:3000/api/v1/contentPages/${slug}`, + { + headers + } + ) if (result.data.data) { - console.log(result); - return result.data.data; + console.log(result) + return result.data.data } else { - return {error: 404} + return { error: 404 } } } - - - - diff --git a/packages/content-pages/src/App.js b/packages/content-pages/src/App.js index 70ff4cdc..a3fa4110 100644 --- a/packages/content-pages/src/App.js +++ b/packages/content-pages/src/App.js @@ -30,8 +30,8 @@ function App() { }, { path: "*", - component: FourOFour - } + component: FourOFour, + }, ]; const LoginComponent = React.lazy(() => import("core/Login")); diff --git a/packages/content-pages/src/components/CollapsibleBlockComponent.js b/packages/content-pages/src/components/CollapsibleBlockComponent.js index cc886694..7540e792 100644 --- a/packages/content-pages/src/components/CollapsibleBlockComponent.js +++ b/packages/content-pages/src/components/CollapsibleBlockComponent.js @@ -1,6 +1,9 @@ import { BodyMedium, Collapsible } from "@shiksha/common-lib"; -const CollapsibleBlockComponent = ({ collapsibleHeader, collapsibleContent }) => { +const CollapsibleBlockComponent = ({ + collapsibleHeader, + collapsibleContent, +}) => { return ( <Collapsible defaultCollapse diff --git a/packages/content-pages/src/components/RichtextBlockComponent.js b/packages/content-pages/src/components/RichtextBlockComponent.js index 8358372e..011de1f0 100644 --- a/packages/content-pages/src/components/RichtextBlockComponent.js +++ b/packages/content-pages/src/components/RichtextBlockComponent.js @@ -1,12 +1,9 @@ -import { Box } from "@shiksha/common-lib"; import { useEffect, useState } from "react"; import { EditorState, convertToRaw, convertFromRaw } from "draft-js"; import draftToHtml from "draftjs-to-html"; -import { mock1, mock2 } from "./mock"; import DOMPurify from "isomorphic-dompurify"; -console.log(mock1); -export default function RichtextBlockComponent({initialData}) { +export default function RichtextBlockComponent({ initialData }) { const [editorState, setEditorState] = useState(() => EditorState.createEmpty() ); @@ -15,7 +12,6 @@ export default function RichtextBlockComponent({initialData}) { useEffect(() => { if (initialData) { const rawContent = convertFromRaw(initialData); - console.log(rawContent, editorState); setEditorState(EditorState.createWithContent(rawContent)); let currentContentAsHTML = draftToHtml( convertToRaw(editorState.getCurrentContent()) @@ -24,5 +20,9 @@ export default function RichtextBlockComponent({initialData}) { } }, [convertedContent]); - return <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(convertedContent) }}></div>; + return ( + <div + dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(convertedContent) }} + ></div> + ); } diff --git a/packages/content-pages/src/components/mock.js b/packages/content-pages/src/components/mock.js deleted file mode 100644 index d7c42a72..00000000 --- a/packages/content-pages/src/components/mock.js +++ /dev/null @@ -1,1100 +0,0 @@ -export const mock = { - blocks: [ - { - key: "637gr", - text: "React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.", - type: "unstyled", - depth: 0, - inlineStyleRanges: [ - [ - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - ], - [ - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - ], - [ - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - ], - [ - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - ], - [ - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - ], - [ - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - ], - ], - entityRanges: [], - data: { - "text-align": "start", - }, - }, - { - key: "bkek1", - text: "Declarative views make your code more predictable and easier to debug. ", - type: "blockquote", - depth: 0, - inlineStyleRanges: [ - [ - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - ], - [ - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - ], - [ - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - null, - ], - ], - entityRanges: [], - data: { - "text-align": "start", - }, - }, - { - key: "5atpm", - text: "", - type: "unstyled", - depth: 0, - inlineStyleRanges: [], - entityRanges: [], - data: {}, - }, - ], - entityMap: {}, -}; - -export const mock1 = { - entityMap: { - 0: { - type: "LINK", - mutability: "MUTABLE", - data: { - url: "http://www.google.com", - targetOption: "_blank", - }, - }, - }, - blocks: [ - { - key: "dlmd", - text: "This is some bold text\nwhile this is italicised", - type: "unstyled", - depth: 0, - inlineStyleRanges: [ - { - offset: 0, - length: 23, - style: "BOLD", - }, - { - offset: 23, - length: 24, - style: "ITALIC", - }, - ], - entityRanges: [], - data: {}, - }, - { - key: "7112a", - text: "this is underlined after a space", - type: "unstyled", - depth: 0, - inlineStyleRanges: [ - { - offset: 0, - length: 32, - style: "UNDERLINE", - }, - ], - entityRanges: [], - data: {}, - }, - { - key: "7qqn6", - text: "and this is a link ", - type: "unstyled", - depth: 0, - inlineStyleRanges: [], - entityRanges: [ - { - offset: 0, - length: 18, - key: 0, - }, - ], - data: {}, - }, - ], -}; - -export const mock2 = { - entityMap: { - 0: { - type: "LINK", - mutability: "MUTABLE", - data: { - url: "http://www.google.com", - targetOption: "_blank", - }, - }, - }, - blocks: [ - { - key: "dlmd", - text: "This is some bold text\nwhile this is italicised", - type: "unstyled", - depth: 0, - inlineStyleRanges: [ - { - offset: 0, - length: 23, - style: "BOLD", - }, - { - offset: 23, - length: 24, - style: "ITALIC", - }, - ], - entityRanges: [], - data: { - "text-align": "center", - }, - }, - { - key: "7112a", - text: "this is underlined after a space", - type: "unstyled", - depth: 0, - inlineStyleRanges: [ - { - offset: 0, - length: 32, - style: "UNDERLINE", - }, - ], - entityRanges: [], - data: { - "text-align": "center", - }, - }, - { - key: "7qqn6", - text: "and this is a link ", - type: "unstyled", - depth: 0, - inlineStyleRanges: [], - entityRanges: [ - { - offset: 0, - length: 18, - key: 0, - }, - ], - data: { - "text-align": "center", - }, - }, - ], -}; diff --git a/packages/content-pages/src/pages/ContentPage.js b/packages/content-pages/src/pages/ContentPage.js index 3e891247..759b13cb 100644 --- a/packages/content-pages/src/pages/ContentPage.js +++ b/packages/content-pages/src/pages/ContentPage.js @@ -9,14 +9,12 @@ import { contentPagesRegistryService } from "@shiksha/common-lib"; export default function ContentPage() { const { slug } = useParams(); - console.log(slug); const [pageData, setPageData] = useState([]); useEffect(() => { contentPagesRegistryService.getContentPageData(slug).then((res) => { setPageData(res[0]); - console.log(res[0]); }); }, []); return ( @@ -53,34 +51,34 @@ export default function ContentPage() { > <h1>{pageData?.title}</h1> <VStack width="100%" spacing="4" px="10"> - {pageData?.blocks?.map((val, idx) => { - switch (val?.blockType) { - case "richtext": - return ( - <Box key={idx} mb="2"> - <RichtextBlockComponent - initialData={JSON.parse(val?.blockData?.richtextData)} - ></RichtextBlockComponent> - </Box> - ); - case "image": - return ( - <Box key={idx} mb="2"> - <ImageBlockComponent - src={val?.blockData?.imgSrc} - ></ImageBlockComponent> - </Box> - ); - case "collapsible": - return ( - <Box key={idx} mb="2"> - <CollapsibleBlockComponent - {...val?.blockData} - ></CollapsibleBlockComponent> - </Box> - ); - } - })} + {pageData?.blocks?.map((val, idx) => { + switch (val?.blockType) { + case "richtext": + return ( + <Box key={idx} mb="2"> + <RichtextBlockComponent + initialData={JSON.parse(val?.blockData?.richtextData)} + ></RichtextBlockComponent> + </Box> + ); + case "image": + return ( + <Box key={idx} mb="2"> + <ImageBlockComponent + src={val?.blockData?.imgSrc} + ></ImageBlockComponent> + </Box> + ); + case "collapsible": + return ( + <Box key={idx} mb="2"> + <CollapsibleBlockComponent + {...val?.blockData} + ></CollapsibleBlockComponent> + </Box> + ); + } + })} </VStack> </Layout> );