React Daily Project: Gist Box

README.md

Daily 'From Scratch' React Project

Language / Framework

• React 15.5.4

Attribution

This project derived from: Laracasts: ["Do You React?"]

Project Notes

Goal

• In learning React, I spent my first week or so writing the JS code below daily on CodePen.
• This is an effort to continually drive the syntax deeper into memory.

General Notes

• I added my own little tweaks to the code and converted the XMLHttpRequest to a fetch()
• My times vary but on most good days it takes ~20 minutes all-in-all
• Times are noted in the footer on CodePen (additional comments are hidden in the HTML editor)

This Code on CodePen

Learning Notes

• Every day I write this out it forces me to think React.
• Most days I write this out, I still learn something new.

react-daily-gistbox.js

// This project derived from:
// https://laracasts.com/series/do-you-react/episodes/7
// Laracasts: [Do You React?]
// --- --- ---   --- --- ---   --- --- ---

// HTML CODE

// <div id="container">

// JS CODE

// GistBox
    // GistForm
    // GistList
        // Gist

console.clear()

class GistBox extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            gistList: []
        }
        this.submitUsername = this.submitUsername.bind(this)
        this.updateGistList = this.updateGistList.bind(this)
    }
    submitUsername(username) {
        const url = `https://api.github.com/users/${username}/gists`

        fetch(url, {
            method: 'GET'
        }).then( response =>
            response.json()
        ).then( data => {
            if (data.length > 0) {
                this.updateGistList(data[0])
            } else {
                alert('User has no gists')
            }
        })
    }
    updateGistList(gist) {
        const username = gist.owner.login,
              url = gist.html_url,
              gistList = this.state.gistList.concat({username, url})
        this.setState({ gistList })
    }
    render() {
        return (
            <div>
                <GistForm onAdd={this.submitUsername} />
                <GistList gistList={this.state.gistList} />
                {this.props.children}
            </div>
        )
    }
}
class GistForm extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            potentialGist: ''
        }
        this.gistInMotion = this.gistInMotion.bind(this)
        this.getNewGist = this.getNewGist.bind(this)
    }
    gistInMotion(e) {
        this.setState({
            potentialGist: e.target.value
        })
    }
    getNewGist(e) {
        e.preventDefault()
        this.props.onAdd(this.state.potentialGist)
        this.setState({gist: ''})
    }
    render() {
        return (
            <div>
                <form onSubmit={this.getNewGist}>
                    <label>Enter a GitHub username for a link to their last Gist:<br/>
                        <input type="text" onChange={this.gistInMotion} value={this.state.potentialGist} />
                    </label>
                    <button>Get Gist</button>
                </form>
            </div>
        )
    }
}
class GistList extends React.Component {
    constructor(props) {
        super(props)
    }
    render() {
        return (
            <div>
                { this.props.gistList.map( (gist, idx) => <Gist key={idx} gist={gist} /> )}
            </div>
        )
    }
}
class Gist extends React.Component {
    constructor(props) {
        super(props)
    }
    render() {
        return (
            <div className="listitem">
                {this.props.gist.username} - <a href={this.props.gist.url} target="_blank">{this.props.gist.url}</a>
            </div>
        )
    }
}
ReactDOM.render(
    <GistBox />,
    container
)