From d64bbc4015119c20531286ee2535b407a0064615 Mon Sep 17 00:00:00 2001 From: Abhinav Jha Date: Fri, 22 Nov 2019 14:02:55 +0000 Subject: [PATCH] Use applicationId and pageId to render pages --- app/client/.eslintrc.js | 2 +- app/client/package.json | 6 +- app/client/src/actions/configsActions.tsx | 1 - app/client/src/actions/initActions.ts | 12 +- app/client/src/actions/pageActions.tsx | 21 +- app/client/src/api/PageApi.tsx | 15 +- app/client/src/assets/icons/control/view.svg | 2 +- .../appsmith/CenteredWrapper.tsx | 9 + .../appsmith/ContainerComponent.tsx | 2 +- .../editorComponents/ContextDropdown.tsx | 6 +- .../editorComponents/PageLoader.tsx | 37 + .../components/editorComponents/Sidebar.tsx | 34 +- .../fields/DatasourcesField.tsx | 5 +- app/client/src/constants/ApiConstants.tsx | 18 - app/client/src/constants/Colors.tsx | 2 +- app/client/src/constants/DefaultTheme.tsx | 2 +- .../src/constants/ReduxActionConstants.tsx | 16 +- app/client/src/constants/WidgetValidation.ts | 2 +- app/client/src/constants/routes.ts | 60 +- app/client/src/index.tsx | 6 +- .../AppViewer/AppViewerPageContainer.tsx | 95 ++ app/client/src/pages/AppViewer/index.tsx | 168 +-- .../viewer/AppViewerSideNavWrapper.tsx | 32 + .../src/pages/AppViewer/viewer/SideNav.tsx | 47 +- .../pages/Applications/ApplicationCard.tsx | 54 +- app/client/src/pages/Applications/index.tsx | 33 +- app/client/src/pages/Editor/ApiEditor.tsx | 30 +- app/client/src/pages/Editor/ApiSidebar.tsx | 31 +- app/client/src/pages/Editor/EditorHeader.tsx | 4 +- app/client/src/pages/Editor/PropertyPane.tsx | 5 +- app/client/src/pages/Editor/Sidebar.tsx | 10 +- app/client/src/pages/Editor/WidgetsEditor.tsx | 74 +- app/client/src/pages/Editor/index.tsx | 98 +- app/client/src/pages/Editor/routes.tsx | 31 +- app/client/src/pages/common/PageNotFound.tsx | 28 +- .../src/pages/common/ProtectedRoute.tsx | 1 + .../src/reducers/entityReducers/index.tsx | 3 + .../entityReducers/pageListReducer.tsx | 36 + app/client/src/reducers/index.tsx | 2 + .../reducers/uiReducers/appViewReducer.tsx | 12 +- .../src/reducers/uiReducers/editorReducer.tsx | 87 +- app/client/src/sagas/ActionSagas.ts | 10 +- app/client/src/sagas/ApplicationSagas.tsx | 25 +- app/client/src/sagas/DatasourcesSagas.ts | 10 +- app/client/src/sagas/InitSagas.ts | 40 +- app/client/src/sagas/PageSagas.tsx | 52 +- app/client/src/sagas/SagaUtils.ts | 13 + app/client/src/sagas/selectors.tsx | 33 +- app/client/src/selectors/appViewSelectors.tsx | 18 +- app/client/src/selectors/editorSelectors.tsx | 30 +- app/client/src/utils/WidgetPropsUtils.tsx | 6 +- app/client/src/widgets/BaseWidget.tsx | 2 +- app/client/src/widgets/ContainerWidget.tsx | 5 +- app/client/yarn.lock | 1308 +++++++++-------- 54 files changed, 1550 insertions(+), 1141 deletions(-) create mode 100644 app/client/src/components/designSystems/appsmith/CenteredWrapper.tsx create mode 100644 app/client/src/components/editorComponents/PageLoader.tsx create mode 100644 app/client/src/pages/AppViewer/AppViewerPageContainer.tsx create mode 100644 app/client/src/pages/AppViewer/viewer/AppViewerSideNavWrapper.tsx create mode 100644 app/client/src/reducers/entityReducers/pageListReducer.tsx create mode 100644 app/client/src/sagas/SagaUtils.ts diff --git a/app/client/.eslintrc.js b/app/client/.eslintrc.js index e1d3677973..805048b859 100644 --- a/app/client/.eslintrc.js +++ b/app/client/.eslintrc.js @@ -1,6 +1,6 @@ module.exports = { parser: '@typescript-eslint/parser', - plugins: ["react", "@typescript-eslint", "prettier"], + plugins: ["react", "@typescript-eslint", "prettier", "react-hooks"], extends: [ "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react "plugin:@typescript-eslint/recommended", diff --git a/app/client/package.json b/app/client/package.json index 3485c4b181..a10c5973dd 100644 --- a/app/client/package.json +++ b/app/client/package.json @@ -24,7 +24,7 @@ "@types/react": "^16.8.2", "@types/react-dom": "^16.8.0", "@types/react-redux": "^7.0.1", - "@types/react-router-dom": "^4.3.5", + "@types/react-router-dom": "^5.1.2", "@types/styled-components": "^4.1.8", "@uppy/core": "^1.5.1", "@uppy/file-input": "^1.3.1", @@ -65,8 +65,8 @@ "react-netlify-identity": "^0.1.9", "react-redux": "^6.0.0", "react-rnd": "^10.1.1", - "react-router": "^5.0.1", - "react-router-dom": "^5.0.1", + "react-router": "^5.1.2", + "react-router-dom": "^5.1.2", "react-scripts": "^3.1.1", "react-select": "^3.0.8", "redux": "^4.0.1", diff --git a/app/client/src/actions/configsActions.tsx b/app/client/src/actions/configsActions.tsx index 6b9b634d70..ad6ba20a5f 100644 --- a/app/client/src/actions/configsActions.tsx +++ b/app/client/src/actions/configsActions.tsx @@ -1,7 +1,6 @@ import { ReduxActionTypes } from "../constants/ReduxActionConstants"; export type EditorConfigIdsType = { - propertyPaneConfigsId?: string; widgetCardsPaneId?: string; widgetConfigsId?: string; }; diff --git a/app/client/src/actions/initActions.ts b/app/client/src/actions/initActions.ts index 8ddc360c78..5cba1f802f 100644 --- a/app/client/src/actions/initActions.ts +++ b/app/client/src/actions/initActions.ts @@ -1,8 +1,14 @@ import { ReduxActionTypes, - ReduxActionWithoutPayload, -} from "../constants/ReduxActionConstants"; + ReduxAction, + InitializeEditorPayload, +} from "constants/ReduxActionConstants"; -export const initEditor = (): ReduxActionWithoutPayload => ({ +export const initEditor = ( + applicationId: string, +): ReduxAction => ({ type: ReduxActionTypes.INITIALIZE_EDITOR, + payload: { + applicationId, + }, }); diff --git a/app/client/src/actions/pageActions.tsx b/app/client/src/actions/pageActions.tsx index 41916fb110..abd18ddcc8 100644 --- a/app/client/src/actions/pageActions.tsx +++ b/app/client/src/actions/pageActions.tsx @@ -7,21 +7,34 @@ import { UpdateCanvasPayload, SavePagePayload, SavePageSuccessPayload, + FetchPageListPayload, } from "../constants/ReduxActionConstants"; import { ContainerWidgetProps } from "../widgets/ContainerWidget"; -export const fetchPageList = () => ({ - type: ReduxActionTypes.FETCH_PAGE_LIST_INIT, -}); +export const fetchPageList = ( + applicationId: string, +): ReduxAction => { + return { + type: ReduxActionTypes.FETCH_PAGE_LIST_INIT, + payload: { + applicationId, + }, + }; +}; export const fetchPage = (pageId: string): ReduxAction => { return { - type: ReduxActionTypes.FETCH_PAGE, + type: ReduxActionTypes.FETCH_PAGE_INIT, payload: { pageId: pageId, }, }; }; +export const fetchPageSuccess = () => { + return { + type: ReduxActionTypes.FETCH_PAGE_SUCCESS, + }; +}; export const addWidget = ( pageId: string, diff --git a/app/client/src/api/PageApi.tsx b/app/client/src/api/PageApi.tsx index 36a7976379..12bfea59e8 100644 --- a/app/client/src/api/PageApi.tsx +++ b/app/client/src/api/PageApi.tsx @@ -11,7 +11,6 @@ export interface FetchPageRequest { export interface FetchPublishedPageRequest { pageId: string; - layoutId: string; } export interface SavePageRequest { @@ -70,8 +69,8 @@ class PageApi extends Api { return `v1/layouts/${layoutId}/pages/${pageId}`; }; - static getPublishedPageURL = (pageId: string, layoutId: string) => { - return `v1/layouts/${layoutId}/pages/${pageId}/view`; + static getPublishedPageURL = (pageId: string) => { + return `v1/pages/${pageId}/view`; }; static fetchPage( @@ -97,9 +96,7 @@ class PageApi extends Api { static fetchPublishedPage( pageRequest: FetchPublishedPageRequest, ): AxiosPromise { - return Api.get( - PageApi.getPublishedPageURL(pageRequest.pageId, pageRequest.layoutId), - ); + return Api.get(PageApi.getPublishedPageURL(pageRequest.pageId)); } static createPage( @@ -108,8 +105,10 @@ class PageApi extends Api { return Api.post(PageApi.url, createPageRequest); } - static fetchPageList(): AxiosPromise { - return Api.get(PageApi.url); + static fetchPageList( + applicationId: string, + ): AxiosPromise { + return Api.get(PageApi.url + "/application/" + applicationId); } } diff --git a/app/client/src/assets/icons/control/view.svg b/app/client/src/assets/icons/control/view.svg index abe8f8eed4..66010d6eed 100644 --- a/app/client/src/assets/icons/control/view.svg +++ b/app/client/src/assets/icons/control/view.svg @@ -1,3 +1,3 @@ - + diff --git a/app/client/src/components/designSystems/appsmith/CenteredWrapper.tsx b/app/client/src/components/designSystems/appsmith/CenteredWrapper.tsx new file mode 100644 index 0000000000..e8ae586218 --- /dev/null +++ b/app/client/src/components/designSystems/appsmith/CenteredWrapper.tsx @@ -0,0 +1,9 @@ +import styled from "styled-components"; + +export default styled.div` + height: 100%; + width: 100%; + display: flex; + justify-content: center; + align-items: center; +`; diff --git a/app/client/src/components/designSystems/appsmith/ContainerComponent.tsx b/app/client/src/components/designSystems/appsmith/ContainerComponent.tsx index e90b372a4b..b9c2ad6a6f 100644 --- a/app/client/src/components/designSystems/appsmith/ContainerComponent.tsx +++ b/app/client/src/components/designSystems/appsmith/ContainerComponent.tsx @@ -38,7 +38,7 @@ ContainerComponent.defaultProps = { backgroundColor: "white", }; -type ContainerStyle = "border" | "card" | "rounded-border" | "none"; +export type ContainerStyle = "border" | "card" | "rounded-border" | "none"; export interface ContainerComponentProps extends ComponentProps { containerStyle?: ContainerStyle; diff --git a/app/client/src/components/editorComponents/ContextDropdown.tsx b/app/client/src/components/editorComponents/ContextDropdown.tsx index a0e454d791..1429ec6d84 100644 --- a/app/client/src/components/editorComponents/ContextDropdown.tsx +++ b/app/client/src/components/editorComponents/ContextDropdown.tsx @@ -29,6 +29,7 @@ type ContextDropdownProps = { toggle: { type: "icon" | "button"; icon?: ControlIconName; + iconSize?: number; text?: string; placeholder?: string; }; @@ -37,7 +38,10 @@ type ContextDropdownProps = { export const ContextDropdown = (props: ContextDropdownProps) => { let trigger: ReactNode; if (props.toggle.type === "icon" && props.toggle.icon) - trigger = ControlIcons[props.toggle.icon](); + trigger = ControlIcons[props.toggle.icon]({ + width: props.toggle.iconSize, + height: props.toggle.iconSize, + }); if (props.toggle.type === "button" && props.toggle.text) trigger =