feat: remove numberLocale setting and use system defaults instead

main/main.ts

@@ -44,6 +44,14 @@ export default function main() {
     'AppleColorPreferencesChangedNotification',
     () => windowManager.broadcast('UPDATE_COLOR_PREFERENCES'),
   );
+  let localeCC = app.getLocaleCountryCode();
+  setInterval(() => {
+    const newCC = app.getLocaleCountryCode();
+    if (newCC !== localeCC) {
+      localeCC = newCC;
+      windowManager.broadcast('UPDATE_LOCALE_COUNTRY_CODE');
+    }
+  }, 5000);
   app.on('window-all-closed', () => {
     defaultMenu.activate();
   });

src/App.tsx

@@ -9,7 +9,7 @@ import {
 } from './budget';
 import { ErrorBoundary, Startup } from './components';
 import styles from './App.module.scss';
-import { useRetryResource } from './lib';
+import { useNumberFormatter, useRetryResource } from './lib';
 import { useMoneyMoney } from './moneymoney';
 
 const Welcome = React.lazy(() => import('./views/Welcome'));
@@ -21,6 +21,7 @@ function App({ readInitialView }: { readInitialView: InitRes }) {
   const [view, setView] = useState(initialView);
   const [moneyMoney, updateSettings] = useMoneyMoney();
   const [state, dispatch] = useBudgetReducer(initialState, updateSettings);
+  const numberFormatter = useNumberFormatter(state.settings.fractionDigits);
   const openBudget = useCallback(() => {
     setView('budget');
   }, []);
@@ -48,6 +49,7 @@ function App({ readInitialView }: { readInitialView: InitRes }) {
               return (
                 <Main
                   view={view}
+                  numberFormatter={numberFormatter}
                   moneyMoney={moneyMoney}
                   state={state}
                   dispatch={dispatch}

src/budget/Types.ts

@@ -8,7 +8,14 @@ import {
 import { isLeft } from 'fp-ts/lib/Either';
 import { ThrowReporter } from 'io-ts/lib/ThrowReporter';
 
-export const VERSION = '0.0.2';
+/**
+ * ## 0.0.1 -> 0.0.2
+ * now using uuids to reference categories and accounts
+ *
+ * ## 0.0.2 -> 0.0.3
+ * removed setting.numberLocale in favor of always using system
+ */
+export const VERSION = '0.0.3';
 
 const categoryShape = t.partial({
   amount: t.number,
@@ -31,7 +38,6 @@ const incomeCategoryShape = t.type(
 );
 const settingsShape = t.type(
   {
-    numberLocale: t.string,
     fractionDigits: t.number,
     startDate: t.number,
     currency: t.string,
@@ -43,6 +49,8 @@ const settingsShape = t.type(
 );
 const optionalSettingsShape = t.partial(
   {
+    /** @deprecated */
+    numberLocale: t.string,
     collapsedCategories: t.array(t.string),
   },
   'optionalSettings',

src/budget/budgetReducer.ts

@@ -11,9 +11,6 @@ export const INITIAL_STATE = unsaved({
 
 export const ACTION_INIT = Symbol('INIT');
 export const ACTION_SET_NAME = Symbol('SET_NAME');
-export const ACTION_SETTINGS_SET_NUMBER_LOCALE = Symbol(
-  'ACTION_SETTINGS_SET_NUMBER_LOCALE',
-);
 export const ACTION_SETTINGS_SET_FRACTION_DIGITS = Symbol(
   'ACTION_SETTINGS_SET_FRACTION_DIGITS',
 );
@@ -70,10 +67,6 @@ type SetNameAction = {
   type: typeof ACTION_SET_NAME;
   payload: string;
 };
-type SetSettingsNumberLocale = {
-  type: typeof ACTION_SETTINGS_SET_NUMBER_LOCALE;
-  payload: string;
-};
 type SetSettingsFractionDigits = {
   type: typeof ACTION_SETTINGS_SET_FRACTION_DIGITS;
   payload: number;
@@ -131,7 +124,6 @@ export type Action =
   | SetCategoryValueAction
   | SetCategoryRolloverAction
   | SetNameAction
-  | SetSettingsNumberLocale
   | SetSettingsFractionDigits
   | SetSettingsSelectedAccounts
   | SetSettingsStartDate
@@ -233,14 +225,6 @@ function budgetReducer(state: BudgetState, action: Action): BudgetState {
         ...state,
         name: action.payload,
       };
-    case ACTION_SETTINGS_SET_NUMBER_LOCALE:
-      return {
-        ...state,
-        settings: {
-          ...state.settings,
-          numberLocale: action.payload,
-        },
-      };
     case ACTION_SETTINGS_SET_FRACTION_DIGITS:
       return {
         ...state,

src/budget/useBudgetData.ts

@@ -1,5 +1,4 @@
 import { useMemo } from 'react';
-import { createNumberFormatter } from '../lib';
 import type { Transaction, Category, MoneyMoneyRes } from '../moneymoney';
 import { BudgetState } from './Types';
 import useBudgets from './useBudgets';
@@ -20,12 +19,8 @@ export default function useBudgetData(
   state: BudgetState,
   { readCategories, readTransactions }: MoneyMoneyRes,
 ) {
-  const { fractionDigits, numberLocale, incomeCategories } = state.settings;
+  const { incomeCategories } = state.settings;
 
-  const numberFormatter = useMemo(
-    () => createNumberFormatter(fractionDigits, numberLocale),
-    [fractionDigits, numberLocale],
-  );
   const transactions = readTransactions();
   const [categories, defaultCategories] = readCategories();
   const usableCategories = useMemo(() => {
@@ -49,6 +44,5 @@ export default function useBudgetData(
     months,
     categories: usableCategories,
     extendFuture,
-    numberFormatter,
   };
 }

src/lib/createNumberFormatter.ts

@@ -1,3 +1,6 @@
+import { remote, ipcRenderer } from 'electron';
+import { useEffect, useMemo, useState } from 'react';
+
 type FormatOptions = {
   thousandDelimiter?: boolean;
   withFractions?: boolean;
@@ -54,3 +57,23 @@ export default function createNumberFormatter(
 }
 
 export type NumberFormatter = ReturnType<typeof createNumberFormatter>;
+
+export function useNumberFormatter(fractionDigits: number) {
+  const [localeCC, setLocaleCC] = useState(() =>
+    remote.app.getLocaleCountryCode(),
+  );
+  useEffect(() => {
+    const handler = () => {
+      setLocaleCC(remote.app.getLocaleCountryCode());
+    };
+    ipcRenderer.addListener('UPDATE_LOCALE_COUNTRY_CODE', handler);
+    return () => {
+      ipcRenderer.removeListener('UPDATE_LOCALE_COUNTRY_CODE', handler);
+    };
+  }, []);
+
+  return useMemo(() => createNumberFormatter(fractionDigits, localeCC), [
+    fractionDigits,
+    localeCC,
+  ]);
+}

src/lib/index.ts

@@ -5,7 +5,10 @@ export type Resource<T> = ResourceT<T>;
 
 export { default as formatDateKey } from './formatDateKey';
 export { default as roundWithFractions } from './roundWithFractions';
-export { default as createNumberFormatter } from './createNumberFormatter';
+export {
+  default as createNumberFormatter,
+  useNumberFormatter,
+} from './createNumberFormatter';
 export { default as useInputProps } from './useInputProps';
 export { default as useAmountInputProps } from './useAmountInputProps';
 export { default as getSharedSettings } from './getSharedSettings';

src/lib/initialSettings.ts

@@ -1,14 +1,15 @@
-import { remote } from 'electron';
 import startOfMonth from 'date-fns/startOfMonth';
 import subMonths from 'date-fns/subMonths';
 import getToday from './getToday';
+import { BudgetState } from '../budget';
 
-export default {
+const settings: BudgetState['settings'] = {
   accounts: [],
   currency: 'EUR',
   incomeCategories: [],
   fractionDigits: 2,
   startDate: startOfMonth(subMonths(getToday(), 1)).getTime(),
   startBalance: 0,
-  numberLocale: remote.app.getLocale(),
 };
+
+export default settings;

src/views/Budget/Budget.tsx

@@ -14,6 +14,7 @@ import {
   VisibleMothContextProvider,
   getToday,
   MonthsContextProvider,
+  NumberFormatter,
 } from '../../lib';
 import Month from '../Month';
 import BudgetHeader from './Header';
@@ -25,19 +26,22 @@ type Props = {
   state: BudgetState;
   dispatch: Dispatch<Action>;
   moneyMoney: MoneyMoneyRes;
+  numberFormatter: NumberFormatter;
 };
 
-export default function Budget({ state, dispatch, moneyMoney }: Props) {
+export default function Budget({
+  state,
+  dispatch,
+  moneyMoney,
+  numberFormatter,
+}: Props) {
   const sidebarRef = useRef<HTMLDivElement | null>(null);
   const sliderRef = useRef<HTMLDivElement | null>(null);
   const onSliderScrollRef = useRef<((target: HTMLDivElement) => void) | null>(
     null,
   );
   const [scrollTo, setScrollTo] = useState<ScrollTo | null>(null);
-  const { months, numberFormatter, extendFuture, categories } = useBudgetData(
-    state,
-    moneyMoney,
-  );
+  const { months, extendFuture, categories } = useBudgetData(state, moneyMoney);
   const handleHeaderMonthClick = useCallback(
     (key: string) => {
       if (!scrollTo) {

src/views/Main/Main.tsx

@@ -1,6 +1,6 @@
 import React, { Dispatch, useCallback } from 'react';
 import { Action, BudgetState } from '../../budget';
-import { useMenu, useSave } from '../../lib';
+import { NumberFormatter, useMenu, useSave } from '../../lib';
 import { MoneyMoneyRes } from '../../moneymoney';
 
 const Settings = React.lazy(() => import('../Settings'));
@@ -10,12 +10,14 @@ type MainViewProps = {
   view: 'budget' | 'settings';
   state: BudgetState;
   moneyMoney: MoneyMoneyRes;
+  numberFormatter: NumberFormatter;
   dispatch: Dispatch<Action>;
   setView: (view: 'budget' | 'settings') => void;
 };
 export default function MainView({
   moneyMoney,
   state,
+  numberFormatter,
   dispatch,
   view,
   setView,
@@ -31,7 +33,12 @@ export default function MainView({
   switch (view) {
     case 'budget':
       return (
-        <Budget moneyMoney={moneyMoney} state={state} dispatch={dispatch} />
+        <Budget
+          moneyMoney={moneyMoney}
+          state={state}
+          dispatch={dispatch}
+          numberFormatter={numberFormatter}
+        />
       );
     case 'settings':
       return (
@@ -40,6 +47,7 @@ export default function MainView({
           state={state}
           dispatch={dispatch}
           onClose={openBudget}
+          numberFormatter={numberFormatter}
         />
       );
   }

src/views/NewBudget/NewBudget.tsx

@@ -5,6 +5,7 @@ import General from '../Settings/General';
 import Categories from '../Settings/Categories';
 import useMenu from '../../lib/useMenu';
 import { MoneyMoneyRes } from '../../moneymoney';
+import { useNumberFormatter } from '../../lib';
 
 type Props = {
   state: BudgetState;
@@ -26,6 +27,8 @@ export default function NewBudget({
     throw new Error('Unexpected non-initialized state');
   }
 
+  const numberFormatter = useNumberFormatter(state.settings.fractionDigits);
+
   return (
     <Content
       padding
@@ -51,7 +54,12 @@ export default function NewBudget({
       }
     >
       {page === 'general' && (
-        <General moneyMoney={moneyMoney} state={state} dispatch={dispatch} />
+        <General
+          moneyMoney={moneyMoney}
+          state={state}
+          dispatch={dispatch}
+          numberFormatter={numberFormatter}
+        />
       )}
       {page === 'categories' && (
         <Categories moneyMoney={moneyMoney} state={state} dispatch={dispatch} />

src/views/Settings/General/General.tsx

@@ -1,23 +1,18 @@
-import React, { useMemo, Suspense } from 'react';
-import { createNumberFormatter } from '../../../lib';
+import React, { Suspense } from 'react';
 import Setting from '../Setting';
 import NameSetting from './Name';
 import AccountSetting from './Account';
-import NumberLocaleSetting from './NumberLocale';
 import FractionDigitsSetting from './FractionDigits';
 import StartDateSetting from './StartDate';
 import StartBalanceSetting from './StartBalance';
 import CurrencySetting from './Currency';
 import { Props } from './Types';
 import { Loading } from '../../../components';
+import { NumberFormatter } from '../../../lib/createNumberFormatter';
 
-export default function Settings(props: Props) {
-  const { numberLocale, fractionDigits } = props.state.settings;
-  const numberFormatter = useMemo(
-    () => createNumberFormatter(fractionDigits, numberLocale),
-    [fractionDigits, numberLocale],
-  );
-
+export default function Settings(
+  props: Props & { numberFormatter: NumberFormatter },
+) {
   return (
     <>
       <NameSetting {...props} />
@@ -29,14 +24,10 @@ export default function Settings(props: Props) {
         </Suspense>
       </Setting>
       <hr />
-      <Setting label="Number format Example">
-        {numberFormatter.format(12345.6789)}
-      </Setting>
-      <NumberLocaleSetting {...props} />
       <FractionDigitsSetting {...props} />
       <hr />
       <StartDateSetting {...props} />
-      <StartBalanceSetting {...props} numberFormatter={numberFormatter} />
+      <StartBalanceSetting {...props} />
     </>
   );
 }