Move timetable local state to Redux store

Author: howardyclo

meetingapp/app/actions/timetable.js

@@ -0,0 +1,31 @@
+/**
+ * Defines actions related to timetable.
+ *
+ * This approach is refered from Redux creator - gaearon's comments :
+ * https://github.com/rackt/redux/issues/291
+ */
+import Parse from '../modules/parse/index';
+
+export const REQUEST_SET_AVAILABLE_TIME = 'REQUEST_SET_AVAILABLE_TIME';
+export function requestSetAvailableTime() {
+	return {
+		type: REQUEST_SET_AVAILABLE_TIME,
+		payload: {}
+	}
+}
+
+export const CANCEL_SET_AVAILABLE_TIME = 'CANCEL_SET_AVAILABLE_TIME';
+export function cancelSetAvailableTime() {
+	return {
+		type: CANCEL_SET_AVAILABLE_TIME,
+		payload: {}
+	}
+}
+
+export const SET_AVAILABLE_TIME = 'SET_AVAILABLE_TIME';
+export function setAvailableTime(row, col) {
+	return {
+		type: SET_AVAILABLE_TIME,
+		payload: { row, col }
+	}
+}

meetingapp/app/components/Timetable/Timetable.css

@@ -9,11 +9,6 @@
     box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
   	padding: 2px;
   	color: rgba(0,0,0,0.8);
-  	transition: all 0.2s ease-in-out;
-}
-
-.timetable:hover {
-	box-shadow: 0 10px 3px rgba(0,0,0,0.12), 0 1px 8px rgba(0,0,0,0.24);
 }
 
 .timetable thead th {
@@ -38,7 +33,7 @@
 	transition: all 0.3s;
 }
 
-.timetable td.unavailable:hover {
+.timetable.settable td.unavailable:hover {
 	background-color: #dcdcdc;
 	color: white;
 }

meetingapp/app/components/Timetable/Timetable.js

@@ -1,4 +1,5 @@
 import React, { Component, PropTypes } from 'react';
+import * as TimetableActions from '../../actions/timetable';
 import classnames from 'classnames';
 import styles from './Timetable.css';
 
@@ -7,68 +8,26 @@ export default class Timetable extends Component {
 	/* we can init state here */
 	constructor(props) {
 		super(props);
-
-		this.state = {
-			timetable: this.initTimetable()
-		}
-	}
-
-	initTimetable = () => {
-
-		/* props */
-		const {days, start, end, diff} = this.props;
-
-		/**
-		 * timetable @type {Object Array} every time slots from starting hour to ending hour
-		 * [
-		 * 		{ 	
-		 * 			start, # @type {number} [start hour] 
-		 * 			end,   # @type {number} [start hour + diff]
-		 * 			cells: # @type {array}  [every day in weeks, e.g. cells[0] = Mon, cells[1] = Tue ...]
-		 * 			{ 
-		 * 				available # @type {boolean} [user at this time is available or not]
-		 * 			}
-		 * 		} 
-		 * ]
-		 */
-		let timetable = [];
-
-		for (let i = start ; i < end ; i += diff) {
-
-			let cells = [];
-
-			for (let day in days) {
-				cells.push({ available: false });
-			}
-
-			timetable.push({
-				start: i,
-				end: i + diff,
-				cells: cells
-			});
-		}
-
-		return timetable;
+		console.log(props);
 	}
 
-	handleSetAvailable = (rowIndex, colIndex) => {
-
-		let timetable = Object.assign([], this.state.timetable);
+	handleSetAvailableTime = (row, col) => {
+			
+		const { isSetting, onSetAvailableTime } = this.props;
 
-		timetable[rowIndex].cells[colIndex].available = !timetable[rowIndex].cells[colIndex].available;
-
-		this.setState({
-			timetable: timetable
-		});
+		if (isSetting)
+			onSetAvailableTime(row, col);
 	}
 
 	render() {
 
 		/* props */
-		const { days } = this.props;
+		const { days, timetable, settable } = this.props;
 
 		return (
-			<table className={styles.timetable}>
+			<table className={classnames(styles.timetable, {
+				[`${styles.settable}`]: settable
+			})}>
 				<thead>
 					<tr>
 						<th>Time</th>
@@ -78,7 +37,7 @@ export default class Timetable extends Component {
 					</tr>
 				</thead>
 				<tbody>
-					{this.state.timetable.map((row, rowIndex) => 
+					{timetable.map((row, rowIndex) => 
 						<tr key={rowIndex}>
 				        	<th>{`${row.start}:00 - ${row.end}:00`}</th>
 				        	{row.cells.map((cell, colIndex) => (
@@ -88,7 +47,7 @@ export default class Timetable extends Component {
 				        					[`${styles.unavailable}`]: !cell.available,
 				        				}
 				        			)} 
-				        			onClick={(e) => this.handleSetAvailable(rowIndex, colIndex) }
+				        			onClick={(e) => this.handleSetAvailableTime(rowIndex, colIndex) }
 				        			key={colIndex}>
 				        			{ (cell.available) ? 'Available' : 'Unavailable' }
 				        		</td>
@@ -105,12 +64,50 @@ Timetable.defaultProps = {
 	days: ['Monday', 'Tuesday', 'Wednesday', 'Thrusday', 'Friday', 'Saturday', 'Sunday'],
 	start: 10,
 	end: 18,
-	diff: 1
+	diff: 1,
+	timetable: initTimetable(),
+	settable: true
 }
 
 Timetable.propTypes = {
 	days: PropTypes.arrayOf(PropTypes.string),
 	start: PropTypes.number,
 	end: PropTypes.number,
-	diff: PropTypes.number
+	diff: PropTypes.number,
+	timetable: PropTypes.arrayOf(PropTypes.shape({
+			cells: PropTypes.arrayOf(PropTypes.shape({ // every day in weeks, e.g. cells[0] = Mon, cells[1] = Tue ...
+				available: PropTypes.bool 			   // user at this time is available or not
+			})),
+			start: PropTypes.number, // start hour
+			end: PropTypes.number	 // start hour + diff
+	})),
+	settable: PropTypes.bool, // if true, timetable is able to set available time
+	onSetAvailableTime: PropTypes.func
+}
+
+function initTimetable() {
+
+	const days = ['Monday', 'Tuesday', 'Wednesday', 'Thrusday', 'Friday', 'Saturday', 'Sunday'],
+		  start = 10, 
+		  end = 18,
+		  diff = 1;
+
+	let timetable = [];
+
+	for (let i = start ; i < end ; i += diff) {
+
+		let cells = [];
+
+		for (let day in days) {
+			cells.push({ available: false });
+		}
+
+		timetable.push({
+			start: i,
+			end: i + diff,
+			cells: cells
+		});
+	}
+
+	return timetable;
 }

meetingapp/app/containers/App/App.css

@@ -73,7 +73,7 @@ ul.navbar li a:hover {
 }
 
 ul.navbar li.logout a {
-	color: rgb(218, 87, 93);
+	color: #da575d;
 	background-color: white;
 	border-radius: 5px;
 	margin-right: 20px;

meetingapp/app/containers/Home/Home.css

@@ -1,3 +1,80 @@
 .container {
-	
-}
+	min-width: 1000px;
+}
+
+.infobar {
+	background-color: white;
+	margin-bottom: 10px;
+	border-radius: 5px;
+  	padding: 25px;
+  	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+}
+
+.avatar {
+	width: 45px;
+	height: 45px;
+	vertical-align: middle;
+}
+
+.username {
+	margin-left: 25px;	
+	vertical-align: middle;
+	color: rgba(0,0,0,0.8);
+	font-weight: 400;
+}
+
+.button {
+	min-width: 80px;
+	text-align: center;
+	float: right;
+	line-height: 45px;
+	border-radius: 5px;
+	padding: 0px 12px 0px 12px;
+	font-weight: 400;
+	transition: all 0.3s;
+	margin-left: 20px;
+}
+
+.button:active {
+	opacity: 0.9;
+}
+
+.button.setAvailableTime {
+	border: 2px solid #50a0ff;
+	background-color: #edf5ff;
+	color: #50a0ff;
+	font-weight: 400;
+	transition: all 0.3s;
+}
+
+.button.setAvailableTime:hover {
+	background-color: #50a0ff;
+	color: white;
+}
+
+.button.save {
+	border: 2px solid #00dc73;
+	background-color: #e5fbf1;
+	color: #00dc73;
+	font-weight: 400;
+	transition: all 0.3s;
+}
+
+.button.save:hover {
+	background-color: #00dc73;
+	color: white;
+}
+
+.button.cancel {
+	border: 2px solid #da575d;
+	background-color: #f7ddde;
+	color: #da575d;
+	font-weight: 400;
+	transition: all 0.3s;
+}
+
+.button.cancel:hover {
+	background-color: #da575d;
+	color: white;
+}
+

meetingapp/app/containers/Home/Home.js

@@ -1,6 +1,7 @@
 import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
 import Timetable from '../../components/Timetable/Timetable';
+import * as TimetableActions from '../../actions/timetable';
 import classnames from 'classnames';
 import styles from './Home.css';
 
@@ -12,9 +13,25 @@ class Home extends Component {
 	}
 
 	render() {
+
+		const { dispatch, auth, timetable } = this.props;
+		const username = auth.user.get('username');
+
 		return(
 			<div className={styles.container}>
-				<Timetable />
+				<div className={styles.infobar}>
+					<img className={styles.avatar} src={require('../../img/avatar.png')}></img>
+					<span className={styles.username}>{username}</span>
+					{
+						timetable.isSetting
+						? [
+							<span key="1" className={classnames(styles.button, styles.cancel)} onClick={() => dispatch(TimetableActions.cancelSetAvailableTime())}>Cancel</span>,
+						 	<span key="2" className={classnames(styles.button, styles.save)} onClick={() => dispatch(TimetableActions.cancelSetAvailableTime())}>Save</span> 
+						  ]
+						: <span className={classnames(styles.button, styles.setAvailableTime)} onClick={() => dispatch(TimetableActions.requestSetAvailableTime())}>Set available time</span>
+					}
+				</div>
+				<Timetable {...timetable} onSetAvailableTime={(row, col) => dispatch(TimetableActions.setAvailableTime(row, col))} />
 			</div>
 		)
 	}

meetingapp/app/containers/Login/Login.css

@@ -10,8 +10,8 @@
 .errorMessage {
 	margin-bottom: 20px;
 	padding: 12px;
-	background-color: rgb(243, 197, 195);
-	color: rgb(218, 87, 93);
+	background-color: #f7ddde;
+	color: #da575d;
 	border-radius: 5px;
 }
 

meetingapp/app/containers/Meeting/Meeting.js

@@ -26,7 +26,7 @@ class Meeting extends Component {
 			<div className={styles.container}>
 
 				<div className={styles.infobar}>
-					<img className={styles.avatar} src={require('./avatar.png')}></img>
+					<img className={styles.avatar} src={require('../../img/avatar.png')}></img>
 					<span className={styles.username}>Howard</span>
 					<span className={styles.button} onClick={(e) => this.handleToggle()}>Set up a meeting</span>
 				</div>

meetingapp/app/containers/Meeting/avatar.png renamed to meetingapp/app/img/avatar.png

@@ -57,8 +57,4 @@ export default function auth(state = initialState, action) {
 	default:
 		return state;
 	}
-}
-
-
-
-
+}

meetingapp/app/reducers/auth.js

@@ -6,8 +6,9 @@
 import { combineReducers } from 'redux';
 import { routeReducer } from 'redux-simple-router';
 import auth from './auth';
+import timetable from './timetable';
 
-const reducers = { auth };
+const reducers = { auth, timetable };
 
 const rootReducer = combineReducers(Object.assign({}, reducers, {
 	routing: routeReducer