Skip to content

feat: centralize state management with React Context #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
shivv23 wants to merge 9 commits into
base: main
Choose a base branch
from
Open

feat: centralize state management with React Context #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
7dff258
Add StoreContext and InvoiceContext with useStore/useInvoice hooks
shivv23 Jul 21, 2026
00de30f
Wrap app with StoreProvider for singleton Local instance
shivv23 Jul 21, 2026
ea3ccf4
Refactor Home to provide InvoiceContext instead of prop drilling
shivv23 Jul 21, 2026
4fadd1d
Consume context in Dashboard, remove store/billType props
shivv23 Jul 21, 2026
76c79ac
Consume context in NewFile, remove all props
shivv23 Jul 21, 2026
bc4ad0c
Consume context in Menu, remove all props and fix async doSave
shivv23 Jul 21, 2026
695b5be
Use shared store via context in MeshKitPage
shivv23 Jul 21, 2026
2435a46
Remove dead Files component (346 lines, never imported)
shivv23 Jul 21, 2026
9216d61
Add @meshkit/ionic type declaration stub
shivv23 Jul 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 18 additions & 15 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { IonReactRouter } from "@ionic/react-router";
import { Route, Redirect } from "react-router-dom";
import Home from "./pages/Home";
import MeshKitPage from "./pages/MeshKit";
import { StoreProvider } from "./contexts/StoreContext";

/* Core CSS required for Ionic components to work properly */
import "@ionic/react/css/core.css";
Expand All @@ -26,21 +27,23 @@ import "./theme/variables.css";
setupIonicReact();

const App: React.FC = () => (
<IonApp>
<IonReactRouter>
<IonRouterOutlet>
<Route exact path="/home">
<Home />
</Route>
<Route exact path="/meshkit">
<MeshKitPage />
</Route>
<Route exact path="/">
<Redirect to="/home" />
</Route>
</IonRouterOutlet>
</IonReactRouter>
</IonApp>
<StoreProvider>
<IonApp>
<IonReactRouter>
<IonRouterOutlet>
<Route exact path="/home">
<Home />
</Route>
<Route exact path="/meshkit">
<MeshKitPage />
</Route>
<Route exact path="/">
<Redirect to="/home" />
</Route>
</IonRouterOutlet>
</IonReactRouter>
</IonApp>
</StoreProvider>
);

export default App;
17 changes: 10 additions & 7 deletions src/components/Dashboard/Dashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,21 +8,24 @@ import {
documentTextOutline, cloudUploadOutline, cloudDownloadOutline, shareSocialOutline, trashOutline,
addCircleOutline, serverOutline, hardwareChipOutline, openOutline, timeOutline, statsChartOutline, searchOutline, documentOutline
} from "ionicons/icons";
import { Local, File as LocalFile, BackupRecord, ActivityLog, AppMetrics } from "../Storage/LocalStorage";
import { File as LocalFile, BackupRecord, ActivityLog, AppMetrics } from "../Storage/LocalStorage";
import { backupInvoiceToIPFS, restoreInvoiceFromIPFS, testConnection } from "../../services/MeshkitService";
import { BackupSuccessModal } from "../Modals/BackupSuccessModal";
import { RestoreSuccessModal } from "../Modals/RestoreSuccessModal";
import * as AppGeneral from "../socialcalc/index.js";
import { useHistory } from "react-router";
import { DATA } from "../../app-data.js";
import { useStore } from "../../contexts/StoreContext";
import { useInvoice } from "../../contexts/InvoiceContext";

interface DashboardProps {
store: Local;
onOpenFile: (key: string, billType: number) => void;
currentBillType: number;
}

const Dashboard: React.FC<DashboardProps> = ({ store, onOpenFile, currentBillType }) => {
const Dashboard: React.FC<DashboardProps> = ({ onOpenFile }) => {
const store = useStore();
const { billType } = useInvoice();

const [fileList, setFileList] = useState<{ [key: string]: any }>({});
const [backupHistory, setBackupHistory] = useState<BackupRecord[]>([]);
const [activityLogs, setActivityLogs] = useState<ActivityLog[]>([]);
Expand Down Expand Up @@ -204,7 +207,7 @@ const Dashboard: React.FC<DashboardProps> = ({ store, onOpenFile, currentBillTyp
return;
}
const content = encodeURIComponent(JSON.stringify(DATA["home"][AppGeneral.getDeviceType()]["msc"]));
const file = new LocalFile(new Date().toString(), new Date().toString(), content, filename, currentBillType);
const file = new LocalFile(new Date().toString(), new Date().toString(), content, filename, billType);
await store._saveFile(file);
await store._incrementMetric('invoicesCreated');
await store._logActivity({ type: 'CREATE', description: `Created new invoice ${filename}` });
Expand Down Expand Up @@ -316,12 +319,12 @@ const Dashboard: React.FC<DashboardProps> = ({ store, onOpenFile, currentBillTyp
<IonButton size="small" fill="outline" onClick={() => handleBackup(key)}>
<IonIcon icon={cloudUploadOutline} slot="start" /> Backup
</IonButton>
{fileList[key].backedUp && (
{fileList[key].backedUp && fileList[key].cid && (
<IonButton size="small" fill="outline" color="secondary" onClick={() => handleRestore(fileList[key].cid, key)}>
<IonIcon icon={cloudDownloadOutline} slot="start" /> Restore
</IonButton>
)}
{fileList[key].backedUp && (
{fileList[key].backedUp && fileList[key].cid && (
<IonButton size="small" fill="outline" color="tertiary" onClick={() => handleShare(fileList[key].cid)}>
<IonIcon icon={shareSocialOutline} slot="start" /> Share
</IonButton>
Expand Down
30 changes: 0 additions & 30 deletions src/components/Files/Files.css
View file
Open in desktop

This file was deleted.

Loading