Redesigned courses modal to include ability to filter courses by difficulty and category.

src/components/courses/CourseSelect.js

@@ -2,12 +2,15 @@ import React, { Component } from "react";
 
 import {
     ButtonBase,
+    Button,
     Card,
     CardContent,
     IconButton,
     Icon,
     Modal,
-    Tooltip
+    Tooltip,
+    Typography,
+    Grid,
 } from "@material-ui/core";
 
 import { withStyles } from "@material-ui/core/styles";
@@ -45,17 +48,47 @@ const modelStyles = theme => ({
 class CourseSelectModal extends Component {
     constructor(props) {
         super(props);
+        this.difficulties = ["beginner", "intermediate", "advanced", "expert"];
+        this.categories = ["geometry", "transformations", "animations", "groups", "firstTimer", "teachers", "misc"];
         this.state = {
-            // open: false
+            difficultyFilter : {},
+            categoryFilter : {},
         };
+        for(let i in this.difficulties) {
+            this.state.difficultyFilter[this.difficulties[i]] = true;
+        }
+        for(let i in this.categories) {
+            this.state.categoryFilter[this.categories[i]] = true;
+        }
     }
 
+    convertCamelCase = (text) => {
+        //converts camelCase difficulty/category filters keys into Mixed Case button labels
+        if (typeof(text) === "string") {
+            return text.charAt(0).toUpperCase() + text.replace(/([A-Z]){1}/g, " $1").slice(1);
+        }
+        else {
+            return text;
+        }
+    }  
+
     helper = (course) => {
-        if (course) {
+        let anyCategorySelected = (arr) => {
+            let hasBeenSelected = false;
+            for(let i = 0; i < arr.length; i++) {
+                if (this.state.categoryFilter[arr[i]]) {
+                    hasBeenSelected = true;
+                }
+            }
+            return hasBeenSelected;
+        };
+        if (course && this.state.difficultyFilter[this.difficulties[course.difficulty]] && anyCategorySelected(course.categories)) {
             let id = course._id;
             let shortname = course.shortname;
             let name = course.name;
             let description = course.description;
+            let difficulty = this.convertCamelCase(this.difficulties[course.difficulty]);
+            let categories = course.categories.length > 0 ? course.categories.map(this.convertCamelCase).join(", ") : "None";
             let link = "/course/" + shortname;
             return (
                 <div key={id} id={id} title={name}
@@ -68,7 +101,15 @@ class CourseSelectModal extends Component {
                         <Card>
                             <CardContent>
                                 <h4>{name}</h4>
-                                <p>{description}</p>
+                                <Typography variant="caption" display="block" gutterBottom>
+                                    Difficulty : {difficulty}
+                                </Typography>
+                                <Typography variant="caption" display="block" gutterBottom>
+                                    Categories : {categories}
+                                </Typography>
+                                <Typography variant="body1" gutterBottom>
+                                    {description}
+                                </Typography>
                             </CardContent>
                         </Card>
                     </a>
@@ -80,7 +121,61 @@ class CourseSelectModal extends Component {
         }
     }
 
-    // Render all of the elements
+    setFilterValue = (val, key, type) => {
+        //console.log(val + key + type);
+        if (type === "difficulty") {
+            let newState = this.state;
+            newState.difficultyFilter[key] = val;
+            this.setState(newState);
+        }
+        else if (type === "category") {
+            let newState = this.state;
+            newState.categoryFilter[key] = val;
+            this.setState(newState);
+        }
+    }
+
+    setAllFilters = (value, type) => {
+        switch(type){
+            case "difficulty":
+                for(let i in this.difficulties) {
+                    this.setFilterValue(value , this.difficulties[i], "difficulty");
+                }    
+                break;
+            case "category":
+                for(let i in this.categories) {
+                    this.setFilterValue(value , this.categories[i], "category");
+                }    
+                break;
+            default:
+        }   
+    }
+
+    filterHelper = (key, type) => {
+        if (key) {
+            //converts camelCase difficulty/category filters keys into Mixed Case button labels
+            let buttonText = this.convertCamelCase(key);
+            let filter;
+            if (type === "difficulty") {
+                filter = this.state.difficultyFilter;
+            }
+            else if (type === "category") {
+                filter = this.state.categoryFilter;
+            }
+            return(
+                <Button
+                    variant={filter[key] ? "contained" : "outlined"}
+                    onClick={() => { this.setFilterValue(!filter[key], key, type); }}
+                    size="small">
+                    {buttonText}
+                </Button>
+            );
+        }
+        else {
+            return null;
+        }
+    }  
+
     render() {
         const { classes } = this.props;
         const courses = [].concat(this.props.courses);
@@ -115,13 +210,71 @@ class CourseSelectModal extends Component {
                             <Icon className="material-icons">clear</Icon>
                         </ButtonBase >
                         <h3 className="col-12 p-0 mb-3 border-bottom">Available Courses</h3>
+                        <div id="filters" className="border-bottom">
+                            <h5>Difficulty: </h5>
+                            <Grid container spacing={3}>
+                                <Grid item xs={8}>
+                                    <div>
+                                        {
+                                            this.difficulties.map(i => { return this.filterHelper(i, "difficulty"); })
+                                        }
+                                    </div>
+                                </Grid>
+                                <Grid item xs={4}>
+                                    <Button
+                                        onClick={() => { this.setAllFilters(true, "difficulty"); }}
+                                        size="small">
+                                        Select All
+                                    </Button>
+                                    <Button
+                                        onClick={() => { this.setAllFilters(false, "difficulty"); }}
+
+                                        size="small">
+                                        Deselect All
+                                    </Button>                            
+                                </Grid>
+                            </Grid>
+                            <br></br>
+                            <Grid container spacing={3}>
+                                <Grid item xs={8}>
+                                    <h5>Categories: </h5>
+                                </Grid>
+                            </Grid>
+                            <Grid container spacing={3}>
+                                <Grid item xs={8}>
+                                    <div>
+                                        {
+                                            this.categories.map(i => { return this.filterHelper(i, "category"); })
+                                        }
+                                    </div>
+                                </Grid>
+                                <Grid item xs={4}>
+                                    <Button
+                                        onClick={() => { this.setAllFilters(true, "category"); }}
+                                        size="small">
+                                        Select All
+                                    </Button>
+                                    <Button
+                                        onClick={() => { this.setAllFilters(false, "category"); }}
+                                        size="small">
+                                        Deselect All
+                                    </Button>
+                                </Grid>
+                            </Grid>
+                            <br></br>
+                        </div>
+                        <br></br>
                         <div className="row" id="courses">
-                            { // Sort the users projects in alphabetical order
-                                courses.sort(function (a, b) {
-                                    return a.name < b.name ? -1 : a.name > b.name ? 1 : 0;
-                                }).map(course => {
-                                    return this.helper(course);
-                                })
+                            { // Sort the users projects in alphabetical order 
+                                courses.length !== 0 ?
+                                    () => {
+                                        return courses.sort(function (a, b) {
+                                            return a.name < b.name ? -1 : a.name > b.name ? 1 : 0;
+                                        }).map(course => {
+                                            return this.helper(course);
+                                        });
+                                    } : 
+                                    () => { return (<Typography variant="caption" display="block" gutterBottom>No Courses Found</Typography>); }
                             }
                         </div>
                     </div>

src/css/CourseSelect.css

@@ -14,7 +14,7 @@
 }
 
 div#courses {
-    max-height: 70vh;
+    max-height: 60vh;
     overflow: auto;
 }