From b59fce4bbd691b3b8a80c2e08a3670e774886480 Mon Sep 17 00:00:00 2001 From: jensp Date: Thu, 7 Jun 2018 13:06:24 +0000 Subject: [PATCH] CCM NG: Simplification of PageModelEditor code. Removed unnecessary usage of React's Context API git-svn-id: https://svn.libreccm.org/ccm/ccm_ng@5499 8810af33-2d31-482b-a856-94f89814c4df --- .../org/libreccm/pagemodel/rs/PageModels.java | 13 +- .../ccm-pagemodelseditor/PageModelsEditor.tsx | 378 +++++++++++------- 2 files changed, 237 insertions(+), 154 deletions(-) diff --git a/ccm-core/src/main/java/org/libreccm/pagemodel/rs/PageModels.java b/ccm-core/src/main/java/org/libreccm/pagemodel/rs/PageModels.java index 1e3d15c05..5e7e4c2b5 100644 --- a/ccm-core/src/main/java/org/libreccm/pagemodel/rs/PageModels.java +++ b/ccm-core/src/main/java/org/libreccm/pagemodel/rs/PageModels.java @@ -18,6 +18,9 @@ */ package org.libreccm.pagemodel.rs; +import com.arsdigita.kernel.KernelConfig; + +import org.libreccm.configuration.ConfigurationManager; import org.libreccm.core.CoreConstants; import org.libreccm.l10n.GlobalizationHelper; import org.libreccm.pagemodel.PageModel; @@ -64,6 +67,9 @@ public class PageModels { @Inject private GlobalizationHelper globalizationHelper; + @Inject + private ConfigurationManager confManager; + /** * Retrieves all {@link PageModel}s available for an {@link CcmApplication}. * @@ -177,6 +183,9 @@ public class PageModels { final CcmApplication app = controller .findCcmApplication(String.format("/%s/", appPath)); + final KernelConfig kernelConfig = confManager + .findConfiguration(KernelConfig.class); + final PageModel pageModel; if (controller.existsPageModel(app, pageModelName)) { pageModel = controller.findPageModel(app, pageModelName); @@ -186,13 +195,13 @@ public class PageModels { } pageModel.setName(pageModelName); if (pageModelData.containsKey("title")) { - pageModel.getTitle().addValue(Locale.ROOT, + pageModel.getTitle().addValue(kernelConfig.getDefaultLocale(), pageModelData.getString("title")); } if (pageModelData.containsKey("description")) { pageModel .getDescription() - .addValue(Locale.ROOT, + .addValue(kernelConfig.getDefaultLocale(), pageModelData.getString("description")); } diff --git a/ccm-pagemodelseditor/src/main/typescript/ccm-pagemodelseditor/PageModelsEditor.tsx b/ccm-pagemodelseditor/src/main/typescript/ccm-pagemodelseditor/PageModelsEditor.tsx index b4d7e7ed5..eb1b94682 100644 --- a/ccm-pagemodelseditor/src/main/typescript/ccm-pagemodelseditor/PageModelsEditor.tsx +++ b/ccm-pagemodelseditor/src/main/typescript/ccm-pagemodelseditor/PageModelsEditor.tsx @@ -3,6 +3,7 @@ import { PageModel, PageModelVersion } from "./datatypes"; export { PageModelEditor, + PageModelEditorState, // PageModelEditorProps, // PageModelEditorState, }; @@ -22,114 +23,113 @@ export { * ); */ -interface PageModelEditorContext { +// interface PageModelEditorContext { +// +// pageModelSelected: boolean; +// selectedPageModel: PageModel; +// } - pageModelSelected: boolean; - selectedPageModel: PageModel; -} +// const newPageModel: PageModel = { +// description: "New PageModel", +// modelUuid: "", +// name: "newPageModel", +// pageModelId: 0, +// title: "A new PageModel", +// type: "", +// uuid: "", +// version: PageModelVersion.DRAFT, +// }; -const newPageModel: PageModel = { - description: "New PageModel", - modelUuid: "", - name: "newPageModel", - pageModelId: 0, - title: "A new PageModel", - type: "", - uuid: "", - version: PageModelVersion.DRAFT, -}; - -const pageModelEditorContext: React.Context - = React.createContext({ - pageModelSelected: false, - selectedPageModel: newPageModel, - }); +// const pageModelEditorContext: React.Context +// = React.createContext({ +// pageModelSelected: false, +// selectedPageModel: newPageModel, +// }); interface PageModelsListProps { ccmApplication: string; dispatcherPrefix: string; + pageModels: PageModel[], selectPageModel: (selectedPageModel: PageModel) => void; } -interface PageModelsListState { - - errorMsg: string | null; - pageModels: PageModel[]; -} +// interface PageModelsListState { +// +// errorMsg: string | null; +// pageModels: PageModel[]; +// } class PageModelsList - extends React.Component { + extends React.Component { constructor(props: PageModelsListProps) { super(props); - this.state = { - errorMsg: null, - pageModels: [], - }; + // this.state = { + // errorMsg: null, + // pageModels: [], + // }; } - public componentDidMount() { - - const init: RequestInit = { - credentials: "same-origin", - method: "GET", - }; - - const url: string = `${this.props.dispatcherPrefix}` - + `/page-models/${this.props.ccmApplication}`; - - fetch(url, init) - .then((response: Response) => { - if (response.ok) { - response - .json() - .then((pageModels: PageModel[]) => { - this.setState({ - ...this.state, - pageModels, - }); - }) - .catch((error) => { - this.setState({ - ...this.state, - errorMsg: `Failed to retrieve PageModels from ` - + `${url}: ${error.message}`, - }); - }); - } else { - this.setState({ - ...this.state, - errorMsg: `Failed to retrieve PageModels from ` - + `\"${url}\": HTTP Status Code: ` - + `${response.status}; ` - + `message: ${response.statusText}`, - }); - } - }) - .catch((error) => { - this.setState({ - ...this.state, - errorMsg: `Failed to retrieve PageModels from ` - + `${url}: ${error.message}`, - }); - }); - } + // public componentDidMount() { + // + // const init: RequestInit = { + // credentials: "same-origin", + // method: "GET", + // }; + // + // const url: string = `${this.props.dispatcherPrefix}` + // + `/page-models/${this.props.ccmApplication}`; + // + // fetch(url, init) + // .then((response: Response) => { + // if (response.ok) { + // response + // .json() + // .then((pageModels: PageModel[]) => { + // this.setState({ + // ...this.state, + // pageModels, + // }); + // }) + // .catch((error) => { + // this.setState({ + // ...this.state, + // errorMsg: `Failed to retrieve PageModels from ` + // + `${url}: ${error.message}`, + // }); + // }); + // } else { + // this.setState({ + // ...this.state, + // errorMsg: `Failed to retrieve PageModels from ` + // + `\"${url}\": HTTP Status Code: ` + // + `${response.status}; ` + // + `message: ${response.statusText}`, + // }); + // } + // }) + // .catch((error) => { + // this.setState({ + // ...this.state, + // errorMsg: `Failed to retrieve PageModels from ` + // + `${url}: ${error.message}`, + // }); + // }); + // } public render(): React.ReactNode { return
- {this.state.errorMsg !== null && -
- {this.state.errorMsg} -
- } - {this.state.pageModels.length > 0 && + {this.props.pageModels.length > 0 &&
    - {this.state.pageModels.map((pageModel: PageModel) => - , + {this.props.pageModels + .map((pageModel: PageModel, index: number) => + , )}
} @@ -138,6 +138,7 @@ class PageModelsList } interface PageModelListItemProps { + index: number, pageModel: PageModel; selectPageModel: (selectedPageModel: PageModel) => void; } @@ -155,6 +156,7 @@ class PageModelListItem href="#" onClick={ (event) => { + event.preventDefault(); // console.log("A PageModel has been selected"); this.props.selectPageModel(this.props.pageModel); } @@ -170,6 +172,7 @@ interface PageModelComponentProps { ccmApplication: string; dispatcherPrefix: string; pageModel: PageModel; + reload: () => void; } interface PageModelComponentState { @@ -379,6 +382,7 @@ class PageModelComponent ...this.state, editMode: false, }); + this.props.reload(); } else { this.setState({ ...this.state, @@ -409,100 +413,160 @@ class PageModelComponent interface PageModelEditorState { + errorMessages: string[], pageModels: PageModel[]; - selectedPageModelIndex: number; + selectedPageModel: PageModel | null; } class PageModelEditor - extends React.Component<{}, any> { + extends React.Component<{}, PageModelEditorState> { constructor(props: any) { super(props); + // this.state = { + // // selectedPageModel: newPageModel, + // context: { + // pageModelSelected: false, + // selectedPageModel: newPageModel, + // }, + // }; this.state = { - // selectedPageModel: newPageModel, - context: { - pageModelSelected: false, - selectedPageModel: newPageModel, - }, - }; + errorMessages: [], + pageModels: [], + selectedPageModel: null, + } + } + + public componentDidMount() { + + this.fetchPageModels(); } public render(): React.ReactNode { return - -
-
-
-
-
-
-

- Available PageModels +
+
+
+
+
+
+

+ Available PageModels

-
- - { - this.setState((state: any) => { - // console.log("Updating state for selectedPageModel"); - return { - // ...state, - context: { - pageModelSelected: true, - selectedPageModel: pageModel, - }, - }; - }); - }} /> - -
- + ; } + private fetchPageModels(): void { + + const init: RequestInit = { + credentials: "same-origin", + method: "GET", + } + + const url: string = `${this.getDispatcherPrefix()}` + + `/page-models/${this.getCcmApplication()}`; + + fetch(url, init) + .then((response) => { + if (response.ok) { + response + .json() + .then((pageModels: PageModel[]) => { + this.setState({ + ...this.state, + pageModels + }) + }) + .catch((error) => { + const errorMessages: string[] = this + .state.errorMessages; + errorMessages.push(`Failed to retrieve PageModels ` + + `from ${url}: ${error.message}`); + + this.setState({ + ...this.state, + errorMessages, + }); + }); + } else { + const errorMessages: string[] = this + .state.errorMessages; + errorMessages.push(`Failed to retrieve PageModels from ` + + `\"${url}\": HTTP Status Code: ` + + `${response.status}; ` + + `message: ${response.statusText}`); + + this.setState({ + ...this.state, + errorMessages, + }); + } + }) + .catch((error) => { + const errorMessages: string[] = this + .state.errorMessages; + errorMessages.push(`Failed to retrieve PageModels ` + + `from ${url}: ${error.message}`); + + this.setState({ + ...this.state, + errorMessages, + }); + }); + } + + private getDispatcherPrefix(): string { const dataElem: HTMLElement | null = document @@ -539,6 +603,16 @@ class PageModelEditor } } + private reload(): void { + + this.fetchPageModels(); + // this.setState({ + // ...this.state, + // selectedPageModel: null, + // }); + } + + // private setSelectedPageModel(selectedPageModel: PageModel): void { // // this.setState((state: any) => {