Workshop gists

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

import { fetchAgenda } from './agenda'

import _ from 'lodash'

const Talk = ({ startTime, title }) => (
  <div>{title}</div>
)

const dayLookup = {
  0: 'Wednesday',
  1: 'Thursday',
  2: 'Friday'
}

const Day = ({ day, talks, selected, selectDay }) => {
  const talkList = talks
    .map(talk => (
      <Talk
        key={talk.title+talk.startTime.hour+talk.startTime.minutes}
        {...talk}
      />
    ))

  return (
    <div>
      <div onClick={() => selectDay(day) }>{dayLookup[day]}</div>
      {selected && talkList}
    </div>
  )
}

class App extends Component {
  state = { talks: [], selectedDay: '0' }

  componentWillMount() {
    fetchAgenda().then(talks => {
      this.setState({ talks })
    })
  }

  selectDay = (day) => {
    this.setState({
      selectedDay: day
    })
  }

  render() {
    const groups = _.groupBy(this.state.talks, talk => talk.day)
    return (
      <div className="App">
          {Object.keys(groups).map(grp => (
            <Day day={grp}
              talks={groups[grp]}
              selected={this.state.selectedDay === grp}
              selectDay={this.selectDay} />
          ))}
      </div>
    );
  }
}

export default App;

AppFunctionAsProp.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

import { fetchAgenda } from './agenda'

import _ from 'lodash'

const Talk = ({ startTime, title }) => (
  <div>{title}</div>
)

const dayLookup = {
  0: 'Wednesday',
  1: 'Thursday',
  2: 'Friday'
}

const Day = ({ day, talks }) => {
  const talkList = talks
    .map(talk => (
      <Talk
        key={talk.title+talk.startTime.hour+talk.startTime.minutes}
        {...talk}
      />
    ))

  return (
    <div>
      {talkList}
    </div>
  )
}

class Tab extends Component {
  state = { selectedTab: 0 }

  selectTab = (tabIndex) => {
    this.setState({
      selectedTab: tabIndex
    })
  }

  render() {
    return (
      <div>
        {this.props.tabs.map((tab, tabIndex) => (
          <div
            className={"DayHeader" + (tabIndex === this.state.selectedTab ? ' selected' : '')}
            onClick={() => this.selectTab(tabIndex)}
          >
            {tab.header}
          </div>
        ))}
        {this.props.renderContent(this.props.tabs[this.state.selectedTab].data)}
      </div>
    )
  }
}

class App extends Component {
  state = { talks: [], selectedDay: '0' }

  componentWillMount() {
    fetchAgenda().then(talks => {
      this.setState({ talks })
    })
  }

  selectDay = (day) => {
    this.setState({
      selectedDay: day
    })
  }

  render() {
    const groups = _.groupBy(this.state.talks, talk => talk.day)
    return (
      <div className="App">
          <Tab
            tabs={[
              { header: 'Wednesday', data: groups['0'] },
              { header: 'Thursday', data: groups['1'] },
              { header: 'Friday', data: groups['2'] },
            ]}
            renderContent={data => (
              data && <Day talks={data}/>
            )}
          />
      </div>
    );
  }
}

export default App;

Routing.js

import React, { Component } from 'react';
import {
  BrowserRouter as Router,
  Route,
  Link,
} from 'react-router-dom'

import logo from './logo.svg';
import './App.css';

import { fetchAgenda } from './agenda'
import { getLikes, setLikes } from './api'

import _ from 'lodash'

const Talk = ({ startTime, title }) => (
  <div>{title}</div>
)

const dayLookup = {
  0: 'Wednesday',
  1: 'Thursday',
  2: 'Friday'
}

const Slot = ({ time, talks }) => {
  const talkList = talks
  .map(talk => (
    <Talk
      key={talk.title+talk.startTime.hour+talk.startTime.minutes}
      {...talk}
    />
  ))

  return (
    <div>
        <div>{time}</div>
        {talkList}
      </div>
  )
}
const Day = ({ day, talks }) => {
  const slots = _.groupBy(talks, talk => `${talk.startTime.hour}:${talk.startTime.minutes}`)

  return (
    <div>
      {Object.keys(slots).map(slot => <Slot time={slot} talks={slots[slot]} />)}
    </div>
  )
}

const SelectDay = () => <div>Please select a day</div>
class Tab extends Component {
  render() {
    // { header, data }
    
    return (
      <div>
        {this.props.tabs.map((tab, tabIndex) => (
          <Link
            className={"DayHeader"}
            to={`${this.props.match.url}/${tab.header}`}
          >
            {tab.header}
          </Link>
        ))}

        <Route
          path={`${this.props.match.url}/:day`}
          render={(renderProps) => {
            const day = renderProps.match.params.day
             const tabInfo = this.props.tabs.filter(tab => tab.header === day)[0]
             const tabContents = this.props.renderContent(tabInfo.data)
             return tabContents || <div>Loading...</div>
          }}
        />
        <Route component={SelectDay} />
      </div>
    )
  }
}

class Agenda extends Component {
  state = { talks: [], selectedDay: '0' }

  componentWillMount() {
    fetchAgenda().then(talks => {
      this.setState({ talks })
    })
  }

  selectDay = (day) => {
    this.setState({
      selectedDay: day
    })
  }

  render() {
    const groups = _.groupBy(this.state.talks, talk => talk.day)
    
    return (
      <Tab
          match={this.props.match}
          tabs={[
            { header: 'Wednesday', data: groups['0'] },
            { header: 'Thursday', data: groups['1'] },
            { header: 'Friday', data: groups['2'] },
          ]}
          renderContent={data => (
            data && <Day talks={data}/>
          )}
        />
    )
  }
}

class Home extends Component {
  render() {
    return (
      <div>
          <div>Home</div>
          <Link to="/agenda">Agenda</Link>
      </div>
    )
  }
}

class App extends Component {

  render() {
    return (
      <Router>
        <div className="App">
          <Route path='/' component={Home} />
          <Route path='/agenda' component={Agenda} />
        </div>
      </Router>
    )
  }
}

export default App;