workshop.js

import React from "react";
import { render } from "react-dom";
import PropTypes from "prop-types";

class TweetForm extends React.Component {

    state = {
        text: ''
    }

    handeChange = (e) => {
        this.setState({
            text: e.target.value
        })
    }

    handleClick = () => {
        if(this.props.onSubmit) this.props.onSubmit(this.state.text);
        this.setState({
            text: ''
        })     
    }

    render() {
        return (
            <div>
                <textarea value={this.state.text} onChange={this.handeChange} />
                <button onClick={this.handleClick}>Dodaj Tweet</button>
            </div>
        )
    }
}
class App extends React.Component {

    state = {
        tweets: this.props.tweets,
        active: true,
        color: 'blue'
    };

    handleSubmit = (value) => {
        const newTweet = {
            user: {
                userName: 'Bartek',
                userAvatar: 'https://github.com/btmpl.png',
            }
            , text: value,
            date: (new Date()).toString()
        };


        this.setState({
            tweets: [newTweet, ...this.state.tweets]
        })        
    }

    render() {
        let list;
        if(!this.state.tweets) list = <p>Twój Twiter jest pusty!</p>;
        else if(this.state.tweets.length === 0) list = <p>Twój Twiter jest pusty!</p>
        else list = this.state.tweets.map(item => <Tweet tweet={item} key={item.text} />)
        return (
            <div>
                <TweetForm onSubmit={this.handleSubmit} />
                {list}
            </div>
        )        
    }
}

const userName = "Bartosz";
const userAvatar = "https://github.com/btmpl.png";
const date = (new Date()).toString();

const UserDetails = (props) => {
    return (
        <div>
            <img src={props.userAvatar} />
            <b>{props.userName}</b>            
        </div>
    )
}

UserDetails.propTypes = {
    userName: PropTypes.string,
    userAvatar: PropTypes.string
};

UserDetails.defaultProps = {
    userName: 'Anonim',
};

const Tweet = (props) => {
    return (
        <div>
            <UserDetails {...props.tweet.user} />

            <time>{props.tweet.date}</time>
            <p>{props.tweet.text}</p>
        </div>
    );
}
Tweet.propTypes = {
    tweet: PropTypes.shape({
        user: PropTypes.shape({
            userName: PropTypes.string,
            userAvatar: PropTypes.string,
        }),
        text: PropTypes.string
    })
};

Tweet.defaultProps = {
    userName: 'Anonim',
};

const tweets = [
    {
        user: {
            userName: 'BTM',
            userAvatar: 'https://github.com/btmpl.png'
        },
        date: (new Date()).toString(),
        text: "Hello world!1"
    },
    {
        user: {
            userName: 'BTM',
            userAvatar: 'https://github.com/btmpl.png'
        },
        date: (new Date()).toString(),
        text: "Hello world!2"
    },
    {
        user: {
            userName: 'BTM',
            userAvatar: 'https://github.com/btmpl.png'
        },
        date: (new Date()).toString(),
        text: "Hello world!3"
    },
    {
        user: {
            userName: 'BTM',
            userAvatar: 'https://github.com/btmpl.png'
        },
        date: (new Date()).toString(),
        text: "Hello world!4"
    },
    {
        user: {
            userName: 'BTM',
            userAvatar: 'https://github.com/btmpl.png'
        },
        date: (new Date()).toString(),
        text: "Hello world!5"
    },
]

render(
    <App tweets={tweets} />,
    document.getElementById('root')
);

export default App;

export {
    Tweet,
    UserDetails,
    TweetForm
};