Merge pull request #28 from Cognifide/features/sort-widget-types-alph…

…abetically Sort widget types by name
wttech · Sep 4, 2019 · 55b1248 · 55b1248
2 parents 60b93ce + 8012a63
commit 55b1248
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 10 deletions.
diff --git a/cogboard-webapp/src/components/WidgetForm.js b/cogboard-webapp/src/components/WidgetForm.js
@@ -5,11 +5,12 @@ import styled from '@emotion/styled/macro';
 
 import widgetTypes from './widgets';
 import { useFormData } from '../hooks';
-import DropdownField from './DropdownField';
-import WidgetTypeForm from './WidgetTypeForm';
+import { sortByKey } from "./helpers";
+import { COLUMNS_MIN, ROWS_MIN } from '../constants';
 
 import { Box, FormControlLabel, FormControl, MenuItem, TextField, Switch } from '@material-ui/core';
-import { COLUMNS_MIN, ROWS_MIN } from '../constants';
+import DropdownField from './DropdownField';
+import WidgetTypeForm from './WidgetTypeForm';
 
 const StyledFieldset = styled(FormControl)`
   display: flex;
@@ -22,11 +23,9 @@ const StyledNumberField = styled(TextField)`
 `;
 
 const renderWidgetTypesMenu = (widgetTypes) =>
-  Object.entries(widgetTypes).map(([type, { name }]) => {
-    const formatedName = type === 'DefaultWidget' ? <em>{name}</em> : name;
-
-    return <MenuItem key={type} value={type}>{formatedName}</MenuItem>;
-  });
+  Object.entries(widgetTypes).map(([type, { name }]) => (
+    <MenuItem key={type} value={type}>{name}</MenuItem>
+  ));
 
 const WidgetForm = ({ renderActions, ...initialFormValues }) => {
   const boardColumns = useSelector(
@@ -43,7 +42,7 @@ const WidgetForm = ({ renderActions, ...initialFormValues }) => {
           id="widget-type"
           name="type"
           value={values.type}
-          dropdownItems={widgetTypes}
+          dropdownItems={sortByKey(widgetTypes, 'name')}
         >
           {renderWidgetTypesMenu}
         </DropdownField>

diff --git a/cogboard-webapp/src/components/helpers/index.js b/cogboard-webapp/src/components/helpers/index.js
@@ -2,4 +2,13 @@ export const setSize = factor => ({ theme }) => `${theme.spacing(factor)}px`;
 
 export const splitPropsGroupName = (propName) => {
   return propName.includes('.') ? propName.split('.') : [undefined, propName];
-};
+};
+
+export const sortByKey = (obj, key, asc = true) => Object.entries(obj)
+  .sort(([, { [key]: keyA }], [, { [key]: keyB }]) => (
+    asc ? keyA.localeCompare(keyB) : keyB.localeCompare(keyA)))
+  .reduce((newObj, [key, value]) => {
+    newObj[key] = value;
+
+    return newObj;
+  }, {});