refactor: move redux actions to a separate folder

example-app/src/admin.options.js

@@ -34,13 +34,12 @@ const options = {
     app: process.env.npm_package_version,
   },
   branding: currentUser => ({
-    logo: false,
     companyName: currentUser ? currentUser.email : 'something',
   }),
   pages: {
     aboutUs: {
       handler: async () => { console.log('clicked') },
-      component: AdminBro.bundle('./components/no-records'),
+      component: AdminBro.bundle('./components/example-page'),
       icon: 'Add',
     },
   },

example-app/src/components/example-page.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { Box, H1, Text, Label, Input } from '@admin-bro/design-system'
+
+const ExamplePage: React.FC = () => (
+  <Box variant="grey">
+    <Box variant="white">
+      <H1>Example page</H1>
+      <H1>Which you can tailor to your needs</H1>
+      <Text>
+        Here you can put whatever you want, like....
+      </Text>
+      <Box>
+        <Label size="lg">Fancy inputs</Label>
+        <Input variant="xxl" borderless placeholder="I am fancy" />
+      </Box>
+    </Box>
+  </Box>
+)
+
+export default ExamplePage

src/admin-bro-options.interface.ts

@@ -86,7 +86,7 @@ export default interface AdminBroOptions {
    *   },
    * },
    */
-  pages?: Record<string, AdminPage>;
+  pages?: AdminPages;
   /**
    * Array of all Resources which are supported by AdminBro via adapters.
    * You can pass either resource or resource with an options and thus modify it.
@@ -369,6 +369,14 @@ export type AdminPage = {
   icon?: string;
 }
 
+/**
+ * Object describing map of regular pages in AdminBro
+ *
+ * @alias AdminPages
+ * @memberof AdminBroOptions
+ */
+export type AdminPages = Record<string, AdminPage>
+
 /**
  * Default way of passing Options with a Resource
  * @alias ResourceWithOptions
@@ -420,5 +428,5 @@ export interface AdminBroOptionsWithDefault extends AdminBroOptions {
     handler?: PageHandler;
     component?: string;
   };
-  pages: Record<string, AdminPage>;
+  pages: AdminBroOptions['pages'];
 }

src/backend/controllers/api-controller.ts

@@ -247,7 +247,8 @@ class ApiController {
    */
   async page(request: any, response: any): Promise<any> {
     const h = new ViewHelpers(this._admin)
-    const { pages } = this._admin.options
+    const { pages = {} } = this._admin.options
+
     const { pageName } = request.params
     const { handler } = (pages[pageName] || {})
 

src/frontend/components/app/notice.tsx

@@ -2,7 +2,9 @@ import React, { ReactNode } from 'react'
 import { connect } from 'react-redux'
 import { MessageBox } from '@admin-bro/design-system'
 
-import { dropNotice, setNoticeProgress, NoticeMessageInState, ReduxState } from '../../store/store'
+import { NoticeMessageInState, ReduxState } from '../../store/store'
+import { dropNotice } from '../../store/actions/drop-notice'
+import { setNoticeProgress } from '../../store/actions/set-Notice-progress'
 
 const TIME_TO_DISAPPEAR = 3
 

src/frontend/components/app/top-bar.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { useSelector } from 'react-redux'
 import styled from 'styled-components'
-import { cssClass, Box, Icon } from '@admin-bro/design-system'
+import { cssClass, Box, Icon, themeGet } from '@admin-bro/design-system'
 
 import LoggedIn from './logged-in'
 import Version from './version'
@@ -11,7 +11,7 @@ import { ReduxState } from '../../store/store'
 
 const NavBar = styled(Box)`
   height: ${({ theme }): string => theme.sizes.navbarHeight};
-  border-bottom: 1px solid ${({ theme }): string => theme.colors.grey20};
+  border-bottom: ${themeGet('borders', 'default')};
   background: ${({ theme }): string => theme.colors.white};
   display: flex;
   flex-direction: row;

src/frontend/hooks/use-current-admin.ts

@@ -1,5 +1,6 @@
 import { useDispatch, useSelector } from 'react-redux'
-import { setCurrentAdmin, ReduxState } from '../store/store'
+import { ReduxState } from '../store/store'
+import { setCurrentAdmin } from '../store/actions/set-current-admin'
 import { CurrentAdmin } from '../../current-admin.interface'
 
 /**

src/frontend/hooks/use-notice.ts

@@ -1,5 +1,5 @@
 import { useDispatch } from 'react-redux'
-import { addNotice } from '../store/store'
+import { addNotice } from '../store/actions/add-notice'
 import { NoticeMessage } from '../store/with-notice'
 
 /**

src/frontend/login-template.tsx

@@ -1,24 +1,22 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
+import { combineStyles } from '@admin-bro/design-system'
+import i18n from 'i18next'
 import React from 'react'
 import { renderToString } from 'react-dom/server'
-import { ServerStyleSheet, ThemeProvider, StyleSheetManager } from 'styled-components'
-import { Store } from 'redux'
 import { I18nextProvider } from 'react-i18next'
-import i18n from 'i18next'
-
 import { Provider } from 'react-redux'
-import { combineStyles } from '@admin-bro/design-system'
-import LoginComponent from './components/login'
+import { Store } from 'redux'
+import { ServerStyleSheet, StyleSheetManager, ThemeProvider } from 'styled-components'
 import AdminBro from '../admin-bro'
-
+import { getAssets, getBranding, getFaviconFromBranding } from '../backend/utils/options-parser'
+import ViewHelpers from '../backend/utils/view-helpers'
+import LoginComponent from './components/login'
+import { initializeAssets } from './store/actions/initialize-assets'
+import { initializeBranding } from './store/actions/initialize-branding'
+import { initializeLocale } from './store/actions/initialize-locale'
 import createStore, {
-  initializeBranding,
-  initializeLocale,
   ReduxState,
-  initializeAssets,
 } from './store/store'
-import ViewHelpers from '../backend/utils/view-helpers'
-import { getBranding, getAssets, getFaviconFromBranding } from '../backend/utils/options-parser'
 
 type LoginTemplateAttributes = {
   /**

src/frontend/store/actions/add-notice.ts

@@ -0,0 +1,17 @@
+import { NoticeMessageInState } from '../store'
+import { NoticeMessage } from '../with-notice'
+
+export const ADD_NOTICE = 'ADD_NOTICE'
+
+export const addNotice = (data: NoticeMessage = { message: '' }): {
+  type: string;
+  data: NoticeMessageInState;
+} => ({
+  type: ADD_NOTICE,
+  data: {
+    message: data.message,
+    id: Math.random().toString(36).substr(2, 9),
+    type: data.type || 'success',
+    progress: 0,
+  },
+})

src/frontend/store/actions/drop-notice.ts

@@ -0,0 +1,6 @@
+export const DROP_NOTICE = 'DROP_NOTICE'
+
+export const dropNotice = (noticeId: string) => ({
+  type: 'DROP_NOTICE',
+  data: { noticeId },
+})

src/frontend/store/actions/initialize-assets.ts

@@ -0,0 +1,11 @@
+import { Assets } from '../../../admin-bro-options.interface'
+
+export const ASSETS_INITIALIZE = 'ASSETS_INITIALIZE'
+
+export const initializeAssets = (data: Assets): {
+  type: string;
+  data: Assets;
+} => ({
+  type: ASSETS_INITIALIZE,
+  data,
+})

src/frontend/store/actions/initialize-branding.ts

@@ -0,0 +1,11 @@
+import { BrandingOptions } from '../../../admin-bro-options.interface'
+
+export const BRANDING_INITIALIZE = 'BRANDING_INITIALIZE'
+
+export const initializeBranding = (data: BrandingOptions): {
+  type: string;
+  data: BrandingOptions;
+} => ({
+  type: BRANDING_INITIALIZE,
+  data,
+})

src/frontend/store/actions/initialize-dashboard.ts

@@ -0,0 +1,11 @@
+import { DashboardInState } from '../store'
+
+export const DASHBOARD_INITIALIZE = 'DASHBOARD_INITIALIZE'
+
+export const initializeDashboard = (data: DashboardInState): {
+  type: string;
+  data: DashboardInState;
+} => ({
+  type: DASHBOARD_INITIALIZE,
+  data,
+})

src/frontend/store/actions/initialize-locale.ts

@@ -0,0 +1,10 @@
+import { Locale } from '../../../locale/config'
+
+export const LOCALE_INITIALIZE = 'LOCALE_INITIALIZE'
+
+export const initializeLocale = (data: Locale): {
+  type: string; data: Locale;
+} => ({
+  type: LOCALE_INITIALIZE,
+  data,
+})

src/frontend/store/actions/initialize-pages.ts

@@ -0,0 +1,10 @@
+import { AdminPage } from '../../../admin-bro-options.interface'
+
+export const PAGES_INITIALIZE = 'PAGES_INITIALIZE'
+
+export const initializePages = (data: Array<AdminPage>): {
+  type: string; data: Array<AdminPage>;
+} => ({
+  type: PAGES_INITIALIZE,
+  data,
+})

src/frontend/store/actions/initialize-paths.ts

@@ -0,0 +1,11 @@
+import { Paths } from '../store'
+
+export const PATHS_INITIALIZE = 'PATHS_INITIALIZE'
+
+export const initializePaths = (data: Paths): {
+  type: string;
+  data: Paths;
+} => ({
+  type: PATHS_INITIALIZE,
+  data,
+})

src/frontend/store/actions/initialize-resources.ts

@@ -0,0 +1,10 @@
+import ResourceJSON from '../../../backend/decorators/resource-json.interface'
+
+export const RESOURCES_INITIALIZE = 'RESOURCES_INITIALIZE'
+
+export const initializeResources = (data: Array<ResourceJSON>): {
+  type: string; data: Array<ResourceJSON>;
+} => ({
+  type: RESOURCES_INITIALIZE,
+  data,
+})

src/frontend/store/actions/initialize-versions.ts

@@ -0,0 +1,11 @@
+import { VersionProps } from '../../../admin-bro-options.interface'
+
+export const VERSIONS_INITIALIZE = 'VERSIONS_INITIALIZE'
+
+export const initializeVersions = (data: VersionProps): {
+  type: string;
+  data: VersionProps;
+} => ({
+  type: VERSIONS_INITIALIZE,
+  data,
+})

src/frontend/store/actions/set-current-admin.ts

@@ -0,0 +1,8 @@
+import { CurrentAdmin } from '../../../current-admin.interface'
+
+export const SESSION_INITIALIZE = 'SESSION_INITIALIZE'
+
+export const setCurrentAdmin = (data: CurrentAdmin | null = null) => ({
+  type: SESSION_INITIALIZE,
+  data,
+})

src/frontend/store/actions/set-notice-progress.ts

@@ -0,0 +1,10 @@
+
+export const SET_NOTICE_PROGRESS = 'SET_NOTICE_PROGRESS'
+
+export const setNoticeProgress = ({ noticeId, progress }: {
+  noticeId: string;
+  progress: number;
+}) => ({
+  type: SET_NOTICE_PROGRESS,
+  data: { noticeId, progress },
+})

src/frontend/store/index.ts

@@ -1,16 +1,14 @@
 import { Store } from 'redux'
-import createStore, {
-  initializeResources,
-  initializeBranding,
-  initializeDashboard,
-  initializeAssets,
-  initializePaths,
-  initializePages,
-  setCurrentAdmin,
-  initializeVersions,
-  initializeLocale,
-  ReduxState,
-} from './store'
+import createStore, { ReduxState } from './store'
+import { initializeResources } from './actions/initialize-resources'
+import { initializeBranding } from './actions/initialize-branding'
+import { initializeDashboard } from './actions/initialize-dashboard'
+import { initializeAssets } from './actions/initialize-assets'
+import { initializePaths } from './actions/initialize-paths'
+import { initializePages } from './actions/initialize-pages'
+import { setCurrentAdmin } from './actions/set-current-admin'
+import { initializeVersions } from './actions/initialize-versions'
+import { initializeLocale } from './actions/initialize-locale'
 import AdminBro from '../../admin-bro'
 import { CurrentAdmin } from '../../current-admin.interface'
 import pagesToStore from './pages-to-store'

src/frontend/store/pages-to-store.ts

@@ -1,13 +1,12 @@
-import { AdminPage } from '../../admin-bro-options.interface'
+import AdminBroOptions from '../../admin-bro-options.interface'
+
 import PageJSON from '../../backend/decorators/page-json.interface'
 
-const pagesToStore = (pages: Record<string, AdminPage>): Array<PageJSON> => {
-  const pagesArray = Object.entries(pages).map(([key, adminPage]) => ({
+const pagesToStore = (pages: AdminBroOptions['pages'] = {}): Array<PageJSON> => Object.entries(pages)
+  .map(([key, adminPage]) => ({
     name: key,
     component: adminPage.component,
     icon: adminPage.icon,
   }))
-  return pagesArray
-}
 
 export default pagesToStore