Fix a bunch of warnings/errors (#479)

* Remove invalid ref={} prop

* Fix <rect> height being less than 0

* Improve history.push override

* Filters: add missing key prop

* DateSelect: don’t pass `null` to an input

* Filters: add missing key prop

* EditRule: fix key props

* ScheduleDetails: Fix `for` prop

* usePayees: default `payees` to empty array instead of null (fixes crash)

* safeNumber: better error if `value` is not a number

* ScheduleDescription: fix description for “amount is between”

* ScheduleDetails: add missing `key` prop

* BudgetTitlebar: use ButtonWithLoading

packages/desktop-client/src/components/FinancesApp.js

@@ -207,7 +207,12 @@ class FinancesApp extends React.Component {
 
     let oldPush = this.history.push;
     this.history.push = (to, state) => {
-      return oldPush.call(this.history, to, makeLocationState(state));
+      let newState = makeLocationState(to.state || state);
+      if (typeof to === 'object') {
+        return oldPush.call(this.history, { ...to, state: newState });
+      } else {
+        return oldPush.call(this.history, to, newState);
+      }
     };
 
     // I'm not sure if this is the best approach but we need this to

packages/desktop-client/src/components/Titlebar.js

@@ -186,7 +186,7 @@ function BudgetTitlebar({ globalPrefs, saveGlobalPrefs, localPrefs }) {
       />
       {reportBudgetEnabled && (
         <View style={{ marginLeft: -5 }}>
-          <Button
+          <ButtonWithLoading
             bare
             loading={loading}
             style={{
@@ -197,7 +197,7 @@ function BudgetTitlebar({ globalPrefs, saveGlobalPrefs, localPrefs }) {
             onClick={() => setShowTooltip(true)}
           >
             {budgetType === 'report' ? 'Report budget' : 'Rollover budget'}
-          </Button>
+          </ButtonWithLoading>
           {showTooltip && (
             <Tooltip
               position="bottom-left"

packages/desktop-client/src/components/accounts/Filters.js

@@ -182,6 +182,7 @@ function ConfigureField({ field, op, value, dispatch, onApply }) {
           {type === 'boolean'
             ? [
                 <OpButton
+                  key="true"
                   op="true"
                   selected={value === true}
                   onClick={() => {
@@ -190,6 +191,7 @@ function ConfigureField({ field, op, value, dispatch, onApply }) {
                   }}
                 />,
                 <OpButton
+                  key="false"
                   op="false"
                   selected={value === false}
                   onClick={() => {
@@ -200,6 +202,7 @@ function ConfigureField({ field, op, value, dispatch, onApply }) {
               ]
             : ops.map(currOp => (
                 <OpButton
+                  key={currOp}
                   op={currOp}
                   selected={currOp === op}
                   onClick={() => dispatch({ type: 'set-op', op: currOp })}
@@ -445,6 +448,7 @@ export function AppliedFilters({ filters, editingFilter, onDelete }) {
     >
       {filters.map((filter, i) => (
         <FilterExpression
+          key={i}
           customName={filter.customName}
           field={filter.field}
           op={filter.op}

packages/desktop-client/src/components/modals/EditRule.js

@@ -220,6 +220,18 @@ export function ConditionEditor({
   );
 }
 
+function formatAmount(amount) {
+  if (!amount) {
+    return integerToCurrency(0);
+  } else if (typeof amount === 'number') {
+    return integerToCurrency(amount);
+  } else {
+    return `${integerToCurrency(amount.num1)} to ${integerToCurrency(
+      amount.num2
+    )}`;
+  }
+}
+
 function ScheduleDescription({ id }) {
   let dateFormat = useSelector(state => {
     return state.prefs.local.dateFormat || 'MM/dd/yyyy';
@@ -254,7 +266,7 @@ function ScheduleDescription({ id }) {
         </Text>
         <Text style={{ margin: '0 5px' }}> — </Text>
         <Text style={{ flexShrink: 0 }}>
-          Amount: {integerToCurrency(schedule._amount || 0)}
+          Amount: {formatAmount(schedule._amount)}
         </Text>
         <Text style={{ margin: '0 5px' }}> — </Text>
         <Text style={{ flexShrink: 0 }}>
@@ -504,9 +516,8 @@ export function ConditionsList({
         }
 
         return (
-          <View>
+          <View key={i}>
             <ConditionEditor
-              key={i}
               conditionFields={conditionFields}
               editorStyle={editorStyle}
               ops={ops}
@@ -775,9 +786,8 @@ export default function EditRule({
                 ) : (
                   <Stack spacing={2}>
                     {actions.map((action, i) => (
-                      <View>
+                      <View key={i}>
                         <ActionEditor
-                          key={i}
                           ops={['set', 'link-schedule']}
                           action={action}
                           editorStyle={editorStyle}

packages/desktop-client/src/components/reports/graphs/NetWorthGraph.js

@@ -41,7 +41,7 @@ function Area({ start, end, data, style, scale, range }) {
             x={startX}
             y={zero + 1}
             width={endX - startX}
-            height={range.y[0] - zero - 1}
+            height={Math.max(range.y[0] - zero - 1, 0)}
             fill="#ffffff"
           />
         </clipPath>

packages/desktop-client/src/components/schedules/EditSchedule.js

@@ -532,7 +532,9 @@ export default function ScheduleDetails() {
                 style={{ marginTop: 10, color: colors.n4 }}
               >
                 {state.upcomingDates.map(date => (
-                  <View>{monthUtils.format(date, `${dateFormat} EEEE`)}</View>
+                  <View key={date}>
+                    {monthUtils.format(date, `${dateFormat} EEEE`)}
+                  </View>
                 ))}
               </Stack>
             </View>
@@ -555,7 +557,7 @@ export default function ScheduleDetails() {
               dispatch({ type: 'set-repeats', repeats: e.target.checked });
             }}
           />
-          <label for="form_repeats" style={{ userSelect: 'none' }}>
+          <label htmlFor="form_repeats" style={{ userSelect: 'none' }}>
             Repeats
           </label>
         </View>
@@ -586,7 +588,10 @@ export default function ScheduleDetails() {
                 });
               }}
             />
-            <label for="form_posts_transaction" style={{ userSelect: 'none' }}>
+            <label
+              htmlFor="form_posts_transaction"
+              style={{ userSelect: 'none' }}
+            >
               Automatically add transaction
             </label>
           </View>

packages/loot-core/src/client/data-hooks/payees.js

@@ -4,7 +4,7 @@ import q, { liveQuery } from 'loot-core/src/client/query-helpers';
 import { getPayeesById } from 'loot-core/src/client/reducers/queries';
 
 export function usePayees() {
-  let [data, setData] = useState(null);
+  let [data, setData] = useState([]);
 
   useEffect(() => {
     let query = liveQuery(q('payees').select('*'), async payees => {

packages/loot-core/src/shared/util.js

@@ -312,7 +312,9 @@ const MIN_SAFE_NUMBER = -MAX_SAFE_NUMBER;
 
 export function safeNumber(value) {
   if (!Number.isInteger(value)) {
-    throw new Error('safeNumber: number is not an integer: ' + value);
+    throw new Error(
+      'safeNumber: number is not an integer: ' + JSON.stringify(value)
+    );
   }
   if (value > MAX_SAFE_NUMBER || value < MIN_SAFE_NUMBER) {
     throw new Error(

packages/loot-design/src/components/DateSelect.js

@@ -166,11 +166,11 @@ export default function DateSelect({
         return d.format(date, dateFormat);
       }
     }
-    return null;
+    return '';
   }, [defaultValue, dateFormat]);
 
   let picker = useRef(null);
-  let [value, setValue] = useState(parsedDefaultValue || '');
+  let [value, setValue] = useState(parsedDefaultValue);
   let [open, setOpen] = useState(embedded || isOpen || false);
   let inputRef = useRef(null);
 

packages/loot-design/src/components/sidebar.js

@@ -230,7 +230,6 @@ function Account({
         <DropHighlight pos={dropPos} />
         <View innerRef={dragRef}>
           <AnchorLink
-            ref={dragRef}
             to={to}
             style={[
               accountNameStyle,