Skip to content

Commit e635ec4

Browse files
shwetacharishwetachari
committed
fixed bugs and added course list styling
1 parent 21978da commit e635ec4

File tree

8 files changed

+178
-53
lines changed

8 files changed

+178
-53
lines changed

‎client/components/App.jsx

+22-11
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,13 @@ class App extends React.Component {
2727
}
2828

2929
componentDidMount() {
30+
let edit = this.props.location.pathname.startsWith('/profile/');
3031
this.fetchUser.call(this, this.props.match.params.username);
31-
this.fetchAllCourses.call(this);
32+
if (edit) {
33+
this.fetchAllCourses.call(this);
34+
}
3235
this.setState({
33-
edit: this.props.location.pathname.startsWith('/profile/')
36+
edit: edit
3437
});
3538
}
3639

@@ -54,10 +57,19 @@ class App extends React.Component {
5457
url: `./api/courses/${courseName}`,
5558
type: type,
5659
success: (res) => {
57-
let parsedRes = JSON.parse(res);
58-
this.setState({
59-
activeUser: parsedRes[0]
60-
});
60+
if (!res) {
61+
this.setState({
62+
redirect: true
63+
});
64+
} else {
65+
let parsedRes = JSON.parse(res);
66+
if (parsedRes[0].picture === null) {
67+
parsedRes[0].picture = defaultProfPic;
68+
}
69+
this.setState({
70+
activeUser: parsedRes[0]
71+
});
72+
}
6173
},
6274
error: () => {
6375
console.log('error adding course');
@@ -70,12 +82,12 @@ class App extends React.Component {
7082
url:`./api/${username}`,
7183
type: 'GET',
7284
success: (res) => {
73-
let parsedRes = JSON.parse(res);
74-
if (parsedRes.length === 0) {
85+
if (!res) {
7586
this.setState({
7687
redirect: true
7788
});
7889
} else {
90+
let parsedRes = JSON.parse(res);
7991
if (parsedRes[0].picture === null) {
8092
parsedRes[0].picture = defaultProfPic;
8193
}
@@ -92,9 +104,8 @@ class App extends React.Component {
92104
}
93105

94106
render() {
95-
const { redirect } = this.state;
96-
if (redirect) {
97-
return <Redirect to='/notfound'/>
107+
if (this.state.redirect) {
108+
return (<Redirect to='/notfound'/>);
98109
}
99110

100111
return (

‎client/components/NotFound.jsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
11
import React from 'react';
2+
import nodeTree from '../images/nodebook_tree.png';
23

34
const NotFound = (props) =>
45
<div>
5-
<h2>404: Page not found.</h2>
6+
<img src={nodeTree} className="col-sm-4 col-sm-offset-2 col-xs-10 col-xs-offset-1"/>
7+
<div className="notFoundText col-sm-3 col-sm-offset-1 col-xs-10 col-xs-offset-1 text-center">
8+
<h1>404:</h1>
9+
<h2>Page not found.</h2>
10+
</div>
611
</div>;
712

813
export default NotFound;

‎client/components/courses/CourseListItem.jsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,11 @@ class CourseListItem extends React.Component {
2020
}
2121

2222
render() {
23-
let status = (<div className="col-xs-12 text-center status">{this.props.course.usertocourse.status}</div>);
23+
let status = (<div className="col-sm-12 col-sm-offset-0 col-xs-5 col-xs-offset-7 text-center">{this.props.course.usertocourse.status}</div>);
2424
let button = '';
2525
if (this.props.edit) {
2626
let statuses = ['100%', '75%', '50%', '25%', '0%'];
27-
status = (<select onChange={this.updateStatus.bind(this)} className="col-xs-12" value={this.props.course.usertocourse.status}>
27+
status = (<select onChange={this.updateStatus.bind(this)} className="col-sm-12 col-sm-offset-0 col-xs-5 col-xs-offset-7 text-center" value={this.props.course.usertocourse.status}>
2828
{statuses.map((status, i) => {
2929
return (<option key={i} value={status}>{status}</option>)
3030
})}
@@ -33,7 +33,7 @@ class CourseListItem extends React.Component {
3333
}
3434

3535
return (<li id={'course' + this.props.course.id} className="col-xs-12 course">
36-
<div className="col-sm-1 col-xs-12 thumbnail">
36+
<div className="col-sm-1 col-sm-offset-0 col-xs-2 col-xs-offset-5 text-center thumbnail">
3737
{this.props.course.name[0]}
3838
</div>
3939
<div className="col-xs-12 col-sm-8">
@@ -43,7 +43,7 @@ class CourseListItem extends React.Component {
4343
<p>{this.props.course.parent}</p>
4444
{button}
4545
</div>
46-
<div className="col-sm-3 col-xs-12 status">
46+
<div className="col-sm-3 col-xs-12 status text-center">
4747
<label>Status:</label>
4848
{status}
4949
</div>

‎client/components/courses/Courses.jsx

+14-5
Original file line numberDiff line numberDiff line change
@@ -28,21 +28,30 @@ class Courses extends React.Component {
2828
render() {
2929
let addCourse = '';
3030
if (this.props.edit) {
31-
addCourse = (<select className="col-xs-12" onChange={this.requestToAddCourse.bind(this)}>
31+
addCourse = (<select className="col-xs-12 addCourse" onChange={this.requestToAddCourse.bind(this)}>
3232
<option>Add course</option>
3333
{this.props.allCourses.map((course, index) => {
3434
return <option key={course.id}>{course.name}</option>
3535
})}
3636
</select>);
3737
}
3838

39-
return (<div>
40-
{addCourse}
41-
<ul style={{listStyle: 'none'}}>
39+
let courseList = (<ul className="courselist col-xs-11">
40+
<li className="col-xs-12">
41+
<h4 className="col-xs-12 text-center">No courses to display</h4>
42+
</li>
43+
</ul>);
44+
if (this.props.user.courses.length > 0) {
45+
courseList = (<ul className="courselist" style={{listStyle: 'none'}}>
4246
{this.props.user.courses.map((course, index) => {
4347
return <CourseListItem updateStatus={this.requestToChangeStatus.bind(this)} deleteCourse={this.requestToDeleteCourse.bind(this)} edit={this.props.edit} course={course} key={index}/>
4448
})}
45-
</ul>
49+
</ul>);
50+
}
51+
52+
return (<div className="col-xs-12">
53+
{addCourse}
54+
{courseList}
4655
</div>);
4756
}
4857
}

‎client/components/profile/Profile.jsx

+6-9
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,12 @@ class Profile extends React.Component {
5353
</Edit>
5454
}
5555

56-
return (<div style={{wordWrap: 'break-word'}}>
56+
return (<div style={{wordWrap: 'break-word'}} className="profile">
57+
{!this.props.isCurrentUser &&
58+
(<button onClick={this.addFriend.bind(this)}>
59+
Add Friend
60+
</button>)
61+
}
5762
<div>
5863
<img src={this.props.user.picture} className="col-sm-12 col-sm-offset-0 col-xs-10 col-xs-offset-1"/>
5964
{editPic}
@@ -63,9 +68,6 @@ class Profile extends React.Component {
6368
<div className="profileItem">
6469
Member since: {[this.props.user.createdAt.slice(5, 10), this.props.user.createdAt.slice(0, 4)].join('-')}
6570
</div>
66-
{/* <div className="profileItem">
67-
Interests: {this.props.user.interests.join(', ')}
68-
</div> */}
6971
<div className="profileItem">
7072
Courses complete: {coursesComplete}
7173
</div>
@@ -77,11 +79,6 @@ class Profile extends React.Component {
7779
Interests: {this.props.user.interests}
7880
{editInterests}
7981
</div>
80-
{!this.props.isCurrentUser &&
81-
(<button onClick={this.addFriend.bind(this)}>
82-
Add Friend
83-
</button>)
84-
}
8582
</div>
8683
</div>)
8784
}

‎client/components/social/Social.jsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,11 @@ class Social extends React.Component {
1313
this.setState({friends: nextProps.user.friend});
1414
}
1515
render() {
16-
return (
17-
<div>
16+
return (
17+
<div className="friends">
1818
<h2>{this.props.user.name}'s friends:</h2>
1919
<ul>
20-
{this.state.friends &&
20+
{this.state.friends &&
2121
this.state.friends.map(friend => {
2222
return (<li key={friend.id}> {friend.name}</li>);
2323
})}

‎client/styles/style.css

+115-16
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
body {
44
background-color: #f3f3f3;
5-
height: 100%
5+
height: 100%;
66
}
77

88
/*h2 {
@@ -71,40 +71,55 @@ header {
7171
}
7272

7373
/*Courses styles******************************************************************************/
74+
select {
75+
-webkit-appearance: none;
76+
}
7477

7578
.courselist {
7679
list-style: none;
77-
padding: 0;
78-
position: absolute;
79-
margin-top: 35px;
80-
background: white;
81-
z-index: 5;
80+
padding: 40px;
81+
border-radius: 15px;
82+
background: #1F6521;
83+
}
84+
85+
.addCourse {
86+
position: relative;
87+
margin-bottom: 30px;
88+
padding: 15px;
89+
font-size: 20px;
90+
text-transform: uppercase;
91+
/*border: 1px solid #1F6521;*/
92+
border-radius: 10px;
93+
background: #53900F;
94+
color: white;
95+
text-align-last: center;
8296
}
8397

8498
.courselist li {
85-
margin: 0;
86-
padding:10px 0;
87-
border-top: 1px solid gray;
99+
margin-bottom: 30px;
100+
padding:15px;
101+
border-radius: 10px;
102+
background: white;
103+
border-bottom: 1px solid #a4a71e;
88104
}
89105

90-
.courselist li:first-child {
91-
border-top: none !important;
106+
.courselist li a, .courselist li h4 {
107+
color: #a4a71e;
92108
}
93109

94-
select {
95-
-webkit-appearance: none;
110+
.courselist li p {
111+
color: #1f2605;
96112
}
97113

98114
.thumbnail {
99115
background-color: #1F6521;
100116
color: white;
101117
width: 31px;
102-
border-radius: 15px;
118+
border-radius: 100%;
103119
border-color: #777;
104120
border-width: 1px;
105121
text-align: center;
106-
margin-top: 5px;
107-
122+
margin-top: 15px;
108123
}
109124

110125
.status {
@@ -115,6 +130,44 @@ select {
115130
margin-bottom: 20px;
116131
}
117132

133+
.status select, .status div {
134+
background: #53900F;
135+
color: white;
136+
padding: 5px;
137+
border-radius: 5px;
138+
}
139+
140+
.courselist li button {
141+
font-family: 'PT Sans', sans-serif;
142+
color: white;
143+
padding: 5px 10px;
144+
border-radius: 5px;
145+
text-transform: uppercase;
146+
border: none;
147+
background: #e0bb28;
148+
}
149+
150+
.status label {
151+
font-size:16px;
152+
font-family: 'PT Sans', sans-serif;
153+
font-weight: normal;
154+
text-transform: uppercase;
155+
color: #e0bb28;
156+
}
157+
158+
@media (max-width: 770px) {
159+
.addCourse {
160+
margin: 30px 0 20px;
161+
}
162+
.status {
163+
text-align: right;
164+
margin-top: 10px;
165+
}
166+
.thumbnail {
167+
margin-top: 0;
168+
}
169+
}
170+
118171
/*Login and Signup Styles******************************************************/
119172

120173
.username-input, .password-input {
@@ -175,4 +228,50 @@ span.redir {
175228
}
176229
}
177230

231+
/*Not Found Styles*************************************************************/
232+
.notFoundText {
233+
padding-top: 10%;
234+
font-family: 'PT Sans', sans-serif;
235+
}
236+
237+
.notFoundText h1 {
238+
padding: 20px;
239+
font-size: 50px;
240+
color: white;
241+
background: #53900F;
242+
border-radius: 10px;
243+
}
244+
245+
.notFoundText h2 {
246+
color: #e0bb28;
247+
font-size: 40px;
248+
margin-top: 20px;
249+
}
250+
251+
/*Profile Page Styles**********************************************************/
252+
.courselist, .friends, .profile {
253+
min-height: 300px;
254+
max-height: 800px;
255+
overflow-y: scroll;
256+
}
257+
258+
.friends, .profile {
259+
padding: 15px;
260+
border-radius: 15px;
261+
border: 2px solid #1F6521;
262+
background: white;
263+
}
264+
265+
.profile img {
266+
border-radius: 20px;
267+
}
268+
269+
.profile h3 {
270+
font-family: 'PT Sans', sans-serif;
271+
font-size: 30px;
272+
color: #1F6521;
273+
}
274+
/*Friends Component Style******************************************************/
275+
276+
178277
/*****************************************************************************/

‎server/routes/users.js

+8-4
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,14 @@ var users = {
1515
order: sequelize.col('status') // couldn't figure out how to sort with custom function (sorted manually below)
1616
})
1717
.then((result) => {
18-
result[0].courses = result[0].courses.sort((a, b) => {
19-
return Number(a.usertocourse.status.slice(0, a.usertocourse.status.length - 1)) - Number(b.usertocourse.status.slice(0, b.usertocourse.status.length - 1));
20-
});
21-
res.send((JSON.stringify(result)));
18+
if (result.length === 0) {
19+
res.send(null);
20+
} else {
21+
result[0].courses = result[0].courses.sort((a, b) => {
22+
return Number(a.usertocourse.status.slice(0, a.usertocourse.status.length - 1)) - Number(b.usertocourse.status.slice(0, b.usertocourse.status.length - 1));
23+
});
24+
res.send((JSON.stringify(result)));
25+
}
2226
})
2327
.catch((err) => {
2428
console.error('Error finding user', err);

0 commit comments

Comments
 (0)