From 5952f3bc442cc1cfa76a2c1042ef61eef3096307 Mon Sep 17 00:00:00 2001 From: Laura Kapitza Date: Sun, 3 Oct 2021 19:43:38 +0200 Subject: [PATCH] improve navbartop & fix minor react warnings --- olympi-client/src/App.js | 4 - .../src/components/Explore/Explore.js | 6 +- .../Profile/PersonalBio/PersonalBio.js | 168 ++---------------- .../Profile/PersonalRecord/PersonalRecord.js | 87 +-------- .../Profile/ProfileVideos/ProfileVideos.js | 154 +++------------- .../src/components/Profile/proProfile.js | 1 - .../src/components/Profile/userProfile.js | 17 -- .../components/home/HowItWorks/HowItWorks.js | 2 - .../components/home/OtherPages/Team/Team.js | 6 +- .../src/components/home/navbarTop/Burger.js | 2 +- .../components/home/navbarTop/NavbarTop.js | 22 +-- .../src/components/home/navbarTop/RightNav.js | 26 ++- .../components/home/navbarTop/navbarTop.css | 21 +-- 13 files changed, 74 insertions(+), 442 deletions(-) diff --git a/olympi-client/src/App.js b/olympi-client/src/App.js index 49b384b..0199a25 100644 --- a/olympi-client/src/App.js +++ b/olympi-client/src/App.js @@ -26,11 +26,9 @@ class App extends Component { } fetchUser = () => { - console.log('fetch') authService.loggedin() .then(data => { this.setState({user: data}) - console.log("user: ", this.state.user); }) .catch(err => { this.setState({user: null}) @@ -43,12 +41,10 @@ class App extends Component { }; componentDidMount() { - console.log('component did mount') this.fetchUser(); } render() { - console.log('render') return ( (
{/* data-route="/" allow us to style pages */} diff --git a/olympi-client/src/components/Explore/Explore.js b/olympi-client/src/components/Explore/Explore.js index 1499254..f8e6e89 100644 --- a/olympi-client/src/components/Explore/Explore.js +++ b/olympi-client/src/components/Explore/Explore.js @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React from 'react'; import moment from 'moment'; import ExploreBottomNavBar from '../feed/FeedFooter.js' import Filters from './Filters/Filters' @@ -22,10 +22,6 @@ class Explore extends React.Component { .catch(err => this.setState({videos: false})) } - // useEffect(() => { - // loadVideos() - // }, [category, sortBy]); - updateVotes(video) { feedService.updateVotes(video) .then(data => { diff --git a/olympi-client/src/components/Profile/PersonalBio/PersonalBio.js b/olympi-client/src/components/Profile/PersonalBio/PersonalBio.js index 386df14..08eadc7 100644 --- a/olympi-client/src/components/Profile/PersonalBio/PersonalBio.js +++ b/olympi-client/src/components/Profile/PersonalBio/PersonalBio.js @@ -1,12 +1,6 @@ -import React, {useEffect, useState, Redirect} from 'react' +import React, {Redirect} from 'react' import "./PersonalBio.css" -import Modal from "react-modal" -import axios from "axios" import authService from '../../auth/auth-service' -import VideoUpload from '../UpdateProfile/UpdateProfile' - - - export default class PersonalBio extends React.Component { logout = (event) => { @@ -37,151 +31,17 @@ export default class PersonalBio extends React.Component { if (this.props.user === false) return return ( -<> - - - -
-
Profile
- - -
{this.props.user.username}
-
{this.props.user.city}
-
{this.props.user.about}
- - - - - - - -
- - - ) - } -} - - - - - - - - - - - - - - - -// //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) -// { + <> +
+
Profile
-// 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 ( -//
- -//
User Profile
- -//
Edit
- - -// -//

(subtitle = _subtitle)}>Edit profile

-// {/* */} -//
Edit your profile info
-//
-//

-//

-//

-//

-//

-// -//
-// -// -//
{profile.username}
-//
{profile.city}
-//
{profile.about}
- - - -//
-// ) -// } - -// export default PersonalBio + +
{this.props.user.username}
+
{this.props.user.city}
+
{this.props.user.about}
+ +
+ + ) + } +} \ No newline at end of file diff --git a/olympi-client/src/components/Profile/PersonalRecord/PersonalRecord.js b/olympi-client/src/components/Profile/PersonalRecord/PersonalRecord.js index bfd1c98..8bdee77 100644 --- a/olympi-client/src/components/Profile/PersonalRecord/PersonalRecord.js +++ b/olympi-client/src/components/Profile/PersonalRecord/PersonalRecord.js @@ -1,8 +1,5 @@ -import React, {useState, useEffect, Redirect} from 'react' +import React, {Redirect} from 'react' import "./PersonalRecord.css" -import Modal from "react-modal" -import axios from "axios" -import moment from "moment" import feedService from '../../feed/feed-service' @@ -66,85 +63,3 @@ import feedService from '../../feed/feed-service' ) } } - - - - - - - - - -// const baseUrl = process.env.REACT_APP_APIURL -// function PersonalRecord({user}) { -// const [records, setRecords]= useState(null) -// async function loadRecords(creator){ -// const dd = await axios.get(`${baseUrl}/videos/loadUserVideos?creator=${creator}`) -// .then((response) => { -// setRecords(response.data); -// }) -// .catch((e) => console.log("not found", e)) -// } -// useEffect(() => { -// user._id && loadRecords(user._id) -// console.log("rcord", records) -// }, []); - - -// Modal.setAppElement(document.getElementById("root")) -// let subtitle; -// const [modalIsOpen, setIsOpen] = useState(false); - -// function openModal() { -// setIsOpen(true); -// } - - - -// const EXERCISES = [ -// 'Overhead press', -// 'Deadlift', -// 'Squat', -// 'Bench press' -// ] - - -// return ( -//
- -//
Personal Record - -//
- -//
-// -// -// -// -// -// -// -// -// -// {records && records.map((record, index) => { -// return -// -// -// -// -// })} - -// -//
ExerciseWeightDate
{record.exercise}{`${record.weight} ${record.weight_metric}`}{moment(record.createdAt).format("LL")}
-//
- - - -//
- - - -// ) -// } - -// export default PersonalRecord diff --git a/olympi-client/src/components/Profile/ProfileVideos/ProfileVideos.js b/olympi-client/src/components/Profile/ProfileVideos/ProfileVideos.js index c046479..4bf252d 100644 --- a/olympi-client/src/components/Profile/ProfileVideos/ProfileVideos.js +++ b/olympi-client/src/components/Profile/ProfileVideos/ProfileVideos.js @@ -1,150 +1,36 @@ -import React, {useEffect, useState} from 'react' +import React from 'react' import "./ProfileVideos.css" -import axios from "axios" -import HighlightOff from "@material-ui/icons/HighlightOff"; -const baseUrl = process.env.REACT_APP_APIURL class ProfileVideos extends React.Component { state = { video: this.props.video, } - - - - - render() { return (
-
Videos -
- - -
- - - +
Videos
+ +
+ + + -
-
+
+
) - - + } }; -export default ProfileVideos; - - - - - -///////notes///// - - //
- - //
- // <>{this.state.video.creator_id.username} - //
- - - - // {/* */} - //
- // - // {/* */} - //
- - - - - //
- // <>{this.state.video.exercise} - //
- - //
- //////end notes - - - - - - - - - - - -// function ProfileVideos({user}) { -// const [videos, setVideos]= useState(null) -// async function loadUserVideos(creator){ -// const dd = await axios.get(`${baseUrl}/videos/loadUserVideos?creator=${creator}`) -// .then((response) => { -// setVideos(response.data); -// }) -// .catch((e) => console.log("not found", e)) -// } -// useEffect(() => { -// user._id && loadUserVideos(user._id) -// }, []); - -// async function removeVideo(videoId) -// { -// const dd = await axios.delete(`${baseUrl}/videos/${videoId}`) -// .then((response) => { -// if(response.status == 204) -// loadUserVideos(user._id) -// }) -// .catch((e) => console.log("Not Deleted", e)) - -// } - // return ( - //
- - //
Videos - //
- - - /*
-
- {videos && videos.map((video, index) => { - return
- removeVideo(video._id)} className={"sdf"} /> - - -
- })} -
-
*/ - -//
- - - - - - - -// ) -// } - -// export default ProfileVideos +export default ProfileVideos; \ No newline at end of file diff --git a/olympi-client/src/components/Profile/proProfile.js b/olympi-client/src/components/Profile/proProfile.js index 95a93cc..a88480a 100644 --- a/olympi-client/src/components/Profile/proProfile.js +++ b/olympi-client/src/components/Profile/proProfile.js @@ -2,7 +2,6 @@ import React from 'react' import BottomNavBar from '../feed/FeedFooter.js' import ProfessionalBio from './ProfessionalBio/ProfessionalBio' import ProfileVideos from './ProfileVideos/ProfileVideos' -import PersonalRecord from './PersonalRecord/PersonalRecord' import "./proProfile.css" import SettingsBar from './SettingsBar/SettingsBar' diff --git a/olympi-client/src/components/Profile/userProfile.js b/olympi-client/src/components/Profile/userProfile.js index 5db6602..afdecdb 100644 --- a/olympi-client/src/components/Profile/userProfile.js +++ b/olympi-client/src/components/Profile/userProfile.js @@ -6,23 +6,6 @@ import ProfileVideos from './ProfileVideos/ProfileVideos' import SettingsBar from './SettingsBar/SettingsBar' import "./userProfile.css" import feedService from '../feed/feed-service.js' -import VideoPost from '../feed/Videopost/VideoPost.js' - -// function UserProfile({user}) { -// return ( -//
-// -// -// -// -// -//
-// ) -// } - -// export default UserProfile - - class UserProfile extends React.Component { state = { diff --git a/olympi-client/src/components/home/HowItWorks/HowItWorks.js b/olympi-client/src/components/home/HowItWorks/HowItWorks.js index 8f38455..aca5260 100644 --- a/olympi-client/src/components/home/HowItWorks/HowItWorks.js +++ b/olympi-client/src/components/home/HowItWorks/HowItWorks.js @@ -6,8 +6,6 @@ import Looks3RoundedIcon from '@material-ui/icons/Looks3Rounded'; import Looks4RoundedIcon from '@material-ui/icons/Looks4Rounded'; import Looks5RoundedIcon from '@material-ui/icons/Looks5Rounded'; import Looks6RoundedIcon from '@material-ui/icons/Looks6Rounded'; -import ArrowDownwardRoundedIcon from '@material-ui/icons/ArrowDownwardRounded'; -import ReplayRoundedIcon from '@material-ui/icons/ReplayRounded'; function HowItWorks() { return ( diff --git a/olympi-client/src/components/home/OtherPages/Team/Team.js b/olympi-client/src/components/home/OtherPages/Team/Team.js index 191730d..a1be8f4 100644 --- a/olympi-client/src/components/home/OtherPages/Team/Team.js +++ b/olympi-client/src/components/home/OtherPages/Team/Team.js @@ -12,9 +12,9 @@ function Team() {
Home {'>'} Team

Meet Team Olympi

-
Karina Gonzalez
-
Laura Kapitza
-
Sandra Gonzalez
+
Karina Gonzalez
+
Laura Kapitza
+
Sandra Gonzalez
This project began during the Ironhack Part-Time Web Development Bootcamp in Paris 2021. diff --git a/olympi-client/src/components/home/navbarTop/Burger.js b/olympi-client/src/components/home/navbarTop/Burger.js index 12d3385..fc83dac 100644 --- a/olympi-client/src/components/home/navbarTop/Burger.js +++ b/olympi-client/src/components/home/navbarTop/Burger.js @@ -11,7 +11,7 @@ const StyledBurger = styled.div` right: 20px; z-index: 20; display: none; - @media (max-width: 768px) { + @media (max-width: 849px) { display: flex; justify-content: space-around; flex-flow: column nowrap; diff --git a/olympi-client/src/components/home/navbarTop/NavbarTop.js b/olympi-client/src/components/home/navbarTop/NavbarTop.js index 5dbd63c..c7eefae 100644 --- a/olympi-client/src/components/home/navbarTop/NavbarTop.js +++ b/olympi-client/src/components/home/navbarTop/NavbarTop.js @@ -8,28 +8,16 @@ export default function NavbarTop () { return (
- - -
-
- - - +
+
- - -
- - - -
- -
- + +
+
) diff --git a/olympi-client/src/components/home/navbarTop/RightNav.js b/olympi-client/src/components/home/navbarTop/RightNav.js index 018fbe3..33428e5 100644 --- a/olympi-client/src/components/home/navbarTop/RightNav.js +++ b/olympi-client/src/components/home/navbarTop/RightNav.js @@ -8,10 +8,11 @@ const Ul = styled.ul` display: flex; flex-flow: row nowrap; li { - padding: 18px 10px; - display: flex; align-items: center; + display: flex; + font-weight: normal; order: 3; + padding: 20px; } .auth-nav-button:first-child{ @@ -19,12 +20,22 @@ const Ul = styled.ul` } li.auth-nav-button a{ - background-color: #E41E1E; - padding: 15px 10px; + background-color: none; + border: 2px solid #E41E1E; border-radius: 10px; + color: #E41E1E; + font-weight: 500; + padding: 10px 20px; + } + + li.auth-nav-button a:hover {background-color: white;} + + li.auth-nav-button a:active { + background-color: #E41E1E; color: white; } - @media (max-width: 768px) { + + @media (max-width: 849px) { flex-flow: column nowrap; background-color: #E41E1E; position: fixed; @@ -63,6 +74,11 @@ const Ul = styled.ul` border-radius: none; color: inherit; } + } + + @media (min-width: 850px) and (max-width: 980px) { + li { + padding: 20px 10px; } } `; diff --git a/olympi-client/src/components/home/navbarTop/navbarTop.css b/olympi-client/src/components/home/navbarTop/navbarTop.css index 0028e61..aabb4a5 100644 --- a/olympi-client/src/components/home/navbarTop/navbarTop.css +++ b/olympi-client/src/components/home/navbarTop/navbarTop.css @@ -10,18 +10,10 @@ font-weight: bolder; z-index: 999; } -@media (min-width: 769px) { - .navbarContainer { - justify-content: center; - } -} .navbarLeft { display: flex; margin-left: 10px; - - - } .navbarCenter { @@ -52,21 +44,24 @@ z-index: 999; } .button { - border-style: solid; - Border-color: #E41E1E; + border: 1px solid #E41E1E; border-radius:10px; border-width: 2.5px; - font-weight: normal; - padding: 1vw 2vw; - font-size: max(2vw,16px); } .button a { text-decoration: none; + font-weight: normal; } .signup-btn { background-color: #E41E1E; color: #FDEFEF; +} + +@media (min-width: 850px) { + .navbarContainer { + justify-content: center; + } } \ No newline at end of file