Skip to content

Commit e981aa7

Browse files
boazpoolmanboazpoolman
committed
Cleanup frontend
1 parent 29a9ff7 commit e981aa7

File tree

7 files changed

+59
-52
lines changed

7 files changed

+59
-52
lines changed

‎admin/src/components/ActionButtons/index.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { useState } from 'react';
22
import styled from 'styled-components';
33
import { useDispatch } from 'react-redux';
4+
import { isEmpty } from 'lodash';
45
import { Button } from '@buffetjs/core';
56
import ConfirmModal from '../ConfirmModal';
67
import { exportAllConfig, importAllConfig } from '../../state/actions/Config';
@@ -22,8 +23,8 @@ const ActionButtons = ({ diff }) => {
2223

2324
return (
2425
<ActionButtonsStyling>
25-
<Button disabled={!diff} color="primary" label="Import" onClick={() => openModal('import')} />
26-
<Button disabled={!diff} color="primary" label="Export" onClick={() => openModal('export')} />
26+
<Button disabled={isEmpty(diff)} color="primary" label="Import" onClick={() => openModal('import')} />
27+
<Button disabled={isEmpty(diff)} color="primary" label="Export" onClick={() => openModal('export')} />
2728
<ConfirmModal
2829
isOpen={modalIsOpen}
2930
onClose={closeModal}

‎admin/src/components/ConfigList/index.js‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState } from 'react';
1+
import React, { useState, useEffect } from 'react';
22
import { Table } from '@buffetjs/core';
33
import ConfigDiff from '../ConfigDiff';
44

@@ -17,22 +17,26 @@ const headers = [
1717
},
1818
];
1919

20-
const ConfigList = ({ fileConfig, databaseConfig, isLoading, diff }) => {
20+
const ConfigList = ({ fileConfig, databaseConfig, diff, isLoading }) => {
2121
const [openModal, setOpenModal] = useState(false);
2222
const [originalConfig, setOriginalConfig] = useState({});
2323
const [newConfig, setNewConfig] = useState({});
2424
const [configName, setConfigName] = useState('');
25-
let rows = [];
25+
const [rows, setRows] = useState([]);
2626

27-
Object.keys(diff).map((config) => {
28-
// @TODO implement different config types, roles/permissions e.g.
29-
rows.push({
30-
config_name: config,
31-
table_name: 'core_store',
32-
change_type: ''
27+
useEffect(() => {
28+
let formattedRows = [];
29+
Object.keys(diff).map((config) => {
30+
// @TODO implement different config types, roles/permissions e.g.
31+
formattedRows.push({
32+
config_name: config,
33+
table_name: 'core_store',
34+
change_type: ''
35+
});
3336
});
34-
});
35-
37+
setRows(formattedRows);
38+
}, [diff]);
39+
3640
const closeModal = () => {
3741
setOriginalConfig({});
3842
setNewConfig({});
@@ -59,8 +63,8 @@ const ConfigList = ({ fileConfig, databaseConfig, isLoading, diff }) => {
5963
setOpenModal(true);
6064
}}
6165
rows={!isLoading ? rows : []}
62-
tableEmptyText="No config changes. You are up to date!"
6366
isLoading={isLoading}
67+
tableEmptyText="No config changes. You are up to date!"
6468
/>
6569
</div>
6670
);

‎admin/src/components/ConfirmModal/index.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import {
66
import getTrad from '../../helpers/getTrad';
77

88
const ConfirmModal = ({ isOpen, onClose, onSubmit, type }) => {
9+
if (!isOpen) return null;
10+
911
return (
1012
<ModalConfirm
1113
confirmButtonLabel={{
@@ -25,9 +27,7 @@ const ConfirmModal = ({ isOpen, onClose, onSubmit, type }) => {
2527
br: () => <br />,
2628
},
2729
}}
28-
>
29-
<div>Zeker?</div>
30-
</ModalConfirm>
30+
/>
3131
);
3232
}
3333

‎admin/src/containers/ConfigPage/index.js‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,20 @@
1-
import React, { useEffect, useState } from 'react';
1+
import React, { useEffect } from 'react';
22
import { useDispatch, useSelector } from 'react-redux';
33
import { Map } from 'immutable';
44

5-
import { getAllDatabaseConfig, getAllFileConfig } from '../../state/actions/Config';
5+
import { getAllConfig } from '../../state/actions/Config';
66
import ConfigList from '../../components/ConfigList';
77
import ActionButtons from '../../components/ActionButtons';
88
import difference from '../../helpers/getObjectDiff';
99

1010
const ConfigPage = () => {
1111
const dispatch = useDispatch();
12-
const [isLoading, setIsLoading] = useState(true);
12+
const isLoading = useSelector((state) => state.getIn(['config', 'isLoading']), Map());
1313
const fileConfig = useSelector((state) => state.getIn(['config', 'fileConfig']), Map());
1414
const databaseConfig = useSelector((state) => state.getIn(['config', 'databaseConfig']), Map());
1515

1616
useEffect(() => {
17-
dispatch(getAllDatabaseConfig());
18-
dispatch(getAllFileConfig());
19-
setIsLoading(false);
17+
dispatch(getAllConfig());
2018
}, []);
2119

2220
const diff = difference(fileConfig.toJS(), databaseConfig.toJS());

‎admin/src/state/actions/Config.js‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -7,30 +7,18 @@
77
import { request } from 'strapi-helper-plugin';
88
import { Map } from 'immutable';
99

10-
export function getAllDatabaseConfig() {
10+
export function getAllConfig() {
1111
return async function(dispatch) {
12+
dispatch(setLoadingState(true));
1213
try {
13-
const data = await request('/config/all/from-database', { method: 'GET' });
14-
dispatch(setDatabaseConfigInState(data));
15-
16-
strapi.notification.success('woop!');
17-
} catch(err) {
18-
console.log(err);
19-
strapi.notification.error('notification.error');
20-
}
21-
}
22-
}
23-
24-
export function getAllFileConfig() {
25-
return async function(dispatch) {
26-
try {
27-
const data = await request('/config/all/from-files', { method: 'GET' });
28-
dispatch(setFileConfigInState(data));
29-
30-
strapi.notification.success('woop!');
14+
const databaseConfig = await request('/config/all/from-database', { method: 'GET' });
15+
const fileConfig = await request('/config/all/from-files', { method: 'GET' });
16+
dispatch(setFileConfigInState(fileConfig));
17+
dispatch(setDatabaseConfigInState(databaseConfig));
18+
dispatch(setLoadingState(false));
3119
} catch(err) {
32-
console.log(err);
3320
strapi.notification.error('notification.error');
21+
dispatch(setLoadingState(false));
3422
}
3523
}
3624
}
@@ -53,30 +41,42 @@ export function setFileConfigInState(config) {
5341

5442
export function exportAllConfig() {
5543
return async function(dispatch) {
44+
dispatch(setLoadingState(true));
5645
try {
5746
const { message } = await request('/config/export', { method: 'GET' });
58-
dispatch(getAllFileConfig());
59-
dispatch(getAllDatabaseConfig());
47+
dispatch(setFileConfigInState(Map({})));
48+
dispatch(setDatabaseConfigInState(Map({})));
6049

6150
strapi.notification.success(message);
51+
dispatch(setLoadingState(false));
6252
} catch(err) {
63-
console.log(err);
6453
strapi.notification.error('notification.error');
54+
dispatch(setLoadingState(false));
6555
}
6656
}
6757
}
6858

6959
export function importAllConfig() {
7060
return async function(dispatch) {
61+
dispatch(setLoadingState(true));
7162
try {
7263
const { message } = await request('/config/import', { method: 'GET' });
73-
dispatch(getAllFileConfig());
74-
dispatch(getAllDatabaseConfig());
64+
dispatch(setFileConfigInState(Map({})));
65+
dispatch(setDatabaseConfigInState(Map({})));
7566

7667
strapi.notification.success(message);
68+
dispatch(setLoadingState(false));
7769
} catch(err) {
78-
console.log(err);
7970
strapi.notification.error('notification.error');
71+
dispatch(setLoadingState(false));
8072
}
8173
}
74+
}
75+
76+
export const SET_LOADING_STATE = 'SET_LOADING_STATE';
77+
export function setLoadingState(value) {
78+
return {
79+
type: SET_LOADING_STATE,
80+
value,
81+
};
8282
}

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,12 @@
55
*/
66

77
import { fromJS, Map } from 'immutable';
8-
import { SET_DATABASE_CONFIG_IN_STATE, SET_FILE_CONFIG_IN_STATE } from '../../actions/Config';
8+
import { SET_DATABASE_CONFIG_IN_STATE, SET_FILE_CONFIG_IN_STATE, SET_LOADING_STATE } from '../../actions/Config';
99

1010
const initialState = fromJS({
1111
databaseConfig: Map({}),
12-
fileConfig: Map({})
12+
fileConfig: Map({}),
13+
isLoading: false,
1314
});
1415

1516
export default function configReducer(state = initialState, action) {
@@ -20,6 +21,9 @@ export default function configReducer(state = initialState, action) {
2021
case SET_FILE_CONFIG_IN_STATE:
2122
return state
2223
.update('fileConfig', () => fromJS(action.config))
24+
case SET_LOADING_STATE:
25+
return state
26+
.update('isLoading', () => fromJS(action.value))
2327
default:
2428
return state;
2529
}

‎admin/src/translations/en.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
"popUpWarning.button.export": "Yes, export",
66

77
"Header.Title": "Config Sync",
8-
"Header.Description": "Manage your database config acros environments.",
8+
"Header.Description": "Manage your database config across environments.",
99

1010
"plugin.name": "Config Sync"
1111
}

0 commit comments

Comments
 (0)