Clean code

This commit is contained in:
soupette 2019-07-29 17:44:47 +02:00
parent aa7a41e039
commit 53d0014dc2
12 changed files with 93 additions and 90 deletions

View File

@ -9,9 +9,7 @@ import '@babel/polyfill';
import 'sanitize.css/sanitize.css';
// Third party css library needed
// Currently unable to bundle them
// import 'react-select/dist/react-select.css';
import 'react-datetime/css/react-datetime.css';
import './styles/main.scss';

View File

@ -7,15 +7,12 @@
.buttonContainer {
width: 100%;
// width: 358px;
height: 34px;
text-align: center;
background-color: #fafafb;
// border: 1px solid #E3E9F3;
border-top: 0;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
color: #333740;
font-size: 12px;
font-weight: 700;

View File

@ -101,11 +101,4 @@
margin-right: 7px;
color: #b3b5b9;
}
// margin-right: 8px;
// &:before {
// content: '\F08E';
// display: block;
// font-family: 'FontAwesome';
// font-size: 11px;
// }
}

View File

@ -13,8 +13,6 @@ const ListWrapper = styled.div`
overflow-x: scroll;
}
.list-button {
// padding: 1rem 3rem 2.5rem 3rem;
padding: 1.4rem 3rem 2.5rem 3rem;
button {

View File

@ -36,7 +36,6 @@ const Wrapper = styled.div`
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
// width: calc(100% - 18px);
text-align: center;
margin-bottom: 0;
margin-top: -1px;

View File

@ -47,11 +47,10 @@ const FieldForm = ({
{Object.keys(metadatas)
.filter(meta => meta !== 'visible')
.map(meta => {
if (formType === 'group' && meta !== 'label') {
return null;
}
if (formType === 'media' && !['label'].includes(meta)) {
if (
(formType === 'group' || formType === 'media') &&
meta !== 'label'
) {
return null;
}

View File

@ -5,9 +5,9 @@ const InfoLabel = styled.div`
top: 0;
right: 40px;
max-width: 80px;
text-overflow: ellipsis;
overflow: hidden;
font-weight: 400;
color: #007eff;
`;
@ -40,8 +40,8 @@ const Carret = styled.div`
`;
}}
height: 30px;
margin-right: 3px;
width: 2px;
margin-right: 3px;
border-radius: 2px;
background: #007eff;
`;
@ -75,11 +75,11 @@ const NameWrapper = styled.div`
}
.name {
display: inline-block;
width: calc(100% - 18px);
vertical-align: top;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: calc(100% - 18px);
}
${({ isHidden }) => {

View File

@ -77,10 +77,6 @@ const Item = ({
moveRow(dragRow, targetRow);
// Note: we're mutating the monitor item here!
// Generally it's better to avoid mutations,
// but it's good here for the sake of performance
// to avoid expensive index searches.
item.rowIndex = targetRow;
item.itemIndex = hoverIndex;
@ -116,7 +112,6 @@ const Item = ({
Math.abs(monitor.getClientOffset().x - hoverBoundingRect.left) >
hoverBoundingRect.width / 1.8
) {
// TODO ADD NEW LINE
moveItem(dragIndex, hoverIndex + 1, dragRow, targetRow);
item.itemIndex = hoverIndex + 1;
@ -160,6 +155,8 @@ const Item = ({
item: { type: ItemTypes.EDIT_FIELD, itemIndex, rowIndex, name, size },
});
// Remove the default preview when the item is being dragged
// The preview is handled by the DragLayer
useEffect(() => {
preview(getEmptyImage(), { captureDraggingState: true });
}, [preview]);

View File

@ -15,8 +15,6 @@ function reducer(state, action) {
list.map(obj => obj.update('isOpen', () => false))
);
case 'OPEN_COLLAPSES_THAT_HAVE_ERRORS':
// TODO fix collapse open
// return state;
return state
.update('collapsesToOpen', () => fromJS(action.collapsesToOpen))
.update('collapses', list => {

View File

@ -87,7 +87,7 @@ const Item = ({ index, move, name, removeItem }) => {
push={goTo}
ref={ref}
size={12}
style={{ marginBottom: 6 }}
style={{ marginBottom: 6, paddingLeft: 5, paddingRight: 5 }}
/>
);
};

View File

@ -25,7 +25,7 @@ const getSize = type => {
};
const reducer = (state, action) => {
const layoutPath = ['modifiedData', 'layouts', 'edit'];
const layoutPathEdit = ['modifiedData', 'layouts', 'edit'];
const { dragIndex, hoverIndex, dragRowIndex, hoverRowIndex } = action;
const getFieldType = name =>
state.getIn(['modifiedData', 'schema', 'attributes', name, 'type']);
@ -39,10 +39,13 @@ const reducer = (state, action) => {
.update('itemFormType', () => action.itemFormType)
.update('modifiedData', () => fromJS(action.data));
case 'MOVE_ROW':
return state.updateIn(layoutPath, list => {
return state.updateIn(layoutPathEdit, list => {
return list
.delete(dragRowIndex)
.insert(hoverRowIndex, state.getIn([...layoutPath, dragRowIndex]));
.insert(
hoverRowIndex,
state.getIn([...layoutPathEdit, dragRowIndex])
);
});
case 'ON_ADD_DATA': {
const size = getSize(
@ -54,9 +57,9 @@ const reducer = (state, action) => {
'type',
])
);
const listSize = state.getIn(layoutPath).size;
const listSize = state.getIn(layoutPathEdit).size;
const newList = state
.getIn(layoutPath)
.getIn(layoutPathEdit)
.updateIn([listSize - 1, 'rowContent'], list => {
if (list) {
return list.push({
@ -70,7 +73,7 @@ const reducer = (state, action) => {
const formattedList = formatLayout(newList.toJS());
return state
.updateIn(layoutPath, () => fromJS(formattedList))
.updateIn(layoutPathEdit, () => fromJS(formattedList))
.update('itemNameToSelect', () => action.name)
.update('itemFormType', () => getFieldType(action.name) || '');
}
@ -81,7 +84,11 @@ const reducer = (state, action) => {
);
case 'REMOVE_FIELD': {
const row = state.getIn([...layoutPath, action.rowIndex, 'rowContent']);
const row = state.getIn([
...layoutPathEdit,
action.rowIndex,
'rowContent',
]);
let newState;
let fieldNameToDelete;
// Delete the entire row if length is one or if lenght is equal to 2 and the second element is the hidden div used to make the dnd exp smoother
@ -90,18 +97,18 @@ const reducer = (state, action) => {
(row.size == 2 && row.getIn([1, 'name']) === '_TEMP_')
) {
fieldNameToDelete = state.getIn([
...layoutPath,
...layoutPathEdit,
action.rowIndex,
'rowContent',
0,
'name',
]);
newState = state.updateIn(layoutPath, list =>
newState = state.updateIn(layoutPathEdit, list =>
list.delete(action.rowIndex)
);
} else {
fieldNameToDelete = state.getIn([
...layoutPath,
...layoutPathEdit,
action.rowIndex,
'rowContent',
action.fieldIndex,
@ -109,13 +116,13 @@ const reducer = (state, action) => {
]);
newState = state.updateIn(
[...layoutPath, action.rowIndex, 'rowContent'],
[...layoutPathEdit, action.rowIndex, 'rowContent'],
list => list.delete(action.fieldIndex)
);
}
const updatedList = fromJS(
formatLayout(newState.getIn(layoutPath).toJS())
formatLayout(newState.getIn(layoutPathEdit).toJS())
);
if (state.get('itemNameToSelect') === fieldNameToDelete) {
@ -123,39 +130,44 @@ const reducer = (state, action) => {
updatedList.getIn([0, 'rowContent', 0, 'name']) || '';
return state
.updateIn(layoutPath, () => updatedList)
.updateIn(layoutPathEdit, () => updatedList)
.update('itemNameToSelect', () => firstField)
.update('itemFormType', () => getFieldType(firstField) || '');
}
return state.updateIn(layoutPath, () => updatedList);
return state.updateIn(layoutPathEdit, () => updatedList);
}
case 'REORDER_DIFF_ROW': {
const newState = state
.updateIn([...layoutPath, dragRowIndex, 'rowContent'], list => {
.updateIn([...layoutPathEdit, dragRowIndex, 'rowContent'], list => {
return list.remove(dragIndex);
})
.updateIn([...layoutPath, hoverRowIndex, 'rowContent'], list => {
.updateIn([...layoutPathEdit, hoverRowIndex, 'rowContent'], list => {
return list.insert(
hoverIndex,
state.getIn([...layoutPath, dragRowIndex, 'rowContent', dragIndex])
state.getIn([
...layoutPathEdit,
dragRowIndex,
'rowContent',
dragIndex,
])
);
});
const updatedList = formatLayout(newState.getIn(layoutPath).toJS());
const updatedList = formatLayout(newState.getIn(layoutPathEdit).toJS());
return state.updateIn(layoutPath, () => fromJS(updatedList));
return state.updateIn(layoutPathEdit, () => fromJS(updatedList));
}
case 'REORDER_ROW': {
const newState = state.updateIn(
[...layoutPath, dragRowIndex, 'rowContent'],
[...layoutPathEdit, dragRowIndex, 'rowContent'],
list => {
return list.delete(dragIndex).insert(hoverIndex, list.get(dragIndex));
}
);
const updatedList = formatLayout(newState.getIn(layoutPath).toJS());
const updatedList = formatLayout(newState.getIn(layoutPathEdit).toJS());
return state.updateIn(layoutPath, () => fromJS(updatedList));
return state.updateIn(layoutPathEdit, () => fromJS(updatedList));
}
case 'RESET':
return state.update('modifiedData', () => state.get('initialData'));

View File

@ -57,8 +57,8 @@ const getSize = type => {
};
function settingViewModelReducer(state = initialState, action) {
const layoutPath = ['modifiedData', 'layouts', 'edit'];
const relationPath = ['modifiedData', 'layouts', 'editRelations'];
const layoutPathEdit = ['modifiedData', 'layouts', 'edit'];
const layoutPathRelations = ['modifiedData', 'layouts', 'editRelations'];
const { dragIndex, hoverIndex, dragRowIndex, hoverRowIndex } = action;
const getFieldType = name =>
state.getIn(['modifiedData', 'schema', 'attributes', name, 'type']);
@ -70,9 +70,7 @@ function settingViewModelReducer(state = initialState, action) {
);
case ADD_RELATION:
return state
.updateIn(['modifiedData', 'layouts', 'editRelations'], list =>
list.push(action.name)
)
.updateIn(layoutPathRelations, list => list.push(action.name))
.update('itemNameToSelect', () => action.name)
.update('itemFormType', () => getFieldType(action.name));
case GET_DATA_SUCCEEDED:
@ -93,17 +91,20 @@ function settingViewModelReducer(state = initialState, action) {
return action.overIndex;
});
case MOVE_RELATION: {
return state.updateIn(relationPath, list => {
return state.updateIn(layoutPathRelations, list => {
return list
.delete(dragIndex)
.insert(hoverIndex, state.getIn([...relationPath, dragIndex]));
.insert(hoverIndex, state.getIn([...layoutPathRelations, dragIndex]));
});
}
case MOVE_ROW:
return state.updateIn(layoutPath, list => {
return state.updateIn(layoutPathEdit, list => {
return list
.delete(dragRowIndex)
.insert(hoverRowIndex, state.getIn([...layoutPath, dragRowIndex]));
.insert(
hoverRowIndex,
state.getIn([...layoutPathEdit, dragRowIndex])
);
});
case ON_ADD_DATA: {
const size = getSize(
@ -116,9 +117,9 @@ function settingViewModelReducer(state = initialState, action) {
])
);
const listSize = state.getIn(layoutPath).size;
const listSize = state.getIn(layoutPathEdit).size;
const newList = state
.getIn(layoutPath)
.getIn(layoutPathEdit)
.updateIn([listSize - 1, 'rowContent'], list => {
if (list) {
return list.push({
@ -132,7 +133,7 @@ function settingViewModelReducer(state = initialState, action) {
const formattedList = formatLayout(newList.toJS());
return state
.updateIn(layoutPath, () => fromJS(formattedList))
.updateIn(layoutPathEdit, () => fromJS(formattedList))
.update('itemNameToSelect', () => action.name)
.update('itemFormType', () => getFieldType(action.name));
}
@ -169,7 +170,11 @@ function settingViewModelReducer(state = initialState, action) {
.update('modifiedData', () => state.get('initialData'))
.update('listFieldToEditIndex', () => 0);
case REMOVE_FIELD: {
const row = state.getIn([...layoutPath, action.rowIndex, 'rowContent']);
const row = state.getIn([
...layoutPathEdit,
action.rowIndex,
'rowContent',
]);
let newState;
let fieldName;
@ -179,34 +184,30 @@ function settingViewModelReducer(state = initialState, action) {
(row.size == 2 && row.getIn([1, 'name']) === '_TEMP_')
) {
fieldName = state.getIn([
'modifiedData',
'layouts',
'edit',
...layoutPathEdit,
action.rowIndex,
'rowContent',
0,
'name',
]);
newState = state.updateIn(layoutPath, list =>
newState = state.updateIn(layoutPathEdit, list =>
list.delete(action.rowIndex)
);
} else {
fieldName = state.getIn([
'modifiedData',
'layouts',
'edit',
...layoutPathEdit,
action.rowIndex,
'rowContent',
action.fieldIndex,
'name',
]);
newState = state.updateIn(
[...layoutPath, action.rowIndex, 'rowContent'],
[...layoutPathEdit, action.rowIndex, 'rowContent'],
list => list.delete(action.fieldIndex)
);
}
const updatedList = fromJS(
formatLayout(newState.getIn(layoutPath).toJS())
formatLayout(newState.getIn(layoutPathEdit).toJS())
);
if (state.get('itemNameToSelect') === fieldName) {
@ -216,29 +217,35 @@ function settingViewModelReducer(state = initialState, action) {
0,
'name',
]);
const firstRelationFieldToSelect = state.getIn([...relationPath, 0]);
const firstRelationFieldToSelect = state.getIn([
...layoutPathRelations,
0,
]);
const fieldToSelect =
firstFieldEditToSelect || firstRelationFieldToSelect || '';
const fieldToSelectType = getFieldType(fieldToSelect) || '';
return state
.updateIn(layoutPath, () => updatedList)
.updateIn(layoutPathEdit, () => updatedList)
.update('itemNameToSelect', () => fieldToSelect)
.update('itemFormType', () => fieldToSelectType);
}
return state.updateIn(layoutPath, () => updatedList);
return state.updateIn(layoutPathEdit, () => updatedList);
}
case REMOVE_RELATION: {
let newState = state.updateIn(relationPath, list =>
let newState = state.updateIn(layoutPathRelations, list =>
list.delete(action.index)
);
const fieldToDeleteName = state.getIn([...relationPath, action.index]);
const fieldToDeleteName = state.getIn([
...layoutPathRelations,
action.index,
]);
if (state.get('itemNameToSelect') === fieldToDeleteName) {
const firstRelation = newState.getIn([...relationPath, 0]);
const firstRelation = newState.getIn([...layoutPathRelations, 0]);
const firstEditField = newState.getIn([
...layoutPath,
...layoutPathEdit,
'0',
'rowContent',
'0',
@ -256,31 +263,36 @@ function settingViewModelReducer(state = initialState, action) {
}
case REORDER_DIFF_ROW: {
const newState = state
.updateIn([...layoutPath, dragRowIndex, 'rowContent'], list => {
.updateIn([...layoutPathEdit, dragRowIndex, 'rowContent'], list => {
return list.remove(dragIndex);
})
.updateIn([...layoutPath, hoverRowIndex, 'rowContent'], list => {
.updateIn([...layoutPathEdit, hoverRowIndex, 'rowContent'], list => {
return list.insert(
hoverIndex,
state.getIn([...layoutPath, dragRowIndex, 'rowContent', dragIndex])
state.getIn([
...layoutPathEdit,
dragRowIndex,
'rowContent',
dragIndex,
])
);
});
const updatedList = formatLayout(newState.getIn(layoutPath).toJS());
const updatedList = formatLayout(newState.getIn(layoutPathEdit).toJS());
return state.updateIn(layoutPath, () => fromJS(updatedList));
return state.updateIn(layoutPathEdit, () => fromJS(updatedList));
}
case REORDER_ROW: {
const newState = state.updateIn(
[...layoutPath, dragRowIndex, 'rowContent'],
[...layoutPathEdit, dragRowIndex, 'rowContent'],
list => {
return list.delete(dragIndex).insert(hoverIndex, list.get(dragIndex));
}
);
const updatedList = formatLayout(newState.getIn(layoutPath).toJS());
const updatedList = formatLayout(newState.getIn(layoutPathEdit).toJS());
return state.updateIn(layoutPath, () => fromJS(updatedList));
return state.updateIn(layoutPathEdit, () => fromJS(updatedList));
}
case RESET_PROPS:
return initialState;