connecting team page to the store

src/App.tsx

@@ -18,6 +18,7 @@ import styled from 'styled-components';
 import Landing from './containers/landing';
 import AdminDashboard from './containers/adminDashboard';
 import TreePage from './containers/treePage';
+import TeamPage from './containers/teamPage';
 import MyTrees from './containers/myTrees';
 import { Layout } from 'antd';
 import Home from './containers/home';
@@ -51,7 +52,7 @@ export enum Routes {
   HOME = '/home',
   SETTINGS = '/settings',
   // VOLUNTEER = '/volunteer',
-  // TEAM = '/team/:id',
+  TEAM = '/team/:id',
   TREE = '/tree/:id',
   MY_TREES = '/my-trees',
   // TEAM_LEADERBOARD = '/team-leaderboard',
@@ -97,9 +98,9 @@ const App: React.FC = () => {
                       <AuthRedirect from={Routes.HOME} />
                       <AuthRedirect from={Routes.SETTINGS} />
                       <AuthRedirect from={Routes.MY_TREES} />
+                      <AuthRedirect from={Routes.TEAM} />
                       {/*
                       <AuthRedirect from={Routes.VOLUNTEER} />
-                      <AuthRedirect from={Routes.TEAM} />
                       <AuthRedirect from={Routes.TEAM_LEADERBOARD} />
                       <AuthRedirect from={Routes.AVAILABLE_TEAMS} />
                       <AuthRedirect from={Routes.RESERVATIONS} />
@@ -137,6 +138,7 @@ const App: React.FC = () => {
                         component={Settings}
                       />
                       <Route path={Routes.MY_TREES} exact component={MyTrees} />
+                      <Route path={Routes.TEAM} exact component={TeamPage} />
                       {/*
                       <Route
                         path={Routes.VOLUNTEER}
@@ -184,6 +186,7 @@ const App: React.FC = () => {
                         component={Settings}
                       />
                       <Route path={Routes.MY_TREES} exact component={MyTrees} />
+                      <Route path={Routes.TEAM} exact component={TeamPage} />
                       {/*
                       <Route
                         path={Routes.VOLUNTEER}
@@ -200,7 +203,7 @@ const App: React.FC = () => {
                         exact
                         component={AvailableTeams}
                       />
-                      <Route path={Routes.TEAM} exact component={TeamPage} />
+
                       <Route
                         path={Routes.RESERVATIONS}
                         exact

src/api/test/protectedApiClient.test.ts

@@ -508,7 +508,7 @@ describe('Protected API Client Tests', () => {
         const response: TeamResponse[] = [
           {
             id: 1,
-            name: 'team 1',
+            teamName: 'team 1',
             bio: 'this is team 1',
             members: [
               {
@@ -532,7 +532,7 @@ describe('Protected API Client Tests', () => {
           },
           {
             id: 2,
-            name: 'team 2',
+            teamName: 'team 2',
             bio: 'this is team 2',
             members: [
               {
@@ -571,7 +571,7 @@ describe('Protected API Client Tests', () => {
       it('makes the right request', async () => {
         const response: TeamResponse = {
           id: 1,
-          name: 'team 1',
+          teamName: 'team 1',
           bio: 'this is team 1',
           members: [
             {

src/containers/availableTeams/ducks/selectors.ts

@@ -12,7 +12,7 @@ export const availableTeamsToTabItems = (
     return availableTeams.result.map((team) => {
       return {
         id: team.id,
-        name: team.name,
+        name: team.teamName,
         rightSide: '',
       };
     });

src/containers/teamPage/ducks/selectors.ts

@@ -2,7 +2,13 @@ import {
   AsyncRequest,
   asyncRequestIsComplete,
 } from '../../../utils/asyncRequest';
-import { TeamResponse, TeamProps, GoalProps, GoalResponseJSON } from './types';
+import {
+  TeamResponse,
+  TeamProps,
+  GoalProps,
+  GoalResponseJSON,
+  TeamRole,
+} from './types';
 
 export const teamResponseRequestToTeamProps = (
   team: AsyncRequest<TeamResponse, any>,
@@ -16,7 +22,7 @@ export const teamResponseRequestToTeamProps = (
 const teamResponseToTeamProps = (team: TeamResponse): TeamProps => {
   return {
     id: team.id,
-    name: team.name,
+    teamName: team.teamName,
     bio: team.bio,
     members: team.members,
     goals: mapGoalResponseJSONToGoalProps(team.goals),
@@ -41,8 +47,24 @@ const mapGoalResponseJSONToGoalProps = (
 // This is to prevent the TeamProps from being undefined
 const emptyTeam: () => TeamProps = () => ({
   id: 0,
-  name: '',
+  teamName: '',
   bio: '',
   members: [],
   goals: [],
 });
+
+export const getTeamRole = (
+  team: AsyncRequest<TeamResponse, any>,
+  userId: number,
+): TeamRole => {
+  if (asyncRequestIsComplete(team)) {
+    const member = team.result.members.find(
+      (potentialMember) => potentialMember.userId === userId,
+    );
+    if (member) {
+      return member.teamRole;
+    }
+    return TeamRole.NONE;
+  }
+  return TeamRole.NONE;
+};

src/containers/teamPage/ducks/thunks.ts

@@ -1,8 +1,9 @@
 import { TeamResponse, TeamThunkAction } from './types';
 import { teamResponse } from './actions';
+import protectedApiClient from '../../../api/protectedApiClient';
 
 export const getTeam = (teamId: number): TeamThunkAction<void> => {
-  return (dispatch, getState, { protectedApiClient }) => {
+  return (dispatch, getState) => {
     dispatch(teamResponse.loading());
     return protectedApiClient
       .getTeam(teamId)

src/containers/teamPage/ducks/types.ts

@@ -6,7 +6,7 @@ import { ProtectedApiExtraArgs } from '../../../api/protectedApiClient';
 
 export interface TeamProps {
   id: number;
-  name: string;
+  teamName: string;
   bio: string;
   members: MemberProps[];
   goals: GoalProps[];
@@ -28,10 +28,10 @@ export interface GoalProps {
 }
 
 export enum TeamRole {
-  NONE = 'none',
-  MEMBER = 'member',
-  LEADER = 'leader',
-  PENDING = 'pending',
+  NONE = 'NONE',
+  MEMBER = 'MEMBER',
+  LEADER = 'LEADER',
+  PENDING = 'PENDING',
 }
 
 export interface UserInvite {
@@ -69,7 +69,7 @@ export interface TransferOwnershipRequest {
 
 export interface TeamResponse {
   id: number;
-  name: string;
+  teamName: string;
   bio: string;
   members: MemberProps[];
   goals: GoalResponseJSON[];