Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Redux complete #4

Open
wants to merge 14 commits into
base: master
Choose a base branch
from
Open

Redux complete #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
3049ff5
Boilerplate for beginning of Flux lesson
danielstern Dec 14, 2016
88ef9d2
Add HTML scaffold
danielstern Dec 17, 2016
820138d
Implement dispatcher
danielstern Dec 17, 2016
15d21c5
Implemented store
danielstern Dec 17, 2016
e2713e5
Add actions, storage, render. Complete control panel.
danielstern Dec 17, 2016
241236b
Implemented reduce store, minus undo.
danielstern Dec 17, 2016
0c43a8e
Complete flux application.
danielstern Dec 17, 2016
d1e21e3
Scaffold for Redux app complete
danielstern Dec 18, 2016
e7a6630
Scaffold for Redux app complete
danielstern Dec 18, 2016
df13c13
Message board implemented with single reducer
danielstern Dec 18, 2016
5d3adf7
Complete synchronous message board component
danielstern Dec 18, 2016
38de7b2
Update HTML templates
danielstern Dec 18, 2016
eafacd3
Application complete
danielstern Dec 18, 2016
fffe81c
Application complete
danielstern Dec 18, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions public/control-panel.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,14 @@
<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
<a class="navbar-brand" href="/">Productivity App</a>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="message-board.html">Message Board</a>
<li class="nav-item active">
<a class="nav-link" href="control-panel.html">Control Panel</a>
</li>
<li class="nav-item">
<a class="nav-link" href="tasks.html">Tasks</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="control-panel.html">Control Panel</a>
<li class="nav-item">
<a class="nav-link" href="message-board.html">Message Board</a>
</li>
</ul>
</nav>
Expand All @@ -37,6 +37,7 @@ <h4>
<input type="radio" name="fontSize" value="large" checked> Large<br>
<input type="radio" name="fontSize" value="small"> Small<br>
</form>
</form>
</section>

<script src="assets/cpanel.bundle.js"></script>
Expand Down
7 changes: 4 additions & 3 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,21 +13,22 @@
<a class="navbar-brand" href="#">Productivity App</a>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="message-board.html">Message Board</a>
<a class="nav-link" href="control-panel.html">Control Panel</a>
</li>
<li class="nav-item">
<a class="nav-link" href="tasks.html">Tasks</a>
</li>
<li class="nav-item">
<a class="nav-link" href="control-panel.html">Control Panel</a>
<a class="nav-link" href="message-board.html">Message Board</a>
</li>

</ul>
</nav>
<h1>Welcome to the Flux-Redux Productivity App!</h1>
<ul class="list-group">
<a href="message-board.html" class="list-group-item">Message Board</a>
<a href="control-panel.html" class="list-group-item">Control Panel</a>
<a href="tasks.html" class="list-group-item">Tasks</a>
<a href="message-board.html" class="list-group-item">Message Board</a>
</ul>


Expand Down
30 changes: 13 additions & 17 deletions public/message-board.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,43 +2,38 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Productivity App - Message Board</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css">
<title>Productivity App - Control Panel</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
</head>
<body>
<body class="container">
<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
<a class="navbar-brand" href="/">Productivity App</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="message-board.html">Message Board</a>
<li class="nav-item">
<a class="nav-link" href="control-panel.html">Control Panel</a>
</li>
<li class="nav-item">
<a class="nav-link" href="tasks.html">Tasks</a>
</li>
<li class="nav-item">
<a class="nav-link" href="control-panel.html">Control Panel</a>
<li class="nav-item active">
<a class="nav-link" href="message-board.html">Message Board</a>
</li>
</ul>
</nav>
<section class="container">
<h1>Message Board</h1>
<div class="card">
<section id="messages" class="card-block"></section>
<section id="messages" class="card-block"></section>
</div>

<!--<form name="New Message">-->
<!--<input type="text" class="form-control" placeholder="Type a new message">-->
<!--<button type="submit">-->
<!--Say something-->
<!--</button>-->
<!--</form>-->
<form class="form-inline" name="newMessage">
<fieldset name="fields">
<input type="text" class="form-control" name="newMessage" placeholder="Type a new message">
<button type="submit" class="btn btn-primary">Say something</button>
</fieldset>

</form>

<form class="form-inline" name="selectStatus">
<select name="status" id="" class="custom-select">
<option value="ONLINE">Online</option>
Expand All @@ -48,5 +43,6 @@
</select>
</form>
</section>
<script src="assets/message-board.bundle.js"></script>
</body>
<script src="assets/message-board.bundle.js"></script>
</body>
</html>
36 changes: 16 additions & 20 deletions public/tasks.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,49 +2,45 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Productivity App - Tasks</title>

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css">

<title>Productivity App - Control Panel</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
</head>
<body class=container>
<body class="container">
<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
<a class="navbar-brand" href="/">Productivity App</a>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="message-board.html">Message Board</a>
<a class="nav-link" href="control-panel.html">Control Panel</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="tasks.html">Tasks</a>
<a class="nav-link active" href="tasks.html">Tasks</a>
</li>
<li class="nav-item">
<a class="nav-link" href="control-panel.html">Control Panel</a>
<a class="nav-link" href="message-board.html">Message Board</a>
</li>
</ul>
</nav>
<h1>Tasks</h1>
<p class="lead">
Welcome, <span id=userNameDisplay>Jim</span>!
</p>
<section class="container">
<h1>Tasks</h1>
</section>
<section id=tasks></section>
<form class="form-inline" name="newTask">
<input type="text" class="form-control" name="newTaskName" placeholder="Add a new task">
<input type="text" class="form-control" name="newTaskName" placeholder="Add a new task">
<button type="submit" class="btn btn-primary">Add</button>
</form>
<form name="undo">
<button type="submit" class="btn btn-secondary">Undo Last Change</button>
</form>

</div>
<section>

<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" id="showComplete" checked> Show Completed
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" id="showComplete" checked> Show Completed
</label>
</div>
</section>

<script src="assets/tasks.bundle.js"></script>
</body>
</html>
47 changes: 20 additions & 27 deletions src/control-panel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,26 @@ const userNameUpdateAction = (name)=>{
type: UPDATE_USERNAME,
value: name
}
}
};

const fontSizePreferenceUpdateAction = (size)=>{
return {
type: UPDATE_FONT_SIZE_PREFERENCE,
value: size
}
}
//
};

document.forms.fontSizeForm.fontSize.forEach(element=>{
element.addEventListener("change",({target})=>{
controlPanelDispatcher.dispatch(fontSizePreferenceUpdateAction(target.value));
})
});

document.getElementById(`userNameInput`).addEventListener("input",({target})=>{
const name = target.value;
controlPanelDispatcher.dispatch(userNameUpdateAction(name));
});

class UserPrefsStore extends Store {
getInitialState() {
return localStorage[`preferences`] ? JSON.parse(localStorage[`preferences`]) : {
Expand All @@ -44,35 +55,17 @@ class UserPrefsStore extends Store {
}

const userPrefsStore = new UserPrefsStore(controlPanelDispatcher);
const userNameInput = document.getElementById(`userNameInput`);
userNameInput.addEventListener("input",({target})=>{
const name = target.value;
controlPanelDispatcher.dispatch(userNameUpdateAction(name));
});

const fontSizeForm = document.forms.fontSizeForm;

fontSizeForm.fontSize.forEach(element=>{
element.addEventListener("change",({target})=>{
console.log("Buton change...",target.value);
controlPanelDispatcher.dispatch(fontSizePreferenceUpdateAction(target.value));
})
userPrefsStore.addListener((state)=>{
console.info(`Updated Store`,state);
render(state);
localStorage[`preferences`] = JSON.stringify(state);
});

const render = ({userName,fontSize})=>{
document.getElementById("userName").innerText = userName;
document.getElementsByClassName("container")[0].style.fontSize = fontSize === "small" ? "16px" : "24px";
fontSizeForm.fontSize.value = fontSize;

}

userPrefsStore.addListener((state)=>{
render(state);
saveUserPreferences(state);
});

const saveUserPreferences =(state)=>{
localStorage[`preferences`] = JSON.stringify(state);
document.forms.fontSizeForm.fontSize.value = fontSize;
}

render(userPrefsStore.getUserPreferences());
render(userPrefsStore.getUserPreferences());
14 changes: 8 additions & 6 deletions src/flux/ReduceStore.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,26 @@
import {Store} from './Store';
export class ReduceStore extends Store {
constructor(dispatcher){
constructor(dispatcher) {
super(dispatcher);
this.__history = [];
}
reduce(state,action){

reduce(state, action) {
throw new Error("Subclasses must implement reduce method of a Flux ReduceStore");
}
__onDispatch(action){
const newState = this.reduce(this.__state,action);

__onDispatch(action) {
const newState = this.reduce(this.__state, action);
if (newState !== this.__state) {
this.__history.push(this.__state);
this.__state = newState;
this.__emitChange();
}
}
revertLastState(){

revertLastState() {
if (this.__history.length > 0)
this.__state = this.__history.pop();
this.__emitChange();
}

}
Loading