1. width changes to cards in learn

z · z · commit 7ad04b058e2f · 2017-12-01T17:29:10.000+05:30
2. marked js file
3. minor changes in tree comp
diff --git a/components/common/markedjs.js b/components/common/markedjs.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import marked from 'marked';
+import styled from 'react-emotion';
+
+const Marked = styled.div`
+  background-color: #fff;
+`;
+
+export default class MarkedJS extends React.Component {
+  constructor(props) {
+    super(props);
+    marked.setOptions({
+      renderer: new marked.Renderer(),
+      gfm: true,
+      tables: true,
+      breaks: false,
+      pedantic: false,
+      sanitize: true,
+      smartLists: true,
+      smartypants: false,
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        {this.props.loading ? (
+          <div>Loading...</div>
+        ) : (
+          <Marked
+            dangerouslySetInnerHTML={{
+              __html: marked(this.props.markdown),
+            }}
+          />
+        )}
+      </div>
+    );
+  }
+}
diff --git a/components/learn/subject-card.js b/components/learn/subject-card.js
@@ -11,9 +11,8 @@ import { breakpoints, Button } from '../../utils/base.styles';
 const SubjectCard = styled.div`
   ${space};
   text-decoration: none;
-  width: calc(25% - 40px);
-  margin-top: 20px;
-  margin-bottom: 20px;
+  width: calc(25% - 24px);
+  margin-top: 24px;
   display: inline-block;
   min-height: 200px;
   border: 1px solid #b9b9b9;
@@ -63,10 +62,10 @@ const SubjectCard = styled.div`
     text-align: center;
   }
   ${breakpoints.md} {
-    width: calc(50% - 40px);
+    width: calc(33% - 30px);
   }
   ${breakpoints.sm} {
-    width: calc(50% - 40px);
+    width: calc(50% - 50px);
     margin: 20px auto;
   }
   ${breakpoints.xs} {
diff --git a/components/learn/syllabus-tree/syllabus-tree-component.js b/components/learn/syllabus-tree/syllabus-tree-component.js
@@ -1,13 +1,12 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import styled from 'react-emotion';
 
 export default class TreeView extends React.PureComponent {
   state = {
     collapsed: this.props.defaultCollapsed,
   };
 
-  handleClick = (...args) => {
+  handleNodeClick = (...args) => {
     this.setState({ collapsed: !this.state.collapsed });
     if (this.props.onClick) {
       this.props.onClick(...args);
@@ -21,10 +20,8 @@ export default class TreeView extends React.PureComponent {
       itemClassName = '',
       treeViewClassName = '',
       childrenClassName = '',
-      nodeLabel,
       children,
       defaultCollapsed,
-      ...rest
     } = this.props;
 
     const Container = styled.div`
@@ -76,28 +73,18 @@ export default class TreeView extends React.PureComponent {
       containerClassName += ' tree-view_children-collapsed';
     }
 
-    const arrow = <div {...rest} className={className + ' ' + arrowClassName} onClick={this.handleClick} />;
+    const arrow = <div className={`${className} ${arrowClassName}`} onClick={this.handleNodeClick} />;
 
     return (
       <Container>
-        <div className={'tree-view ' + treeViewClassName}>
-          <div className={'tree-view_item ' + itemClassName}>
+        <div className={`tree-view ${treeViewClassName}`}>
+          <div className={`tree-view_item ${itemClassName}`}>
             {arrow}
-            {nodeLabel}
+            {this.props.nodeLabel}
           </div>
-          <div className={containerClassName + ' ' + childrenClassName}>{collapsed ? null : children}</div>
+          <div className={`${containerClassName} ${childrenClassName}`}>{collapsed ? null : children}</div>
         </div>
       </Container>
     );
   }
 }
-
-TreeView.propTypes = {
-  collapsed: PropTypes.bool,
-  defaultCollapsed: PropTypes.bool,
-  nodeLabel: PropTypes.node.isRequired,
-  className: PropTypes.string,
-  itemClassName: PropTypes.string,
-  childrenClassName: PropTypes.string,
-  treeViewClassName: PropTypes.string,
-};
diff --git a/components/learn/syllabus-tree/syllabus-tree-container.js b/components/learn/syllabus-tree/syllabus-tree-container.js
@@ -20,49 +20,50 @@ export default class SyllabusTree extends React.Component {
 
   render() {
     const Container = styled.div`
-      .node {
+      & .node {
         transition: all 0.5s;
         border-radius: 3px;
       }
 
-      .node:hover {
+      & .node:hover,
+      & .info:hover {
         background-color: rgb(220, 245, 243);
         cursor: pointer;
       }
 
-      .info,
-      .node {
+      & .info,
+      & .node {
         padding: 2px 10px 2px 5px;
         font: 14px Helvetica, Arial, sans-serif;
         user-select: none;
       }
 
-      .tree-view_arrow {
+      & .tree-view_arrow {
         transition: all 0.1s;
       }
 
-      .tree-view_arrow-empty {
+      & .tree-view_arrow-empty {
         color: yellow;
       }
     `;
 
     return (
       <Container>
         {this.props.data.map((node, i) => {
-          const ChapterTitle = (
-            <span className="node" onClick={() => this.handleClick(i)}>
-              Type {i}
+          const UnitTitle = (
+            <span className="node" key={node.unit.num} onClick={() => this.handleClick(i)}>
+              {node.unit.name}
             </span>
           );
           return (
             <TreeView
               key={i}
-              nodeLabel={ChapterTitle}
+              nodeLabel={UnitTitle}
               collapsed={this.state.nodeStateTracker[i]}
               onClick={() => this.handleClick(i)}>
-              {node.map(entry => (
-                <div className="info" key={entry.id} onClick={() => console.log(entry.url)}>
-                  {entry.id}
+              {node.chapters.map(chapter => (
+                <div className="info" key={chapter.url} onClick={() => this.props.changeChapter(chapter.url)}>
+                  {chapter.name}
                 </div>
               ))}
             </TreeView>
diff --git a/pages/learn/subject.js b/pages/learn/subject.js
@@ -1,12 +1,33 @@
 import React from 'react';
+import fetch from 'isomorphic-unfetch';
 
 import Layout from '../../components/common/layout';
 import BannerSection from '../../components/learn/subject-banner';
 import SyllabusTree from '../../components/learn/syllabus-tree/syllabus-tree-container';
+// import MarkedJS from '../../components/common/markedjs';
 
-const dataSource = [[{ id: 'aa', url: 'https//:aaple.com' }, { id: 'oo' }], [{ id: 'ff' }]];
+import { laravelSyllabus } from '../../utils/mock-data';
+
+const defaultChapter = laravelSyllabus[0].chapters[0].url;
 
 export default class Subject extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      viewingChapter: defaultChapter,
+    };
+  }
+
+  componentDidMount() {}
+
+  async getChapterContent(chapter) {
+    const responce = await fetch(chapter);
+  }
+
+  changeChapter = selectedChapter => {
+    this.setState({ viewingChapter: selectedChapter });
+  };
+
   render() {
     return (
       <Layout>
@@ -16,7 +37,7 @@ export default class Subject extends React.Component {
           subTitle="Web Development"
           icon="devicon-laravel-plain colored"
         />
-        <SyllabusTree data={dataSource} />
+        <SyllabusTree data={laravelSyllabus} changeChapter={this.changeChapter} />
       </Layout>
     );
   }
diff --git a/utils/mock-data.js b/utils/mock-data.js
