Refactor state and make list detail a page

store/actions.js

@@ -1,5 +1,31 @@
 import Store from '.';
 
+export const setPageById = id => {
+  Store.update((s, o) => {
+    s.currentPage = o.pages.find(p => p.id === id);
+  });
+};
+
+export const setPage = page => {
+  Store.update((s, o) => {
+    s.currentPage = page;
+  });
+};
+
+export const setMenuOpen = open => {
+  Store.update(s => {
+    s.menuOpen = open;
+  });
+};
+
+export const setNotificationsOpen = open => {
+  Store.update(s => {
+    s.notificationsOpen = open;
+  });
+};
+
+// App-specific actions
+
 export const setDone = (list, item, done) => {
   Store.update((s, o) => {
     const listIndex = o.lists.findIndex(l => l === list);
@@ -10,3 +36,9 @@ export const setDone = (list, item, done) => {
     }
   });
 };
+
+export const setSelectedList = list => {
+  Store.update(s => {
+    s.selectedList = list;
+  });
+};

store/index.js

@@ -5,6 +5,7 @@ import { list, listOutline, cog, cogOutline, home, homeOutline } from 'ionicons/
 import Home from '../components/pages/Home';
 import Lists from '../components/pages/Lists';
 import Settings from '../components/pages/Settings';
+import ListDetail from '../components/pages/ListDetail';
 
 // The available pages here
 const pages = [
@@ -16,6 +17,13 @@ const pages = [
     selectedIcon: list,
     component: Lists,
   },
+  {
+    id: 'list-detail',
+    title: () => Store.getRawState().selectedList?.name,
+    icon: listOutline,
+    selectedIcon: list,
+    component: ListDetail,
+  },
   {
     id: 'settings',
     title: 'Settings',
@@ -81,10 +89,16 @@ const lists = [
 const Store = new PullStateStore({
   safeAreaTop: 0,
   safeAreaBottom: 0,
-  showMenu: false,
-  showNotifications: false,
+  menuOpen: false,
+  notificationsOpen: false,
   currentPage: pages[0],
   pages,
+
+  // The pages that are linked to tabs
+  tabs: pages.filter(p => ['home', 'lists', 'settings'].indexOf(p.id) >= 0),
+  // The pages that are linked to the menu
+  menuLinks: pages.filter(p => ['home', 'lists', 'settings'].indexOf(p.id) >= 0),
+
   homeItems,
   lists,
   selectedList: null,

store/selectors.js

@@ -0,0 +1,15 @@
+import { createSelector } from 'reselect';
+
+const getState = state => state;
+
+export const getMenuOpen = createSelector(getState, state => state.menuOpen);
+export const getNotificationsOpen = createSelector(getState, state => state.notificationsOpen);
+export const getCurrentPage = createSelector(getState, state => state.currentPage);
+export const getTabs = createSelector(getState, state => state.tabs);
+export const getMenuLinks = createSelector(getState, state => state.menuLinks);
+export const getPages = createSelector(getState, state => state.pages);
+
+// App specific selectors
+export const getHomeItems = createSelector(getState, state => state.homeItems);
+export const getLists = createSelector(getState, state => state.lists);
+export const getSelectedList = createSelector(getState, state => state.selectedList);