Cleanup frontend

admin/src/components/ActionButtons/index.js

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { useDispatch } from 'react-redux';
+import { isEmpty } from 'lodash';
 import { Button } from '@buffetjs/core';
 import ConfirmModal from '../ConfirmModal';
 import { exportAllConfig, importAllConfig } from '../../state/actions/Config';
@@ -22,8 +23,8 @@ const ActionButtons = ({ diff }) => {
 
   return (
     <ActionButtonsStyling>
-      <Button disabled={!diff} color="primary" label="Import" onClick={() => openModal('import')} />
-      <Button disabled={!diff} color="primary" label="Export" onClick={() => openModal('export')} />
+      <Button disabled={isEmpty(diff)} color="primary" label="Import" onClick={() => openModal('import')} />
+      <Button disabled={isEmpty(diff)} color="primary" label="Export" onClick={() => openModal('export')} />
       <ConfirmModal
         isOpen={modalIsOpen}
         onClose={closeModal}

admin/src/components/ConfigList/index.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Table } from '@buffetjs/core';
 import ConfigDiff from '../ConfigDiff';
 
@@ -17,22 +17,26 @@ const headers = [
   },
 ];
 
-const ConfigList = ({ fileConfig, databaseConfig, isLoading, diff }) => {
+const ConfigList = ({ fileConfig, databaseConfig, diff, isLoading }) => {
   const [openModal, setOpenModal] = useState(false);
   const [originalConfig, setOriginalConfig] = useState({});
   const [newConfig, setNewConfig] = useState({});
   const [configName, setConfigName] = useState('');
-  let rows = [];
+  const [rows, setRows] = useState([]);
 
-  Object.keys(diff).map((config) => {
-    // @TODO implement different config types, roles/permissions e.g.
-    rows.push({ 
-      config_name: config,
-      table_name: 'core_store',
-      change_type: ''
+  useEffect(() => {
+    let formattedRows = [];
+    Object.keys(diff).map((config) => {
+      // @TODO implement different config types, roles/permissions e.g.
+      formattedRows.push({ 
+        config_name: config,
+        table_name: 'core_store',
+        change_type: ''
+      });
     });
-  });
-
+    setRows(formattedRows);
+  }, [diff]);
+  
   const closeModal = () => {
     setOriginalConfig({});
     setNewConfig({});
@@ -59,8 +63,8 @@ const ConfigList = ({ fileConfig, databaseConfig, isLoading, diff }) => {
           setOpenModal(true);
         }}
         rows={!isLoading ? rows : []}
-        tableEmptyText="No config changes. You are up to date!"
         isLoading={isLoading}
+        tableEmptyText="No config changes. You are up to date!"
       />
     </div>
   );

admin/src/components/ConfirmModal/index.js

@@ -6,6 +6,8 @@ import {
 import getTrad from '../../helpers/getTrad';
 
 const ConfirmModal = ({ isOpen, onClose, onSubmit, type }) => {
+  if (!isOpen) return null;
+
   return (
     <ModalConfirm
       confirmButtonLabel={{
@@ -25,9 +27,7 @@ const ConfirmModal = ({ isOpen, onClose, onSubmit, type }) => {
           br: () => <br />,
         },
       }}
-    >
-      <div>Zeker?</div>
-    </ModalConfirm>
+    />
   );
 }
  

admin/src/containers/ConfigPage/index.js

@@ -1,22 +1,20 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Map } from 'immutable';
 
-import { getAllDatabaseConfig, getAllFileConfig } from '../../state/actions/Config';
+import { getAllConfig } from '../../state/actions/Config';
 import ConfigList from '../../components/ConfigList';
 import ActionButtons from '../../components/ActionButtons';
 import difference from '../../helpers/getObjectDiff';
 
 const ConfigPage = () => {
   const dispatch = useDispatch();
-  const [isLoading, setIsLoading] = useState(true);
+  const isLoading = useSelector((state) => state.getIn(['config', 'isLoading']), Map());
   const fileConfig = useSelector((state) => state.getIn(['config', 'fileConfig']), Map());
   const databaseConfig = useSelector((state) => state.getIn(['config', 'databaseConfig']), Map());
 
   useEffect(() => {
-    dispatch(getAllDatabaseConfig());
-    dispatch(getAllFileConfig());
-    setIsLoading(false);
+    dispatch(getAllConfig());
   }, []);
 
   const diff = difference(fileConfig.toJS(), databaseConfig.toJS());

admin/src/state/actions/Config.js

@@ -7,30 +7,18 @@
 import { request } from 'strapi-helper-plugin';
 import { Map } from 'immutable';
 
-export function getAllDatabaseConfig() {
+export function getAllConfig() {
   return async function(dispatch) {
+    dispatch(setLoadingState(true));
     try {
-      const data = await request('/config/all/from-database', { method: 'GET' });
-      dispatch(setDatabaseConfigInState(data));
-
-      strapi.notification.success('woop!');
+      const databaseConfig = await request('/config/all/from-database', { method: 'GET' });
+      const fileConfig = await request('/config/all/from-files', { method: 'GET' });
+      dispatch(setFileConfigInState(fileConfig));
+      dispatch(setDatabaseConfigInState(databaseConfig));
+      dispatch(setLoadingState(false));
     } catch(err) {
-      console.log(err);
-      strapi.notification.error('notification.error');
-    }
-  }
-}
-
-export function getAllFileConfig() {
-  return async function(dispatch) {
-    try {
-      const data = await request('/config/all/from-files', { method: 'GET' });
-      dispatch(setFileConfigInState(data));
-
-      strapi.notification.success('woop!');
-    } catch(err) {
-      console.log(err);
       strapi.notification.error('notification.error');
+      dispatch(setLoadingState(false));
     }
   }
 }
@@ -53,30 +41,42 @@ export function setFileConfigInState(config) {
 
 export function exportAllConfig() {
   return async function(dispatch) {
+    dispatch(setLoadingState(true));
     try {
       const { message } = await request('/config/export', { method: 'GET' });
-      dispatch(getAllFileConfig());
-      dispatch(getAllDatabaseConfig());
+      dispatch(setFileConfigInState(Map({})));
+      dispatch(setDatabaseConfigInState(Map({})));
 
       strapi.notification.success(message);
+      dispatch(setLoadingState(false));
     } catch(err) {
-      console.log(err);
       strapi.notification.error('notification.error');
+      dispatch(setLoadingState(false));
     }
   }
 }
 
 export function importAllConfig() {
   return async function(dispatch) {
+    dispatch(setLoadingState(true));
     try {
       const { message } = await request('/config/import', { method: 'GET' });
-      dispatch(getAllFileConfig());
-      dispatch(getAllDatabaseConfig());
+      dispatch(setFileConfigInState(Map({})));
+      dispatch(setDatabaseConfigInState(Map({})));
 
       strapi.notification.success(message);
+      dispatch(setLoadingState(false));
     } catch(err) {
-      console.log(err);
       strapi.notification.error('notification.error');
+      dispatch(setLoadingState(false));
     }
   }
+}
+
+export const SET_LOADING_STATE = 'SET_LOADING_STATE';
+export function setLoadingState(value) {
+  return {
+    type: SET_LOADING_STATE,
+    value,
+  };
 }

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

@@ -5,11 +5,12 @@
  */
 
 import { fromJS, Map } from 'immutable';
-import { SET_DATABASE_CONFIG_IN_STATE, SET_FILE_CONFIG_IN_STATE } from '../../actions/Config';
+import { SET_DATABASE_CONFIG_IN_STATE, SET_FILE_CONFIG_IN_STATE, SET_LOADING_STATE } from '../../actions/Config';
 
 const initialState = fromJS({
   databaseConfig: Map({}),
-  fileConfig: Map({})
+  fileConfig: Map({}),
+  isLoading: false,
 });
 
 export default function configReducer(state = initialState, action) {
@@ -20,6 +21,9 @@ export default function configReducer(state = initialState, action) {
     case SET_FILE_CONFIG_IN_STATE:
       return state
         .update('fileConfig', () => fromJS(action.config))
+    case SET_LOADING_STATE:
+      return state
+        .update('isLoading', () => fromJS(action.value))
     default:
       return state;
   }

admin/src/translations/en.json

@@ -5,7 +5,7 @@
   "popUpWarning.button.export": "Yes, export",
 
   "Header.Title": "Config Sync",
-  "Header.Description": "Manage your database config acros environments.",
+  "Header.Description": "Manage your database config across environments.",
 
   "plugin.name": "Config Sync"
 }