Moving to more workable v1 solution

components/pages/Home.jsx

@@ -1,10 +1,7 @@
-import Store from '../../store';
 import Card from '../ui/Card';
-import Content from '../ui/Content';
 
-import * as selectors from '../../store/selectors';
-import usePage from '../../hooks/usePage';
-import { home, homeOutline } from 'ionicons/icons';
+import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/react';
+import { homeItems } from '../../store';
 
 const HomeCard = ({ title, type, text, author, image }) => (
   <Card className="my-4">
@@ -19,23 +16,19 @@ const HomeCard = ({ title, type, text, author, image }) => (
   </Card>
 );
 
-const Home = ({ selected }) => {
-  usePage({
-    id: 'home',
-    title: 'Home',
-    icon: homeOutline,
-    selectedIcon: home,
-  });
-
-  const homeItems = Store.useState(selectors.getHomeItems);
-
-  return (
-    <Content className="p-4 dark:bg-black">
+const Home = () => (
+  <IonPage>
+    <IonHeader>
+      <IonToolbar>
+        <IonTitle>Inbox</IonTitle>
+      </IonToolbar>
+    </IonHeader>
+    <IonContent>
       {homeItems.map((i, index) => (
         <HomeCard {...i} key={index} />
       ))}
-    </Content>
-  );
-};
+    </IonContent>
+  </IonPage>
+);
 
 export default Home;

components/pages/ListDetail.jsx

@@ -1,4 +1,4 @@
-import { Link } from 'wouter';
+import Link from '../../components/Link';
 
 import usePage from '../../hooks/usePage';
 import Store from '../../store';

components/pages/Lists.jsx

@@ -1,13 +1,10 @@
-import { Link } from 'wouter';
+import Link from '../../components/Link';
 
-import usePage from '../../hooks/usePage';
 import Store from '../../store';
-import * as actions from '../../store/actions';
 import * as selectors from '../../store/selectors';
 
-import Content from '../ui/Content';
-import List from '../ui/List';
 import VirtualScroll from '../ui/VirtualScroll';
+import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/react';
 
 const ListEntry = ({ list, ...props }) => (
   <Link href={`/lists/${list.id}`}>
@@ -33,17 +30,20 @@ const AllLists = ({ onSelect }) => {
   );
 };
 
-const Lists = ({ selected }) => {
-  usePage({
-    title: 'Lists',
-  });
-
+const Lists = ({ selected, ...props }) => {
   return (
-    <Content className="p-4 dark:bg-black">
-      <List className="h-full w-full">
-        <AllLists />
-      </List>
-    </Content>
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Lists</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent>
+        <List className="h-full w-full">
+          <AllLists />
+        </List>
+      </IonContent>
+    </IonPage>
   );
 };
 

components/pages/Settings.jsx

@@ -1,38 +1,23 @@
 import Store from '../../store';
 import * as selectors from '../../store/selectors';
-import * as actions from '../../store/actions';
-
-import Content from '../ui/Content';
-import List from '../ui/List';
-import ListItem from '../ui/ListItem';
-import Toggle from '../ui/Toggle';
-import usePage from '../../hooks/usePage';
-
-const Settings = ({ selected }) => {
-  usePage({
-    title: 'Settings',
-  });
 
+const Settings = () => {
   const enableNotifications = Store.useState();
   const settings = Store.useState(selectors.getSettings);
 
   return (
-    <Content className="p-4 dark:bg-black">
-      <List>
-        <ListItem className="flex">
-          <span className="text-md flex-1 dark:text-gray-200">Enable Notifications</span>
-          <Toggle
-            checked={settings.enableNotifications}
-            onChange={e =>
-              actions.setSettings({
-                ...settings,
-                enableNotifications: e.target.checked,
-              })
-            }
-          />
-        </ListItem>
-      </List>
-    </Content>
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Settings</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent>
+        <List className="h-full w-full">
+          <AllLists />
+        </List>
+      </IonContent>
+    </IonPage>
   );
 };
 

components/pages/Tabs.jsx

@@ -0,0 +1,47 @@
+import { Redirect, Route } from 'react-router-dom';
+import {
+  IonApp,
+  IonRouterOutlet,
+  IonTabs,
+  IonTabBar,
+  IonTabButton,
+  IonIcon,
+  IonLabel,
+} from '@ionic/react';
+import { IonReactRouter } from '@ionic/react-router';
+import { ellipse, square, triangle } from 'ionicons/icons';
+
+import Home from './Home';
+import Lists from './Lists';
+import Settings from './Settings';
+
+const Tabs = () => {
+  return (
+    <IonReactRouter>
+      <IonTabs>
+        <IonRouterOutlet>
+          <Route path="/tabs/home" component={Home} exact={true} />
+          <Route path="/tabs/lists" component={Lists} exact={true} />
+          <Route path="/tabs/settings" component={Settings} exact={true} />
+          <Route path="/" render={() => <Redirect to="/tabs/home" />} exact={true} />
+        </IonRouterOutlet>
+        <IonTabBar slot="bottom">
+          <IonTabButton tab="tab1" href="/tabs/home">
+            <IonIcon icon={triangle} />
+            <IonLabel>Tab 1</IonLabel>
+          </IonTabButton>
+          <IonTabButton tab="tab2" href="/tabs/lists">
+            <IonIcon icon={ellipse} />
+            <IonLabel>Tab 2</IonLabel>
+          </IonTabButton>
+          <IonTabButton tab="tab3" href="/tabs/settings">
+            <IonIcon icon={square} />
+            <IonLabel>Tab 3</IonLabel>
+          </IonTabButton>
+        </IonTabBar>
+      </IonTabs>
+    </IonReactRouter>
+  );
+};
+
+export default Tabs;