<repo_name>Netabutensky/Vlogy-Project<file_sep>/vlogy-front-end/src/App.js
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import axios from 'axios';
import './App.css';
import Landing from './Components/Landing';

class App extends Component {
  constructor() {
    super()
    this.state = {
      MovieData: [],
      data: [],
      UserData: {},
      allData: []
    }
  }

  updateUser = (data) =>{
    // console.log(data)
    axios.put('http://localhost:5000/updateUser', data)
      .then( (response) => {
        console.log(response)
        this.myData()
      })
}




  myData = async () => {
    let data = await axios.get('http://localhost:5000/users')
    let allData = data.data
    this.setState({
      allData
    })
  }


  newUser = async (user) => {
    axios.post('http://localhost:5000/newUser', user)
    this.myData()
    console.log(this.state.data)
  }

  UserExict = async(login) => {
    let res = await axios.get(`http://localhost:5000/username/${login.username}/password/${login.password}`)
      if (res.data[0] === undefined) {
        console.log('User not found')

      } else {
        let UserData = res.data[0]
        localStorage.setItem("username", UserData.username)
        localStorage.setItem("password", <PASSWORD>)
        this.setState({
          UserData
        }, function () {
          console.log(this.state.UserData)
        })
        
      }
    return res.data[0]
  }

componentDidMount = async () => {
    this.myData()
}

  deleteuser=()=>{
    this.setState({
        UserData:{}
    })}

  
  render() {
    
    return (
      <Router>
        <div className="App" >      
        <Landing updateUser={this.updateUser}  allData={this.state.allData} newUser={this.newUser} deleteuser={this.deleteuser} UserData={this.state.UserData} UserExict={this.UserExict} newUser={this.newUser} />
      </div>
      </Router>
    ); 
  }
}

export default App;
<file_sep>/vlogy-front-end/src/Components/UserSearch.js
import React, { Component } from 'react'
import axios from 'axios'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import UserPage from './UserPage';

class UserSearch extends Component {
    constructor(props) {
        super(props)
        this.state = {
            comment: '',
            follow: this.chekFollowStatus(),

        }

    }

    chekFollowStatus = async() =>{
        let username = localStorage.getItem("username")
        let password = <PASSWORD>("password")
        let user = await axios.get(`http://localhost:5000/username/${username}/password/${password}`)
        let i = this.props.followers.findIndex(d => d == user.data[0]._id)
        if(this.props.followers.findIndex(d => d == user.data[0]._id) > -1){
            this.setState({
                follow : true
            })
        }
        else{
            this.setState({
            follow : false  
          })
        }
        return true
    }
    componentDidMount = () =>{
        this.chekFollowStatus()
    }
    followbutton = (f) => {
       
        if (this.state.follow == true) {
            alert('UNFRIENDED')
            this.setState({
                follow: !this.state.follow
            })

        } else {
            this.setState({
                follow: !this.state.follow
            })
        }
        let data ={
            follwer: localStorage.getItem("username"), 
            user: this.props.username
        }
        this.props.follow(data)
    }


    render() {
        console.log(this.props.followers)
        console.log(this.props.following)

        let urls = `/user/${this.props.username}`

        // console.log(this.props.allData.filter(u => u.username == localStorage.getItem("username")).map(p => p.profilePic))

        return (


            <div>


                <div class="card">
                    
                    <div class="container">
                        <h4><b>{this.props.username}</b></h4>
                        {this.state.follow ? <div onClick={this.followbutton}><i class="fas fa-user-minus"></i>

                        </div> : <div value={this.props.username} onClick={this.followbutton} > <i class="fas fa-user-plus"></i>

                            </div>}
                        {this.props.allData.filter(u => u.username == this.props.username).map(f => f.profilePic === undefined ?
                            <div> {this.props.username === localStorage.getItem("username") ?
                                <a href='/userprofile' ><i class="fas fa-user-alt"> </i> </a> :
                                <a href={urls} ><i class="fas fa-user-alt"> </i> </a>}</div> :
                            <div> {this.props.username === localStorage.getItem("username") ?
                                <a href='/userprofile'> <img className="usernameimg" src={f.profilePic} /> </a> :
                                <a href={urls}> <img className="usernameimg" src={f.profilePic} /> </a>}</div>
                        )}
                        <p>following:{this.props.following.length}</p>
                        <p>followers:{this.props.followers.length}</p>
                    </div>
                </div>
            </div>
        )
    }
}

export default UserSearch<file_sep>/vlogy-front-end/src/Components/FeedComment.js
import React, { Component } from 'react';

class FeedComment extends Component {

    delete = () => {
        let data = {
            username: this.props.vid.user.username,
            videoId: this.props.vid.id,
            comment: this.props.c
        }
        // console.log(data)
        this.props.deleteComment(data)
    }
    render() {
        let comment = this.props.c
        return (<div >
            <span>  <div class="dialogbox">

                <div class="body">
                {localStorage.getItem("username") === comment.user ? <span onClick={this.delete}><i class="fas fa-trash"></i></span>:null}
                    <span class="tip tip-left"></span>
                    {localStorage.getItem("username") === comment.user ? <h6>Me:</h6> : <h6>{comment.user}:</h6>}

                    {/* <div onClick={this.delete}><i class="fas fa-trash-alt"></i></div> */}
                    <div class="message">
                        <span>{comment.text}</span>
                    </div>

                </div>

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

export default FeedComment<file_sep>/vlogy-back-end/server.js
const express = require('express');
const bodyParser = require('body-parser');
const methodOverride = require('method-override');
const router = require('./Routes/Router')
const app = express();

// Middleware
app.use(bodyParser.json());
app.use(methodOverride('_method'));
app.use(function (req, res, next) {
  res.header('Access-Control-Allow-Origin', '*')
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS')
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With')

  next()
})
app.use('/', router)


const port = 5000;

app.listen(port, () => console.log(`Server started on port ${port}`));<file_sep>/vlogy-front-end/src/Components/Feed.js
import React, { Component } from 'react'
import App from '../App'
import axios from 'axios'
import FeedVideo from './FeedVideo'
import { Link } from 'react-router-dom';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Draggable, { DraggableCore } from 'react-draggable';
import GridFeed from './GridFeed'
import Feedsecond from './Feedsecond';



class Feed extends Component {
    constructor() {
        super()
        this.state = {
            file: React.createRef(),
            data: [],
            UserData: {},
            showupload: false
        }
    }

    handleUploadFile = () => {
        const data = new FormData();
        let username = localStorage.getItem("username")
        data.append('file', this.state.file.current.files[0]);
        axios.post('http://localhost:5000/upload', data).then((response) => {
            axios({
                method: 'put',
                url: 'http://localhost:5000/uploadVideo',
                data: {
                    filename: response.data,
                    username: username
                }
            }).then((response) => {
                this.getFeed()
                this.setState({
                    showupload: false,
                    file: React.createRef()
                })

            })
        })
    }

    exit = () => {
        alert(`${localStorage.getItem("username")} you are Loging-Out`)
        localStorage.clear()
    }


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

    getFeed = async () => {
        let videos = await axios.get('http://localhost:5000/feed')
        console.log(videos)
        let feed = videos.data.filter(o => o.user.username !== localStorage.getItem("username"))
        this.setState({ data: feed })
    }

    componentDidMount = async () => {
        this.getFeed()
    }

    handleinput = (e) => {
        this.setState({ file: e.target.value })
    }


    comment = (data) => {
        axios.put('http://localhost:5000/addComment', data)
            .then((response) => {
                console.log(response)
                this.getFeed()
            })
    }

    deleteComment = (data) => {
        axios({
            method: 'delete',
            url: 'http://localhost:5000/comment',
            data: data
        }).then((response) => {
            this.getFeed()
        })
    }

    likeVid = (data) => {
        axios.put('http://localhost:5000/like', data)
            .then((response) => {
                this.getFeed()
            })
    }


    scrolltop=()=>{
        window.scrollTo(0, 0)
    }

    render() {
        let scroll=this.scrolltop
        return (
            <Router>
                <div className='feed'>
                   
                    <span className="myfeed">Feed</span>

                    <div className="grid"> <a href='/gridfeed' ><i class="fas fa-th-large"></i></a></div>

                    <a href='/' >
                        <div onClick={this.exit} className="logOut"><i class="fas fa-walking"></i>
                            <i class="fas fa-door-open"></i>
                        </div>
                    </a>

                    <div className='input'>

                    <div className="scrolltop" onClick={scroll} ><i class="fas fa-angle-double-up"></i></div>


                        {this.state.showupload ?
                            <div><div onClick={this.showupload} >  <li class="fas fa-video"></li></div>

                                <Draggable>
                                    <div className="uploadcontainer2">
                                        <input className="inputupload" type='file' ref={this.state.file} />
                                        <button className="uploadbutton" onClick={this.handleUploadFile} >upload</button>
                                    </div></Draggable> </div> :
                            <div onClick={this.showupload} ><li class="fas fa-video"></li></div>}
                        <div>
                            {this.state.data.map(v => <FeedVideo users={v.likes.users} deleteComment={this.deleteComment} likeVid={this.likeVid} vid={v} UserData={this.state.UserData} date={v.user.uploads[0].date[0]} comment={this.comment} />)}
                        </div>

                    </div>

                </div>

            </Router>
        )
    }

}
export default Feed;
<file_sep>/vlogy-front-end/src/Components/Landing.js
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import Login from './Login';
import Signup from './Signup'
import { BrowserRouter as Router, Route } from 'react-router-dom';
import UserProfile from './UserProfile';
import UserSearch from './UserSearch';
import Feed from './Feed'
import UserPage from './UserPage';
import GridFeed from './GridFeed';
import axios from 'axios';
import Feedsecond from './Feedsecond'


class Landing extends Component {
    constructor() {
        super()
        this.state = {
            searchPut: '',
            allData: []
        }
    }
   
    myData = async () => {
        let data = await axios.get('http://localhost:5000/users')
        let allData = data.data
        this.setState({
          allData
        })
      }
      componentDidMount = () =>{
          this.myData()
      }

    followUser = (data) =>{
        axios({
            method: 'put',
            url: 'http://localhost:5000/follow',
            data: {
              user: data.user,
              follwer: data.follwer
            }
          }).then((res) => {
            this.myData()
          })
    }
    searchPutChange = (event) => {
        const input = event.target.value
        this.setState({
            searchPut: input,
        })

    }

   


    render() {
        let userPic = this.props.allData.filter(u => u.username == localStorage.getItem("username")).map(p => p.profilePic)
        let data = this.state.allData
        let searchdata = data.filter(r => r.username.toLowerCase().includes(this.state.searchPut))

        return (

            <div >

                <div>

                    <ul>
                    
                    {localStorage.getItem("username") === 'undefined'? <li><div><a class="fas fa-home" href="/"></a></div></li>:<li><a class="fas fa-home" href="/feed"></a></li>}
                        {localStorage.getItem("username") === 'undefined'? null:<li><a href="/userprofile"><img className="usernameimg4" src={userPic} /></a></li>}
                        
                        {localStorage.getItem("username") === 'undefined' ? null :  <a href="/usersearch"><button className="inputcon" type="submit"><i class="fa fa-search"></i></button></a>}

                        {localStorage.getItem("username") === 'undefined' ? null  :  <input value={this.state.searchPut} onChange={this.searchPutChange} className="searchcontainer" type="text" placeholder="Search.." name="search" />}
                        <div className="vlogy">Vlogy</div>
                        
                       
                    </ul>

                </div>
               


                <Router>


                    <Route path="/feed" exact render={() => <Feed />} />
                    <Route path="/" exact render={() => <Login UserData={this.props.UserData} UserExict={this.props.UserExict} />} />
                    <Route path="/signup" exact render={() => <Signup newUser={this.props.newUser} />} />
                    <Route path="/gridfeed" exact render={() => <Feedsecond />}/>
                    <Route path="/usersearch" exact render={() =>
                        this.state.searchPut === '' ?
                            data.map(r => <UserSearch follow ={this.followUser} allData={this.state.allData} username={r.username} following={r.following} followers={r.followers} />) :
                            searchdata.map(r => <UserSearch follow ={this.followUser} updateUser={this.props.updateUser} allData={this.state.allData} username={r.username} following={r.following} followers={r.followers} />)
                    } />

                    <Route path='/userprofile' exact render={() => <UserProfile updateUser={this.props.updateUser} allData={this.state.allData} updateprofile={this.props.updateprofile} deleteuser={this.props.deleteuser} UserExict={this.props.UserExict} UserData={this.props.UserData} />} />
                    <Route path='/user/:username' exact render={({ match }) => <UserPage updateUser={this.props.updateUser} match={match} UserData={this.props.UserData} />} />
                </Router>

            </div>


        )
    }
}

export default Landing

<file_sep>/vlogy-front-end/src/Components/Feedsecond.js
import React, { Component } from 'react'
import App from '../App'
import axios from 'axios'
import FeedVideo from './FeedVideo'
import { Link } from 'react-router-dom';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Draggable, { DraggableCore } from 'react-draggable';
import GridFeed from './GridFeed';
import InfiniteScroll from 'react-infinite-scroller';



class Feed extends Component {
    constructor() {
        super()
        this.state = {
            data: []
        }
    }
    getFeed = async () => {
        let videos = await axios.get('http://localhost:5000/feed')
        let feed = videos.data.filter(o => o.user.username !== localStorage.getItem("username"))
        console.log(feed)
        this.setState({ data: feed })

    }
    componentDidMount = async () => {
        this.getFeed()
    }

    render() {

        return (
            <div>
                <div className='feed'>
                    <span className="myfeed">Feed</span>
                    <div className="grid"> <a href='/feed' ><i class="fas fa-th-large"></i></a></div>

                </div>
                {/* <InfiniteScroll
                    pageStart={2}
                    loadMore= {this.state.data.map(v => <GridFeed deleteComment={this.deleteComment} likeVid={this.likeVid} vid={v} UserData={this.state.UserData} date={v.user.uploads[0].date[0]} comment={this.comment} />)}
                    hasMore={true || false}
                    loader={<div className="loader" key={3}>Loading ...</div>}
                >
                    {this.state.data.map(v => <GridFeed deleteComment={this.deleteComment} likeVid={this.likeVid} vid={v} UserData={this.state.UserData} date={v.user.uploads[0].date[0]} comment={this.comment} />)}
                </InfiniteScroll> */}
                {this.state.data.map(v => <GridFeed deleteComment={this.deleteComment} likeVid={this.likeVid} vid={v} UserData={this.state.UserData} date={v.user.uploads[0].date[0]} comment={this.comment} />)}
            </div>

        )
    }

}
export default Feed;
<file_sep>/vlogy-front-end/src/Components/UserPage.js

import React, { Component } from 'react'
import axios from 'axios'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import VideoUserP from './VideoUserP'
import Feed from './Feed';
import FeedVideo from './FeedVideo'


class UserPage extends Component {
    constructor() {
        super()
        this.state = {
            userdata: {}
        }
    }



    getUser = async () => {
        let username = this.props.match.params.username
        let res = await axios.get(`http://localhost:5000/user/${username}`)
        this.setState({
            userdata: res.data
        })
    }

    componentDidMount = async () => {
        this.getUser()
    }

    likeVid = (data) =>{
        axios.put('http://localhost:5000/like', data)
      .then( (response) => {
        this.getUser()
      })
    }
    comment = (data) => {
        console.log(data)
        axios.put('http://localhost:5000/addComment', data)
            .then((response) => {
                console.log(response)
                this.getUser()
            })
        }

    deleteComment = (data) =>{
            axios({
                method: 'delete',
                url: 'http://localhost:5000/comment',
                data: data
                }).then((response) => {
                this.getUser()
                })
    }    

    deleteuser = () => {
        localStorage.username = { 'username': localStorage.getItem("username") };
        localStorage.username = undefined
    }


    render() {
        return (
            <div className='userprofile'>

                <div>


                    <div className='usernameprofile'> <img className="usernameimg" src={this.state.userdata.profilePic} /> <div >   </div>



                        <a href='/' > <div onClick={this.deleteuser} className="logOut"><i class="fas fa-walking"></i>
                            <i class="fas fa-door-open"></i>

                        </div></a>
                        <form >

                            <label for="fname">About {this.state.userdata.username}</label>
                            <div type="text" className="aboutmyself" name="fname" >{this.state.userdata.about} </div>

                        </form>

                        <div >
                            {!this.state.userdata.uploads ? null : this.state.userdata.uploads.map(d =><div className="vidcontainer"  >
                             <VideoUserP deleteComment={this.deleteComment} data={this.state.userdata.uploads} comment ={this.comment} likeVid={this.likeVid} d={d} username={this.state.userdata.username} />
                           </div> )}

                        </div>

                    </div>
                </div>
            </div>


        )
    }
}

export default UserPage<file_sep>/vlogy-back-end/Routes/CreateFeed.js
const timeSort = function(vidosarr1, vidosarr2){
    let i = 0
    let newArr = []
    while(i < vidosarr1.length || i < vidosarr2.length){
        if(vidosarr1[i] === undefined && vidosarr2[i] !== undefined){
            newArr.push(vidosarr2[i])
        }
        else if(vidosarr2[i] == undefined && vidosarr2[i] !== undefined){
            newArr.push(vidosarr2[i])
        }
        else{
            vidosarr1[i].date > vidosarr2[i].date ? newArr.push(vidosarr1[i]) : newArr.push(vidosarr2[i])
            vidosarr1[i].date < vidosarr2[i].date ? newArr.push(vidosarr1[i]) : newArr.push(vidosarr2[i])
        }
    }
    return newArr
}

const likeSort = function(vidosarr){
    let likeArr = []
    for(let vid of vidosarr){
        likeArr.push(vid.likes)
    }
    likeArr.sort(function(a, b){return b - a})
    let newArr = []
    for(let i = 0; i < likeArr.length; i++){
        for(let vid of vidosarr){
            if(vid.likes == likeArr[i])
            newArr.push(vid)
            break
        }
    }
    return newArr
}

const createFeed = function(vidosarr1, vidosarr2){
    let sortedByDate = timeSort(vidosarr1, vidosarr2)
    let lastday = new Date(), lastweek = new Date(), lastmonth = new Date()
    lastday.setDate(lastday.getDate()-1)
    lastweek.setDate(lastday.getDate() -7)
    lastmonth.setMonth(lastday.getMonth() -1)
    let lastDayVideos = []
    let lastWeekVideos = []
    let lastMonthVideos = []
    let others = []
    for(let vid of sortedByDate){
        if(vid.date > lastday){
            lastDayVideos.push(vid)
        }
        else if(vid.date > lastweek){
            lastWeekVideos.push(vid)
        }
        else if(vid.date > lastmonth){
            lastMonthVideos.push(vid)
        }
        else{
            others.push(vid)
        }

    }
    let Feed = []
    Feed.concat(likeSort(lastDayVideos))
    Feed.concat(likeSort(lastWeekVideos))
    Feed.concat(likeSort(lastMonthVideos))
    Feed.concat(likeSort(others))
    return Feed
}


module.exports = createFeed<file_sep>/vlogy-front-end/src/Components/UserProfile.js
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import axios from 'axios';
import feed from './Feed'
import Login from './Login';
import Video from './Video';


class UserProfile extends Component {
    constructor() {
        super()
        this.state = {
            username: '',
            password: '',
            about: '',
            showlogout: false,
            UserData: {uploads : []},
            img: '',
            editimg: false,
            editingtwo: false,
            file: React.createRef(),
            showupload: false,
            edit:false
        }
    }

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

    updateUser = () => {
        let datas = this.props.updateUser({ data: this.state.img, prop: 'profilePic', username: localStorage.getItem("username") })
        console.log(datas)
    }

    updateabout = () => {
        let datas = this.props.updateUser({ data: this.state.about, prop: 'about', username: localStorage.getItem("username") })
        console.log(datas)
    }


    handleeditimg = () => {
        this.setState({
            img: '',
            editimg: !this.state.editimg,
        })
    }

    handleeditimgtwo = () => {
        this.setState({
            editingtwo: !this.state.editingtwo,
        })
    }

    showupload = () => {
        this.setState({
            showupload: !this.state.showupload,
        })
    }

    handleUserName = (u) => {
        let username = u.target.value
        this.setState({
            username
        })
    }

    handleimg = (u) => {
        let img = u.target.value
        this.setState({
            img
        }, function () {
            this.updateUser()
        })
    }

    handleshow = () => {
        this.setState({
            showlogout: !this.state.showlogout
        })
    }

    handlePassword = (p) => {
        let password = p.target.value
        this.setState({
            password
        })
    }

    UserExict = async () => {
        let UserData = await this.props.UserExict({ username: this.state.username, password: <PASSWORD> })
        console.log('hello')
        console.log(UserData)
    }

    handleAbout = (v) => {
        let about = v.target.value
        this.setState({
            about
        }, function () {
            this.updateabout()
        })

    }
    
    exit = () => {
        alert(`${localStorage.getItem("username")} you are Loging-Out`)
        localStorage.clear()
        this.deleteuser()
    }

    getUser = async () => {
        let username = localStorage.getItem('username')
        let password = localStorage.getItem('password')
        let user = await axios.get(`http://localhost:5000/username/${username}/password/${password}`)
        this.setState({ UserData: user.data[0] })
    }

    deleteVideo = (videoId) => {
        let username = localStorage.getItem("username")
        axios({
            method: 'delete',
            url: `http://localhost:5000/files/${videoId}/${username}`,
        }).then((response) => {
            console.log(response)
            this.getUser()

        })
    }

    componentDidMount = () => {
        this.getUser()
    }

    handleUploadFile = () => {
        const data = new FormData();
        let username = localStorage.getItem("username")
        data.append('file', this.state.file.current.files[0]);
        axios.post('http://localhost:5000/upload', data).then((response) => {
            axios({
                method: 'put',
                url: 'http://localhost:5000/uploadVideo',
                data: {
                    filename: response.data,
                    username: username
                }
            }).then((response) => {
                this.setState({
                    file: React.createRef(),
                    showupload: false
                })
                this.getUser()
            })
        })
    }

    deleteuser = () => {
        localStorage.username = { 'username': localStorage.getItem("username") };
        localStorage.username = undefined
    }
    likeVid = (data) =>{
        axios.put('http://localhost:5000/like', data)
      .then( (response) => {
        this.getUser()
      })
    }
    comment = (data) => {
        axios.put('http://localhost:5000/addComment', data)
            .then((response) => {
                console.log(response)
                this.getUser()
            })
    }
    deleteComment = (data) =>{
        axios({
            method: 'delete',
            url: 'http://localhost:5000/comment',
            data: data
            }).then((response) => {
            this.getUser()
            })
        }


    render() {
        // console.log(this.props.allData.filter(u => u.username == localStorage.getItem("username")).map(r => r.about))
        let userPic = this.props.allData.filter(u => u.username == localStorage.getItem("username")).map(p => p.profilePic)
        console.log(userPic)
        // console.log(this.props.allData.filter(u => u.username == localStorage.getItem("username")).map(p => p.following)[0])
        return (

            < Router >
                <div className='userprofile'>

                    <div>

                        {this.props.allData.filter(u => u.username == localStorage.getItem("username")).map(p => p.profilePic)[0] === undefined ?
                            <div><input className="imginput" value={this.state.img} onChange={this.handleimg} placeholder="put image url" /> <div className='usernameprofile'> <i class="fas fa-user-alt"> </i>
                                {localStorage.getItem("username")}</div> </div>
                            :
                            <div className='usernameprofile'> <img className="usernameimg" src={userPic} /> <div onClick={this.handleeditimg} ><i class="fas fa-user-edit"></i></div>  {localStorage.getItem("username")}  </div>}
                        <div>{this.state.editimg ? <input className="imginput" value={this.state.img} onChange={this.handleimg} placeholder="put image url" /> : null}</div>
                        <div onClick={this.edit}><i class="far fa-edit"></i></div> 

                        {/* {this.props.allData.filter(u => u.username == localStorage.getItem("username")).map(f => <div className="followersprofile"><div>Following: {f.following} </div><div>Followers: {f.followers}</div></div>)} */}


                        <a href='/' > <div onClick={this.deleteuser} className="logOut"><i class="fas fa-walking"></i>
                            <i class="fas fa-door-open"></i>
                        </div></a>

                        {this.state.showupload ?
                            <div><div onClick={this.showupload} ><li class="fas fa-video"></li></div>
                                <div className="uploadcontainer2">
                                    <input className="inputupload" type='file' ref={this.state.file} />
                                    <button className="uploadbutton" onClick={this.handleUploadFile} >upload</button>
                                </div></div> :
                            <div onClick={this.showupload} ><li class="fas fa-video"></li></div>}

                        <form >
                            <label for="fname">About MySelf</label>
                            {this.props.allData.filter(u => u.username == localStorage.getItem("username")).map(r => r.about) === undefined || this.state.editingtwo ? <input value={this.props.UserData.about} onChange={this.handleAbout} type="text" className="aboutmyself" name="fname" /> :
                            <div type="text" className="aboutmyself" name="fname">{this.props.allData.filter(u => u.username == localStorage.getItem("username")).map(r => r.about)}<span> {this.state.edit?<i onClick={this.handleeditimgtwo} className="fas fa-pencil-alt"></i>:null} </span></div> }



                        </form>

                        <div>
                      


                            {this.state.UserData.uploads.map(d =>
                            this.state.edit?
                                <div className="video-container">
                                    <div onClick={this.deleteVideo}><i class="fas fa-trash"></i>
                                    </div>
                                    
                                    <Video likeVid={this.likeVid} userdata={this.state.UserData} d={d} deleteComment={this.deleteComment} comment={this.comment} />
                                    
                                </div>:
                                 <div className="video-container">
                                 <Video likeVid={this.likeVid} userdata={this.state.UserData} d={d} deleteComment={this.deleteComment} comment={this.comment} />
                             </div>
                            
                            )}

                        </div>
                    </div>
                </div>
            </Router >
        );
    }


}
export default UserProfile;
<file_sep>/vlogy-front-end/src/Components/VideoUserP.js
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import CommentPage from './CommentPage';
import axios from 'axios';

class VideoUserP extends Component {
    constructor() {
        super()
        this.state = {
            like: 0,
            likes: false,
            timeclick: 0,
            comment: "",
            showcomments: false,
            red: false
        }
    }

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

    }


    postLike = () => {
        if (this.state.like == 0) {

            this.setState({
                likes: true,
                like: this.props.d.likes + 1,


            }, function () {
                this.updatelikes()
            })
        }
        else if (this.state.like < 2) {
            this.setState({
                like: this.props.d.like == 0
            })
        }
        else if (this.state.like > 1) {
            this.setState({
                likes: true,
                like: this.props.d.likes - 1,


            }, function () {
                this.updatelikes()
            })
        }

    }
    updateUserVideo = (data) => {
        axios.put('http://localhost:5000/like', data)
        //   .then( (response) => {
        //     this.myData()
        //   })
    }


    like = () => {
        let vid = this.props.d
        let data = {
            username: localStorage.getItem("username"),
            videoId: vid.videoId,
            uploader: this.props.username
        }
        this.props.likeVid(data)
        this.setState({
            red: !this.state.red
        })
    }

    handleInput = (e) => {
        this.setState({
            comment: e.target.value,


        })
    }

    commentfunction = () => {
        let data = {
            username: localStorage.getItem("username"),
            videoId: this.props.d.videoId,
            comment: this.state.comment,
            uploader: this.props.username
        }
        this.props.comment(data)
        this.setState({
            comment: ""
        })

    }


    render() {
        console.log(this.props.d.comments)
        let d = this.props.d;
       
        // let liked= d.likes.users.map(r=> r === localStorage.getItem("username") )
        return (

            <div >


                <div class="card7">

                    <div className="container" >
                        <video className="videoss" width="355" height="300" controls>
                            <source src={`http://localhost:5000/video/${this.props.d.videoId}`} />
                        </video>

                        <div>
                            <i onClick={this.showcomments} class="far fa-comment-dots"></i>
                            {/* {d.likes.users.map(r=> r === localStorage.getItem("username") ?
                             <div><i id="mylikes" onClick={this.like} class="fab fa-gratipay" id= "red"  ></i><span className="numlikes">{d.likes.num}</span> </div>: 
                            null)} */}
                            <i id="mylikes" onClick={this.like} class="fab fa-gratipay" id={this.state.red ? "red" : "b"} ></i><span className="numlikes">{d.likes.num}</span>
                        </div>
                        {this.state.showcomments ? <div className="dugma"><div class="dialogbox7">

                            {this.props.d.comments.map(c => <CommentPage deleteComment={this.props.deleteComment} comment={c} user={this.props.username} vidId={this.props.d.videoId} />)}


                        </div>  <span><input className="commentsss8" type='text' value={this.state.comment} onChange={this.handleInput} placeholder='comment' /> <span onClick={this.commentfunction}><i class="fas fa-plus"></i>

                        </span></span></div> : null}

                    </div>
                </div>
            </div>



        )
    }
}

export default VideoUserP

