Remove Expansion Panels, clean up Overview code

Alan19 · Mar 7, 2019 · 4ac110a · 4ac110a
1 parent ed4d1e5
commit 4ac110a
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 94 deletions.
diff --git a/src/components/InDepthSkillList.js b/src/components/InDepthSkillList.js
@@ -1,29 +1,22 @@
 import React from "react";
 import { InDepthView } from "./InDepthView";
-import {ExpansionPanel, ExpansionPanelDetails} from "@material-ui/core";
-import ExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
-import Typography from "@material-ui/core/Typography";
 
 export class InDepthSkillList extends React.Component {
     render() {
       this.collapsed = [];
     let skillList = this.props.skillList;
     let skillListComponents = [];
-    for (let i = 0; i < skillList.length; i++) {
-        this.collapsed[i] = !this.props.isDesktop;
-        skillListComponents.push(
-          <ExpansionPanel defaultExpanded={this.props.isDesktop}>
-              <ExpansionPanelSummary><Typography>{skillList[i].name}</Typography></ExpansionPanelSummary>
-              <ExpansionPanelDetails>
-            <InDepthView
-              skillObject={skillList[i]}
-              isDesktop={this.props.isDesktop}
-            />
-              </ExpansionPanelDetails>
-          </ExpansionPanel>
-        );
-
-    }
+        for (let i = 0; i < skillList.length; i++) {
+            if (i === skillList.length - 1) {
+                skillListComponents.push(<InDepthView skillObject={skillList[i]} isDesktop={this.props.isDesktop}/>);
+            }
+            else {
+                skillListComponents.push(
+                    <React.Fragment><InDepthView skillObject={skillList[i]}
+                                                 isDesktop={this.props.isDesktop}/><hr /></React.Fragment>
+                );
+            }
+        }
     return skillListComponents;
   }
 }
diff --git a/src/components/Overview.js b/src/components/Overview.js
@@ -8,10 +8,16 @@ import {
   CardHeader,
   Grow,
   Icon,
-  IconButton, List, ListItem, ListItemAvatar, ListItemIcon, ListItemSecondaryAction, ListItemText, Paper,
+  IconButton,
+  List,
+  ListItem,
+  ListItemIcon,
+  ListItemSecondaryAction,
+  ListItemText,
   Typography
 } from "@material-ui/core";
 import Grid from "@material-ui/core/Grid";
+import * as PropTypes from "prop-types";
 
 function SkillTitle(props) {
   return (
@@ -49,22 +55,56 @@ export class SkillCard extends Component {
               Learn More
             </Button>
           </div>
-          <IconButton
-            onClick={() =>
-              this.addToCheatSheet(
-                this.props.skill,
-                this.props.updateCheatSheet
-              )
-            }
-          >
-            <Icon color={this.checkFavorited(this.props.skill)}>star</Icon>
+          <IconButton onClick={this.props.addToCheatSheet}>
+            <Icon color={Overview.checkFavorited(this.props.skill)}>star</Icon>
           </IconButton>
         </CardActions>
       </Card>
     );
   }
+}
+
+class MobileSkillList extends Component {
+  render() {
+    return (
+      <List
+        style={{
+          width: "100%",
+          maxWidth: 360,
+          backgroundColor: this.props.theme.palette.background.paper
+        }}
+        component={"nav"}
+      >
+        <ListItem onClick={this.props.onClick}>
+          <ListItemIcon>
+            <Avatar src={this.props.skill.icon} />
+          </ListItemIcon>
+          <ListItemText
+            primary={this.props.skill.name}
+            secondary={<Typography noWrap>{this.props.skill.text}</Typography>}
+          />
+          <ListItemSecondaryAction>
+            <IconButton onClick={this.props.addToCheatSheet}>
+              <Icon color={Overview.checkFavorited(this.props.skill)}>
+                star
+              </Icon>
+            </IconButton>
+          </ListItemSecondaryAction>
+        </ListItem>
+      </List>
+    );
+  }
+}
 
-  checkFavorited = skill => {
+MobileSkillList.propTypes = {
+  theme: PropTypes.any,
+  onClick: PropTypes.func,
+  skill: PropTypes.any,
+  addToCheatSheet: PropTypes.func
+};
+
+export class Overview extends React.Component {
+  static checkFavorited(skill) {
     if (localStorage.getItem("favorites") === null) {
       return "inherit";
     } else {
@@ -74,13 +114,8 @@ export class SkillCard extends Component {
         return "inherit";
       }
     }
-  };
+  }
 
-  /**
-   * Method for adding item to cheat sheet
-   * @param skill The skill that is to be added to the cheat sheet
-   * @param cheatSheetMethod The method reference to update the cheat sheet
-   */
   addToCheatSheet(skill, cheatSheetMethod) {
     if (localStorage.hasOwnProperty("favorites")) {
       let favoriteArray = JSON.parse(localStorage.getItem("favorites"));
@@ -98,37 +133,7 @@ export class SkillCard extends Component {
     cheatSheetMethod();
     this.forceUpdate();
   }
-}
 
-export class Overview extends React.Component {
-  addToCheatSheet(skill, cheatSheetMethod) {
-    if (localStorage.hasOwnProperty("favorites")) {
-      let favoriteArray = JSON.parse(localStorage.getItem("favorites"));
-      if (!favoriteArray.includes(skill.name)) {
-        favoriteArray.push(skill.name);
-        localStorage.setItem("favorites", JSON.stringify(favoriteArray));
-      } else {
-        favoriteArray = favoriteArray.filter(name => skill.name !== name);
-        localStorage.setItem("favorites", JSON.stringify(favoriteArray));
-      }
-    } else {
-      let favoriteArray = [skill.name];
-      localStorage.setItem("favorites", JSON.stringify(favoriteArray));
-    }
-    cheatSheetMethod();
-    this.forceUpdate();
-  };
-  checkFavorited = skill => {
-    if (localStorage.getItem("favorites") === null) {
-      return "inherit";
-    } else {
-      if (JSON.parse(localStorage.getItem("favorites")).includes(skill.name)) {
-        return "secondary";
-      } else {
-        return "inherit";
-      }
-    }
-  };
   render() {
     return (
       <Grow in={true}>
@@ -142,36 +147,31 @@ export class Overview extends React.Component {
             margin: "auto"
           }}
         >
-          {this.props.currentView.map(skill => (
-            this.props.isDesktop ? <Grid item sm={4}>
-              <SkillCard
-                updateCheatSheet={this.props.updateCheatSheet}
-                learnMore={this.props.learnMore}
-                skill={skill}
-                isDesktop={this.props.isDesktop}
+          {this.props.currentView.map(skill =>
+            this.props.isDesktop ? (
+              <Grid item sm={4}>
+                <SkillCard
+                  addToCheatSheet={() =>
+                    this.addToCheatSheet(skill, this.props.updateCheatSheet)
+                  }
+                  checkFavorited={Overview.checkFavorited.bind(this)}
+                  updateCheatSheet={this.props.updateCheatSheet}
+                  learnMore={this.props.learnMore}
+                  skill={skill}
+                  isDesktop={this.props.isDesktop}
+                />
+              </Grid>
+            ) : (
+              <MobileSkillList
+                  theme={this.props.theme}
+                  onClick={() => this.props.learnMore(skill)}
+                  skill={skill}
+                  addToCheatSheet={() =>
+                  this.addToCheatSheet(skill, this.props.updateCheatSheet)
+                }
               />
-            </Grid> :
-                <List style={{width: '100%',
-                  maxWidth: 360,
-                  backgroundColor: this.props.theme.palette.background.paper}} component={"nav"}>
-                  <ListItem onClick={() => this.props.learnMore(skill)}>
-                    <ListItemIcon><Avatar src={skill.icon}/></ListItemIcon>
-                    <ListItemText primary={skill.name} secondary={<Typography noWrap>{skill.text}</Typography>} />
-                    <ListItemSecondaryAction>
-                      <IconButton
-                          onClick={() =>
-                              this.addToCheatSheet(
-                                  skill,
-                                  this.props.updateCheatSheet
-                              )
-                          }
-                      >
-                        <Icon color={this.checkFavorited(skill)}>star</Icon>
-                      </IconButton>
-                    </ListItemSecondaryAction>
-                  </ListItem>
-                </List>
-          ))}
+            )
+          )}
         </Grid>
       </Grow>
     );