From 764c774fc7a6c6e5f6454ae8b0467fe4159acc03 Mon Sep 17 00:00:00 2001
From: Kilerd Chan <blove694@gmail.com>
Date: Sun, 12 May 2024 17:55:21 +0800
Subject: [PATCH 1/3] feat: show page title in html title

---
 frontend/src/pages/Accounts.tsx        | 5 ++++-
 frontend/src/pages/Budgets.tsx         | 7 +++++--
 frontend/src/pages/Commodities.tsx     | 4 ++++
 frontend/src/pages/Documents.tsx       | 6 +++++-
 frontend/src/pages/Home.tsx            | 5 +++++
 frontend/src/pages/Journals.tsx        | 6 +++++-
 frontend/src/pages/RawEdit.tsx         | 5 +++++
 frontend/src/pages/Report.tsx          | 5 +++++
 frontend/src/pages/Settings.tsx        | 6 +++++-
 frontend/src/pages/SingleAccount.tsx   | 6 ++++++
 frontend/src/pages/SingleBudget.tsx    | 5 +++++
 frontend/src/pages/SingleCommodity.tsx | 6 ++++++
 12 files changed, 60 insertions(+), 6 deletions(-)

diff --git a/frontend/src/pages/Accounts.tsx b/frontend/src/pages/Accounts.tsx
index d008f1c0..075ff4ba 100644
--- a/frontend/src/pages/Accounts.tsx
+++ b/frontend/src/pages/Accounts.tsx
@@ -1,5 +1,5 @@
 import { Button, Checkbox, CloseButton, Container, Group, Input, Table } from '@mantine/core';
-import { useInputState, useLocalStorage } from '@mantine/hooks';
+import { useDocumentTitle, useInputState, useLocalStorage } from '@mantine/hooks';
 import { useEffect } from 'react';
 import AccountLine from '../components/AccountLine';
 import { LoadingState } from '../rest-model';
@@ -16,6 +16,9 @@ export default function Accounts() {
   const dispatch = useAppDispatch();
   const accountStatus = useAppSelector((state) => state.accounts.status);
   const accountTrie = useAppSelector(getAccountsTrie(hideClosedAccount, filterKeyword));
+  const ledgerTitle = useAppSelector((state) => state.basic.title ?? 'Zhang Accounting');
+
+  useDocumentTitle(`Accounts - ${ledgerTitle}`);
 
   useEffect(() => {
     if (accountStatus === LoadingState.NotReady) {
diff --git a/frontend/src/pages/Budgets.tsx b/frontend/src/pages/Budgets.tsx
index f78af400..6190b5c4 100644
--- a/frontend/src/pages/Budgets.tsx
+++ b/frontend/src/pages/Budgets.tsx
@@ -1,5 +1,5 @@
 import { ActionIcon, Button, Chip, Container, Group, Popover, Table, Title } from '@mantine/core';
-import { useLocalStorage } from '@mantine/hooks';
+import { useDocumentTitle, useLocalStorage } from '@mantine/hooks';
 import { useState } from 'react';
 import { BudgetListItem } from '../rest-model';
 import { useTranslation } from 'react-i18next';
@@ -10,6 +10,7 @@ import BudgetCategory from '../components/budget/BudgetCategory';
 import { format } from 'date-fns';
 import { MonthPicker } from '@mantine/dates';
 import { IconChevronLeft, IconChevronRight } from '@tabler/icons';
+import { useAppSelector } from '../states';
 
 export default function Budgets() {
   const { t } = useTranslation();
@@ -17,8 +18,10 @@ export default function Budgets() {
     key: 'hideZeroAssignBudget',
     defaultValue: false,
   });
-
   const [date, setDate] = useState<Date>(new Date());
+  const ledgerTitle = useAppSelector((state) => state.basic.title ?? 'Zhang Accounting');
+
+  useDocumentTitle(`Budgets - ${ledgerTitle}`);
 
   const { data: budgets, error } = useSWR<BudgetListItem[]>(`/api/budgets?year=${date.getFullYear()}&month=${date.getMonth() + 1}`, fetcher);
   if (error) return <div>failed to load</div>;
diff --git a/frontend/src/pages/Commodities.tsx b/frontend/src/pages/Commodities.tsx
index 2f4fcc9c..5d90f7fb 100644
--- a/frontend/src/pages/Commodities.tsx
+++ b/frontend/src/pages/Commodities.tsx
@@ -4,10 +4,14 @@ import { useAppSelector } from '../states';
 import { Heading } from '../components/basic/Heading';
 import { groupBy } from 'lodash-es';
 import CommodityBox from '../components/CommodityBox';
+import { useDocumentTitle } from '@mantine/hooks';
 
 const FRONTEND_DEFAULT_GROUP = '__ZHANG__FRONTEND_DEFAULT__GROUP__';
 export default function Commodities() {
   const { value: commodities, status } = useAppSelector((state) => state.commodities);
+  const ledgerTitle = useAppSelector((state) => state.basic.title ?? 'Zhang Accounting');
+
+  useDocumentTitle(`Commodities - ${ledgerTitle}`);
 
   if (status === LoadingState.Loading || status === LoadingState.NotReady) return <>loading</>;
 
diff --git a/frontend/src/pages/Documents.tsx b/frontend/src/pages/Documents.tsx
index ce59a2d8..844bc78a 100644
--- a/frontend/src/pages/Documents.tsx
+++ b/frontend/src/pages/Documents.tsx
@@ -1,5 +1,5 @@
 import { Button, Container, Group, SimpleGrid, Table, Title } from '@mantine/core';
-import { useLocalStorage } from '@mantine/hooks';
+import { useDocumentTitle, useLocalStorage } from '@mantine/hooks';
 import { openContextModal } from '@mantine/modals';
 import { IconLayout2, IconListDetails } from '@tabler/icons';
 import { format } from 'date-fns';
@@ -11,10 +11,14 @@ import { Heading } from '../components/basic/Heading';
 import { groupBy, reverse, sortBy } from 'lodash-es';
 import { TextBadge } from '../components/basic/TextBadge';
 import { useNavigate } from 'react-router';
+import { useAppSelector } from '../states';
 
 export default function Documents() {
   let navigate = useNavigate();
   const [layout, setLayout] = useLocalStorage({ key: `document-list-layout`, defaultValue: 'Grid' });
+  const ledgerTitle = useAppSelector((state) => state.basic.title ?? 'Zhang Accounting');
+
+  useDocumentTitle(`Documents - ${ledgerTitle}`);
 
   const { data: documents, error } = useSWR<Document[]>('/api/documents', fetcher);
 
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
index 7f12d0ee..1f653639 100644
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -9,9 +9,14 @@ import { StatisticGraphResponse } from '../rest-model';
 import { useAppSelector } from '../states';
 import ReportGraph from '../components/ReportGraph';
 import { Heading } from '../components/basic/Heading';
+import { useDocumentTitle } from '@mantine/hooks';
 
 function Home() {
   const error_total_number = useAppSelector((state) => state.errors.total_number);
+  const ledgerTitle = useAppSelector((state) => state.basic.title ?? 'Zhang Accounting');
+
+  useDocumentTitle(`Dashboard - ${ledgerTitle}`);
+
   const now = new Date();
   const beginning_time = new Date(now.getFullYear(), now.getMonth() - 1, now.getDate(), 0, 0, 1);
   const end_time = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59);
diff --git a/frontend/src/pages/Journals.tsx b/frontend/src/pages/Journals.tsx
index d64b9e40..8bc10110 100644
--- a/frontend/src/pages/Journals.tsx
+++ b/frontend/src/pages/Journals.tsx
@@ -8,7 +8,7 @@ import { useAppDispatch, useAppSelector } from '../states';
 import { fetchJournals, journalsSlice } from '../states/journals';
 import { Heading } from '../components/basic/Heading';
 import { useTranslation } from 'react-i18next';
-import { useDebouncedValue } from '@mantine/hooks';
+import { useDebouncedValue, useDocumentTitle } from '@mantine/hooks';
 import { IconFilter } from '@tabler/icons';
 
 function Journals() {
@@ -17,6 +17,10 @@ function Journals() {
   const [debouncedFilter] = useDebouncedValue(filter, 200);
   const { current_page, status: journalStatus, items, total_number, total_page } = useAppSelector((state) => state.journals);
   const dispatch = useAppDispatch();
+  const ledgerTitle = useAppSelector((state) => state.basic.title ?? 'Zhang Accounting');
+
+  useDocumentTitle(`Journals - ${ledgerTitle}`);
+
   useEffect(() => {
     if (journalStatus === LoadingState.NotReady) {
       dispatch(fetchJournals(debouncedFilter));
diff --git a/frontend/src/pages/RawEdit.tsx b/frontend/src/pages/RawEdit.tsx
index e2cf3042..96008878 100644
--- a/frontend/src/pages/RawEdit.tsx
+++ b/frontend/src/pages/RawEdit.tsx
@@ -4,10 +4,15 @@ import { fetcher } from '..';
 import SingleFileEdit from '../components/SingleFileEdit';
 import { TableOfContentsFloating, Tier, ZHANG_VALUE } from '../components/basic/TableOfContentsFloating';
 import { useState } from 'react';
+import { useAppSelector } from '../states';
+import { useDocumentTitle } from '@mantine/hooks';
 
 function RawEdit() {
   const { data, error } = useSWR<string[]>('/api/files', fetcher);
   const [selectedFile, setSelectedFile] = useState<string | null>(null);
+  const ledgerTitle = useAppSelector((state) => state.basic.title ?? 'Zhang Accounting');
+
+  useDocumentTitle(selectedFile ? `${selectedFile} | Raw Editing - ${ledgerTitle}` : `Raw Editing - ${ledgerTitle}`);
 
   if (error) return <div>failed to load</div>;
   if (!data) return <>loading</>;
diff --git a/frontend/src/pages/Report.tsx b/frontend/src/pages/Report.tsx
index f8cfa724..7bc15bb5 100644
--- a/frontend/src/pages/Report.tsx
+++ b/frontend/src/pages/Report.tsx
@@ -12,6 +12,8 @@ import { StatisticGraphResponse, StatisticResponse, StatisticTypeResponse } from
 import PayeeNarration from '../components/basic/PayeeNarration';
 import BigNumber from 'bignumber.js';
 import { Heading } from '../components/basic/Heading';
+import { useAppSelector } from '../states';
+import { useDocumentTitle } from '@mantine/hooks';
 
 const color_set = ['pink', 'grape', 'violet'];
 
@@ -25,6 +27,9 @@ export default function Report() {
     new Date(new Date().getFullYear(), new Date().getMonth(), 1, 0, 0, 1),
     new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0, 23, 59, 59),
   ]);
+  const ledgerTitle = useAppSelector((state) => state.basic.title ?? 'Zhang Accounting');
+
+  useDocumentTitle(`Report - ${ledgerTitle}`);
 
   useEffect(() => {
     if (value[0] !== null && value[1] !== null) {
diff --git a/frontend/src/pages/Settings.tsx b/frontend/src/pages/Settings.tsx
index 95db1435..7afd22a1 100644
--- a/frontend/src/pages/Settings.tsx
+++ b/frontend/src/pages/Settings.tsx
@@ -1,5 +1,5 @@
 import { Container, Grid, SegmentedControl, SimpleGrid, Skeleton, Table } from '@mantine/core';
-import { useLocalStorage } from '@mantine/hooks';
+import { useDocumentTitle, useLocalStorage } from '@mantine/hooks';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Setting } from '../components/basic/Setting';
@@ -17,6 +17,10 @@ export default function Settings() {
   const { data } = useSWR<Option[]>('/api/options', fetcher);
   const { data: plugins } = useSWR<PluginResponse[]>('/api/plugins', fetcher);
 
+  const ledgerTitle = useAppSelector((state) => state.basic.title ?? 'Zhang Accounting');
+
+  useDocumentTitle(`Settings - ${ledgerTitle}`);
+
   const onLanguageChange = (lang: string) => {
     setLang(lang);
   };
diff --git a/frontend/src/pages/SingleAccount.tsx b/frontend/src/pages/SingleAccount.tsx
index 7c61df3c..c7e5a5bb 100644
--- a/frontend/src/pages/SingleAccount.tsx
+++ b/frontend/src/pages/SingleAccount.tsx
@@ -11,6 +11,8 @@ import LoadingComponent from '../components/basic/LoadingComponent';
 import PayeeNarration from '../components/basic/PayeeNarration';
 import { AccountInfo, AccountJournalItem, Document } from '../rest-model';
 import DocumentPreview from '../components/journalPreview/DocumentPreview';
+import { useAppSelector } from '../states';
+import { useDocumentTitle } from '@mantine/hooks';
 
 const useStyles = createStyles((theme) => ({
   calculatedAmount: {
@@ -28,6 +30,10 @@ function SingleAccount() {
 
   const { data: account, error } = useSWR<AccountInfo>(`/api/accounts/${accountName}`, fetcher);
 
+  const ledgerTitle = useAppSelector((state) => state.basic.title ?? 'Zhang Accounting');
+
+  useDocumentTitle(`${accountName} | Accounts - ${ledgerTitle}`);
+
   if (error) return <div>failed to load</div>;
   if (!account) return <div>{error}</div>;
   return (
diff --git a/frontend/src/pages/SingleBudget.tsx b/frontend/src/pages/SingleBudget.tsx
index 3e48cfec..4006577d 100644
--- a/frontend/src/pages/SingleBudget.tsx
+++ b/frontend/src/pages/SingleBudget.tsx
@@ -9,10 +9,15 @@ import PayeeNarration from '../components/basic/PayeeNarration';
 import { BudgetInfoResponse, BudgetIntervalEventResponse } from '../rest-model';
 import { MonthPicker } from '@mantine/dates';
 import { useState } from 'react';
+import { useAppSelector } from '../states';
+import { useDocumentTitle } from '@mantine/hooks';
 
 function SingleBudget() {
   let { budgetName } = useParams();
   const [date, setDate] = useState<Date>(new Date());
+  const ledgerTitle = useAppSelector((state) => state.basic.title ?? 'Zhang Accounting');
+
+  useDocumentTitle(`${budgetName} | Budgets - ${ledgerTitle}`);
 
   const goToMonth = (gap: number) => {
     let newDate = new Date(date);
diff --git a/frontend/src/pages/SingleCommodity.tsx b/frontend/src/pages/SingleCommodity.tsx
index 4e9156b4..e8806712 100644
--- a/frontend/src/pages/SingleCommodity.tsx
+++ b/frontend/src/pages/SingleCommodity.tsx
@@ -6,11 +6,17 @@ import { fetcher } from '..';
 import Amount from '../components/Amount';
 import { CommodityDetail } from '../rest-model';
 import { Heading } from '../components/basic/Heading';
+import { useAppSelector } from '../states';
+import { useDocumentTitle } from '@mantine/hooks';
 
 export default function SingleCommodity() {
   let { commodityName } = useParams();
   const { data, error } = useSWR<CommodityDetail>(`/api/commodities/${commodityName}`, fetcher);
 
+  const ledgerTitle = useAppSelector((state) => state.basic.title ?? 'Zhang Accounting');
+
+  useDocumentTitle(`${commodityName} | Commodities - ${ledgerTitle}`);
+
   if (error) return <div>failed to load</div>;
   if (!data) return <div>loading123</div>;
 

From 8711a1726205aee1c32361e9f145b596d1638eb2 Mon Sep 17 00:00:00 2001
From: Kilerd Chan <blove694@gmail.com>
Date: Sun, 12 May 2024 17:56:39 +0800
Subject: [PATCH 2/3] perf: remove some console.log

---
 frontend/src/components/documentLines/AccountDocumentLine.tsx | 1 -
 frontend/src/components/modals/TransactionEditModal.tsx       | 1 -
 frontend/src/pages/Commodities.tsx                            | 1 -
 frontend/src/pages/Documents.tsx                              | 1 -
 4 files changed, 4 deletions(-)

diff --git a/frontend/src/components/documentLines/AccountDocumentLine.tsx b/frontend/src/components/documentLines/AccountDocumentLine.tsx
index 4420dc09..e744e4c3 100644
--- a/frontend/src/components/documentLines/AccountDocumentLine.tsx
+++ b/frontend/src/components/documentLines/AccountDocumentLine.tsx
@@ -67,7 +67,6 @@ export default function AccountDocumentLine(props: Props) {
   const { classes } = useStyles();
 
   const extension = (props.extension ?? '').toLowerCase();
-  console.log(props, extension);
   const canPreview = EXTENSIONS_SUPPORT_PREVIEW.includes(extension);
   const openPreviewModal = () => {
     if (canPreview) {
diff --git a/frontend/src/components/modals/TransactionEditModal.tsx b/frontend/src/components/modals/TransactionEditModal.tsx
index 4cbde9c7..0ea7bb0f 100644
--- a/frontend/src/components/modals/TransactionEditModal.tsx
+++ b/frontend/src/components/modals/TransactionEditModal.tsx
@@ -41,7 +41,6 @@ export const TransactionEditModal = ({
         data={innerProps.data}
         onChange={(data, isValid) => {
           setData(data);
-          console.log(isValid);
           setIsValid(isValid);
         }}
       ></TransactionEditForm>
diff --git a/frontend/src/pages/Commodities.tsx b/frontend/src/pages/Commodities.tsx
index 5d90f7fb..1c872cb7 100644
--- a/frontend/src/pages/Commodities.tsx
+++ b/frontend/src/pages/Commodities.tsx
@@ -16,7 +16,6 @@ export default function Commodities() {
   if (status === LoadingState.Loading || status === LoadingState.NotReady) return <>loading</>;
 
   const groupedCommodities = groupBy(commodities, (it) => it.group ?? FRONTEND_DEFAULT_GROUP);
-  console.log(groupedCommodities);
 
   return (
     <Container fluid>
diff --git a/frontend/src/pages/Documents.tsx b/frontend/src/pages/Documents.tsx
index 844bc78a..1c4cbc96 100644
--- a/frontend/src/pages/Documents.tsx
+++ b/frontend/src/pages/Documents.tsx
@@ -43,7 +43,6 @@ export default function Documents() {
       (it) => it[0].datetime,
     ),
   );
-  console.log(groupedDocuments);
   return (
     <Container fluid>
       <Group position="apart">

From a0f7ab62ca3487a47e086d63bf58317e6eecf3da Mon Sep 17 00:00:00 2001
From: Kilerd Chan <blove694@gmail.com>
Date: Sun, 12 May 2024 18:19:14 +0800
Subject: [PATCH 3/3] refact: group hooks

---
 frontend/src/pages/Documents.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/Documents.tsx b/frontend/src/pages/Documents.tsx
index 1c4cbc96..7932e76a 100644
--- a/frontend/src/pages/Documents.tsx
+++ b/frontend/src/pages/Documents.tsx
@@ -16,12 +16,12 @@ import { useAppSelector } from '../states';
 export default function Documents() {
   let navigate = useNavigate();
   const [layout, setLayout] = useLocalStorage({ key: `document-list-layout`, defaultValue: 'Grid' });
+  const { data: documents, error } = useSWR<Document[]>('/api/documents', fetcher);
+
   const ledgerTitle = useAppSelector((state) => state.basic.title ?? 'Zhang Accounting');
 
   useDocumentTitle(`Documents - ${ledgerTitle}`);
 
-  const { data: documents, error } = useSWR<Document[]>('/api/documents', fetcher);
-
   if (error) return <div>failed to load</div>;
   if (!documents) return <div>loading...</div>;
   const openDocumentPreviewModal = (filename: string, path: string) => {