[BUGFIX] Fix minor focus issue, add delete button, fix list order

src/components/pages/Settings/Supply/CustomSetupEdit/BluePrint.tsx

@@ -1,11 +1,13 @@
 import React from 'react'
+import FormControl from '@material-ui/core/FormControl'
 import * as types from '../../../../../types'
 
 import InputField from './InputField'
 import MenuItem from '@material-ui/core/MenuItem'
 import SelectField from './SelectField'
 import SelectFieldsWrapper from './SelectFieldsWrapper'
 import BluePrintWrapper from './BluePrintWrapper'
+import CancelButton from './CancelButton'
 
 type Props = {
   bluePrint: types.IBluePrint
@@ -14,38 +16,33 @@ type Props = {
 
 // TODO refactor this file!
 
-// FIXME
-// * add delete handle
-// * fix ids
-// * reverse list add order
-
-const THRESHOLD_OPERATIONS = ['<', '>', '=', '<=', '>=']
-
 const isThresholdOperation = (operation: types.Operation) =>
-  THRESHOLD_OPERATIONS.includes(operation)
+  types.THRESHOLD_OPERATIONS.includes(operation)
 
 const renderInputFieldsByOperation = (
   bluePrint: types.IBluePrint,
   dispatch: Function
 ) => {
   if (isThresholdOperation(bluePrint.operation)) {
     return (
-      <InputField
-        id="threshold"
-        label="Threshold"
-        value={bluePrint.threshold || ''}
-        onChange={(e: React.ChangeEvent<{ name?: string; value: string }>) =>
-          dispatch({
-            type: 'UPDATE',
-            payload: {
-              ...bluePrint,
-              threshold: parseInt(e.target.value || '0'),
-            },
-          })
-        }
-        type="number"
-        margin="normal"
-      />
+      <FormControl>
+        <InputField
+          id={`threshold-${bluePrint.id}`}
+          label="Threshold"
+          value={bluePrint.threshold || ''}
+          onChange={(e: React.ChangeEvent<{ name?: string; value: string }>) =>
+            dispatch({
+              type: 'UPDATE',
+              payload: {
+                ...bluePrint,
+                threshold: parseInt(e.target.value || '0'),
+              },
+            })
+          }
+          type="number"
+          margin="normal"
+        />
+      </FormControl>
     )
   }
 
@@ -62,38 +59,46 @@ const renderInputFieldsByOperation = (
 
     return (
       <React.Fragment>
-        <InputField
-          id="value-1"
-          label="Value 1"
-          value={valueA}
-          onChange={(e: React.ChangeEvent<{ name?: string; value: string }>) =>
-            dispatch({
-              type: 'UPDATE',
-              payload: {
-                ...bluePrint,
-                values: [parseInt(e.target.value || '0'), parseInt(valueB)],
-              },
-            })
-          }
-          type="number"
-          margin="normal"
-        />
-        <InputField
-          id="value-2"
-          label="Value 2"
-          value={valueB}
-          onChange={(e: React.ChangeEvent<{ name?: string; value: string }>) =>
-            dispatch({
-              type: 'UPDATE',
-              payload: {
-                ...bluePrint,
-                values: [parseInt(valueA), parseInt(e.target.value || '0')],
-              },
-            })
-          }
-          type="number"
-          margin="normal"
-        />
+        <FormControl>
+          <InputField
+            id={`value-1-${bluePrint.id}`}
+            label="Value 1"
+            value={valueA}
+            onChange={(
+              e: React.ChangeEvent<{ name?: string; value: string }>
+            ) =>
+              dispatch({
+                type: 'UPDATE',
+                payload: {
+                  ...bluePrint,
+                  values: [parseInt(e.target.value || '0'), parseInt(valueB)],
+                },
+              })
+            }
+            type="number"
+            margin="normal"
+          />
+        </FormControl>
+        <FormControl>
+          <InputField
+            id={`value-2-${bluePrint.id}`}
+            label="Value 2"
+            value={valueB}
+            onChange={(
+              e: React.ChangeEvent<{ name?: string; value: string }>
+            ) =>
+              dispatch({
+                type: 'UPDATE',
+                payload: {
+                  ...bluePrint,
+                  values: [parseInt(valueA), parseInt(e.target.value || '0')],
+                },
+              })
+            }
+            type="number"
+            margin="normal"
+          />
+        </FormControl>
       </React.Fragment>
     )
   }
@@ -104,6 +109,16 @@ const renderInputFieldsByOperation = (
 const BluePrint = React.memo(({ bluePrint, dispatch }: Props) => {
   return (
     <BluePrintWrapper>
+      <CancelButton
+        onClick={() =>
+          dispatch({
+            type: 'DELETE',
+            payload: {
+              id: bluePrint.id,
+            },
+          })
+        }
+      />
       <SelectFieldsWrapper>
         <SelectField
           key="type"
@@ -119,7 +134,7 @@ const BluePrint = React.memo(({ bluePrint, dispatch }: Props) => {
           }
           inputProps={{
             name: 'type',
-            id: 'type',
+            id: `type-${bluePrint.id}`,
           }}
         >
           {types.CARD_TYPES.filter(TYPE => TYPE !== 'EMPTY').map(TYPE => (
@@ -142,7 +157,7 @@ const BluePrint = React.memo(({ bluePrint, dispatch }: Props) => {
           }
           inputProps={{
             name: 'operation',
-            id: 'operation',
+            id: `operation-${bluePrint.id}`,
           }}
         >
           {types.SUPPLY_OPERATIONS.filter(

src/components/pages/Settings/Supply/CustomSetupEdit/BluePrintWrapper.tsx

@@ -1,11 +1,13 @@
 import styled from 'styled-components'
 
 const BluePrintWrapper = styled('div')`
+  position: relative;
+
   display: flex;
   flex-direction: column;
 
   background-color: #ecf0f1;
-  padding: 16px;
+  padding: 30px 20px 15px;
   margin: 8px 0;
 
   &:last-child {

src/components/pages/Settings/Supply/CustomSetupEdit/CancelButton.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import styled from 'styled-components'
+import IconButton from '@material-ui/core/IconButton'
+import CancelIcon from '@material-ui/icons/Cancel'
+
+const CancelButton = React.memo((props: any) => (
+  <IconButton
+    className={props.className}
+    color="secondary"
+    aria-label="Cancel"
+    onClick={props.onClick}
+  >
+    <CancelIcon />
+  </IconButton>
+))
+
+const StyledCancelButton = styled(CancelButton)`
+  position: absolute;
+  top: -5px;
+  right: -5px;
+`
+
+export default StyledCancelButton

src/components/pages/Settings/Supply/CustomSetupEdit/SelectField.tsx

@@ -1,9 +1,20 @@
+import React from 'react'
 import styled from 'styled-components'
-import Select from '@material-ui/core/Select'
+import MuiSelect from '@material-ui/core/Select'
+import MuiFormControl from '@material-ui/core/FormControl'
 
-const SelectField = styled(Select)`
-  margin: 0 8px 16px;
+const Wrapper = styled(MuiFormControl)`
   width: 50%;
 `
 
+const Select = styled(MuiSelect)`
+  margin: 0 8px 16px;
+`
+
+const SelectField = React.memo((props: any) => (
+  <Wrapper>
+    <Select {...props} />
+  </Wrapper>
+))
+
 export default SelectField

src/components/pages/Settings/Supply/CustomSetupEdit/index.tsx

@@ -74,7 +74,7 @@ const CustomSetupEdit = React.memo(
       setup.tiles,
       initialStateFromTiles
     )
-    const bluePrintList = Object.values(bluePrints)
+    const bluePrintList = Object.values(bluePrints).reverse()
 
     return (
       <Wrapper>

src/types.ts

@@ -42,12 +42,9 @@ export interface IExpansionData {
 ////////////
 
 export type MarketType = 'official' | 'custom'
+export const THRESHOLD_OPERATIONS = ['<', '>', '=', '<=', '>='] // Note: should not be a const, because we want to treat it as regular list
 export const SUPPLY_OPERATIONS = [
-  '<',
-  '>',
-  '=',
-  '<=',
-  '>=',
+  ...THRESHOLD_OPERATIONS,
   'ANY',
   'OR',
   'NoOp',