Skip to content

Commit

Permalink
fixing profile page pt.1
Browse files Browse the repository at this point in the history
  • Loading branch information
@potauro
potauro committed Aug 13, 2021
1 parent 49ecc3f commit aa26800
Show file tree
Hide file tree
Showing 8 changed files with 417 additions and 115 deletions.
3 changes: 2 additions & 1 deletion models/Users-model.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,8 @@ const userSchema = new Schema({
admin: {
type: Boolean,
default: false
}
},
image: String
},
{
timestamps: true
Expand Down
6 changes: 3 additions & 3 deletions olympi-client/src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,9 +76,9 @@ class App extends Component {
)} />

{/* go back an check this Karina */}
<Route exact path="/user">
{this.state.user?.professional ? <ProProfile user={this.state.user} /> : <UserProfile user={this.state.user} />}
</Route>
<Route exact path="/user" render={(props)=> (
this.state.user?.professional ? <ProProfile user={this.state.user} /> : <UserProfile user={this.state.user} />
)} />

{/* go back an check this Karina */}
<Route exact path="/videos/explore" render={(props) => (
Expand Down
1 change: 1 addition & 0 deletions olympi-client/src/components/Profile/BottomNavBar/BottomNavBar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
z-index: 1;
display: flex;
height: 70px;
margin-top: 200px;
background-color: #fafafa;
bottom: 0px;
position: fixed;
Expand Down
287 changes: 182 additions & 105 deletions olympi-client/src/components/Profile/PersonalBio/PersonalBio.js
View file
Original file line number Diff line number Diff line change
@@ -1,114 +1,191 @@
import React, {useEffect, useState} from 'react'
import React, {useEffect, useState, Redirect} from 'react'
import "./PersonalBio.css"
import SportsIcon from '@material-ui/icons/Sports';
import Modal from "react-modal"
import axios from "axios"
const baseUrl = process.env.REACT_APP_APIURL
const customStyles = {
content: {
top: '50%',
left: '50%',
right: 'auto',
bottom: 'auto',
marginRight: '-50%',
transform: 'translate(-50%, -50%)',
width: "350px",
zIndex: 1
},
};
function PersonalBio({user}) {
const [profile, setProfile] = useState({
username:"",
email:"",
city:"",
fav_exercise:"",
about:""
})
Modal.setAppElement(document.getElementById("root"))
let subtitle;
const [modalIsOpen, setIsOpen] = useState(false);

function openModal() {
setIsOpen(true);
}
import authService from '../../auth/auth-service'
import VideoUpload from '../UpdateProfile/UpdateProfile'

function afterOpenModal() {
// references are now sync'd and can be accessed.
subtitle.style.color = '#f00';
}

function closeModal() {
setIsOpen(false);
}
async function fetchUser(user)
{
await axios.get(`${baseUrl}/auth/user?id=${user}`)
.then((response) => {
if(response.status == 201)
{

const data = response.data
setProfile({
username: data.username,
email: data.email,
city: data.city,
fav_exercise: data.fav_exercise,
about: data.about
})
}
})
.catch((e) => console.log("Not Found", e))
}
const handleChange = (event) => {
const {name, value} = event.target;
setProfile({...profile, [name]: value});

export default class PersonalBio extends React.Component {

logout = (event) => {
authService.logout()
.then(response => {
this.props.updateUser(false);
})
;
}
const onUpdate = async() => {
const result = await axios.put(`${baseUrl}/auth/updateUser?id=${user._id}`, profile)
if(result.status == 201)
{
setProfile(result.data)
setIsOpen(false)
}

handleUpload = (event) => {
let formData = new FormData();
formData.append('photo', event.target.files[0]);

authService.upload(formData)
.then(response => {
this.props.updateUser(response);
})
;
}


toggle = () => {
this.setState({uploadOpen: !this.state.uploadOpen})
}

render() {
if (this.props.user === false) return <Redirect to="/" />

return (
<>



<div className="PersonalBioContainer">
<div className="BioTitle"> <span>User Profile</span> </div>
<div className="editImage" ><img src="/assets/icons/editbutton.svg" alt=""></img>Edit </div>
<img className="avatar" src={this.props.user.image || "/assets/icons/noprofilephoto.svg"} />
<div className="UsersName">{this.props.user.username}</div>
<div className="UsersCity">{this.props.user.city}</div>
<div className="ShortBio">{this.props.user.about}</div>
<form>
<label>
<input type="file" name="image" onChange={this.handleUpload} />
</label>
</form>






</div>

</>
)
}
useEffect(() =>{
fetchUser(user._id)
}, [])
return (
<div className="ProBioContainer">

<div className="ProBioTitle"> <span>User Profile</span> </div>

<div className="ProeditImage" onClick={openModal}><img src="/assets/icons/editbutton.svg" alt=""></img>Edit </div>


<Modal
isOpen={modalIsOpen}
onAfterOpen={afterOpenModal}
onRequestClose={closeModal}
style={customStyles}
>
<h2 ref={(_subtitle) => (subtitle = _subtitle)}>Edit profile</h2>
{/* <button onClick={closeModal}>close</button> */}
<div>Edit your profile info</div>
<div>
<p> <input type="text" name="username" onChange={handleChange} value={profile.username} placeholder="Username" /> </p>
<p> <input type="email" name="email" onChange={handleChange} value={profile.email} placeholder="Email" /> </p>
<p> <input type="text" name="about" onChange={handleChange} value={profile.about} placeholder="About" /> </p>
<p><input type="text" name="city" onChange={handleChange} value={profile.city} placeholder="City" /> </p>
<p><input type="text" name="fav_exercise" onChange={handleChange} value={profile.fav_exercise} placeholder="Favorite Exercise" /></p>
<button type={"button"} onClick={onUpdate} className={"updateButton"}>Update</button>
</div>
</Modal>
<img src="/assets/icons/noprofilephoto.svg" alt=""></img>
<div className="ProUsersName">{profile.username}<i><SportsIcon/></i></div>
<div className="ProUsersCity">{profile.city}</div>
<div className="ProShortBio">{profile.about}</div>
<button className="askFeedback">Ask for Feedback</button>


</div>
)
}

export default PersonalBio














// //const baseUrl = process.env.REACT_APP_APIURL
// //const customStyles = {
// content: {
// top: '50%',
// left: '50%',
// right: 'auto',
// bottom: 'auto',
// marginRight: '-50%',
// transform: 'translate(-50%, -50%)',
// width: "350px",
// zIndex: 1
// },
// };
// function PersonalBio({user}) {
// const [profile, setProfile] = useState({
// username:"",
// email:"",
// city:"",
// fav_exercise:"",
// about:""
// })
// Modal.setAppElement(document.getElementById("root"))
// let subtitle;
// const [modalIsOpen, setIsOpen] = useState(false);

// function openModal() {
// setIsOpen(true);
// }

// function afterOpenModal() {
// // references are now sync'd and can be accessed.
// subtitle.style.color = '#f00';
// }

// function closeModal() {
// setIsOpen(false);
// }
// async function fetchUser(user)
// {
// await axios.get(`${baseUrl}/auth/user?id=${user}`)
// .then((response) => {
// if(response.status == 201)
// {

// const data = response.data
// setProfile({
// username: data.username,
// email: data.email,
// city: data.city,
// fav_exercise: data.fav_exercise,
// about: data.about
// })
// }
// })
// .catch((e) => console.log("Not Found", e))
// }
// const handleChange = (event) => {
// const {name, value} = event.target;
// setProfile({...profile, [name]: value});
// }
// const onUpdate = async() => {
// const result = await axios.put(`${baseUrl}/auth/updateUser?id=${user._id}`, profile)
// if(result.status == 201)
// {
// setProfile(result.data)
// setIsOpen(false)
// }
// }
// useEffect(() =>{
// fetchUser(user._id)
// }, [])
// return (
// <div className="PersonalBioContainer">

// <div className="BioTitle"> <span>User Profile</span> </div>

// <div className="editImage" onClick={openModal}><img src="/assets/icons/editbutton.svg" alt=""></img>Edit </div>


// <Modal
// isOpen={modalIsOpen}
// onAfterOpen={afterOpenModal}
// onRequestClose={closeModal}
// style={customStyles}
// >
// <h2 ref={(_subtitle) => (subtitle = _subtitle)}>Edit profile</h2>
// {/* <button onClick={closeModal}>close</button> */}
// <div>Edit your profile info</div>
// <div>
// <p> <input type="text" name="username" onChange={handleChange} value={profile.username} placeholder="Username" /> </p>
// <p> <input type="email" name="email" onChange={handleChange} value={profile.email} placeholder="Email" /> </p>
// <p> <input type="text" name="about" onChange={handleChange} value={profile.about} placeholder="About" /> </p>
// <p><input type="text" name="city" onChange={handleChange} value={profile.city} placeholder="City" /> </p>
// <p><input type="text" name="fav_exercise" onChange={handleChange} value={profile.fav_exercise} placeholder="Favorite Exercise" /></p>
// <button type={"button"} onClick={onUpdate} className={"updateButton"}>Update</button>
// </div>
// </Modal>
// <img src="/assets/icons/noprofilephoto.svg" alt=""></img>
// <div className="UsersName">{profile.username}</div>
// <div className="UsersCity">{profile.city}</div>
// <div className="ShortBio">{profile.about}</div>



// </div>
// )
// }

// export default PersonalBio
Empty file added olympi-client/src/components/Profile/UpdateProfile/UpdateProfile.css
View file
Empty file.
Loading

0 comments on commit aa26800

Please sign in to comment.