afternoon update

cs-fullstack-2019-spring · Apr 22, 2019 · 43c5ed1 · 43c5ed1
1 parent a6c73cf
commit 43c5ed1
Show file tree

Hide file tree

Showing 7 changed files with 159 additions and 22 deletions.
diff --git a/client/src/App.css b/client/src/App.css
@@ -29,18 +29,28 @@
 
 .tweetGrid{
   display: grid;
-  grid-template-columns: 1fr 1fr;
-  margin: 0 10% 0 10%;
+  font-size: 25px;
+  grid-template-columns: 1fr 2fr;
+  margin: 1% 25% 1% 25%;
   height: 5%;
-  border: 1px solid black;
+  width: 50%;
+  border: 1px solid blue;
 }
 
 .tweetMessage{
   grid-column: 2;
+  grid-row: 1;
 }
 
 .tweetImage{
   grid-column: 1;
+  grid-row: 1;
   width: 25%;
   padding: 5%;
 }
+.editButton{
+  grid-column: 2;
+  grid-row: 2;
+  width: 25%;
+  margin: 5%;
+}
diff --git a/client/src/App.js b/client/src/App.js
@@ -5,6 +5,7 @@ import TwitterHome from "./TwitterHome";
 import TwitterRegistration from "./TwitterRegistration";
 import TwitterProfile from "./TwitterProfile";
 import TwitterLogout from "./TwitterLogout";
+import EditTweet from "./EditTweet";
 
 class App extends Component {
 
@@ -39,6 +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/>} />
         </Router>
     );
   }

diff --git a/client/src/EditTweet.js b/client/src/EditTweet.js
@@ -0,0 +1,57 @@
+import React, {Component} from 'react';
+
+class EditTweet extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {}
+    }
+
+    //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', {
+            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,
+            })
+        })
+            .then(() => console.log('Tweet Added'))
+    };
+
+    render() {
+        return (
+            <div>
+                <h2>Edit Tweet</h2>
+                <form onSubmit={this.formSubmit}>
+                    <div className={'formStyle'}>
+                        <label htmlFor={'tweetMessage'}>Tweet Message: </label>
+                        <input type="text" id={'tweetMessage'} name={'tweetMessage'}/>
+                    </div>
+                    <div className={'formStyle'}>
+                        <label htmlFor={'tweetImage'}>Tweet Image URL: </label>
+                        <input type="text" id={'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'}/>
+                    </div>
+                </form>
+            </div>
+        );
+    }
+}
+export default EditTweet
diff --git a/client/src/TwitterHome.js b/client/src/TwitterHome.js
@@ -2,6 +2,17 @@ import React, {Component} from 'react';
 
 class TwitterHome extends Component {
 
+    constructor(props) {
+        super(props);
+        this.state = {
+            userObject: [],
+            tweetArray:[],
+            anotherMap:[],
+            theFinalMap:[],
+        };
+        this.tweetFetch()
+    }
+
     //form submission event handler
     formSubmit = (e) => {
         e.preventDefault();
@@ -20,30 +31,77 @@ class TwitterHome extends Component {
             .then((data) => {
                 if (data) {
                     this.props.userInfo(data, true)
-                }
-                else{
-                    this.props.userInfo(null,false)
+                } else {
+                    this.props.userInfo(null, false);
                 }
             })
     };
 
+    //grab user objects
+    tweetFetch = () => {
+        fetch('/users/grabTweets')
+            .then(data => data.json())
+            .then(returnedData => this.setState({userObject: returnedData}))
+            .then(() => this.mapAllTweets())
+
+    };
+
+    //map tweets from user object
+    mapAllTweets = () => {
+        let mappedUsers = this.state.userObject.map((eachUser) => {
+            return (
+                eachUser.tweets
+            )
+        });
+        for(let i=0; i<mappedUsers.length; i++){
+            let mappedTweets = mappedUsers[i].map((eachTweet)=>{
+                return(this.state.anotherMap.push(eachTweet))
+            });
+            this.setState({tweetArray:mappedTweets})
+        }
+        this.mapTweetsAgain()
+    };
+
+    mapTweetsAgain = () => {
+        let finalMap = this.state.anotherMap.map((eachTweet)=>{
+            return(
+                <div key={eachTweet._id} className={'tweetGrid'}>
+                    <p className={'tweetMessage'}>{eachTweet.tweetMessage}</p>
+                    <img className={'tweetImage'} src={eachTweet.tweetImage} alt=""/>
+                </div>
+            )
+        });
+        this.setState({theFinalMap:finalMap})
+    };
+
     render() {
         //logged in user display
         if (this.props.isLoggedIn === true) {
-            console.log('Client Check: Logged in');
             return (
                 <div className="App">
-                    <h1>Mock Twitter</h1>
-                    <h3>Five Latest Tweets</h3>
+                    <div>
+                        <form>
+                            <label htmlFor={'searchBar'}>Search: </label>
+                            <input type="text" name={'searchBar'} placeholder={'search all tweets'}/>
+                        </form>
+                    </div>
+                    <h3>Tweets: </h3>
+                    <hr/>
+                    {this.state.theFinalMap}
                 </div>
             );
         }
         //not logged in user display
         else {
-            console.log('Client Check: Not logged in');
             return (
                 <div className="App">
-                    <h1>Mock Twitter Sign In</h1>
+                    <div>
+                        <form>
+                            <label htmlFor={'searchBar'}>Search: </label>
+                            <input type="text" name={'searchBar'} placeholder={'search all tweets'}/>
+                        </form>
+                    </div>
+                    <h3>Sign In</h3>
                     <form onSubmit={this.formSubmit}>
                         <div className={'formStyle'}>
                             <label htmlFor={'username'}>Username: </label>
@@ -57,11 +115,12 @@ class TwitterHome extends Component {
                             <input type="submit" value={'sign in'}/>
                         </div>
                     </form>
+                    <h3>Tweets: </h3>
+                    <hr/>
+                    {this.state.theFinalMap}
                 </div>
             );
         }
-
-
     }
 }
 

diff --git a/client/src/TwitterProfile.js b/client/src/TwitterProfile.js
@@ -1,4 +1,5 @@
 import React, {Component} from 'react';
+import {BrowserRouter as Router, Link, Route} from 'react-router-dom';
 
 class TwitterProfile extends Component {
     constructor(props) {
@@ -33,15 +34,19 @@ class TwitterProfile extends Component {
         }
     };
 
+    // fixme INCOMPLETE
+    //list tweets
     mapTweets = () => {
         if (this.state.userData.tweets) {
-            console.log(this.state.userData.tweets);
             let tweetMap = this.state.userData.tweets.map((eachTweet) => {
                 return (
-                    <div key={eachTweet._id} className={'tweetGrid'}>
-                        <p className={'tweetMessage'}>{eachTweet.tweetMessage}</p>
-                        <img className={'tweetImage'} src={eachTweet.tweetImage} alt=""/>
-                    </div>
+                    <Router>
+                        <div key={eachTweet._id} className={'tweetGrid'}>
+                            <p className={'tweetMessage'}>{eachTweet.tweetMessage}</p>
+                            <img className={'tweetImage'} src={eachTweet.tweetImage} alt=""/>
+                            <Link to={'/edit'}>Edit</Link>
+                        </div>
+                    </Router>
                 )
             });
             this.setState({tweetArray:tweetMap})
@@ -70,8 +75,6 @@ class TwitterProfile extends Component {
             .then(()=>console.log('Tweet Added'))
     };
 
-
-
     render() {
         //logged in user
         if (this.props.isLoggedIn === true) {

diff --git a/server/routes/users.js b/server/routes/users.js
@@ -128,7 +128,7 @@ router.get('/grabTweets',(req,res)=> {
    TwitterUserCollection.find({},(errors,results)=>{
        if(errors) res.send(errors);
        else{
-           res.send(results)
+           res.send(results);
        }
    })
 });

diff --git a/wireframe.md b/wireframe.md
@@ -1,5 +1,11 @@
 # 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)
+- cookies?
+- search tweets
 ###Server:
 - new user strategy and routes
 - login strategy and routes