video upload done & add tag react component with code && add css && i…

…mprove backend for receiving data from server
LauraKapitza · Aug 7, 2021 · 900d5f9 · 900d5f9
1 parent 95cc314
commit 900d5f9
Show file tree

Hide file tree

Showing 26 changed files with 1,014 additions and 101 deletions.
diff --git a/app.js b/app.js
@@ -16,7 +16,6 @@ const MongoStore = require('connect-mongo');
 
 const app_name = require('./package.json').name;
 
-console.log(MONGODB_URI)
 mongoose
 .connect(MONGODB_URI, {
   useNewUrlParser: true,

diff --git a/olympi-client/public/index.html b/olympi-client/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" type="image/svg+xml" href="%PUBLIC_URL%/assets/logos/OlympiLogoSVG.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta
       name="description"

diff --git a/olympi-client/src/App.js b/olympi-client/src/App.js
@@ -35,7 +35,6 @@ class App extends Component {
         })
         .catch(err => {
           this.setState({user: false})
-          console.log(this.state.user)
         });
     } else {
       console.log('user already in the state')

diff --git a/olympi-client/src/components/Explore/ExploreBottomNavBar/ExploreBottomNavBar.css b/olympi-client/src/components/Explore/ExploreBottomNavBar/ExploreBottomNavBar.css
@@ -3,7 +3,8 @@
   height: 70px;
   background-color: #fafafa;
   bottom: 0px;
-  position: sticky;
+  position: fixed;
+  width: 100%;
 
   box-shadow: 0 -5px 3px -3px #ccc, 0 0;
 

diff --git a/olympi-client/src/components/Notifications/Notifications.js b/olympi-client/src/components/Notifications/Notifications.js
@@ -12,7 +12,7 @@ function Notifications() {
 
     <div className="PictureTopContainer">
     <div className="arrow"><ArrowBackRoundedIcon/></div><div className="PictureTopTitle">  Settings</div>
-    <img src="/assets/icons/noprofilephoto.svg"></img>
+    <img src="/assets/icons/noprofilephoto.svg" alt="no profile"></img>
     <div className="UsersName">Karina Gonzalez</div>
     <div className="UsersCity">Paris, France 🇫🇷</div>
 
@@ -41,7 +41,7 @@ function Notifications() {
 
             <div className="LogoutTitle">
             Logout
-            <div className="Setbtn Door"><img src="/assets/icons/logoutbtn.svg"></img></div>
+            <div className="Setbtn Door"><img src="/assets/icons/logoutbtn.svg" alt="logout"></img></div>
 
             </div>
 

diff --git a/olympi-client/src/components/feed/Feed.css b/olympi-client/src/components/feed/Feed.css
@@ -6,11 +6,26 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  height: 20vh;
+  padding: 20px 20px;
 }
 
 .Feed-header span {color: #E41E1E;}
 
+.Feed-header .feed-header-actions{
+  display: flex;
+}
+
+.Feed-header .upload-button{
+  position: relative;
+  background: none;
+  border: none;
+  padding: 0;
+  margin-right: 10px;
+}
+
+.Feed-header .upload-button img{
+  display: block;
+}
 
 
 
@@ -20,29 +35,10 @@
 
 .Feed {
   margin: 0 auto;
+  padding-bottom: 90px;
 }
 
-.Feed li {
-  list-style-type: none;
-}
-
-.Feed video {
-  width:320px; max-height: 400px;
-  display: block;
+.Feed-list-container{
+  background-color: white;
+  padding: 20px 20px;
 }
-
-.Feed .play-btn {
-  opacity: 1;
-  background-size: 271px 149px;
-  background-position: 0 0;
-  background-image: url(../../assets/playBtn.png);
-  display: block;
-  position: absolute;
-  height: 135px;
-  left: 50%;
-  margin-left: -67px;
-  margin-top: -67px;
-  top: 50%;
-  width: 135px;
-
-}
diff --git a/olympi-client/src/components/feed/Feed.js b/olympi-client/src/components/feed/Feed.js
@@ -21,18 +21,24 @@ class Feed extends React.Component {
   componentDidMount() {
     this.fetchVideos();
   }
+
+  addVideo = (video) => {
+    this.setState(prevState => ({
+      videos: [...prevState.videos, video]
+    }))
+    console.log("state feed", this.state)
+  }
 
   render() {
-    console.log(this.state.user)
     return(
       <div className="Feed">
-        <FeedHeader updateUser={this.props.updateUser} user={this.props.user} />
-
-        {this.state.videos.map((video, index) => (
-          <li key={video._id}>
-            <VideoPost video={video}/>
-          </li>
-        ))}
+        <FeedHeader updateUser={this.props.updateUser} user={this.props.user} addVideo={this.addVideo} />
+        
+        <div className="Feed-list-container">
+          {this.state.videos.map((video, index) => (
+              <VideoPost key={index} video={video}/>
+          ))}
+        </div>
 
         <FeedFooter user={this.props.user} />
       </div>

diff --git a/olympi-client/src/components/feed/FeedHeader.js b/olympi-client/src/components/feed/FeedHeader.js
@@ -1,6 +1,7 @@
 import {Redirect} from 'react-router-dom';
 import React from 'react';
 import './Feed.css';
+import upload_icon from './icons/add-button.svg'
 
 import authService from '../auth/auth-service.js';
 import VideoUpload from './Videopost/VideoUpload.js';
@@ -26,16 +27,18 @@ export default class FeedHeader extends React.Component {
     if (this.props.user === false) return <Redirect to="/" />
     return(
       <div className="Feed-header">
-      <header>
-        <h2>Hi <span>{this.props.user.username}</span>!</h2>
-        <p>Which exercise are you sharing today?</p>
-      </header>
+        <header>
+          <h2>Hi <span>{this.props.user.username}</span>!</h2>
+          <p>Which exercise are you sharing today?</p>
+        </header>
 
-      <nav>
-        {this.state.uploadOpen && <VideoUpload toggle={this.toggle} />}
-        <button onClick={this.toggle}>Upload</button>
-        <button className="" onClick={this.logout}>Logout</button>
-      </nav>
+        <nav className="feed-header-actions">
+
+          <button className="upload-button" onClick={this.toggle}><img src={upload_icon} alt="Upload button"></img></button>
+          <button className="" onClick={this.logout}>Logout</button>
+        </nav>
+
+        {this.state.uploadOpen && <VideoUpload toggle={this.toggle} addVideo={this.props.addVideo} />}
 
       </div>
     )

diff --git a/olympi-client/src/components/feed/Videopost/Comment.js b/olympi-client/src/components/feed/Videopost/Comment.js
diff --git a/olympi-client/src/components/feed/Videopost/Comments.css b/olympi-client/src/components/feed/Videopost/Comments.css
@@ -0,0 +1,27 @@
+/* ---- Comments ----- */
+
+.comments-wrapper{
+  position: relative;
+  margin-bottom: 20px;
+}
+
+.comments-wrapper .comment{
+  background-color: #FDEFEF;
+  border-radius: 10px;
+  padding: 10px;
+}
+
+.comments-wrapper .comment h4{
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.37);
+}
+.comments-wrapper .comment p{
+  font-size: 13px;
+  color: rgba(0, 0, 0, 0.603);
+  display: inline;
+}
+.comments-wrapper .comment h5{
+  color: #0000ff79;
+  display: inline;
+  margin-right: 3px;
+}
diff --git a/olympi-client/src/components/feed/Videopost/Comments.js b/olympi-client/src/components/feed/Videopost/Comments.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import './Comments.css';
+
+class Comments extends React.Component {
+  render() {
+    return (
+      <div className="comments-wrapper">
+        {this.props.comments.map((comment, index) => {
+          return (
+            <div key={index} className="comment">
+              <h4>@{comment.author_id}</h4>
+              <h5>@{comment.to_id}</h5><p>{comment.question}</p>
+            </div>
+          )
+        })}
+      </div>
+    )
+  }
+};
+
+export default Comments;