Refactor time selectors state shape to use array

app/actions/dayOfWeekSelectorActions.js

@@ -1,6 +1,6 @@
 export const TOGGLE_DAY_OF_WEEK_SELECTOR = 'TOGGLE_DAY_OF_WEEK_SELECTOR'
 
-export const toggleDayOfWeekSelector = dayOfWeekSelector => ({
+export const toggleDayOfWeekSelector = dayOfWeek => ({
   type: TOGGLE_DAY_OF_WEEK_SELECTOR,
-  dayOfWeekSelector,
+  dayOfWeek,
 })

app/actions/timeOfDaySelectorActions.js

@@ -1,6 +1,6 @@
 export const TOGGLE_TIME_OF_DAY_SELECTOR = 'TOGGLE_TIME_OF_DAY_SELECTOR'
 
-export const toggleTimeOfDaySelector = timeOfDaySelector => ({
+export const toggleTimeOfDaySelector = timeOfDay => ({
   type: TOGGLE_TIME_OF_DAY_SELECTOR,
-  timeOfDaySelector,
+  timeOfDay,
 })

app/components/TimeSelector/DayOfWeekSelector.js

@@ -5,11 +5,10 @@ import TimeSelectorButton from './TimeSelectorButton'
 
 import { Colors, Spacing, Typography } from '../../styles'
 
+const daysOfTheWeek = ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN']
+
 const DayOfWeekSelector = ({ daySelectors, toggleDayOfWeekSelector }) => {
-  const count = daySelectors.reduce(
-    (acc, selector) => (selector.isSelected ? acc + 1 : acc),
-    0
-  )
+  const count = daySelectors.length
 
   let countText
   if (count === 7) {
@@ -27,13 +26,16 @@ const DayOfWeekSelector = ({ daySelectors, toggleDayOfWeekSelector }) => {
         <Text style={styles.count}>{countText}</Text>
       </View>
       <View style={styles.buttonsContainer}>
-        {daySelectors.map(dayOfWeekSelector => (
+        {daysOfTheWeek.map(dayOfWeek => {
+          const isSelected = daySelectors.indexOf(dayOfWeek) !== -1
+          return (
           <TimeSelectorButton
             onPressCallback={toggleDayOfWeekSelector}
-            selector={dayOfWeekSelector}
-            key={dayOfWeekSelector.type}
+            isSelected={isSelected}
+            selector={dayOfWeek}
+            key={dayOfWeek}
           />
-        ))}
+        )})}
       </View>
     </View>
   )

app/components/TimeSelector/DayOfWeekSelectorContainer.js

@@ -5,27 +5,9 @@ import DayOfWeekSelector from './DayOfWeekSelector'
 
 const mapStateToProps = state => {
   const {
-    dayOfWeek: {
-      mon: monSelector,
-      tue: tueSelector,
-      wed: wedSelector,
-      thu: thuSelector,
-      fri: friSelector,
-      sat: satSelector,
-      sun: sunSelector,
-    },
+    dayOfWeek: daySelectors
   } = state
 
-  const daySelectors = [
-    monSelector,
-    tueSelector,
-    wedSelector,
-    thuSelector,
-    friSelector,
-    satSelector,
-    sunSelector,
-  ]
-
   return {
     daySelectors,
   }

app/components/TimeSelector/TimeOfDaySelector.js

@@ -4,11 +4,10 @@ import { Text, View, TouchableOpacity, StyleSheet } from 'react-native'
 import TimeSelectorButton from './TimeSelectorButton'
 import { Colors, Typography, Spacing } from '../../styles'
 
+const timesOfDay = ['MORNING', 'AFTERNOON', 'EVENING']
+
 const TimeOfDaySelector = ({ timeSelectors, toggleTimeOfDaySelector }) => {
-  const count = timeSelectors.reduce(
-    (acc, selector) => (selector.isSelected ? acc + 1 : acc),
-    0
-  )
+  const count = timeSelectors.length
 
   let countText
   if (count === 3) {
@@ -26,14 +25,17 @@ const TimeOfDaySelector = ({ timeSelectors, toggleTimeOfDaySelector }) => {
         <Text style={styles.count}>{countText}</Text>
       </View>
       <View style={styles.buttonsContainer}>
-        {timeSelectors.map(timeOfDaySelector => (
+        {timesOfDay.map(timeOfDay => {
+          const isSelected = timeSelectors.indexOf(timeOfDay) !== -1
+          return(
           <TimeSelectorButton
             onPressCallback={toggleTimeOfDaySelector}
-            selector={timeOfDaySelector}
+            selector={timeOfDay}
+            isSelected={isSelected}
             ownStyles={{ flex: 1 }}
-            key={timeOfDaySelector.type}
+            key={timeOfDay}
           />
-        ))}
+        )})}
       </View>
     </View>
   )

app/components/TimeSelector/TimeOfDaySelectorContainer.js

@@ -4,16 +4,7 @@ import { toggleTimeOfDaySelector } from '../../actions/timeOfDaySelectorActions'
 import TimeOfDaySelector from './TimeOfDaySelector'
 
 const mapStateToProps = state => {
-  const {
-    timeOfDay: {
-      morning: morningSelector,
-      afternoon: afternoonSelector,
-      evening: eveningSelector,
-    },
-  } = state
-
-  const timeSelectors = [morningSelector, afternoonSelector, eveningSelector]
-
+  const { timeOfDay: timeSelectors } = state
   return {
     timeSelectors,
   }

app/components/TimeSelector/TimeSelectorButton.js

@@ -11,7 +11,8 @@ class TimeSelectorButton extends Component {
 
   render() {
     const {
-      selector: { type, isSelected },
+      selector,
+      isSelected,
       ownStyles,
     } = this.props
 
@@ -22,7 +23,7 @@ class TimeSelectorButton extends Component {
           text: [styles.buttonText, styles.buttonTextUnselected],
         }
 
-    const title = type.toUpperCase()
+    const title = selector
 
     return (
       <TouchableOpacity

app/reducers/dayOfWeekSelectorReducer.js

@@ -1,29 +1,23 @@
 import { TOGGLE_DAY_OF_WEEK_SELECTOR } from '../actions/dayOfWeekSelectorActions'
 import { RESET_ALL_SELECTORS } from '../actions/selectorActions'
 
-const initialState = {
-  mon: { type: 'mon', isSelected: false, isSecret: false },
-  tue: { type: 'tue', isSelected: false, isSecret: false },
-  wed: { type: 'wed', isSelected: false, isSecret: false },
-  thu: { type: 'thu', isSelected: false, isSecret: true },
-  fri: { type: 'fri', isSelected: false, isSecret: false },
-  sat: { type: 'sat', isSelected: false, isSecret: false },
-  sun: { type: 'sun', isSelected: false, isSecret: false },
-}
+const initialState = []
 
 const dayOfWeekSelectorReducer = (state = initialState, action) => {
   Object.freeze(state)
-  const nextState = { ...state }
-  const { dayOfWeekSelector } = action
+  const nextState = [ ...state ]
+  const { dayOfWeek } = action
 
   switch (action.type) {
     case TOGGLE_DAY_OF_WEEK_SELECTOR: {
-      const { type, isSelected } = dayOfWeekSelector
-      nextState[type] = {
-        type,
-        isSelected: !isSelected,
+      const dayIndex = nextState.indexOf(dayOfWeek)
+      if (dayIndex === -1) {
+        nextState.push(dayOfWeek)
+        return nextState
+      } else {
+        nextState.splice(dayIndex, 1)
+        return nextState
       }
-      return nextState
     }
     case RESET_ALL_SELECTORS:
       return initialState

app/reducers/timeOfDaySelectorReducer.js

@@ -1,25 +1,23 @@
 import { TOGGLE_TIME_OF_DAY_SELECTOR } from '../actions/timeOfDaySelectorActions'
 import { RESET_ALL_SELECTORS } from '../actions/selectorActions'
 
-const initialState = {
-  morning: { type: 'morning', isSelected: false },
-  afternoon: { type: 'afternoon', isSelected: false },
-  evening: { type: 'evening', isSelected: false },
-}
+const initialState = []
 
 const timeOfDaySelectorsReducer = (state = initialState, action) => {
   Object.freeze(state)
-  const nextState = { ...state }
-  const { timeOfDaySelector } = action
+  const nextState = [ ...state ]
+  const { timeOfDay } = action
 
   switch (action.type) {
     case TOGGLE_TIME_OF_DAY_SELECTOR: {
-      const { type, isSelected } = timeOfDaySelector
-      nextState[type] = {
-        type,
-        isSelected: !isSelected,
+    const timeIndex = nextState.indexOf(timeOfDay)
+      if (timeIndex === -1) {
+        nextState.push(timeOfDay)
+        return nextState
+      } else {
+        nextState.splice(timeIndex, 1)
+        return nextState
       }
-      return nextState
     }
     case RESET_ALL_SELECTORS:
       return initialState