From 6ebd2f342eea2c9f0b0acb954bf68317ba119b6d Mon Sep 17 00:00:00 2001 From: Ashwini-Rathod Date: Tue, 7 Jun 2022 11:06:57 +0530 Subject: [PATCH] made reviw changes --- audience-app/src/App.tsx | 27 +- audience-app/src/Config/index.tsx | 54 -- audience-app/src/RTE/assets/edit-2.svg | 1 - audience-app/src/RTE/assets/info.svg | 1 - .../RTE/audiencePlugin/AudienceComponent.tsx | 74 -- .../src/RTE/audiencePlugin/AudienceModal.tsx | 176 ----- audience-app/src/RTE/audiencePlugin/icons.tsx | 139 ---- audience-app/src/RTE/audiencePlugin/index.tsx | 2 - .../src/RTE/audiencePlugin/lib/data.json | 669 ------------------ .../src/RTE/audiencePlugin/lib/index.ts | 9 - audience-app/src/RTE/audiencePlugin/modal.css | 9 - audience-app/src/RTE/audiencePlugin/style.css | 5 - audience-app/src/RTE/index.tsx | 233 ------ audience-app/src/common/locale/en-us/index.ts | 6 - variable-app/src/App.tsx | 25 - variable-app/src/Config/index.tsx | 44 -- variable-app/src/common/locale/en-us/index.ts | 4 - 17 files changed, 1 insertion(+), 1477 deletions(-) delete mode 100644 audience-app/src/RTE/assets/edit-2.svg delete mode 100644 audience-app/src/RTE/assets/info.svg delete mode 100644 audience-app/src/RTE/audiencePlugin/AudienceComponent.tsx delete mode 100644 audience-app/src/RTE/audiencePlugin/AudienceModal.tsx delete mode 100644 audience-app/src/RTE/audiencePlugin/icons.tsx delete mode 100644 audience-app/src/RTE/audiencePlugin/index.tsx delete mode 100644 audience-app/src/RTE/audiencePlugin/lib/data.json delete mode 100644 audience-app/src/RTE/audiencePlugin/lib/index.ts delete mode 100644 audience-app/src/RTE/audiencePlugin/modal.css delete mode 100644 audience-app/src/RTE/audiencePlugin/style.css delete mode 100644 audience-app/src/RTE/index.tsx diff --git a/audience-app/src/App.tsx b/audience-app/src/App.tsx index 77df29b8..e14d2507 100644 --- a/audience-app/src/App.tsx +++ b/audience-app/src/App.tsx @@ -1,37 +1,12 @@ import React from "react"; -import { HashRouter, Route, Routes, Navigate } from "react-router-dom"; import ConfigScreen from "./Config"; -import RTE from "./RTE"; -/** HomeRedirectHandler - component to nandle redirect based on the window location pathname, - as react Router does not identifies pathname if the app is rendered in an iframe. -*/ -const HomeRedirectHandler = function () { - if (window?.location?.pathname !== "/") { - return ; - } - return null; -}; - -/* App - The main app component that should be rendered */ const App: React.FC = function () { - // console.log("APP RENDERED") return (
- {/* - - } /> - } /> - } /> - - */}
); }; -export default App; - - -// contentstack web : url: http//localhost:3000 -//when http://localhost:3000/rte -> fetch(`url/fetch`) -> js code -> state -> \ No newline at end of file +export default App; \ No newline at end of file diff --git a/audience-app/src/Config/index.tsx b/audience-app/src/Config/index.tsx index 8bd36047..5e6deae6 100644 --- a/audience-app/src/Config/index.tsx +++ b/audience-app/src/Config/index.tsx @@ -1,32 +1,20 @@ -/* Import React modules */ import React, { useState, useEffect } from "react"; -/* Import other node modules */ import { Field, FieldLabel, TextInput, } from "@contentstack/venus-components"; -// For all the available venus components, please refer below doc -// https://venus-storybook.contentstack.com/?path=/docs/components-textinput--default import ContentstackAppSdk from "@contentstack/app-sdk"; -/* Import our modules */ import localeTexts from "../common/locale/en-us"; import utils from "../common/utils"; import { TypeAppSdkConfigState } from "../common/types"; -// import { getDataFromAPI } from '../../services'; //If no services are required, this can be removed\ -/* Import node module CSS */ import "@contentstack/venus-components/build/main.css"; -/* Import our CSS */ -//@ts-ignore import styles from "./style.module.css"; const ConfigScreen: React.FC = function () { const [state, setState] = useState({ installationData: { configuration: { - /* Add all your config fields here */ - /* The key defined here should match with the name attribute - given in the DOM that is being returned at last in this component */ content_type: "", field: "", group_title: "" @@ -41,7 +29,6 @@ const ConfigScreen: React.FC = function () { ContentstackAppSdk.init().then(async (appSdk) => { const sdkConfigData = appSdk?.location?.AppConfigWidget; if (sdkConfigData) { - console.log("sdkConfigData: ",sdkConfigData) const installationDataFromSDK = //@ts-ignore await sdkConfigData.installation.getInstallationData(); @@ -58,14 +45,9 @@ const ConfigScreen: React.FC = function () { }); } }); - // eslint-disable-next-line react-hooks/exhaustive-deps }, []); - /** updateConfig - Function where you should update the state variable - * Call this function whenever any field value is changed in the DOM - * */ const updateConfig = async (e: any) => { - // eslint-disable-next-line prefer-const let { name: fieldName, value: fieldValue } = e.target; const updatedConfig = state?.installationData?.configuration || {}; updatedConfig[fieldName] = fieldValue; @@ -84,49 +66,28 @@ const ConfigScreen: React.FC = function () { return true; }; - /* If need to get any data from API then use, - getDataFromAPI({queryParams, headers, method, body}) function. - Refer services/index.ts for more details and update the API - call there as per requirement. */ - return (
- {/*
*/} {" "} - {/* Change the label caption as per your requirement */} {localeTexts.configFields.field1.label} - {/* Change the help caption as per your requirement */} - {/* */} - {/* - {localeTexts.configFields.field1.instruction} - */} - - {/* */} - {" "} - {/* Change the label caption as per your requirement */} {localeTexts.configFields.field2.label} - {/* Change the help caption as per your requirement */} - {/* */} - {/* - {localeTexts.configFields.field2.instruction} - */} {" "} - {/* Change the label caption as per your requirement */} {localeTexts.configFields.field3.label} - {/* Change the help caption as per your requirement */} - {/* */} - {/* - {localeTexts.configFields.field1.instruction} - */} - - {/* */} - {/* */}
); diff --git a/audience-app/src/RTE/assets/edit-2.svg b/audience-app/src/RTE/assets/edit-2.svg deleted file mode 100644 index 06830c9d..00000000 --- a/audience-app/src/RTE/assets/edit-2.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/audience-app/src/RTE/assets/info.svg b/audience-app/src/RTE/assets/info.svg deleted file mode 100644 index a09fa5f1..00000000 --- a/audience-app/src/RTE/assets/info.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/audience-app/src/RTE/audiencePlugin/AudienceComponent.tsx b/audience-app/src/RTE/audiencePlugin/AudienceComponent.tsx deleted file mode 100644 index 72ac6f26..00000000 --- a/audience-app/src/RTE/audiencePlugin/AudienceComponent.tsx +++ /dev/null @@ -1,74 +0,0 @@ -//@ts-nocheck -import React from "react"; -import { cbModal } from "@contentstack/venus-components"; -import AudienceModal from "./AudienceModal"; - -import "./style.css"; - -export const AudiencePreTag = (props) => { - const { - attributes, - attrs, - children, - audienceList, - savedSelection, - rte, - } = props; - - console.error("props", props, attrs.audiences); - - const handleMouseDown = (event) => { - if (event) event.preventDefault(); - cbModal({ - component: (modalProps) => ( - - ), - - modalProps: { - //@ts-ignore - shouldReturnFocusAfterClose: false, - customClass: "variable-extension-modal", - }, - }); - }; - - return ( - - {`[Audience = ${attrs.audiences.join(", ")} ]`} - {children} - - ); -}; - -export const AudiencePostTag = (props) => { - const { attributes, attrs, children } = props; - - return ( - - {"[AudienceEnd]"} - {children} - - ); -}; \ No newline at end of file diff --git a/audience-app/src/RTE/audiencePlugin/AudienceModal.tsx b/audience-app/src/RTE/audiencePlugin/AudienceModal.tsx deleted file mode 100644 index d5bc1988..00000000 --- a/audience-app/src/RTE/audiencePlugin/AudienceModal.tsx +++ /dev/null @@ -1,176 +0,0 @@ -//@ts-nocheck -import React, { useState, Fragment, useEffect } from "react"; -import { v4 } from "uuid"; - -import { - Button, - ButtonGroup, - ModalBody, - ModalHeader, - ModalFooter, - Select, - Field, -} from "@contentstack/venus-components"; -import { - ExpandCloseIcon, - CheckedIcon, - SemiCheckedIcon, - UncheckedIcon, - ExpandOpenIcon, -} from "./icons"; - -import CheckboxTree from "react-checkbox-tree"; -import 'react-checkbox-tree/lib/react-checkbox-tree.css'; -import "./modal.css"; - -const AudienceModal = (props: any) => { - let { rte, savedSelection, audiences, attrs = {}, slatePath } = props; - console.error( - "mayhem", - props, - savedSelection, - attrs.expanded, - attrs.checked - ); - - const [checked, setChecked] = useState(attrs.checked || []); - const [expanded, setExpanded] = useState(attrs.expanded || []); - - useEffect(() => { - console.error("useeffect", checked, expanded); - }, [checked, expanded]); - const handleAddRegion = (event) => { - event.preventDefault(); - savedSelection = savedSelection || { - anchor: rte.selection.getEnd([]), - focus: rte.selection.getEnd([]) - } - if (savedSelection) { - let modifiedCheckedList: string[] = []; - audiences.forEach((parent) => { - if (checked.includes(parent.label)) { - return modifiedCheckedList.push(parent.label); - } - parent.children.map((child) => { - if (checked.includes(child.label)) { - return modifiedCheckedList.push(child.label); - } - }); - }); - - const audienceId = v4() - .split("-") - .join(""); - - const audiencePost = { - type: "audience-post", - uid: v4() - .split("-") - .join(""), - attrs: { - audienceId, - }, - children: [{ text: "" }], - }; - const audiencePre = { - type: "audience-pre", - uid: v4() - .split("-") - .join(""), - attrs: { - audiences: modifiedCheckedList, - audienceId, - checked, - expanded, - }, - children: [{ text: "" }], - }; - - if (props.attrs) { - rte.setAttrs(audiencePre, { - at: slatePath, - }); - const childPath = rte.selection.after(slatePath); - const endPath = rte.selection.after(childPath.path); - endPath.path.splice(3, 1); - - rte.setAttrs(audiencePost, { - at: endPath.path, - }); - } else { - rte.insertNode(audiencePost, { at: savedSelection.focus }); - rte.insertNode(audiencePre, { at: savedSelection.anchor }); - } - - const savedSelectionPath = savedSelection.anchor.path; - - const newSelection = { - path: [ - ...savedSelectionPath.slice(0, -1), - savedSelectionPath[savedSelectionPath.length - 1] + 2, - ], - offset: 0, - }; - - console.error("savedSelection", newSelection, savedSelection); - rte.selection.set(rte.selection.getEnd([])); - } - - props.closeModal(); - }; - return ( -
- - -
- - { - setChecked(checked); - }} - onExpand={(expanded) => { - setExpanded(expanded); - }} - // nativeCheckboxes={true} - checkModel="all" - icons={{ - check: , - uncheck: , - halfCheck: , - expandOpen: , - expandClose: , - }} - /> - -
- - - - - - - - -
- ); -}; - -export default AudienceModal; \ No newline at end of file diff --git a/audience-app/src/RTE/audiencePlugin/icons.tsx b/audience-app/src/RTE/audiencePlugin/icons.tsx deleted file mode 100644 index 82223c52..00000000 --- a/audience-app/src/RTE/audiencePlugin/icons.tsx +++ /dev/null @@ -1,139 +0,0 @@ -//@ts-nocheck -import * as React from "react"; - -export function ExpandCloseIcon(props: any) { - return ( - - - - - - - - - - - ); -} - -export function CheckedIcon(props) { - return ( - - - - - ); -} - -export function ExpandOpenIcon(props) { - return ( - - - - - - - - - - - ); -} - -export function SemiCheckedIcon(props) { - return ( - - - - - ); -} - -export function UncheckedIcon(props) { - return ( - - - - ); -} - -export function AudienceIcon() { - return ( - - - - ); -} diff --git a/audience-app/src/RTE/audiencePlugin/index.tsx b/audience-app/src/RTE/audiencePlugin/index.tsx deleted file mode 100644 index 98661057..00000000 --- a/audience-app/src/RTE/audiencePlugin/index.tsx +++ /dev/null @@ -1,2 +0,0 @@ -export * as AudienceComponent from './AudienceComponent'; -export * as AudienceModal from './AudienceModal'; diff --git a/audience-app/src/RTE/audiencePlugin/lib/data.json b/audience-app/src/RTE/audiencePlugin/lib/data.json deleted file mode 100644 index 97a32291..00000000 --- a/audience-app/src/RTE/audiencePlugin/lib/data.json +++ /dev/null @@ -1,669 +0,0 @@ -[ - { - "value": "Africa", - "label": "Africa", - "children": [ - { - "value": "Nigeria", - "label": "Nigeria", - "children": [ - { - "value": "Abia", - "label": "Abia" - }, - { - "value": "Adamawa", - "label": "Adamawa" - }, - { - "value": "Anambra", - "label": "Anambra" - }, - { - "value": "Bauchi", - "label": "Bauchi" - } - ] - }, - { - "value": "Ethopia", - "label": "Ethopia", - "children": [ - { - "value": "Afar", - "label": "Afar" - }, - { - "value": "Amhara", - "label": "Amhara" - }, - { - "value": "Oromia", - "label": "Oromia" - }, - { - "value": "Dire Dawa", - "label": "Dire Dawa" - } - ] - }, - { - "value": "Botswana", - "label": "Botswana", - "children": [ - { - "value": "Serowe", - "label": "Serowe" - }, - { - "value": "Selibe", - "label": "Selibe" - }, - { - "value": "Maun", - "label": "Maun" - } - ] - } - ] - }, - { - "value": "Europe", - "label": "Europe", - "children": [ - { - "value": "Northern-Europe", - "label": "Northern-Europe", - "children": [ - { - "value": "Norway", - "label": "Norway", - "children": [ - { - "value": "Oslo", - "label": "Oslo" - }, - { - "value": "Bergen", - "label": "Bergen" - }, - { - "value": "Kirkenes", - "label": "Kirkenes" - } - ] - }, - { - "value": "Finland", - "label": "Finland", - "children": [ - { - "value": "Helsinki", - "label": "Helsinki" - }, - { - "value": "Huittinen", - "label": "Huittinen" - }, - { - "value": "Hyvinkää", - "label": "Hyvinkää" - } - ] - }, - { - "value": "Sweden", - "label": "Sweden", - "children": [ - { - "value": "Götaland", - "label": "Götaland" - }, - { - "value": "Svealand", - "label": "Svealand" - }, - { - "value": "Österland", - "label": "Österland" - } - ] - }, - { - "value": "Denmark", - "label": "Denmark" - } - ] - }, - { - "value": "Western-Europe", - "label": "Western-Europe", - "children": [ - { - "value": "Belgium", - "label": "Belgium", - "children": [ - { - "value": "OsAntwerpenlo", - "label": "OsAntwerpenlo" - }, - { - "value": "BergeLimburgn", - "label": "BergeLimburgn" - }, - { - "value": "Luxembourg", - "label": "Luxembourg" - } - ] - }, - { - "value": "Ireland", - "label": "Ireland", - "children": [ - { - "value": "Connacht", - "label": "Connacht" - }, - { - "value": "Leinster", - "label": "Leinster" - }, - { - "value": "Munster", - "label": "Munster" - } - ] - }, - { - "value": "France", - "label": "France", - "children": [ - { - "value": "Bretagne", - "label": "Bretagne" - }, - { - "value": "Bourgogne", - "label": "Bourgogne" - }, - { - "value": "Corse", - "label": "Corse" - } - ] - }, - { - "value": "Austria", - "label": "Austria", - "children": [ - { - "value": "Tirol", - "label": "Tirol" - }, - { - "value": "Salzburg", - "label": "Salzburg" - }, - { - "value": "Vienna", - "label": "Vienna" - } - ] - } - ] - }, - { - "value": "Eastern-Europe", - "label": "Eastern-Europe", - "children": [ - { - "value": "Poland", - "label": "Poland", - "children": [ - { - "value": "Lublin", - "label": "Lublin" - }, - { - "value": "Lubusz", - "label": "Lubusz" - }, - { - "value": "Opole", - "label": "Opole" - } - ] - }, - { - "value": "Croatia", - "label": "Croatia", - "children": [ - { - "value": "Dalmatia", - "label": "Dalmatia" - }, - { - "value": "Slavonia", - "label": "Slavonia" - }, - { - "value": "Istria", - "label": "Istria" - } - ] - }, - { - "value": "Slovakia", - "label": "Slovakia", - "children": [ - { - "value": "Košice", - "label": "Košice" - }, - { - "value": "Žilina", - "label": "Žilina" - }, - { - "value": "Prešov", - "label": "Prešov" - } - ] - }, - { - "value": "Hungary", - "label": "Hungary", - "children": [ - { - "value": "Budapest", - "label": "Budapest" - }, - { - "value": "Debrecen", - "label": "Debrecen" - }, - { - "value": "Miskolc", - "label": "Miskolc" - } - ] - } - ] - }, - { - "value": "Souther-Europe", - "label": "Souther-Europe", - "children": [ - { - "value": "Greece", - "label": "Greece", - "children": [ - { - "value": "Attica", - "label": "Attica" - }, - { - "value": "Thessaly", - "label": "Thessaly" - }, - { - "value": "Crete", - "label": "Crete" - } - ] - }, - { - "value": "Italy", - "label": "Italy", - "children": [ - { - "value": "Venice", - "label": "Venice" - }, - { - "value": "Florence", - "label": "Florence" - }, - { - "value": "Milan", - "label": "Milan" - } - ] - }, - { - "value": "Serbia", - "label": "Serbia", - "children": [ - { - "value": "Vojvodina", - "label": "Vojvodina" - }, - { - "value": "Belgrade", - "label": "Belgrade" - }, - { - "value": "Western Serbia", - "label": "Western Serbia" - } - ] - }, - { - "value": "Monaco", - "label": "Monaco", - "children": [ - { - "value": "Hovedstaden", - "label": "Hovedstaden" - }, - { - "value": "Midtjylland", - "label": "Midtjylland" - }, - { - "value": "Nordjylland", - "label": "Nordjylland" - } - ] - } - ] - } - ] - }, - - { - "value": "North America", - "label": "North America", - "children": [ - { - "value": "USA", - "label": "USA", - "children": [ - { - "value": "Florida", - "label": "Florida" - }, - { - "value": "Kansas", - "label": "Kansas" - }, - { - "value": "Virginia", - "label": "Virginia" - }, - { - "value": "Las Angeles", - "label": "Las Angeles" - } - ] - }, - { - "value": "Canada", - "label": "Canada", - "children": [ - { - "value": "Alberta", - "label": "Alberta" - }, - { - "value": "British Colombia", - "label": "British Colombia" - }, - { - "value": "NewFoundland", - "label": "NewFoundland" - }, - { - "value": "Nonabut", - "label": "Nonabut" - } - ] - }, - { - "value": "Mexico", - "label": "Mexico", - "children": [ - { - "value": "Campeche", - "label": "Campeche" - }, - { - "value": "Chiapas", - "label": "Chiapas" - }, - { - "value": "Colima", - "label": "Colima" - }, - { - "value": "Durango", - "label": "Durango" - } - ] - } - ] - }, - { - "value": "Central America", - "label": "Central America", - "children": [ - { - "value": "Belize", - "label": "Belize", - "children": [ - { - "value": "Cayo", - "label": "Cayo" - }, - { - "value": "Corozal", - "label": "Corozal" - }, - { - "value": "Orange Walk", - "label": "Orange Walk" - }, - { - "value": "Toledo", - "label": "Toledo" - } - ] - }, - { - "value": "Costa Rica", - "label": "Costa Rica", - "children": [ - { - "value": "Alajuela", - "label": "Alajuela" - }, - { - "value": "Cartago", - "label": "Cartago" - }, - { - "value": "Guanacaste", - "label": "Guanacaste" - }, - { - "value": "Heredia", - "label": "Heredia" - } - ] - }, - { - "value": "Honduras", - "label": "Honduras", - "children": [ - { - "value": "Copan", - "label": "Copan" - }, - { - "value": "Cortes", - "label": "Cortes" - }, - { - "value": "Colon", - "label": "Colon" - }, - { - "value": "Lempira", - "label": "Lempira" - } - ] - } - ] - }, - { - "value": "South America", - "label": "South America", - "children": [ - { - "value": "Brazil", - "label": "Brazil", - "children": [ - { - "value": "Alagoas", - "label": "Alagoas" - }, - { - "value": "Amapá", - "label": "Amapá" - }, - { - "value": "Amazonas", - "label": "Amazonas" - }, - { - "value": "Bahia", - "label": "Bahia" - } - ] - }, - { - "value": "Argentina", - "label": "Argentina", - "children": [ - { - "value": "Buenos Aires", - "label": "Buenos Aires" - }, - { - "value": "Catamarca", - "label": "Catamarca" - }, - { - "value": "Chaco", - "label": "Chaco" - }, - { - "value": "Chordoba", - "label": "Chordoba" - } - ] - }, - { - "value": "Colombia", - "label": "Colombia", - "children": [ - { - "value": "Antioquia", - "label": "Antioquia" - }, - { - "value": "Boyacá", - "label": "Boyacá" - }, - { - "value": "Bolívar", - "label": "Bolívar" - }, - { - "value": "Panama", - "label": "Panama" - } - ] - } - ] - }, - { - "value": "Asia_Pacific", - "label": "Asia_Pacific", - "children": [ - { - "value": "India", - "label": "India", - "children": [ - { - "value": "Maharashtra", - "label": "Maharashtra" - }, - { - "value": "Goa", - "label": "Goa" - }, - { - "value": "Madhya Pradesh", - "label": "Madhya Pradesh" - } - ] - }, - { - "value": "China", - "label": "China", - "children": [ - { - "value": "Fujian", - "label": "Fujian" - }, - { - "value": "Anhui", - "label": "Anhui" - }, - { - "value": "Gansu", - "label": "Gansu" - } - ] - }, - { - "value": "Indonesia", - "label": "Indonesia", - "children": [ - { - "value": "Bantan", - "label": "Bantan" - }, - { - "value": "Gorontalo", - "label": "Gorontalo" - }, - { - "value": "North Maluku", - "label": "North Maluku" - } - ] - }, - { - "value": "Bangladesh", - "label": "Bangladesh", - "children": [ - { - "value": "Rangpur", - "label": "Rangpur" - }, - { - "value": "Mymensingh", - "label": "Mymensingh" - }, - { - "value": "Mongla", - "label": "Mongla" - } - ] - } - ] - } - ] \ No newline at end of file diff --git a/audience-app/src/RTE/audiencePlugin/lib/index.ts b/audience-app/src/RTE/audiencePlugin/lib/index.ts deleted file mode 100644 index 4a80a16c..00000000 --- a/audience-app/src/RTE/audiencePlugin/lib/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -export const fieldExtractor = (group: any[] = [], group_title = "title") => { - return group.map((field) => { - if (!field[group_title]) throw new Error("field is missing"); - return { - label: field[group_title], - value: field[group_title], - }; - }); -}; diff --git a/audience-app/src/RTE/audiencePlugin/modal.css b/audience-app/src/RTE/audiencePlugin/modal.css deleted file mode 100644 index 06c9f1e0..00000000 --- a/audience-app/src/RTE/audiencePlugin/modal.css +++ /dev/null @@ -1,9 +0,0 @@ -.variable-extension-modal .ReactModal__Content__body { - height: 25rem; -} - -.react-checkbox-tree label { - display: flex; - align-items: center; - font-family: Inter, sans-serif; -} \ No newline at end of file diff --git a/audience-app/src/RTE/audiencePlugin/style.css b/audience-app/src/RTE/audiencePlugin/style.css deleted file mode 100644 index 974c5c03..00000000 --- a/audience-app/src/RTE/audiencePlugin/style.css +++ /dev/null @@ -1,5 +0,0 @@ -.audience-plugin { - color: #6c5ce7; - background-color: #efedfc; - padding: 0 2px; -} diff --git a/audience-app/src/RTE/index.tsx b/audience-app/src/RTE/index.tsx deleted file mode 100644 index a868a974..00000000 --- a/audience-app/src/RTE/index.tsx +++ /dev/null @@ -1,233 +0,0 @@ -/** @jsx jsx */ -//@ts-nocheck -import { jsx } from "@emotion/core"; - -// 1 include app sdk -import ContentstackSDK from "@contentstack/app-sdk"; -import { - AudiencePostTag, - AudiencePreTag, -} from "./audiencePlugin/AudienceComponent"; -import AudienceModal from "./audiencePlugin/AudienceModal"; -import { cbModal } from "@contentstack/venus-components"; - -import { fieldExtractor } from "./audiencePlugin/lib"; -import { AudienceIcon } from "./audiencePlugin/icons"; - -// step 2 initialize contentstack app sdk -export default ContentstackSDK.init().then(async (sdk) => { - console.log("ContentstackSDK.init() for AUDIENCE") - const extensionObj = await sdk["location"]; - const RTE = await extensionObj["RTEPlugin"]; - - const config = { - content_type: "audience", - field: "group", - group_title: "title", - }; - try { - const query = await sdk.stack - .ContentType(config.content_type) - .Entry.Query() - .find(); - - const entries = query.entries || []; - - const audiences = entries.map((entry) => { - const audience = { - label: entry.title, - value: entry.title, - children: [], - }; - - if (config.field) { - if (!entry.hasOwnProperty(config.field)) - throw Error("invalid group title"); - - audience.children = fieldExtractor( - entry[config.field], - config.group_title - ); - } else { - if (!entry.hasOwnProperty("group")) - throw Error("invalid group title"); - - audience.children = fieldExtractor( - entry.group, - config.group_title - ); - } - - return audience; - }); - - const AudiencePlugin = RTE("audience", () => ({ - title: "Audience", - icon: , - dnd: { - disable: true, - hideSelectionBackground: true, - }, - elementType: ["inline"], - displayOn: ["toolbar"], - })); - - const AudiencePre = RTE("audience-pre", (rte) => ({ - Component: (props) => { - const savedSelection = rte.selection.get(); - return ( - - ); - }, - elementType: ["inline", "void"], - dnd: { - disable: true, - hideSelectionBackground: true, - }, - displayOn: [], - })); - - const AudiencePost = RTE("audience-post", () => ({ - Component: AudiencePostTag, - elementType: ["inline", "void"], - dnd: { - disable: true, - hideSelectionBackground: true, - }, - displayOn: [], - })); - - AudiencePlugin.on("exec", (rte) => { - const savedSelection = rte.selection.get(); - cbModal({ - component: (props) => ( - - ), - - modalProps: { - shouldReturnFocusAfterClose: false, - customClass: "variable-extension-modal", - }, - }); - }); - - AudiencePre.on("deleteBackward", (props) => { - const { rte } = props; - - const selection = rte.selection.get(); - const previousElementLocation = rte.selection.before(selection); - - if (previousElementLocation) { - const [match] = rte.getNodes({ - at: previousElementLocation, - match: (n) => n.type === "audience-pre", - mode: "lowest", - }); - - if (match) { - const element: any = match[0]; - const path = match[1]; - - const start = { - offset: 0, - path: [...path, 0], - }; - - if ( - rte.selection.isPointEqual( - previousElementLocation, - start - ) - ) { - const audienceId = element?.attrs?.audienceId; - if (audienceId) { - for (const [element] of rte.generators.elements()) { - const entry: any = { ...element }; - if (entry.type === "audience-post") { - if ( - audienceId === entry?.attrs?.audienceId - ) { - rte.removeNode(element); - return; - } - } - } - } - } - } - } - }); - - AudiencePost.on("deleteBackward", (props) => { - const { rte } = props; - - const selection = rte.selection.get(); - const previousElementLocation = rte.selection.before(selection); - - if (previousElementLocation) { - const [match] = rte.getNodes({ - at: previousElementLocation, - match: (n) => n.type === "audience-post", - mode: "lowest", - }); - - if (match) { - const element: any = match[0]; - const path = match[1]; - - const start = { - offset: 0, - path: [...path, 0], - }; - - if ( - rte.selection.isPointEqual( - previousElementLocation, - start - ) - ) { - const audienceId = element?.attrs?.audienceId; - if (audienceId) { - for (const [element] of rte.generators.elements()) { - const entry: any = { ...element }; - if (entry.type === "audience-pre") { - if ( - audienceId === entry?.attrs?.audienceId - ) { - rte.removeNode(element); - return; - } - } - } - } - } - } - } - }); - - return { - AudiencePlugin, - AudiencePre, - AudiencePost - } - } catch (err) { - console.error("errr", err); - return [] - } - - // step 5 return the plugin -}).catch(err => { - console.log('err', err); -}); - -// blank boilerplate diff --git a/audience-app/src/common/locale/en-us/index.ts b/audience-app/src/common/locale/en-us/index.ts index f10cb5c7..c2c6dce9 100644 --- a/audience-app/src/common/locale/en-us/index.ts +++ b/audience-app/src/common/locale/en-us/index.ts @@ -2,21 +2,15 @@ const localeTexts = { configFields: { field1: { label: "Content Type UID", - // help: "Help text for field 1", placeholder: "content_type_uid", - // instruction: "Instruction for field 1", }, field2: { label: "Field", - // help: "Help text for field 2", placeholder: "field_uid", - // instruction: "Instruction for field 2", }, field3: { label: "Group Title", - // help: "Help text for field 2", placeholder: "group_title", - // instruction: "Instruction for field 2", }, }, }; diff --git a/variable-app/src/App.tsx b/variable-app/src/App.tsx index 28060e4f..96f617a8 100644 --- a/variable-app/src/App.tsx +++ b/variable-app/src/App.tsx @@ -1,37 +1,12 @@ import React from "react"; -import { HashRouter, Route, Routes, Navigate } from "react-router-dom"; import ConfigScreen from "./Config"; -// import RTE from "./RTE"; -/** HomeRedirectHandler - component to nandle redirect based on the window location pathname, - as react Router does not identifies pathname if the app is rendered in an iframe. -*/ -const HomeRedirectHandler = function () { - if (window?.location?.pathname !== "/") { - return ; - } - return null; -}; - -/* App - The main app component that should be rendered */ const App: React.FC = function () { - // console.log("APP RENDERED") return (
- {/* - - } /> - } /> - } /> - - */}
); }; export default App; - - -// contentstack web : url: http//localhost:3000 -//when http://localhost:3000/rte -> fetch(`url/fetch`) -> js code -> state -> \ No newline at end of file diff --git a/variable-app/src/Config/index.tsx b/variable-app/src/Config/index.tsx index 078fcfab..6d8b48c8 100644 --- a/variable-app/src/Config/index.tsx +++ b/variable-app/src/Config/index.tsx @@ -1,22 +1,14 @@ -/* Import React modules */ import React, { useState, useEffect } from "react"; -/* Import other node modules */ import { Field, FieldLabel, TextInput, } from "@contentstack/venus-components"; -// For all the available venus components, please refer below doc -// https://venus-storybook.contentstack.com/?path=/docs/components-textinput--default import ContentstackAppSdk from "@contentstack/app-sdk"; -/* Import our modules */ import localeTexts from "../common/locale/en-us"; import utils from "../common/utils"; import { TypeAppSdkConfigState } from "../common/types"; -// import { getDataFromAPI } from '../../services'; //If no services are required, this can be removed\ -/* Import node module CSS */ import "@contentstack/venus-components/build/main.css"; -/* Import our CSS */ //@ts-ignore import styles from "./style.module.css"; @@ -24,9 +16,6 @@ const ConfigScreen: React.FC = function () { const [state, setState] = useState({ installationData: { configuration: { - /* Add all your config fields here */ - /* The key defined here should match with the name attribute - given in the DOM that is being returned at last in this component */ content_type: "", field: "", }, @@ -40,7 +29,6 @@ const ConfigScreen: React.FC = function () { ContentstackAppSdk.init().then(async (appSdk) => { const sdkConfigData = appSdk?.location?.AppConfigWidget; if (sdkConfigData) { - console.log("sdkConfigData: ",sdkConfigData) const installationDataFromSDK = //@ts-ignore await sdkConfigData.installation.getInstallationData(); @@ -57,14 +45,9 @@ const ConfigScreen: React.FC = function () { }); } }); - // eslint-disable-next-line react-hooks/exhaustive-deps }, []); - /** updateConfig - Function where you should update the state variable - * Call this function whenever any field value is changed in the DOM - * */ const updateConfig = async (e: any) => { - // eslint-disable-next-line prefer-const let { name: fieldName, value: fieldValue } = e.target; const updatedConfig = state?.installationData?.configuration || {}; updatedConfig[fieldName] = fieldValue; @@ -83,49 +66,28 @@ const ConfigScreen: React.FC = function () { return true; }; - /* If need to get any data from API then use, - getDataFromAPI({queryParams, headers, method, body}) function. - Refer services/index.ts for more details and update the API - call there as per requirement. */ - return (
- {/*
*/} {" "} - {/* Change the label caption as per your requirement */} {localeTexts.configFields.field1.label} - {/* Change the help caption as per your requirement */} - {/* */} - {/* - {localeTexts.configFields.field1.instruction} - */} - - {/* */} - {" "} - {/* Change the label caption as per your requirement */} {localeTexts.configFields.field2.label} - {/* Change the help caption as per your requirement */} - {/* */} - {/* - {localeTexts.configFields.field2.instruction} - */} - - {/* */} - {/* */}
); diff --git a/variable-app/src/common/locale/en-us/index.ts b/variable-app/src/common/locale/en-us/index.ts index 212041a0..94a0ca7c 100644 --- a/variable-app/src/common/locale/en-us/index.ts +++ b/variable-app/src/common/locale/en-us/index.ts @@ -2,15 +2,11 @@ const localeTexts = { configFields: { field1: { label: "Content Type UID", - // help: "Help text for field 1", placeholder: "content_type_uid", - // instruction: "Instruction for field 1", }, field2: { label: "Field", - // help: "Help text for field 2", placeholder: "field_uid", - // instruction: "Instruction for field 2", }, }, };