evening push

cs-fullstack-2019-spring · Apr 23, 2019 · 24c7bb1 · 24c7bb1
1 parent 43c5ed1
commit 24c7bb1
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 49 deletions.
diff --git a/client/src/App.css b/client/src/App.css
@@ -12,34 +12,37 @@
 
 .profileImages{
   display: grid;
-  grid-template-columns: 1fr 5fr;
+  grid-template-columns: 1fr 1fr;
   margin: 0 10% 0 10%;
-  height: 5%;
 }
 
 .profile{
   grid-column: 1;
+  height: 100%;
+  clip-path: circle(25% at center);
+  background: lightblue;
 }
 
-.background{
+.background {
   grid-column: 2;
-  width: 100%;
-  height: 100%;
 }
 
 .tweetGrid{
   display: grid;
   font-size: 25px;
-  grid-template-columns: 1fr 2fr;
+  grid-template-columns: 1fr 1fr;
   margin: 1% 25% 1% 25%;
   height: 5%;
   width: 50%;
-  border: 1px solid blue;
+  background: rgba(211, 211, 211, 0.5);
+  border: 2px solid lightgray;
 }
 
 .tweetMessage{
   grid-column: 2;
   grid-row: 1;
+  padding: 1%;
+  font-size: 15px;
 }
 
 .tweetImage{

diff --git a/client/src/App.js b/client/src/App.js
@@ -40,7 +40,7 @@ class App extends Component {
           <Route path={'/register'} component={() => <TwitterRegistration userInfo={this.userInfo} />} />
           <Route path={'/profile'} component={() => <TwitterProfile username={this.state.username} isLoggedIn={this.state.isLoggedIn}/>} />
           <Route path={'/logout'} component={()=> <TwitterLogout/>} />
-          <Route path={'/edit'} component={()=> <EditTweet/>} />
+          <Route path={'/edit/:tweetID'} component={()=> <EditTweet/>} />
         </Router>
     );
   }

diff --git a/client/src/EditTweet.js b/client/src/EditTweet.js
@@ -9,24 +9,20 @@ class EditTweet extends Component {
     //fixme INCOMPLETE
     //edit tweet form submission event handler
     formSubmit = (e) => {
-        if (e.target.tweetPublic.value === 'on') {
-            this.setState({checkbox: true})
-        }
         e.preventDefault();
-        fetch('/users/addTweet', {
+        fetch('/users/editTweet/:id', {
             method: 'POST',
             headers: {
                 "Accept": "application/json",
                 "Content-Type": "application/json",
             },
             body: JSON.stringify({
-                username: this.props.username,
                 tweetMessage: e.target.tweetMessage.value,
                 tweetImage: e.target.tweetImage.value,
-                tweetPublic: this.state.checkbox,
+                tweetPublic:e.target.tweetPublic.checked,
             })
         })
-            .then(() => console.log('Tweet Added'))
+            .then(() => console.log('Tweet Updated'))
     };
 
     render() {
@@ -36,18 +32,18 @@ class EditTweet extends Component {
                 <form onSubmit={this.formSubmit}>
                     <div className={'formStyle'}>
                         <label htmlFor={'tweetMessage'}>Tweet Message: </label>
-                        <input type="text" id={'tweetMessage'} name={'tweetMessage'}/>
+                        <input type="text" id={'tweetMessage'} value={this.props.tweetMessage} name={'tweetMessage'}/>
                     </div>
                     <div className={'formStyle'}>
                         <label htmlFor={'tweetImage'}>Tweet Image URL: </label>
-                        <input type="text" id={'tweetImage'} name={'tweetImage'}/>
+                        <input type="text" id={'tweetImage'} value={this.props.tweetImage} name={'tweetImage'}/>
                     </div>
                     <div className={'formStyle'}>
                         <label htmlFor={'tweetPublic'}>Public Tweet: </label>
                         <input type="checkbox" name={'tweetPublic'}/>
                     </div>
                     <div className={'formStyle'}>
-                        <input type="submit" value={'add tweet'}/>
+                        <input type="submit" value={'edit tweet'}/>
                     </div>
                 </form>
             </div>

diff --git a/client/src/TwitterHome.js b/client/src/TwitterHome.js
@@ -80,7 +80,7 @@ class TwitterHome extends Component {
             return (
                 <div className="App">
                     <div>
-                        <form>
+                        <form className={'formStyle'}>
                             <label htmlFor={'searchBar'}>Search: </label>
                             <input type="text" name={'searchBar'} placeholder={'search all tweets'}/>
                         </form>
@@ -96,7 +96,7 @@ class TwitterHome extends Component {
             return (
                 <div className="App">
                     <div>
-                        <form>
+                        <form className={'formStyle'}>
                             <label htmlFor={'searchBar'}>Search: </label>
                             <input type="text" name={'searchBar'} placeholder={'search all tweets'}/>
                         </form>

diff --git a/client/src/TwitterProfile.js b/client/src/TwitterProfile.js
@@ -1,13 +1,13 @@
 import React, {Component} from 'react';
 import {BrowserRouter as Router, Link, Route} from 'react-router-dom';
+import EditTweet from "./EditTweet";
 
 class TwitterProfile extends Component {
     constructor(props) {
         super(props);
         this.state = {
             userData:'',
-            checkbox:false,
-            tweetArray:[]
+            tweetArray:[],
         };
         this.userFetch();
     }
@@ -44,8 +44,10 @@ class TwitterProfile extends Component {
                         <div key={eachTweet._id} className={'tweetGrid'}>
                             <p className={'tweetMessage'}>{eachTweet.tweetMessage}</p>
                             <img className={'tweetImage'} src={eachTweet.tweetImage} alt=""/>
-                            <Link to={'/edit'}>Edit</Link>
+                            <Link to={'/edit/' + eachTweet._id}>Edit</Link>
                         </div>
+                        <Route exact path={'/edit/' + eachTweet._id}
+                               component={()=> <EditTweet tweetMessage={eachTweet.tweetMessage} tweetImage={eachTweet.tweetImage}/>}/>
                     </Router>
                 )
             });
@@ -55,9 +57,6 @@ class TwitterProfile extends Component {
 
     //add tweet form submission event handler
     formSubmit = (e) => {
-        if (e.target.tweetPublic.value === 'on'){
-            this.setState({checkbox:true})
-        }
         e.preventDefault();
         fetch('/users/addTweet', {
             method:'POST',
@@ -69,7 +68,7 @@ class TwitterProfile extends Component {
                 username:this.props.username,
                 tweetMessage:e.target.tweetMessage.value,
                 tweetImage:e.target.tweetImage.value,
-                tweetPublic:this.state.checkbox,
+                tweetPublic:e.target.tweetPublic.checked,
             })
         })
             .then(()=>console.log('Tweet Added'))

diff --git a/server/routes/users.js b/server/routes/users.js
@@ -116,38 +116,48 @@ router.get('/loginFail', (req, res) => {
 //add a tweet
 router.post('/addTweet', (req, res) => {
     TwitterUserCollection.findOneAndUpdate({username: req.body.username},
-        {$push: {tweets:req.body}}, (errors) => {
+        {$push: {tweets: req.body}}, (errors) => {
             if (errors) res.send(errors);
             else res.send("Tweet Added");
         });
 });
 
+//edit a tweet by tweet ID
+router.post('/editTweet/:id', (req, res) => {
+    TwitterUserCollection.findOneAndUpdate({tweets: {_id: req.params.id}}, req.body, (errors, results) => {
+        if (errors) res.send(errors);
+        else if (results) res.send('tweet found by id');
+        else res.send('tweet not found by id');
+    });
+});
+
 //get all tweets fixme
 //results = user object array. Map array for each user THEN map each user for tweets
-router.get('/grabTweets',(req,res)=> {
-   TwitterUserCollection.find({},(errors,results)=>{
-       if(errors) res.send(errors);
-       else{
-           res.send(results);
-       }
-   })
+router.get('/grabTweets', (req, res) => {
+    TwitterUserCollection.find({}, (errors, results) => {
+        if (errors) res.send(errors);
+        else {
+            res.send(results);
+        }
+    })
 });
 
-//search tweets INCOMPLETE SEARCH BY USERNAME fixme
-router.get('/searchTweets',(req,res)=> {
-    TwitterUserCollection.findOne({username:req.body.username},(errors,results)=>{
-        if(errors) res.send(errors);
-        else{
+//INCOMPLETE SEARCH BY USERNAME fixme
+//search tweets
+router.get('/searchTweets', (req, res) => {
+    TwitterUserCollection.findOne({username: req.body.username}, (errors, results) => {
+        if (errors) res.send(errors);
+        else {
             res.send(results)
         }
     })
 });
 
 //grab user
-router.post('/searchUsers',(req,res)=> {
-    TwitterUserCollection.findOne({username:req.body.username},(errors,results)=>{
-        if(errors) res.send(errors);
-        else{
+router.post('/searchUsers', (req, res) => {
+    TwitterUserCollection.findOne({username: req.body.username}, (errors, results) => {
+        if (errors) res.send(errors);
+        else {
             res.send(results);
         }
     })

diff --git a/wireframe.md b/wireframe.md
@@ -1,11 +1,10 @@
 # project3-mern Wireframe
 ###TODO:
-- edit tweets
-- look up mongoose queries to sort tweets by date
-- add CSS to profile pages
-- display all tweets on homepage (50% complete)
+- edit tweets route
+- look up mongoose queries to sort tweets by date: 
+    UserCollection.find( ).sort( { field: value } )
 - cookies?
-- search tweets
+- search tweets by tweet body
 ###Server:
 - new user strategy and routes
 - login strategy and routes