changes to profile and explore sections, big push

LauraKapitza · Aug 12, 2021 · f7d7c9f · f7d7c9f
1 parent 12dcb75
commit f7d7c9f
Show file tree

Hide file tree

Showing 31 changed files with 712 additions and 320 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/app.js b/app.js
@@ -1,5 +1,3 @@
-
-const MONGODB_URI = process.env.MONGODB_URI || 'mongodb://localhost/olympi-server'
 require('dotenv').config();
 const bodyParser   = require('body-parser');
 const cookieParser = require('cookie-parser');
@@ -16,6 +14,7 @@ const MongoStore = require('connect-mongo');
 
 const app_name = require('./package.json').name;
 
+const MONGODB_URI = process.env.MONGODB_URI || 'mongodb://localhost/olympi-server'
 mongoose
 .connect(MONGODB_URI, {
   useNewUrlParser: true,
@@ -90,4 +89,4 @@ app.use((req, res, next) => {
 });
 
 
-module.exports = app;
+module.exports = app;
diff --git a/models/Videos-model.js b/models/Videos-model.js
@@ -22,6 +22,11 @@ const videoSchema = new Schema({
     type: Number,
     required: true
   },
+  votes: {
+    type: Number,
+    default: 0,
+    required: false
+  },
   weight_metric: {
     type: String,
     enum: {

diff --git a/olympi-client/package-lock.json b/olympi-client/package-lock.json
diff --git a/olympi-client/package.json b/olympi-client/package.json
@@ -10,8 +10,10 @@
     "@testing-library/user-event": "^12.8.3",
     "axios": "^0.21.1",
     "cloudinary-react": "^1.7.0",
+    "moment": "^2.29.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-modal": "^3.14.3",
     "react-router-dom": "^5.2.0",
     "react-router-hash-link": "^2.4.3",
     "react-scripts": "4.0.3",
@@ -21,7 +23,7 @@
     "web-vitals": "^1.1.2"
   },
   "scripts": {
-    "start": "REACT_APP_APIURL=http://localhost:5000 react-scripts start",
+    "start": "REACT_APP_APIURL=http://localhost:5000 PORT=3000 react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
@@ -43,5 +45,6 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "devDependencies": {}
 }
diff --git a/olympi-client/src/App.js b/olympi-client/src/App.js
@@ -9,7 +9,7 @@ import Feed from './components/feed/Feed.js';
 import authService from './components/auth/auth-service.js';
 import ProProfile from './components/Profile/proProfile.js';
 import UserProfile from './components/Profile/userProfile.js';
-import Trending from './components/Explore/Trending.js';
+import Explore from './components/Explore/Explore.js';
 import Terms from './components/home/OtherPages/Terms/Terms';
 import Team from './components/home/OtherPages/Team/Team';
 import TagDefinitions from './components/home/OtherPages/TagDefinitions/TagDefinitions';
@@ -69,16 +69,27 @@ class App extends Component {
             <Route exact path="/videos">
               {this.state.user ? <Feed updateUser={this.updateUser} user={this.state.user} /> : <Redirect to="/" user={this.state.user} />}
             </Route>
+
+            {/* go back an check this Karina */}
+            <Route exact path="/profile" render={(props) => (
+              this.state.user && <UserProfile user={this.state.user} />
+            )} />
 
             {/* 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">
+              {this.state.user?.professional ? <ProProfile user={this.state.user} /> : <UserProfile user={this.state.user} />}
+            </Route>
 
             {/* go back an check this Karina */}
             <Route exact path="/videos/explore" render={(props) => (
-              <Trending user={this.state.user} />
+              <Explore user={this.state.user} />
+            )} />
+            {/* <Route exact path="/explore/fails" render={(props) => (
+              <Fails user={this.state.user} />
             )} />
+            <Route exact path="/explore/learn" render={(props) => (
+              <Fails user={this.state.user} />
+            )} /> */}
 
             {/* go back an check this Karina */}
 

diff --git a/olympi-client/src/components/Explore/Explore.js b/olympi-client/src/components/Explore/Explore.js
@@ -0,0 +1,21 @@
+import React, { useState } from 'react'
+import ExploreBottomNavBar from './ExploreBottomNavBar/ExploreBottomNavBar'
+import Filters from './Filters/Filters'
+import SearchBar from './SearchBar/SearchBar'
+import ExploreVideos from './ExploreVideos/ExploreVideos'
+
+function Explore() {
+  const [tab, setTab] = useState('trending')
+  const [sortBy, changeSortBy] = useState('desc')
+  console.log({ tab })
+  return (
+    <div>
+      <SearchBar changeTab={setTab} tab={tab} />
+      <Filters changeSortBy={changeSortBy} />
+      <ExploreVideos category={tab} sortBy={sortBy} />
+      <ExploreBottomNavBar />
+    </div>
+  )
+}
+
+export default Explore
diff --git a/olympi-client/src/components/Explore/ExploreBottomNavBar/ExploreBottomNavBar.css b/olympi-client/src/components/Explore/ExploreBottomNavBar/ExploreBottomNavBar.css
@@ -1,4 +1,5 @@
 .ExploreBottomNavBarContainer{
+  z-index: 1;
   display: flex;
   height: 70px;
   background-color: #fafafa;

diff --git a/olympi-client/src/components/Explore/ExploreBottomNavBar/ExploreBottomNavBar.js b/olympi-client/src/components/Explore/ExploreBottomNavBar/ExploreBottomNavBar.js
@@ -1,32 +1,25 @@
-import "./ExploreBottomNavBar.css"
-import React from 'react'
 import SearchRoundedIcon from '@material-ui/icons/SearchRounded';
+import React from 'react';
+import { useHistory } from 'react-router-dom'
+import "./ExploreBottomNavBar.css";
 
 
 function ExploreBottomNavBar() {
+  const history = useHistory()
   return (
     <div className="ExploreBottomNavBarContainer">
-
-<div className="ExploreExploreNavButton"> 
-<SearchRoundedIcon/>
-<span>Explore</span>
-</div>
-
-<div className="ExploreFeedNavButton"> 
-<img src="/assets/icons/greydumbell.svg" alt=""></img>
-<span>Feed</span>
-</div>
-
-<div className="ExploreProfileNavButton"> 
-<img src="/assets/icons/greyuser.svg" alt=""></img>
-<span>Profile</span>
-</div>
-
-
-
-
-
-
+      <div className="ExploreExploreNavButton" onClick={() => history.push('/explore')}>
+        <SearchRoundedIcon />
+        <span>Explore</span>
+      </div>
+      <div className="ExploreFeedNavButton" onClick={() => history.push('/videos')}>
+        <img src="/assets/icons/greydumbell.svg" alt=""></img>
+        <span>Feed</span>
+      </div>
+      <div className="ExploreProfileNavButton" onClick={() => history.push('/user')}>
+        <img src="/assets/icons/greyuser.svg" alt=""></img>
+        <span>Profile</span>
+      </div>
     </div>
   )
 }

diff --git a/olympi-client/src/components/Explore/ExploreVideos/ExploreVideos.js b/olympi-client/src/components/Explore/ExploreVideos/ExploreVideos.js
@@ -1,42 +1,73 @@
-import React from "react";
 import MoreIcon from "@material-ui/icons/More";
+import moment from 'moment';
+import React, { useEffect, useState } from "react";
 import "./ExploreVideos.css";
+import axios from "axios"
+
+function ExploreVideos({ category, sortBy }) {
+  const [videos, setVideos] = useState(null)
+  const loadVideos = async () => {
+    const { data } = await axios.get(`http://localhost:5000/videos/explore`, {
+      params: {
+        category,
+        sortBy
+      }
+    }
+    )
+    setVideos(data);
+  }
+  useEffect(() => {
+    loadVideos()
+  }, [category, sortBy]);
+
+  const updateVotes = (video) => {
+    axios.post(`http://localhost:5000/videos/${video._id}/upvote`, {
+      votes: video.votes ? video.votes + 1 : 1,
+    })
+      .then(({ data }) => {
+        const updatedVideos = videos.map((video) => {
+          if (video._id === data._id) {
+            return data
+          }
+          return video
+        }
+        )
+        setVideos(updatedVideos)
+      })
+      .catch((e) => console.log("error", e))
+  }
 
-function ExploreVideos() {
   return (
     <div className="ExploreVideosContainer">
-      <div className="VideoSpace">
-        <div className="VideoTitle">username 10 May 2021</div>
-        <img src="https://via.placeholder.com/250" alt=""></img>
-        <div className="VidOptions">
-          <div>
-            <img src="/assets/icons/upvotefull.svg" alt=""></img>2.3k
-          </div>
-          <MoreIcon />
-        </div>
-
-        <div className="VideoTitle">username 10 May 2021</div>
-        <img src="https://via.placeholder.com/250" alt=""></img>
-        <div className="VidOptions">
-          <div>
-            <img src="/assets/icons/upvotefull.svg" alt=""></img>2.3k
-          </div>
-          <MoreIcon />
-        </div>
+      {
+        console.log("videos", videos)
 
-          <div className="VideoTitle">username 10 May 2021</div>
-          <img src="https://via.placeholder.com/250" alt=""></img>
-          <div className="VidOptions">
-            <div>
-              <img src="/assets/icons/upvotefull.svg" alt=""></img>2.3k
+      }
+      <div className="VideoSpace">
+        {videos && videos.map((video, index) => {
+          const { creator_id: creator } = video
+          return (
+            <div key={index}>
+              <div className="VideoTitle">{creator.username} {moment(video.createdAt).format('LLL')}</div>
+              <video width="320" height="240" controls>
+                <source src={video.videoUrl} type="video/mp4" />
+                <source src={video.videoUrl} type="video/ogg" />
+                Your browser does not support the video tag.
+              </video>
+              <div className="VidOptions">
+                <div onClick={() => updateVotes(video)}>
+                  <img src="/assets/icons/upvotefull.svg" alt="upvote" />{video.votes ? video.votes : 0}
+                </div>
+                <MoreIcon />
+              </div>
             </div>
-            <MoreIcon />
-          </div>
-        </div>
+          )
+        })}
       </div>
-
-
+    </div>
+
+
   );
 }
 
-export default ExploreVideos;
+export default ExploreVideos;
diff --git a/olympi-client/src/components/Explore/Fails.js b/olympi-client/src/components/Explore/Fails.js
@@ -1,10 +1,17 @@
 import React from 'react'
+import ExploreBottomNavBar from './ExploreBottomNavBar/ExploreBottomNavBar'
+import Filters from './Filters/Filters'
+import SearchBar from './SearchBar/SearchBar'
+import ExploreVideos from './ExploreVideos/ExploreVideos'
 
 function Fails() {
   return (
     <div>
-      this is where you will see funny fail videos
-    </div>
+    <SearchBar/>
+    <Filters/>
+    <ExploreVideos category={"fails"} />
+    <ExploreBottomNavBar/>
+  </div>
   )
 }
 

diff --git a/olympi-client/src/components/Explore/Filters/Filters.js b/olympi-client/src/components/Explore/Filters/Filters.js
@@ -1,22 +1,13 @@
 import React from 'react'
 import "./Filters.css"
-function Filters() {
+function Filters({changeSortBy}) {
   return (
     <div className="FiltersContainer">
-
-    <div className="FiltersTitle">Filer by : </div>
-
-    <div className="FilterBtns">
-    <button>All</button>
-    <button>Newest</button>
-    <button>Most Tagged</button>
-    <button>Exercise</button>
-
-
-    </div>
-
-
-
+      <div className="FiltersTitle">Sort By: </div>
+      <div className="FilterBtns">
+        <button onClick={() => changeSortBy('desc')}>Most Votes</button>
+        <button onClick={() => changeSortBy('asc')}>Less Votes</button>
+      </div>
     </div>
   )
 }