filter domain added with functionality

coderplex-org · vinaypuppal · Nov 1, 2017 · Oct 25, 2017 · Oct 25, 2017 · Oct 25, 2017
commit 30912ac00b0e51a19917dd95784544e9909c1a99
diff --git a/components/global-styles.js b/components/global-styles.js
@@ -52,6 +52,10 @@ export default () => (
       .headroom--scrolled {
         z-index: 99999 !important;
       }
+      .learn_search {
+        padding-top: 40px;
+        padding-bottom: 40px;
+      }
     `}</style>
   </div>
 );
diff --git a/pages/learn.js b/pages/learn.js
@@ -1,16 +1,42 @@
 import React from 'react';
-import { Card, Icon, Label, Popup, Grid } from 'semantic-ui-react';
+import {
+  Card,
+  Icon,
+  Label,
+  Popup,
+  Grid,
+  Button,
+  Search,
+  Header,
+} from 'semantic-ui-react';
 
 import publicPage from '../hocs/public-page';
 import TopBanner from '../components/top-banner';
 
-import { dataInRootLearn } from '../utils/mock-data';
+import { listOfSubjects, listOfDomains } from '../utils/mock-data';
 
+let numOfFilteredSubjects;
 class Learn extends React.Component {
   state = {
-    filter: '',
+    filter: 'All',
+    filteredSubjects: listOfSubjects,
   };
 
+  componentDidUpdate(prevProps, prevState) {
+    if (prevState.filter !== this.state.filter) {
+      const filteredSubjects = listOfSubjects.filter(subject => {
+        if (this.state.filter === 'All') {
+          return true;
+        }
+        return subject.domain === this.state.filter;
+      });
+      numOfFilteredSubjects = filteredSubjects.length;
+      this.setState({
+        filteredSubjects,
+      });
+    }
+  }
+
   render() {
     return (
       <div className="root">
@@ -20,10 +46,38 @@ class Learn extends React.Component {
         />
         <main>
           <section>
-            <filterset>{/* <Button /> */}</filterset>
+            {listOfDomains.map(domain => (
+              <Button
+                key={domain}
+                style={{ marginBottom: '10px' }}
+                className="filter_button"
+                basic
+                color="pink"
+                onClick={() => this.setState({ filter: domain })}
+              >
+                {domain}
+              </Button>
+            ))}
+            <Search className="learn_search" placeholder="Search topics" />
+            <Header
+              as="h3"
+              dividing
+              style={{ marginBottom: '40px', textAlign: 'center' }}
+            >
+              {this.state.filter === 'All'
+                ? 'Showing all courses'
+                : numOfFilteredSubjects === 0
+                  ? `Currenlty we dont have any subjects under ${this.state
+                      .filter}`
+                  : `Showing ${numOfFilteredSubjects} courses under ${this.state
+                      .filter}`}
+            </Header>
             <Grid stackable columns={3}>
-              {dataInRootLearn.map(subject => (
-                <Grid.Column key={subject.id}>
+              {this.state.filteredSubjects.map(subject => (
+                <Grid.Column
+                  style={{ paddingBottom: '4.5rem' }}
+                  key={subject.id}
+                >
                   <Card
                     raised
                     label={{ as: 'a', corner: 'left', icon: 'heart' }}
@@ -66,18 +120,23 @@ class Learn extends React.Component {
             background-color: #ffffff;
           }
           main {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            justify-content: center;
+            align-content: flex-start;
+            align-items: flex-start;
             background-color: #ffffff;
-            padding-top: 30px;
-            padding-bottom: 30px;
-            padding-left: 30px;
-            padding-right: 30px;
+            padding: 30px;
             min-height: calc(100vh - 70px);
+            margin: 0 auto;
           }
           section {
             margin: 50px 0;
+            max-width: 800px;
           }
           logo {
-            font-size: 15em;
+            font-size: 12em;
             text-align: center;
             padding-top: 10px;
             padding-bottom: 10px;

diff --git a/utils/mock-data.js b/utils/mock-data.js
@@ -1,8 +1,8 @@
-export const dataInRootLearn = [
+export const listOfSubjects = [
   {
     id: '2132',
     title: 'Laravel',
-    domain: 'Backend Development',
+    domain: 'Web Development',
     url: '/learn/laravel',
     icon: 'devicon-laravel-plain colored',
     learningCount: '20',
@@ -11,7 +11,7 @@ export const dataInRootLearn = [
   {
     id: '213',
     title: 'ReactJS',
-    domain: 'Frontend Development',
+    domain: 'Web Development',
     url: '/learn/reactjs',
     icon: 'devicon-react-original colored',
     learningCount: '28',
@@ -29,7 +29,7 @@ export const dataInRootLearn = [
   {
     id: '21fa3',
     title: 'Android',
-    domain: 'Mobile Development',
+    domain: 'Mobile Technology',
     url: '/learn/',
     icon: 'devicon-android-plain colored',
     learningCount: '9',
@@ -56,7 +56,7 @@ export const dataInRootLearn = [
   {
     id: '2bxcvbx13',
     title: 'iOS',
-    domain: 'Mobile Development',
+    domain: 'Mobile Technology',
     url: '/learn/',
     icon: 'devicon-swift-plain colored',
     learningCount: '45',
@@ -126,3 +126,14 @@ export const indexPageLearns = [
     image: '',
   },
 ];
+
+export const listOfDomains = [
+  'All',
+  'Computer Science',
+  'Programming Language',
+  'Web Development',
+  'Mobile Technology',
+  'Data Science',
+  'Artificial Intelligence',
+  'BlockChain',
+];