DashboardProps (#25)

Administrative merge commit

src/components/Dashboard.js

@@ -19,9 +19,33 @@ const Contain = {
   backgroundColor: '#EEEEEE',
   fontFamily: "'Poppins', sans-serif",
 }
-//there will be a grid to organize the various class lists next to each other
-//there will be a grid for each contact to organize the data displayed within them?
-function Dashboard() {
+
+const ClassHeaderStyle = {
+  fontWeight: '600',
+  marginBottom: '30px',
+  fontSize: '22px'
+}
+
+let numStudents = 10;
+
+function roster() {
+  var students = [];
+  var i;
+  for (i = 0; i < numStudents; i++ ){
+    students[i]=({
+      name: 'joe b',
+      image: '',
+    });
+  }
+  const rost = {
+    courseName: 'comsci',
+    contactList:students,
+  }
+  return rost;
+}
+
+
+
   // student holds the current user info returned from the backend
   const [student, setStudent] = useState(null);
   // courseStudentMap holds the map of course -> student in that course
@@ -57,6 +81,11 @@ function Dashboard() {
     })
   },[]);
 
+
+//there will be a grid to organize the various class lists next to each other
+//there will be a grid for each contact to organize the data displayed within them?
+
+function Dashboard() {
   return(
     <div style={Contain}>
     <br></br>
@@ -72,8 +101,14 @@ function Dashboard() {
           direction="row"
           spacing={8}
         >
-          <DashboardList/>
-          <DashboardList/>
+          <Box>
+            <div style={ClassHeaderStyle}>{roster().courseName}</div>
+            <DashboardList classStudentList={roster().contactList}/>
+          </Box>
+          <Box>
+            <div style={ClassHeaderStyle}>{roster().courseName}</div>
+            <DashboardList classStudentList={roster().contactList}/>
+          </Box>
           <DashboardImage/>
         </Stack>
         <br></br>

src/components/DashboardCard.js

@@ -3,10 +3,7 @@ import ProfileIconImage from "./ProfileIconImage";
 import ArrowIcon from "./ArrowIcon";
 import Box from '@mui/material/Box';
 import styled from 'styled-components';
-const nameStyle = {
-  textAlign: 'middle',
-  color: 'black',
-}
+
 
 const CardStyle = styled(Box)({
   width:348,
@@ -17,13 +14,26 @@ const CardStyle = styled(Box)({
   borderRadius: '10px',
   backgroundColor: '#FFFFFF',
   boxShadow: '0px 0px 10px #00000040',
-  transitionDuration: '2s',
+  transitionDuration: '1s',
   '&:hover': {
-    boxShadow: '0px 0px 10px #00000066',
+    boxShadow: '0px 0psx 10px #00000080',
   }
 })
 
-function DashboardCard(){
+const nameStyle = {
+  textAlign: 'middle',
+  color: '#333333',
+}
+
+function handleProfileImage(image){
+  if (image === ''){
+    image = undefined;
+  }
+  return image;
+}
+
+function DashboardCard(props){
+  let image = handleProfileImage(props.image);
   return(
      <CardStyle>
       <Box
@@ -34,10 +44,10 @@ function DashboardCard(){
           columnSpacing={5}
           alignItems='center'>
           <Grid item xs={3}>
-            <ProfileIconImage/>
+            <ProfileIconImage image={image} />
           </Grid>
           <Grid item xs={6.5}>
-            <div style={nameStyle}>Joe Bruin</div>
+            <div style={nameStyle}>{props.name}</div>
           </Grid>
           <Grid item xs={2}>
             <ArrowIcon/>
@@ -48,4 +58,7 @@ function DashboardCard(){
   );
 }
 
+// DashboardCard.defaultProps = {
+//   image: ProfileIconImage,
+// }
 export default DashboardCard;

src/components/DashboardList.js

@@ -2,12 +2,8 @@ import DashboardCard from "./DashboardCard";
 import Grid from '@mui/material/Grid';
 import Box from '@mui/material/Box';
 import Link from '@mui/material/Link';
+import ProfileOtherBackground from "./ProfileOtherBackground";
 
- const ClassHeaderStyle = {
-   fontWeight: '600',
-   marginBottom: '30px',
-   fontSize: '22px'
- }
 
 /* THIS COMPONENT'S FUNCTION
 * This component will inherit the DashboardCard components and will display
@@ -21,43 +17,52 @@ import Link from '@mui/material/Link';
 * how to dynamically pull list of students and class 
 */
 
-function DashboardList(){
+
+function createList(contactArray){
+  //need to know people?
+   //array of contacts
+  var numStudents = contactArray.length;
+  var contactList = [];
+  var i;
+  for (i = 0; i < numStudents; i++ ){
+    contactList[i] = (
+    <Grid item>
+      <Link href="'/'" 
+        underline="none"
+        > 
+          <DashboardCard
+            name={contactArray[i].name}
+            image={contactArray[i].image}
+          />
+      </Link>
+  </Grid>
+  )
+  }
+  return contactList;
+}
+
+function DashboardList(props){
   //will replace this first div with a function to handle 
   //grabbing the header
+  var contactArray = props.classStudentList;
+  // var numStudents = contactArray.length;
+  // var contactList = [];
+  // var i;
+
   return(
     <div>
-      <div style={ClassHeaderStyle}>COM SCI 131</div>
       <Box sx={{ 
         width: 348,
-        height: 368,
+        height: 'auto',
         display: 'flex',
         }}> 
         <Grid container rowSpacing={3}>
-          <Grid item>
-            <Link href="'/'" 
-              underline="none"
-              > 
-              <DashboardCard/>
-            </Link>
-          </Grid>
-          <Grid item>
-            <Link href="/" 
-              underline="none"
-              > 
-              <DashboardCard/>
-            </Link>
-          </Grid>
-          <Grid item>
-            <Link href="/" 
-              underline="none"
-              > 
-              <DashboardCard/>
-            </Link>
-          </Grid>
+          {createList(contactArray)}
         </Grid>
       </Box>
     </div>
   );
 }
 
+
 export default DashboardList;

src/components/ProfileIconImage.js

@@ -1,9 +1,12 @@
 import profIcon from '../images/prof-icon.svg';
 
-function ProfileIconImage(){
+function ProfileIconImage(props){
   return(
-  <div><img src={profIcon} alt="Avatar Icon"/></div>
+    <div><img src={props.image} alt="Avatar Icon"/></div>
   );
-}
+};
 
+ProfileIconImage.defaultProps = {
+    image: profIcon,
+ }
 export default ProfileIconImage;