ClaytonWWilson/CS307-Team24
1
0
Fork 0
mirror of https://github.com/ClaytonWWilson/CS307-Team24.git synced 2026-03-10 21:25:04 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Profile image upload frontend and backend finished

Browse Source
This commit is contained in:
Clayton Wilson
2019-10-27 18:06:47 -04:00
parent 60f83da514
commit 44d3450b10
7 changed files with 210 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
twistter-frontend/src/pages/editProfile.js
View File

@@ -4,13 +4,23 @@ import PropTypes from "prop-types";
// TODO: Add a read-only '@' in the left side of the handle input
// TODO: Add a cancel button, that takes the user back to their profile page
import noImage from '../images/no-img.png';
// Material-UI stuff
import Button from "@material-ui/core/Button";
import Box from "@material-ui/core/Box";
import CircularProgress from "@material-ui/core/CircularProgress";
import Grid from "@material-ui/core/Grid";
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: {
@@ -27,25 +37,52 @@ const styles = {
positon: "relative",
marginBottom: 30
},
box: {
position: "relative"
},
progress: {
position: "absolute"
},
uploadProgress: {
position: "absolute",
marginLeft: -155,
marginTop: 95
}
};
export class edit 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);
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,
lastName: res.data.lastName,
imageUrl: res.data.imageUrl,
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 : ""
});
})
.catch((err) => {
@@ -63,6 +100,7 @@ export class edit extends Component {
constructor() {
super();
this.state = {
imageUrl: "",
firstName: "",
lastName: "",
email: "",
@@ -108,6 +146,7 @@ export class edit 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
@@ -128,10 +167,65 @@ export class edit extends Component {
});
};
handleImageChange = (event) => {
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);
// }
render() {
const { classes } = this.props;
const uploading = this.props.UI.loading;
const { errors, loading } = this.state;
// let imageMarkup = this.state.imageUrl ? (
// <img
// src={this.state.imageUrl}
// height="250"
// width="250"
// />
// ) : (<img src={noImage}/>);
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>
)
return (
<Grid container className={classes.form}>
<Grid item sm />
@@ -140,6 +234,13 @@ export class edit 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
@@ -219,7 +320,7 @@ export class edit extends Component {
variant="contained"
color="primary"
className={classes.button}
disabled={loading}
disabled={loading || uploading}
>
Submit
{loading && (
@@ -234,8 +335,18 @@ export class edit extends Component {
}
}
const mapStateToProps = (state) => ({
user: state.user,
UI: state.UI,
// credentials: state.user.credentials
});
const mapActionsToProps = { uploadImage }
edit.propTypes = {
uploadImage: PropTypes.func.isRequired,
classes: PropTypes.object.isRequired
};
export default withStyles(styles)(edit);
// export default withStyles(styles)(edit);
export default connect(mapStateToProps, mapActionsToProps)(withStyles(styles)(edit));

23
twistter-frontend/src/redux/actions/userActions.js
View File

@@ -1,8 +1,9 @@
import {SET_USER, SET_ERRORS, CLEAR_ERRORS, LOADING_UI, SET_AUTHENTICATED, SET_UNAUTHENTICATED} from '../types';
import {SET_USER, SET_ERRORS, CLEAR_ERRORS, LOADING_UI, SET_AUTHENTICATED, SET_UNAUTHENTICATED, LOADING_USER} from '../types';
import axios from 'axios';
// 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({
@@ -13,6 +14,7 @@ export const getUserData = () => (dispatch) => {
.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
@@ -33,6 +35,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
@@ -55,12 +58,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")
@@ -81,8 +86,22 @@ export const deleteUser = () => (dispatch) => {
dispatch({ type: SET_UNAUTHENTICATED });
}
// 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;
}
// 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);
})
}

8
twistter-frontend/src/redux/reducers/userReducer.js
View File

@@ -1,4 +1,4 @@
import {SET_USER, SET_ERRORS, CLEAR_ERRORS, LOADING_UI, SET_AUTHENTICATED, SET_UNAUTHENTICATED} from '../types';
import {SET_USER, SET_ERRORS, CLEAR_ERRORS, LOADING_UI, SET_AUTHENTICATED, SET_UNAUTHENTICATED, LOADING_USER} from '../types';
const initialState = {
authenticated: false,
@@ -20,8 +20,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;
}