Landing team section

client/package.json

@@ -3,13 +3,18 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^0.18.0",
+    "enzyme": "^3.8.0",
+    "enzyme-adapter-react-16": "^1.7.1",
     "prop-types": "^15.6.2",
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
     "react-redux": "^6.0.0",
     "react-router-dom": "^4.3.1",
-    "react-scripts": "2.1.1",
+    "react-scripts": "^2.1.2",
     "redux": "^4.0.1",
+    "redux-mock-store": "^1.5.3",
+    "redux-thunk": "^2.3.0",
     "styled-components": "^4.1.2"
   },
   "scripts": {

client/src/actions/fetch_team_members.js

@@ -0,0 +1,11 @@
+import axios from 'axios';
+import { GET_TEAM_MEMBERS } from '../constants/actionTypes';
+
+export default teamId => dispatch => {
+  axios.get(`/api/teams/${teamId}/members`).then(({ data }) =>
+    dispatch({
+      type: GET_TEAM_MEMBERS,
+      data,
+    })
+  );
+};

client/src/components/LandingPage/Team/StyledCompnents.js

@@ -8,6 +8,13 @@ export const CardWrapper = styled.div`
   font-family: 'Wallpoet', cursive;
   text-align: center;
   margin: 27px 9%;
+  @media (max-width: 720px) {
+    width: 335px;
+  }
+  @media (min-width: 1440px) {
+    width: 15%;
+    margin: 27px auto;
+  }
 `;
 
 export const ImageContainer = styled.div`
@@ -18,6 +25,12 @@ export const ImageContainer = styled.div`
   background-repeat: no-repeat;
   background-position: center;
   width: 100%;
+  @media (max-width: 720px) {
+    height: 270px;
+  }
+  @media (min-width: 1440px) {
+    height: 12vw;
+  }
 `;
 
 export const CardImage = styled.img`
@@ -43,3 +56,45 @@ export const UserSpecialty = styled.h2`
   color: var(--cyan);
   letter-spacing: -1.33px;
 `;
+
+// general team section elements
+
+export const TeamWrapper = styled.div`
+  text-align: center;
+`;
+
+export const TeamCardsWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+  margin-top: 2%;
+`;
+
+export const Header = styled.header`
+  position: relative;
+  min-height: 7vw;
+  color: #fff;
+`;
+
+export const HeaderImage = styled.img`
+  width: 80%;
+  min-width: 320px;
+  position: absolute;
+  transform: translate(-50%, -50%);
+  top: 50%;
+  left: 50%;
+  z-index: -1;
+`;
+
+export const Heading = styled.h1`
+  line-height: 90px;
+  position: absolute;
+  transform: translate(-50%, -50%);
+  top: 60%;
+  left: 50%;
+  font-family: 'Wallpoet', cursive;
+  margin-left: 1%;
+  font-size: 4vw;
+  font-size: calc(14px + (60 - 14) * ((100vw - 300px) / (1600 - 300)));
+`;

client/src/components/LandingPage/Team/Team.test.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import Adapter from 'enzyme-adapter-react-16';
+
+import { shallow, configure } from 'enzyme';
+
+import { Provider } from 'react-redux';
+import Team from './index';
+import store from '../../../store';
+
+// set enzyme Adapture configuration
+configure({ adapter: new Adapter() });
+
+test('Testing for Team section', () => {
+  const wrapper = shallow(
+    <Provider store={store}>
+      <Team />
+    </Provider>
+  );
+
+  expect(wrapper).toMatchSnapshot();
+  expect(wrapper.find(Team).length).toEqual(1);
+});

client/src/components/LandingPage/Team/__snapshots__/Team.test.js.snap

@@ -0,0 +1,153 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Testing for Team section 1`] = `
+ShallowWrapper {
+  Symbol(enzyme.__root__): [Circular],
+  Symbol(enzyme.__unrendered__): <Provider
+    store={
+      Object {
+        "dispatch": [Function],
+        "getState": [Function],
+        "replaceReducer": [Function],
+        "subscribe": [Function],
+        Symbol(observable): [Function],
+      }
+    }
+  >
+    <Connect(Team) />
+  </Provider>,
+  Symbol(enzyme.__renderer__): Object {
+    "batchedUpdates": [Function],
+    "getNode": [Function],
+    "render": [Function],
+    "simulateError": [Function],
+    "simulateEvent": [Function],
+    "unmount": [Function],
+  },
+  Symbol(enzyme.__node__): Object {
+    "instance": null,
+    "key": undefined,
+    "nodeType": "function",
+    "props": Object {
+      "children": <Connect(Team) />,
+      "value": Object {
+        "store": Object {
+          "dispatch": [Function],
+          "getState": [Function],
+          "replaceReducer": [Function],
+          "subscribe": [Function],
+          Symbol(observable): [Function],
+        },
+        "storeState": Object {
+          "teams": Object {
+            "currentTeam": Object {
+              "members": Array [],
+            },
+          },
+          "users": Array [],
+        },
+      },
+    },
+    "ref": null,
+    "rendered": Object {
+      "instance": null,
+      "key": undefined,
+      "nodeType": "class",
+      "props": Object {},
+      "ref": null,
+      "rendered": null,
+      "type": [Function],
+    },
+    "type": Object {
+      "$$typeof": Symbol(react.provider),
+      "_context": Object {
+        "$$typeof": Symbol(react.context),
+        "Consumer": Object {
+          "$$typeof": Symbol(react.context),
+          "_calculateChangedBits": null,
+          "_context": [Circular],
+        },
+        "Provider": [Circular],
+        "_calculateChangedBits": null,
+        "_currentRenderer": null,
+        "_currentRenderer2": null,
+        "_currentValue": null,
+        "_currentValue2": null,
+        "_threadCount": 0,
+      },
+    },
+  },
+  Symbol(enzyme.__nodes__): Array [
+    Object {
+      "instance": null,
+      "key": undefined,
+      "nodeType": "function",
+      "props": Object {
+        "children": <Connect(Team) />,
+        "value": Object {
+          "store": Object {
+            "dispatch": [Function],
+            "getState": [Function],
+            "replaceReducer": [Function],
+            "subscribe": [Function],
+            Symbol(observable): [Function],
+          },
+          "storeState": Object {
+            "teams": Object {
+              "currentTeam": Object {
+                "members": Array [],
+              },
+            },
+            "users": Array [],
+          },
+        },
+      },
+      "ref": null,
+      "rendered": Object {
+        "instance": null,
+        "key": undefined,
+        "nodeType": "class",
+        "props": Object {},
+        "ref": null,
+        "rendered": null,
+        "type": [Function],
+      },
+      "type": Object {
+        "$$typeof": Symbol(react.provider),
+        "_context": Object {
+          "$$typeof": Symbol(react.context),
+          "Consumer": Object {
+            "$$typeof": Symbol(react.context),
+            "_calculateChangedBits": null,
+            "_context": [Circular],
+          },
+          "Provider": [Circular],
+          "_calculateChangedBits": null,
+          "_currentRenderer": null,
+          "_currentRenderer2": null,
+          "_currentValue": null,
+          "_currentValue2": null,
+          "_threadCount": 0,
+        },
+      },
+    },
+  ],
+  Symbol(enzyme.__options__): Object {
+    "adapter": ReactSixteenAdapter {
+      "options": Object {
+        "enableComponentDidUpdateOnSetState": true,
+        "lifecycles": Object {
+          "componentDidUpdate": Object {
+            "onSetState": true,
+          },
+          "getDerivedStateFromProps": true,
+          "getSnapshotBeforeUpdate": true,
+          "setState": Object {
+            "skipsComponentDidUpdateOnNullish": true,
+          },
+        },
+      },
+    },
+  },
+}
+`;

client/src/components/LandingPage/Team/__snapshots__/TeamCard.test.js.snap

@@ -2,18 +2,18 @@
 
 exports[`Testing for TeamCard component 1`] = `
 <div
-  className="sc-bdVaJa mdupv"
+  className="sc-bdVaJa joJjbd"
 >
   <div
-    className="sc-bwzfXH hqawGO"
+    className="sc-bwzfXH bPzlnP"
   >
     <img
       className="sc-htpNat jvkVJd"
       src="https://avatars3.githubusercontent.com/u/34629478?s=460&v=4"
     />
   </div>
   <h1
-    className="sc-bxivhb jcTKvB"
+    className="sc-bxivhb gVbMSN"
   >
     Ramy A Shurafa
   </h1>

client/src/components/LandingPage/Team/index.js

@@ -0,0 +1,81 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+
+import fetchTeamMembersAction from '../../../actions/fetch_team_members';
+
+import TeamCard from './TeamCard';
+
+import {
+  TeamWrapper,
+  Header,
+  TeamCardsWrapper,
+  HeaderImage,
+  Heading,
+} from './StyledCompnents';
+
+import TeamHeaderImage from './team_header.png';
+
+class Team extends Component {
+  state = {
+    teamMembers: [],
+  };
+
+  static propTypes = {
+    fetchTeamMembers: PropTypes.func.isRequired,
+    teamId: PropTypes.string.isRequired,
+    teamMembers: PropTypes.arrayOf(
+      PropTypes.shape({
+        githubHandler: PropTypes.string,
+        email: PropTypes.string,
+        role: PropTypes.string,
+        profileImage: PropTypes.string,
+        team: PropTypes.string,
+        specialty: PropTypes.string,
+      }).isRequired
+    ).isRequired,
+  };
+
+  componentDidMount() {
+    const { fetchTeamMembers, teamId } = this.props;
+    fetchTeamMembers(teamId);
+  }
+
+  componentDidUpdate = prevProps => {
+    const { teamMembers } = this.props;
+    const { teamMembers: oldTeamMembers } = this.state;
+    if (prevProps.teamMembers !== oldTeamMembers) {
+      this.setState({ teamMembers });
+    }
+  };
+
+  render() {
+    const { teamMembers } = this.state;
+    return (
+      <TeamWrapper>
+        <Header>
+          <HeaderImage src={TeamHeaderImage} />
+          <Heading>Who We Are</Heading>
+        </Header>
+        <TeamCardsWrapper>
+          {teamMembers.map(member => (
+            <TeamCard
+              key={member.id}
+              name={member.name}
+              profileImage={member.profileImage}
+              specialty={member.specialty}
+            />
+          ))}
+        </TeamCardsWrapper>
+      </TeamWrapper>
+    );
+  }
+}
+
+const mapStateToProps = state => ({ teamMembers: state.teams.members });
+const mapDispatchToProps = { fetchTeamMembers: fetchTeamMembersAction };
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Team);

client/src/constants/actionTypes.js

@@ -0,0 +1 @@
+export const GET_TEAM_MEMBERS = 'GET_TEAM_MEMBERS';