Merge pull request #33 from michaelclapham/ionic-router

WIP: Use Ionic react router with bottom tabs

README.md

@@ -1,4 +1,5 @@
 ## QR Sync Admin Web
+
 This is the new web interface for the QR Sync Admin app.
 
 The goal of this admin app is for controlling multiple computers using a quick and easy QR scanning sync process.

package.json

@@ -9,14 +9,18 @@
     "react-dom": "^18.2.0",
     "react-qr-code": "^2.0.12",
     "react-responsive-carousel": "^3.2.23",
-    "typescript": "^4"
+    "typescript": "^4.9.5",
+    "@ionic/react-router": "7.8.0",
+    "react-router": "^5.3.4",
+    "react-router-dom": "^5.3.4"
   },
   "devDependencies": {
     "@types/jest": "^29.5.12",
     "@types/node": "^20.11.19",
     "@types/react": "^18.2.56",
     "@types/react-dom": "^18.2.19",
     "@types/react-qr-reader": "^2.1.7",
+    "@types/react-router-dom": "^5.3.3",
     "eslint-utils": "^3.0.0",
     "react-scripts": "^5.0.1",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
@@ -42,4 +46,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

public/manifest.json

@@ -16,9 +16,9 @@
       "src": "logo512.png",
       "type": "image/png",
       "sizes": "512x512"
-    }	 
+    }
   ],
   "start_url": ".",
   "display": "standalone",
   "theme_color": "#107C76"
-}
+}

src/App.css

@@ -1,5 +1,5 @@
 body {
-  --ion-color-primary: #107C76;
+  --ion-color-primary: #107c76;
   --ion-background-color: rgb(39, 39, 39);
   --ion-text-color: white;
   --ion-text-color-rgb: 255, 255, 255;
@@ -80,4 +80,4 @@ body {
   to {
     transform: rotate(360deg);
   }
-}
+}

src/App.test.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
+import React from "react";
+import ReactDOM from "react-dom";
+import { App } from "./App";
 
-it('renders without crashing', () => {
-  const div = document.createElement('div');
+it("renders without crashing", () => {
+  const div = document.createElement("div");
   ReactDOM.render(<App />, div);
   ReactDOM.unmountComponentAtNode(div);
 });