Merge pull request #53 from mlynch/chore/typescript

Typescript FTW

components/pages/Feed.tsx

@@ -15,10 +15,19 @@ import {
 import Notifications from './Notifications';
 import { useState } from 'react';
 import { notificationsOutline } from 'ionicons/icons';
-import { getHomeItems } from '../../store/selectors';
+import { selectHomeItems } from '../../store/selectors';
 import Store from '../../store';
 
-const FeedCard = ({ title, type, text, author, authorAvatar, image }) => (
+type FeedCardProps = {
+  title: string;
+  type: string;
+  text: string;
+  author: string;
+  authorAvatar: string;
+  image: string;
+}
+
+const FeedCard = ({ title, type, text, author, authorAvatar, image }: FeedCardProps) => (
   <Card className="my-4 mx-auto">
     <div className="h-32 w-full relative">
       <img className="rounded-t-xl object-cover min-w-full min-h-full max-w-full max-h-full" src={image} alt="" />
@@ -38,7 +47,7 @@ const FeedCard = ({ title, type, text, author, authorAvatar, image }) => (
 );
 
 const Feed = () => {
-  const homeItems = Store.useState(getHomeItems);
+  const homeItems = Store.useState(selectHomeItems);
   const [showNotifications, setShowNotifications] = useState(false);
 
   return (

components/pages/ListDetail.tsx

@@ -16,8 +16,13 @@ import { useParams } from 'react-router-dom';
 import Store from '../../store';
 import * as actions from '../../store/actions';
 import * as selectors from '../../store/selectors';
+import { ListItem, TodoListItem } from '../../mock';
 
-const ListItems = ({ list }) => {
+type ListDetailParams = {
+  listId: string;
+};
+
+const ListItems = ({ list }: {list: TodoListItem}) => {
   return (
     <IonList>
       {(list?.items || []).map((item, key) => (
@@ -27,16 +32,16 @@ const ListItems = ({ list }) => {
   );
 };
 
-const ListItemEntry = ({ list, item }) => (
+const ListItemEntry = ({ list, item }: {list: TodoListItem, item: ListItem}) => (
   <IonItem onClick={() => actions.setDone(list, item, !item.done)}>
     <IonLabel>{item.name}</IonLabel>
     <IonCheckbox checked={item.done || false} slot="end" />
   </IonItem>
 );
 
-const ListDetail = ({ match }) => {
+const ListDetail = () => {
-  const lists = Store.useState(selectors.getLists);
+  const lists = Store.useState(selectors.selectLists);
-  const params = useParams();
+  const params = useParams<ListDetailParams>();
   const { listId } = params;
   const loadedList = lists.find(l => l.id === listId);
 
@@ -47,11 +52,11 @@ const ListDetail = ({ match }) => {
           <IonButtons slot="start">
             <IonBackButton defaultHref="/tabs/lists" />
           </IonButtons>
-          <IonTitle>{loadedList.name}</IonTitle>
+          <IonTitle>{loadedList?.name}</IonTitle>
         </IonToolbar>
       </IonHeader>
       <IonContent>
-        <ListItems list={loadedList} />
+        {loadedList && <ListItems list={loadedList} />}
       </IonContent>
     </IonPage>
   );

components/pages/Lists.tsx

@@ -1,3 +1,4 @@
+import { TodoListItem } from '../../mock';
 import Store from '../../store';
 import * as selectors from '../../store/selectors';
 
@@ -12,14 +13,14 @@ import {
   IonList,
 } from '@ionic/react';
 
-const ListEntry = ({ list, ...props }) => (
+const ListEntry = ({ list }: {list: TodoListItem}) => (
   <IonItem routerLink={`/tabs/lists/${list.id}`} className="list-entry">
     <IonLabel>{list.name}</IonLabel>
   </IonItem>
 );
 
-const AllLists = ({ onSelect }) => {
+const AllLists = () => {
-  const lists = Store.useState(selectors.getLists);
+  const lists = Store.useState(selectors.selectLists);
 
   return (
     <>

components/pages/Notifications.tsx

@@ -12,11 +12,12 @@ import {
   IonLabel,
 } from '@ionic/react';
 import Store from '../../store';
-import { getNotifications } from '../../store/selectors';
+import { selectNotifications } from '../../store/selectors';
 
 import { close } from 'ionicons/icons';
+import { NotificationItem } from '../../mock';
 
-const NotificationItem = ({ notification }) => (
+const NotificationItem = ({ notification }: {notification: NotificationItem}) => (
   <IonItem>
     <IonLabel>{notification.title}</IonLabel>
     <IonNote slot="end">{notification.when}</IonNote>
@@ -26,8 +27,8 @@ const NotificationItem = ({ notification }) => (
   </IonItem>
 );
 
-const Notifications = ({ open, onDidDismiss }) => {
+const Notifications = ({ open, onDidDismiss }: {open: boolean, onDidDismiss: () => void}) => {
-  const notifications = Store.useState(getNotifications);
+  const notifications = Store.useState(selectNotifications);
 
   return (
     <IonModal isOpen={open} onDidDismiss={onDidDismiss}>

components/pages/Settings.tsx

@@ -15,7 +15,7 @@ import * as selectors from '../../store/selectors';
 import { setSettings } from '../../store/actions';
 
 const Settings = () => {
-  const settings = Store.useState(selectors.getSettings);
+  const settings = Store.useState(selectors.selectSettings);
 
   return (
     <IonPage>

components/ui/Card.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 
-const Card = ({ children, className, ...props }) => (
+const Card = ({ children, className }: {children: React.ReactElement[], className: string}) => (
-  <div {...props} className={classNames('max-w-xl', className)}>
+  <div className={classNames('max-w-xl', className)}>
     <div className="bg-white shadow-md rounded-b-xl dark:bg-black">{children}</div>
   </div>
 );

mock/index.ts

@@ -4,8 +4,19 @@ export const images = [
   '/img/c3.avif',
 ];
 
-export const homeItems = [
+export type HomeItem = {
+  id: number;
+  title: string;
+  type: string;
+  text: string;
+  author: string;
+  authorAvatar: string;
+  image: string;
+};
+
+export const homeItems: HomeItem[] = [
   {
+    id: 1,
     title: 'Exploring Maui',
     type: 'Blog',
     text: 'We just got back from a trip to Maui, and we had a great time...',
@@ -14,6 +25,7 @@ export const homeItems = [
     image: images[0],
   },
   {
+    id: 2,
     title: 'Arctic Adventures',
     type: 'Blog',
     text:
@@ -23,6 +35,7 @@ export const homeItems = [
     image: images[1],
   },
   {
+    id: 3,
     title: 'Frolicking in the Faroe Islands',
     type: 'Blog',
     text:
@@ -33,15 +46,32 @@ export const homeItems = [
   },
 ];
 
-export const notifications = [
+export type NotificationItem = {
-  { title: 'New friend request', when: '6 hr' },
+  id: number;
-  { title: 'Please change your password', when: '1 day' },
+  title: string;
-  { title: 'You have a new message', when: '2 weeks' },
+  when: string;
-  { title: 'Welcome to the app!', when: '1 month' },
+};
+
+export const notifications: NotificationItem[] = [
+  { id: 1, title: 'New friend request', when: '6 hr' },
+  { id: 2, title: 'Please change your password', when: '1 day' },
+  { id: 3, title: 'You have a new message', when: '2 weeks' },
+  { id: 4, title: 'Welcome to the app!', when: '1 month' },
 ];
 
+export type ListItem = {
+  name: string;
+  done?: boolean;
+}
+
+export type TodoListItem = {
+  name: string;
+  id: string;
+  items?: ListItem[];
+}
+
 // Some fake lists
-export const lists = [
+export const lists: TodoListItem[] = [
   {
     name: 'Groceries',
     id: 'groceries',
@@ -60,3 +90,11 @@ export const lists = [
   { name: 'Work', id: 'work', items: [{ name: 'TPS Report' }, { name: 'Set up email' }] },
   { name: 'Reminders', id: 'reminders' },
 ];
+
+export type Settings = {
+  enableNotifications: boolean;
+}
+
+export const settings: Settings = {
+  enableNotifications: true,
+}

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

package-lock.json

@@ -20,7 +20,7 @@
         "@types/react-dom": "^18.0.6",
         "@types/react-router": "^5.1.11",
         "@types/react-router-dom": "^5.1.7",
-        "classnames": "^2.2.6",
+        "classnames": "^2.5.1",
         "next": "^13.2.4",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -38,8 +38,9 @@
         "prettier": "^2.2.1",
         "pullstate": "1.24",
         "react-use-gesture": "^9.1.3",
-        "reselect": "^4.0.0",
+        "reselect": "^5.1.0",
-        "tailwindcss": "^3.2.0"
+        "tailwindcss": "^3.2.0",
+        "typescript": "^5.3.3"
       },
       "engines": {
         "node": ">=12"
@@ -97,15 +98,15 @@
       }
     },
     "node_modules/@capacitor/cli": {
-      "version": "4.3.0",
+      "version": "4.8.1",
-      "resolved": "https://registry.npmjs.org/@capacitor/cli/-/cli-4.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/@capacitor/cli/-/cli-4.8.1.tgz",
-      "integrity": "sha512-+IBIJvxpHWSrtfb6XxPSh5m5h5ijLBqh0aGPxvj0nm7mXUwkT/fuQbeEUVCwIoImmYZCuUAFIkQFB0nWd74bEg==",
+      "integrity": "sha512-Ssxh+YaMuP+ZHJYaRJ78NCxS5L+u3X3XWK+NGhe+aluRZDigK5LJIiqjp+K3Xx1zQBG62gWWCEZoDvXJvafPIw==",
       "dev": true,
       "dependencies": {
-        "@ionic/cli-framework-output": "^2.2.5",
+        "@ionic/cli-framework-output": "2.2.5",
-        "@ionic/utils-fs": "^3.1.6",
+        "@ionic/utils-fs": "3.1.6",
-        "@ionic/utils-subprocess": "^2.1.11",
+        "@ionic/utils-subprocess": "2.1.11",
-        "@ionic/utils-terminal": "^2.3.3",
+        "@ionic/utils-terminal": "2.3.3",
         "commander": "^9.3.0",
         "debug": "^4.3.4",
         "env-paths": "^2.2.0",
@@ -118,7 +119,7 @@
         "semver": "^7.3.7",
         "tar": "^6.1.11",
         "tslib": "^2.4.0",
-        "xml2js": "^0.4.23"
+        "xml2js": "^0.5.0"
       },
       "bin": {
         "cap": "bin/capacitor",
@@ -528,9 +529,9 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "13.2.4",
+      "version": "13.5.6",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-13.2.4.tgz",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-13.5.6.tgz",
-      "integrity": "sha512-+Mq3TtpkeeKFZanPturjcXt+KHfKYnLlX6jMLyCrmpq6OOs4i1GqBOAauSkii9QeKCMTYzGppar21JU57b/GEA=="
+      "integrity": "sha512-Yac/bV5sBGkkEXmAX5FWPS9Mmo2rthrOPRQQNfycJPkjUAUclomCPH7QFVCDQ4Mp2k2K1SSM6m0zrxYrOwtFQw=="
     },
     "node_modules/@next/eslint-plugin-next": {
       "version": "13.2.4",
@@ -541,10 +542,130 @@
         "glob": "7.1.7"
       }
     },
+    "node_modules/@next/swc-darwin-arm64": {
+      "version": "13.5.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.5.6.tgz",
+      "integrity": "sha512-5nvXMzKtZfvcu4BhtV0KH1oGv4XEW+B+jOfmBdpFI3C7FrB/MfujRpWYSBBO64+qbW8pkZiSyQv9eiwnn5VIQA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "13.5.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.5.6.tgz",
+      "integrity": "sha512-6cgBfxg98oOCSr4BckWjLLgiVwlL3vlLj8hXg2b+nDgm4bC/qVXXLfpLB9FHdoDu4057hzywbxKvmYGmi7yUzA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "13.5.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.5.6.tgz",
+      "integrity": "sha512-txagBbj1e1w47YQjcKgSU4rRVQ7uF29YpnlHV5xuVUsgCUf2FmyfJ3CPjZUvpIeXCJAoMCFAoGnbtX86BK7+sg==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "13.5.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.5.6.tgz",
+      "integrity": "sha512-cGd+H8amifT86ZldVJtAKDxUqeFyLWW+v2NlBULnLAdWsiuuN8TuhVBt8ZNpCqcAuoruoSWynvMWixTFcroq+Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "13.5.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.5.6.tgz",
+      "integrity": "sha512-Mc2b4xiIWKXIhBy2NBTwOxGD3nHLmq4keFk+d4/WL5fMsB8XdJRdtUlL87SqVCTSaf1BRuQQf1HvXZcy+rq3Nw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "13.5.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.5.6.tgz",
+      "integrity": "sha512-CFHvP9Qz98NruJiUnCe61O6GveKKHpJLloXbDSWRhqhkJdZD2zU5hG+gtVJR//tyW897izuHpM6Gtf6+sNgJPQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "13.5.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.5.6.tgz",
+      "integrity": "sha512-aFv1ejfkbS7PUa1qVPwzDHjQWQtknzAZWGTKYIAaS4NMtBlk3VyA6AYn593pqNanlicewqyl2jUhQAaFV/qXsg==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-ia32-msvc": {
+      "version": "13.5.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.5.6.tgz",
+      "integrity": "sha512-XqqpHgEIlBHvzwG8sp/JXMFkLAfGLqkbVsyN+/Ih1mR8INb6YCc2x/Mbwi6hsAgUnqQztz8cvEbHJUbSl7RHDg==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "13.2.4",
+      "version": "13.5.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.2.4.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.5.6.tgz",
-      "integrity": "sha512-0MffFmyv7tBLlji01qc0IaPP/LVExzvj7/R5x1Jph1bTAIj4Vu81yFQWHHQAP6r4ff9Ukj1mBK6MDNVXm7Tcvw==",
+      "integrity": "sha512-Cqfe1YmOS7k+5mGu92nl5ULkzpKuxJrP3+4AEuPmrpFZ3BHxTY3TnHmU1On3bFmFFs6FbTcdF58CCUProGpIGQ==",
       "cpu": [
         "x64"
       ],
@@ -636,17 +757,17 @@
       }
     },
     "node_modules/@swc/helpers": {
-      "version": "0.4.14",
+      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.14.tgz",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.2.tgz",
-      "integrity": "sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw==",
+      "integrity": "sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==",
       "dependencies": {
         "tslib": "^2.4.0"
       }
     },
     "node_modules/@swc/helpers/node_modules/tslib": {
-      "version": "2.5.0",
+      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
     },
     "node_modules/@types/fs-extra": {
       "version": "8.1.2",
@@ -1321,6 +1442,17 @@
         "node": "*"
       }
     },
+    "node_modules/busboy": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
+      "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
+      "dependencies": {
+        "streamsearch": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=10.16.0"
+      }
+    },
     "node_modules/call-bind": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
@@ -1430,9 +1562,9 @@
       }
     },
     "node_modules/classnames": {
-      "version": "2.2.6",
+      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
-      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
     },
     "node_modules/client-only": {
       "version": "0.0.1",
@@ -2083,9 +2215,9 @@
       }
     },
     "node_modules/eslint-plugin-import/node_modules/semver": {
-      "version": "6.3.0",
+      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
       "dev": true,
       "bin": {
         "semver": "bin/semver.js"
@@ -2128,9 +2260,9 @@
       "dev": true
     },
     "node_modules/eslint-plugin-jsx-a11y/node_modules/semver": {
-      "version": "6.3.0",
+      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
       "dev": true,
       "bin": {
         "semver": "bin/semver.js"
@@ -2216,9 +2348,9 @@
       }
     },
     "node_modules/eslint-plugin-react/node_modules/semver": {
-      "version": "6.3.0",
+      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
       "dev": true,
       "bin": {
         "semver": "bin/semver.js"
@@ -2745,6 +2877,11 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/glob-to-regexp": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
+      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw=="
+    },
     "node_modules/globals": {
       "version": "13.9.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-13.9.0.tgz",
@@ -2843,8 +2980,7 @@
     "node_modules/graceful-fs": {
       "version": "4.2.4",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz",
-      "integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==",
+      "integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw=="
-      "dev": true
     },
     "node_modules/has": {
       "version": "1.0.3",
@@ -3710,9 +3846,15 @@
       "dev": true
     },
     "node_modules/nanoid": {
-      "version": "3.3.4",
+      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -3758,41 +3900,37 @@
       "dev": true
     },
     "node_modules/next": {
-      "version": "13.2.4",
+      "version": "13.5.6",
-      "resolved": "https://registry.npmjs.org/next/-/next-13.2.4.tgz",
+      "resolved": "https://registry.npmjs.org/next/-/next-13.5.6.tgz",
-      "integrity": "sha512-g1I30317cThkEpvzfXujf0O4wtaQHtDCLhlivwlTJ885Ld+eOgcz7r3TGQzeU+cSRoNHtD8tsJgzxVdYojFssw==",
+      "integrity": "sha512-Y2wTcTbO4WwEsVb4A8VSnOsG1I9ok+h74q0ZdxkwM3EODqrs4pasq7O0iUxbcS9VtWMicG7f3+HAj0r1+NtKSw==",
       "dependencies": {
-        "@next/env": "13.2.4",
+        "@next/env": "13.5.6",
-        "@swc/helpers": "0.4.14",
+        "@swc/helpers": "0.5.2",
+        "busboy": "1.6.0",
         "caniuse-lite": "^1.0.30001406",
-        "postcss": "8.4.14",
+        "postcss": "8.4.31",
-        "styled-jsx": "5.1.1"
+        "styled-jsx": "5.1.1",
+        "watchpack": "2.4.0"
       },
       "bin": {
         "next": "dist/bin/next"
       },
       "engines": {
-        "node": ">=14.6.0"
+        "node": ">=16.14.0"
       },
       "optionalDependencies": {
-        "@next/swc-android-arm-eabi": "13.2.4",
+        "@next/swc-darwin-arm64": "13.5.6",
-        "@next/swc-android-arm64": "13.2.4",
+        "@next/swc-darwin-x64": "13.5.6",
-        "@next/swc-darwin-arm64": "13.2.4",
+        "@next/swc-linux-arm64-gnu": "13.5.6",
-        "@next/swc-darwin-x64": "13.2.4",
+        "@next/swc-linux-arm64-musl": "13.5.6",
-        "@next/swc-freebsd-x64": "13.2.4",
+        "@next/swc-linux-x64-gnu": "13.5.6",
-        "@next/swc-linux-arm-gnueabihf": "13.2.4",
+        "@next/swc-linux-x64-musl": "13.5.6",
-        "@next/swc-linux-arm64-gnu": "13.2.4",
+        "@next/swc-win32-arm64-msvc": "13.5.6",
-        "@next/swc-linux-arm64-musl": "13.2.4",
+        "@next/swc-win32-ia32-msvc": "13.5.6",
-        "@next/swc-linux-x64-gnu": "13.2.4",
+        "@next/swc-win32-x64-msvc": "13.5.6"
-        "@next/swc-linux-x64-musl": "13.2.4",
-        "@next/swc-win32-arm64-msvc": "13.2.4",
-        "@next/swc-win32-ia32-msvc": "13.2.4",
-        "@next/swc-win32-x64-msvc": "13.2.4"
       },
       "peerDependencies": {
-        "@opentelemetry/api": "^1.4.0",
+        "@opentelemetry/api": "^1.1.0",
-        "fibers": ">= 3.1.0",
-        "node-sass": "^6.0.0 || ^7.0.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "sass": "^1.3.0"
@@ -3801,40 +3939,11 @@
         "@opentelemetry/api": {
           "optional": true
         },
-        "fibers": {
-          "optional": true
-        },
-        "node-sass": {
-          "optional": true
-        },
         "sass": {
           "optional": true
         }
       }
     },
-    "node_modules/next/node_modules/postcss": {
-      "version": "8.4.14",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
-      "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/postcss"
-        }
-      ],
-      "dependencies": {
-        "nanoid": "^3.3.4",
-        "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14"
-      }
-    },
     "node_modules/node-releases": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.6.tgz",
@@ -4132,10 +4241,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.18",
+      "version": "8.4.31",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.18.tgz",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
-      "integrity": "sha512-Wi8mWhncLJm11GATDaQKobXSNEYGUHeQLiQqDFG1qQ5UTDPTEvKw0Xt5NsTpktGTwLps3ByrWsBrG0rB8YQ9oA==",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -4144,10 +4252,14 @@
         {
           "type": "tidelift",
           "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
       ],
       "dependencies": {
-        "nanoid": "^3.3.4",
+        "nanoid": "^3.3.6",
         "picocolors": "^1.0.0",
         "source-map-js": "^1.0.2"
       },
@@ -4634,9 +4746,9 @@
       }
     },
     "node_modules/reselect": {
-      "version": "4.0.0",
+      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.0.tgz",
-      "integrity": "sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA==",
+      "integrity": "sha512-aw7jcGLDpSgNDyWBQLv2cedml85qd95/iszJjN988zX1t7AVRJi19d9kto5+W7oCfQ94gyo40dVbT6g2k4/kXg==",
       "dev": true
     },
     "node_modules/resize-observer-polyfill": {
@@ -4772,9 +4884,9 @@
       }
     },
     "node_modules/semver": {
-      "version": "7.3.7",
+      "version": "7.6.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",
-      "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
+      "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -4892,15 +5004,6 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true
     },
-    "node_modules/slice-ansi/node_modules/is-fullwidth-code-point": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/source-map-js": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
@@ -4936,6 +5039,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/streamsearch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
+      "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/string_decoder": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
@@ -5350,17 +5461,16 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.0.3",
+      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",
-      "integrity": "sha512-xv8mOEDnigb/tN9PSMTwSEqAnUvkoXMQlicOb0IUVDBSQCgBSaAAROUZYy2IcUy5qU6XajK5jjjO7TMWqBTKZA==",
+      "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==",
       "dev": true,
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
       },
       "engines": {
-        "node": ">=12.20"
+        "node": ">=14.17"
       }
     },
     "node_modules/unbox-primitive": {
@@ -5448,6 +5558,18 @@
       "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
       "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
     },
+    "node_modules/watchpack": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
+      "integrity": "sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==",
+      "dependencies": {
+        "glob-to-regexp": "^0.4.1",
+        "graceful-fs": "^4.1.2"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/whatwg-fetch": {
       "version": "3.5.0",
       "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.5.0.tgz",
@@ -5520,9 +5642,9 @@
       }
     },
     "node_modules/word-wrap": {
-      "version": "1.2.3",
+      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
-      "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
+      "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
       "dev": true,
       "engines": {
         "node": ">=0.10.0"
@@ -5585,9 +5707,9 @@
       "dev": true
     },
     "node_modules/xml2js": {
-      "version": "0.4.23",
+      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.23.tgz",
+      "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.5.0.tgz",
-      "integrity": "sha512-ySPiMjM0+pLDftHgXY4By0uswI3SPKLDw/i3UXbnO8M/p28zqexCUoPmQFrYD+/1BzhGJSs2i1ERWKJAtiLrug==",
+      "integrity": "sha512-drPFnkQJik/O+uPKpqSgr22mpuFHqKdbS835iAQrUC73L2F5WkboIRd63ai/2Yg6I1jzifPFKH2NTK+cfglkIA==",
       "dev": true,
       "dependencies": {
         "sax": ">=0.6.0",
@@ -5648,186 +5770,6 @@
         "buffer-crc32": "~0.2.3",
         "fd-slicer": "~1.1.0"
       }
-    },
-    "node_modules/@next/swc-android-arm-eabi": {
-      "version": "13.2.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-13.2.4.tgz",
-      "integrity": "sha512-DWlalTSkLjDU11MY11jg17O1gGQzpRccM9Oes2yTqj2DpHndajrXHGxj9HGtJ+idq2k7ImUdJVWS2h2l/EDJOw==",
-      "cpu": [
-        "arm"
-      ],
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-android-arm64": {
-      "version": "13.2.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-13.2.4.tgz",
-      "integrity": "sha512-sRavmUImUCf332Gy+PjIfLkMhiRX1Ez4SI+3vFDRs1N5eXp+uNzjFUK/oLMMOzk6KFSkbiK/3Wt8+dHQR/flNg==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-darwin-arm64": {
-      "version": "13.2.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.2.4.tgz",
-      "integrity": "sha512-S6vBl+OrInP47TM3LlYx65betocKUUlTZDDKzTiRDbsRESeyIkBtZ6Qi5uT2zQs4imqllJznVjFd1bXLx3Aa6A==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-darwin-x64": {
-      "version": "13.2.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.2.4.tgz",
-      "integrity": "sha512-a6LBuoYGcFOPGd4o8TPo7wmv5FnMr+Prz+vYHopEDuhDoMSHOnC+v+Ab4D7F0NMZkvQjEJQdJS3rqgFhlZmKlw==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-freebsd-x64": {
-      "version": "13.2.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-freebsd-x64/-/swc-freebsd-x64-13.2.4.tgz",
-      "integrity": "sha512-kkbzKVZGPaXRBPisoAQkh3xh22r+TD+5HwoC5bOkALraJ0dsOQgSMAvzMXKsN3tMzJUPS0tjtRf1cTzrQ0I5vQ==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-arm-gnueabihf": {
-      "version": "13.2.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-13.2.4.tgz",
-      "integrity": "sha512-7qA1++UY0fjprqtjBZaOA6cas/7GekpjVsZn/0uHvquuITFCdKGFCsKNBx3S0Rpxmx6WYo0GcmhNRM9ru08BGg==",
-      "cpu": [
-        "arm"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "13.2.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.2.4.tgz",
-      "integrity": "sha512-xzYZdAeq883MwXgcwc72hqo/F/dwUxCukpDOkx/j1HTq/J0wJthMGjinN9wH5bPR98Mfeh1MZJ91WWPnZOedOg==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "13.2.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.2.4.tgz",
-      "integrity": "sha512-8rXr3WfmqSiYkb71qzuDP6I6R2T2tpkmf83elDN8z783N9nvTJf2E7eLx86wu2OJCi4T05nuxCsh4IOU3LQ5xw==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "13.2.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.2.4.tgz",
-      "integrity": "sha512-Ngxh51zGSlYJ4EfpKG4LI6WfquulNdtmHg1yuOYlaAr33KyPJp4HeN/tivBnAHcZkoNy0hh/SbwDyCnz5PFJQQ==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-x64-musl": {
-      "version": "13.2.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.2.4.tgz",
-      "integrity": "sha512-gOvwIYoSxd+j14LOcvJr+ekd9fwYT1RyMAHOp7znA10+l40wkFiMONPLWiZuHxfRk+Dy7YdNdDh3ImumvL6VwA==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "13.2.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.2.4.tgz",
-      "integrity": "sha512-q3NJzcfClgBm4HvdcnoEncmztxrA5GXqKeiZ/hADvC56pwNALt3ngDC6t6qr1YW9V/EPDxCYeaX4zYxHciW4Dw==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "13.2.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.2.4.tgz",
-      "integrity": "sha512-/eZ5ncmHUYtD2fc6EUmAIZlAJnVT2YmxDsKs1Ourx0ttTtvtma/WKlMV5NoUsyOez0f9ExLyOpeCoz5aj+MPXw==",
-      "cpu": [
-        "ia32"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
     }
   }
 }

package.json

@@ -24,7 +24,7 @@
     "@types/react-dom": "^18.0.6",
     "@types/react-router": "^5.1.11",
     "@types/react-router-dom": "^5.1.7",
-    "classnames": "^2.2.6",
+    "classnames": "^2.5.1",
     "next": "^13.2.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -42,7 +42,8 @@
     "prettier": "^2.2.1",
     "pullstate": "1.24",
     "react-use-gesture": "^9.1.3",
-    "reselect": "^4.0.0",
+    "reselect": "^5.1.0",
-    "tailwindcss": "^3.2.0"
+    "tailwindcss": "^3.2.0",
+    "typescript": "^5.3.3"
   }
 }

pages/_app.tsx

@@ -1,5 +1,6 @@
 import Head from 'next/head';
 import Script from 'next/script';
+import { AppProps } from 'next/app'
 import { setupIonicReact } from '@ionic/react';
 
 import 'tailwindcss/tailwind.css';
@@ -22,7 +23,7 @@ import '@ionic/react/css/display.css';
 import '../styles/global.css';
 import '../styles/variables.css';
 
-function MyApp({ Component, pageProps }) {
+function MyApp({ Component, pageProps }: AppProps) {
   return (
     <>
       <Head>
@@ -36,7 +37,7 @@ function MyApp({ Component, pageProps }) {
         type="module"
         src="https://unpkg.com/ionicons@5.2.3/dist/ionicons/ionicons.esm.js"
       ></Script>
-      <Script nomodule="" src="https://unpkg.com/ionicons@5.2.3/dist/ionicons/ionicons.js"></Script>
+      <Script noModule src="https://unpkg.com/ionicons@5.2.3/dist/ionicons/ionicons.js"></Script>
     </>
   );
 }

store/actions.js

@@ -1,32 +0,0 @@
-import Store from '.';
-
-export const setMenuOpen = open => {
-  Store.update(s => {
-    s.menuOpen = open;
-  });
-};
-
-export const setNotificationsOpen = open => {
-  Store.update(s => {
-    s.notificationsOpen = open;
-  });
-};
-
-export const setSettings = settings => {
-  Store.update(s => {
-    s.settings = settings;
-  });
-};
-
-// App-specific actions
-
-export const setDone = (list, item, done) => {
-  Store.update((s, o) => {
-    const listIndex = o.lists.findIndex(l => l === list);
-    const itemIndex = o.lists[listIndex].items.findIndex(i => i === item);
-    s.lists[listIndex].items[itemIndex].done = done;
-    if (list === o.selectedList) {
-      s.selectedList = s.lists[listIndex];
-    }
-  });
-};

store/actions.ts

@@ -0,0 +1,36 @@
+import Store from '.';
+import { ListItem, Settings, TodoListItem } from '../mock';
+
+export const setMenuOpen = (open: boolean) => {
+  Store.update(s => {
+    s.menuOpen = open;
+  });
+};
+
+export const setNotificationsOpen = (open: boolean) => {
+  Store.update(s => {
+    s.notificationsOpen = open;
+  });
+};
+
+export const setSettings = (settings: Settings) => {
+  Store.update(s => {
+    s.settings = settings;
+  });
+};
+
+// App-specific actions
+
+export const setDone = (list: TodoListItem, item: ListItem, done: boolean) => {
+  Store.update((s, o) => {
+    const listIndex = o.lists.findIndex(l => l === list);
+    const items = o.lists[listIndex].items;
+    if(!items) return;
+    const itemIndex = items.findIndex(i => i === item);
+    const item = items[itemIndex];
+    item.done = done;
+    if (list === o.selectedList) {
+      s.selectedList = s.lists[listIndex];
+    }
+  });
+};

store/index.js

@@ -1,19 +0,0 @@
-import { Store as PullStateStore } from 'pullstate';
-
-import { lists, homeItems, notifications } from '../mock';
-
-const Store = new PullStateStore({
-  safeAreaTop: 0,
-  safeAreaBottom: 0,
-  menuOpen: false,
-  notificationsOpen: false,
-  currentPage: null,
-  homeItems,
-  lists,
-  notifications,
-  settings: {
-    enableNotifications: true,
-  },
-});
-
-export default Store;

store/index.ts

@@ -0,0 +1,31 @@
+import { Store as PullStateStore } from 'pullstate';
+
+import { lists, homeItems, notifications, settings, TodoListItem, HomeItem, NotificationItem, Settings } from '../mock';
+
+type StoreProps = {
+  safeAreaTop: number;
+  safeAreaBottom: number;
+  menuOpen: boolean;
+  notificationsOpen: boolean;
+  currentPage: number | null;
+  homeItems: HomeItem[];
+  lists: TodoListItem[];
+  notifications: NotificationItem[];
+  settings: Settings;
+  selectedList: TodoListItem | undefined;
+}
+
+const Store = new PullStateStore<StoreProps>({
+  safeAreaTop: 0,
+  safeAreaBottom: 0,
+  menuOpen: false,
+  notificationsOpen: false,
+  currentPage: null,
+  homeItems,
+  lists,
+  notifications,
+  settings,
+  selectedList: undefined,
+});
+
+export default Store;

store/selectors.js

@@ -1,8 +0,0 @@
-import { createSelector } from 'reselect';
-
-const getState = state => state;
-
-export const getHomeItems = createSelector(getState, state => state.homeItems);
-export const getLists = createSelector(getState, state => state.lists);
-export const getNotifications = createSelector(getState, state => state.notifications);
-export const getSettings = createSelector(getState, state => state.settings);

store/selectors.ts

@@ -0,0 +1,39 @@
+import { createSelector } from 'reselect';
+import { HomeItem, NotificationItem, Settings, TodoListItem } from '../mock';
+
+export interface RootState {
+    homeItems: HomeItem[]
+    lists: TodoListItem[]
+    notifications: NotificationItem[]
+    settings: Settings
+  }
+  
+export const createAppSelector = createSelector.withTypes<RootState>()
+
+export const selectHomeItems = createAppSelector(
+    [
+      state => state.homeItems
+    ],
+    homeItems => homeItems
+  )
+
+export const selectLists = createAppSelector(
+    [
+        state => state.lists
+    ],
+    lists => lists
+)
+
+export const selectNotifications = createAppSelector(
+    [
+        state => state.notifications
+    ],
+    notifications => notifications
+)
+
+export const selectSettings = createAppSelector(
+    [
+        state => state.settings
+    ],
+    settings => settings
+)

tsconfig.json

@@ -0,0 +1,38 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "Next.js",
+  "_version": "2.0.0",
+  "compilerOptions": {
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}