diff --git a/README.md b/README.md index 34eee74..982a457 100644 --- a/README.md +++ b/README.md @@ -24,6 +24,7 @@ There are currently snippets for the following common mobile components: - [x] Content - [x] Tabs - [ ] Nav (in progress) +- [ ] Next.js router integration - [x] Icon - [x] Menu - [x] Modal diff --git a/capacitor.config.json b/capacitor.config.json index 05e195d..3ecb51b 100644 --- a/capacitor.config.json +++ b/capacitor.config.json @@ -9,8 +9,5 @@ "launchShowDuration": 0 } }, - "server": { - "url": "http://192.168.86.26:3000" - }, "cordova": {} } diff --git a/components/MenuContent.jsx b/components/MenuContent.jsx new file mode 100644 index 0000000..08f06c6 --- /dev/null +++ b/components/MenuContent.jsx @@ -0,0 +1,44 @@ +import Store from '../store'; +import * as actions from '../store/actions'; +import * as selectors from '../store/selectors'; + +const MenuItem = ({ children, ...props }) => ( +
  • + + {children} + +
    • +); + +const MenuContent = () => { + const menuLinks = Store.useState(selectors.getMenuLinks); + + const go = page => { + actions.setPage(page); + actions.setMenuOpen(false); + }; + + return ( + <> +
    +

    Menu

    +
    + + + ); +}; + +export default MenuContent; diff --git a/components/Notifications.jsx b/components/Notifications.jsx new file mode 100644 index 0000000..9fb2651 --- /dev/null +++ b/components/Notifications.jsx @@ -0,0 +1,45 @@ +import { checkmarkOutline, closeOutline } from 'ionicons/icons'; +import Button from './ui/Button'; +import Icon from './ui/Icon'; +import List from './ui/List'; +import ListItem from './ui/ListItem'; +import VirtualScroll from './ui/VirtualScroll'; + +const NotificationItem = ({ i }) => ( + + Notification +
    + You have a new friend request +
    +
    + + +
    +     +); + +const Notifications = () => ( +
    +
    +

    Notifications

    +
    + + } + /> + +
    +); + +export default Notifications; diff --git a/components/pages/Feed.jsx b/components/pages/Feed.jsx deleted file mode 100644 index d9869c8..0000000 --- a/components/pages/Feed.jsx +++ /dev/null @@ -1,24 +0,0 @@ -import { Virtuoso } from 'react-virtuoso'; - -import Content from '../ui/Content'; -import List from '../ui/List'; -import ListItem from '../ui/ListItem'; - -const Feed = ({ selected }) => { - return ( - - - {selected && ( - Item {index}} - /> - )} - - - ); -}; - -export default Feed; diff --git a/components/pages/Home.jsx b/components/pages/Home.jsx index ca7a626..31d2749 100644 --- a/components/pages/Home.jsx +++ b/components/pages/Home.jsx @@ -1,14 +1,13 @@ -import { homeItems } from '../../data'; +import Store from '../../store'; import Card from '../ui/Card'; import Content from '../ui/Content'; -const PostCard = ({ title, type, text, author, image }) => ( - +import * as selectors from '../../store/selectors'; + +const HomeCard = ({ title, type, text, author, image }) => ( +
    - +

    {type}

    @@ -19,10 +18,12 @@ const PostCard = ({ title, type, text, author, image }) => ( ); const Home = ({ selected }) => { + const homeItems = Store.useState(selectors.getHomeItems); + return ( - + {homeItems.map((i, index) => ( - + ))} ); diff --git a/components/pages/ListDetail.jsx b/components/pages/ListDetail.jsx new file mode 100644 index 0000000..02b3aca --- /dev/null +++ b/components/pages/ListDetail.jsx @@ -0,0 +1,62 @@ +import Store from '../../store'; +import * as actions from '../../store/actions'; +import * as selectors from '../../store/selectors'; + +import Content from '../ui/Content'; +import List from '../ui/List'; +import VirtualScroll from '../ui/VirtualScroll'; + +const ListItems = ({ list, onClose }) => { + return ( + <> +
    + + All Lists + +
    + } + /> + + ); +}; + +const ListItemEntry = ({ list, item }) => ( +
    actions.setDone(list, item, !item.done)} + > + {item.name} + +
    +); + +const ListDetail = ({ selected }) => { + const selectedList = Store.useState(selectors.getSelectedList); + + return ( + + + {selected && ( + { + actions.setSelectedList(null); + actions.setPageById('lists'); + }} + /> + )} + + + ); +}; + +export default ListDetail; diff --git a/components/pages/Lists.jsx b/components/pages/Lists.jsx new file mode 100644 index 0000000..42d92fb --- /dev/null +++ b/components/pages/Lists.jsx @@ -0,0 +1,47 @@ +import Store from '../../store'; +import * as actions from '../../store/actions'; +import * as selectors from '../../store/selectors'; + +import Content from '../ui/Content'; +import List from '../ui/List'; +import VirtualScroll from '../ui/VirtualScroll'; + +const ListEntry = ({ list, ...props }) => ( +
    + {list.name} +
    +); + +const AllLists = ({ onSelect }) => { + const lists = Store.useState(selectors.getLists); + + return ( + ( + onSelect(list)} onClose={() => onSelect(null)} /> + )} + /> + ); +}; + +const Lists = ({ selected }) => { + return ( + + + {selected && ( + { + actions.setSelectedList(list); + actions.setPageById('list-detail'); + }} + /> + )} + + + ); +}; + +export default Lists; diff --git a/components/pages/Settings.jsx b/components/pages/Settings.jsx index 046a29c..47a2e4f 100644 --- a/components/pages/Settings.jsx +++ b/components/pages/Settings.jsx @@ -1,9 +1,32 @@ +import Store from '../../store'; +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'; const Settings = ({ selected }) => { + const enableNotifications = Store.useState(); + const settings = Store.useState(selectors.getSettings); + return ( -

    Settings

    + + + Enable Notifications + + actions.setSettings({ + ...settings, + enableNotifications: e.target.checked, + }) + } + /> + +     ); }; diff --git a/components/ui/Card.jsx b/components/ui/Card.jsx index 82d2a56..31bd07c 100644 --- a/components/ui/Card.jsx +++ b/components/ui/Card.jsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; const Card = ({ children, className, ...props }) => ( -
    +
    {children}
    ); diff --git a/components/ui/Nav.jsx b/components/ui/Nav.jsx index e43d155..d960f6c 100644 --- a/components/ui/Nav.jsx +++ b/components/ui/Nav.jsx @@ -1,10 +1,12 @@ import { useEffect, useState } from 'react'; import { Plugins } from '@capacitor/core'; -import Store from '../../store'; +import * as actions from '../../store/actions'; const Nav = ({ page }) => { - const [showMenu, setShowMenu] = useState(false); + const [showProfileMenu, setShowProfileMenu] = useState(false); + + const title = typeof page.title === 'function' ? page.title() : page.title; useEffect(() => { Plugins.StatusBar.setStyle({ @@ -23,11 +25,7 @@ const Nav = ({ page }) => {
    - Store.update(s => { - s.showMenu = true; - }) - } + onClick={() => actions.setMenuOpen(true)} > {/* Mobile menu button*/}
    -

    {page.title}

    +

    {title}

    @@ -116,11 +114,7 @@ const Nav = ({ page }) => {
    - -
    - -); - -const NotificationsContent = () => ( -
    -
    -

    Notifications

    -
    - - } - /> - -
    -); - export default function Index() { - const [page, setPage] = useState(pages[0]); + const showMenu = Store.useState(selectors.getMenuOpen); + const showNotifications = Store.useState(selectors.getNotificationsOpen); + const currentPage = Store.useState(selectors.getCurrentPage); + const tabs = Store.useState(selectors.getTabs); - const showMenu = Store.useState(s => s.showMenu); - const showNotifications = Store.useState(s => s.showNotifications); - - const closeMenu = () => { - Store.update(s => { - s.showMenu = false; - }); - }; + const closeMenu = () => actions.setMenuOpen(false); const backdropClose = () => { - Store.update(s => { - s.showMenu = false; - s.showNotifications = false; - }); + actions.setMenuOpen(false); + actions.setNotificationsOpen(false); }; - const closeNotifications = () => { - Store.update(s => { - s.showNotifications = 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) { - Store.update(s => { - s.showMenu = true; - }); + actions.setMenuOpen(true); cancel(); } }, @@ -163,16 +75,21 @@ export default function Index() { -