#2 add support for creating user without a login being required

wozzyio · Aug 29, 2020 · 59f89b0 · 59f89b0
1 parent d2baeb2
commit 59f89b0
Show file tree

Hide file tree

Showing 5 changed files with 175 additions and 5 deletions.
diff --git a/components/nav.js b/components/nav.js
@@ -180,6 +180,7 @@ export default class Nav extends React.Component {
                     requireLoginPortalForStudent={this.props.requireLoginPortalForStudent}
                     handleTeacherStudentAddEmail={this.props.handleTeacherStudentAddEmail}
                     onBlurhandleTeacherStudentAddEmail={this.props.onBlurhandleTeacherStudentAddEmail}
+                    handleStudentAddProfilePic={this.props.handleStudentAddProfilePic}
                    />
         }
     }

diff --git a/components/teacherDashboard.js b/components/teacherDashboard.js
@@ -62,6 +62,8 @@ export class TeacherDashboard extends React.Component {
                 teacherStudentAddCurrentGrade: "",
                 teacherStudentAddCurrentGradeError: false,
                 teacherStudentAddStudentLoginRequired: false,
+                teacherStudentAddSubmitLoading: false,
+                teacherStudentAddSubmitBackendError: false,
             },
         }
         this.handleMenuClick = this.handleMenuClick.bind(this);
@@ -93,6 +95,7 @@ export class TeacherDashboard extends React.Component {
         this.requireLoginPortalForStudent = this.requireLoginPortalForStudent.bind(this);
         this.handleTeacherStudentAddEmail = this.handleTeacherStudentAddEmail.bind(this);
         this.onBlurhandleTeacherStudentAddEmail = this.onBlurhandleTeacherStudentAddEmail.bind(this);
+        this.handleStudentAddProfilePic = this.handleStudentAddProfilePic.bind(this);
     }
 
     componentDidMount() {
@@ -620,14 +623,97 @@ export class TeacherDashboard extends React.Component {
         if(!this.handleSubmitTeacherStudentAddClientSideSubmitErrorsExist()){
             // no errors on the submit of teacher adding new student
             // check if student portal is required for this student
+            this.setState(prevState => ({
+                teacherStudentComponent: {
+                    ...prevState.teacherStudentComponent,
+                    teacherStudentAddSubmitLoading: true,
+                }
+            }));
             if(this.state.teacherStudentComponent.teacherStudentAddStudentLoginRequired) {
                 console.log("Call backend API with requiring login portal for student");
             } else {
                 console.log("Call backend API not requiring login portal for student");
+                const addStudentAsTeacherWithoutLoginPortal = functions.httpsCallable('addStudentAsTeacherWithoutLoginPortal');
+                addStudentAsTeacherWithoutLoginPortal({
+                    uid: this.state.currentUserDoc.uid,
+                    photoURL: this.state.teacherStudentComponent.teacherStudentAddPhotoURL,
+                    currentGradeLevel: this.state.teacherStudentComponent.teacherStudentAddCurrentGrade,
+                    displayName: this.state.teacherStudentComponent.teacherStudentAddName,
+                }).then(result => {
+                    console.log('add sucessfully addStudentAsTeacherWithoutLoginPortal: ' + JSON.stringify(result));
+                    this.props.handleUpdateOnStudent();
+                    this.setState(prevState => ({
+                        teacherStudentComponent: {
+                            ...prevState.teacherStudentComponent,
+                            teacherStudentAddSubmitLoading: false,
+                        }
+                    }));
+                }).catch(err => {
+                    console.log(err)
+                });
             }
         }
     }
 
+    uuidv4 = () => {
+        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+            var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
+            return v.toString(16);
+        });
+    }
+
+    handleStudentAddProfilePic = ({ onError, onSuccess, file }) => {
+        console.log("in handleStudentAddProfilePic");
+        const metadata = {
+            contentType: 'image/jpeg'
+        }
+        const storageRef = storage.ref();
+        let uniqueImageName = this.uuidv4();
+        const imageName = `${this.state.currentUserDoc.uid}/studentImages/${file.name}${uniqueImageName}`
+        const imgFile = storageRef.child(`images/${imageName}.png`);
+        try {
+            const uploadTask = imgFile.put(file, metadata);
+            const context = this;
+            uploadTask.on('state_changed', function(snapshot){
+                // Observe state change events such as progress, pause, and resume
+                // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
+                var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
+                console.log('Upload is ' + progress + '% done');
+                switch (snapshot.state) {
+                  case firebase.storage.TaskState.PAUSED: // or 'paused'
+                    console.log('Upload is paused');
+                    break;
+                  case firebase.storage.TaskState.RUNNING: // or 'running'
+                    console.log('Upload is running');
+                    break;
+                }
+              }, function(error) {
+                // Handle unsuccessful uploads
+              }, function() {
+                // Handle successful uploads on complete
+                // For instance, get the download URL: https://firebasestorage.googleapis.com/...
+                uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL) {
+                  console.log('File available at', downloadURL);
+                  context.setState(prevState => ({
+                        teacherStudentComponent: {
+                            ...prevState.teacherStudentComponent,
+                            teacherStudentAddPhotoURL: downloadURL,
+                        }
+                    }));
+                });
+            });
+            // onSuccess(null, image);
+        } catch(e) {
+            setTimeout(() => {
+                onError("error");
+            }, 0);
+        }
+
+        setTimeout(() => {
+            onSuccess("ok");
+        }, 0);
+    }
+
     handleCancelTeacherStudentAdd = (e) => {
         this.setState(prevState => ({
             teacherStudentComponent: {
@@ -644,6 +730,8 @@ export class TeacherDashboard extends React.Component {
                 teacherStudentAddStudentLoginRequired: false,
                 handleTeacherStudentAddEmailIsPristine: true,
                 teacherStudentAddEmailError: null,
+                teacherStudentAddSubmitLoading: false,
+                teacherStudentAddSubmitBackendError: false,
             }
         }));
     }
@@ -1093,6 +1181,7 @@ export class TeacherDashboard extends React.Component {
                         requireLoginPortalForStudent={this.requireLoginPortalForStudent}
                         handleTeacherStudentAddEmail={this.handleTeacherStudentAddEmail}
                         onBlurhandleTeacherStudentAddEmail={this.onBlurhandleTeacherStudentAddEmail}
+                        handleStudentAddProfilePic={this.handleStudentAddProfilePic}
                     />
                 </div>
             </React.Fragment>

diff --git a/components/teacherStudentAdd.js b/components/teacherStudentAdd.js
@@ -1,8 +1,8 @@
 import React from 'react';
-import { Modal, Button, Form, Space, Input, Switch } from 'antd';
+import { Modal, Button, Form, Space, Input, Switch, Avatar, Upload } from 'antd';
 
 import stylesheet from 'antd/dist/antd.min.css';
-import { UploadOutlined, LoadingOutlined } from '@ant-design/icons';
+import { UploadOutlined, UserOutlined } from '@ant-design/icons';
 
 
 
@@ -125,26 +125,33 @@ export default class TeacherStudentAdd extends React.Component {
         )
     }
 
+    uploadAvatarComponent = () => {
+        return(
+            <Upload><Button size="small" style={{border: "none"}}><Avatar icon={<UserOutlined />}/><UploadOutlined /></Button></Upload>
+        )
+    }
+
     render() {
         return (
             <React.Fragment>
                 <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
                 <div>
                     <Modal
-                    title="Add Student"
+                    title={<div style={{display: "inline"}}><Upload customRequest={this.props.handleStudentAddProfilePic}><Button size="small" style={{border: "none"}}><Avatar icon={<UserOutlined />}/><UploadOutlined /></Button><p style={{fontWeight: "bold", whiteSpace: "nowrap", display: "inline"}}>Add Students</p></Upload></div>}
                     visible={this.props.teacherStudentComponent.teacherStudentAddModalVisible}
                     onCancel={this.props.handleCancelTeacherStudentAdd}
                     onOk={this.props.handleSubmitTeacherStudentAdd}
                     footer={[
                         <Button key="back" onClick={(e) => this.props.handleCancelTeacherStudentAdd(e)}>
                           Return
                         </Button>,
-                        <Button key="submit" type="primary" onClick={(e) => this.props.handleSubmitTeacherStudentAdd(e)}>
+                        <Button key="submit" type="primary" loading={this.props.teacherStudentComponent.teacherStudentAddSubmitLoading} onClick={(e) => this.props.handleSubmitTeacherStudentAdd(e)}>
                           Submit
                         </Button>,
                     ]}
                     >
                         <Form name="student_information">
+                            <Space/>
                             <Space/>
                             {this.nameComponent()}
                             {this.currentGradeComponent()}

diff --git a/components/teacherStudentComponent.js b/components/teacherStudentComponent.js
@@ -15,6 +15,7 @@ import stylesheet from 'antd/dist/antd.min.css';
 
 import TeacherEditStudentComponent from '../components/individualStudentTeacherEdit';
 import TeacherStudentAdd from '../components/teacherStudentAdd';
+import TeacherStudentShowStudents from './teacherStudentShowStudents';
 
 
 
@@ -51,8 +52,13 @@ export default class TeacherStudentComponent extends React.Component {
     showStudentsComponent = (context) => {
         console.log("in teacherStudentComponent");
         console.log(this.props.teacherStudentRef.data);
-        // check if the individualStudentEditClicked is clicked 
+        // check if the individualStudentEditClicked is clicked
         if(this.props.teacherStudentComponent.currentUserDoc && this.props.teacherStudentRef.data && !this.props.teacherStudentComponent.individualStudentEditClicked && !this.props.teacherStudentComponent.teacherStudentComponentAddStudentsClicked){
+            return <TeacherStudentShowStudents
+                    teacherStudentComponent={this.props.teacherStudentComponent}
+                    teacherStudentComponentHandleTeacherStudentClick={this.props.teacherStudentComponentHandleTeacherStudentClick}
+                    teacherStudentRef={this.props.teacherStudentRef}
+                   />
             const antIcon = <LoadingOutlined style={{ fontSize: 20 }} spin />;
             return(
                 <List style={{position: "absolute"}}>
@@ -110,6 +116,7 @@ export default class TeacherStudentComponent extends React.Component {
                     requireLoginPortalForStudent={this.props.requireLoginPortalForStudent}
                     handleTeacherStudentAddEmail={this.props.handleTeacherStudentAddEmail}
                     onBlurhandleTeacherStudentAddEmail={this.props.onBlurhandleTeacherStudentAddEmail}
+                    handleStudentAddProfilePic={this.props.handleStudentAddProfilePic}
                    />
         } else {
             console.log("I'm in the null...");

diff --git a/components/teacherStudentShowStudents.js b/components/teacherStudentShowStudents.js
@@ -0,0 +1,66 @@
+import React from 'react';
+import { List, Avatar, Spin, Skeleton } from 'antd';
+
+import stylesheet from 'antd/dist/antd.min.css';
+import { LoadingOutlined } from '@ant-design/icons';
+
+
+
+
+export default class TeacherStudentShowStudents extends React.Component {
+    constructor(props) {
+        super(props);
+        this.showStudentsComponent = this.showStudentsComponent.bind(this);
+    }
+
+    componentDidMount() {
+        console.log("in TeacherStudentShowStudents class....");
+    }
+
+
+
+    showStudentsComponent = () => {
+        const context = this.props;
+        console.log("this.props.teacherStudentRef");
+        console.log(this.props.teacherStudentRef);
+        const antIcon = <LoadingOutlined style={{ fontSize: 20 }} spin />;
+
+        return (
+            <List
+            itemLayout="horizontal"
+            dataSource={this.props.teacherStudentRef.data}
+            style={{position: "absolute"}}
+            renderItem={item => (
+                <List.Item
+                    actions={[
+                        <a key={item.uid} onClick={() => context.teacherStudentComponentHandleTeacherStudentClick(item)}>
+                        {context.teacherStudentComponent.individualStudentEditLoading ?
+                            <Spin indicator={antIcon} style={{ float: 'right' }} />
+                        :
+                            <div>Edit</div>
+                        }
+                    </a>
+                    ]}
+                >
+                <List.Item.Meta
+                    avatar={item.photoURL ? <Avatar src={item.photoURL} /> : <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
+                    title={item.displayName ? item.displayName : "No name for student"}
+                    description={item.email ? item.email : "No email set for student"}
+                />
+            </List.Item>
+            )}
+        />
+        )
+    }
+
+    render() {
+        return (
+            <React.Fragment>
+                <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
+                <div>
+                    {this.showStudentsComponent()}
+                </div>
+            </React.Fragment>
+        );
+    }
+}