New ui

src/components/Student/Module/Module.js

@@ -5,6 +5,10 @@ import ActivityModal from './ActivityModal'
 import ActivityList from './ActivityList'
 import ChooseProject from '../Dashboard/ChooseProject'
 
+import PageHeader from '../../shared/high/PageHeader'
+import {PartyIcon} from '../../../assets/icons/PageHeaderAssets'
+import {fetchModuleData, fetchModuleProgress} from '../../../services/ExploreService'
+
 import Hero from '../../shared/low/Hero'
 import GoBack from '../../shared/high/GoBack'
 import ProgressCircle from '../../shared/low/ProgressCircle'
@@ -147,8 +151,58 @@ const Module = ({ id, wac_data: [modu1e, moduleProgress] }) => {
 		return progress * 100
 	}
 
+	// MM May 11, 2020
+	const [moduleName, setModuleName] = React.useState(null);
+	const [moduleDescription, setModuleDescription] = React.useState(null);
+	const [numActivities, setNumActivities] = React.useState(null);
+	const [numCompletedActivities, setNumCompletedActivities] = React.useState(null);
+
+	React.useEffect(() => {
+		fetchModuleData(id)
+			.then(data => {
+				console.log(data)
+				const name = data.name;
+				const description = data.description;
+				const activities = data.activities
+				const number = activities.length.toString();
+				setModuleName(name);
+				setModuleDescription(description);
+				setNumActivities(number)
+			})
+			.catch(e => {
+				console.log(e);
+				setModuleName('Beginner Javascript');
+				setModuleDescription('Once relegated to the browser as one of the 3 core technologies of the web, JavaScript can now be found almost anywhere you find code.');
+				setNumActivities('5')
+			});
+
+		fetchModuleProgress(id)
+			.then(data => {
+			console.log(data)
+			const completedActivities = data.completedActivities;
+			const number = completedActivities.length.toString();
+			setNumCompletedActivities(number);
+		})
+			.catch(e => {
+				console.log(e)
+				setNumCompletedActivities('1');
+			})
+	},[])
+// MM May 11, 2020
 	return (
 		<>
+			<PageHeader pageView = 'Module'
+									titleText = {moduleName}
+									bodyText = {moduleDescription}
+									currSkill = {numCompletedActivities}
+									maxSkill = {numActivities}
+									trackName = {moduleName}
+									emoji = {<PartyIcon/>}
+									buttonTxt = 'Start'
+									lastCommitTime = "May 1st, 2020"
+									authors = {["Daniel Smith", "David Johnson", "Patricia Williams" , "Patrick Brown"]}
+			/>
+
 			<Background />
 			<StyledHero
 				above={modu1e && <GoBack hardcodedUrl={'/dashboard/'} />}
@@ -164,7 +218,7 @@ const Module = ({ id, wac_data: [modu1e, moduleProgress] }) => {
 								size={'4em'}
 								midValue={
 									calculateProgressPercent('inprogress') +
-										calculateProgressPercent('completed') || 0
+									calculateProgressPercent('completed') || 0
 								}
 								value={calculateProgressPercent('completed') || 0}
 							/>

src/components/shared/SideBar.js

@@ -0,0 +1,25 @@
+import React, { Component } from 'react'
+import styled from 'styled-components'
+
+const Container = styled.div`
+  padding: 2em;
+  padding-right: 0;
+  padding-left: 0;
+  width: 18em;
+  @media screen and (min-width: 0px) and (max-width: 500px) {
+    display: none;
+  }
+`;
+
+
+class SideBar extends Component {
+	render() {
+		return (
+			<Container>
+				{this.props.items.map((item, index) => <div key = {index}>{item}</div>)}
+			</Container>
+		)
+	}
+}
+
+export default SideBar

src/components/shared/high/PageHeader.js

@@ -39,11 +39,13 @@ import LightningBoltIcon from '../../../assets/icons/PageHeaderAssets'
 
 const PageHeaderContainer = styled.div`
   padding: 2em 2em 2em 2em;
-  width: 45em;
+  width: 50em;
   position: relative;
 
 	margin-top: 3%;
-	margin-left: 2%
+	margin-left: auto;
+	margin-bottom: 3%;
+	margin-right: auto;
 
 	border: solid rgba(255,232,112, 0.8);
   border-radius: 0.4em;

src/components/shared/low/User.js

@@ -0,0 +1,48 @@
+import React, {Component} from 'react'
+import styled from 'styled-components'
+
+const Container = styled.div`
+  padding: 1em;
+  width: 18em;
+  @media screen and (min-width: 0px) and (max-width: 500px) {
+    display: none;
+  }
+
+  border-radius:0.2em;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const Picture = styled.img`
+	height: 4em;
+	width: 4em;
+	margin-right: 2em;
+	border-radius: 50%;
+`
+
+const UserName = styled.h1`
+	padding-top: 0;
+	padding-bottom: 0;
+	margin-top: 0;
+	margin-bottom: 0;
+`
+
+class User extends Component {
+	render() {
+		return (
+			<Container>
+				<Picture src = {this.props.ImgLink}/>
+				<div>
+					<UserName>
+						{this.props.name}
+					</UserName>
+					{this.props.childComponent}
+				</div>
+			</Container>
+		)
+	}
+}
+
+export default User

src/services/ExploreService.js

@@ -1 +1,16 @@
 import { backend } from './AxiosInstances'
+/*
+GET request for getting module progress data
+ */
+export const fetchModuleProgress = moduleId => {
+	const endpoint = `modules/${moduleId}/progress`
+	return backend.get(endpoint);
+}
+
+/*
+GET request for getting module data
+ */
+export const fetchModuleData = moduleId => {
+	const endpoint = `modules/${moduleId}`
+	return backend.get(endpoint);
+}