(Task #2): init components/teacherStudentComponent

wozzyio · May 19, 2020 · 0a306d4 · 0a306d4
1 parent db25fdd
commit 0a306d4
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 2 deletions.
diff --git a/components/nav.js b/components/nav.js
@@ -17,6 +17,7 @@ import {
   } from '@ant-design/icons';
 import stylesheet from 'antd/dist/antd.min.css';
 import AttendanceComponent from '../components/attendanceComponent';
+import TeacherStudentComponent from '../components/teacherStudentComponent';
 
 
 // const Nav = () => (
@@ -148,7 +149,11 @@ export default class Nav extends React.Component {
                     handleStudentAttendanceDateRange={this.props.handleStudentAttendanceDateRange}
                     attendanceComponent={this.props.attendanceComponent}
                    />
-        }    
+        } else if(this.props.studentsOptionClicked) {
+            return <TeacherStudentComponent
+                    teacherStudentComponent={this.props.teacherStudentComponent}
+                   />
+        }
     }
 
     render() {

diff --git a/components/teacherDashboard.js b/components/teacherDashboard.js
@@ -16,6 +16,7 @@ export class TeacherDashboard extends React.Component {
             currentUserClicked: this.props.currentUserDoc,
             studentClicked: false,
             attendanceOptionClicked: false,
+            studentsOptionClicked: false,
             attendanceComponent: {
                 clientSideValidationErrors:{
                     rangePickerAttendanceValidationError: null,
@@ -28,7 +29,10 @@ export class TeacherDashboard extends React.Component {
                 allStdentAttendanceTheSame: false,
                 studentAttendanceDateRangeString: null,
                 notAttendingSubmitButtonLoading: false,
-            }
+            },
+            teacherStudentComponent: {
+                currentUserDoc: this.props.currentUserDoc,
+            },
         }
         this.handleMenuClick = this.handleMenuClick.bind(this);
         this.studentAttendanceSubmitClicked = this.studentAttendanceSubmitClicked.bind(this);
@@ -236,6 +240,11 @@ export class TeacherDashboard extends React.Component {
             this.setState({
                 attendanceOptionClicked: true,
             });
+        } else if (parseInt(index) === -3) {
+            this.setState({
+                attendanceOptionClicked: false,
+                studentsOptionClicked: true,
+            });
         }
         else {
             let userClicked = this.state.currentUserDoc.teacherStudents[index];
@@ -266,6 +275,8 @@ export class TeacherDashboard extends React.Component {
                         studentClicked={this.state.studentClicked}
                         attendanceOptionClicked={this.state.attendanceOptionClicked}
                         attendanceComponent={this.state.attendanceComponent}
+                        studentsOptionClicked={this.state.studentsOptionClicked}
+                        teacherStudentComponent={this.state.teacherStudentComponent}
                         handleMenuClick={this.handleMenuClick}
                         studentAttendanceSubmitClicked={this.studentAttendanceSubmitClicked}
                         studentAttendanceSickClicked={this.studentAttendanceSickClicked}

diff --git a/components/teacherStudentComponent.js b/components/teacherStudentComponent.js
@@ -0,0 +1,80 @@
+import React from 'react';
+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 { FolderAddTwoTone } from '@ant-design/icons';
+const { Meta } = Card;
+const { Title, Paragraph, Text } = Typography;
+
+
+import { CalendarOutlined } from '@ant-design/icons';
+
+import stylesheet from 'antd/dist/antd.min.css';
+
+export default class TeacherStudentComponent extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+        }
+    }
+
+    componentDidMount() {
+        console.log("in teacherStudent component....");
+    }
+
+    titleComponent = () => {
+        return(
+            <Title level={2} style={{float: "left"}}>All Students</Title>
+        )
+    }
+
+    addStudentsButtonComponent = () => {
+        return(
+            <Button type="primary" icon={<FolderAddTwoTone />} size="default" style={{marginLeft: 40}}>
+                Add Students
+            </Button>
+        )
+    }
+
+    // TODO: move the list to it's own function, allow for editing students that already exists
+    render() {
+        return (
+            <React.Fragment>
+                <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
+                <Content
+                    className="site-layout-background"
+                    style={{
+                        padding: 24,
+                        margin: 0,
+                        minHeight: 280,
+                    }}
+                >
+                    {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>
+                </Content>
+            </React.Fragment>
+        );
+    }
+}