Bug add tweet

package.json

@@ -3,9 +3,14 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
-    "react-scripts": "1.1.1"
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "react-icons": "^4.2.0",
+    "react-redux": "^7.2.3",
+    "react-redux-loading": "^4.6.1",
+    "react-scripts": "^4.0.3",
+    "redux": "^4.0.5",
+    "redux-thunk": "^2.3.0"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -17,5 +22,17 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/udacity/reactnd-chirper-app.git"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }

src/actions/authedUser.js

@@ -0,0 +1,8 @@
+export const SET_AUTHED_USER = 'SET_AUTHED_USER';
+
+export  function authedUser(id) {
+   return {
+       type: SET_AUTHED_USER,
+       id
+   }
+}

src/actions/shared.js

@@ -0,0 +1,20 @@
+import { getInitialData } from '../utils/api';
+import { receiveUsers } from './users';
+import { receiveTweets } from './tweets';
+import {authedUser} from './authedUser';
+import { showLoading, hideLoading } from 'react-redux-loading';
+
+const AUTHED_ID= 'tylermcginnis' 
+export function handleInitialData(){
+    return (dispatch) =>{
+        dispatch(showLoading());
+
+        return getInitialData().then(({users, tweets}) => {
+            dispatch(receiveTweets(tweets))
+            dispatch(receiveUsers(users))
+            dispatch(authedUser(AUTHED_ID))
+            dispatch(hideLoading())
+
+        })
+    }
+}

src/actions/tweets.js

@@ -0,0 +1,56 @@
+
+import { saveLikeToggle, saveTweet } from '../utils/api';
+import { showLoading, hideLoading } from 'react-redux-loading';
+
+export const RECEIVE_TWEETS = 'RECEIVE_TWEETS';
+export const TOGGLE_TWEETS = 'TOGGLE_TWEETS';
+export const ADD_TWEET = 'ADD_TWEET';
+
+ function addTweet(tweet){
+    return {
+        type: ADD_TWEET,
+        tweet
+    }
+}
+export function handleAddTweet(text, replyingTo){
+    return (dispatch, getState) =>{
+        const {authedUser} = getState();
+        dispatch(showLoading())
+        return saveTweet({
+            text,
+            author: authedUser,
+            replyingTo,
+
+            })
+            .then((tweet) =>dispatch(addTweet(tweet)))
+            .then(() =>dispatch(hideLoading()))
+
+    }
+}
+export  function receiveTweets(tweets) {
+   return {
+       type: RECEIVE_TWEETS,
+       tweets
+   }
+}
+function toggleTweet({id, authedUser, hasLiked}) {
+
+ return {
+     type: TOGGLE_TWEETS,
+     id,
+     authedUser,
+     hasLiked
+ }
+}
+export function handleToggleTweet(info){
+    return (dispatch) => {
+        dispatch(toggleTweet(info))
+        return saveLikeToggle(info)
+                .catch((e) =>{
+                    console.warn('Error in handle Toggle Tweet', e)
+                    dispatch(toggleTweet(info))
+                    alert('There was an error liking the tweet')
+                } )
+
+    }
+}

src/actions/users.js

@@ -0,0 +1,7 @@
+export const RECEIVE_USERS = "RECEIVE_USERS";
+export  function receiveUsers(users){
+    return {
+        type:RECEIVE_USERS,
+        users
+    }
+}

src/components/App.js

@@ -1,13 +1,28 @@
 import React, { Component } from 'react'
+import { connect } from 'react-redux';
+import { handleInitialData } from '../actions/shared';
+import Dashboard from './Dashboard';
+import LoadingBar from 'react-redux-loading';
+import NewTweet from './NewTweet';
 
 class App extends Component {
+  componentDidMount(){
+   this.props.dispatch(handleInitialData());
+  }
   render() {
     return (
-      <div>
-        Starter Code
+      <div> 
+        <LoadingBar />
+        {
+          this.props.loading === true ? null : <NewTweet />
+        }
       </div>
     )
   }
 }
+function mapStateToProps({authedUser}){
+
+ return {loading: authedUser === null}
+}
 
-export default App
+export default connect(mapStateToProps)(App);

src/components/Dashboard.js

@@ -0,0 +1,30 @@
+import React, { Component} from 'react';
+import { connect } from 'react-redux';
+import Tweet from './Tweet';
+
+class Dashboard extends Component {
+    render(){
+        console.log(this.props);
+        return(
+            <div>
+                <h3 className="center">Timeline</h3>
+                <ul className="dashboard-list">
+                    {
+                        this.props.tweetIds.map((id)=>(
+                            <li key={id}>
+                                <Tweet id={id} />
+                            </li>
+                        ))
+                    }
+                </ul>
+            </div>
+        )
+    }
+}
+
+function mapStateToProps({tweets}){
+ return {
+     tweetIds: Object.keys(tweets).sort((a, b)=>tweets[b].timestamp - tweets[a].timestamp)
+ }
+}
+export default connect(mapStateToProps)(Dashboard);

src/components/NewTweet.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { handleAddTweet } from '../actions/tweets';
+import {connect} from 'react-redux';
+
+class NewTweet extends React.Component {
+    state = {
+        text: ''
+    }
+    handleSubmit =(e)=>{
+        e.preventDefault();
+        const { text } = this.state;
+        const { dispatch, id } = this.props;
+
+        dispatch(handleAddTweet(text, id))
+
+        this.setState(()=>({
+            text: ''
+        }))
+    }
+    handleChange = (e) => {
+        e.preventDefault();
+        const text =  e.target.value;
+        this.setState(()=>({
+            text
+        }))
+    }
+    render(){
+        const { text } = this.state;
+        // TODO:  redirect to / if submited
+        const leftTweets = 208 - text.length;
+        return (
+            <div>
+                <h3 className="center"> Compose New Tweet</h3>
+                <form className="new-tweet" onSubmit={this.handleSubmit}>
+                    <textarea 
+                        value={text}
+                        className="textarea"
+                        placeholder="What 's on your Mind?"
+                        onChange={this.handleChange}
+                        maxLength={280}
+                    />
+                    <button type="submit" className="btn" disabled={text === ''}> Submit </button>
+                </form>
+
+                {text.length > 100 && <div className="tweet-left">{leftTweets}</div>}
+            </div>
+        )
+    }
+}
+export default connect()(NewTweet);

src/components/Tweet.js

@@ -0,0 +1,74 @@
+import React, { Component} from 'react';
+import { connect } from 'react-redux';
+import { formatDate, formatTweet } from '../utils/helpers';
+import { TiArrowBackOutline } from 'react-icons/ti/index'
+import { TiHeartOutline } from 'react-icons/ti/index' 
+import { TiHeartFullOutline } from 'react-icons/ti/index'
+import {handleToggleTweet} from '../actions/tweets';
+
+class Tweet extends Component {
+
+    handleLike =(e)=>{
+        e.preventDefault();        
+        const { dispatch, authedUser, tweet } = this.props;
+
+        alert(tweet.likes);
+        dispatch(handleToggleTweet({
+            id: tweet.id,
+            hasLiked: tweet.hasLiked,
+            authedUser
+        }))
+    }
+
+    toParent =(e, id)=>{
+        e.preventDefault();
+        //todo: Redirect to parent
+    }
+
+    render() {
+        const {tweet } = this.props;
+       if(tweet === null) {
+           return <div> this tweet doesn't exist</div>
+       }
+       const { name, avatar, timestamp, text, hasLiked, likes, replies, parent } = tweet;
+        return (
+            <div className="tweet">
+                <img src={avatar} alt={`Avatar of ${name}`} className="avatar" />
+                <div className="tweet-info">
+                    <div> 
+                        <span> {name}  </span>
+                        <div> {formatDate(timestamp)}   </div>
+                        {parent && (
+                            <button className="replying-to" onClick={ (e) => this.toParent(e, parent.id) }>
+                                Replying To @{parent.author}
+                            </button>
+                        )}
+                        <p>{text}</p>
+                    </div>                
+                    <div className="tweet-icon">
+                        <TiArrowBackOutline className="tweet-icon" /> 
+                        <span>{replies !== 0 && replies } </span>
+                        <button className="heart-button" onClick={  this.handleLike}>
+                            { hasLiked === true
+                                ?<TiHeartFullOutline color='#e0245e' className="tweet-icon" />
+                                : <TiHeartOutline className="tweet-icon" /> 
+                            }
+
+                        </button>
+                        <span>{likes !== 0 && likes}</span>
+                    </div>        
+                </div>
+            </div>
+        )
+    }
+}
+function mapStateToProps({authedUser, tweets, users}, {id}){
+    const tweet = tweets[id];
+    const parentTweet = tweet? tweets[tweet.replyingTo]: null;
+    return {
+        authedUser,
+        tweet:tweet ? formatTweet(tweet, users[tweet.author], authedUser, parentTweet): null,
+    }
+
+}
+export default connect(mapStateToProps)(Tweet);

src/index.js

@@ -1,6 +1,20 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
-import './index.css'
-import App from './components/App'
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './components/App';
+import { applyMiddleware, createStore } from 'redux';
+import { Provider } from 'react-redux';
+import reducer from './reducers';
+import thunk from 'redux-thunk';
+import logger from './middleware/logger';
 
-ReactDOM.render(<App />, document.getElementById('root'))
+
+const store = createStore(reducer, applyMiddleware(thunk, logger));
+//const store = createStore(reducer, middleware);
+
+ReactDOM.render(
+  <Provider store={store}>
+    <App />
+  </Provider>,
+document.getElementById('root')
+)

src/middleware/index.js

@@ -0,0 +1,8 @@
+
+import logger from './logger';
+import thunk from 'redux-thunk';
+import { applyMiddleware } from 'redux';
+
+export default applyMiddleware({
+    thunk, logger,
+})

src/middleware/logger.js

@@ -0,0 +1,9 @@
+ const logger = (store) => (next) => (action) => {
+    console.group(action.type)
+    console.log('The action', action);
+    const returnValue= next(action)
+    console.log('The new State', store.getState());
+    console.groupEnd()
+    return returnValue;
+}
+export default logger;

src/reducers/authedUser.js

@@ -0,0 +1,13 @@
+import { SET_AUTHED_USER } from '../actions/authedUser';
+
+export default function authedUser(state = null, action){
+    switch(action.type){
+        case SET_AUTHED_USER:
+            return {
+                ...state,
+                ...action.id
+            }
+        default:
+            return state;
+    }
+}