From 4c9a9455b2edd1c0caeb081088e0506cb8df4b2a Mon Sep 17 00:00:00 2001
From: Mir Ali Talpur <hskalee123@gmail.com>
Date: Wed, 15 Jul 2020 11:09:33 -0700
Subject: [PATCH] #2 add inidividualStudentTeacherEdit component

---
 components/individualStudentTeacherEdit.js | 169 ++++++++++++++++++++
 components/nav.js                          |   6 +
 components/teacherDashboard.js             | 171 ++++++++++++++++++++-
 components/teacherStudentComponent.js      |  56 +++++--
 4 files changed, 389 insertions(+), 13 deletions(-)
 create mode 100644 components/individualStudentTeacherEdit.js

diff --git a/components/individualStudentTeacherEdit.js b/components/individualStudentTeacherEdit.js
new file mode 100644
index 0000000..4f87796
--- /dev/null
+++ b/components/individualStudentTeacherEdit.js
@@ -0,0 +1,169 @@
+import React from 'react';
+import { Form, Input, Card, Button, Avatar, Space } from 'antd';
+
+import stylesheet from 'antd/dist/antd.min.css';
+const { Meta } = Card;
+
+
+export default class TeacherEditStudentComponent extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    componentDidMount() {
+        console.log("in TeacherEditStudentComponent class....");
+        console.log(this.props.individualEditStudentInformation);
+        console.log(this.props.individualEditStudentInformation.data.data.displayName);
+
+    }
+
+    backButtonComponent = () => {
+        return(
+            <Button style={{ float: 'left' }}>
+                Back
+            </Button>
+        )
+    }
+
+    updateButtonComponent = () => {
+        return(
+            <Button type="primary" size="large"
+            style={{ float: 'right' }}
+            >
+                Update
+            </Button>
+        )
+    }
+
+    nameFormItemComponent = () => {
+        if(this.props.teacherStudentComponent.individualStudentTeacherEditNameError) {
+            return(
+                <div>
+                    Name
+                    <Form.Item
+                    validateStatus="error"
+                    help="Student Name can't be empty">
+                        <Input size="medium"
+                         defaultValue={this.props.individualEditStudentInformation.data.data.displayName}
+                         onChange={(event)=>this.props.handleIndividualStudentTeacherEditNameChange(event)}
+                         onBlur={(event) => this.props.onBlurhandleIndividualStudentTeacherEditNameChange(event)}
+                        />
+                    </Form.Item>
+                </div>
+            )
+        } else {
+            return(
+                <div>
+                    Name
+                    <Form.Item>
+                        <Input size="medium"
+                        defaultValue={this.props.individualEditStudentInformation.data.data.displayName}
+                        onChange={(event)=>this.props.handleIndividualStudentTeacherEditNameChange(event)}
+                        onBlur={(event)=> this.props.onBlurhandleIndividualStudentTeacherEditNameChange(event)}
+                        />
+                    </Form.Item>
+                </div>
+            )
+        }
+    }
+
+    emailFormItemComponent = () => {
+        if(this.props.teacherStudentComponent.individualStudentTeacherEditEmailError) {
+            return(
+                <div>
+                    Email
+                    <Form.Item
+                    validateStatus="error"
+                    help="Please insert a valid insert">
+                        <Input size="medium"
+                        defaultValue={this.props.individualEditStudentInformation.data.data.email}
+                        onChange={(event)=>this.props.handleIndividualStudentTeacherEditEmailChange(event)}
+                        onBlur={(event)=>this.props.onBlurhandleIndividualStudentTeacherEditEmailChange(event)}
+                        />
+                    </Form.Item>
+                </div>
+            )
+        } else {
+            return(
+                <div>
+                    Email
+                    <Form.Item>
+                        <Input size="medium"
+                        defaultValue={this.props.individualEditStudentInformation.data.data.email}
+                        onChange={(event)=>this.props.handleIndividualStudentTeacherEditNameChange(event)}
+                        onBlur={(event)=>this.props.onBlurhandleIndividualStudentTeacherEditEmailChange(event)}
+                        />
+                    </Form.Item>
+                </div>
+            )
+        }
+    }
+
+    gradeFormItemComponent = () => {
+        if(this.props.teacherStudentComponent.individualStudentTeacherEditGradeError) {
+            return(
+                <div>
+                    Current Grade
+                    <Form.Item
+                    validateStatus="error"
+                    help="Current grade can't be empty">
+                        <Input size="medium"
+                         defaultValue={this.props.individualEditStudentInformation.data.data.currentGradeLevel}
+                         onChange={(event)=>this.props.handleIndividualStudentTeacherEditNameChange(event)}
+                         onBlur={(event)=>this.props.onBlurhandleIndividualStudentTeacherEditGradeChange(event)}
+                        />
+                    </Form.Item>
+                </div>
+            )
+        } else {
+            return(
+                <div>
+                    Current Grade
+                    <Form.Item>
+                        <Input size="medium"
+                         defaultValue={this.props.individualEditStudentInformation.data.data.currentGradeLevel}
+                         onChange={(event)=>this.props.handleIndividualStudentTeacherEditNameChange(event)}
+                         onBlur={(event)=>this.props.onBlurhandleIndividualStudentTeacherEditGradeChange(event)}
+                        />
+                    </Form.Item>
+                </div>
+            )
+        }
+    }
+
+    passwordFormItemComponent = () => {
+        return(
+            <div>
+                New Password
+                <Form.Item>
+                    <Input size="medium" type="password"
+                     onChange={(event)=>this.props.handleIndividualStudentTeacherEditNameChange(event)}
+                    />
+                </Form.Item>
+            </div>
+        )
+    }
+
+    render() {
+        return (
+            <React.Fragment>
+                <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
+                <Card style={{ width: "auto", display: "block" }}>
+                <Meta title="Card title" avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}/>
+                    <Space/>
+                    <Space/>
+                    <br/>
+                    <Form name="student_information">
+                        {this.nameFormItemComponent()}
+                        {this.emailFormItemComponent()}
+                        {this.gradeFormItemComponent()}
+                        {this.passwordFormItemComponent()}
+
+                        {this.updateButtonComponent()}
+                        {this.backButtonComponent()}
+                    </Form>  
+                </Card>
+            </React.Fragment>
+        );
+    }
+}
diff --git a/components/nav.js b/components/nav.js
index 330e6ff..a9ff673 100644
--- a/components/nav.js
+++ b/components/nav.js
@@ -156,6 +156,12 @@ export default class Nav extends React.Component {
             return <TeacherStudentComponent
                     teacherStudentComponent={this.props.teacherStudentComponent}
                     teacherStudentComponentHandleTeacherStudentClick={this.props.teacherStudentComponentHandleTeacherStudentClick}
+                    handleIndividualStudentTeacherEditNameChange={this.props.handleIndividualStudentTeacherEditNameChange}
+                    onBlurhandleIndividualStudentTeacherEditNameChange={this.props.onBlurhandleIndividualStudentTeacherEditNameChange}
+                    handleIndividualStudentTeacherEditEmailChange={this.props.handleIndividualStudentTeacherEditEmailChange}
+                    onBlurhandleIndividualStudentTeacherEditEmailChange={this.props.onBlurhandleIndividualStudentTeacherEditEmailChange}
+                    handleIndividualStudentTeacherEditGradeChange={this.props.handleIndividualStudentTeacherEditGradeChange}
+                    onBlurhandleIndividualStudentTeacherEditGradeChange={this.props.onBlurhandleIndividualStudentTeacherEditGradeChange}
                    />
         }
     }
diff --git a/components/teacherDashboard.js b/components/teacherDashboard.js
index 75a7f07..02c0552 100644
--- a/components/teacherDashboard.js
+++ b/components/teacherDashboard.js
@@ -32,8 +32,19 @@ export class TeacherDashboard extends React.Component {
             },
             teacherStudentComponent: {
                 currentUserDoc: this.props.currentUserDoc,
+                // TODO: change this back to false testing really fast
+                // thnk about changing the email and password if they don't match
+                // the currently using one when editing student profiles
                 individualStudentEditClicked: false,
                 individualEditStudentInformation: null,
+                individualStudentEditLoading: false,
+                individualStudentTeacherEditName: null,
+                individualStudentTeacherEditNameError: null,
+                individualStudentTeacherEditEmail: null,
+                individualStudentTeacherEditEmailError: null,
+                individualStudentTeacherEditEmailPristine: true,
+                individualStudentTeacherEditGrade: null,
+                individualStudentTeacherEditGradeError: null,
             },
         }
         this.handleMenuClick = this.handleMenuClick.bind(this);
@@ -44,6 +55,12 @@ export class TeacherDashboard extends React.Component {
         this.markAllStudentAtendanceTheSame = this.markAllStudentAtendanceTheSame.bind(this);
         this.handleStudentAttendanceDateRange = this.handleStudentAttendanceDateRange.bind(this);
         this.teacherStudentComponentHandleTeacherStudentClick = this.teacherStudentComponentHandleTeacherStudentClick.bind(this);
+        this.handleIndividualStudentTeacherEditNameChange = this.handleIndividualStudentTeacherEditNameChange.bind(this);
+        this.onBlurhandleIndividualStudentTeacherEditNameChange = this.onBlurhandleIndividualStudentTeacherEditNameChange.bind(this);
+        this.handleIndividualStudentTeacherEditEmailChange = this.handleIndividualStudentTeacherEditEmailChange.bind(this);
+        this.onBlurhandleIndividualStudentTeacherEditEmailChange = this.onBlurhandleIndividualStudentTeacherEditEmailChange.bind(this);
+        this.handleIndividualStudentTeacherEditGradeChange = this.handleIndividualStudentTeacherEditGradeChange.bind(this);
+        this.onBlurhandleIndividualStudentTeacherEditGradeChange = this.onBlurhandleIndividualStudentTeacherEditGradeChange.bind(this);
     }
 
     componentDidMount() {
@@ -52,22 +69,166 @@ export class TeacherDashboard extends React.Component {
         console.log(this.state.teacherStudentComponent.currentUserDoc);
     }
 
+    /* individualStudentTeacherEdit component functions */
+    /* Email */
+    validateEmail = (email) => {
+        const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+        return re.test(String(email).toLowerCase());
+    }
+    
+    handleIndividualStudentTeacherEditEmailChange = (e) => {
+        console.log("in handleIndividualStudentTeacherEditEmailChange");
+        const target = e.target;
+        const value = target.value;
+        console.log("value being set for handleIndividualStudentTeacherEditEmailChange" + value);
+        
+        if(this.state.individualStudentTeacherEditEmailPristine) {
+            this.setState(prevState => ({
+                teacherStudentComponent: {
+                    ...prevState.teacherStudentComponent,
+                    individualStudentTeacherEditEmail: value,
+                }
+            }));
+        } else {
+            if(this.validateEmail(value)) {
+                this.setState(prevState => ({
+                    teacherStudentComponent: {
+                        ...prevState.teacherStudentComponent,
+                        individualStudentTeacherEditEmail: value,
+                        individualStudentTeacherEditEmailError: null,
+                    }
+                }));
+            } else {
+                this.setState(prevState => ({
+                    teacherStudentComponent: {
+                        ...prevState.teacherStudentComponent,
+                        individualStudentTeacherEditEmail: value,
+                        individualStudentTeacherEditEmailError: true,
+                    }
+                }));
+            }
+        }
+    }
+
+    onBlurhandleIndividualStudentTeacherEditEmailChange = (e) => {
+        if(!this.validateEmail(this.state.teacherStudentComponent.individualStudentTeacherEditEmail)) {
+            this.setState(prevState => ({
+                teacherStudentComponent: {
+                    ...prevState.teacherStudentComponent,
+                    individualStudentTeacherEditEmailError: true,
+                    individualStudentTeacherEditEmailPristine: false,
+                }
+            }));
+        }
+    }
+    /* End Email */
+
+    /* Grade Level */
+    handleIndividualStudentTeacherEditGradeChange = (e) => {
+        console.log("in handleIndividualStudentTeacherEditGradeChange");
+        const target = e.target;
+        const value = target.value;
+        console.log("value being set for handleIndividualStudentTeacherEditGradeChange" + value);
+        if(value) {
+            this.setState(prevState => ({
+                teacherStudentComponent: {
+                    ...prevState.teacherStudentComponent,
+                    individualStudentTeacherEditGrade: value,
+                    individualStudentTeacherEditGradeError: null,
+                }
+            }));
+        } else {
+            this.setState(prevState => ({
+                teacherStudentComponent: {
+                    ...prevState.teacherStudentComponent,
+                    individualStudentTeacherEditGrade: value,
+                    individualStudentTeacherEditGradeError: true,
+                }
+            }));
+        }
+    }
+
+    onBlurhandleIndividualStudentTeacherEditGradeChange = (e) => {
+        e.preventDefault();
+        const target = e.target;
+        const value = target.value;
+        if(value === "") {
+            this.setState(prevState => ({
+                teacherStudentComponent: {
+                    ...prevState.teacherStudentComponent,
+                    individualStudentTeacherEditGrade: value,
+                    individualStudentTeacherEditGradeError: true,
+                }
+            }));
+        }
+    }
+    /* End Grade Level */
+    
+    /* Name */
+    handleIndividualStudentTeacherEditNameChange = (e) => {
+        console.log("in handleIndividualStudentTeacherEditNameChange");
+        const target = e.target;
+        const value = target.value;
+        console.log("value being set for handleIndividualStudentTeacherEditNameChange" + value);
+        if(value) {
+            this.setState(prevState => ({
+                teacherStudentComponent: {
+                    ...prevState.teacherStudentComponent,
+                    individualStudentTeacherEditName: value,
+                    individualStudentTeacherEditNameError: null,
+                }
+            }));
+        } else {
+            this.setState(prevState => ({
+                teacherStudentComponent: {
+                    ...prevState.teacherStudentComponent,
+                    individualStudentTeacherEditName: value,
+                    individualStudentTeacherEditNameError: "Name can't be blank",
+                }
+            }));
+        }
+    }
+
+    onBlurhandleIndividualStudentTeacherEditNameChange = (e) => {
+        e.preventDefault();
+        const target = e.target;
+        const value = target.value;
+        if(value === "") {
+            this.setState(prevState => ({
+                teacherStudentComponent: {
+                    ...prevState.teacherStudentComponent,
+                    individualStudentTeacherEditName: value,
+                    individualStudentTeacherEditNameError: "Name can't be blank",
+                }
+            }));
+        }
+    }
+    /* End Name */
+
+    /* individualStudentTeacherEdit component functions  end */
+
     /* teacherStudentComponent functions */
     teacherStudentComponentHandleTeacherStudentClick = (e) => {
         console.log("im in teacherStudentComponentHandleTeacherStudentClick..")
         console.log("studentUid: " + e.uid);
         console.log("uid: " + this.state.currentUserDoc.uid);
+        this.setState(prevState => ({
+            teacherStudentComponent: {
+                ...prevState.teacherStudentComponent,
+                individualStudentEditLoading: true
+            }
+        }));
         const getStudentDocumentAsTeacher = functions.httpsCallable('getStudentDocumentAsTeacher');
         getStudentDocumentAsTeacher({
             uid: this.state.currentUserDoc.uid,
             studentUid: e.uid,
         }).then(result => {
-            console.log(result);
             this.setState(prevState => ({
                 teacherStudentComponent: {
                     ...prevState.teacherStudentComponent,
                     individualStudentEditClicked: true,
-                    individualEditStudentInformation: result
+                    individualEditStudentInformation: result,
+                    individualStudentEditLoading: false,
                 }
             }));
         }).catch(err => {
@@ -314,6 +475,12 @@ export class TeacherDashboard extends React.Component {
                         handleStudentAttendanceOtherReasonInput={this.handleStudentAttendanceOtherReasonInput}
                         markAllStudentAtendanceTheSame={this.markAllStudentAtendanceTheSame}
                         handleStudentAttendanceDateRange={this.handleStudentAttendanceDateRange}
+                        handleIndividualStudentTeacherEditNameChange={this.handleIndividualStudentTeacherEditNameChange}
+                        onBlurhandleIndividualStudentTeacherEditNameChange={this.onBlurhandleIndividualStudentTeacherEditNameChange}
+                        handleIndividualStudentTeacherEditEmailChange={this.handleIndividualStudentTeacherEditEmailChange}
+                        onBlurhandleIndividualStudentTeacherEditEmailChange={this.handleIndividualStudentTeacherEditEmailChange}
+                        handleIndividualStudentTeacherEditGradeChange={this.handleIndividualStudentTeacherEditGradeChange}
+                        onBlurhandleIndividualStudentTeacherEditGradeChange={this.onBlurhandleIndividualStudentTeacherEditGradeChange}
                     />
                 </div>
             </React.Fragment>
diff --git a/components/teacherStudentComponent.js b/components/teacherStudentComponent.js
index 8e230d5..a50cd6f 100644
--- a/components/teacherStudentComponent.js
+++ b/components/teacherStudentComponent.js
@@ -8,11 +8,14 @@ import { FolderAddTwoTone } from '@ant-design/icons';
 const { Meta } = Card;
 const { Title, Paragraph, Text } = Typography;
 
+import { LoadingOutlined } from '@ant-design/icons';
 
-import { CalendarOutlined } from '@ant-design/icons';
 
 import stylesheet from 'antd/dist/antd.min.css';
 
+import TeacherEditStudentComponent from '../components/individualStudentTeacherEdit';
+
+
 export default class TeacherStudentComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -25,24 +28,29 @@ export default class TeacherStudentComponent extends React.Component {
     }
 
     titleComponent = () => {
-        return(
-            <Title level={2} style={{float: "left"}}>All Students</Title>
-        )
+        if(this.props.teacherStudentComponent.currentUserDoc && this.props.teacherStudentComponent.currentUserDoc.teacherStudents && !this.props.teacherStudentComponent.individualStudentEditClicked){
+            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>
-        )
+        if(this.props.teacherStudentComponent.currentUserDoc && this.props.teacherStudentComponent.currentUserDoc.teacherStudents && !this.props.teacherStudentComponent.individualStudentEditClicked){
+            return(
+                <Button type="primary" icon={<FolderAddTwoTone />} size="default" style={{marginLeft: 40}}>
+                    Add Students
+                </Button>
+            )
+        }
     }
 
     showStudentsComponent = (context) => {
         console.log("in teacherStudentComponent");
         console.log(this.props.teacherStudentComponent.currentUserDoc);
         // check if the individualStudentEditClicked is clicked 
-        if(this.props.teacherStudentComponent.currentUserDoc && this.props.teacherStudentComponent.currentUserDoc.teacherStudents){
+        if(this.props.teacherStudentComponent.currentUserDoc && this.props.teacherStudentComponent.currentUserDoc.teacherStudents && !this.props.teacherStudentComponent.individualStudentEditClicked){
+            const antIcon = <LoadingOutlined style={{ fontSize: 20 }} spin />;
             return(
                 <List style={{position: "absolute"}}>
                 {
@@ -50,7 +58,13 @@ export default class TeacherStudentComponent extends React.Component {
                         return(
                             <List.Item key={d.uid} style={{float: "left", position: "absolute"}}
                             actions={[
-                                <a key="list-loadmore-more" onClick={() => context.props.teacherStudentComponentHandleTeacherStudentClick(d)}>Edit</a>
+                                <a key="list-loadmore-more" onClick={() => context.props.teacherStudentComponentHandleTeacherStudentClick(d)}>
+                                    {context.props.teacherStudentComponent.individualStudentEditLoading ?
+                                        <Spin indicator={antIcon} style={{ float: 'right' }} />
+                                    :
+                                        <div>Edit</div>
+                                    }
+                                </a>
                             ]}
                             >
                                 <List.Item.Meta
@@ -64,6 +78,26 @@ export default class TeacherStudentComponent extends React.Component {
                 }
                 </List>
             )
+        } else if (this.props.teacherStudentComponent.individualStudentEditClicked == true) {
+            return <TeacherEditStudentComponent
+                    individualEditStudentInformation={this.props.teacherStudentComponent.individualEditStudentInformation}
+                    teacherStudentComponent={this.props.teacherStudentComponent}
+                    handleIndividualStudentTeacherEditNameChange={this.props.handleIndividualStudentTeacherEditNameChange}
+                    onBlurhandleIndividualStudentTeacherEditNameChange={this.props.onBlurhandleIndividualStudentTeacherEditNameChange}
+                    handleIndividualStudentTeacherEditEmailChange={this.props.handleIndividualStudentTeacherEditEmailChange}
+                    onBlurhandleIndividualStudentTeacherEditEmailChange={this.props.onBlurhandleIndividualStudentTeacherEditEmailChange}
+                    handleIndividualStudentTeacherEditGradeChange={this.props.handleIndividualStudentTeacherEditGradeChange}
+                    onBlurhandleIndividualStudentTeacherEditGradeChange={this.props.onBlurhandleIndividualStudentTeacherEditGradeChange}
+                   />
+            // displayName: "asdlkfj 89234"
+            // email: "alskdjf@gmail.com"
+            // emailVerified: false
+            // isNewUser: true
+            // photoURL: null
+            // teacherUid: "19IhT36iYrc8ttuKtLXgyx4yNGE2"
+            // uid: "CaAUbJk1CVeimMJRPJyJbmTHhmP2"
+            // userType: "student"
+            // TODO: add edit information with the stuff above add a save button and also a back button
         } else {
             return(
                 null