-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.js
92 lines (85 loc) · 2.08 KB
/
App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import TweetBox from './TweetBox';
import Tweet from "./Tweet";
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
tweets: [
{
text: 'Hello',
liked: true,
charsRemaining: 140,
time: Math.round(Date.now()/1000)
},
{
text: 'World',
liked: false,
charsRemaining: 140,
time: Math.round(Date.now()/1000)-20
},
],
};
}
componentDidMount() {
this.interval = setInterval(() => this.tick(), 1000);
}
tick() {
this.setState({ });
}
handleTweet(tweetText) {
const tweetObj = {
text: tweetText,
liked: false,
time: Math.round(Date.now()/1000)
};
this.setState({
tweets: this.state.tweets.concat(tweetObj),
});
}
handleLike(tweet) {
let tweets = this.state.tweets.map( (t) => {
if (t.text == tweet.text) {
return {
text: t.text,
liked: !t.liked
}
}
return t;
});
this.setState({
tweets
})
}
deleteTweet(tweet) {
let tweets = this.state.tweets
this.state.tweets.map(t => {
if (t.text == tweet.text) {
tweets.splice(tweets.indexOf(t),1);
}
});
this.setState({ tweets });
}
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Coderschool Prework</h1>
</header>
<p className="App-intro">
This is a mini-twitter app that doesn't push anything to the cloud!
</p>
<div>
<TweetBox
prompt="What's your status?"
handleTweet={this.handleTweet.bind(this)}
/>
</div>
<div>{this.state.tweets.map(tweet => <Tweet tweet={tweet} handleLike={this.handleLike.bind(this)} deleteTweet={this.deleteTweet.bind(this)} />)}</div>
</div>
);
}
}