diff --git a/packages/desktop-client/src/components/accounts/Balance.js b/packages/desktop-client/src/components/accounts/Balance.js
index 23f99530b8abb35d87f643974a3b64eddc5cd495..abc52b1a862e726dca388820f6f3d87f854a069b 100644
--- a/packages/desktop-client/src/components/accounts/Balance.js
+++ b/packages/desktop-client/src/components/accounts/Balance.js
@@ -12,11 +12,12 @@ import Text from '../common/Text';
import View from '../common/View';
import PrivacyFilter from '../PrivacyFilter';
import CellValue from '../spreadsheet/CellValue';
-import format from '../spreadsheet/format';
+import useFormat from '../spreadsheet/useFormat';
import useSheetValue from '../spreadsheet/useSheetValue';
import { isPreviewId } from '../transactions/TransactionsTable';
function DetailedBalance({ name, balance, isExactBalance = true }) {
+ const format = useFormat();
return (
<Text
style={{
diff --git a/packages/desktop-client/src/components/accounts/Reconcile.js b/packages/desktop-client/src/components/accounts/Reconcile.js
index 1a851601983cec4b4434d3f59f5af3bb0ea6128c..92615a9630ca3894d13656dbf1941433345f8d78 100644
--- a/packages/desktop-client/src/components/accounts/Reconcile.js
+++ b/packages/desktop-client/src/components/accounts/Reconcile.js
@@ -10,7 +10,7 @@ import InitialFocus from '../common/InitialFocus';
import Input from '../common/Input';
import Text from '../common/Text';
import View from '../common/View';
-import format from '../spreadsheet/format';
+import useFormat from '../spreadsheet/useFormat';
import useSheetValue from '../spreadsheet/useSheetValue';
import { Tooltip } from '../tooltips';
@@ -25,6 +25,7 @@ export function ReconcilingMessage({
value: 0,
query: balanceQuery.query.filter({ cleared: true }),
});
+ let format = useFormat();
let targetDiff = targetBalance - cleared;
return (
@@ -96,6 +97,7 @@ export function ReconcilingMessage({
export function ReconcileTooltip({ account, onReconcile, onClose }) {
let balance = useSheetValue(queries.accountBalance(account));
+ let format = useFormat();
function onSubmit(e) {
e.preventDefault();
diff --git a/packages/desktop-client/src/components/budget/MobileBudgetTable.js b/packages/desktop-client/src/components/budget/MobileBudgetTable.js
index 39c065ba58d37b1f84c96a9341c969593e4bcd2d..f1641a970206cff831e72605da480f400976f67a 100644
--- a/packages/desktop-client/src/components/budget/MobileBudgetTable.js
+++ b/packages/desktop-client/src/components/budget/MobileBudgetTable.js
@@ -1,4 +1,4 @@
-import React, { Component, memo, PureComponent } from 'react';
+import React, { Component, memo, PureComponent, useState } from 'react';
// import {
// RectButton,
// PanGestureHandler,
@@ -24,8 +24,8 @@ import Text from '../common/Text';
import View from '../common/View';
import { useServerURL } from '../ServerContext';
import CellValue from '../spreadsheet/CellValue';
-import format from '../spreadsheet/format';
import NamespaceContext from '../spreadsheet/NamespaceContext';
+import useFormat from '../spreadsheet/useFormat';
import useSheetValue from '../spreadsheet/useSheetValue';
import { SyncButton } from '../Titlebar';
import { AmountInput } from '../util/AmountInput';
@@ -39,6 +39,7 @@ import { ListItem, ROW_HEIGHT } from './MobileTable';
function ToBudget({ toBudget, onClick }) {
let amount = useSheetValue(toBudget);
+ let format = useFormat();
return (
<Button
type="bare"
@@ -67,6 +68,7 @@ function ToBudget({ toBudget, onClick }) {
function Saved({ projected }) {
let budgetedSaved = useSheetValue(reportBudget.totalBudgetedSaved) || 0;
let totalSaved = useSheetValue(reportBudget.totalSaved) || 0;
+ let format = useFormat();
let saved = projected ? budgetedSaved : totalSaved;
let isNegative = saved < 0;
@@ -109,6 +111,7 @@ const BudgetCell = memo(function BudgetCell(props) {
} = props;
let sheetValue = useSheetValue(binding);
+ let format = useFormat();
return (
<View style={style}>
@@ -572,7 +575,7 @@ class BudgetGroup extends PureComponent {
group,
// editingId,
editMode,
- gestures,
+ // gestures,
month,
onEditCategory,
onReorderCategory,
@@ -635,7 +638,7 @@ class BudgetGroup extends PureComponent {
category={category}
editing={undefined} //editing}
editMode={editMode}
- gestures={gestures}
+ // gestures={gestures}
month={month}
onEdit={onEditCategory}
onReorder={onReorderCategory}
@@ -764,249 +767,157 @@ class BudgetGroups extends Component {
}
}
-export class BudgetTable extends Component {
- // static contextType = AmountAccessoryContext;
- state = { editingCategory: null };
-
- // constructor(props) {
- // super(props);
- // this.gestures = {
- // scroll: React.createRef(null),
- // pan: React.createRef(null),
- // rows: []
- // };
- // }
-
- // componentDidMount() {
- // if (ACTScrollViewManager) {
- // ACTScrollViewManager.activate(
- // (this.list.getNode
- // ? this.list.getNode()
- // : this.list
- // ).getScrollableNode()
- // );
- // }
-
- // const removeFocus = this.props.navigation.addListener('focus', () => {
- // if (ACTScrollViewManager) {
- // ACTScrollViewManager.activate(
- // (this.list.getNode
- // ? this.list.getNode()
- // : this.list
- // ).getScrollableNode()
- // );
- // }
- // });
-
- // const keyboardWillHide = e => {
- // if (ACTScrollViewManager) {
- // ACTScrollViewManager.setFocused(-1);
- // }
- // this.onEditCategory(null);
- // };
-
- // let keyListener = Keyboard.addListener(
- // Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide',
- // keyboardWillHide
- // );
-
- // let emitter = this.context;
- // emitter.on('done', this.onKeyboardDone);
- // emitter.on('moveUp', this.onMoveUp);
- // emitter.on('moveDown', this.onMoveDown);
+export function BudgetTable(props) {
+ const [editingCategory, setEditingCategory] = useState(null);
- // this.cleanup = () => {
- // // removeFocus();
- // // keyListener.remove();
-
- // emitter.off('done', this.onKeyboardDone);
- // emitter.off('moveUp', this.onMoveUp);
- // emitter.off('moveDown', this.onMoveDown);
- // };
- // }
-
- // componentWillUnmount() {
- // this.cleanup();
- // }
-
- onEditCategory = id => {
- this.setState({ editingCategory: id });
- };
-
- // onKeyboardDone = () => {
- // Keyboard.dismiss();
-
- // onMoveUp = () => {
- // const { categories } = this.props;
- // const { editingCategory } = this.state;
- // const expenseCategories = categories.filter(cat => !cat.is_income);
-
- // const idx = expenseCategories.findIndex(cat => editingCategory === cat.id);
- // if (idx - 1 >= 0) {
- // this.onEditCategory(expenseCategories[idx - 1].id);
- // }
- // };
+ function onEditCategory(id) {
+ setEditingCategory(id);
+ }
- // onMoveDown = () => {
- // const { categories } = this.props;
- // const { editingCategory } = this.state;
- // const expenseCategories = categories.filter(cat => !cat.is_income);
+ const {
+ type,
+ categoryGroups,
+ month,
+ monthBounds,
+ editMode,
+ // refreshControl,
+ onPrevMonth,
+ onNextMonth,
+ onAddCategory,
+ onEditMode,
+ onReorderCategory,
+ onReorderGroup,
+ onShowBudgetDetails,
+ onOpenActionSheet,
+ onBudgetAction,
+ } = props;
- // const idx = expenseCategories.findIndex(cat => editingCategory === cat.id);
- // if (idx + 1 < expenseCategories.length) {
- // this.onEditCategory(expenseCategories[idx + 1].id);
- // }
- // };
+ // let editMode = false; // neuter editMode -- sorry, not rewriting drag-n-drop right now
+ let currentMonth = monthUtils.currentMonth();
+ let format = useFormat();
- render() {
- const {
- type,
- categoryGroups,
- month,
- monthBounds,
- editMode,
- // refreshControl,
- onPrevMonth,
- onNextMonth,
- onAddCategory,
- onReorderCategory,
- onReorderGroup,
- onShowBudgetDetails,
- onOpenActionSheet,
- onBudgetAction,
- } = this.props;
- // let editMode = false; // neuter editMode -- sorry, not rewriting drag-n-drop right now
- let { editingCategory } = this.state;
- let currentMonth = monthUtils.currentMonth();
-
- return (
- <NamespaceContext.Provider value={monthUtils.sheetForMonth(month, type)}>
+ return (
+ <NamespaceContext.Provider value={monthUtils.sheetForMonth(month, type)}>
+ <View style={{ flex: 1, overflowY: 'hidden' }} data-testid="budget-table">
+ <BudgetHeader
+ currentMonth={month}
+ monthBounds={monthBounds}
+ editMode={editMode}
+ onDone={() => onEditMode(false)}
+ onOpenActionSheet={onOpenActionSheet}
+ onPrevMonth={onPrevMonth}
+ onNextMonth={onNextMonth}
+ />
<View
- style={{ flex: 1, overflowY: 'hidden' }}
- data-testid="budget-table"
+ style={{
+ flexDirection: 'row',
+ flex: '0 0 auto',
+ padding: 10,
+ paddingRight: 14,
+ backgroundColor: 'white',
+ borderBottomWidth: 1,
+ borderColor: colors.n9,
+ }}
>
- <BudgetHeader
- currentMonth={month}
- monthBounds={monthBounds}
- editMode={editMode}
- onDone={() => this.props.onEditMode(false)}
- onOpenActionSheet={onOpenActionSheet}
- onPrevMonth={onPrevMonth}
- onNextMonth={onNextMonth}
- />
+ {type === 'report' ? (
+ <Saved projected={month >= currentMonth} />
+ ) : (
+ <ToBudget
+ toBudget={rolloverBudget.toBudget}
+ onClick={onShowBudgetDetails}
+ />
+ )}
+ <View style={{ flex: 1 }} />
+
+ <View style={{ width: 90, justifyContent: 'center' }}>
+ <Label title="BUDGETED" style={{ color: colors.n1 }} />
+ <CellValue
+ binding={reportBudget.totalBudgetedExpense}
+ type="financial"
+ style={[
+ styles.smallText,
+ { color: colors.n1, textAlign: 'right', fontWeight: '500' },
+ ]}
+ formatter={value => {
+ return format(-parseFloat(value || '0'), 'financial');
+ }}
+ />
+ </View>
<View
style={{
- flexDirection: 'row',
- flex: '0 0 auto',
- padding: 10,
- paddingRight: 14,
- backgroundColor: 'white',
- borderBottomWidth: 1,
- borderColor: colors.n9,
+ width: 90,
+ justifyContent: 'center',
}}
>
- {type === 'report' ? (
- <Saved projected={month >= currentMonth} />
- ) : (
- <ToBudget
- toBudget={rolloverBudget.toBudget}
- onClick={onShowBudgetDetails}
- />
- )}
- <View style={{ flex: 1 }} />
-
- <View style={{ width: 90, justifyContent: 'center' }}>
- <Label title="BUDGETED" style={{ color: colors.n1 }} />
- <CellValue
- binding={reportBudget.totalBudgetedExpense}
- type="financial"
- style={[
- styles.smallText,
- { color: colors.n1, textAlign: 'right', fontWeight: '500' },
- ]}
- formatter={value => {
- return format(-parseFloat(value || '0'), 'financial');
- }}
- />
- </View>
- <View
- style={{
- width: 90,
- justifyContent: 'center',
- }}
- >
- <Label title="BALANCE" style={{ color: colors.n1 }} />
- <CellValue
- binding={rolloverBudget.totalBalance}
- type="financial"
- style={[
- styles.smallText,
- { color: colors.n1, textAlign: 'right', fontWeight: '500' },
- ]}
- />
- </View>
+ <Label title="BALANCE" style={{ color: colors.n1 }} />
+ <CellValue
+ binding={rolloverBudget.totalBalance}
+ type="financial"
+ style={[
+ styles.smallText,
+ { color: colors.n1, textAlign: 'right', fontWeight: '500' },
+ ]}
+ />
</View>
+ </View>
- {/* <AndroidKeyboardAvoidingView includeStatusBar={true}> */}
- <View style={{ overflowY: 'auto' }}>
- {!editMode ? (
- // <ScrollView
- // ref={el => (this.list = el)}
- // keyboardShouldPersistTaps="always"
- // refreshControl={refreshControl}
- // style={{ backgroundColor: colors.n10 }}
- // automaticallyAdjustContentInsets={false}
- // >
+ <View style={{ overflowY: 'auto' }}>
+ {!editMode ? (
+ // <ScrollView
+ // ref={el => (this.list = el)}
+ // keyboardShouldPersistTaps="always"
+ // refreshControl={refreshControl}
+ // style={{ backgroundColor: colors.n10 }}
+ // automaticallyAdjustContentInsets={false}
+ // >
+ <View>
+ <BudgetGroups
+ type={type}
+ categoryGroups={categoryGroups}
+ editingId={editingCategory}
+ editMode={editMode}
+ // gestures={gestures}
+ month={month}
+ onEditCategory={onEditCategory}
+ onAddCategory={onAddCategory}
+ onReorderCategory={onReorderCategory}
+ onReorderGroup={onReorderGroup}
+ onBudgetAction={onBudgetAction}
+ />
+ </View>
+ ) : (
+ // </ScrollView>
+ // <DragDrop>
+ // {({
+ // dragging,
+ // onGestureEvent,
+ // onHandlerStateChange,
+ // scrollRef,
+ // onScroll
+ // }) => (
+ <>
<View>
<BudgetGroups
- type={type}
categoryGroups={categoryGroups}
editingId={editingCategory}
editMode={editMode}
- gestures={this.gestures}
- month={month}
- onEditCategory={this.onEditCategory}
+ // gestures={gestures}
+ onEditCategory={() => {}} //onEditCategory}
onAddCategory={onAddCategory}
onReorderCategory={onReorderCategory}
onReorderGroup={onReorderGroup}
- onBudgetAction={onBudgetAction}
/>
</View>
- ) : (
- // </ScrollView>
- // <DragDrop>
- // {({
- // dragging,
- // onGestureEvent,
- // onHandlerStateChange,
- // scrollRef,
- // onScroll
- // }) => (
- <>
- <View>
- <BudgetGroups
- categoryGroups={categoryGroups}
- editingId={editingCategory}
- editMode={editMode}
- gestures={this.gestures}
- onEditCategory={() => {}} //this.onEditCategory}
- onAddCategory={onAddCategory}
- onReorderCategory={onReorderCategory}
- onReorderGroup={onReorderGroup}
- />
- </View>
-
- {/* <DragDropHighlight /> */}
- </>
- // )}
- // </DragDrop>
- )}
- </View>
- {/* </AndroidKeyboardAvoidingView> */}
+
+ {/* <DragDropHighlight /> */}
+ </>
+ // )}
+ // </DragDrop>
+ )}
</View>
- </NamespaceContext.Provider>
- );
- }
+ </View>
+ </NamespaceContext.Provider>
+ );
}
function BudgetHeader({
diff --git a/packages/desktop-client/src/components/budget/report/BudgetSummary.tsx b/packages/desktop-client/src/components/budget/report/BudgetSummary.tsx
index 6bf2f341eb4a37b517b5e3779ed5ddef816ee62f..3181b0101101e615c1722d97cf4ce05e6e589dd0 100644
--- a/packages/desktop-client/src/components/budget/report/BudgetSummary.tsx
+++ b/packages/desktop-client/src/components/budget/report/BudgetSummary.tsx
@@ -26,8 +26,8 @@ import View from '../../common/View';
import NotesButton from '../../NotesButton';
import PrivacyFilter from '../../PrivacyFilter';
import CellValue from '../../spreadsheet/CellValue';
-import format from '../../spreadsheet/format';
import NamespaceContext from '../../spreadsheet/NamespaceContext';
+import useFormat from '../../spreadsheet/useFormat';
import useSheetValue from '../../spreadsheet/useSheetValue';
import { Tooltip } from '../../tooltips';
import { MONTH_BOX_SHADOW } from '../constants';
@@ -226,6 +226,7 @@ type SavedProps = {
function Saved({ projected, style }: SavedProps) {
let budgetedSaved = useSheetValue(reportBudget.totalBudgetedSaved) || 0;
let totalSaved = useSheetValue(reportBudget.totalSaved) || 0;
+ let format = useFormat();
let saved = projected ? budgetedSaved : totalSaved;
let isNegative = saved < 0;
diff --git a/packages/desktop-client/src/components/budget/report/components.tsx b/packages/desktop-client/src/components/budget/report/components.tsx
index 3c66b7802c6990f3ff8b50b829308b3f693dfc83..39e3161a8d99425a081e8834d0eea3d5320b360d 100644
--- a/packages/desktop-client/src/components/budget/report/components.tsx
+++ b/packages/desktop-client/src/components/budget/report/components.tsx
@@ -12,7 +12,7 @@ import Menu from '../../common/Menu';
import Text from '../../common/Text';
import View from '../../common/View';
import CellValue from '../../spreadsheet/CellValue';
-import format from '../../spreadsheet/format';
+import useFormat from '../../spreadsheet/useFormat';
import useSheetValue from '../../spreadsheet/useSheetValue';
import { Field, SheetCell } from '../../table';
import { Tooltip, useTooltip } from '../../tooltips';
@@ -25,6 +25,7 @@ export { BudgetSummary } from './BudgetSummary';
let headerLabelStyle = { flex: 1, padding: '0 5px', textAlign: 'right' };
export const BudgetTotalsMonth = memo(function BudgetTotalsMonth() {
+ const format = useFormat();
return (
<View
style={{
diff --git a/packages/desktop-client/src/components/budget/rollover/BudgetSummary.tsx b/packages/desktop-client/src/components/budget/rollover/BudgetSummary.tsx
index c67b4fa8ebc94891bad66f8305841d41fc8a5ed4..e2a7e796d72fa0229c70b11f60b54243b9c6e28c 100644
--- a/packages/desktop-client/src/components/budget/rollover/BudgetSummary.tsx
+++ b/packages/desktop-client/src/components/budget/rollover/BudgetSummary.tsx
@@ -18,8 +18,8 @@ import View from '../../common/View';
import NotesButton from '../../NotesButton';
import PrivacyFilter from '../../PrivacyFilter';
import CellValue from '../../spreadsheet/CellValue';
-import format from '../../spreadsheet/format';
import NamespaceContext from '../../spreadsheet/NamespaceContext';
+import useFormat from '../../spreadsheet/useFormat';
import useSheetName from '../../spreadsheet/useSheetName';
import useSheetValue from '../../spreadsheet/useSheetValue';
import { Tooltip } from '../../tooltips';
@@ -34,6 +34,7 @@ type TotalsListProps = {
collapsed?: boolean;
};
function TotalsList({ prevMonthName, collapsed }: TotalsListProps) {
+ const format = useFormat();
return (
<View
style={[
@@ -160,6 +161,7 @@ function ToBudget({
name: rolloverBudget.toBudget,
value: 0,
});
+ let format = useFormat();
let availableValue = parseInt(sheetValue);
let num = isNaN(availableValue) ? 0 : availableValue;
let isNegative = num < 0;
diff --git a/packages/desktop-client/src/components/budget/rollover/rollover-components.tsx b/packages/desktop-client/src/components/budget/rollover/rollover-components.tsx
index fb824c13cb6c819cb63c7fc6fa7db92f81c750dc..5818259475870bc03ac8b7966cfd642a0a7f1d62 100644
--- a/packages/desktop-client/src/components/budget/rollover/rollover-components.tsx
+++ b/packages/desktop-client/src/components/budget/rollover/rollover-components.tsx
@@ -14,7 +14,7 @@ import Menu from '../../common/Menu';
import Text from '../../common/Text';
import View from '../../common/View';
import CellValue from '../../spreadsheet/CellValue';
-import format from '../../spreadsheet/format';
+import useFormat from '../../spreadsheet/useFormat';
import useSheetValue from '../../spreadsheet/useSheetValue';
import { Row, Field, SheetCell } from '../../table';
import { Tooltip, useTooltip } from '../../tooltips';
@@ -190,6 +190,7 @@ function BalanceTooltip({
let headerLabelStyle = { flex: 1, padding: '0 5px', textAlign: 'right' };
export const BudgetTotalsMonth = memo(function BudgetTotalsMonth() {
+ const format = useFormat();
return (
<View
style={{
diff --git a/packages/desktop-client/src/components/modals/BudgetSummary.js b/packages/desktop-client/src/components/modals/BudgetSummary.js
index 80d7c4fb459c5384fe4155f295fab17a11e81f4f..8491e3efdff90d19a2a53445d3e391a995492a38 100644
--- a/packages/desktop-client/src/components/modals/BudgetSummary.js
+++ b/packages/desktop-client/src/components/modals/BudgetSummary.js
@@ -9,12 +9,13 @@ import Modal from '../common/Modal';
import Text from '../common/Text';
import View from '../common/View';
import CellValue from '../spreadsheet/CellValue';
-import format from '../spreadsheet/format';
import NamespaceContext from '../spreadsheet/NamespaceContext';
+import useFormat from '../spreadsheet/useFormat';
import useSheetValue from '../spreadsheet/useSheetValue';
function ToBudget({ toBudget }) {
let budgetAmount = useSheetValue(toBudget);
+ let format = useFormat();
return (
<View style={{ alignItems: 'center', marginBottom: 15 }}>
<Text style={styles.text}>
diff --git a/packages/desktop-client/src/components/spreadsheet/CellValue.tsx b/packages/desktop-client/src/components/spreadsheet/CellValue.tsx
index 13a921f0a299d077847ad32a080a0f7a63b5e1a7..5a667e2d11e2451c683455ef04e8e857a500e77a 100644
--- a/packages/desktop-client/src/components/spreadsheet/CellValue.tsx
+++ b/packages/desktop-client/src/components/spreadsheet/CellValue.tsx
@@ -9,7 +9,7 @@ import {
type ConditionalPrivacyFilterProps,
} from '../PrivacyFilter';
-import { useFormat } from './format';
+import useFormat from './useFormat';
import useSheetName from './useSheetName';
import useSheetValue from './useSheetValue';
diff --git a/packages/desktop-client/src/components/spreadsheet/format.ts b/packages/desktop-client/src/components/spreadsheet/useFormat.ts
similarity index 91%
rename from packages/desktop-client/src/components/spreadsheet/format.ts
rename to packages/desktop-client/src/components/spreadsheet/useFormat.ts
index 0ec8fa4dedc3cc159d0f92413c43d81cd9278f79..b99667e5d67f310016954e2955b3d0471c9f5210 100644
--- a/packages/desktop-client/src/components/spreadsheet/format.ts
+++ b/packages/desktop-client/src/components/spreadsheet/useFormat.ts
@@ -4,10 +4,7 @@ import { useSelector } from 'react-redux';
import { selectNumberFormat } from 'loot-core/src/client/selectors';
import { integerToCurrency } from 'loot-core/src/shared/util';
-/**
- * @deprecated Please do not use this directly. Use `useFormat` hook
- */
-export default function format(
+function format(
value: unknown,
type = 'string',
formatter?: Intl.NumberFormat,
@@ -48,7 +45,7 @@ export default function format(
}
}
-export function useFormat() {
+export default function useFormat() {
const numberFormat = useSelector(selectNumberFormat);
return useCallback(
diff --git a/packages/desktop-client/src/components/table.tsx b/packages/desktop-client/src/components/table.tsx
index cfc1b64b23d9043f3bd8e16dd8e146612c51617e..f9d84a59da28168e20cb3de7380d5906a505a7cf 100644
--- a/packages/desktop-client/src/components/table.tsx
+++ b/packages/desktop-client/src/components/table.tsx
@@ -41,7 +41,7 @@ import {
type ConditionalPrivacyFilterProps,
} from './PrivacyFilter';
import { type Binding } from './spreadsheet';
-import format from './spreadsheet/format';
+import useFormat from './spreadsheet/useFormat';
import useSheetValue from './spreadsheet/useSheetValue';
import { Tooltip, IntersectionBoundary } from './tooltips';
@@ -702,6 +702,7 @@ export function SheetCell({
inputProps.onBlur(e);
}
});
+ let format = useFormat();
return (
<Cell
diff --git a/upcoming-release-notes/1630.md b/upcoming-release-notes/1630.md
new file mode 100644
index 0000000000000000000000000000000000000000..a9db734111de4eab31949da4079d0f0e0162bdf0
--- /dev/null
+++ b/upcoming-release-notes/1630.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [joel-jeremy]
+---
+
+Replace usage of format with useFormat hook