Smaller UI bugfixes

fixed: text fields get value "value" when beeing empty
fixed: resolution of day before schedule
fix: set* must result in an updated instance
fix: MenuItem needs key

Author: mskg

src/settings/dialogs/CopyDayDialog.tsx

@@ -25,45 +25,52 @@ const CopyDayDialog: React.FunctionComponent<Props> = (props: Props) => {
     setDays(null);
   }, [props.open]);
 
-  const toggleDay = (day) => setDays((oldDays) => {
-    if (oldDays == null) { oldDays = []; }
+  const toggleDay = (day) => () => {
+    setDays((oldDays) => {
+      if (oldDays == null) { oldDays = []; }
 
-    const found = find(oldDays, (d) => d === day);
-    remove(oldDays, (d) => d === day);
+      const found = find(oldDays, (d) => d === day);
+      remove(oldDays, (d) => d === day);
 
-    if (found == null) {
-      oldDays.push(day);
-    }
+      if (found == null) {
+        oldDays.push(day);
+      }
 
-    return oldDays;
-  });
+      // needs to be a new reference to update
+      return [...oldDays];
+    });
+  };
+
+  const checkDay = (day) => {
+    return find(days, (d) => d === day) != null;
+  };
 
   return (
     <Dialog open={props.open} onClose={() => { props.onCancel(); }} TransitionComponent={Transition}>
       <DialogTitle>{translate("copy.title")}</DialogTitle>
       <DialogContent>
         <DialogContentText>
-        {translate("copy.text")}
+          {translate("copy.text")}
         </DialogContentText>
 
         <List dense={true}>
           {map([1, 2, 3, 4, 5, 6, 0], (day) => (
-            <ListItem key={day} button={true} onClick={() => toggleDay(day)}>
+            <ListItem key={day} button={true} onClick={toggleDay(day)}>
               <ListItemText primary={translate(`copy.${Day[day]}`)} />
               <ListItemSecondaryAction>
-                <Checkbox checked={find(days, (d) => d === day) != null} onClick={() => toggleDay(day)} />
+                <Checkbox checked={checkDay(day)} onClick={toggleDay(day)} />
               </ListItemSecondaryAction>
             </ListItem>
           ))}
         </List>
       </DialogContent>
       <DialogActions>
         <Button onClick={() => { props.onCancel(); }} color="primary">
-        {translate("copy.cancel")}
+          {translate("copy.cancel")}
         </Button>
 
         <Button onClick={() => { props.onConfirm(days); }} color="primary">
-        {translate("copy.ok")}
+          {translate("copy.ok")}
         </Button>
       </DialogActions>
     </Dialog>

src/settings/pages/overview.tsx

@@ -105,7 +105,7 @@ const OverviewPage: React.FunctionComponent<Props> = (props) => {
                             >
                             {
                                 [0, 1, 2, 3, 4, 5].map((m) =>
-                                    (<MenuItem value={m}>{translate(`Modes.${m}`)}</MenuItem>),
+                                    (<MenuItem key={m} value={m}>{translate(`Modes.${m}`)}</MenuItem>),
                                 )
                             }
                             </Select>
@@ -115,7 +115,7 @@ const OverviewPage: React.FunctionComponent<Props> = (props) => {
                         { plans.length === 0
                             ? <BodyText style={{paddingTop: 16}} text={translate("plans.plans.empty")} />
                             : <List className={classes.list}>
-                                {plans.length > 0 && <Divider />}
+                                {plans.length > 0 && <Divider key="0" />}
                                 {plans.map((plan) => (
                                     <React.Fragment key={plan.id}>
                                         <ListItem {...{ to: `/plans/${plan.id}` }} component={Link} button={true}>

src/settings/pages/settings.tsx

@@ -36,8 +36,8 @@ const SettingsPage: React.FunctionComponent<Props> = (props) => {
         return val == null ? def : val;
     }
 
-    const updateField = (name: SettingsName) => (event) => {
-        const val = event.target.value || (event.target.checked != null ? event.target.checked : null);
+    const updateField = (name: SettingsName, field: "value" | "checked" = "value") => (event) => {
+        const val = event.target[field];
 
         setSettings((old) => {
             return { ...old, [name]: val };
@@ -96,7 +96,7 @@ const SettingsPage: React.FunctionComponent<Props> = (props) => {
                             control={
                                 <Switch
                                     checked={getFieldValue("LogEnabled") === true}
-                                    onChange={updateField("LogEnabled")}
+                                    onChange={updateField("LogEnabled", "checked")}
                                 />
                             }
                             label={translate("settings.enabled.label")}
@@ -107,6 +107,7 @@ const SettingsPage: React.FunctionComponent<Props> = (props) => {
                             label={translate("settings.category.label")}
                             placeholder={translate("settings.category.placeholder")}
 
+                            required={getFieldValue("LogEnabled") === true}
                             value={getFieldValue("LogCategory", "")}
                             onChange={updateField("LogCategory")}
                         />

src/settings/pages/temperatures.tsx

@@ -84,7 +84,7 @@ const TemperaturesPage: React.FunctionComponent<Props> = (props) => {
                                 >
                                 {
                                     [0, 1, 2, 3, 4, 5].map((m) =>
-                                        (<MenuItem value={m}>{translate(`Modes.${m}`)}</MenuItem>),
+                                        (<MenuItem key={m} value={m}>{translate(`Modes.${m}`)}</MenuItem>),
                                     )
                                 }
                                 </Select>

src/settings/state/PlanReducer.tsx

@@ -395,7 +395,8 @@ const reducerImplementation = (state: State, action: Action) => {
 
                     // we search from right to left
                     while (nd >= 0) {
-                        const last = state.plan.schedule.filter((sp) => sp.day === action.day);
+                        const last = state.plan.schedule.filter((sp) => sp.day === nd);
+
                         if (last.length > 0) {
                             // already sorted
                             return last[last.length - 1];