Soverein/sanasto-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Moving to more workable v1 solution

Browse Source
This commit is contained in:
Max Lynch
2021-01-09 10:52:20 -06:00
parent 6a14c1c47a
commit ba42e4d6d8
22 changed files with 288 additions and 291 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/AppShell.jsx
+12 -126
View File
@@ -1,133 +1,19 @@
import { useCallback, useEffect, useState } from 'react'; import { IonApp, IonRouterOutlet } from '@ionic/react';
import { useDrag } from 'react-use-gesture'; import { IonReactRouter } from '@ionic/react-router';
import { Router, Route, Switch, useRoute } from 'wouter'; import { Redirect, Route } from 'react-router-dom';
import { cog, cogOutline, home, homeOutline, list, listOutline } from 'ionicons/icons';
import Store from '../store'; import Tabs from './pages/Tabs';
import * as actions from '../store/actions';
import * as selectors from '../store/selectors';
import App from '../components/ui/App';
import Backdrop from '../components/ui/Backdrop';
import Menu from '../components/ui/Menu';
import Modal from '../components/ui/Modal';
import Nav from '../components/ui/Nav';
import PageStack from '../components/ui/PageStack';
import Tab from '../components/ui/Tab';
import TabBar from '../components/ui/TabBar';
import { SafeAreaProvider } from '../components/ui/SafeArea';
import Notifications from '../components/Notifications';
import MenuContent from '../components/MenuContent';
import Home from './pages/Home';
import Lists from './pages/Lists';
import Settings from './pages/Settings';
import useLocation from '../hooks/useLocation';
import ListDetail from './pages/ListDetail';
const CurrentPage = ({ page, pageProps = {} }) => {
const currentPage = Store.useState(selectors.getCurrentPage);
const Page = page;
const [local, setLocal] = useState(false);
useEffect(() => {
setLocal(true);
}, []);
return (
<PageStack>
{local ? (
<Switch>
<Route path="/" component={Home} />
<Route path="/lists" component={Lists} />
<Route path="/lists/:listId" component={ListDetail} />
<Route path="/settings" component={Settings} />
</Switch>
) : (
<Page selected={true} {...pageProps} />
)}
</PageStack>
);
};
const AppShell = ({ page, pageProps }) => { const AppShell = ({ page, pageProps }) => {
const [location] = useLocation();
const showMenu = Store.useState(selectors.getMenuOpen);
const showNotifications = Store.useState(selectors.getNotificationsOpen);
const currentPage = Store.useState(selectors.getCurrentPage);
const closeMenu = () => actions.setMenuOpen(false);
const backdropClose = () => {
actions.setMenuOpen(false);
actions.setNotificationsOpen(false);
};
const closeNotifications = () => actions.setNotificationsOpen(false);
// To enable edge drag detection to open the side menu
const bind = useDrag(
({ down, movement: [mx], xy: [x, y], cancel }) => {
if (mx > 5 && x < 50 && down) {
actions.setMenuOpen(true);
cancel();
}
},
{
axis: 'x',
}
);
console.log('Got location', location);
// This is an example app layout. We've got a hidden menu that will be toggled
//
return ( return (
<App <IonApp>
{...bind()} <IonReactRouter>
style={{ <IonRouterOutlet>
touchAction: 'pan-x', <Route path="/tabs" render={() => <Tabs />} />
}} <Route exact path="/" render={() => <Redirect to="/tabs" />} />
> </IonRouterOutlet>
<SafeAreaProvider> </IonReactRouter>
<Router hook={useLocation}> </IonApp>
<Menu open={showMenu} onClose={closeMenu}>
<MenuContent />
</Menu>
<Nav page={currentPage} />
<CurrentPage page={page} pageProps={pageProps} />
<TabBar>
<Tab
icon={homeOutline}
selectedIcon={home}
title="Home"
href="/"
selected={'/' === location}
/>
<Tab
icon={listOutline}
selectedIcon={list}
title="Lists"
href="/lists"
selected={location.indexOf('/lists') === 0}
/>
<Tab
icon={cogOutline}
selectedIcon={cog}
title="Settings"
href="/settings"
selected={'/settings' === location}
/>
</TabBar>
<Backdrop open={showMenu || showNotifications} onClose={backdropClose} />
<Modal open={showNotifications} onClose={closeNotifications}>
<Notifications />
</Modal>
</Router>
</SafeAreaProvider>
</App>
); );
}; };
components/Link.jsx
+24
View File
@@ -0,0 +1,24 @@
import { useEffect, useState } from 'react';
import { Link as ReactRouterLink } from 'react-router-dom';
const Link = ({ children, href, router, ...props }) => {
const [local, setLocal] = useState(false);
useEffect(() => {
setLocal(true);
}, []);
console.log('Rendering link', local, router);
if (!local || router === false) {
return children;
}
// return <a {...props}>{children}</a>;
return (
<ReactRouterLink to={href} {...props}>
{children}
</ReactRouterLink>
);
};
export default Link;
components/pages/Home.jsx
+13 -20
View File
@@ -1,10 +1,7 @@
import Store from '../../store';
import Card from '../ui/Card'; import Card from '../ui/Card';
import Content from '../ui/Content';
import * as selectors from '../../store/selectors'; import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/react';
import usePage from '../../hooks/usePage'; import { homeItems } from '../../store';
import { home, homeOutline } from 'ionicons/icons';
const HomeCard = ({ title, type, text, author, image }) => ( const HomeCard = ({ title, type, text, author, image }) => (
<Card className="my-4"> <Card className="my-4">
@@ -19,23 +16,19 @@ const HomeCard = ({ title, type, text, author, image }) => (
</Card> </Card>
); );
const Home = ({ selected }) => { const Home = () => (
usePage({ <IonPage>
id: 'home', <IonHeader>
title: 'Home', <IonToolbar>
icon: homeOutline, <IonTitle>Inbox</IonTitle>
selectedIcon: home, </IonToolbar>
}); </IonHeader>
<IonContent>
const homeItems = Store.useState(selectors.getHomeItems);
return (
<Content className="p-4 dark:bg-black">
{homeItems.map((i, index) => ( {homeItems.map((i, index) => (
<HomeCard {...i} key={index} /> <HomeCard {...i} key={index} />
))} ))}
</Content> </IonContent>
); </IonPage>
}; );
export default Home; export default Home;
components/pages/ListDetail.jsx
+1 -1
View File
@@ -1,4 +1,4 @@
import { Link } from 'wouter'; import Link from '../../components/Link';
import usePage from '../../hooks/usePage'; import usePage from '../../hooks/usePage';
import Store from '../../store'; import Store from '../../store';
components/pages/Lists.jsx
+15 -15
View File
@@ -1,13 +1,10 @@
import { Link } from 'wouter'; import Link from '../../components/Link';
import usePage from '../../hooks/usePage';
import Store from '../../store'; import Store from '../../store';
import * as actions from '../../store/actions';
import * as selectors from '../../store/selectors'; import * as selectors from '../../store/selectors';
import Content from '../ui/Content';
import List from '../ui/List';
import VirtualScroll from '../ui/VirtualScroll'; import VirtualScroll from '../ui/VirtualScroll';
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/react';
const ListEntry = ({ list, ...props }) => ( const ListEntry = ({ list, ...props }) => (
<Link href={`/lists/${list.id}`}> <Link href={`/lists/${list.id}`}>
@@ -33,17 +30,20 @@ const AllLists = ({ onSelect }) => {
); );
}; };
const Lists = ({ selected }) => { const Lists = ({ selected, ...props }) => {
usePage({
title: 'Lists',
});
return ( return (
<Content className="p-4 dark:bg-black"> <IonPage>
<List className="h-full w-full"> <IonHeader>
<AllLists /> <IonToolbar>
</List> <IonTitle>Lists</IonTitle>
</Content> </IonToolbar>
</IonHeader>
<IonContent>
<List className="h-full w-full">
<AllLists />
</List>
</IonContent>
</IonPage>
); );
}; };
components/pages/Settings.jsx
+13 -28
View File
@@ -1,38 +1,23 @@
import Store from '../../store'; import Store from '../../store';
import * as selectors from '../../store/selectors'; 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 enableNotifications = Store.useState();
const settings = Store.useState(selectors.getSettings); const settings = Store.useState(selectors.getSettings);
return ( return (
<Content className="p-4 dark:bg-black"> <IonPage>
<List> <IonHeader>
<ListItem className="flex"> <IonToolbar>
<span className="text-md flex-1 dark:text-gray-200">Enable Notifications</span> <IonTitle>Settings</IonTitle>
<Toggle </IonToolbar>
checked={settings.enableNotifications} </IonHeader>
onChange={e => <IonContent>
actions.setSettings({ <List className="h-full w-full">
...settings, <AllLists />
enableNotifications: e.target.checked, </List>
}) </IonContent>
} </IonPage>
/>
</ListItem>
</List>
</Content>
); );
}; };
components/pages/Tabs.jsx
+47
View File
@@ -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;
components/ui/Content.jsx
-12
View File
@@ -1,12 +0,0 @@
import classNames from 'classnames';
const Content = ({ className, children, ...props }) => (
<div
{...props}
className={classNames(`h-full w-full overflow-auto py-2 absolute top-0`, className)}
>
{children}
</div>
);
export default Content;
components/ui/PageStack.jsx
-37
View File
@@ -1,37 +0,0 @@
import classNames from 'classnames';
import { Transition } from 'react-transition-group';
const duration = 500;
const defaultStyle = {
transition: `opacity ${duration}ms ease-in-out`,
opacity: 0,
};
const transitionStyles = {
entering: { opacity: 1 },
entered: { opacity: 1 },
exiting: { opacity: 0 },
exited: { opacity: 0 },
};
const PageStack = ({ children, className, ...props }) => (
<div {...props} className={classNames('flex-1 z-0 overflow-hidden relative', className)}>
<Transition in={true} duration={duration}>
{state => (
<div
className="w-full h-full"
style={{
...defaultStyle,
...transitionStyles[state],
}}
>
{children}
</div>
)}
</Transition>
</div>
);
export default PageStack;
components/ui/Tab.jsx
+1 -1
View File
@@ -1,6 +1,6 @@
import classNames from 'classnames'; import classNames from 'classnames';
import Icon from './Icon'; import Icon from './Icon';
import { Link } from 'wouter'; import Link from '../../components/Link';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
const Tab = ({ title, href, icon, selected, selectedIcon, onClick }) => { const Tab = ({ title, href, icon, selected, selectedIcon, onClick }) => {
hooks/usePage.js
+1 -1
View File
@@ -3,7 +3,7 @@ import Store from '../store';
const usePage = fields => { const usePage = fields => {
useEffect(() => { useEffect(() => {
console.log('Use page effect'); console.log('Use page effect', fields.title);
Store.update(s => { Store.update(s => {
s.currentPage = fields; s.currentPage = fields;
}); });
next.config.js
+10
View File
@@ -0,0 +1,10 @@
module.exports = {
async redirects() {
return [
{
source: '/*',
destination: '/',
},
];
},
};
package-lock.json
Generated
+124 -2
View File
@@ -222,6 +222,33 @@
"resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.1.0.tgz", "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.1.0.tgz",
"integrity": "sha512-i9YbZPN3QgfighY/1X1Pu118VUz2Fmmhd6b2n0/O8YVgGGfw0FbUYoA97k7FkpGJ+pLCFEDLUmAPPV4D1kpeFw==" "integrity": "sha512-i9YbZPN3QgfighY/1X1Pu118VUz2Fmmhd6b2n0/O8YVgGGfw0FbUYoA97k7FkpGJ+pLCFEDLUmAPPV4D1kpeFw=="
}, },
"@ionic/core": {
"version": "5.5.2",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-5.5.2.tgz",
"integrity": "sha512-rOfPj8D5NRWdOYYulNTdKtMAMURfmutDQ3ciA3L7daCooG3MWt2/0siiL6rcZFMxfG7KDxHctuwVwYoC1mPuhg==",
"requires": {
"ionicons": "^5.1.2",
"tslib": "^1.10.0"
}
},
"@ionic/react": {
"version": "5.5.2",
"resolved": "https://registry.npmjs.org/@ionic/react/-/react-5.5.2.tgz",
"integrity": "sha512-PNcpjNlNwCjsGQQmrF6QeDzEIOKuCzq4B0QYK1M+uWZQuGD869Nfr/66+ZfMoihjBrry692sjtELMJpIl9FHXQ==",
"requires": {
"@ionic/core": "5.5.2",
"ionicons": "^5.1.2",
"tslib": "*"
}
},
"@ionic/react-router": {
"version": "5.5.2",
"resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-5.5.2.tgz",
"integrity": "sha512-VJz4WA5B7X84MtcLOXIVOcrGsJFaZzFJ5Mzah+7z/M88InUwc6FoAjinFtTgmAmFbOXmGzo9lBBmzbKs86iZVQ==",
"requires": {
"tslib": "*"
}
},
"@next/env": { "@next/env": {
"version": "10.0.3", "version": "10.0.3",
"resolved": "https://registry.npmjs.org/@next/env/-/env-10.0.3.tgz", "resolved": "https://registry.npmjs.org/@next/env/-/env-10.0.3.tgz",
@@ -2652,6 +2679,19 @@
"resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
"integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==" "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
}, },
"history": {
"version": "4.10.1",
"resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
"integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
"requires": {
"@babel/runtime": "^7.1.2",
"loose-envify": "^1.2.0",
"resolve-pathname": "^3.0.0",
"tiny-invariant": "^1.0.2",
"tiny-warning": "^1.0.0",
"value-equal": "^1.0.1"
}
},
"hmac-drbg": { "hmac-drbg": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -2662,6 +2702,14 @@
"minimalistic-crypto-utils": "^1.0.1" "minimalistic-crypto-utils": "^1.0.1"
} }
}, },
"hoist-non-react-statics": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
"requires": {
"react-is": "^16.7.0"
}
},
"html-tags": { "html-tags": {
"version": "3.1.0", "version": "3.1.0",
"resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.1.0.tgz", "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.1.0.tgz",
@@ -2852,8 +2900,7 @@
"ionicons": { "ionicons": {
"version": "5.2.3", "version": "5.2.3",
"resolved": "https://registry.npmjs.org/ionicons/-/ionicons-5.2.3.tgz", "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-5.2.3.tgz",
"integrity": "sha512-87qtgBkieKVFagwYA9Cf91B3PCahQbEOMwMt8bSvlQSgflZ4eE5qI4MGj2ZlIyadeX0dgo+0CzZsy3ow0CsBAg==", "integrity": "sha512-87qtgBkieKVFagwYA9Cf91B3PCahQbEOMwMt8bSvlQSgflZ4eE5qI4MGj2ZlIyadeX0dgo+0CzZsy3ow0CsBAg=="
"dev": true
}, },
"is-accessor-descriptor": { "is-accessor-descriptor": {
"version": "0.1.6", "version": "0.1.6",
@@ -3353,6 +3400,15 @@
"integrity": "sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA==", "integrity": "sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA==",
"optional": true "optional": true
}, },
"mini-create-react-context": {
"version": "0.4.1",
"resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz",
"integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==",
"requires": {
"@babel/runtime": "^7.12.1",
"tiny-warning": "^1.0.3"
}
},
"minimalistic-assert": { "minimalistic-assert": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz", "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
@@ -3971,6 +4027,21 @@
"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz", "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
"integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==" "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw=="
}, },
"path-to-regexp": {
"version": "1.8.0",
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
"integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
"requires": {
"isarray": "0.0.1"
},
"dependencies": {
"isarray": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
"integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
}
}
},
"pbkdf2": { "pbkdf2": {
"version": "3.1.1", "version": "3.1.1",
"resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.1.tgz", "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.1.tgz",
@@ -4486,6 +4557,37 @@
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
"integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==" "integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg=="
}, },
"react-router": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
"integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==",
"requires": {
"@babel/runtime": "^7.1.2",
"history": "^4.9.0",
"hoist-non-react-statics": "^3.1.0",
"loose-envify": "^1.3.1",
"mini-create-react-context": "^0.4.0",
"path-to-regexp": "^1.7.0",
"prop-types": "^15.6.2",
"react-is": "^16.6.0",
"tiny-invariant": "^1.0.2",
"tiny-warning": "^1.0.0"
}
},
"react-router-dom": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz",
"integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==",
"requires": {
"@babel/runtime": "^7.1.2",
"history": "^4.9.0",
"loose-envify": "^1.3.1",
"prop-types": "^15.6.2",
"react-router": "5.2.0",
"tiny-invariant": "^1.0.2",
"tiny-warning": "^1.0.0"
}
},
"react-spring": { "react-spring": {
"version": "8.0.27", "version": "8.0.27",
"resolved": "https://registry.npmjs.org/react-spring/-/react-spring-8.0.27.tgz", "resolved": "https://registry.npmjs.org/react-spring/-/react-spring-8.0.27.tgz",
@@ -4623,6 +4725,11 @@
"path-parse": "^1.0.6" "path-parse": "^1.0.6"
} }
}, },
"resolve-pathname": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
"integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
},
"resolve-url": { "resolve-url": {
"version": "0.2.1", "version": "0.2.1",
"resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz", "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -5613,6 +5720,16 @@
"setimmediate": "^1.0.4" "setimmediate": "^1.0.4"
} }
}, },
"tiny-invariant": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz",
"integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw=="
},
"tiny-warning": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
"integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
},
"tmp": { "tmp": {
"version": "0.0.33", "version": "0.0.33",
"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@@ -5876,6 +5993,11 @@
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
"integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=" "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
}, },
"value-equal": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
"integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
},
"vm-browserify": { "vm-browserify": {
"version": "1.1.2", "version": "1.1.2",
"resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz", "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
package.json
+3
View File
@@ -12,6 +12,8 @@
"@capacitor/cli": "^2.4.5", "@capacitor/cli": "^2.4.5",
"@capacitor/core": "^2.4.5", "@capacitor/core": "^2.4.5",
"@capacitor/ios": "^2.4.5", "@capacitor/ios": "^2.4.5",
"@ionic/react": "^5.5.2",
"@ionic/react-router": "^5.5.2",
"autoprefixer": "^10.1.0", "autoprefixer": "^10.1.0",
"capacitor-dark-mode": "^1.0.5", "capacitor-dark-mode": "^1.0.5",
"classnames": "^2.2.6", "classnames": "^2.2.6",
@@ -19,6 +21,7 @@
"postcss": "^8.2.1", "postcss": "^8.2.1",
"react": "17.0.1", "react": "17.0.1",
"react-dom": "17.0.1", "react-dom": "17.0.1",
"react-router-dom": "^5.2.0",
"react-virtuoso": "^1.1.1", "react-virtuoso": "^1.1.1",
"tailwindcss": "^2.0.2" "tailwindcss": "^2.0.2"
}, },
pages/[...all].js
+10
View File
@@ -0,0 +1,10 @@
import dynamic from 'next/dynamic';
const App = dynamic(() => import('../components/AppShell'), {
ssr: false,
});
export default function Index() {
// return <AppShell page={DynamicHome} />;
return <App />;
}
pages/_app.js
+7 -2
View File
@@ -1,8 +1,13 @@
import Head from 'next/head'; import Head from 'next/head';
import { useEffect } from 'react';
import 'tailwindcss/tailwind.css'; import 'tailwindcss/tailwind.css';
import Store from '../store'; import '@ionic/react/css/core.css';
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';
import '../styles/global.css'; import '../styles/global.css';
pages/index.js
+7 -3
View File
@@ -1,6 +1,10 @@
import AppShell from '../components/AppShell'; import dynamic from 'next/dynamic';
import Home from '../components/pages/Home';
const App = dynamic(() => import('../components/AppShell'), {
ssr: false,
});
export default function Index() { export default function Index() {
return <AppShell page={Home} />; // return <AppShell page={DynamicHome} />;
return <App />;
} }
pages/lists.js
-6
View File
@@ -1,6 +0,0 @@
import AppShell from '../components/AppShell';
import ListsPage from '../components/pages/Lists';
export default function Lists() {
return <AppShell page={ListsPage} />;
}
pages/lists/[listId].js
-18
View File
@@ -1,18 +0,0 @@
import AppShell from '../../components/AppShell';
import ListDetailPage from '../../components/pages/ListDetail';
export default function ListDetail({ listId }) {
return <AppShell page={ListDetailPage} pageProps={{ listId }} />;
}
export const getServerSideProps = context => {
const {
params: { listId },
} = context;
return {
props: {
listId,
},
};
};
pages/settings.js
-6
View File
@@ -1,6 +0,0 @@
import AppShell from '../components/AppShell';
import SettingsPage from '../components/pages/Settings';
export default function Settings() {
return <AppShell page={SettingsPage} />;
}
pages/users/[userId].js
-6
View File
@@ -1,6 +0,0 @@
import AppShell from '../../components/AppShell';
import Home from '../../components/pages/Home';
export default function UserId() {
return <AppShell page={Home} />;
}
store/index.js
-7
View File
@@ -2,13 +2,6 @@ import { Store as PullStateStore } from 'pullstate';
import { lists } from '../mock'; import { lists } from '../mock';
import { list, listOutline, cog, cogOutline, home, homeOutline } from 'ionicons/icons';
import Home from '../components/pages/Home';
import Lists from '../components/pages/Lists';
import Settings from '../components/pages/Settings';
import ListDetail from '../components/pages/ListDetail';
export const images = [ export const images = [
'https://images.unsplash.com/photo-1608091526083-86ae8489ae5c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80', 'https://images.unsplash.com/photo-1608091526083-86ae8489ae5c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80',
'https://images.unsplash.com/photo-1608050072262-7b26ba63fb46?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80', 'https://images.unsplash.com/photo-1608050072262-7b26ba63fb46?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80',