From 53d0014dc29adea54d7d33cb74d2e4184c0cb230 Mon Sep 17 00:00:00 2001 From: soupette Date: Mon, 29 Jul 2019 17:44:47 +0200 Subject: [PATCH] Clean code --- packages/strapi-admin/admin/src/app.js | 2 - .../lib/src/components/InputFile/styles.scss | 3 - .../components/InputFileDetails/styles.scss | 7 -- .../lib/src/components/ListWrapper/index.js | 2 - .../src/components/AddDropdown/components.js | 1 - .../admin/src/components/FieldForm/index.js | 9 +- .../src/components/FieldItem/components.js | 6 +- .../src/components/FieldsReorder/Item.js | 7 +- .../admin/src/components/Group/reducer.js | 2 - .../admin/src/components/SortableList/Item.js | 2 +- .../containers/SettingViewGroup/reducer.js | 56 +++++++----- .../containers/SettingViewModel/reducer.js | 86 +++++++++++-------- 12 files changed, 93 insertions(+), 90 deletions(-) diff --git a/packages/strapi-admin/admin/src/app.js b/packages/strapi-admin/admin/src/app.js index 30b407c0cc..772d67dfdc 100644 --- a/packages/strapi-admin/admin/src/app.js +++ b/packages/strapi-admin/admin/src/app.js @@ -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'; diff --git a/packages/strapi-helper-plugin/lib/src/components/InputFile/styles.scss b/packages/strapi-helper-plugin/lib/src/components/InputFile/styles.scss index acdc7b162b..2f9007cc27 100644 --- a/packages/strapi-helper-plugin/lib/src/components/InputFile/styles.scss +++ b/packages/strapi-helper-plugin/lib/src/components/InputFile/styles.scss @@ -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; diff --git a/packages/strapi-helper-plugin/lib/src/components/InputFileDetails/styles.scss b/packages/strapi-helper-plugin/lib/src/components/InputFileDetails/styles.scss index 6c1f7064a6..aba9fa6113 100644 --- a/packages/strapi-helper-plugin/lib/src/components/InputFileDetails/styles.scss +++ b/packages/strapi-helper-plugin/lib/src/components/InputFileDetails/styles.scss @@ -101,11 +101,4 @@ margin-right: 7px; color: #b3b5b9; } - // margin-right: 8px; - // &:before { - // content: '\F08E'; - // display: block; - // font-family: 'FontAwesome'; - // font-size: 11px; - // } } diff --git a/packages/strapi-helper-plugin/lib/src/components/ListWrapper/index.js b/packages/strapi-helper-plugin/lib/src/components/ListWrapper/index.js index 7d44832859..721e6b2bee 100644 --- a/packages/strapi-helper-plugin/lib/src/components/ListWrapper/index.js +++ b/packages/strapi-helper-plugin/lib/src/components/ListWrapper/index.js @@ -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 { diff --git a/packages/strapi-plugin-content-manager/admin/src/components/AddDropdown/components.js b/packages/strapi-plugin-content-manager/admin/src/components/AddDropdown/components.js index 2d817c9b21..f1579ceba1 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/AddDropdown/components.js +++ b/packages/strapi-plugin-content-manager/admin/src/components/AddDropdown/components.js @@ -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; diff --git a/packages/strapi-plugin-content-manager/admin/src/components/FieldForm/index.js b/packages/strapi-plugin-content-manager/admin/src/components/FieldForm/index.js index 613cdef11c..39a288b97d 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/FieldForm/index.js +++ b/packages/strapi-plugin-content-manager/admin/src/components/FieldForm/index.js @@ -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; } diff --git a/packages/strapi-plugin-content-manager/admin/src/components/FieldItem/components.js b/packages/strapi-plugin-content-manager/admin/src/components/FieldItem/components.js index 938295d930..1a3d257310 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/FieldItem/components.js +++ b/packages/strapi-plugin-content-manager/admin/src/components/FieldItem/components.js @@ -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 }) => { diff --git a/packages/strapi-plugin-content-manager/admin/src/components/FieldsReorder/Item.js b/packages/strapi-plugin-content-manager/admin/src/components/FieldsReorder/Item.js index 91bc958329..855141fbe4 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/FieldsReorder/Item.js +++ b/packages/strapi-plugin-content-manager/admin/src/components/FieldsReorder/Item.js @@ -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]); diff --git a/packages/strapi-plugin-content-manager/admin/src/components/Group/reducer.js b/packages/strapi-plugin-content-manager/admin/src/components/Group/reducer.js index ae044f04a0..765b3232d7 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/Group/reducer.js +++ b/packages/strapi-plugin-content-manager/admin/src/components/Group/reducer.js @@ -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 => { diff --git a/packages/strapi-plugin-content-manager/admin/src/components/SortableList/Item.js b/packages/strapi-plugin-content-manager/admin/src/components/SortableList/Item.js index 726b1966d9..f7f09f7ba5 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/SortableList/Item.js +++ b/packages/strapi-plugin-content-manager/admin/src/components/SortableList/Item.js @@ -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 }} /> ); }; diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewGroup/reducer.js b/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewGroup/reducer.js index 47bfa9bd5c..dbd06fed63 100644 --- a/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewGroup/reducer.js +++ b/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewGroup/reducer.js @@ -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')); diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/reducer.js b/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/reducer.js index dca5d95e71..514c3dd1dd 100644 --- a/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/reducer.js +++ b/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/reducer.js @@ -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;