Explore page done

olympi-client/src/App.js

@@ -84,12 +84,6 @@ class App extends Component {
             <Route exact path="/videos/explore" render={(props) => (
               <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 */}
 

olympi-client/src/components/Explore/Explore.css

@@ -0,0 +1,111 @@
+.ExploreVideosContainer {
+ background-color: #ffffff;
+}
+
+.VideoSpace{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.VideoTitle{
+font-weight: 500;
+font-size: 11px;
+padding-right: 127px;
+padding-top: 5px;
+}
+
+.VidOptions{
+  width: 90%;
+padding: 10px;
+display: flex;
+justify-content: space-between;
+align-items: center;
+color: #E51B23;
+}
+
+.VidOptions img{
+padding-right: 8px;
+
+}
+
+
+
+
+
+
+
+.SearchBarContainer {
+  background-color: #fafafa;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  align-items: center;
+}
+
+.ExploreTitle {
+  color: #e41b23;
+  display: flex;
+  justify-content: space-between;
+  margin-left: 20px;
+  margin-right: 20px;
+  margin-top: 20px;
+  margin-bottom: 10px;
+  font-weight: 500;
+  font-size: 20px;
+  width: 85%;
+}
+
+.ExploreIcons {
+  display: flex;
+  width: 16%;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.ExploreIcons img {
+  width: 20px;
+}
+
+.SearchBoxContainer {
+  display: flex;
+  background-color: #ffffff;
+  align-items: center;
+  border-radius: 5px;
+  width: 90%;
+  font-size: 12px;
+  color: #b3b3b3;
+  padding: 10px;
+  margin-bottom: 10px;
+  box-shadow: -1px -1px 10px #b3b3b330;
+}
+
+.PagesContainer {
+  display: flex;
+  color: white;
+  width: 100%;
+  font-weight: 500;
+  text-align: center;
+}
+
+.Fails {
+  border-bottom: solid 2px #00000040;
+  color: #00000030;
+  flex: 1;
+}
+
+.Trending {
+  color: #00000030;
+  flex: 1;
+}
+.selected-tab {
+  border-bottom: solid 2px #e41b23;
+  color: #e41b23;
+}
+.tab-border {
+  border-bottom: solid 2px #00000040;
+}
+.Learn {
+  color: #00000030;
+  flex: 1;
+}

olympi-client/src/components/Explore/Explore.js

@@ -1,21 +1,99 @@
-import React, { useState } from 'react'
+import React, { useState } from 'react';
+import moment from 'moment';
 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>
-  )
+import SearchBar from './SearchBar/SearchBar';
+
+import MoreIcon from "@material-ui/icons/More";
+import feedService from '../feed/feed-service.js';
+import './Explore.css';
+
+class Explore extends React.Component {
+
+  state = {
+    videos: false,
+    categorySelected: 'trending',
+    changeSortBy: 'desc',
+  }
+
+  fetchVideos(category = this.state.categorySelected) {
+    feedService.getExploreVideos(category)
+    .then(data => {
+      console.log('front', data)
+      this.setState({videos: data})
+    })
+    .catch(err => this.setState({videos: false}))
+  }
+
+  // useEffect(() => {
+  //   loadVideos()
+  // }, [category, sortBy]);
+
+  updateVotes(video) {
+    feedService.updateVotes(video)
+      .then(data => {
+        console.log('voted video', data)
+        const updatedVideos = this.state.videos.map((video) => {
+          if (video._id === data._id) {
+            return data
+          }
+          return video
+        })
+        this.setState({videos: updatedVideos})
+      })
+      .catch((e) => console.log("error", e))
+  }
+
+  componentDidMount() {
+    this.fetchVideos()
+  }
+
+  render() {
+    return (
+      <div>
+
+        <div className="PagesContainer">
+          <div className={`Fails ${this.state.categorySelected === 'fails' ? 'selected-tab' : 'tab-border'}`} onClick={() => this.fetchVideos('fail')}>Fails</div>
+          <div className={`Trending ${this.state.categorySelected === 'trending' ? 'selected-tab' : 'tab-border'}`} onClick={() => this.fetchVideos("trending")}>Trending</div>
+          <div className={`Learn ${this.state.categorySelected === 'learn' ? 'selected-tab' : 'tab-border'}`} onClick={() => this.fetchVideos("learn")}>Learn</div>
+        </div>
+
+        <Filters changeSortBy={this.state.changeSortBy} />
+        {/* <ExploreVideos category={tab} sortBy={sortBy} /> better to do the map here */}
+        <ExploreBottomNavBar />
+
+
+        <div className="ExploreVideosContainer">
+        <div className="VideoSpace">
+          {this.state.videos && this.state.videos.map((video, index) => {
+            const { creator_id: creator } = video
+            return (
+              <div key={video._id}>
+                <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={() => this.updateVotes(video)}>
+                    <img src="/assets/icons/upvotefull.svg" alt="upvote" />{video.votes ? video.votes : 0}
+                  </div>
+                  <MoreIcon />
+                </div>
+              </div>
+            )
+          })}
+        </div>
+
+        <ExploreBottomNavBar />
+
+      </div>
+
+
+      </div>
+    )
+  }
 }
 
-export default Explore
+export default Explore;