(Task #2): Add list of students with edit link

wozzyio · May 20, 2020 · 0ea9d27 · 0ea9d27
1 parent 0a306d4
commit 0ea9d27
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 22 deletions.
diff --git a/components/nav.js b/components/nav.js
@@ -150,8 +150,12 @@ export default class Nav extends React.Component {
                     attendanceComponent={this.props.attendanceComponent}
                    />
         } else if(this.props.studentsOptionClicked) {
+            console.log("In nav.js studentsOptionClicked");
+            console.log(this.props.teacherStudentComponent);
+            console.log(this.props.teacherStudentComponent.currentUserDoc);
             return <TeacherStudentComponent
                     teacherStudentComponent={this.props.teacherStudentComponent}
+                    teacherStudentComponentHandleTeacherStudentClick={this.props.teacherStudentComponentHandleTeacherStudentClick}
                    />
         }
     }

diff --git a/components/teacherDashboard.js b/components/teacherDashboard.js
@@ -41,11 +41,18 @@ export class TeacherDashboard extends React.Component {
         this.handleStudentAttendanceOtherReasonInput = this.handleStudentAttendanceOtherReasonInput.bind(this);
         this.markAllStudentAtendanceTheSame = this.markAllStudentAtendanceTheSame.bind(this);
         this.handleStudentAttendanceDateRange = this.handleStudentAttendanceDateRange.bind(this);
+        this.teacherStudentComponentHandleTeacherStudentClick = this.teacherStudentComponentHandleTeacherStudentClick.bind(this);
     }
 
     componentDidMount() {
         console.log("in teacher dashboard class....");
         console.log(this.state.currentUserDoc);
+        console.log(this.state.teacherStudentComponent.currentUserDoc);
+    }
+
+    teacherStudentComponentHandleTeacherStudentClick = (e) => {
+        console.log("im in teacherStudentComponentHandleTeacherStudentClick..")
+        console.log(e);
     }
 
     /* Student attendance functions */
@@ -277,6 +284,7 @@ export class TeacherDashboard extends React.Component {
                         attendanceComponent={this.state.attendanceComponent}
                         studentsOptionClicked={this.state.studentsOptionClicked}
                         teacherStudentComponent={this.state.teacherStudentComponent}
+                        teacherStudentComponentHandleTeacherStudentClick={this.teacherStudentComponentHandleTeacherStudentClick}
                         handleMenuClick={this.handleMenuClick}
                         studentAttendanceSubmitClicked={this.studentAttendanceSubmitClicked}
                         studentAttendanceSickClicked={this.studentAttendanceSickClicked}

diff --git a/components/teacherStudentComponent.js b/components/teacherStudentComponent.js
@@ -3,7 +3,7 @@ import { Layout, Menu, Breadcrumb } from 'antd';
 import { DatePicker } from 'antd';
 const { RangePicker } = DatePicker;
 const { Content } = Layout;
-import { Form, List, Button, Tooltip, Input, Row, Col, Card, Avatar, Space, Switch, Alert, Spin, Typography } from 'antd';
+import { Form, List, Button, Tooltip, Input, Row, Col, Card, Avatar, Space, Switch, Alert, Spin, Typography, Icon } from 'antd';
 import { FolderAddTwoTone } from '@ant-design/icons';
 const { Meta } = Card;
 const { Title, Paragraph, Text } = Typography;
@@ -16,12 +16,12 @@ import stylesheet from 'antd/dist/antd.min.css';
 export default class TeacherStudentComponent extends React.Component {
     constructor(props) {
         super(props);
-        this.state = {
-        }
+        this.teacherStudentComponentHandleTeacherStudentClick = this.props.teacherStudentComponentHandleTeacherStudentClick.bind(this);
     }
 
     componentDidMount() {
         console.log("in teacherStudent component....");
+        console.log(this.props.teacherStudentComponent.currentUserDoc);
     }
 
     titleComponent = () => {
@@ -38,6 +38,38 @@ export default class TeacherStudentComponent extends React.Component {
         )
     }
 
+    showStudentsComponent = (context) => {
+        console.log("in teacherStudentComponent");
+        console.log(this.props.teacherStudentComponent.currentUserDoc);
+        if(this.props.teacherStudentComponent.currentUserDoc && this.props.teacherStudentComponent.currentUserDoc.teacherStudents){
+            return(
+                <List style={{position: "absolute"}}>
+                {
+                    this.props.teacherStudentComponent.currentUserDoc.teacherStudents.map(function(d, idx){
+                        return(
+                            <List.Item key={d.uid} style={{float: "left", position: "absolute"}}
+                            actions={[
+                                <a key="list-loadmore-more" onClick={() => context.props.teacherStudentComponentHandleTeacherStudentClick(d)}>Edit</a>
+                            ]}
+                            >
+                                <List.Item.Meta
+                                    avatar={d.photoUrl ? <Avatar src={d.photoUrl} /> : <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
+                                    title={d.displayName ? d.displayName : "No name for student"}
+                                    description={d.email ? d.email : "No email set for student"}
+                                />
+                            </List.Item>
+                        )
+                    })
+                }
+                </List>
+            )
+        } else {
+            return(
+                null
+            )
+        }
+    }    
+
     // TODO: move the list to it's own function, allow for editing students that already exists
     render() {
         return (
@@ -54,25 +86,8 @@ export default class TeacherStudentComponent extends React.Component {
                     {this.titleComponent()}
                     {this.addStudentsButtonComponent()}
                     <br/>
-                    <List>
-                    {
-                        this.props.teacherStudentComponent.currentUserDoc ?
-                        this.props.teacherStudentComponent.currentUserDoc.teacherStudents.map(function(d, idx){
-                            return (
-                                <List.Item key={idx}>
-                                    <List.Item.Meta
-                                    avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
-                                    title={<a href="https://ant.design">Yup</a>}
-                                    description="Ant Design, a design language for background applications, is refined by Ant UED Team"
-                                    />
-                                    {d.email}
-                                </List.Item>
-                            )
-                        })
-                        :
-                        null
-                    }
-                    </List>
+                    <br/>
+                    {this.showStudentsComponent(this)}
                 </Content>
             </React.Fragment>
         );