Tab routing

components/pages/Lists.jsx

@@ -4,17 +4,22 @@ import Store from '../../store';
 import * as selectors from '../../store/selectors';
 
 import VirtualScroll from '../ui/VirtualScroll';
-import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/react';
+import {
+  IonPage,
+  IonHeader,
+  IonToolbar,
+  IonTitle,
+  IonContent,
+  IonList,
+  IonItem,
+  IonLabel,
+} from '@ionic/react';
+import { useEffect, useState } from 'react';
 
 const ListEntry = ({ list, ...props }) => (
-  <Link href={`/lists/${list.id}`}>
+  <IonItem href={`/tabs/lists/${list.id}`}>
-    <a
+    <IonLabel>{list.name}</IonLabel>
-      {...props}
+  </IonItem>
-      className="p-4 border-solid dark:border-gray-800 border-b cursor-pointer dark:text-gray-200 block"
-    >
-      <span className="text-md">{list.name}</span>
-    </a>
-  </Link>
 );
 
 const AllLists = ({ onSelect }) => {
@@ -30,7 +35,7 @@ const AllLists = ({ onSelect }) => {
   );
 };
 
-const Lists = ({ selected, ...props }) => {
+const Lists = () => {
   return (
     <IonPage>
       <IonHeader>
@@ -38,10 +43,13 @@ const Lists = ({ selected, ...props }) => {
           <IonTitle>Lists</IonTitle>
         </IonToolbar>
       </IonHeader>
-      <IonContent>
+      <IonContent fullscreen>
-        <List className="h-full w-full">
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Lists</IonTitle>
+          </IonToolbar>
+        </IonHeader>
         <AllLists />
-        </List>
       </IonContent>
     </IonPage>
   );

components/pages/Settings.jsx

@@ -1,6 +1,8 @@
 import Store from '../../store';
 import * as selectors from '../../store/selectors';
 
+import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonList } from '@ionic/react';
+
 const Settings = () => {
   const enableNotifications = Store.useState();
   const settings = Store.useState(selectors.getSettings);
@@ -13,9 +15,7 @@ const Settings = () => {
         </IonToolbar>
       </IonHeader>
       <IonContent>
-        <List className="h-full w-full">
+        <IonList></IonList>
-          <AllLists />
-        </List>
       </IonContent>
     </IonPage>
   );

components/ui/Tab.jsx

@@ -1,30 +0,0 @@
-import classNames from 'classnames';
-import Icon from './Icon';
-import Link from '../../components/Link';
-import { useEffect, useState } from 'react';
-
-const Tab = ({ title, href, icon, selected, selectedIcon, onClick }) => {
-  return (
-    <Link href={href}>
-      <a
-        onClick={onClick}
-        href="#"
-        className={classNames('px-6 rounded-md text-sm text-center font-medium cursor-pointer', {
-          'text-gray-500 dark:text-white': !selected,
-          'text-gray-800 dark:text-gray-600': selected,
-        })}
-      >
-        {icon && (
-          <Icon
-            icon={selected ? selectedIcon : icon}
-            className="cursor-pointer"
-            style={{ fontSize: '18px' }}
-          />
-        )}
-        <label className="block cursor-pointer">{title}</label>
-      </a>
-    </Link>
-  );
-};
-
-export default Tab;

components/ui/TabBar.jsx

@@ -1,13 +0,0 @@
-const TabBar = ({ children }) => (
-  <nav
-    id="tab-bar"
-    className="py-2 h-16 w-full flex justify-center items-start bg-gray-50 z-10 dark:bg-gray-800"
-    style={{
-      height: `calc(env(safe-area-inset-bottom, 0px) + 56px)`,
-    }}
-  >
-    {children}
-  </nav>
-);
-
-export default TabBar;

components/ui/Toggle.jsx

@@ -1,5 +0,0 @@
-import ReactToggle from 'react-toggle';
-
-const Toggle = props => <ReactToggle {...props} icons={false} />;
-
-export default Toggle;

package-lock.json

@@ -1663,12 +1663,6 @@
         }
       }
     },
-    "csstype": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.5.tgz",
-      "integrity": "sha512-uVDi8LpBUKQj6sdxNaTetL6FpeCqTjOvAQuQUa/qAqq8oOd4ivkbhgnqayl0dnPal8Tb/yB1tF+gOvCBiicaiQ==",
-      "dev": true
-    },
     "cyclist": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
@@ -1829,16 +1823,6 @@
         }
       }
     },
-    "dom-helpers": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.0.tgz",
-      "integrity": "sha512-Ru5o9+V8CpunKnz5LGgWXkmrH/20cGKwcHwS4m73zIvs54CN9epEmT/HLqFJW3kXpakAFkEdzgy1hzlJe3E4OQ==",
-      "dev": true,
-      "requires": {
-        "@babel/runtime": "^7.8.7",
-        "csstype": "^3.0.2"
-      }
-    },
     "dom-serializer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.0.1.tgz",
@@ -4588,37 +4572,6 @@
         "tiny-warning": "^1.0.0"
       }
     },
-    "react-spring": {
-      "version": "8.0.27",
-      "resolved": "https://registry.npmjs.org/react-spring/-/react-spring-8.0.27.tgz",
-      "integrity": "sha512-nDpWBe3ZVezukNRandTeLSPcwwTMjNVu1IDq9qA/AMiUqHuRN4BeSWvKr3eIxxg1vtiYiOLy4FqdfCP5IoP77g==",
-      "dev": true,
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "prop-types": "^15.5.8"
-      }
-    },
-    "react-toggle": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/react-toggle/-/react-toggle-4.1.1.tgz",
-      "integrity": "sha512-+wXlMcSpg8SmnIXauMaZiKpR+r2wp2gMUteroejp2UTSqGTVvZLN+m9EhMzFARBKEw7KpQOwzCyfzeHeAndQGw==",
-      "dev": true,
-      "requires": {
-        "classnames": "^2.2.5"
-      }
-    },
-    "react-transition-group": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
-      "integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==",
-      "dev": true,
-      "requires": {
-        "@babel/runtime": "^7.5.5",
-        "dom-helpers": "^5.0.1",
-        "loose-envify": "^1.4.0",
-        "prop-types": "^15.6.2"
-      }
-    },
     "react-use-gesture": {
       "version": "9.0.0-beta.11",
       "resolved": "https://registry.npmjs.org/react-use-gesture/-/react-use-gesture-9.0.0-beta.11.tgz",
@@ -6355,12 +6308,6 @@
         "errno": "~0.1.7"
       }
     },
-    "wouter": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/wouter/-/wouter-2.7.0.tgz",
-      "integrity": "sha512-+0KbaxtM8pcLZWH22oaatq1Rbtce+0KXnrGCjy/GSFPNs3pTyyL6nQoiPga+96LqO8SPnC8wy15jD7Ix/tZm1A==",
-      "dev": true
-    },
     "wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",

package.json

@@ -29,11 +29,7 @@
     "ionicons": "^5.2.3",
     "prettier": "^2.2.1",
     "pullstate": "^1.20.5",
-    "react-spring": "^8.0.27",
-    "react-toggle": "^4.1.1",
-    "react-transition-group": "^4.4.1",
     "react-use-gesture": "^9.0.0-beta.11",
-    "reselect": "^4.0.0",
+    "reselect": "^4.0.0"
-    "wouter": "^2.7.0"
   }
 }