1. bug of unit not highlighting fixed

z · z · commit 9034db632665 · 2017-12-05T16:08:22.000+05:30
2. margin for chapter increased on right
diff --git a/components/learn/syllabus-tree/syllabus-tree-component.js b/components/learn/syllabus-tree/syllabus-tree-component.js
@@ -42,7 +42,7 @@ export default class TreeView extends React.PureComponent {
       }
 
       .chapters {
-        padding-left: 0.4rem;
+        padding-left: 0.8rem;
       }
 
       .chapters-collapsed {
@@ -71,9 +71,9 @@ export default class TreeView extends React.PureComponent {
     return (
       <Container>
         <div
-          className={this.props.unitTitle === this.props.activeUnit ? 'unit unit-active' : 'unit'}
+          className={this.props.unitName === this.props.activeUnit ? 'unit unit-active' : 'unit'}
           onClick={this.unitClick}>
-          {this.props.UnitTitleComponent}
+          {this.props.UnitNameComponent}
           <div className={this.state.collapsed ? 'pointer pointer-collapsed' : 'pointer'} />
         </div>
         <div className={this.state.collapsed ? 'chapters chapters-collapsed' : 'chapters'}>
diff --git a/components/learn/syllabus-tree/syllabus-tree-container.js b/components/learn/syllabus-tree/syllabus-tree-container.js
@@ -59,27 +59,27 @@ export default class SyllabusTree extends React.Component {
 
     return (
       <Container>
-        {this.props.data.map((node, i) => {
-          const UnitTitleComponent = (
-            <div className="unit_name" key={node.unit.name} onClick={() => this.handleClick(i)}>
-              {node.unit.name}
+        {this.props.data.map((unitNode, i) => {
+          const UnitNameComponent = (
+            <div className="unit_name" key={unitNode.unit.name} onClick={() => this.handleClick(i)}>
+              {unitNode.unit.name}
             </div>
           );
           return (
             <TreeView
               key={i}
-              unitTitle={node.unit.name}
-              UnitTitleComponent={UnitTitleComponent}
+              unitName={unitNode.unit.name}
+              UnitNameComponent={UnitNameComponent}
               activeUnit={this.state.activeUnit}
               collapsed={this.state.nodeStateTracker[i]}
               onClick={() => this.handleClick(i)}>
-              {node.chapters.map(chapter => (
+              {unitNode.chapters.map(chapter => (
                 <div
                   className={`chapter ${
                     this.state.activeChapter === chapter.url ? 'chapter-active' : 'chapter-inactive'
                   }`}
                   key={chapter.url}
-                  onClick={() => this.clickOnChapter(chapter)}>
+                  onClick={() => this.clickOnChapter(chapter, unitNode.unit.name)}>
                   {chapter.name}
                 </div>
               ))}
diff --git a/pages/learn/subject.js b/pages/learn/subject.js
@@ -12,8 +12,6 @@ import SubjectMarkdown from '../../components/learn/subject-marked';
 
 import { laravelSyllabus } from '../../utils/mock-data';
 
-const defaultChapter = laravelSyllabus[0].chapters[0];
-
 const CurriculumSection = styled.section`
   ${baseContainer};
   ${space};
@@ -34,12 +32,14 @@ const CurriculumSection = styled.section`
   }
 `;
 
+const defaultChapter = laravelSyllabus[0].chapters[0];
+
 export default class Subject extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       activeChapterContent: '',
-      activeChapterName: '',
+      activeChapterName: defaultChapter.name,
       loading: true,
     };
   }
