diff --git a/package-lock.json b/package-lock.json index 8ed89a2..312fbf9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "moneymoneymonthlybudgets", + "name": "budgetbudget", "version": "0.0.0-development", "lockfileVersion": 1, "requires": true, @@ -2185,6 +2185,14 @@ "@types/react": "*" } }, + "@types/react-helmet": { + "version": "5.0.15", + "resolved": "https://registry.npmjs.org/@types/react-helmet/-/react-helmet-5.0.15.tgz", + "integrity": "sha512-CCjqvecDJTXRrHG8aTc2YECcQCl26za/q+NaBRvy/wtm0Uh38koM2dpv2bG1xJV4ckz3t1lm2/5KU6nt2s9BWg==", + "requires": { + "@types/react": "*" + } + }, "@types/stack-utils": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz", @@ -14525,6 +14533,22 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.6.tgz", "integrity": "sha512-Yzpno3enVzSrSCnnljmr4b/2KUQSMZaPuqmS26t9k4nW7uwJk6STWmH9heNjPuvqUTO3jOSPkHoKgO4+Dw7uIw==" }, + "react-fast-compare": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz", + "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==" + }, + "react-helmet": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.0.0.tgz", + "integrity": "sha512-My6S4sa0uHN/IuVUn0HFmasW5xj9clTkB9qmMngscVycQ5vVG51Qp44BEvLJ4lixupTwDlU9qX1/sCrMN4AEPg==", + "requires": { + "object-assign": "^4.1.1", + "prop-types": "^15.7.2", + "react-fast-compare": "^2.0.4", + "react-side-effect": "^2.1.0" + } + }, "react-is": { "version": "16.13.0", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.0.tgz", @@ -14590,6 +14614,11 @@ "workbox-webpack-plugin": "4.3.1" } }, + "react-side-effect": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.0.tgz", + "integrity": "sha512-IgmcegOSi5SNX+2Snh1vqmF0Vg/CbkycU9XZbOHJlZ6kMzTmi3yc254oB1WCkgA7OQtIAoLmcSFuHTc/tlcqXg==" + }, "read-pkg": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz", diff --git a/package.json b/package.json index 122ac28..8e0160d 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,6 @@ { "name": "budgetbudget", + "productName": "BudgetBudget", "version": "0.0.0-development", "description": "work with monthly budgets alongside moneymoney", "main": "main.js", @@ -24,6 +25,7 @@ "@types/pouchdb": "6.4.0", "@types/react": "16.9.23", "@types/react-dom": "16.9.5", + "@types/react-helmet": "5.0.15", "classnames": "2.2.6", "concurrently": "5.1.0", "date-fns": "2.11.0", @@ -37,6 +39,7 @@ "pouchdb": "7.2.1", "react": "16.13.0", "react-dom": "16.13.0", + "react-helmet": "6.0.0", "react-scripts": "3.4.0", "ts-node": "8.8.1", "typescript": "3.8.3", diff --git a/src/lib/electron.ts b/src/lib/electron.ts index 647dfa1..aa29f2c 100644 --- a/src/lib/electron.ts +++ b/src/lib/electron.ts @@ -7,4 +7,5 @@ import { const electron = window.require('electron'); export const ipcRenderer: IpcRenderer = electron.ipcRenderer; export const Menu: typeof MenuClass = electron.remote.Menu; +export const appName: string = electron.remote.app.name; export const MenuItem: typeof MenuItemClass = electron.remote.MenuItem; diff --git a/src/views/Budget/Budget.tsx b/src/views/Budget/Budget.tsx index 63e5904..504552c 100644 --- a/src/views/Budget/Budget.tsx +++ b/src/views/Budget/Budget.tsx @@ -1,7 +1,9 @@ import React, { Dispatch } from 'react'; +import { Helmet } from 'react-helmet'; import isAfter from 'date-fns/isAfter'; import { BudgetState, Action, useBudgetData } from '../../budget'; -import { Header, Content } from '../../components'; +import { Header, Content, Loading } from '../../components'; +import { appName } from '../../lib'; import Month from '../Month'; import BudgetSlider from './BudgetSlider'; import { UiProvider } from './UiContext'; @@ -23,10 +25,18 @@ export default function Budget({ state, dispatch }: Props) { currency, categories, } = useBudgetData(state); + const title = ( + + + {state.name} - {appName} + + + ); if (error) { return (
+ {title}

Error: {error.message}

{retry && }
@@ -35,6 +45,7 @@ export default function Budget({ state, dispatch }: Props) { return ( + {title}
void; @@ -57,6 +59,9 @@ export default function NewBudget({ onCreate }: Props) { const [selectedAccounts, setSelectedAccounts] = useState([]); return ( <> + + New Budget - {appName} +

Creating a new Budget