From abc16cf02527d081008d8ff130233652f9225c59 Mon Sep 17 00:00:00 2001
From: ayushbha <ayushbha@usc.edu>
Date: Tue, 12 May 2020 17:24:38 -0700
Subject: [PATCH] Modified ChooseProject

---
 src/components/Student/Module/ProjectModal.js | 117 +++++++++---------
 1 file changed, 58 insertions(+), 59 deletions(-)

diff --git a/src/components/Student/Module/ProjectModal.js b/src/components/Student/Module/ProjectModal.js
index 5c18d42..2de5699 100644
--- a/src/components/Student/Module/ProjectModal.js
+++ b/src/components/Student/Module/ProjectModal.js
@@ -13,20 +13,24 @@ import { chooseProjects } from '../../../redux/actions/studentData'
 import withApiCache, { CACHE_ACTIVITY } from '../../HOC/WithApiCache'
 
 const WacProject = withApiCache([CACHE_ACTIVITY])(
-	({ wac_data: [project], setListView, setSelectedProject }) => {
+	({ wac_data: [project], setSelectedProject,selectedProject }) => {
 		const { image, name, summary, time } = project ?? {}
-
+		//setting default project
+		if(project!=undefined){
+			if(selectedProject==null){
+				setSelectedProject(project)
+			}
+		}
 		return (
 			<ImgAndContent
-				imgWidthEms="7"
+				className="student-choose-projects"
+				imgWidthEms="6"
 				imgURL={image}
 				title={name}
-				description={summary}
 				time={time}
 				hover
 				shadow
 				onClick={() => {
-					setListView(false)
 					setSelectedProject(project)
 				}}
 			/>
@@ -41,9 +45,18 @@ const StyledTwoPanel = styled(TwoPanel)`
 const LeftPanel = styled.div`
 	margin: 0 auto;
 	padding: 1.5em 2.5em 2.5em;
-	background-color: ${props => props.theme.font};
+	background-color: ${props => props.theme.bgVariant};
 	color: ${props => props.theme.fontInvert};
-	height: 100%;
+	height: auto;
+	min-height:100%;
+	display: flex;
+	flex-direction: column;
+`
+const RightPanel = styled.div`
+	margin: 0 auto;
+	height:100%;
+	padding: 4em 4em 4em 4em;
+	background-color: white;
 	display: flex;
 	flex-direction: column;
 `
@@ -51,11 +64,9 @@ const LeftPanel = styled.div`
 const FullImg = styled.div`
 	width: 100%;
 	height: 100%;
-
-	background: transparent url(${props => props.img});
-	background-size: auto 100%;
+	background: transparent url(${props => props.img}) no-repeat;
+	background-size: 100%;
 	background-position: center;
-
 	@media screen and (orientation: portrait) and (max-width: ${sizes.thone}px) {
 		background-size: 100% auto;
 	}
@@ -64,45 +75,26 @@ const FullImg = styled.div`
 		background-size: 100% auto;
 	}
 `
-
-const Back = styled.p`
-	cursor: pointer;
-	display: inline-block;
-	transition: ease color 0.15s;
-
-	&:hover {
-		color: #86c5ff;
-	}
-`
-
-const SmallText = styled.div`
-	font-size: 80%;
-`
-
 const Nbsp = styled.p`
 	@media screen and (orientation: portrait) and (max-width: ${sizes.thone}px) {
 		display: none;
 	}
 `
-
 const FinalProject = ({
 	open,
 	closed,
 	moduleId,
 	projectIds,
 	chosenProjectIds,
-
 	onChooseProjects
 }) => {
 	const themeContext = useContext(ThemeContext)
 
-	const [listView, setListView] = useState(true)
 	const [selectedProject, setSelectedProject] = useState(null)
 
 	const isChosenAlready = chosenProjectIds?.find(
 		p => p.id === selectedProject?.id
 	)
-
 	const handleClickButton = () => {
 		if (!chosenProjectIds) return
 
@@ -123,60 +115,67 @@ const FinalProject = ({
 	/**
 	 * LIST VIEW
 	 */
-	const choose = (
-		<>
-			<Nbsp>&nbsp;</Nbsp>
-			<h2 style={{ marginBottom: 0 }}>Choose a Project</h2>
-			<p>
-				Choose a Project to practice your newfound knowledge in interactive,
-				challenging projects.
-			</p>
-		</>
-	)
 	const projects = (
-		<div style={{ padding: '1em', fontSize: '80%' }}>
+		<div style={{ fontSize: '65%' }}>
 			{projectIds?.map((project, index) => {
 				return (
 					<WacProject
 						key={`learn-project-${index}`}
 						id={project.id}
-						setListView={setListView}
 						setSelectedProject={setSelectedProject}
+						selectedProject={selectedProject}
 					/>
 				)
 			})}
 		</div>
 	)
-
+	const choose = (
+		<div>
+			<Nbsp>&nbsp;</Nbsp>
+			<h2 style={{ marginBottom: 0 }}>Choose a Project</h2>
+			<p>
+				Choose a Project to practice your newfound knowledge in interactive,
+				challenging projects.
+			</p>
+			{projects}
+		</div>
+	)
 	/**
 	 * DESCRIPTION VIEW
 	 */
 	const description = (
-		<>
-			<Back onClick={() => setListView(true)}>&#8249; Back</Back>
-			<h2 style={{ margin: 0 }}>{selectedProject?.name}</h2>
-			<p style={{ marginBottom: '1em' }}>{selectedProject?.description}</p>
-			<SmallText>difficulty</SmallText>
-			<DotRating rating={3} offColor={themeContext.accentVariant} />
+		// for author just add one more column next to select button
+		// selectedProject?.authors
+		<div>
+			<FullImg style={{height:"100%"}} img={selectedProject?.image}/>
+			<h2 style={{ margin: 0, paddingTop: "5%" }}>{selectedProject?.name}</h2>
+			<p style={{ marginBottom: '1em', fontSize:"70%",color:"black" }}>{selectedProject?.description}</p>
+			<div style={{display:'flex'}}>
+			<div style={{width:"50%"}}>
+			<div style={{marginBottom:"2%"}}>Difficulty</div>
+			<DotRating rating={3} offColor={themeContext.accentVariant} dotSize={'0.4em'} gap={"0.5em"} />
+			</div>
+			<div style={{width:"50%"}}>
 			{selectedProject?.time && (
-				<SmallText style={{ marginTop: '1em' }}>estimated time</SmallText>
+				<div>Estimated time</div>
 			)}
-			<span style={{ fontWeight: 'bold' }}>{selectedProject?.time}</span>
-			<div style={{ flexGrow: '1', display: 'flex', alignItems: 'flex-end' }}>
+			<span style={{ fontWeight: 'bold', fontSize:'90%' }}>{selectedProject?.time}</span>
+			</div>
+			</div>
+			<div style={{ flexGrow: '1', display: 'flex', alignItems: 'flex-end',marginTop:"7%" }}>
 				<Button invert fullWidth onClick={handleClickButton}>
-					{isChosenAlready ? 'Remove Project' : 'Choose Project'}
+					{isChosenAlready ? 'Remove Lab' : 'Select Lab'}
 				</Button>
 			</div>
-		</>
+		</div>
 	)
-	const fullPic = <FullImg img={selectedProject?.image} />
 
-	const leftPanel = <LeftPanel>{listView ? choose : description}</LeftPanel>
-	const rightPanel = listView ? projects : fullPic
+	const leftPanel = <LeftPanel>{choose}</LeftPanel>
+	const rightPanel = <RightPanel>{description}</RightPanel>
 
 	return (
 		<DynamicModal open={open} closed={closed} ratio={0.43}>
-			<StyledTwoPanel fullSizeAxis first={leftPanel} second={rightPanel} />
+			<StyledTwoPanel fullSizeAxis first={leftPanel} second={rightPanel} ratio={0.41}/>
 		</DynamicModal>
 	)
 }
@@ -186,4 +185,4 @@ const mapDispatchToProps = dispatch => ({
 		dispatch(chooseProjects(moduleId, project))
 })
 
-export default connect(null, mapDispatchToProps)(FinalProject)
+export default connect(null, mapDispatchToProps)(FinalProject)
\ No newline at end of file