codephil-columbia · francesar · Apr 6, 2019 · Apr 6, 2019 · Apr 6, 2019 · Apr 6, 2019
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/HomePage.js b/src/HomePage.js
@@ -79,7 +79,7 @@ class HomePage extends Component {
 
     return (
       <div>
-        <Header links={headerLinks} isLoggedIn={true} username={username} />
+        <Header links={headerLinks} isLoggedIn={true} username={username} history={this.props.history}/>
         <div className="container">
           <div className="title-homepage row">
             <p className="homepage-welcome">Welcome Back, {username}!</p>
@@ -119,11 +119,12 @@ const mapStateToProps = ({ auth, app, statsForUser, chapterProgressPercentage })
   return {
     lessonName: app.currentLesson.lessonName,
     chapterName: app.currentLesson.chapterName,
+    chapter: app.chapter,
     hasFinishedLoading: app.currentLesson.hasFinishedLoading,
     showSpinner: app.currentLesson.showSpinner,
     imagePath: app.currentLesson.chapterImage,
-    avgWPM: statsForUser.avgWPM,
-    avgAccuracy: statsForUser.avgAccuracy,
+    avgWPM: statsForUser.wpm,
+    avgAccuracy: statsForUser.accuracy,
     isStatsLoading: statsForUser.isStatsLoading,
     percentageComplete: chapterProgressPercentage.percentageComplete,
     isPercentageLoading: chapterProgressPercentage.isPercentageLoading,

diff --git a/src/Learn.js b/src/Learn.js
@@ -136,33 +136,36 @@ class Learn extends Component {
       title = "Chapter Overview"
     }
 
-      return (
-        <div>
-          <Header links={headerLinks} isLoggedIn={this.props.isLoggedIn} username={this.props.currentUser.username}/>
-          <div className="content container title-container">
-            <div className="title">
-              <h2 className="title">Fundamentals of Typing Tutorial</h2>
-            </div>
-            <div className="block">
-              <div className="carousel row">
-                <div className="arrow-left column column-10" onClick={this.prevChapter} />
-                <div className="carousel-content column">
-                  <div className="carousel-title">
-                    <div onClick={this.prevChapter} className="learn-carousel-buttons left-carousel-button">
-                      <img src="images/buttons/Left_Arrow_Thin.svg"></img>
-                    </div>
-                    <h2 className="chapter-title">{title}</h2>
-                    <div onClick={this.nextChapter} className="learn-carousel-buttons right-carousel-button">
-                      <img src="images/buttons/Right_Arrow_Thin.svg"></img>
-                    </div>
-                </div>
-                <div className="carousel-desc">
-                  <h3 className="desc">{carouselDesc}</h3>
-                </div>
+    console.log(this.props);
+    // console.log(chapterLessonPairs[currentChapterIndex]);
+    // const { chapter } = chapterLessonPairs[currentChapterIndex]
+    return (
+      <div>
+        <Header links={headerLinks} isLoggedIn={this.props.isLoggedIn} username={this.props.currentUser.username}/>
+        <div className="content container title-container">
+          <div className="title">
+            <h2 className="title">Fundamentals of Typing Tutorial</h2>
+          </div>
+          <div className="block">
+            <div className="carousel row">
+              <div className="arrow-left column column-10" onClick={this.prevChapter} />
+              <div className="carousel-content column">
+                <div className="carousel-title">
+                  <div onClick={this.prevChapter} className="learn-carousel-buttons left-carousel-button">
+                    <img src="images/buttons/Left_Arrow_Thin.svg"></img>
+                  </div>
+                  <h2 className="chapter-title">{title}</h2>
+                  <div onClick={this.nextChapter} className="learn-carousel-buttons right-carousel-button">
+                    <img src="images/buttons/Right_Arrow_Thin.svg"></img>
+                  </div>
+              </div>
+              <div className="carousel-desc">
+                <h3 className="desc">{carouselDesc}</h3>
               </div>
-              <div className="arrow-right column column-10" onClick={this.nextChapter}/>
             </div>
-            {body}
+            <div className="arrow-right column column-10" onClick={this.nextChapter}/>
+          </div>
+            { body }
           </div>
         </div>
       </div>

diff --git a/src/LessonsView.js b/src/LessonsView.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 
 import showLessonStats from './components/lessonStats';
 import Lock from './components/lock';
+import { lime100 } from 'material-ui/styles/colors';
 
 
 class LessonsView extends Component {
@@ -20,10 +21,23 @@ class LessonsView extends Component {
     }
 
     return completed.find(({ lessonID }) => {
-      return currentLesson.LessonID === lessonID;
+      return currentLesson.lessonID === lessonID;
     });
   }
 
+  sortLessonsByName = (l1, l2) => {
+    // We want Tests to be sorted to be the last lessons in each chapter
+    if (l1.lessonName.includes("Test")) {
+      return 1;
+    } 
+
+    if (l2.lessonName.includes("Test")) {
+      return -1;
+    }
+
+    return l1.lessonName.localeCompare(l2.lessonName);
+  }
+
   render() {
     const {
       lessons,
@@ -33,26 +47,30 @@ class LessonsView extends Component {
 
     const { currentSelectedLesson } = this.state;
     const lessonStats = this.hasCompletedLesson(currentSelectedLesson, completed);
+    console.log(currentSelectedLesson, completed, lessonStats);
+
+    // Lessons don't come sorted
+    this.props.lessons.sort(this.sortLessonsByName);
 
     let lessonStatView;
     if(lessonStats) {
       lessonStatView = showLessonStats(currentSelectedLesson, lessonStats, doRestartLesson);
     } else {
-      lessonStatView = <Lock isMostRecentLesson={this.props.mostRecentLessonName === currentSelectedLesson.LessonName} />
+      lessonStatView = <Lock isMostRecentLesson={this.props.mostRecentLessonName === currentSelectedLesson.lessonName} />
     }
 
     return (
       <div className="container lesson-wrapper"> 
         <div className="container lesson-left">
           {lessons.map((lesson, i) => {
-            if(lesson.LessonName === currentSelectedLesson.LessonName) { 
+            if(lesson.lessonName === currentSelectedLesson.lessonName) { 
               return (
                 <h4 
                   className='lesson-view-text'
                   style={{color: 'green'}} 
                   key={i}
                   onClick={() => this.userDidChangeLesson(lesson)}>
-                  {lesson.LessonName}
+                  {lesson.lessonName}
                 </h4>
               )
           } else if (this.hasCompletedLesson(lesson, completed)) {
@@ -61,7 +79,7 @@ class LessonsView extends Component {
                   className='lesson-view-text' 
                   key={i} 
                   onClick={() => this.userDidChangeLesson(lesson)}>
-                  {lesson.LessonName}
+                  {lesson.lessonName}
                 </h4>
               )
           } else {
@@ -71,7 +89,7 @@ class LessonsView extends Component {
                   style={{color: 'grey'}} 
                   key={i}
                   onClick={() => this.userDidChangeLesson(lesson)}>
-                  {lesson.LessonName}
+                  {lesson.lessonName}
                 </h4>
               )
             }
@@ -80,7 +98,7 @@ class LessonsView extends Component {
         <vl className="lesson-sep"/>
         <div className="container lesson-right">
           <div className="lesson-stats">
-            {lessonStatView}
+            { lessonStatView }
           </div>
         </div>
       </div>

diff --git a/src/LoginPage.js b/src/LoginPage.js
@@ -70,9 +70,6 @@ class LoginPage extends Component {
     const { isLoggedIn } = this.props;
     const { headerLinks } = this.state;
 
-    //if(isLoggedIn) 
-      //return <Redirect to="home"/>
-
     return (
       <div>
         <Header links={isLoggedIn? headerLinks : []} isLoggedIn={this.props.isLoggedIn} username=""/>

diff --git a/src/SignupPage.js b/src/SignupPage.js
@@ -58,24 +58,24 @@ class SignupPage extends Component {
     });
 
     // TODO turn this over to middleware
-    if(field === 'username') {
-      const username = e.target.value;
-      //this.props.dispatchUsername(username);
-      fetch('http://localhost:5000/auth/usernameValid', { 
-        method: 'POST',
-        headers: {
-          'Accept': 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ username })
-      }).then(res => res.json()
-      ).then((res) => {
-        if(res && this.state.username === username)
-          this.setState({ usernameValid : true });
-        else
-          this.setState({ usernameValid : res });
-      });
-    }
+    // if(field === 'username') {
+    //   const username = e.target.value;
+    //   //this.props.dispatchUsername(username);
+    //   fetch('http://localhost:5000/auth/usernameValid', { 
+    //     method: 'POST',
+    //     headers: {
+    //       'Accept': 'application/json',
+    //       'Content-Type': 'application/json'
+    //     },
+    //     body: JSON.stringify({ username })
+    //   }).then(res => res.json()
+    //   ).then((res) => {
+    //     if(res && this.state.username === username)
+    //       this.setState({ usernameValid : true });
+    //     else
+    //       this.setState({ usernameValid : res });
+    //   });
+    // }
   }
 
   handleInputChange = (e) => {
@@ -102,17 +102,20 @@ class SignupPage extends Component {
     const { firstname, lastname, username, password, occupation, gender, whichOccupation, schoolyear } = this.state // TODO add firstname, lastname to db model (?)
     const dob = `${moment.monthsShort().indexOf(this.state.month)}-${this.state.day}-${this.state.year}`; // MM-DD-YYYY string
     this.props.dispatchSignup({ 
-      firstname,
-      lastname,
+      firstName:firstname,
+      lastName:lastname,
       username,
       password,
       occupation,
       whichOccupation,
       gender,
       dob,
       schoolyear
-    });
-    this.setState({ signedIn : true });
+    }).then(() => {
+      this.props.onSuccessfulAuth();
+    }).catch(err => {
+      console.error(err);
+    })
   }
 
   // Conditions hold `true` iff there is an error.
@@ -129,16 +132,6 @@ class SignupPage extends Component {
   }
 
   render() {
-    const { isLoggedIn } = this.props;
-
-    if(isLoggedIn) {
-      this.props.onSuccessfulAuth();
-    }
-
-    if(this.state.signedIn) {
-      console.log("SIGNED IN!", this.state);
-      return <Redirect to='/home'/>
-    }
 
     const days = (this.state.month === 'Month' || this.state.year === 'Year') ? this.getDays(moment().month(), moment().year()) : this.getDays(moment.monthsShort().indexOf(this.state.month)+1, this.state.year);
     const { firstname, lastname, username, password, password_c, schoolyear, occupation } = this.state;

diff --git a/src/Tutorial.js b/src/Tutorial.js
@@ -13,7 +13,7 @@ import ShowSpinner from './components/spinner';
 import TutorialStats from './components/TutorialStats';
 import TutorialImage from './components/TutorialImage';
 
-import { postTutorialResults, fetchLesson, redirectToNextLesson } from './actions/tutorial';
+import { postTutorialResults, redirectToNextLesson } from './actions/tutorial';
 import { getCurrentLessonForUser } from './actions/homepage';
 
 
@@ -27,6 +27,9 @@ class Tutorial extends Component {
     } else {
       currentLesson = this.props.currentLesson;
     }
+
+    console.log(this.props);
+
     const { lessonDescriptions, lessonText, lessonImages } = currentLesson;
 
     const contentList = [];
@@ -330,7 +333,6 @@ class Tutorial extends Component {
       headerLinks,
       shouldFreeze,
       indexPtr,
-      totalContentLength,
       shouldShowStats,
       didUserPassLesson,
       resultsForCurrentLesson,
@@ -343,6 +345,8 @@ class Tutorial extends Component {
 
     const { content, userState } = this.getContent(indexPtr);
 
+    console.log(this.props);
+
     let hasImage;
     let imagePath;
     if(userState === this.appState.READING && lessonImages[indexPtr] !== "") {
@@ -354,8 +358,7 @@ class Tutorial extends Component {
     }
 
     const { username } = this.props.currentUser
-    // console.log("!!!!!");
-    // console.log(this.props.currentLesson);
+
     return (
       <React.Fragment>
         <Header links={headerLinks} isLoggedIn={true} username={username} 
@@ -418,7 +421,6 @@ const mapDispatchToProps = dispatch => {
   return bindActionCreators ({ 
     postTutorialResults,
     getCurrentLessonForUser,
-    fetchLesson,
     redirectToNextLesson,
   }, dispatch)
 }