[go: nahoru, domu]
Skip to content

Commit

Permalink
(Task #1): Implement user profile upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@MirTalpur
MirTalpur committed Apr 6, 2020
1 parent 8530938 commit fb0c58e
Show file tree
Hide file tree
Showing 2 changed files with 109 additions and 35 deletions.
121 changes: 96 additions & 25 deletions pages/teacher_setup.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import withAuth from '../src/helpers/withAuth';
import ErrorPage from 'next/error'
import { db } from "../src/firebase";
import { db, storage } from "../src/firebase";


class TeacherInterview extends React.Component {
Expand Down Expand Up @@ -30,11 +30,12 @@ class TeacherInterview extends React.Component {
}],
homeSchoolName: "",
teacherProfilePicFile: '',
teacherProfilePicBlob: '',
teacherName: '',
teacherDataCollection: {
"uid": "",
"displayName": "",
"photoURL": "",
"photoUrl": "",
"email": "",
"emailVerified": "",
"isNewUser": "",
Expand All @@ -49,7 +50,7 @@ class TeacherInterview extends React.Component {
validationHomeSchoolName: {
message: null,
},
isLoadingSubmit: true,
isLoadingSubmit: false,
}
}

Expand All @@ -63,7 +64,7 @@ class TeacherInterview extends React.Component {
docRef.get().then((doc) => {
if (doc.exists) {
// check if the users uid isNewUser
console.log("Document data:", doc.data());
console.log("User Document data:", doc.data());
if (doc.data().userType !== "teacher") {
currentComponent.setState({
teacherType: false,
Expand Down Expand Up @@ -113,20 +114,18 @@ class TeacherInterview extends React.Component {
case 2:
return (
<div>
<form>
<p>{this.state.questionTwo}</p>
<input type="file" name="myImage" onChange={() => this.handleImageUpload}/>
<button
content='Back'
onClick={() => this.handleBackClick(event)}>
Back
</button>
<button
content='Next'
onClick={() => this.handleYesClick(event)}>
Next
</button>
</form>
<p>{this.state.questionTwo}</p>
<input type="file" onChange={this.onImageChange} />
<button
content='Back'
onClick={() => this.handleBackClick(event)}>
Back
</button>
<button
content='Next'
onClick={() => this.handleYesClick(event)}>
Next
</button>
</div>

)
Expand Down Expand Up @@ -293,16 +292,53 @@ class TeacherInterview extends React.Component {
}
}

handleFirstTimeSetup(){
uploadProfileFile = () => {
const image = this.state.teacherProfilePicFile;
const uploadTask = storage.ref(`images/${image.name}`).put(image);
uploadTask.on(
"state_changed",
snapshot => {
// progress function ...
const progress = Math.round(
(snapshot.bytesTransferred / snapshot.totalBytes) * 100
);
this.setState({ progress });
},
error => {
// Error function ...
console.log(error);
},
() => {
// complete function ...
storage
.ref("images")
.child(image.name)
.getDownloadURL()
.then(url => {
this.setState({
teacherDataCollection: {
"photoUrl": url,
}
});
});
}
);
}

handleFirstTimeSetup(){
this.setState({
"uid": this.state.authUser.uid,
"email": this.state.authUser.email,
"isNewUser": false,
});
}

handleSubmit = () => {
if(this.state.isLoadingSubmit){
if(this.state.isLoadingSubmit == false){
this.setState({
isLoadingSubmit: true,
});
this.handleFirstTimeSetup();
return(
<div>Loading first time submission....</div>
)
} else {

}
Expand Down Expand Up @@ -330,9 +366,9 @@ class TeacherInterview extends React.Component {
const target = e.target;
const value = target.value;
this.setState({
handleTeacherName: value,
teacherName: value,
});
console.log(this.state.handleTeacherName);
console.log(this.state.teacherName);
}

handleHomeSchoolName = (e) => {
Expand Down Expand Up @@ -377,14 +413,49 @@ class TeacherInterview extends React.Component {
}
}

onImageChange = e => {
if (e.target.files[0]) {
const image = e.target.files[0];
this.setState(() => ({
teacherProfilePicFile: image,
}));
}
// let blob = new Blob([event.target.result], { type: "image/jpg" });
// this.setState({
// teacherProfilePicBlob: blob,
// });

// if (event.target.files && event.target.files[0]) {
// let reader = new FileReader();
// reader. => {
// this.setState({
// teacherProfilePicFile: e.target.result,
// });
// }
// }
}

setRef = (ref) => {
console.log("in setREf");
this.setState({
teacherProfilePicFile: ref,
});
console.log(this.state.teacherProfilePicFile);
}

handleImageUpload = (e) => {
console.log('in image handle upload');
console.log(e.target.files[0]);
this.setState({
teacherProfilePicFile: e.target.files[0]
});
}

handleYesClick(event) {
event.preventDefault();
if(this.state.questionState == 2){
this.uploadProfileFile();
}
if(this.state.questionState == 8){
this.handleSubmit();
} else {
Expand Down
23 changes: 13 additions & 10 deletions src/firebase/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,28 @@
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
import 'firebase/storage';

const config = {
apiKey: process.env.FIREBASE_API_KEY,
authDomain: process.env.FIREBASE_AUTH_DOMAIN,
databaseURL: process.env.FIREBASE_DATABASE_URL,
projectId: process.env.FIREBASE_PROJECT_ID,
storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID
apiKey: process.env.FIREBASE_API_KEY,
authDomain: process.env.FIREBASE_AUTH_DOMAIN,
databaseURL: process.env.FIREBASE_DATABASE_URL,
projectId: process.env.FIREBASE_PROJECT_ID,
storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID
};

if (!firebase.apps.length) {
firebase.initializeApp(config);
firebase.initializeApp(config);
}

const auth = firebase.auth();
const db = firebase.firestore();
const storage = firebase.storage();

export {
auth,
firebase,
db
auth,
firebase,
db,
storage
};

0 comments on commit fb0c58e

Please sign in to comment.