Initial commit

src/app/components/AddCardButton/AddCardButton.component.scss

@@ -0,0 +1,9 @@
+.c-AddCardButton {
+  padding: 0.6rem;
+  color: #ccc;
+  cursor: pointer;
+  transition: all 0.3s ease-in-out;
+  &:hover {
+      font-size: 1rem;
+  }
+}

src/app/components/AddCardButton/AddCardButton.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Add } from '@material-ui/icons';
+import './AddCardButton.component.scss';
+
+const AddCardButton = props => {
+  const {addhandler} = props;
+  return (
+    <div className='c-AddCardButton' onClick={() => addhandler(true)}>
+      <span className="c-AddListButton__empty-list__add-button"><Add fontSize="small" />Add another list</span>
+    </div>
+  );
+};
+
+AddCardButton.propTypes = {
+
+};
+
+export default AddCardButton;

src/app/components/AddCardButton/AddCardButton.test.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import AddCardButton from './AddCardButton';
+
+describe('AddCardButton', () => {
+   it('renders without error', () => {
+
+   });
+});

src/app/components/AddCardButton/index.js

@@ -0,0 +1,3 @@
+import AddCardButton from './AddCardButton.jsx';
+
+export default AddCardButton;

src/app/components/AddListButton/AddListButton.component.scss

@@ -0,0 +1,3 @@
+.c-AddListButton {
+  padding: 0.6rem;
+}

src/app/components/AddListButton/AddListButton.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {Add} from '@material-ui/icons';
+import './AddListButton.component.scss';
+
+const AddListButton = props => {
+  const {addhandler} = props
+  return (
+    <div className='c-AddListButton' onClick={() => addhandler(true)}>
+      <span className="c-AddListButton__empty-list__add-button"><Add fontSize="small" />Add another list</span>
+    </div>
+  );
+};
+
+AddListButton.propTypes = {
+  addhandler: PropTypes.func
+};
+
+export default AddListButton;

src/app/components/AddListButton/AddListButton.test.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import AddListButton from './AddListButton';
+
+describe('AddListButton', () => {
+   it('renders without error', () => {
+
+   });
+});

src/app/components/AddListButton/index.js

@@ -0,0 +1,3 @@
+import AddListButton from './AddListButton.jsx';
+
+export default AddListButton;

src/app/components/Aside/Aside.component.scss

@@ -0,0 +1,3 @@
+.c-Aside {
+  
+}

src/app/components/Aside/Aside.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import './Aside.component.scss';
+
+const Aside = props => {
+  return (
+    <div className='c-Aside'>
+      In Component Aside
+    </div>
+  );
+};
+
+Aside.propTypes = {
+
+};
+
+export default Aside;

src/app/components/Aside/Aside.test.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import Aside from './Aside';
+
+describe('Aside', () => {
+   it('renders without error', () => {
+
+   });
+});

src/app/components/Aside/index.js

@@ -0,0 +1,3 @@
+import Aside from './Aside.jsx';
+
+export default Aside;

src/app/components/BoardHeader/BoardHeader.component.scss

@@ -0,0 +1,5 @@
+.c-BoardHeader {
+    header {
+        background-color: rgba(0,0,0,0.3);
+    }
+}

src/app/components/BoardHeader/BoardHeader.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import './BoardHeader.component.scss';
+import BoardTitle from '../BoardTitle';
+
+const BoardHeader = props => {
+  return (
+    <div className='c-BoardHeader'>
+      <BoardTitle title="Test Board" />
+    </div>
+  );
+};
+
+BoardHeader.propTypes = {
+
+};
+
+export default BoardHeader;

src/app/components/BoardHeader/BoardHeader.test.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import BoardHeader from './BoardHeader';
+
+describe('BoardHeader', () => {
+   it('renders without error', () => {
+
+   });
+});

src/app/components/BoardHeader/index.js

@@ -0,0 +1,3 @@
+import BoardHeader from './BoardHeader.jsx';
+
+export default BoardHeader;

src/app/components/BoardTitle/BoardTitle.component.scss

@@ -0,0 +1,10 @@
+.c-BoardTitle {
+  border-radius: 4px;
+//   background-color: rgba(255, 255, 255, 0.3);
+  font-weight: bold;
+  font-size: 1.5rem;
+  // padding: 0.5rem 1rem;
+  line-height: 100%;
+  display: flex;
+  align-items: center;
+}

src/app/components/BoardTitle/BoardTitle.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './BoardTitle.component.scss';
+
+const BoardTitle = props => {
+  return (
+    <div className='c-BoardTitle'>
+      <p>{props.title}</p>
+    </div>
+  );
+};
+
+BoardTitle.propTypes = {
+
+};
+
+export default BoardTitle;

src/app/components/BoardTitle/BoardTitle.test.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import BoardTitle from './BoardTitle';
+
+describe('BoardTitle', () => {
+   it('renders without error', () => {
+
+   });
+});

src/app/components/BoardTitle/index.js

@@ -0,0 +1,3 @@
+import BoardTitle from './BoardTitle.jsx';
+
+export default BoardTitle;

src/app/components/Card/Card.component.scss

@@ -0,0 +1,50 @@
+.c-Card {
+
+    &.c-Card--modifier {
+        padding: 0.3rem;
+        margin: 1rem 0;
+        background: #eee;
+        color: #333;
+        border-radius: 3px;
+        cursor: pointer;
+        transition: all 0.3s ease-in-out;
+        height: 70px;
+        flex-wrap: wrap;
+        display: flex;
+        align-items: center;
+
+        &.c-AttributeCreator--shadow {
+            box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+            transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+            &:hover {
+                box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
+            }
+        }
+
+        .c-Card__close-button {
+            margin-left: 0.5rem;
+            color: #666;
+            cursor: pointer;
+            position: absolute;
+            top: 7px;
+            right: 7px;
+
+            &:hover {
+                color: #333;
+            }
+        }
+
+        div {
+            flex-basis: 100%;
+        }
+
+        // p {
+        //     margin-bottom: 0;
+        // }
+
+        // h6, p {
+        //     display: flex;
+        //     align-items: center;
+        // }
+    }
+}

src/app/components/Card/Card.jsx

@@ -0,0 +1,78 @@
+import React, {useRef} from 'react';
+import PropTypes from 'prop-types';
+import ItemTypes from './../../pages/Home/ItemTypes'
+import {useDrag, useDrop} from 'react-dnd'
+import './Card.component.scss';
+import {Clear} from '@material-ui/icons';
+
+const Card = props => {
+  const ref = useRef(null)
+  const {card, index, listId, moveCard, removeCard} = props
+  const cardId = `c-Card-${listId + "-" + index}`
+  card && (card.id = cardId)
+  const [{isDragging}, drag] = useDrag({
+    item: {type: ItemTypes.CARD, index, card, listId},
+    end(item, monitor) {
+      const dr = monitor.getDropResult();
+      let dropListId;
+      dr && (dropListId = dr.listId)
+      // console.log(item.listId + " " + dropListId);
+      if (monitor.didDrop() && item.listId !== dropListId) {
+        removeCard(index, listId)
+      }
+    },
+		collect: monitor => ({
+      isDragging: !!monitor.isDragging()
+		}),
+  })
+
+  const [, drop] = useDrop({
+    accept: ItemTypes.CARD,
+    hover: (item, monitor) => {
+      if (!ref.current) {
+        return
+      }
+      const dragIndex = item.index
+      const hoverIndex = index
+      // console.log("drag " + dragIndex)
+      // console.log("hover " + hoverIndex)
+      if (dragIndex === hoverIndex) {
+        return
+      }
+      const hoverBoundingRect = ref.current.getBoundingClientRect()
+      const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2
+      const clientOffset = monitor.getClientOffset()
+      const hoverClientY = clientOffset.y - hoverBoundingRect.top
+      if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
+        return
+      }
+      if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
+        return
+      }
+      moveCard(dragIndex, hoverIndex)
+      item.index = hoverIndex
+    },
+  })
+  drag(drop(ref))
+  return <div
+    id={cardId}
+    className='c-Card c-Card--modifier c-AttributeCreator--shadow'
+    ref={ref}
+    style={{
+      opacity: isDragging ? 0.5 : 1,
+      cursor: 'move',
+      position: 'relative'
+    }}>
+      <Clear className="c-Card__close-button" fontSize="small" onClick={() => removeCard(index, listId)} />
+      <div style={{marginTop: '10px'}}>{card && card.title}</div>
+      <div>{card && card.description}</div>
+    </div>
+};
+
+Card.propTypes = {
+  card: PropTypes.object,
+  index: PropTypes.number,
+  listId: PropTypes.string
+};
+
+export default Card;

src/app/components/Card/Card.test.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import Card from './Card';
+
+describe('Card', () => {
+   it('renders without error', () => {
+
+   });
+});

src/app/components/Card/index.js

@@ -0,0 +1,3 @@
+import Card from './Card.jsx';
+
+export default Card;

src/app/components/CardContextMenu/CardContextMenu.component.scss

@@ -0,0 +1,3 @@
+.c-CardContextMenu {
+  
+}

src/app/components/CardContextMenu/CardContextMenu.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './CardContextMenu.component.scss';
+
+const CardContextMenu = props => {
+  return (
+    <div className='c-CardContextMenu'>
+      In Component CardContextMenu
+    </div>
+  );
+};
+
+CardContextMenu.propTypes = {
+
+};
+
+export default CardContextMenu;

src/app/components/CardContextMenu/CardContextMenu.test.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import CardContextMenu from './CardContextMenu';
+
+describe('CardContextMenu', () => {
+   it('renders without error', () => {
+
+   });
+});

src/app/components/CardContextMenu/index.js

@@ -0,0 +1,3 @@
+import CardContextMenu from './CardContextMenu.jsx';
+
+export default CardContextMenu;

src/app/components/CardEditButton/CardEditButton.component.scss

@@ -0,0 +1,3 @@
+.c-CardEditButton {
+  
+}

src/app/components/CardEditButton/CardEditButton.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './CardEditButton.component.scss';
+
+const CardEditButton = props => {
+  return (
+    <div className='c-CardEditButton'>
+      In Component CardEditButton
+    </div>
+  );
+};
+
+CardEditButton.propTypes = {
+
+};
+
+export default CardEditButton;

src/app/components/CardEditButton/CardEditButton.test.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import CardEditButton from './CardEditButton';
+
+describe('CardEditButton', () => {
+   it('renders without error', () => {
+
+   });
+});

src/app/components/CardEditButton/index.js

@@ -0,0 +1,3 @@
+import CardEditButton from './CardEditButton.jsx';
+
+export default CardEditButton;

src/app/components/Header/Header.component.scss

@@ -0,0 +1,6 @@
+.c-Header {
+  header {
+    background-color: rgba(0,0,0, 0.4);
+    backdrop-filter: blur(3px);
+  }
+}

src/app/components/Header/Header.jsx

@@ -0,0 +1,267 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {fade, makeStyles} from '@material-ui/core/styles';
+import {AppBar, IconButton, InputBase, Badge, MenuItem, Menu, Toolbar, Typography, useScrollTrigger} from '@material-ui/core'
+import MenuIcon from '@material-ui/icons/Menu';
+import SearchIcon from '@material-ui/icons/Search';
+import AccountCircle from '@material-ui/icons/AccountCircle';
+import MailIcon from '@material-ui/icons/Mail';
+import NotificationsIcon from '@material-ui/icons/Notifications';
+import MoreIcon from '@material-ui/icons/MoreVert';
+import './Header.component.scss';
+
+const useStyles = makeStyles((theme) => ({
+  grow: {
+    flexGrow: 1,
+  },
+  menuButton: {
+    marginRight: theme.spacing(2),
+  },
+  title: {
+    display: 'none',
+    [theme.breakpoints.up('sm')]: {
+      display: 'block',
+    },
+  },
+  search: {
+    position: 'relative',
+    borderRadius: theme.shape.borderRadius,
+    backgroundColor: fade(theme.palette.common.white, 0.15),
+    '&:hover': {
+      backgroundColor: fade(theme.palette.common.white, 0.25),
+    },
+    marginRight: theme.spacing(2),
+    marginLeft: 0,
+    width: '100%',
+    [theme.breakpoints.up('sm')]: {
+      marginLeft: theme.spacing(3),
+      width: 'auto',
+    },
+  },
+  searchIcon: {
+    padding: theme.spacing(0, 2),
+    height: '100%',
+    position: 'absolute',
+    pointerEvents: 'none',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  inputRoot: {
+    color: 'inherit',
+  },
+  inputInput: {
+    padding: theme.spacing(1, 1, 1, 0),
+    // vertical padding + font size from searchIcon
+    paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
+    transition: theme.transitions.create('width'),
+    width: '100%',
+    [theme.breakpoints.up('md')]: {
+      width: '20ch',
+    },
+  },
+  sectionDesktop: {
+    display: 'none',
+    [theme.breakpoints.up('md')]: {
+      display: 'flex',
+    },
+  },
+  sectionMobile: {
+    display: 'flex',
+    [theme.breakpoints.up('md')]: {
+      display: 'none',
+    },
+  },
+}));
+
+const Header = props => {
+  // return (
+  //   <React.Fragment>
+  //     <ElevationScroll {...props}>
+  //       <AppBar>
+  //         <Toolbar>
+  //           <Typography variant="h6">Scroll to Elevate App Bar</Typography>
+  //         </Toolbar>
+  //       </AppBar>
+  //     </ElevationScroll>
+  //     <Toolbar />
+  //   </React.Fragment>
+  // );
+
+  const classes = useStyles();
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = React.useState(null);
+
+  const isMenuOpen = Boolean(anchorEl);
+  const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);
+
+  const handleProfileMenuOpen = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleMobileMenuClose = () => {
+    setMobileMoreAnchorEl(null);
+  };
+
+  const handleMenuClose = () => {
+    setAnchorEl(null);
+    handleMobileMenuClose();
+  };
+
+  const handleMobileMenuOpen = (event) => {
+    setMobileMoreAnchorEl(event.currentTarget);
+  };
+
+  const menuId = 'primary-search-account-menu';
+  const renderMenu = (
+    <Menu
+      anchorEl={anchorEl}
+      anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+      id={menuId}
+      keepMounted
+      transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+      open={isMenuOpen}
+      onClose={handleMenuClose}
+    >
+      <MenuItem onClick={handleMenuClose}>Profile</MenuItem>
+      <MenuItem onClick={handleMenuClose}>My account</MenuItem>
+    </Menu>
+  );
+
+  const mobileMenuId = 'primary-search-account-menu-mobile';
+  const renderMobileMenu = (
+    <Menu
+      anchorEl={mobileMoreAnchorEl}
+      anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+      id={mobileMenuId}
+      keepMounted
+      transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+      open={isMobileMenuOpen}
+      onClose={handleMobileMenuClose}
+    >
+      <MenuItem>
+        <IconButton aria-label="show 4 new mails" color="inherit">
+          <Badge badgeContent={4} color="secondary">
+            <MailIcon />
+          </Badge>
+        </IconButton>
+        <p>Messages</p>
+      </MenuItem>
+      <MenuItem>
+        <IconButton aria-label="show 11 new notifications" color="inherit">
+          <Badge badgeContent={11} color="secondary">
+            <NotificationsIcon />
+          </Badge>
+        </IconButton>
+        <p>Notifications</p>
+      </MenuItem>
+      <MenuItem onClick={handleProfileMenuOpen}>
+        <IconButton
+          aria-label="account of current user"
+          aria-controls="primary-search-account-menu"
+          aria-haspopup="true"
+          color="inherit"
+        >
+          <AccountCircle />
+        </IconButton>
+        <p>Profile</p>
+      </MenuItem>
+    </Menu>
+  );
+
+  return (
+    <div className={`${classes.grow} c-Header`}>
+      <ElevationScroll>
+        <AppBar>
+          <Toolbar>
+            <IconButton
+              edge="start"
+              className={classes.menuButton}
+              color="inherit"
+              aria-label="open drawer"
+            >
+              <MenuIcon />
+            </IconButton>
+            <Typography className={classes.title} variant="h6" noWrap>
+              TODO Manager
+            </Typography>
+            <div className={classes.search}>
+              <div className={classes.searchIcon}>
+                <SearchIcon />
+              </div>
+              <InputBase
+                placeholder="Search…"
+                classes={{
+                  root: classes.inputRoot,
+                  input: classes.inputInput,
+                }}
+                inputProps={{ 'aria-label': 'search' }}
+              />
+            </div>
+            <div className={classes.grow} />
+            <div className={classes.sectionDesktop}>
+              <IconButton aria-label="show 4 new mails" color="inherit">
+                <Badge badgeContent={4} color="secondary">
+                  <MailIcon />
+                </Badge>
+              </IconButton>
+              <IconButton aria-label="show 17 new notifications" color="inherit">
+                <Badge badgeContent={17} color="secondary">
+                  <NotificationsIcon />
+                </Badge>
+              </IconButton>
+              <IconButton
+                edge="end"
+                aria-label="account of current user"
+                aria-controls={menuId}
+                aria-haspopup="true"
+                onClick={handleProfileMenuOpen}
+                color="inherit"
+              >
+                <AccountCircle />
+              </IconButton>
+            </div>
+            <div className={classes.sectionMobile}>
+              <IconButton
+                aria-label="show more"
+                aria-controls={mobileMenuId}
+                aria-haspopup="true"
+                onClick={handleMobileMenuOpen}
+                color="inherit"
+              >
+                <MoreIcon />
+              </IconButton>
+            </div>
+          </Toolbar>
+        </AppBar>
+      </ElevationScroll>
+      <Toolbar />
+      {renderMobileMenu}
+      {renderMenu}
+    </div>
+  );
+};
+
+Header.propTypes = {
+
+};
+
+export default Header;
+
+
+function ElevationScroll(props) {
+  const { children, window } = props;
+  const trigger = useScrollTrigger({
+    disableHysteresis: true,
+    threshold: 0,
+    target: window ? window() : undefined,
+  });
+
+  return React.cloneElement(children, {
+    elevation: trigger ? 4 : 0,
+  });
+}
+
+ElevationScroll.propTypes = {
+  children: PropTypes.element.isRequired,
+};

src/app/components/Header/Header.test.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import Header from './Header';
+
+describe('Header', () => {
+   it('renders without error', () => {
+
+   });
+});

src/app/components/Header/index.js

@@ -0,0 +1,3 @@
+import Header from './Header.jsx';
+
+export default Header;

src/app/components/List/List.component.scss

@@ -0,0 +1,99 @@
+.c-List {
+  
+    width: 20%;
+    transition: all 0.3s ease-in-out;
+
+    ::-webkit-scrollbar {
+        width: 10px;          
+    }
+    
+    ::-webkit-scrollbar-thumb {   
+        border-radius: 30px;
+        box-shadow: inset 2px 2px 2px rgba(255,255,255,.25), inset -2px -2px 2px rgba(0,0,0,.25);
+    }
+    
+    // ::-webkit-scrollbar-track {     
+    //     // background-color: #fff;
+    //     // background: linear-gradient(to right,#201c29,#201c29 1px,#100e17 1px,#100e17);
+    // }
+
+    &:not(:first-child) {
+        margin-left: 1rem;
+    }
+
+    &:not(:last-child) {
+        margin-right: 1rem;
+    }
+
+    .c-List__container--modifier {
+        transition: all 0.3s ease-in-out;
+        border-radius: 3px;
+        // background: #ccc;
+        border: 1px solid #ccc;
+        backdrop-filter: blur(10px);
+        padding: 0.4rem;
+        color: #333;
+
+        .c-List__title {
+            cursor: pointer;
+            font-weight: bold;
+            font-size: 1rem;
+            padding: 0.2rem 0.2rem 0;
+            color: #ccc;
+        }
+
+        .c-List__body {
+            // max-height: 400px;
+            margin-right: -10px;
+            overflow-y: scroll;
+            padding: 0 0.2rem;
+        }
+
+        .c-List__empty-list {
+            background: rgba(255, 255, 255, 0.3);
+            cursor: pointer;
+            border-radius: 5px;
+            transition: all 0.3s ease-in-out;
+            padding: 6px;
+            &:hover {
+                background: rgba(255, 255, 255, 0.5);
+            }
+
+            .c-List__empty-list__new-list-textbox, .c-List__empty-list__new-list-button {
+                width: 100%;
+            }
+
+            .c-List__empty-list__new-list-textbox {
+                margin-bottom: 5px;
+                border-radius: 5px;
+                padding: 7px;
+            }
+
+            &.adding {
+                background: #ccc;
+            }
+        }
+
+        .c-List__new-card-form {
+            // background: #ccc;
+            padding: 0.2rem;
+            .c-List__new-card-textbox {
+                border-radius: 5px;
+                width: 100%;
+                background: #eee;
+                min-height: 4.5rem;
+                padding: 0.5rem;
+                font-size: 0.9rem;
+
+                &:focus {
+                    border: none;
+                    outline: none;
+                }
+            }
+            .c-List__new-card-button {
+
+            }
+        }
+    }
+
+}

src/app/components/List/List.jsx

@@ -0,0 +1,142 @@
+import React, {useState} from 'react';
+import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+import {useDrop} from 'react-dnd';
+import {Clear} from '@material-ui/icons';
+import {dispatchCardPosition} from './../../pages/Home/actions'
+import {Card, AddCardButton, AddListButton} from '../'
+import ItemTypes from './../../pages/Home/ItemTypes'
+import './List.component.scss';
+
+// document.body.addEventListener('click', (event) => {
+//   if (!(event.target.classList.contains('c-List__empty-list') || event.target.classList.contains('c-List__empty-list__new-list-form'))) {
+//     setAdding(false);
+//   }
+// }, true); 
+/* eslint no-unused-vars: 0 */
+const List = props => {
+  const {index} = props;
+  const {cards, displayName, id} = props.list;
+  const [addingList, setAddingList] = useState(false);
+  const [addingCard, setAddingCard] = useState(false);
+  const [cardsInState, setCardsInState] = useState(cards);
+  const [{isOver}, drop] = useDrop({
+    accept: ItemTypes.CARD,
+    drop: (item, monitor) => {
+      // console.log(id + ' ' + item.listId)
+      if (id !== item.listId) {
+        pushCard(item.card);
+      }
+      return {listId: id}
+    },
+    collect: (monitor) => ({
+      isOver: !!monitor.isOver()
+    }),
+  })
+
+  const pushCard = (card) => {
+    // cardsInState.forEach(card => console.log(card.id))
+    // console.log(card.id)
+    // console.log("in push " + id)
+    const newState = [...cardsInState, card]
+    // console.log(newState)
+    setCardsInState(newState)
+    // console.log(cardsInState)
+    const postBody = {[id]: newState}
+    fetch('http://localhost:3001/todos',
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(postBody, null, "  ")
+      })
+      .then((response) => response.json())
+      .then((data) => {
+        console.log('Success:', data);
+        // history.push('/display/forms')
+      })
+      .catch((error) => {
+        console.error('Error:', error);
+      });
+	}
+
+	const removeCard = (index, listId) => {
+    console.log("in remove " + listId)
+    const clone = []
+    Object.assign(clone, cardsInState)
+    clone.splice(index, 1)
+    console.log(clone)
+    setCardsInState(clone)
+	}
+
+	const moveCard = (dragIndex, hoverIndex) => {		
+		const dragCard = cardsInState[dragIndex];
+    const clone = []
+    Object.assign(clone, cardsInState)
+    clone.splice(dragIndex, 1)
+    clone.splice(hoverIndex, 0, dragCard)
+    setCardsInState(clone)
+  }
+
+  const addCardToList = (event) => {
+    const data = {}
+    const form = document.forms['c-List__new-card-form']
+    const inputField = [...form.getElementsByTagName('textarea')][0]
+    // inputFields && inputFields.forEach((inputField) => {
+    //   data[inputField.id] = inputField.value && inputField.value.trim()
+    // })
+
+    const newState = [...cardsInState, {title: "test title", description: inputField.value, activity: []}]
+    setCardsInState(newState)
+    setAddingCard(false)
+    inputField.value = ""
+  }
+  const EmptyList = () => {
+    return <div className="col-3 c-Main__list-col">
+      <div className={`c-List__empty-list${addingList ? " adding" : ""}`}>
+        {addingList ?
+          <form id="c-List__emptyList__add-list" className="c-List__empty-list__new-list-form" style={{height: "100%", width: "100%"}}>
+            <input type="text" className="c-List__empty-list__new-list-textbox" placeholder="Enter list title" />
+            <span className="c-List__empty-list__new-list-button"><button type="button" value="Add">Add List</button></span>
+          </form> :  <AddListButton addhandler={() => setAddingList(true)} />
+        }
+      </div>
+    </div>
+  }
+
+  const cardRenders = cardsInState && cardsInState.map((card, key) => <Card
+        key={key} index={key} listId={id} card={card}
+        removeCard={removeCard} moveCard={moveCard} />)
+    
+  return <div className='c-List' ref={drop}>
+        {
+          cardRenders ? <div className="c-List__container--modifier">
+            <div className="c-List__title">{displayName}</div>
+            <div id={`c-List__body-${index}`} className="c-List__body">{cardRenders}</div>
+            {addingCard ?
+              <form id="c-List__new-card-form" className="c-List__new-card-form" style={{height: "100%", width: "100%"}}>
+                <textarea type="text" className="c-List__new-card-textbox" placeholder="Enter a title for this card" />
+                <span className="c-List__new-card-button"><button type="button" className="btn btn-success" value="Add Card" onClick={addCardToList}>Add Card</button></span>
+                <Clear fontSize="medium" style={{marginLeft: '0.5rem', color: '#ccc', cursor: 'pointer'}} onClick={() => setAddingCard(false)} />
+              </form> : <div className="c-List__add-card-button"><AddCardButton addhandler={setAddingCard} /></div>
+            }
+          </div> :  <EmptyList />
+        }
+      </div>
+};
+
+List.propTypes = {
+  list: PropTypes.object,
+  index: PropTypes.number
+};
+
+const mapDispatchToProps = {
+  dispatchCardPosition
+}
+
+
+export default connect(
+  null,
+  mapDispatchToProps
+)(List);

src/app/components/List/List.test.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import List from './List';
+
+describe('List', () => {
+   it('renders without error', () => {
+
+   });
+});

src/app/components/List/index.js

@@ -0,0 +1,3 @@
+import List from './List.jsx';
+
+export default List;

src/app/components/ListControlButton/ListControlButton.component.scss

@@ -0,0 +1,3 @@
+.c-ListControlButton {
+  
+}

src/app/components/ListControlButton/ListControlButton.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './ListControlButton.component.scss';
+
+const ListControlButton = props => {
+  return (
+    <div className='c-ListControlButton'>
+      In Component ListControlButton
+    </div>
+  );
+};
+
+ListControlButton.propTypes = {
+
+};
+
+export default ListControlButton;

src/app/components/ListControlButton/ListControlButton.test.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import ListControlButton from './ListControlButton';
+
+describe('ListControlButton', () => {
+   it('renders without error', () => {
+
+   });
+});

src/app/components/ListControlButton/index.js

@@ -0,0 +1,3 @@
+import ListControlButton from './ListControlButton.jsx';
+
+export default ListControlButton;

src/app/components/Main/Main.component.scss

@@ -0,0 +1,19 @@
+.c-Main {
+    height: 100%;
+    font-size: 0.8rem;
+    &.container {
+        max-width: unset;
+        color: #eee;
+        .c-Main__list-row {
+            height: 100%;
+            .c-Main__list-col {
+                &:first-child {
+                    padding-left: 0;
+                }
+                &:last-child {
+                    padding-right: 0;
+                }
+            }
+        }
+    }
+}

src/app/components/Main/Main.jsx

@@ -0,0 +1,40 @@
+import React, {useEffect, useState} from 'react';
+// import {DndProvider} from 'react-dnd';
+// import HTML5Backend from 'react-dnd-html5-backend';
+import {BoardHeader, List} from './../';
+import {todos} from './../../config/todos.json';
+import './Main.component.scss';
+
+const Main = props => {
+  const [todoList, setTodoList] = useState({})
+
+  useEffect(() => {
+    fetch('http://localhost:3001/todos')
+      .then(res => res.json())
+      .then(data => {
+        console.log(JSON.parse(data))
+        setTodoList(JSON.parse(data).todoList.lists)
+      })
+      .catch((err) => {
+        console.log("Error: " + err)
+        setTodoList(todos.lists)
+      })
+  }, [])
+  const todoRenders = todoList && Object.keys(todoList).map((todo, key) => <List list={todoList[todo]} index={key + 1} key={key} />)
+  return (
+    <div className="container c-Main">
+      <div className="row">
+        <BoardHeader />
+      </div>
+      <div className="row c-Main__list-row">
+        {todoRenders}
+      </div>
+    </div>
+  );
+};
+
+Main.propTypes = {
+
+};
+
+export default Main;

src/app/components/Main/Main.test.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import Main from './Main';
+
+describe('Main', () => {
+   it('renders without error', () => {
+
+   });
+});

src/app/components/Main/index.js

@@ -0,0 +1,3 @@
+import Main from './Main.jsx';
+
+export default Main;

src/app/components/PageLoader/PageLoader.component.scss

@@ -0,0 +1,125 @@
+@import url('https://fonts.googleapis.com/css?family=Indie+Flower');
+
+.c-PageLoader {
+	// margin-top: 50%;	
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: rgba(0,0,0,0.3);  
+    width: 100%;  
+    height: 100%;  
+    position: fixed;  
+    top:0px;  
+    left:0px;  
+    z-index: 20;
+
+	// .is-animate {
+	// 		background: #ffb200;
+	// 		box-sizing: border-box;
+	// 		font-size: 66px;
+	// 		display: -webkit-inline-box;
+	// 		padding: 14px;
+	// 		border-radius: 7px;
+	// }
+	// .is-animate > div {
+	// 		animation-name: style;
+	// 		display: -webkit-inline-box;
+	// 		color: #fff;
+	// 		padding: 9px;
+	// 		background: #ffb200;
+	// 		font-family: 'Indie Flower', cursive;
+	// 		box-shadow: 2px 2px 9px 2px;
+	// }
+	// .l{
+	// 	animation: letterspacing 1s infinite alternate cubic-bezier(.2, 0, 0, 1);
+	// }
+	
+	// .is-animate > div {
+	// 	animation-duration: 1s;
+	// 	animation-fill-mode: both;
+	// 	animation-iteration-count: infinite;
+	// }
+	
+	// .is-animate > div:nth-child(1) { animation-delay: 0.0s }
+	// .is-animate > div:nth-child(2) { animation-delay: 0.1s }
+	// .is-animate > div:nth-child(3) { animation-delay: 0.2s }
+	// .is-animate > div:nth-child(4) { animation-delay: 0.3s }
+	// .is-animate > div:nth-child(5) { animation-delay: 0.4s }
+	// .is-animate > div:nth-child(6) { animation-delay: 0.5s }
+	// .is-animate > div:nth-child(7) { animation-delay: 0.6s }
+	
+	
+	// @keyframes style {
+	// 	from {
+	// 		transform: scale3d(1, 1, 1);
+	// 	}
+	// 	30% {
+	// 		box-shadow: 0px 0px 0px 0px;
+	// 		transform: scale3d(1.25, 0.75, 1);
+	// 	}
+	// 	40% {
+	// 		transform: scale3d(0.75, 1.25, 1);
+	// 	}
+	// 	50% {
+	// 		transform: scale3d(1.15, 0.85, 1);
+	// 	}
+	// 	65% {
+	// 		transform: scale3d(.95, 1.05, 1);
+	// 	}
+	// 	75% {
+	// 		transform: scale3d(1.05, .95, 1);
+	// 	}
+	// 	to {
+	// 		transform: scale3d(1, 1, 1);
+	// 	}
+	// }
+	
+	
+	// @keyframes letterspacing {
+	// 	0% {
+	// 		filter: blur(0.1rem);
+	// 	}      
+	// 	100% {
+	// 		filter: blur(0.5rem);
+	// 	}
+	// 	to {
+	// 		letter-spacing: none;
+	// 		filter: blur(0rem);
+	// 	}
+	// }
+
+
+	.c-PageLoader__lds-ripple {
+		display: inline-block;
+		position: relative;
+		width: 80px;
+		height: 80px;
+		div {
+			position: absolute;
+			border: 4px solid #fff;
+			opacity: 1;
+			border-radius: 50%;
+			animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+			&:nth-child(2) {
+				animation-delay: -0.5s;
+			}
+		}
+	}
+	
+	@keyframes lds-ripple {
+		0% {
+			top: 36px;
+			left: 36px;
+			width: 0;
+			height: 0;
+			opacity: 1;
+		}
+		100% {
+			top: 0px;
+			left: 0px;
+			width: 72px;
+			height: 72px;
+			opacity: 0;
+		}
+	}
+}

src/app/components/PageLoader/PageLoader.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+const PageLoader = props => {
+  return (
+    <div className='c-PageLoader'>
+      <div className="c-PageLoader__lds-ripple">
+        <div></div>
+        <div></div>
+      </div>
+    </div>
+  )
+      // <div className='c-PageLoader'>
+      //   <div className='is-animate'>
+      //     <div className='l'>l</div>
+      //     <div className='l'>o</div>
+      //     <div className='l'>a</div>
+      //     <div className='l'>d</div>
+      //     <div className='l'>i</div>
+      //     <div className='l'>n</div>
+      //     <div className='l'>g</div>
+      //   </div>
+      // </div>
+};
+
+PageLoader.defaultProps = {
+
+};
+
+PageLoader.propTypes = {
+
+};
+
+export default PageLoader;

src/app/components/PageLoader/PageLoader.test.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import PageLoader from './PageLoader';
+
+describe('PageLoader', () => {
+   it('renders without error', () => {
+
+   });
+});

src/app/components/PageLoader/index.js

@@ -0,0 +1,3 @@
+import PageLoader from './PageLoader.jsx';
+
+export default PageLoader;

src/app/components/index.js

@@ -0,0 +1,29 @@
+/* PLOP_INJECT_IMPORT */
+import BoardHeader from './BoardHeader';
+import CardEditButton from './CardEditButton';
+import ListControlButton from './ListControlButton';
+import CardContextMenu from './CardContextMenu';
+import AddListButton from './AddListButton';
+import AddCardButton from './AddCardButton';
+import Card from './Card';
+import List from './List';
+import BoardTitle from './BoardTitle';
+import Main from './Main';
+import Aside from './Aside';
+import Header from './Header';
+
+export {
+  /* PLOP_INJECT_EXPORT */
+	BoardHeader,
+	CardEditButton,
+	ListControlButton,
+	CardContextMenu,
+	AddListButton,
+	AddCardButton,
+	Card,
+	List,
+	BoardTitle,
+	Main,
+	Aside,
+	Header,
+}

src/app/config/todos.json

@@ -0,0 +1,84 @@
+{
+    "todos": {
+        "lists": {
+            "pending": {
+                "displayName": "Pending",
+                "id": "list_pending",
+                "cards": [
+                    {
+                        "title": "TODO 4",
+                        "description": "Description 4",
+                        "activity": []
+                    },
+                    {
+                        "title": "TODO 7",
+                        "description": "Description 7",
+                        "activity": []
+                    },
+                    {
+                        "title": "TODO 8",
+                        "description": "Description 8",
+                        "activity": []
+                    },
+                    {
+                        "title": "TODO 10",
+                        "description": "Description 10",
+                        "activity": []
+                    },
+                    {
+                        "title": "TODO 11",
+                        "description": "Description 11",
+                        "activity": []
+                    },
+                    {
+                        "title": "TODO 13",
+                        "description": "Description 13",
+                        "activity": []
+                    }
+                ]
+            },
+            "inprogress": {
+                "displayName": "In Progress",
+                "id": "list_inprogress",
+                "cards": [
+                    {
+                        "title": "TODO 1",
+                        "description": "Description 1",
+                        "activity": []
+                    },
+                    {
+                        "title": "TODO 2",
+                        "description": "Description 2",
+                        "activity": []
+                    },
+                    {
+                        "title": "TODO 3",
+                        "description": "Description 3",
+                        "activity": []
+                    }
+                ]
+            },
+            "completed": {
+                "displayName": "Completed",
+                "id": "list_completed",
+                "cards": [
+                    {
+                        "title": "TODO 6",
+                        "description": "Description 1",
+                        "activity": []
+                    },
+                    {
+                        "title": "TODO 9",
+                        "description": "Description 2",
+                        "activity": []
+                    },
+                    {
+                        "title": "TODO 5",
+                        "description": "Description 3",
+                        "activity": []
+                    }
+                ]
+            }
+        }
+    }
+}

src/app/main.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import thunk from 'redux-thunk'
+import Immutable from 'immutable'
+import {createStore, applyMiddleware, compose} from 'redux'
+import reducer from './reducer';
+import Router from "./router";
+import 'bootstrap/dist/css/bootstrap.min.css'
+import './main.scss'
+import * as serviceWorker from './serviceWorker';
+
+const composeEnhancers =
+typeof window === 'object' &&
+window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?   
+window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
+  serialize: { // prettier-ignore
+    immutable: Immutable
+  }
+}) : compose;
+const store = createStore(reducer, composeEnhancers(applyMiddleware(thunk)))
+
+ReactDOM.render(<Router store={store} />, document.getElementById("root"));
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://bit.ly/CRA-PWA
+// serviceWorker.unregister();
+serviceWorker.register();

src/app/main.scss

@@ -0,0 +1,4 @@
+@import "./styles/variables";
+@import "./styles/general";
+@import "./styles/components";
+@import "./styles/pages";

src/app/pages/Home/Home.jsx

@@ -0,0 +1,60 @@
+import React, {useEffect} from 'react';
+import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+import {createPropsSelector} from 'reselect-immutable-helpers';
+import {CssBaseline} from '@material-ui/core';
+import {DndProvider} from 'react-dnd'
+import Backend from 'react-dnd-html5-backend'
+import {isMobile} from './selectors';
+import {dispatchDeviceType} from './actions';
+import {Header, Main, Aside} from './../../components';
+
+const Home = props => {
+  const {dispatchDeviceType} = props
+  useEffect(() => {
+    dispatchDeviceType({isMobile: isMobile()})
+    document.body.classList.add('body-board-view')
+  }, [dispatchDeviceType])
+
+  /* eslint no-useless-escape: 0 */
+  const isMobile = (() => {
+    var check = false;
+    (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
+    return check;
+  });
+
+  return <DndProvider backend={Backend}>
+      <div className="c-Home">
+        <CssBaseline />
+        <Header />
+        <div className="c-Home__content container">
+          <div className="row c-Home__content-row">
+            <div className="col-10 c-Home__main-container body-board-view">
+              <Main />
+            </div>
+            <div className="col-2 c-Home__aside-container">
+              <Aside />
+            </div>
+          </div>
+        </div>
+      </div>
+    </DndProvider>
+};
+
+Home.propTypes = {
+  isMobile: PropTypes.bool,
+  dispatchDeviceType: PropTypes.func
+}
+
+const mapStateToProps = createPropsSelector({
+  isMobile: isMobile
+})
+
+const mapDispatchToProps = {
+  dispatchDeviceType
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Home);

src/app/pages/Home/Home.module.scss

@@ -0,0 +1,22 @@
+.c-Home {
+    height: 100%;
+    .c-Home__content.container {
+        max-width: unset;
+        margin-bottom: 4rem;
+        height: 100%;
+
+        .c-Home__content-row {
+            height: 100%;
+
+            .c-Home__main-container {
+                height: 100%;
+                padding: 1rem;
+            }
+            .c-Home__aside-container {
+                height: 100%;
+                background: #eee;
+            }
+        }
+    }
+
+}

src/app/pages/Home/Home.test.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import Home from './Home';
+
+describe('Home', () => {
+   it('renders without error', () => {
+
+   });
+});

src/app/pages/Home/ItemTypes.js

@@ -0,0 +1,6 @@
+const ItemTypes = {
+    CARD: 'card',
+    LIST: 'list'
+}
+
+export default ItemTypes;

src/app/pages/Home/actions.js

@@ -0,0 +1,32 @@
+export const UPDATE_FORM_VALUES = 'UPDATE_SECTION_DISPLAY_FORM_VALUES'
+export const UPDATE_FORM_ERRORS = 'UPDATE_SECTION_DISPLAY_FORM_ERRORS'
+export const IS_MOBILE = 'IS_MOBILE';
+export const DISPATCH_CARD_POSITION = 'DISPATCH_CARD_POSITION';
+
+export const dispatchDeviceType = (isMobile) => {
+    return {
+        type: IS_MOBILE,
+        payload: isMobile
+    }
+}
+
+export const updateFormValues = (formValues) => {
+    return {
+        type: UPDATE_FORM_VALUES,
+        payload: formValues
+    }
+}
+
+export const updateFormErrors = (formErrors) => {
+    return {
+        type: UPDATE_FORM_ERRORS,
+        payload: formErrors
+    }
+}
+
+export const dispatchCardPosition = (formErrors) => {
+    return {
+        type: DISPATCH_CARD_POSITION,
+        payload: formErrors
+    }
+}

src/app/pages/Home/index.js

@@ -0,0 +1,3 @@
+import Home from './Home.jsx';
+
+export default Home;

src/app/pages/Home/reducer.js

@@ -0,0 +1,18 @@
+import Immutable from 'immutable'
+import {IS_MOBILE, DISPATCH_CARD_POSITION, UPDATE_FORM_ERRORS, UPDATE_FORM_VALUES} from './actions'
+
+const initialState = Immutable.Map()
+
+const reducer = (state = initialState, action) => {
+    switch (action.type) {
+        case IS_MOBILE:
+        case DISPATCH_CARD_POSITION:
+        case UPDATE_FORM_ERRORS:
+        case UPDATE_FORM_VALUES:
+            return state.mergeDeep(action.payload)
+        default:
+            return state
+    }
+}
+
+export default reducer

src/app/pages/Home/selectors.js

@@ -0,0 +1,15 @@
+import {createSelector} from 'reselect'
+import {createGetSelector} from 'reselect-immutable-helpers'
+
+const getData = ({data}) => data
+
+export const getHome = createSelector(
+    getData,
+    (dataState) => {
+        return dataState.pages.home
+    }
+)
+
+export const isMobile = createGetSelector(getHome, 'isMobile')
+export const getFormErrors = createGetSelector(getHome, 'formErrors')
+export const getFormValues = createGetSelector(getHome, 'formValues')

src/app/pages/index.js

@@ -0,0 +1,9 @@
+/* PLOP_INJECT_IMPORT */
+import LoginForm from './LoginForm';
+import Home from './Home';
+
+export {
+  /* PLOP_INJECT_EXPORT */
+	LoginForm,
+	Home,
+}

src/app/reducer.js

@@ -0,0 +1,10 @@
+import {combineReducers} from 'redux'
+import homeReducer from './pages/Home/reducer'
+
+export default combineReducers({
+    data: combineReducers({
+        pages: combineReducers({
+            home: homeReducer
+        })
+    })
+})

src/app/router.jsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import {Provider} from 'react-redux'
+import {BrowserRouter, Route} from 'react-router-dom';
+import Loadable from 'react-loadable'
+import PageLoader from './components/PageLoader';
+
+export const LoadableHome = Loadable({
+    loader: () => import('./pages/Home'),
+    loading: PageLoader
+})
+
+class Router extends React.Component {
+
+    render() {
+        const {store} = this.props
+        return (
+            <Provider store={store}>
+                <BrowserRouter basename="subset_trello">
+                    <Route exact path="/" component={LoadableHome} />
+                    <Route exact path="/todos/manage" component={LoadableHome} />
+                </BrowserRouter>
+            </Provider>
+        )
+    }
+}
+
+Router.propTypes = {
+    store: PropTypes.object
+}
+
+export default Router

src/app/serviceWorker.js

@@ -0,0 +1,141 @@
+// This optional code is used to register a service worker.
+// register() is not called by default.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on subsequent visits to a page, after all the
+// existing tabs open on the page have been closed, since previously cached
+// resources are updated in the background.
+
+// To learn more about the benefits of this model and instructions on how to
+// opt-in, read https://bit.ly/CRA-PWA
+
+const isLocalhost = Boolean(
+  window.location.hostname === 'localhost' ||
+    // [::1] is the IPv6 localhost address.
+    window.location.hostname === '[::1]' ||
+    // 127.0.0.0/8 are considered localhost for IPv4.
+    window.location.hostname.match(
+      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+    )
+);
+
+export function register(config) {
+  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+    // The URL constructor is available in all browsers that support SW.
+    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
+    if (publicUrl.origin !== window.location.origin) {
+      // Our service worker won't work if PUBLIC_URL is on a different origin
+      // from what our page is served on. This might happen if a CDN is used to
+      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
+      return;
+    }
+
+    window.addEventListener('load', () => {
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+
+      if (isLocalhost) {
+        // This is running on localhost. Let's check if a service worker still exists or not.
+        checkValidServiceWorker(swUrl, config);
+
+        // Add some additional logging to localhost, pointing developers to the
+        // service worker/PWA documentation.
+        navigator.serviceWorker.ready.then(() => {
+          console.log(
+            'This web app is being served cache-first by a service ' +
+              'worker. To learn more, visit https://bit.ly/CRA-PWA'
+          );
+        });
+      } else {
+        // Is not localhost. Just register service worker
+        registerValidSW(swUrl, config);
+      }
+    });
+  }
+}
+
+function registerValidSW(swUrl, config) {
+  navigator.serviceWorker
+    .register(swUrl)
+    .then(registration => {
+      registration.onupdatefound = () => {
+        const installingWorker = registration.installing;
+        if (installingWorker == null) {
+          return;
+        }
+        installingWorker.onstatechange = () => {
+          if (installingWorker.state === 'installed') {
+            if (navigator.serviceWorker.controller) {
+              // At this point, the updated precached content has been fetched,
+              // but the previous service worker will still serve the older
+              // content until all client tabs are closed.
+              console.log(
+                'New content is available and will be used when all ' +
+                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
+              );
+
+              // Execute callback
+              if (config && config.onUpdate) {
+                config.onUpdate(registration);
+              }
+            } else {
+              // At this point, everything has been precached.
+              // It's the perfect time to display a
+              // "Content is cached for offline use." message.
+              console.log('Content is cached for offline use.');
+
+              // Execute callback
+              if (config && config.onSuccess) {
+                config.onSuccess(registration);
+              }
+            }
+          }
+        };
+      };
+    })
+    .catch(error => {
+      console.error('Error during service worker registration:', error);
+    });
+}
+
+function checkValidServiceWorker(swUrl, config) {
+  // Check if the service worker can be found. If it can't reload the page.
+  fetch(swUrl, {
+    headers: { 'Service-Worker': 'script' },
+  })
+    .then(response => {
+      // Ensure service worker exists, and that we really are getting a JS file.
+      const contentType = response.headers.get('content-type');
+      if (
+        response.status === 404 ||
+        (contentType != null && contentType.indexOf('javascript') === -1)
+      ) {
+        // No service worker found. Probably a different app. Reload the page.
+        navigator.serviceWorker.ready.then(registration => {
+          registration.unregister().then(() => {
+            window.location.reload();
+          });
+        });
+      } else {
+        // Service worker found. Proceed as normal.
+        registerValidSW(swUrl, config);
+      }
+    })
+    .catch(() => {
+      console.log(
+        'No internet connection found. App is running in offline mode.'
+      );
+    });
+}
+
+export function unregister() {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.ready
+      .then(registration => {
+        registration.unregister();
+      })
+      .catch(error => {
+        console.error(error.message);
+      });
+  }
+}

src/app/setupTests.js

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom/extend-expect';

src/app/styles/_general.scss

@@ -0,0 +1,23 @@
+html, body, #root {
+    height: 100%;
+}
+
+body {
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+      'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+      sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    &.body-board-view {
+        background-position: 50%;
+        background-size: cover;
+        overflow: hidden;
+        background-image: url('https://trello-backgrounds.s3.amazonaws.com/SharedBackground/1537x1920/5f72c67b5e9036f5ec4980298c7a22ff/photo-1584433213328-fad675bc3052.jpg');
+    }
+}
+  
+code {
+font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

src/app/styles/_pages.scss

@@ -0,0 +1 @@
+@import './../pages/Home/Home.module';

src/index.js

@@ -0,0 +1 @@
+import './app/main';