From ecb097f02ea51a06eb42c5e89a7d527d57e6b3dd Mon Sep 17 00:00:00 2001
From: Ramyalshurafa <ramyshurafa@hotmail.com>
Date: Mon, 31 Dec 2018 18:15:06 +0200
Subject: [PATCH] feat: create fech team members action and team reducer
 Relates #43

---
 client/src/actions/fetch_team_members.js      | 11 +++++
 .../src/components/LandingPage/Team/index.js  | 43 ++++++++++++++-----
 client/src/constants/actionTypes.js           |  1 +
 client/src/reducers/index.js                  |  2 +
 client/src/reducers/teams.js                  | 10 +++++
 5 files changed, 56 insertions(+), 11 deletions(-)
 create mode 100644 client/src/actions/fetch_team_members.js
 create mode 100644 client/src/reducers/teams.js

diff --git a/client/src/actions/fetch_team_members.js b/client/src/actions/fetch_team_members.js
new file mode 100644
index 0000000..3cab3c8
--- /dev/null
+++ b/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(`/teams/${teamId}/members`).then(({ data }) =>
+    dispatch({
+      type: GET_TEAM_MEMBERS,
+      data,
+    })
+  );
+};
diff --git a/client/src/components/LandingPage/Team/index.js b/client/src/components/LandingPage/Team/index.js
index 55e581f..d8f7cbe 100644
--- a/client/src/components/LandingPage/Team/index.js
+++ b/client/src/components/LandingPage/Team/index.js
@@ -1,7 +1,10 @@
-import React from 'react';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+
+import fetchTeamMembers from '../../../actions/fetch_team_members';
 
 import TeamCard from './TeamCard';
-import TeamHeaderImage from './team_header.png';
+
 import {
   TeamWrapper,
   Header,
@@ -10,12 +13,30 @@ import {
   Heading,
 } from './StyledCompnents';
 
-export default () => (
-  <TeamWrapper>
-    <Header>
-      <HeaderImage src={TeamHeaderImage} />
-      <Heading>Who We Are</Heading>
-    </Header>
-    <TeamCardsWrapper />
-  </TeamWrapper>
-);
+import TeamHeaderImage from './team_header.png';
+
+class Team extends Component {
+  componentDidMount() {
+    this.props.fetchTeamMembers(111);
+  }
+
+  render() {
+    return (
+      <TeamWrapper>
+        <Header>
+          <HeaderImage src={TeamHeaderImage} />
+          <Heading>Who We Are</Heading>
+        </Header>
+        <TeamCardsWrapper />
+      </TeamWrapper>
+    );
+  }
+}
+
+const mapStateToProps = state => ({ teamMembers: state.team.members });
+const mapDispatchToProps = { fetchTeamMembers };
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Team);
diff --git a/client/src/constants/actionTypes.js b/client/src/constants/actionTypes.js
index e69de29..d44eb94 100644
--- a/client/src/constants/actionTypes.js
+++ b/client/src/constants/actionTypes.js
@@ -0,0 +1 @@
+export const GET_TEAM_MEMBERS = 'GET_TEAM_MEMBERS';
diff --git a/client/src/reducers/index.js b/client/src/reducers/index.js
index a0c4417..5b29ce2 100644
--- a/client/src/reducers/index.js
+++ b/client/src/reducers/index.js
@@ -1,9 +1,11 @@
 import { combineReducers } from 'redux';
 
 import userReducer from './users';
+import teamReducer from './teams';
 
 const appReducer = combineReducers({
   users: userReducer,
+  team: teamReducer,
 });
 
 export default appReducer;
diff --git a/client/src/reducers/teams.js b/client/src/reducers/teams.js
new file mode 100644
index 0000000..3044edf
--- /dev/null
+++ b/client/src/reducers/teams.js
@@ -0,0 +1,10 @@
+import { GET_TEAM_MEMBERS } from '../constants/actionTypes';
+
+const initialState = {
+  members: [],
+};
+
+const teamsReducer = (state = initialState, action) => {
+  return state;
+};
+export default teamsReducer;