From 8b5041336bd36b53e9bb9f39f7d1e73773163c07 Mon Sep 17 00:00:00 2001 From: Leo Giovanetti Date: Thu, 24 Dec 2020 16:21:07 -0300 Subject: [PATCH 1/7] Removing server from cap config --- capacitor.config.json | 3 --- 1 file changed, 3 deletions(-) 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": {} } From 8f46381999288ff8d036f2292199e3d383f3efa0 Mon Sep 17 00:00:00 2001 From: Leo Giovanetti Date: Thu, 24 Dec 2020 16:22:13 -0300 Subject: [PATCH 2/7] Removing server from cap config at ios --- ios/App/App/capacitor.config.json | 3 --- 1 file changed, 3 deletions(-) diff --git a/ios/App/App/capacitor.config.json b/ios/App/App/capacitor.config.json index 05e195d..3ecb51b 100644 --- a/ios/App/App/capacitor.config.json +++ b/ios/App/App/capacitor.config.json @@ -9,8 +9,5 @@ "launchShowDuration": 0 } }, - "server": { - "url": "http://192.168.86.26:3000" - }, "cordova": {} } From 0056d6fe81358389bd6b46f9d8182f59cd2ff953 Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Thu, 24 Dec 2020 13:46:48 -0600 Subject: [PATCH 3/7] Moving to a todo app --- components/MenuContent.jsx | 41 +++++++++++ components/Notifications.jsx | 45 ++++++++++++ components/pages/Feed.jsx | 24 ------- components/pages/Home.jsx | 16 ++--- components/pages/Lists.jsx | 92 +++++++++++++++++++++++++ components/ui/Card.jsx | 2 +- components/ui/PageStack.jsx | 9 +++ components/ui/TabBar.jsx | 11 +-- components/ui/Toggle.jsx | 3 + components/ui/VirtualScroll.jsx | 5 ++ data/index.js | 47 ------------- pages/index.js | 117 ++++++-------------------------- store/actions.js | 12 ++++ store/index.js | 86 +++++++++++++++++++++++ 14 files changed, 330 insertions(+), 180 deletions(-) create mode 100644 components/MenuContent.jsx create mode 100644 components/Notifications.jsx delete mode 100644 components/pages/Feed.jsx create mode 100644 components/pages/Lists.jsx create mode 100644 components/ui/PageStack.jsx create mode 100644 components/ui/Toggle.jsx create mode 100644 components/ui/VirtualScroll.jsx delete mode 100644 data/index.js create mode 100644 store/actions.js diff --git a/components/MenuContent.jsx b/components/MenuContent.jsx new file mode 100644 index 0000000..050d216 --- /dev/null +++ b/components/MenuContent.jsx @@ -0,0 +1,41 @@ +import Store from '../store'; + +const MenuItem = ({ children, ...props }) => ( +
  • + + {children} + +
    • +); + +const MenuContent = () => { + const pages = Store.useState(s => s.pages); + + const go = page => { + Store.update(s => { + console.log('Going to', page); + s.currentPage = page; + s.showMenu = false; + }); + }; + + return ( + <> +
    +

    Menu

    +
    +
      + {pages.map(p => ( + go(p)}> + {p.title} + + ))} +
    + + ); +}; + +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..a0f2603 100644 --- a/components/pages/Home.jsx +++ b/components/pages/Home.jsx @@ -1,14 +1,12 @@ 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 }) => ( - +const HomeCard = ({ title, type, text, author, image }) => ( +
    - +

    {type}

    @@ -19,10 +17,12 @@ const PostCard = ({ title, type, text, author, image }) => ( ); const Home = ({ selected }) => { + const homeItems = Store.useState(s => s.homeItems); + return ( - + {homeItems.map((i, index) => ( - + ))} ); diff --git a/components/pages/Lists.jsx b/components/pages/Lists.jsx new file mode 100644 index 0000000..6f9237d --- /dev/null +++ b/components/pages/Lists.jsx @@ -0,0 +1,92 @@ +import { useState } from 'react'; +import Store from '../../store'; +import { setDone } from '../../store/actions'; +import Card from '../ui/Card'; + +import Content from '../ui/Content'; +import List from '../ui/List'; +import ListItem from '../ui/ListItem'; +import VirtualScroll from '../ui/VirtualScroll'; + +const ListEntry = ({ list, ...props }) => ( +
    + {list.name} +
    +); + +const AllLists = ({ onSelect }) => { + const lists = Store.useState(s => s.lists); + + return ( + ( + onSelect(list)} onClose={() => onSelect(null)} /> + )} + /> + ); +}; + +const ListItems = ({ list, onClose }) => { + return ( + <> + + } + /> + + ); +}; + +const ListItemEntry = ({ list, item }) => ( +
    + {item.name} + { + setDone(list, item, !item.done); + }} + /> +
    +); + +const Feed = ({ selected }) => { + const selectedList = Store.useState(s => s.selectedList); + + return ( + + + {selected && selectedList ? ( + + Store.update(s => { + s.selectedList = null; + }) + } + /> + ) : ( + { + Store.update(s => { + s.selectedList = list; + }); + }} + /> + )} + + + ); +}; + +export default Feed; 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/PageStack.jsx b/components/ui/PageStack.jsx new file mode 100644 index 0000000..82bd08f --- /dev/null +++ b/components/ui/PageStack.jsx @@ -0,0 +1,9 @@ +import classNames from 'classnames'; + +const PageStack = ({ children, className, ...props }) => ( +
    + {children} +
    +); + +export default PageStack; diff --git a/components/ui/TabBar.jsx b/components/ui/TabBar.jsx index 667f04f..2954c6f 100644 --- a/components/ui/TabBar.jsx +++ b/components/ui/TabBar.jsx @@ -1,12 +1,13 @@ const TabBar = ({ children }) => ( -) +); -export default TabBar; \ No newline at end of file +export default TabBar; diff --git a/components/ui/Toggle.jsx b/components/ui/Toggle.jsx new file mode 100644 index 0000000..8729862 --- /dev/null +++ b/components/ui/Toggle.jsx @@ -0,0 +1,3 @@ +const Toggle = () =>
    ; + +export default Toggle; diff --git a/components/ui/VirtualScroll.jsx b/components/ui/VirtualScroll.jsx new file mode 100644 index 0000000..01ded4e --- /dev/null +++ b/components/ui/VirtualScroll.jsx @@ -0,0 +1,5 @@ +import { Virtuoso } from 'react-virtuoso'; + +const VirtualScroll = props => ; + +export default VirtualScroll; diff --git a/data/index.js b/data/index.js deleted file mode 100644 index aa465bc..0000000 --- a/data/index.js +++ /dev/null @@ -1,47 +0,0 @@ -// Some fake filler data - -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-1608050072262-7b26ba63fb46?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80', - 'https://images.unsplash.com/photo-1607975218223-94f82613e833?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=934&q=80', - 'https://images.unsplash.com/photo-1608108707326-215150457c9f?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80', - 'https://images.unsplash.com/photo-1608057681073-9399f209e773?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=934&q=80', -]; - -export const homeItems = [ - { - title: 'Welcome', - type: 'Blog', - text: 'Welcome to the app!', - author: 'Max', - image: images[0], - }, - { - title: 'How to get started', - type: 'Article', - text: 'Getting started with the app is easy! Just follow these 100 steps', - author: 'Max', - image: images[1], - }, - { - title: 'Need help?', - type: 'Support', - text: "We're here to help. Available between the hours of 3am and 3:01am every day", - author: 'Max', - image: images[2], - }, - { - title: 'Welcome', - type: 'Blog', - text: 'Welcome to the app!', - author: 'Max', - image: images[3], - }, - { - title: 'Welcome', - type: 'Blog', - text: 'Welcome to the app!', - author: 'Max', - image: images[4], - }, -]; diff --git a/pages/index.js b/pages/index.js index e763f2a..e4fb5f4 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,7 +1,3 @@ -import { useState } from 'react'; -import { Virtuoso } from 'react-virtuoso'; -import { flash, flashOutline, cog, cogOutline, home, homeOutline } from 'ionicons/icons'; - import Store from '../store'; import App from '../components/ui/App'; @@ -9,112 +5,34 @@ 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 List from '../components/ui/List'; -import ListItem from '../components/ui/ListItem'; -import Button from '../components/ui/Button'; import { SafeAreaProvider } from '../components/ui/SafeArea'; -import Home from '../components/pages/Home'; -import Feed from '../components/pages/Feed'; -import Settings from '../components/pages/Settings'; import { useDrag } from 'react-use-gesture'; -const pages = [ - { id: 'home', title: 'Home', icon: homeOutline, selectedIcon: home, component: Home }, - { - id: 'feed', - title: 'Feed', - icon: flashOutline, - selectedIcon: flash, - component: Feed, - }, - { - id: 'settings', - title: 'Settings', - icon: cogOutline, - selectedIcon: cog, - component: Settings, - }, -]; +import Notifications from '../components/Notifications'; +import MenuContent from '../components/MenuContent'; const CurrentPage = ({ page }) => { + const pages = Store.useState(s => s.pages); + return ( -
    + {pages.map(p => { const Page = p.component; return ; })} -
    + ); }; -const MenuItem = ({ children }) => ( -
  • - - {children} - -
    • -); -const MenuContent = () => ( - <> -
    -

    Menu

    -
    -
      - Home - Profile - Settings -
    - -); - -const FakeNotification = ({ i }) => ( - - Notification -
    - You have a new friend request -
    -
    - - -
    -     -); - -const NotificationsContent = () => ( -
    -
    -

    Notifications

    -
    - - } - /> - -
    -); - export default function Index() { - const [page, setPage] = useState(pages[0]); - const showMenu = Store.useState(s => s.showMenu); const showNotifications = Store.useState(s => s.showNotifications); + const currentPage = Store.useState(s => s.currentPage); + const pages = Store.useState(s => s.pages); const closeMenu = () => { Store.update(s => { @@ -163,16 +81,25 @@ export default function Index() { -
      - {pages.map(p => ( - go(p)}> - {p.title} - - ))} + {menuLinks.map(p => { + const title = typeof p.title === 'function' ? p.title() : p.title; + + return ( + go(p)}> + {title} + + ); + })}
    ); diff --git a/components/pages/Home.jsx b/components/pages/Home.jsx index a0f2603..31d2749 100644 --- a/components/pages/Home.jsx +++ b/components/pages/Home.jsx @@ -1,8 +1,9 @@ -import { homeItems } from '../../data'; import Store from '../../store'; import Card from '../ui/Card'; import Content from '../ui/Content'; +import * as selectors from '../../store/selectors'; + const HomeCard = ({ title, type, text, author, image }) => (
    @@ -17,7 +18,7 @@ const HomeCard = ({ title, type, text, author, image }) => ( ); const Home = ({ selected }) => { - const homeItems = Store.useState(s => s.homeItems); + const homeItems = Store.useState(selectors.getHomeItems); return ( diff --git a/components/pages/ListDetail.jsx b/components/pages/ListDetail.jsx new file mode 100644 index 0000000..54e597b --- /dev/null +++ b/components/pages/ListDetail.jsx @@ -0,0 +1,60 @@ +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 ( + <> + + } + /> + + ); +}; + +const ListItemEntry = ({ list, item }) => ( +
    + {item.name} + { + actions.setDone(list, item, !item.done); + }} + /> +
    +); + +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 index 6f9237d..42d92fb 100644 --- a/components/pages/Lists.jsx +++ b/components/pages/Lists.jsx @@ -1,11 +1,9 @@ -import { useState } from 'react'; import Store from '../../store'; -import { setDone } from '../../store/actions'; -import Card from '../ui/Card'; +import * as actions from '../../store/actions'; +import * as selectors from '../../store/selectors'; import Content from '../ui/Content'; import List from '../ui/List'; -import ListItem from '../ui/ListItem'; import VirtualScroll from '../ui/VirtualScroll'; const ListEntry = ({ list, ...props }) => ( @@ -15,7 +13,7 @@ const ListEntry = ({ list, ...props }) => ( ); const AllLists = ({ onSelect }) => { - const lists = Store.useState(s => s.lists); + const lists = Store.useState(selectors.getLists); return ( { ); }; -const ListItems = ({ list, onClose }) => { - return ( - <> - - } - /> - - ); -}; - -const ListItemEntry = ({ list, item }) => ( -
    - {item.name} - { - setDone(list, item, !item.done); - }} - /> -
    -); - -const Feed = ({ selected }) => { - const selectedList = Store.useState(s => s.selectedList); - +const Lists = ({ selected }) => { return ( - {selected && selectedList ? ( - - Store.update(s => { - s.selectedList = null; - }) - } - /> - ) : ( + {selected && ( { - Store.update(s => { - s.selectedList = list; - }); + actions.setSelectedList(list); + actions.setPageById('list-detail'); }} /> )} @@ -89,4 +44,4 @@ const Feed = ({ selected }) => { ); }; -export default Feed; +export default Lists; 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 }) => {