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

Tab routing

Browse Source
This commit is contained in:
Max Lynch
2021-01-09 12:19:08 -06:00
parent ba42e4d6d8
commit 99bbfdda4b
7 changed files with 26 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/pages/Lists.jsx
+22 -14
View File
@@ -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}`}>
<a
{...props}
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>
<IonItem href={`/tabs/lists/${list.id}`}>
<IonLabel>{list.name}</IonLabel>
</IonItem>
);
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>
<List className="h-full w-full">
<AllLists />
</List>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">Lists</IonTitle>
</IonToolbar>
</IonHeader>
<AllLists />
</IonContent>
</IonPage>
);
components/pages/Settings.jsx
+3 -3
View File
@@ -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">
<AllLists />
</List>
<IonList></IonList>
</IonContent>
</IonPage>
);
components/ui/Tab.jsx
-30
View File
@@ -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
-13
View File
@@ -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
-5
View File
@@ -1,5 +0,0 @@
import ReactToggle from 'react-toggle';
const Toggle = props => <ReactToggle {...props} icons={false} />;
export default Toggle;
package-lock.json
Generated
-53
View File
@@ -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
+1 -5
View File
@@ -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",
"wouter": "^2.7.0"
"reselect": "^4.0.0"
}
}