Merge pull request #60 from ClaytonWWilson/edit-profile-image-upload

Edit profile image upload

functions/handlers/post.js

@@ -238,7 +238,8 @@ exports.quoteWithoutPost = (req, res) => {
       }
     })
     .catch(err => {
-      return res.status(500).json({ error: "Something is wrong" });
+    //   return res.status(500).json({ error: "Something is wrong" });
+      return res.status(500).json({ error: err });
     });
 };
 
@@ -259,7 +260,11 @@ exports.checkforLikePost = (req, res) => {
       result = true;
       return res.status(200).json(result);
     }
-  });
+  })
+  .catch((err) => {
+      console.log(err);
+      return res.status(500).json({error: err});
+  })
 };
 
 exports.likePost = (req, res) => {
@@ -303,7 +308,8 @@ exports.likePost = (req, res) => {
       }
     })
     .catch(err => {
-      return res.status(500).json({ error: "Something is wrong" });
+    //   return res.status(500).json({ error: "Something is wrong" });
+        return res.status(500).json({ error: err });
     });
 };
 

functions/handlers/users.js

@@ -1,3 +1,4 @@
+/* eslint-disable promise/catch-or-return */
 /* eslint-disable promise/always-return */
 
 const { admin, db } = require("../util/admin");
@@ -416,7 +417,7 @@ exports.updateProfileInfo = (req, res) => {
   // Update the database entry for this user
   db.collection("users")
     .doc(req.user.handle)
-    .set(profileData, { merge: true })
+    .set(profileData)
     .then(() => {
       console.log(`${req.user.handle}'s profile info has been updated.`);
       return res.status(201).json({
@@ -467,6 +468,7 @@ exports.getAllHandles = (req, res) => {
   });
 };
 
+// Returns all data stored for a user
 exports.getAuthenticatedUser = (req, res) => {
   let credentials = {};
   db.doc(`/users/${req.user.handle}`)
@@ -602,6 +604,126 @@ exports.getSubs = (req, res) => {
     });
 };
 
+// Uploads a profile image
+exports.uploadProfileImage = (req, res) => {
+  const BusBoy = require("busboy");
+  const path = require("path");
+  const os = require("os");
+  const fs = require("fs");
+
+  const busboy = new BusBoy({ headers: req.headers });
+
+  let imageFileName;
+  let imageToBeUploaded = {};
+  let oldImageFileName = req.userData.imageUrl ? req.userData.imageUrl.split("/o/")[1].split("?alt")[0] : null;
+  // console.log(`old file: ${oldImageFileName}`);
+
+  busboy.on("file", (fieldname, file, filename, encoding, mimetype) => {
+    if (mimetype !== 'image/jpeg' && mimetype !== 'image/png') {
+      return res.status(400).json({ error: "Wrong filetype submitted" });
+    }
+    // console.log(fieldname);
+    // console.log(filename);
+    // console.log(mimetype);
+    const imageExtension = filename.split(".")[filename.split(".").length - 1];       // Get the image file extension
+    imageFileName = `${Math.round(Math.random() * 100000000000)}.${imageExtension}`;  // Get a random filename
+    const filepath = path.join(os.tmpdir(), imageFileName);
+    imageToBeUploaded = { filepath, mimetype };
+    file.pipe(fs.createWriteStream(filepath));
+  });
+  busboy.on("finish", () => {
+    // Save the file to the storage bucket
+    admin.storage().bucket(config.storageBucket).upload(imageToBeUploaded.filepath, {
+      resumable: false,
+      metadata: {
+        metadata: {
+          contentType: imageToBeUploaded.mimetype
+        }
+      }
+    })
+    .then(() => {
+      // Add the new URL to the user's profile
+      const imageUrl = `https://firebasestorage.googleapis.com/v0/b/${config.storageBucket}/o/${imageFileName}?alt=media`;
+      return db.doc(`/users/${req.user.handle}`).update({ imageUrl });
+    })
+    .then(() => {
+      // Delete their old image if they have one
+      if (oldImageFileName !== null && oldImageFileName !== "no-img.png") {
+        admin.storage().bucket(config.storageBucket).file(oldImageFileName).delete()
+          .then(() => {
+            return res.status(201).json({ message: "Image uploaded successfully1"});
+          })
+          .catch((err) => {
+            console.log(err);
+            return res.status(201).json({ message: "Image uploaded successfully2"});
+          })
+          // return res.status(201).json({ message: "Image uploaded successfully"});
+      } else {
+        return res.status(201).json({ message: "Image uploaded successfully3"});
+      }
+
+    })
+    .catch((err) => {
+      console.error(err);
+      return res.status(500).json({ error: err.code})
+    })
+  });
+  busboy.end(req.rawBody);
+
+  // const BusBoy = require('busboy');
+  // const path = require('path');
+  // const os = require('os');
+  // const fs = require('fs');
+
+  // const busboy = new BusBoy({ headers: req.headers });
+
+  // let imageToBeUploaded = {};
+  // let imageFileName;
+
+  // busboy.on('file', (fieldname, file, filename, encoding, mimetype) => {
+  //   // console.log(fieldname, file, filename, encoding, mimetype);
+  //   if (mimetype !== 'image/jpeg' && mimetype !== 'image/png') {
+  //     return res.status(400).json({ error: 'Wrong file type submitted' });
+  //   }
+  //   // my.image.png => ['my', 'image', 'png']
+  //   const imageExtension = filename.split('.')[filename.split('.').length - 1];
+  //   // 32756238461724837.png
+  //   imageFileName = `${Math.round(
+  //     Math.random() * 1000000000000
+  //   ).toString()}.${imageExtension}`;
+  //   const filepath = path.join(os.tmpdir(), imageFileName);
+  //   imageToBeUploaded = { filepath, mimetype };
+  //   file.pipe(fs.createWriteStream(filepath));
+  // });
+  // busboy.on('finish', () => {
+  //   admin
+  //     .storage()
+  //     .bucket(config.storageBucket)
+  //     .upload(imageToBeUploaded.filepath, {
+  //       resumable: false,
+  //       metadata: {
+  //         metadata: {
+  //           contentType: imageToBeUploaded.mimetype
+  //         }
+  //       }
+  //     })
+  //     .then(() => {
+  //       const imageUrl = `https://firebasestorage.googleapis.com/v0/b/${
+  //         config.storageBucket
+  //       }/o/${imageFileName}?alt=media`;
+  //       return db.doc(`/users/${req.user.handle}`).update({ imageUrl });
+  //     })
+  //     .then(() => {
+  //       return res.json({ message: 'image uploaded successfully' });
+  //     })
+  //     .catch((err) => {
+  //       console.error(err);
+  //       return res.status(500).json({ error: 'something went wrong' });
+  //     });
+  // });
+  //   busboy.end(req.rawBody);
+}
+
 exports.removeSub = (req, res) => {
   let new_following = [];
   let userRef = db.doc(`/users/${req.userData.handle}`);

functions/index.js

@@ -18,6 +18,7 @@ const {
   signup,
   deleteUser,
   updateProfileInfo,
+  uploadProfileImage,
   verifyUser,
   unverifyUser,
   getUserHandles,
@@ -50,8 +51,13 @@ app.get("/getProfileInfo", fbAuth, getProfileInfo);
 // Updates the currently logged in user's profile information
 app.post("/updateProfileInfo", fbAuth, updateProfileInfo);
 
+// Returns all user data for the logged in user.
+// Used when setting the state in Redux.
 app.get("/user", fbAuth, getAuthenticatedUser);
 
+// Uploads a profile image
+app.post("/user/image", fbAuth, uploadProfileImage);
+
 // Verifies the user sent to the request
 // Must be run by the Admin user
 app.post("/verifyUser", fbAuth, verifyUser);

functions/package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "axios": "^0.19.0",
+    "busboy": "^0.3.1",
     "firebase": "^6.6.2",
     "firebase-admin": "^8.6.0",
     "firebase-functions": "^3.1.0",

functions/util/fbAuth.js

@@ -4,12 +4,12 @@ const { admin, db } = require('./admin');
 // The function will only execute if the user is logged in, or rather, they have
 // a valid token
 module.exports = (req, res, next) => {
-    console.log(req);
+    // console.log(req);
-    console.log(req.body);
+    // console.log(req.body);
-    console.log(req.headers);
+    // console.log(req.headers);
-    console.log(req.headers.authorization);
+    // console.log(req.headers.authorization);
-    console.log(JSON.stringify(req.body));
+    // console.log(JSON.stringify(req.body));
-    console.log(JSON.stringify(req.header));
+    // console.log(JSON.stringify(req.header));
 
     let idToken;
     

twistter-frontend/package.json

@@ -43,5 +43,5 @@
       "last 1 safari version"
     ]
   },
-  "proxy": "http://localhost:5001/twistter-e4649/us-central1/api"
+  "proxy": "https://us-central1-twistter-e4649.cloudfunctions.net/api"
 }

twistter-frontend/src/pages/editProfile.js

@@ -3,6 +3,8 @@ import { Link } from 'react-router-dom';
 import axios from "axios";
 import PropTypes from "prop-types";
 
+import noImage from '../images/no-img.png';
+
 // Material-UI stuff
 import Box from "@material-ui/core/Box"
 import Button from "@material-ui/core/Button";
@@ -12,6 +14,13 @@ import Popover from "@material-ui/core/Popover";
 import TextField from "@material-ui/core/TextField";
 import Typography from "@material-ui/core/Typography";
 import withStyles from "@material-ui/core/styles/withStyles";
+import IconButton from "@material-ui/core/IconButton";
+import EditIcon from "@material-ui/icons/Edit";
+import Tooltip from "@material-ui/core/Tooltip";
+
+// Redux stuff
+import { connect } from "react-redux";
+import { uploadImage } from "../redux/actions/userActions";
 
 const styles = {
   form: {
@@ -28,6 +37,9 @@ const styles = {
     positon: "relative",
     marginBottom: 30
   },
+  box: {
+    position: "relative"
+  },
   back: {
     float: "left",
     marginLeft: 15
@@ -39,6 +51,11 @@ const styles = {
   progress: {
     position: "absolute"
   },
+  uploadProgress: {
+    position: "absolute",
+    marginLeft: -155,
+    marginTop: 95
+  },
   popoverBackground: {
     marginTop: "-100px",
     width: "calc(100vw)",
@@ -50,20 +67,38 @@ const styles = {
 };
 
 export class editProfile extends Component {
+  // mapReduxToState = (credentials) => {
+  //   this.setState({
+  //     imageUrl: credentials.imageUrl ? credentials.imageUrl : noImage,
+  //     firstName: credentials.firstName ? credentials.firstName : '',
+  //     lastName: credentials.lastName ? credentials.lastName : '',
+  //     email: credentials.email ? credentials.email : 'error, email doesn\'t exist',
+  //     handle: credentials.handle ? credentials.handle : 'error, handle doesn\'t exist',
+  //     bio: credentials.bio ? credentials.bio : ''
+  //   });
+  // };
+
   // Runs as soon as the page loads.
   // Sets the default values of all the textboxes to the data
   // that is stored in the database for the user.
   componentDidMount() {
+    // const { credentials } = this.props;
+    // console.log(this.props.user);
+    // this.mapReduxToState(credentials);
     this.setState({pageLoading: true})
+
     axios
       .get("/getProfileInfo")
       .then((res) => {
+        // Need to have the ternary if statements, because react throws an error if
+        // any of the res.data keys are undefined
         this.setState({
-          firstName: res.data.firstName,
+          imageUrl: res.data.imageUrl,
-          lastName: res.data.lastName,
+          firstName: res.data.firstName ? res.data.firstName : "",
+          lastName: res.data.lastName ? res.data.lastName : "",
           email: res.data.email,
           handle: res.data.handle,
-          bio: res.data.bio,
+          bio: res.data.bio ? res.data.bio : "",
           pageLoading: false
         });
       })
@@ -80,6 +115,7 @@ export class editProfile extends Component {
   constructor() {
     super();
     this.state = {
+      imageUrl: "",
       firstName: "",
       lastName: "",
       email: "",
@@ -126,6 +162,7 @@ export class editProfile extends Component {
       })
       .catch((err) => {
         console.log(err);
+        // TODO: Should redirect to login page if they get a 403
         this.setState({
           errors: err.response.data,
           loading: false
@@ -146,6 +183,26 @@ export class editProfile extends Component {
     });
   };
 
+  handleImageChange = (event) => {
+    if (event.target.files[0]) {
+      const image = event.target.files[0];
+      const formData = new FormData();
+      formData.append('image', image, image.name);
+      this.props.uploadImage(formData);
+    }
+  }
+
+  handleEditPicture = () => {
+    const fileInput = document.getElementById('imageUpload');
+    fileInput.click();
+  }
+
+  // logging = () => {
+  //   console.log(this.state);
+  //   console.log(this.props);
+  //   this.mapReduxToState(this.props.credentials);
+  // }
+
   handleOpenConfirmDelete = (event) => {
 		this.setState({
       // anchorEl: event.currentTarget
@@ -162,8 +219,39 @@ export class editProfile extends Component {
 
   render() {
     const { classes } = this.props;
+    const uploading = this.props.UI.loading;
     const { errors, loading } = this.state;
 
+// <<<<<<< edit-profile-image-upload
+
+    let imageMarkup = this.props.user.credentials.imageUrl ? (
+      <Box
+      // className={classes.box}
+      >
+        <img
+        src={this.props.user.credentials.imageUrl}
+        height="250"
+        width="250"
+        className={classes.box}/>
+        {uploading && (
+          <CircularProgress size={60} className={classes.uploadProgress} />
+        )}
+      </Box>
+    ) : (
+      <Box
+      // className={classes.box}
+      >
+        <img
+        src={noImage}
+        height="250"
+        width="250"
+        className={classes.box}/>
+        {uploading && (
+          <CircularProgress size={60} className={classes.uploadProgress} />
+        )}
+      </Box>
+    )
+
     // Used for the delete button
 		const open = Boolean(this.state.anchorEl);
 		const id = open ? 'simple-popover' : undefined;
@@ -177,6 +265,8 @@ export class editProfile extends Component {
             <Button
               variant="outlined"
               color="primary"
+//               className={classes.button}
+              disabled={loading || uploading}
               className={classes.back}
               component={ Link }
               to='/user'
@@ -189,6 +279,12 @@ export class editProfile extends Component {
               Edit Profile
             </Typography>
             <form noValidate onSubmit={this.handleSubmit}>
+              {imageMarkup}
+              <input type="file" id="imageUpload" onChange={this.handleImageChange} hidden = "hidden"/>
+              <Tooltip title="Edit profile picture" placement="top">
+              <IconButton onClick={this.handleEditPicture} className="button">
+              <EditIcon color="primary"/>
+              </IconButton></Tooltip>
               <Grid container className={classes.form} spacing={4}>
                 <Grid item sm>
                   <TextField
@@ -357,8 +453,18 @@ export class editProfile extends Component {
   }
 }
 
+const mapStateToProps = (state) => ({
+  user: state.user,
+  UI: state.UI,
+  // credentials: state.user.credentials
+});
+
+const mapActionsToProps = { uploadImage }
+
 editProfile.propTypes = {
+  uploadImage: PropTypes.func.isRequired,
   classes: PropTypes.object.isRequired
 };
 
-export default withStyles(styles)(editProfile);
+// export default withStyles(styles)(edit);
+export default connect(mapStateToProps, mapActionsToProps)(withStyles(styles)(editProfile));

twistter-frontend/src/redux/actions/userActions.js

@@ -4,28 +4,33 @@ import {
   CLEAR_ERRORS, 
   LOADING_UI, 
   // SET_AUTHENTICATED, 
-  SET_UNAUTHENTICATED
+  SET_UNAUTHENTICATED,
+  LOADING_USER
 } from '../types';
 import axios from 'axios';
 
+// Saves Authorization in browser local storage and adds it as a header to axios
 const setAuthorizationHeader = (token) => {
   const FBIdToken = `Bearer ${token}`;
   localStorage.setItem('FBIdToken', FBIdToken);
   axios.defaults.headers.common['Authorization'] = FBIdToken;
 }
 
+// Gets Database info for the logged in user and sets it in Redux
 export const getUserData = () => (dispatch) => {
+  dispatch({ type: LOADING_USER });
     axios.get('/user')
         .then((res) => {
             dispatch({
                 type: SET_USER,
                 payload: res.data,
-            })
+            });
-            dispatch({ type: CLEAR_ERRORS })
+            dispatch({type: CLEAR_ERRORS});
         })
         .catch((err) => console.error(err));
 }
 
+// Sends login data to firebase and sets the user data in Redux
 export const loginUser = (loginData, history) => (dispatch) => {
     dispatch({ type: LOADING_UI });
     axios
@@ -46,6 +51,7 @@ export const loginUser = (loginData, history) => (dispatch) => {
       });
 };
 
+// Sends signup data to firebase and sets the user data in Redux
 export const signupUser = (newUserData, history) => (dispatch) => {
     dispatch({ type: LOADING_UI });
     axios
@@ -68,12 +74,14 @@ export const signupUser = (newUserData, history) => (dispatch) => {
       });
 };
 
+// Deletes the Authorization header and clears all user data from Redux
 export const logoutUser = () => (dispatch) => {
     localStorage.removeItem('FBIdToken');
     delete axios.defaults.headers.common['Authorization'];
     dispatch({ type: SET_UNAUTHENTICATED });
 }
 
+
 export const deleteUser = () => (dispatch) => {
   axios
     .delete("/delete")
@@ -93,3 +101,16 @@ export const deleteUser = () => (dispatch) => {
   delete axios.defaults.headers.common['Authorization'];
   dispatch({ type: SET_UNAUTHENTICATED });
 }
+
+// Sends an image data form to firebase to be uploaded to the user profile
+export const uploadImage = (formData) => (dispatch) => {
+  dispatch({ type: LOADING_UI });
+  axios.post('/user/image', formData)
+    .then(() => {
+      dispatch(getUserData());
+      // dispatch({ type: CLEAR_ERRORS });
+    })
+    .catch(err => {
+      console.log(err);
+    })
+}

twistter-frontend/src/redux/reducers/uiReducer.js

@@ -23,7 +23,7 @@ export default function(state = initialState, action) {
             return {
                 ...state,
                 loading: true
-            }
+            };
         default:
             return state;
     }

twistter-frontend/src/redux/reducers/userReducer.js

@@ -4,7 +4,8 @@ import {
     // CLEAR_ERRORS, 
     // LOADING_UI, 
     SET_AUTHENTICATED, 
-    SET_UNAUTHENTICATED
+    SET_UNAUTHENTICATED,
+    LOADING_USER
 } from '../types';
 
 const initialState = {
@@ -27,8 +28,14 @@ export default function(state = initialState, action) {
         case SET_USER:
             return {
                 authenticated: true,
+                loading: false,
                 ...action.payload,
             };
+        case LOADING_USER:
+            return {
+                ...state,
+                loading: true
+            }
         default:
             return state;
     }