Skip to content

Commit

Permalink
Set up new dashboard design
Browse files Browse the repository at this point in the history
  • Loading branch information
@Josephine-Chen
Josephine-Chen committed Mar 10, 2017
1 parent d461156 commit 20af881
Show file tree
Hide file tree
Showing 8 changed files with 388 additions and 15 deletions.
11 changes: 3 additions & 8 deletions client/src/components/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,9 @@ export default class App extends React.Component {
<div>
<Sidebar auth={this.props.route.auth} />
<main>
<Row>
<Col s={1} />
<Col s={11}>
<div className="container">
{children}
</div>
</Col>
</Row>
<div className="main">
{children}
</div>
</main>
</div>
);
Expand Down
310 changes: 310 additions & 0 deletions client/src/components/Dashboard2.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,310 @@
import React from 'react';
import { Row, Input, Col, Icon } from 'react-materialize';
import Goal from './Goal';
import Site from './Site';
import Stat from './Stat';
import Motivational from './Motivational';

export default class Dashboard2 extends React.Component {
constructor(props) {
super(props);
this.state = {
start: true,
profile: this.props.auth.getProfile(),
username: '',
goals: [],
goalInput: '',
dayGoalInput: '',
userId: '',
setting: {},
blacklist: [],
extension: [],
dayGoalEnabled: false,
goalEnabled: false,
dayGoalVisited: false,
goalVisited: false,
};
this.handleChange = this.handleChange.bind(this);
this.postGoal = this.postGoal.bind(this);
this.handleDayGoalSubmission = this.handleDayGoalSubmission.bind(this);
this.removeGoal = this.removeGoal.bind(this);
this.handleKeyPress = this.handleKeyPress.bind(this);
this.handleQuoteKeyPress = this.handleQuoteKeyPress.bind(this);
this.validate = this.validate.bind(this);
this.handleBlur = this.handleBlur.bind(this);
this.getExtensionSite = this.getExtensionSite.bind(this);
}

componentWillMount() {
this.getUserId();
this.getSetting();
this.getExtensionData();
this.callCustomJQuery();
}

componentDidMount() {
this.props.auth.event.on('userId_updated', () => {
this.setState({
profile: this.props.auth.getProfile(),
});
this.getUserId();
this.getAllGoals();
this.getBlacklist();
this.getSetting();
});
this.getAllGoals();
this.getBlacklist();
this.getExtensionData();
this.callCustomJQuery();
}

getUserId() {
const that = this;
$.ajax({
type: 'GET',
url: `api/users/${this.state.profile.user_id}`,
success: (data) => {
console.log('SUCCESS: GOT USER INFO', data.data[0]);
that.setState({ userId: data.data[0].id });
that.setState({ username: data.data[0].username || this.state.profile.nickname });
that.setState({ dayGoalInput: data.data[0].daily_goal || '' });
},
error: (err) => {
console.log('ERROR: COULD NOT GET USERID', err);
},
});
}

getSetting() {
const that = this;
$.ajax({
type: 'GET', // GET REQUEST
url: `/api/users/${this.state.profile.user_id}/setting`,
success: (data) => {
console.log('SUCCESS: OBTAINED SETTINGS: ', data.data[0]);
that.setState({ setting: data.data[0] });
},
error: (err) => { console.log('ERROR: COULD NOT GET SETTINGS', err); },
});
}

getBlacklist() {
const that = this;
$.ajax({
type: 'GET', // GET REQUEST
url: `/api/users/${this.state.profile.user_id}/blacklist`,
success: (data) => {
console.log('SUCCESS: OBTAINED BLACKLIST: ', data.data);
// Do not show blackout sites
const filtered = data.data.filter(e => e.blacklist_type !== '1');
that.setState({ blacklist: filtered });
},
error: (err) => { console.log('ERROR: COULD NOT GET BLACKLIST', err); },
});
}

getAllGoals() {
const that = this;
$.ajax({
type: 'GET', // GET REQUEST
url: `/api/users/${this.state.profile.user_id}/goals/`,
success: (data) => {
console.log('SUCCESS: OBTAINED ALL GOALS:', data);
that.setState({ goals: data.data });
},
error: (err) => { console.log('ERROR: COULD NOT GET ALL GOALS', err); },
});
}

getExtensionData() {
const that = this;
$.ajax({
type: 'GET', // GET REQUEST
url: `/api/users/${this.state.profile.user_id}/extension_data`,
success: (data) => {
console.log('SUCCESS: OBTAINED EXTENSION DATA: ', data.data);
that.setState({ extension: data.data });
},
error: (err) => { console.log('ERROR: COULD NOT GET EXTENSION DATA', err); },
});
}

getExtensionSite(site) {
let siteInfo = {};
for (let i = 0; i < this.state.extension.length; i++) {
if (this.state.extension[i].url.includes(site)) {
siteInfo = this.state.extension[i];
}
}
console.log('siteInfo', siteInfo);
return siteInfo;
}
handleChange(event, str) {
this.setState({ [str]: event.target.value });
}

handleKeyPress(e) {
if (this.state.goalEnabled && this.state.goalInput !== '') {
if (e.key === 'Enter') {
this.postGoal();
}
}
}

handleQuoteKeyPress(e) {
if (this.state.dayGoalEnabled && this.state.dayGoalInput !== '') {
if (e.key === 'Enter') {
this.handleDayGoalSubmission();
}
}
}

handleDayGoalSubmission() {
const that = this;
$.ajax({
type: 'PUT',
url: `/api/users/${this.state.profile.user_id}`,
contentType: 'application/json',
data: JSON.stringify({ daily_goal: this.state.dayGoalInput }),
success: (data) => {
console.log('Update daily goal to', data);
that.alertGoalAdded('Goal of the Day');
},
error: (err) => { console.log('Error updating daily goal', err); },
});
}

postGoal() {
const that = this;
$.ajax({
type: 'POST',
url: `/api/users/${this.state.profile.user_id}/goals`,
contentType: 'application/json',
data: JSON.stringify({ goal: this.state.goalInput, progress: 0, goal_picture: '', UserId: this.state.userId }),
success: (data) => {
console.log('SUCCESS: POSTED INDIVIDUAL GOAL: ', data);
that.getAllGoals();
that.cleanInput();
that.alertGoalAdded('Goal');
},
error: (err) => { console.log('ERROR: COULD NOT POST INDIVIDUAL GOAL', err); },
});
}

removeGoal(goal_id) {
const that = this;
console.log('goal_id', goal_id);
$.ajax({
type: 'DELETE',
url: `/api/goals/${goal_id}`,
success: (data) => {
console.log('Remove goal:', data);
that.getAllGoals();
},
error: (err) => { console.log('ERROR: COULD NOT REMOVE THE GOAL', err); },
});
}

alertGoalAdded(str) {
Materialize.toast(`${str} added!`, 1000);
}

cleanInput() {
this.setState({ goalInput: '' });
}

validate(dayGoal, goal) {
return {
dayGoal: dayGoal.length === 0,
goal: goal.length === 0,
};
}

handleBlur(field) {
if (field === 'dayGoal') {
this.setState({ dayGoalVisited: true });
} else {
this.setState({ goalVisited: true });
}
}

callCustomJQuery() {
$('.collapsible').collapsible();
}

render() {
const { dayGoalInput } = this.state;
if (dayGoalInput) {
this.state.dayGoalEnabled = dayGoalInput.length > 0;
}
const { goalInput } = this.state;
if (goalInput) {
this.state.goalEnabled = goalInput.length > 0;
}
const errors = this.validate(this.state.dayGoalInput, this.state.goalInput);
return(
<div>
<Row>
<Col s={12}>
<div className="titleHead z-depth-4">
<h2 className="topName">
Hello, {this.state.username}!
</h2>
{this.state.setting.quote}
</div>
</Col>
</Row>
<Row>
<Col s={9}>
<div className="gotd z-depth-4">
<h3 className="titleText"> Goal of the Day </h3>
<Input s={12} className={errors.dayGoal && this.state.dayGoalVisited ? 'error' : 'white'} data-length="255" placeholder="Add new goal of the day" value={this.state.dayGoalInput} onChange={e => this.handleChange(e, 'dayGoalInput')} onKeyPress={this.handleQuoteKeyPress} onBlur={() => this.handleBlur('dayGoal')} />
</div>
</Col>
<Col s={3}>
<div className="dashboardBox z-depth-4">
<h3 className="titleText">Sites</h3>
<ul className="collapsible" data-collapsible="expandable">
{this.state.blacklist.map(site =>
<li key={`sites ${site.id}`}>
<div className="collapsible-header">{site.url}</div>
<div className="collapsible-body"><Site url={site.url} siteId={site.id} siteInfo={this.getExtensionSite} /></div>
</li>
)}
</ul>
</div>
</Col>
</Row>
<Row>
<Col s={9}>
<div className="dashboardBox z-depth-4">
<h3 className="titleText">Goals</h3>
{(this.state.goals.length === 0 || !this.state.profile.user_id) && <div className="setGoal">You have no goals set currently. Set one now.</div>}
{(this.state.goals.length > 0 && this.state.profile.user_id) && <ul className="collapsible" data-collapsible="expandable">
{this.state.goals.map(goal =>
<li key={goal.id}>
<div className="collapsible-header">{goal.goal}
<a href="#/dashboard" onClick={() => this.removeGoal(goal.id)}>
<Icon right>delete</Icon>
</a>
</div>
<Goal goal={goal.id} user_id={this.state.profile.user_id} />
</li>
)}
</ul>}
<Input s={10} className={errors.goal && this.state.goalVisited ? 'error' : 'white'} data-length="255" label="Set new goal" value={this.state.goalInput} onChange={e => this.handleChange(e, 'goalInput')} onKeyPress={this.handleKeyPress} onBlur={() => this.handleBlur('goal')} />
<Motivational />
</div>
</Col>
<Col s={3}>
<div className="statsBox z-depth-4">
<h3 className="titleText">Stats</h3>
<Stat profile={this.state.profile} />
</div>
</Col>
</Row>
</div>
)

}
}
4 changes: 1 addition & 3 deletions client/src/components/Sidebar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,16 +52,14 @@ export default class Sidebar extends React.Component {
<div><img className="circle" src={this.state.picture} alt="auth0" /></div>
<div><span className="name">{this.state.username}</span></div>
<div><span className="email">{this.state.profile.email}</span></div>
<a href="#" className="btn" onClick={this.props.auth.logout}>Log Out</a>
</div></li>}

<li>
{!localStorage.id_token && <a href="#" className="btn login" onClick={this.props.auth.login}>Log In</a>}
</li>
{localStorage.id_token && <li><div className="divider" /></li>}
{localStorage.id_token && <li><a href="#/dashboard" className="waves-effect"><i className="material-icons icon-white">dashboard</i>Dashboard</a></li>}
{localStorage.id_token && <li><a href="#/settings" className="waves-effect"><i className="material-icons icon-white">settings</i>Settings</a></li>}
{localStorage.id_token && <li><a href="#/selfreflection" className="waves-effect"><i className="material-icons icon-white">perm_identity</i>Self Reflections</a></li>}
{localStorage.profile && <li><a href="#" className="waves-effect logout" onClick={this.props.auth.logout}><i className="material-icons icon-white">exit_to_app</i>Log Out</a></li>}
</ul>
</header>
);
Expand Down
2 changes: 1 addition & 1 deletion client/src/components/Stat.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export default class Stat extends React.Component {

render() {
return (
<PieChart width={400} height={200}>
<PieChart width={200} height={200}>
<Pie
startAngle={360}
endAngle={0}
Expand Down
2 changes: 2 additions & 0 deletions client/src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import ReactGA from 'react-ga';
import App from './components/App';
import Landingpage from './components/Landingpage';
import Dashboard from './components/Dashboard';
import Dashboard2 from './components/Dashboard2';
import Selfreflection from './components/Selfreflection';
import ReflectionQuestion from './components/ReflectionQuestion';
import Settings from './components/Settings';
Expand Down Expand Up @@ -45,6 +46,7 @@ render(
<Route path="dashboard" component={Dashboard} onEnter={requireAuth} />
<Route path="selfreflection" component={Selfreflection} onEnter={requireAuth} />
<Route path="settings" component={Settings} onEnter={requireAuth} />
<Route path="new" component={Dashboard2} onEnter={requireAuth} />
<Route path="question" component={ReflectionQuestion} onEnter={requireAuth} />
</Route>
</Router>
Expand Down
Loading

0 comments on commit 20af881

Please sign in to comment.