<commit_before>import React from 'react'
import { connect } from 'react-redux'
import { Route, Link } from 'react-router-dom'

import { fetchSections } from '~actions/sections'
import { fetchResources } from '~actions/resources'

import Browser from '~components/browser'

const SectionCard = ({ title, serverName }) => (
  <div className="card">
    <div className="card-block">
      <h4 className="card-title">{title}</h4>
      <div className="card-text">
        <h5>{serverName}</h5>
        <Link
          to={`/library/${serverName}/${title}`}
          className="btn btn-primary"
          role="button"
        >
          Browse
        </Link>
      </div>
    </div>
  </div>
)

class Library extends React.Component {
  constructor(props) {
    super(props)

    this.handleFetchSections = this.handleFetchSections.bind(this)
    this.handleFetchResources = this.handleFetchResources.bind(this)

    this.handleFetchSections()
    this.handleFetchResources()
  }

  handleFetchSections() {
    this.props.onFetchSections()
  }

  handleFetchResources() {
    this.props.onFetchResources()
  }

  render() {
    const { sections, error } = this.props
    const DISPLAY_TYPES = ['movie', 'show']

    if (error) {
      return (
        <div className="alert alert-danger">
          Error - could not load Sections.
          <button
            type="button"
            className="btn btn-link"
            onClick={this.handleFetchSections}
          >
            Try again
          </button>
        </div>
      )
    }

    if (!sections) {
      return <div>Loading...</div>
    }
    return (
      <div className="row">
        <div className="col-md-3">
          {sections
            .filter(({ type }) => DISPLAY_TYPES.includes(type))
            .map(({ uuid, title, serverName }) => (
              <SectionCard key={uuid} title={title} serverName={serverName} />
            ))}
        </div>
        <div className="col-md-9">
          <Route path="/library/:server/:section" component={Browser} />
        </div>
      </div>
    )
  }
}

export default connect(
  ({ sectionsStore: { sections, error } }) => ({
    sections,
    error
  }),
  dispatch => ({
    onFetchSections: () => dispatch(fetchSections()),
    onFetchResources: () => dispatch(fetchResources())
  })
)(Library)
<commit_msg>✨ Add sections to Library<commit_after>import qs from 'qs'
import React from 'react'
import { connect } from 'react-redux'
import { Redirect, Link } from 'react-router-dom'

import { fetchSections, fetchSection } from '~actions/sections'
import { fetchResources } from '~actions/resources'

const SectionCard = ({ title, serverName }) => (
  <div className="card">
    <div className="card-block">
      <h4 className="card-title">{title}</h4>
      <div className="card-text">
        <h5>{serverName}</h5>
        <Link
          to={`/library/${serverName}/${title}`}
          className="btn btn-primary"
          role="button"
        >
          Browse
        </Link>
      </div>
    </div>
  </div>
)

class Library extends React.Component {
  constructor(props) {
    super(props)

    const { history, serverId, resources = [] } = props
    this.state = {
      server: resources.find(resource => resource.clientIdentifier === serverId)
    }

    this.handleFetchSections = this.handleFetchSections.bind(this)

    if (this.state.server) this.handleFetchSections()
  }

  handleFetchSections() {
    this.props.onFetchSections()
  }

  handleFetchSection({ sectionId, sectionName }) {
    this.setState({ sectionName })
    this.props.onFetchSection({ sectionId })
  }

  render() {
    const { sections, items, authToken } = this.props
    const { location, server, sectionName } = this.state
    const serverUri =
      server &&
      server.connections.find(connection => connection.local === '0').uri

    if (!server) {
      return (
        <Redirect
          to={{
            pathname: '/servers',
            state: { from: location }
          }}
        />
      )
    }

    return (
      <div>
        <nav className="breadcrumb">
          <Link to="/servers" className="breadcrumb-item">{server.name}</Link>
          {!!sectionName && <a className="breadcrumb-item">{sectionName}</a>}
        </nav>
        {!sections
          ? <div>Loading...</div>
          : <div className="d-flex">
              <nav className="nav flex-column">
                {sections
                  .filter(section => section.type === 'movie')
                  .map(section => (
                    <a
                      href="#"
                      onClick={event => {
                        event.preventDefault()
                        this.handleFetchSection({
                          sectionId: section.key,
                          sectionName: section.title
                        })
                      }}
                      className="nav-link"
                      key={section.uuid}
                    >
                      {section.title}
                    </a>
                  ))}
              </nav>
              <div>
                {items.map(item => {
                  const params = qs.stringify({
                    width: 128,
                    height: 92,
                    minSize: 1,
                    url: item.thumb,
                    'X-Plex-Token': authToken
                  })
                  return (
                    <img
                      key={item.ratingKey}
                      src={`${serverUri}/photo/:/transcode?${params}`}
                    />
                  )
                })}
              </div>
            </div>}
      </div>
    )
  }
}

export default connect(
  ({
    library: { server: serverId, items = [] },
    userStore: { user: { authToken } },
    resourcesStore: { resources },
    sectionsStore: { sections }
  }) => ({
    authToken,
    serverId,
    items,
    resources,
    sections
  }),
  dispatch => ({
    onFetchSections: () => dispatch(fetchSections()),
    onFetchSection: ({ sectionId }) => dispatch(fetchSection({ sectionId }))
  })
)(Library)

{'fraction_non_alphanumeric': 0.13966024175106173, 'fraction_numerical': 0.00277687030382228, 'mean_word_length': 1.726179875333927, 'pattern_counts': {'":': 0, '<': 61, '<?xml version=': 0, '>': 79, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4306084', 'n_tokens_mistral': 1730, 'n_tokens_neox': 1693, 'n_words': 332}