diff --git a/.eslintrc.js b/.eslintrc.js index 1c9425aa7a9..fe5a15013b9 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -239,7 +239,7 @@ module.exports = { './packages/api/app/**/*', './packages/crdt/**/*', './packages/desktop-client/src/*', - // './packages/desktop-client/src/components/*', + './packages/desktop-client/src/components/*', './packages/desktop-client/src/components/accounts/**/*', './packages/desktop-client/src/components/autocomplete/**/*', './packages/desktop-client/src/components/budget/**/*', @@ -249,17 +249,17 @@ module.exports = { './packages/desktop-client/src/components/manager/**/*', './packages/desktop-client/src/components/mobile/**/*', './packages/desktop-client/src/components/modals/**/*', - // './packages/desktop-client/src/components/payees/**/*', - // './packages/desktop-client/src/components/reports/**/*', - // './packages/desktop-client/src/components/responsive/**/*', - // './packages/desktop-client/src/components/rules/**/*', - // './packages/desktop-client/src/components/schedules/**/*', - // './packages/desktop-client/src/components/select/**/*', - // './packages/desktop-client/src/components/settings/**/*', - // './packages/desktop-client/src/components/sidebar/**/*', - // './packages/desktop-client/src/components/spreadsheet/**/*', - // './packages/desktop-client/src/components/transactions/**/*', - // './packages/desktop-client/src/components/util/**/*', + './packages/desktop-client/src/components/payees/**/*', + './packages/desktop-client/src/components/reports/**/*', + './packages/desktop-client/src/components/responsive/**/*', + './packages/desktop-client/src/components/rules/**/*', + './packages/desktop-client/src/components/schedules/**/*', + './packages/desktop-client/src/components/select/**/*', + './packages/desktop-client/src/components/settings/**/*', + './packages/desktop-client/src/components/sidebar/**/*', + './packages/desktop-client/src/components/spreadsheet/**/*', + './packages/desktop-client/src/components/transactions/**/*', + './packages/desktop-client/src/components/util/**/*', './packages/desktop-client/src/hooks/**/*', './packages/desktop-client/src/icons/**/*', './packages/desktop-client/src/style/**/*', diff --git a/packages/desktop-client/src/components/AnimatedRefresh.tsx b/packages/desktop-client/src/components/AnimatedRefresh.tsx index 4daa0782473..c6e613c956e 100644 --- a/packages/desktop-client/src/components/AnimatedRefresh.tsx +++ b/packages/desktop-client/src/components/AnimatedRefresh.tsx @@ -7,7 +7,7 @@ import { type CSSProperties } from '../style'; import View from './common/View'; -let spin = keyframes({ +const spin = keyframes({ '0%': { transform: 'rotateZ(0deg)' }, '100%': { transform: 'rotateZ(360deg)' }, }); diff --git a/packages/desktop-client/src/components/App.tsx b/packages/desktop-client/src/components/App.tsx index bdfdd3841a6..bf5334c42d7 100644 --- a/packages/desktop-client/src/components/App.tsx +++ b/packages/desktop-client/src/components/App.tsx @@ -68,7 +68,7 @@ function App({ // don't block on this in case they are offline or something) send('get-remote-files').then(files => { if (files) { - let remoteFile = files.find(f => f.fileId === cloudFileId); + const remoteFile = files.find(f => f.fileId === cloudFileId); if (remoteFile && remoteFile.deleted) { closeBudget(); } @@ -122,14 +122,14 @@ function ErrorFallback({ error }: FallbackProps) { } function AppWrapper() { - let budgetId = useSelector( + const budgetId = useSelector( state => state.prefs.local && state.prefs.local.id, ); - let cloudFileId = useSelector( + const cloudFileId = useSelector( state => state.prefs.local && state.prefs.local.cloudFileId, ); - let loadingText = useSelector(state => state.app.loadingText); - let { loadBudget, closeBudget, loadGlobalPrefs, sync } = useActions(); + const loadingText = useSelector(state => state.app.loadingText); + const { loadBudget, closeBudget, loadGlobalPrefs, sync } = useActions(); const [hiddenScrollbars, setHiddenScrollbars] = useState( hasHiddenScrollbars(), ); diff --git a/packages/desktop-client/src/components/BackgroundImage.tsx b/packages/desktop-client/src/components/BackgroundImage.tsx index dd8ee5c38e1..7a64bddfc40 100644 --- a/packages/desktop-client/src/components/BackgroundImage.tsx +++ b/packages/desktop-client/src/components/BackgroundImage.tsx @@ -2,9 +2,9 @@ import * as React from 'react'; import { theme } from '../style'; -let linesTop = theme.pageBackgroundLineTop; // lines top -let linesMid = theme.pageBackgroundLineMid; // lines mid -let linesBottom = theme.pageBackgroundLineBottom; // lines bottom +const linesTop = theme.pageBackgroundLineTop; // lines top +const linesMid = theme.pageBackgroundLineMid; // lines mid +const linesBottom = theme.pageBackgroundLineBottom; // lines bottom export function BackgroundImage() { return ( diff --git a/packages/desktop-client/src/components/BankSyncStatus.tsx b/packages/desktop-client/src/components/BankSyncStatus.tsx index 8095d406706..96a0390b4b4 100644 --- a/packages/desktop-client/src/components/BankSyncStatus.tsx +++ b/packages/desktop-client/src/components/BankSyncStatus.tsx @@ -9,9 +9,9 @@ import Text from './common/Text'; import View from './common/View'; export default function BankSyncStatus() { - let accountsSyncing = useSelector(state => state.account.accountsSyncing); + const accountsSyncing = useSelector(state => state.account.accountsSyncing); - let name = accountsSyncing + const name = accountsSyncing ? accountsSyncing === '__all' ? 'accounts' : accountsSyncing diff --git a/packages/desktop-client/src/components/FatalError.tsx b/packages/desktop-client/src/components/FatalError.tsx index 1d8a7a70b20..25702958ad5 100644 --- a/packages/desktop-client/src/components/FatalError.tsx +++ b/packages/desktop-client/src/components/FatalError.tsx @@ -113,8 +113,8 @@ function RenderUIError() { } function SharedArrayBufferOverride() { - let [expanded, setExpanded] = useState(false); - let [understand, setUnderstand] = useState(false); + const [expanded, setExpanded] = useState(false); + const [understand, setUnderstand] = useState(false); return expanded ? ( <> @@ -152,7 +152,7 @@ function SharedArrayBufferOverride() { } function FatalError({ buttonText, error }: FatalErrorProps) { - let [showError, setShowError] = useState(false); + const [showError, setShowError] = useState(false); const showSimpleRender = 'type' in error && error.type === 'app-init-failure'; diff --git a/packages/desktop-client/src/components/FinancesApp.tsx b/packages/desktop-client/src/components/FinancesApp.tsx index 58792c219c6..3ca0b40c00e 100644 --- a/packages/desktop-client/src/components/FinancesApp.tsx +++ b/packages/desktop-client/src/components/FinancesApp.tsx @@ -71,7 +71,7 @@ function WideNotSupported({ children, redirectTo = '/budget' }) { } function RouterBehaviors({ getAccounts }) { - let navigate = useNavigate(); + const navigate = useNavigate(); useEffect(() => { // Get the accounts and check if any exist. If there are no // accounts, we want to redirect the user to the All Accounts @@ -83,8 +83,8 @@ function RouterBehaviors({ getAccounts }) { }); }, []); - let location = useLocation(); - let href = useHref(location); + const location = useLocation(); + const href = useHref(location); useEffect(() => { undo.setUndoState('url', href); }, [href]); @@ -93,7 +93,7 @@ function RouterBehaviors({ getAccounts }) { } function FinancesApp() { - let actions = useActions(); + const actions = useActions(); useEffect(() => { // The default key handler scope hotkeys.setScope('app'); @@ -251,7 +251,7 @@ function FinancesApp() { } export default function FinancesAppWithContext() { - let app = useMemo(() => , []); + const app = useMemo(() => , []); return ( diff --git a/packages/desktop-client/src/components/FixedSizeList.js b/packages/desktop-client/src/components/FixedSizeList.js index e99d0971a64..ce5cb4b4e60 100644 --- a/packages/desktop-client/src/components/FixedSizeList.js +++ b/packages/desktop-client/src/components/FixedSizeList.js @@ -11,7 +11,7 @@ const IS_SCROLLING_DEBOUNCE_INTERVAL = 150; const defaultItemKey = (index, data) => index; function ResizeObserver({ onResize, children }) { - let ref = useResizeObserver(onResize); + const ref = useResizeObserver(onResize); return children(ref); } @@ -92,8 +92,8 @@ export default class FixedSizeList extends PureComponent { getAnchoredScrollPos() { if (this.anchored && this.props.indexForKey && this._outerRef != null) { - let index = this.props.indexForKey(this.anchored.key); - let baseOffset = this.getOffsetForIndexAndAlignment(index, 'start'); + const index = this.props.indexForKey(this.anchored.key); + const baseOffset = this.getOffsetForIndexAndAlignment(index, 'start'); return baseOffset + this.anchored.offset; } return null; @@ -102,7 +102,7 @@ export default class FixedSizeList extends PureComponent { componentDidUpdate() { const { scrollOffset, scrollUpdateWasRequested } = this.state; - let anchoredPos = this.getAnchoredScrollPos(); + const anchoredPos = this.getAnchoredScrollPos(); if (anchoredPos != null) { const outerRef = this._outerRef; outerRef.scrollTop = anchoredPos; @@ -157,9 +157,9 @@ export default class FixedSizeList extends PureComponent { const items = []; if (itemCount > 0) { for (let index = startIndex; index <= stopIndex; index++) { - let key = itemKey(index); + const key = itemKey(index); let style = this._getItemStyle(index); - let lastPosition = this.lastPositions.current.get(key); + const lastPosition = this.lastPositions.current.get(key); let animating = false; positions.set(key, style.top); @@ -191,10 +191,10 @@ export default class FixedSizeList extends PureComponent { // Read this value AFTER items have been created, // So their actual sizes (if variable) are taken into consideration. - let estimatedTotalSize = this.getEstimatedTotalSize(); + const estimatedTotalSize = this.getEstimatedTotalSize(); - let OuterElement = outerElementType || outerTagName || 'div'; - let InnerElement = innerElementType || innerTagName || 'div'; + const OuterElement = outerElementType || outerTagName || 'div'; + const InnerElement = innerElementType || innerTagName || 'div'; return ( @@ -231,7 +231,7 @@ export default class FixedSizeList extends PureComponent { setRowAnimation = flag => { this.animationEnabled = flag; - let outerRef = this._outerRef; + const outerRef = this._outerRef; if (outerRef) { if (this.animationEnabled) { outerRef.classList.add('animated'); @@ -246,12 +246,12 @@ export default class FixedSizeList extends PureComponent { }; anchor() { - let itemKey = this.props.itemKey || defaultItemKey; + const itemKey = this.props.itemKey || defaultItemKey; - let outerRef = this._outerRef; - let scrollOffset = outerRef ? outerRef.scrollTop : 0; - let index = this.getStartIndexForOffset(scrollOffset); - let key = itemKey(index); + const outerRef = this._outerRef; + const scrollOffset = outerRef ? outerRef.scrollTop : 0; + const index = this.getStartIndexForOffset(scrollOffset); + const key = itemKey(index); this.anchored = { key, @@ -434,10 +434,15 @@ export default class FixedSizeList extends PureComponent { _getItemStyleCache = memoizeOne((_, __, ___) => ({})); _getRangeToRender() { - let { itemCount, overscanCount } = this.props; - let { isScrolling, scrollDirection, scrollOffset } = this.state; + const { itemCount, overscanCount } = this.props; + const { + isScrolling, + scrollDirection, + scrollOffset: originalScrollOffset, + } = this.state; - let anchoredPos = this.getAnchoredScrollPos(); + const anchoredPos = this.getAnchoredScrollPos(); + let scrollOffset = originalScrollOffset; if (anchoredPos != null) { scrollOffset = anchoredPos; } @@ -469,7 +474,7 @@ export default class FixedSizeList extends PureComponent { } _onScrollVertical = event => { - let { scrollTop } = event.currentTarget; + const { scrollTop } = event.currentTarget; this.setState(prevState => { if (prevState.scrollOffset === scrollTop) { @@ -479,7 +484,7 @@ export default class FixedSizeList extends PureComponent { return null; } - let scrollOffset = scrollTop; + const scrollOffset = scrollTop; return { isScrolling: true, diff --git a/packages/desktop-client/src/components/GlobalKeys.tsx b/packages/desktop-client/src/components/GlobalKeys.tsx index cff3d38ae2f..edcfe148aab 100644 --- a/packages/desktop-client/src/components/GlobalKeys.tsx +++ b/packages/desktop-client/src/components/GlobalKeys.tsx @@ -5,7 +5,7 @@ import * as Platform from 'loot-core/src/client/platform'; import useNavigate from '../hooks/useNavigate'; export default function GlobalKeys() { - let navigate = useNavigate(); + const navigate = useNavigate(); useEffect(() => { const handleKeys = e => { if (Platform.isBrowser) { diff --git a/packages/desktop-client/src/components/KeyHandlers.tsx b/packages/desktop-client/src/components/KeyHandlers.tsx index 1a38701b5dd..3a674e5f4b3 100644 --- a/packages/desktop-client/src/components/KeyHandlers.tsx +++ b/packages/desktop-client/src/components/KeyHandlers.tsx @@ -2,11 +2,11 @@ import React, { createContext, useEffect, useContext } from 'react'; import hotkeys, { type KeyHandler as HotKeyHandler } from 'hotkeys-js'; -let KeyScopeContext = createContext('app'); +const KeyScopeContext = createContext('app'); hotkeys.filter = event => { - let target = (event.target || event.srcElement) as HTMLElement; - let tagName = target.tagName; + const target = (event.target || event.srcElement) as HTMLElement; + const tagName = target.tagName; // This is the default behavior of hotkeys, except we only suppress // key presses if the meta key is not pressed @@ -34,7 +34,7 @@ function KeyHandler({ eventType = 'keydown', handler, }: KeyHandlerProps) { - let scope = useContext(KeyScopeContext); + const scope = useContext(KeyScopeContext); if (eventType !== 'keyup' && eventType !== 'keydown') { throw new Error('KeyHandler: unknown event type: ' + eventType); @@ -70,7 +70,7 @@ type KeyHandlersProps = { keys: Record; }; export function KeyHandlers({ eventType, keys = {} }: KeyHandlersProps) { - let handlers = Object.keys(keys).map(key => { + const handlers = Object.keys(keys).map(key => { return ( state.user.data); - let { getUserData, signOut, closeBudget } = useActions(); - let [loading, setLoading] = useState(true); - let [menuOpen, setMenuOpen] = useState(false); + const userData = useSelector(state => state.user.data); + const { getUserData, signOut, closeBudget } = useActions(); + const [loading, setLoading] = useState(true); + const [menuOpen, setMenuOpen] = useState(false); const serverUrl = useServerURL(); useEffect(() => { diff --git a/packages/desktop-client/src/components/ManageRules.tsx b/packages/desktop-client/src/components/ManageRules.tsx index 1d6ea7d0a76..36928d65520 100644 --- a/packages/desktop-client/src/components/ManageRules.tsx +++ b/packages/desktop-client/src/components/ManageRules.tsx @@ -51,14 +51,14 @@ function mapValue(field, value, { payees, categories, accounts }) { } function ruleToString(rule, data) { - let conditions = rule.conditions.flatMap(cond => [ + const conditions = rule.conditions.flatMap(cond => [ mapField(cond.field), friendlyOp(cond.op), cond.op === 'oneOf' || cond.op === 'notOneOf' ? cond.value.map(v => mapValue(cond.field, v, data)).join(', ') : mapValue(cond.field, cond.value, data), ]); - let actions = rule.actions.flatMap(action => { + const actions = rule.actions.flatMap(action => { if (action.op === 'set') { return [ friendlyOp(action.op), @@ -67,7 +67,7 @@ function ruleToString(rule, data) { mapValue(action.field, action.value, data), ]; } else if (action.op === 'link-schedule') { - let schedule = data.schedules.find(s => s.id === action.value); + const schedule = data.schedules.find(s => s.id === action.value); return [ friendlyOp(action.op), describeSchedule( @@ -95,19 +95,19 @@ function ManageRulesContent({ payeeId, setLoading, }: ManageRulesContentProps) { - let [allRules, setAllRules] = useState(null); - let [rules, setRules] = useState(null); - let [filter, setFilter] = useState(''); - let dispatch = useDispatch(); - - let { data: schedules } = SchedulesQuery.useQuery(); - let { list: categories } = useCategories(); - let state = useSelector(state => ({ + const [allRules, setAllRules] = useState(null); + const [rules, setRules] = useState(null); + const [filter, setFilter] = useState(''); + const dispatch = useDispatch(); + + const { data: schedules } = SchedulesQuery.useQuery(); + const { list: categories } = useCategories(); + const state = useSelector(state => ({ payees: state.queries.payees, accounts: state.queries.accounts, schedules, })); - let filterData = useMemo( + const filterData = useMemo( () => ({ ...state, categories, @@ -115,7 +115,7 @@ function ManageRulesContent({ [state, categories], ); - let filteredRules = useMemo( + const filteredRules = useMemo( () => filter === '' || !rules ? rules @@ -126,8 +126,8 @@ function ManageRulesContent({ ), [rules, filter, filterData], ); - let selectedInst = useSelected('manage-rules', allRules, []); - let [hoveredRule, setHoveredRule] = useState(null); + const selectedInst = useSelected('manage-rules', allRules, []); + const [hoveredRule, setHoveredRule] = useState(null); async function loadRules() { setLoading(true); @@ -147,7 +147,7 @@ function ManageRulesContent({ useEffect(() => { async function loadData() { - let loadedRules = await loadRules(); + const loadedRules = await loadRules(); setRules(loadedRules.slice(0, 100)); setLoading(false); @@ -171,7 +171,7 @@ function ManageRulesContent({ async function onDeleteSelected() { setLoading(true); - let { someDeletionsFailed } = await send('rule-delete-all', [ + const { someDeletionsFailed } = await send('rule-delete-all', [ ...selectedInst.items, ]); @@ -179,7 +179,7 @@ function ManageRulesContent({ alert('Some rules were not deleted because they are linked to schedules'); } - let newRules = await loadRules(); + const newRules = await loadRules(); setRules(rules => { return newRules.slice(0, rules.length); }); @@ -187,15 +187,15 @@ function ManageRulesContent({ setLoading(false); } - let onEditRule = useCallback(rule => { + const onEditRule = useCallback(rule => { dispatch( pushModal('edit-rule', { rule, onSave: async newRule => { - let newRules = await loadRules(); + const newRules = await loadRules(); setRules(rules => { - let newIdx = newRules.findIndex(rule => rule.id === newRule.id); + const newIdx = newRules.findIndex(rule => rule.id === newRule.id); if (newIdx > rules.length) { return newRules.slice(0, newIdx + 75); @@ -211,7 +211,7 @@ function ManageRulesContent({ }, []); function onCreateRule() { - let rule: RuleEntity = { + const rule: RuleEntity = { stage: null, conditionsOp: 'and', conditions: [ @@ -236,10 +236,10 @@ function ManageRulesContent({ pushModal('edit-rule', { rule, onSave: async newRule => { - let newRules = await loadRules(); + const newRules = await loadRules(); setRules(rules => { - let newIdx = newRules.findIndex(rule => rule.id === newRule.id); + const newIdx = newRules.findIndex(rule => rule.id === newRule.id); return newRules.slice(0, newIdx + 75); }); @@ -249,7 +249,7 @@ function ManageRulesContent({ ); } - let onHover = useCallback(id => { + const onHover = useCallback(id => { setHoveredRule(id); }, []); diff --git a/packages/desktop-client/src/components/MobileWebMessage.tsx b/packages/desktop-client/src/components/MobileWebMessage.tsx index d68b927f0cc..cf93cbd13de 100644 --- a/packages/desktop-client/src/components/MobileWebMessage.tsx +++ b/packages/desktop-client/src/components/MobileWebMessage.tsx @@ -11,7 +11,7 @@ import Text from './common/Text'; import View from './common/View'; import { Checkbox } from './forms'; -let buttonStyle = { border: 0, fontSize: 15, padding: '10px 13px' }; +const buttonStyle = { border: 0, fontSize: 15, padding: '10px 13px' }; export default function MobileWebMessage() { const hideMobileMessagePref = useSelector(state => { @@ -20,14 +20,14 @@ export default function MobileWebMessage() { const { isNarrowWidth } = useResponsive(); - let [show, setShow] = useState( + const [show, setShow] = useState( isNarrowWidth && !hideMobileMessagePref && !document.cookie.match(/hideMobileMessage=true/), ); - let [requestDontRemindMe, setRequestDontRemindMe] = useState(false); + const [requestDontRemindMe, setRequestDontRemindMe] = useState(false); - let dispatch = useDispatch(); + const dispatch = useDispatch(); function onTry() { setShow(false); @@ -37,7 +37,7 @@ export default function MobileWebMessage() { dispatch(savePrefs({ hideMobileMessage: true })); } else { // Set a cookie for 5 minutes - let d = new Date(); + const d = new Date(); d.setTime(d.getTime() + 1000 * 60 * 5); document.cookie = 'hideMobileMessage=true;path=/;expires=' + d.toUTCString(); diff --git a/packages/desktop-client/src/components/Modals.tsx b/packages/desktop-client/src/components/Modals.tsx index 643ef4a0899..6c9238faf2a 100644 --- a/packages/desktop-client/src/components/Modals.tsx +++ b/packages/desktop-client/src/components/Modals.tsx @@ -54,7 +54,7 @@ export default function Modals() { const syncServerStatus = useSyncServerStatus(); - let modals = modalStack + const modals = modalStack .map(({ name, options }, idx) => { const modalProps: CommonModalProps = { onClose: actions.popModal, diff --git a/packages/desktop-client/src/components/NotesButton.tsx b/packages/desktop-client/src/components/NotesButton.tsx index 3c65b4a1f86..fb2770d8400 100644 --- a/packages/desktop-client/src/components/NotesButton.tsx +++ b/packages/desktop-client/src/components/NotesButton.tsx @@ -95,8 +95,8 @@ function NotesTooltip({ position = 'bottom-left', onClose, }: NotesTooltipProps) { - let [notes, setNotes] = useState(defaultNotes); - let inputRef = createRef(); + const [notes, setNotes] = useState(defaultNotes); + const inputRef = createRef(); useEffect(() => { if (editable) { @@ -149,11 +149,11 @@ export default function NotesButton({ tooltipPosition, style, }: NotesButtonProps) { - let [hover, setHover] = useState(false); - let tooltip = useTooltip(); - let data = useLiveQuery(() => q('notes').filter({ id }).select('*'), [id]); - let note = data && data.length > 0 ? data[0].note : null; - let hasNotes = note && note !== ''; + const [hover, setHover] = useState(false); + const tooltip = useTooltip(); + const data = useLiveQuery(() => q('notes').filter({ id }).select('*'), [id]); + const note = data && data.length > 0 ? data[0].note : null; + const hasNotes = note && note !== ''; function onClose(notes) { send('notes-save', { id, note: notes }); diff --git a/packages/desktop-client/src/components/Notifications.tsx b/packages/desktop-client/src/components/Notifications.tsx index a56c529187d..8b16e7e86aa 100644 --- a/packages/desktop-client/src/components/Notifications.tsx +++ b/packages/desktop-client/src/components/Notifications.tsx @@ -29,17 +29,17 @@ function compileMessage( return ( {message.split(/\n\n/).map((paragraph, idx) => { - let parts = paragraph.split(/(\[[^\]]*\]\([^)]*\))/g); + const parts = paragraph.split(/(\[[^\]]*\]\([^)]*\))/g); return ( {parts.map((part, idx) => { - let match = part.match(/\[([^\]]*)\]\(([^)]*)\)/); + const match = part.match(/\[([^\]]*)\]\(([^)]*)\)/); if (match) { - let [_, text, href] = match; + const [_, text, href] = match; if (href[0] === '#') { - let actionName = href.slice(1); + const actionName = href.slice(1); return ( void; }) { - let { type, title, message, pre, messageActions, sticky, internal, button } = - notification; + const { + type, + title, + message, + pre, + messageActions, + sticky, + internal, + button, + } = notification; - let [loading, setLoading] = useState(false); - let [overlayLoading, setOverlayLoading] = useState(false); + const [loading, setLoading] = useState(false); + const [overlayLoading, setOverlayLoading] = useState(false); useEffect(() => { if (type === 'error' && internal) { @@ -95,10 +103,10 @@ function Notification({ } }, []); - let positive = type === 'message'; - let error = type === 'error'; + const positive = type === 'message'; + const error = type === 'error'; - let processedMessage = useMemo( + const processedMessage = useMemo( () => compileMessage(message, messageActions, setOverlayLoading, onRemove), [message, messageActions], ); @@ -228,8 +236,8 @@ function Notification({ } export default function Notifications({ style }: { style?: CSSProperties }) { - let { removeNotification } = useActions(); - let notifications = useSelector(state => state.notifications.notifications); + const { removeNotification } = useActions(); + const notifications = useSelector(state => state.notifications.notifications); return ( ( + const renderPrivacyFilter = (children, mergedProps) => ( {children} ); return privacyFilter ? ( @@ -52,10 +52,10 @@ export default function PrivacyFilter({ children, ...props }: PrivacyFilterProps) { - let privacyMode = usePrivacyMode(); + const privacyMode = usePrivacyMode(); // Limit mobile support for now. - let { isNarrowWidth } = useResponsive(); - let activate = + const { isNarrowWidth } = useResponsive(); + const activate = privacyMode && !isNarrowWidth && (!activationFilters || @@ -63,7 +63,7 @@ export default function PrivacyFilter({ typeof value === 'boolean' ? value : value(), )); - let blurAmount = blurIntensity != null ? `${blurIntensity}px` : '3px'; + const blurAmount = blurIntensity != null ? `${blurIntensity}px` : '3px'; return !activate ? ( <>{Children.toArray(children)} @@ -75,11 +75,11 @@ export default function PrivacyFilter({ } function BlurredOverlay({ blurIntensity, children, ...props }) { - let [hovered, setHovered] = useState(false); - let onHover = useCallback(() => setHovered(true), [setHovered]); - let onHoverEnd = useCallback(() => setHovered(false), [setHovered]); + const [hovered, setHovered] = useState(false); + const onHover = useCallback(() => setHovered(true), [setHovered]); + const onHoverEnd = useCallback(() => setHovered(false), [setHovered]); - let blurStyle = { + const blurStyle = { ...(!hovered && { filter: `blur(${blurIntensity})`, WebkitFilter: `blur(${blurIntensity})`, @@ -89,7 +89,7 @@ function BlurredOverlay({ blurIntensity, children, ...props }) { }), }; - let { style, ...restProps } = props; + const { style, ...restProps } = props; return ( useContext(ServerContext).version; export const useSetServerURL = () => useContext(ServerContext).setURL; async function getServerVersion() { - let result = await send('get-server-version'); + const result = await send('get-server-version'); if ('version' in result) { return result.version; } @@ -37,8 +37,8 @@ async function getServerVersion() { } export function ServerProvider({ children }: { children: ReactNode }) { - let [serverURL, setServerURL] = useState(''); - let [version, setVersion] = useState(''); + const [serverURL, setServerURL] = useState(''); + const [version, setVersion] = useState(''); useEffect(() => { async function run() { @@ -48,9 +48,9 @@ export function ServerProvider({ children }: { children: ReactNode }) { run(); }, []); - let setURL = useCallback( + const setURL = useCallback( async (url: string, opts: { validate?: boolean } = {}) => { - let { error } = await send('set-server-url', { ...opts, url }); + const { error } = await send('set-server-url', { ...opts, url }); if (!error) { setServerURL(await send('get-server-url')); setVersion(await getServerVersion()); diff --git a/packages/desktop-client/src/components/SyncRefresh.tsx b/packages/desktop-client/src/components/SyncRefresh.tsx index ec95d7ea628..714ba0f6fee 100644 --- a/packages/desktop-client/src/components/SyncRefresh.tsx +++ b/packages/desktop-client/src/components/SyncRefresh.tsx @@ -9,7 +9,7 @@ type SyncRefreshProps = { children: (props: ChildrenProps) => ReactNode; }; export default function SyncRefresh({ onSync, children }: SyncRefreshProps) { - let [syncing, setSyncing] = useState(false); + const [syncing, setSyncing] = useState(false); async function onSync_() { setSyncing(true); diff --git a/packages/desktop-client/src/components/ThemeSelector.tsx b/packages/desktop-client/src/components/ThemeSelector.tsx index e780bfe296d..e909e4d0e61 100644 --- a/packages/desktop-client/src/components/ThemeSelector.tsx +++ b/packages/desktop-client/src/components/ThemeSelector.tsx @@ -13,10 +13,10 @@ type ThemeSelectorProps = { }; export function ThemeSelector({ style }: ThemeSelectorProps) { - let theme = useTheme(); - let { saveGlobalPrefs } = useActions(); + const theme = useTheme(); + const { saveGlobalPrefs } = useActions(); - let { isNarrowWidth } = useResponsive(); + const { isNarrowWidth } = useResponsive(); return isNarrowWidth ? null : (