Gael Flores - Contact Book

package.json

@@ -22,7 +22,8 @@
     "webpack": "^3.3.0",
     "webpack-dev-middleware": "^1.6.1",
     "webpack-dev-server": "^2.5.1",
-    "webpack-hot-middleware": "^2.10.0"
+    "webpack-hot-middleware": "^2.10.0",
+    "font-awesome": "^4.7.0"
   },
   "devDependencies": {
     "babel-eslint": "^7.2.3",
@@ -42,6 +43,7 @@
     "eslint-plugin-import": "^2.7.0",
     "eslint-plugin-jsx-a11y": "^6.0.2",
     "eslint-plugin-react": "^7.1.0",
+    "file-loader": "^0.11.2",
     "node-sass": "^4.5.3",
     "react-hot-loader": "^1.3.0",
     "react-render": "^1.1.0",

src/app/app.jsx

@@ -1,16 +1,33 @@
-import React from 'react';
-
 import './app.scss';
-import { Column, Row, Title, Button } from '../components';
 
-const onAddClick = (event) => {
-};
+import React, { Component } from 'react';
+
+import { setup } from '../client/setup.js';
+import { Main } from '../ui/Main.jsx';
+
+var app = null;
+
+export const getApp = () => {
+    return app;
+}
 
-const App = () => (
-  <Column className="app">
-    <Row><Title>Contact Book</Title></Row>
-    <Row><Button label="Add Contact" onClick={onAddClick} /></Row>
-  </Column>
-);
+export class App extends Component {
+    componentWillMount(){
+        app = this;
 
-export default App;
+        this.setState({});
+    }
+    componentDidMount(){
+        setup();
+        this.setState({isAppMounted: true});
+    }
+    render() {
+        return ( this.state.isAppMounted == true ?
+            <Main />
+        :
+            <div className="not-mounted">
+                not mounted bro
+            </div>
+        );
+    }
+}

src/app/app.scss

@@ -1,6 +1,40 @@
-.app {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
+html {
+    width: 100%;
+    height: 100%;
+    font-family: 'Titillium Web', sans-serif;
+
+    body {
+        width: 100%;
+        height: 100%;
+        margin: 0px;
+
+        #render-target {
+            width: 100%;
+            height: 100%;
+
+            .main {
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
 }
+
+.clickable-block{
+    overflow: hidden;
+    position: relative;
+}
+.clickable-block:hover::after {
+    position:absolute;
+    display:block;
+    z-index: 9;
+    background-color: black;
+    opacity: 0.2;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 100%;
+    content: '';
+    cursor: pointer;
+    border-radius: inherit;
+}

src/client/contacts/manage-contacts.js

@@ -0,0 +1,30 @@
+export const addNewContact = function(contact){
+    var contactList = getState()['contactList'];
+    contactList.push(contact);
+    setContactList(contactList);
+}
+
+export const editContact = function(index, contact){
+    var contactList = getState()['contactList'];
+    contactList[index] = contact;
+    setContactList(contactList);
+}
+export const getContactFromIndex = function(index){
+    var contactList = getState()['contactList'];
+    return contactList[index];
+}
+
+export const removeContact = function(index){
+    var contactList = getState()['contactList'];
+    contactList.splice(index, 1)
+    setContactList(contactList);
+}
+
+export const toggleContactFavorite = function(index){
+    var contactList = getState()['contactList'];
+    var contact = contactList[index];
+
+    contact.isFavorite = !contact.isFavorite;
+    contactList[index] = contact;
+    setContactList(contactList);
+}

src/client/router/change-page.js

@@ -0,0 +1,19 @@
+export const goToHome = function(){
+    setCurrentPage('home');
+}
+
+export const goToContactList = function(){
+    setCurrentPage('contact-list');
+}
+export const goToEditContact = function(contactIndex){
+    setCurrentPage('edit-contact');
+    setCurrentlyViewedContact(contactIndex);
+}
+
+export const goToFavoriteList = function(){
+    setCurrentPage('favorite-list');
+}
+
+export const goToAddNewContact = function(){
+    setCurrentPage('add-new-contact');
+}

src/client/setup.js

@@ -0,0 +1,5 @@
+import { setupState } from './state/setup-state.js';
+
+export const setup = function(){
+    setupState();
+}

src/client/state/manage-state.js

@@ -0,0 +1,47 @@
+import { getApp } from '../../app/app.jsx';
+
+export const getState = function(){
+    return getApp().state;
+}
+
+export const setState = function(fields){
+    getApp().setState(fields);
+}
+
+export const setCurrentPage = function(page){
+    setState({ currentPage: page });
+}
+
+export const getCurrentPage = function(){
+    return getState()['currentPage'];
+}
+
+export const setContactList = function(contactList){
+    setState({ contactList: contactList });
+}
+
+export const getContactList = function(){
+    return getState()['contactList'];
+}
+
+export const setCurrentlyViewedContact = function(index){
+    return setState({currentlyViewedContact: index});
+}
+
+export const getCurrentlyViewedContact = function(){
+    return getState()['currentlyViewedContact'];
+}
+
+
+
+window.getState = getState;
+window.setState = setState;
+
+window.setCurrentPage = setCurrentPage;
+window.getCurrentPage = getCurrentPage;
+
+window.setContactList = setContactList;
+window.getContactList = getContactList;
+
+window.setCurrentlyViewedContact = setCurrentlyViewedContact;
+window.getCurrentlyViewedContact = getCurrentlyViewedContact;

src/client/state/setup-state.js

@@ -0,0 +1,10 @@
+import { setState, getState } from './manage-state.js';
+
+export const setupState = function(){
+    setCurrentPage('home');
+    setContactList([
+        {firstName: "Gael", lastName: "Flores", email: "flores.gael@gmail.com", phone: "0123456789", isFavorite: true},
+        {firstName: "Alberto", lastName: "Ronaldo", email: "alberto@gmail.com", phone: "17176789", isFavorite: false},
+        {firstName: "Toto", lastName: "Tata", email: "toto@gmail.com", phone: "0101010101", isFavorite: true}
+    ]);
+};