<commit_before>// Copyright (c) ppy Pty Ltd <<EMAIL>>. Licensed under the GNU Affero General Public License v3.0.
// See the LICENCE file in the repository root for full licence text.

import BeatmapsetPanel from 'components/beatmapset-panel';
import ProfilePageExtraSectionTitle from 'components/profile-page-extra-section-title';
import ShowMoreLink from 'components/show-more-link';
import { observer } from 'mobx-react';
import * as React from 'react';
import ExtraHeader from './extra-header';
import ExtraPageProps, { BeatmapsetSection } from './extra-page-props';

const sectionKeys = [
  {
    key: 'favouriteBeatmapsets',
    translationKey: 'favourite',
  },
  {
    key: 'rankedBeatmapsets',
    translationKey: 'ranked',
  },
  {
    key: 'lovedBeatmapsets',
    translationKey: 'loved',
  },
  {
    key: 'guestBeatmapsets',
    translationKey: 'guest',
  },
  {
    key: 'pendingBeatmapsets',
    translationKey: 'pending',
  },
  {
    key: 'graveyardBeatmapsets',
    translationKey: 'graveyard',
  },
] as const;

@observer
export default class Beatmapsets extends React.Component<ExtraPageProps> {
  render() {
    return (
      <div className='page-extra'>
        <ExtraHeader name={this.props.name} withEdit={this.props.controller.withEdit} />
        {sectionKeys.map(this.renderBeatmapsets)}
      </div>
    );
  }

  private readonly onShowMore = (section: BeatmapsetSection) => {
    this.props.controller.apiShowMore(section);
  };

  private readonly renderBeatmapsets = (section: typeof sectionKeys[number]) => {
    const state = this.props.controller.state.beatmapsets;
    const count = state[section.translationKey].count;
    const beatmapsets = state[section.translationKey].items;
    const pagination = state[section.translationKey].pagination;

    return (
      <React.Fragment key={section.translationKey}>
        <ProfilePageExtraSectionTitle
          count={count}
          titleKey={`users.show.extra.beatmaps.${section.translationKey}.title`}
        />

        {beatmapsets.length > 0 && (
          <div className='osu-layout__col-container osu-layout__col-container--with-gutter js-audio--group'>
            {beatmapsets.map((beatmapset) => (
              <div
                key={beatmapset.id}
                className='osu-layout__col osu-layout__col--sm-6'
              >
                <BeatmapsetPanel beatmapset={beatmapset} />
              </div>
            ))}

            <div className='osu-layout__col'>
              <ShowMoreLink
                {...pagination}
                callback={this.onShowMore}
                data={section.key}
                modifiers='profile-page'
              />
            </div><commit_msg>rename properties<commit_after>// Copyright (c) ppy Pty Ltd <<EMAIL>>. Licensed under the GNU Affero General Public License v3.0.
// See the LICENCE file in the repository root for full licence text.

import BeatmapsetPanel from 'components/beatmapset-panel';
import ProfilePageExtraSectionTitle from 'components/profile-page-extra-section-title';
import ShowMoreLink from 'components/show-more-link';
import { observer } from 'mobx-react';
import * as React from 'react';
import ExtraHeader from './extra-header';
import ExtraPageProps, { BeatmapsetSection } from './extra-page-props';

const sectionKeys = [
  {
    key: 'favourite',
    urlType: 'favouriteBeatmapsets',
  },
  {
    key: 'ranked',
    urlType: 'rankedBeatmapsets',
  },
  {
    key: 'loved',
    urlType: 'lovedBeatmapsets',
  },
  {
    key: 'guest',
    urlType: 'guestBeatmapsets',
  },
  {
    key: 'pending',
    urlType: 'pendingBeatmapsets',
  },
  {
    key: 'graveyard',
    urlType: 'graveyardBeatmapsets',
  },
] as const;

@observer
export default class Beatmapsets extends React.Component<ExtraPageProps> {
  render() {
    return (
      <div className='page-extra'>
        <ExtraHeader name={this.props.name} withEdit={this.props.controller.withEdit} />
        {sectionKeys.map(this.renderBeatmapsets)}
      </div>
    );
  }

  private readonly onShowMore = (section: BeatmapsetSection) => {
    this.props.controller.apiShowMore(section);
  };

  private readonly renderBeatmapsets = (section: typeof sectionKeys[number]) => {
    const state = this.props.controller.state.beatmapsets;
    const count = state[section.key].count;
    const beatmapsets = state[section.key].items;
    const pagination = state[section.key].pagination;

    return (
      <React.Fragment key={section.key}>
        <ProfilePageExtraSectionTitle
          count={count}
          titleKey={`users.show.extra.beatmaps.${section.key}.title`}
        />

        {beatmapsets.length > 0 && (
          <div className='osu-layout__col-container osu-layout__col-container--with-gutter js-audio--group'>
            {beatmapsets.map((beatmapset) => (
              <div
                key={beatmapset.id}
                className='osu-layout__col osu-layout__col--sm-6'
              >
                <BeatmapsetPanel beatmapset={beatmapset} />
              </div>
            ))}

            <div className='osu-layout__col'>
              <ShowMoreLink
                {...pagination}
                callback={this.onShowMore}
                data={section.urlType}
                modifiers='profile-page'
              />
            </div>
{'fraction_non_alphanumeric': 0.12521150592216582, 'fraction_numerical': 0.001504042113179169, 'mean_word_length': 2.6388508891928866, 'pattern_counts': {'":': 0, '<': 33, '<?xml version=': 0, '>': 41, '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': '6640352', 'n_tokens_mistral': 1609, 'n_tokens_neox': 1559, 'n_words': 308}