Initial commit

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

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

src/app/components/Header/Header.jsx

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

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/PageLoader/PageLoader.component.scss

@@ -0,0 +1,82 @@
+@import url('https://fonts.googleapis.com/css?family=Indie+Flower');
+
+.c-PageLoader {
+	margin-top: 50%;	
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	.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);
+		}
+	}
+}

src/app/components/PageLoader/PageLoader.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+const PageLoader = props => {
+  return (
+      <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,7 @@
+/* PLOP_INJECT_IMPORT */
+import Header from './Header';
+
+export {
+  /* PLOP_INJECT_EXPORT */
+	Header,
+}

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,20 @@
+@import "./styles/variables";
+@import "./styles/general";
+@import "./styles/components";
+@import "./styles/pages";
+
+
+
+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;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

src/app/pages/Home/Home.jsx

@@ -0,0 +1,45 @@
+import React, {useEffect} from 'react';
+import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+import {createPropsSelector} from 'reselect-immutable-helpers';
+import {isMobile} from './selectors';
+import {dispatchDeviceType} from './actions';
+import './Home.module.scss';
+
+const Home = props => {
+  const {dispatchDeviceType} = props
+  useEffect(() => {
+    dispatchDeviceType({isMobile: isMobile()})
+  }, [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 (
+    <div className="c-Home">
+      In Page Home
+    </div>
+  );
+};
+
+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,3 @@
+.c-Home {
+  
+}

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/actions.js

@@ -0,0 +1,24 @@
+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 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
+    }
+}

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,17 @@
+import Immutable from 'immutable'
+import {IS_MOBILE, UPDATE_FORM_ERRORS, UPDATE_FORM_VALUES} from './actions'
+
+const initialState = Immutable.Map()
+
+const reducer = (state = initialState, action) => {
+    switch (action.type) {
+        case IS_MOBILE:
+        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/index.js

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