Initial frontend setup

admin/src/config/constants.js

@@ -0,0 +1 @@
+export const __DEBUG__ = strapi.env === 'development';

admin/src/config/logger.js

@@ -0,0 +1,8 @@
+const config = {
+  blacklist: [
+    'REDUX_STORAGE_SAVE',
+    'REDUX_STORAGE_LOAD',
+  ],
+};
+
+export default config;

admin/src/containers/App/index.js

@@ -8,19 +8,20 @@
 import React from 'react';
 import { Switch, Route } from 'react-router-dom';
 import { NotFound } from 'strapi-helper-plugin';
-// Utils
-import pluginId from '../../pluginId';
-// Containers
-import HomePage from '../HomePage';
+import { Provider } from 'react-redux';
+
+import { store } from "../../helpers/configureStore";
+import pluginId from '../../helpers/pluginId';
+import ConfigPage from '../ConfigPage';
 
 const App = () => {
   return (
-    <div>
+    <Provider store={store}>
       <Switch>
-        <Route path={`/plugins/${pluginId}`} component={HomePage} exact />
+        <Route path={`/plugins/${pluginId}`} component={ConfigPage} exact />
         <Route component={NotFound} />
       </Switch>
-    </div>
+    </Provider>
   );
 };
 

admin/src/containers/ConfigPage/index.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const ConfigPage = () => {
+  return <div>Config diff</div>
+}
+ 
+export default ConfigPage;

admin/src/containers/HomePage/index.js

@@ -1,20 +0,0 @@
-/*
- *
- * HomePage
- *
- */
-
-import React, { memo } from 'react';
-// import PropTypes from 'prop-types';
-import pluginId from '../../pluginId';
-
-const HomePage = () => {
-  return (
-    <div>
-      <h1>{pluginId}&apos;s HomePage</h1>
-      <p>Happy coding</p>
-    </div>
-  );
-};
-
-export default memo(HomePage);

admin/src/containers/Initializer/index.js

@@ -6,7 +6,7 @@
 
 import { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
-import pluginId from '../../pluginId';
+import pluginId from '../../helpers/pluginId';
 
 const Initializer = ({ updatePlugin }) => {
   const ref = useRef();

admin/src/helpers/configureStore.js

@@ -0,0 +1,67 @@
+import { createStore, applyMiddleware, compose } from 'redux';
+import { createLogger } from 'redux-logger';
+import thunkMiddleware from 'redux-thunk';
+import { Map } from 'immutable';
+
+import rootReducer from '../state/reducers';
+import loggerConfig from '../config/logger';
+import { __DEBUG__ } from '../config/constants';
+
+const configureStore = () => {
+  let initialStoreState = Map();
+
+  const enhancers = [];
+  const middlewares = [
+    thunkMiddleware,
+  ];
+
+  let devtools;
+
+  if (__DEBUG__) {
+    devtools = (
+      typeof window !== 'undefined'
+      && typeof window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ === 'function'
+      && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({ actionsBlacklist: [] })
+    );
+
+    if (devtools) {
+      console.info('[setup] ✓ Enabling Redux DevTools Extension');
+    }
+
+    console.info('[setup] ✓ Enabling state logger');
+    const loggerMiddleware = createLogger({
+      level: 'info',
+      collapsed: true,
+      stateTransformer: (state) => state.toJS(),
+      predicate: (getState, action) => {
+        const state = getState();
+
+        const showBlacklisted = state.getIn(['debug', 'logs', 'blacklisted']);
+        if (loggerConfig.blacklist.indexOf(action.type) !== -1 && !showBlacklisted) {
+          return false;
+        }
+
+        return state.getIn(['debug', 'logs', 'enabled']);
+      },
+    });
+    middlewares.push(loggerMiddleware);
+  }
+
+  const composedEnhancers = devtools || compose;
+  const storeEnhancers = composedEnhancers(
+    applyMiddleware(...middlewares),
+    ...enhancers
+  );
+
+  const store = createStore(
+    rootReducer,
+    initialStoreState,
+    storeEnhancers,
+  );
+
+  return store;
+};
+
+export default configureStore;
+
+export const store = configureStore();

admin/src/helpers/pluginId.js

@@ -1,4 +1,4 @@
-const pluginPkg = require('../../package.json');
+const pluginPkg = require('../../../package.json');
 const pluginId = pluginPkg.name.replace(
   /^strapi-plugin-/i,
   ''

admin/src/index.js

@@ -1,48 +1,50 @@
+import React from 'react';
 import pluginPkg from '../../package.json';
-import pluginId from './pluginId';
+import pluginId from './helpers/pluginId';
 import App from './containers/App';
 import Initializer from './containers/Initializer';
-import lifecycles from './lifecycles';
 import trads from './translations';
 
+function Comp(props) {
+  return <App {...props} />;
+}
+
 export default strapi => {
-  const pluginDescription = pluginPkg.strapi.description || pluginPkg.description;
+  const pluginDescription =
+    pluginPkg.strapi.description || pluginPkg.description;
+
   const icon = pluginPkg.strapi.icon;
   const name = pluginPkg.strapi.name;
 
   const plugin = {
+    icon,
+    name,
+    destination: `/plugins/${pluginId}`,
     blockerComponent: null,
     blockerComponentProps: {},
     description: pluginDescription,
-    icon,
+    icon: pluginPkg.strapi.icon,
     id: pluginId,
     initializer: Initializer,
     injectedComponents: [],
     isReady: false,
-    isRequired: pluginPkg.strapi.required || false,
     layout: null,
-    lifecycles,
-    mainComponent: App,
-    name,
+    leftMenuLinks: [],
+    leftMenuSections: [],
+    mainComponent: Comp,
+    name: pluginPkg.strapi.name,
     preventComponentRendering: false,
     trads,
     menu: {
       pluginsSectionLinks: [
         {
-          destination: `/plugins/${pluginId}`,
+          destination: `/plugins/${pluginId}`, // Endpoint of the link
           icon,
-          label: {
-            id: `${pluginId}.plugin.name`,
-            defaultMessage: name,
-          },
           name,
-          permissions: [
-            // Uncomment to set the permissions of the plugin here
-            // {
-            //   action: '', // the action name should be plugins::plugin-name.actionType
-            //   subject: null,
-            // },
-          ],
+          label: {
+            id: `${pluginId}.plugin.name`, // Refers to a i18n
+            defaultMessage: 'Config Sync',
+          },
         },
       ],
     },

admin/src/lifecycles.js

@@ -1,3 +0,0 @@
-function lifecycles() {}
-
-export default lifecycles;

admin/src/state/actions/Config.js

@@ -0,0 +1,16 @@
+/**
+ *
+ * Main actions
+ *
+ */
+
+import { request } from 'strapi-helper-plugin';
+import { Map } from 'immutable';
+
+// export const EXAMPLE_ACTION = 'EXAMPLE_ACTION';
+// export function exampleAction(value) {
+//   return {
+//     type: EXAMPLE_ACTION,
+//     value,
+//   };
+// }

admin/src/state/reducers/Config/index.js

@@ -0,0 +1,20 @@
+/**
+ *
+ * Main reducer
+ *
+ */
+
+import { fromJS, Map } from 'immutable';
+import { EXAMPLE_ACTION } from '../../actions/Config';
+
+const initialState = fromJS({});
+
+export default function configReducer(state = initialState, action) {
+  switch (action.type) {
+    case EXAMPLE_ACTION:
+    return state
+      .update('value', () => action.value)
+    default:
+      return state;
+  }
+}

admin/src/state/reducers/index.js

@@ -0,0 +1,8 @@
+import { combineReducers } from 'redux-immutable';
+import configReducer from './Config';
+
+const rootReducer = combineReducers({
+  config: configReducer,
+});
+
+export default rootReducer;

admin/src/translations/en.json

@@ -1 +1,3 @@
-{}
+{
+  "plugin.name": "Config Sync"
+}

admin/src/utils/getTrad.js

@@ -1,5 +0,0 @@
-import pluginId from '../pluginId';
-
-const getTrad = id => `${pluginId}.${id}`;
-
-export default getTrad;