#21 Added toggle ball to toggle between the two views of MemberCards

package.json

@@ -16,6 +16,7 @@
   "license": "MIT",
   "scripts": {
     "build": "gatsby build",
+    "dev": "gatsby develop",
     "develop": "gatsby develop",
     "format": "prettier --write 'src/**/*.js'",
     "test": "echo \"Error: no test specified\" && exit 1"

src/components/member-card.js

@@ -1,56 +1,30 @@
 import React, {
   Component
 } from "react";
-import LinkedInIcon from 'assets/img/linkedin-icon.png';
-import TwitterIcon from 'assets/img/twitter-icon.png';
-import GithubIcon from 'assets/img/github-icon.png';
+import SocialSites from 'components/social-sites';
 import memberCardS from 'scss/member-card.scss';
 
-export default (props) => {
-  return (
-    <div className="memberCard">
-      <img 
-        className="photo"
-        src={props.member.photoURL}
-        alt={props.member.frontmatter.name}/>
-      <span className="name">{props.member.frontmatter.name}</span>
-      <p className="content" dangerouslySetInnerHTML={{ __html: props.member.html}}></p>
-      <SocialSites socialList={props.member.frontmatter.socials[0]}/>
-    </div>
-  );
+export default class ToggleBall extends Component {
+  constructor(props) {
+    super(props);
+    // this.props = props;
+    // console.log(props);
+    // this.SocialSites = this.SocialSites.bind(this);
+  }
+  render() {
+    return (
+      <div className={`MemberCard MemberCard--${this.props.memberCardVariant}`}>
+        <img 
+          className="MemberCard__photo"
+          src={this.props.member.photoURL}
+          alt={this.props.member.frontmatter.name}/>
+        <span className="MemberCard__name">{this.props.member.frontmatter.name}</span>
+        <p className="MemberCard__content" dangerouslySetInnerHTML={{ __html: this.props.member.html}}></p>
+        <SocialSites socialList={this.props.member.frontmatter.socials[0]}/>
+      </div>
+    );
+  }
 }
 
-function SocialSites(props) {
-  console.log(props.socialList);
-  return (
-    <ul className="socialWrapper">
-
-    {props.socialList.github !== null && props.socialList.github !== '' &&
-      <li className="social">
-        <a target="_blank" href={`https://github.com/${props.socialList.github}`}>
-          <img className="socialImage" src={GithubIcon} />
-        </a>
-      </li>
-    }
-
-    {props.socialList.twitter !== null && props.socialList.twitter !== '' &&
-      <li className="social">
-        <a target="_blank" href={`https://twitter.com/${props.socialList.twitter}`}>
-          <img className="socialImage" src={LinkedInIcon} />
-        </a>
-      </li>
-    }
-
-    {props.socialList.linkedin !== null && props.socialList.linkedin !== '' &&
-      <li className="social">
-        <a target="_blank" href={`https://linkedin.com/in/${props.socialList.linkedin}`}>
-          <img className="socialImage" src={TwitterIcon} />
-        </a>
-      </li>
-    }
-
-    </ul>
-  );
-}
 
 

src/components/social-sites.js

@@ -0,0 +1,43 @@
+import React, {
+  Component
+} from "react";
+import LinkedInIcon from 'assets/img/linkedin-icon.png';
+import TwitterIcon from 'assets/img/twitter-icon.png';
+import GithubIcon from 'assets/img/github-icon.png';
+import memberCardS from 'scss/member-card.scss';
+
+export default class SocialSites extends Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <ul className="MemberCard__social-wrapper">
+
+      {this.props.socialList.github !== null && this.props.socialList.github !== '' &&
+        <li className="MemberCard__social-item">
+          <a target="_blank" href={`https://github.com/${this.props.socialList.github}`}>
+            <img className="MemberCard__social-image" src={GithubIcon} />
+          </a>
+        </li>
+      }
+
+      {this.props.socialList.twitter !== null && this.props.socialList.twitter !== '' &&
+        <li className="MemberCard__social-item">
+          <a target="_blank" href={`https://twitter.com/${this.props.socialList.twitter}`}>
+            <img className="MemberCard__social-image" src={LinkedInIcon} />
+          </a>
+        </li>
+      }
+
+      {this.props.socialList.linkedin !== null && this.props.socialList.linkedin !== '' &&
+        <li className="MemberCard__social-item">
+          <a target="_blank" href={`https://linkedin.com/in/${this.props.socialList.linkedin}`}>
+            <img className="MemberCard__social-image" src={TwitterIcon} />
+          </a>
+        </li>
+      }
+      </ul>
+    );
+  }
+}

src/components/toggle-ball.js

@@ -0,0 +1,35 @@
+import React, {
+  Component
+} from "react";
+import toggleBallS from 'scss/toggle-ball.scss';
+
+export default class ToggleBall extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { isToggleOn: true };
+    this.toggleBall = this.toggleBall.bind(this);
+  }
+
+  render() {
+
+    let toggleBallS = this.state.isToggleOn ? 
+    { 'transform': 'translateX(0)' } : 
+    { 'transform': 'translateX(21px)' }
+
+    return (
+      <div
+        onClick={this.toggleBall}
+        className="ToggleBall__container">
+        <div style={toggleBallS} className="ToggleBall__ball"></div>
+      </div>
+    );
+  }
+
+  toggleBall = () => {
+    this.setState(prevState => ({
+      isToggleOn: !prevState.isToggleOn
+    }))
+    this.props.toggle();
+  }
+}
+

src/html.js

@@ -0,0 +1,48 @@
+import React from "react"
+
+let stylesStr
+if (process.env.NODE_ENV === `production`) {
+  try {
+    stylesStr = require(`!raw-loader!../public/styles.css`)
+  } catch (e) {
+    console.log(e)
+  }
+}
+
+module.exports = class HTML extends React.Component {
+  render() {
+    let css
+    if (process.env.NODE_ENV === `production`) {
+      css = (
+        <style
+          id="gatsby-inlined-css"
+          dangerouslySetInnerHTML={{ __html: stylesStr }}
+        />
+      )
+    }
+    return (
+      <html {...this.props.htmlAttributes}>
+        <head>
+          <meta charSet="utf-8" />
+          <meta httpEquiv="x-ua-compatible" content="ie=edge" />
+          <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1, shrink-to-fit=no"
+          />
+          <link href="https://fonts.googleapis.com/css?family=Noto+Sans" rel="stylesheet">
+          {this.props.headComponents}
+          {css}
+        </head>
+        <body {...this.props.bodyAttributes}>
+          {this.props.preBodyComponents}
+          <div
+            key={`body`}
+            id="___gatsby"
+            dangerouslySetInnerHTML={{ __html: this.props.body }}
+          />
+          {this.props.postBodyComponents}
+        </body>
+      </html>
+    )
+  }
+}

src/layouts/index.js

@@ -5,7 +5,7 @@ import base from '../assets/css/base.css';
 
 
 export default ({ children }) => (
-  <div style={{ margin: `0 auto`, padding: `0 1rem` }}>
+  <div>
     <Header/>
     {children()}
   </div>

src/pages/members.js

@@ -1,53 +1,75 @@
-import React from "react";
+import React, {Component} from "react";
 import MemberCard from 'components/member-card.js';
+import ToggleBall from 'components/toggle-ball.js';
 import { hyphenateSpaces } from 'utils.js';
 import membersS from 'scss/pages/members.scss';
 
 // Alias styles object to 's' for cleanliness
-export default ({data}) => {
-
-  // Consolidates graphQL data
-  let members = prepareMembers(data);
-
-  return (
-    <div>
-      <div className="container">
-        {members.map( (member, index) =>
+export default class MembersPage extends Component {
+  constructor({data}) {
+    super();
+    this.data = {data};
+    this.state = {
+      memberCardVariant: 'details',
+      members: this.prepareMembers(data),
+    };
+  }
 
-          <MemberCard
-            key={index}
-            member={member}
-          />
+  render() {
+    return (
+      <div className="Members--page">
+        <div className="Members__toggle-container">
+          <span className={this.state.memberCardVariant === 'details' ? 'active' : ''}>
+            details view
+          </span>
+          <ToggleBall 
+            toggle={this.toggleMemberCardVariant}/>
+          <span className={this.state.memberCardVariant === 'roster' ? 'active' : ''}>
+            roster view
+          </span>
+        </div>
 
-        )}
+        <div className="Members__container">
+          {this.state.members.map( (member, index) =>
+            <MemberCard
+              key={index}
+              member={member}
+              memberCardVariant={this.state.memberCardVariant}
+            />
+          )}
+        </div>
       </div>
-    </div>
-  )
-};
+    );
+  }
+  toggleMemberCardVariant = () => {
+    this.setState({
+      memberCardVariant: this.state.memberCardVariant === 'roster' ? 'details' : 'roster',
+    })
+  }
 
-function prepareMembers(data) {
-  let markdownData = Object.assign({}, data.allMarkdownRemark)
-  let members = [];
+  // Consolidates graphQL data
+  prepareMembers = (data) => {
+    let markdownData = Object.assign({}, data.allMarkdownRemark)
+    let members = [];
 
-  // Consolidate graphql response into single, readable members
-  markdownData.edges.map( (member, index) => {
-    // Alias member to "member.node" because it's fucking long
-    member = member.node;
+    // Consolidate graphql response into single, readable members
+    markdownData.edges.map( (member, index) => {
+      // Alias member to "member.node" because it's fucking long
+      member = member.node;
 
-    // Consolidate images
-    let username = hyphenateSpaces(member.frontmatter.name.toLowerCase())
-    data.allFile.edges.forEach( fileNode => {
-      if(username === fileNode.node.name) {
-        let newMember = Object.assign(member, {photoURL: fileNode.node.publicURL})
-        members.push(newMember);
-      }
+      // Consolidate images
+      let username = hyphenateSpaces(member.frontmatter.name.toLowerCase())
+      data.allFile.edges.forEach( fileNode => {
+        if(username === fileNode.node.name) {
+          let newMember = Object.assign(member, {photoURL: fileNode.node.publicURL})
+          members.push(newMember);
+        }
+      })
     })
-  })
- return members; 
+   return members; 
+  }
 }
 
-
-
 export const query = graphql`
   query MemberQuery {
     allMarkdownRemark {

src/scss/header.scss

@@ -10,7 +10,11 @@
   flex-flow: row nowrap;
   align-items: center;
   justify-content: space-between;
-  width: 100%;
+  max-width: 100%;
+  font-family: 'Noto Sans', sans-serif;
+  height: 40px;
+  margin-bottom: 20px;
+  padding: 15px;
   &__logo {
     display: inline;
   }
@@ -21,5 +25,9 @@
   &__nav-link {
     display: inline-block;
     margin-right: 1rem;
+    a {
+      text-decoration: none;
+      color: purple;
+    }
   }
 }