<commit_before>import * as React from 'react';
import { connect } from 'react-redux';
import { DisplayText, Stack, Card } from '@shopify/polaris';
import { WatcherFolder, RootState } from '../../types';
import { getWatcherIdsAssignedToFolder } from '../../selectors/watcherFolders';
import WatcherFolderListItem from './WatcherFolderListItem';

interface OwnProps {
  readonly folderId: string;
}

interface Props {
  readonly folder: WatcherFolder;
  readonly assignedWatcherIds: string[];
}

// interface Handlers {
//   onScheduleMultipleWatchers: (ids: string[]) => void;
// }

class WatcherFolderInfo extends React.PureComponent<Props & OwnProps, never> {
  public render() {
    const { folder, assignedWatcherIds } = this.props;
    return (
      <Stack vertical>
        <DisplayText>{folder.name}</DisplayText>
        <Card
          sectioned
          title={`${assignedWatcherIds.length} watchers in this folder.`}
          actions={[{ content: 'Start all' }]}
        />
        {assignedWatcherIds.map(watcherId => (
          <WatcherFolderListItem key={watcherId} watcherId={watcherId} />
        ))}
      </Stack>
    );
  }
}

const mapState = (state: RootState, { folderId }: OwnProps): Props => ({
  folder: state.watcherFolders.get(folderId),
  assignedWatcherIds: getWatcherIdsAssignedToFolder(folderId)(state)
});

export default connect(mapState)(WatcherFolderInfo);
<commit_msg>Users can now edit watcher folder names.<commit_after>import * as React from 'react';
import { connect, Dispatch } from 'react-redux';
import { Stack, Card } from '@shopify/polaris';
import { WatcherFolder, RootState } from '../../types';
import { getWatcherIdsAssignedToFolder } from '../../selectors/watcherFolders';
import WatcherFolderListItem from './WatcherFolderListItem';
import WatcherFolderHeading from './WatcherFolderHeading';
import {
  EditWatcherFolder,
  editWatcherFolder
} from '../../actions/watcherFolders';

interface OwnProps {
  readonly folderId: string;
}

interface Props {
  readonly folder: WatcherFolder;
  readonly assignedWatcherIds: string[];
}

interface Handlers {
  readonly onEdit: (id: string, field: 'name', value: string | number) => void;
}

class WatcherFolderInfo extends React.PureComponent<
  Props & OwnProps & Handlers,
  never
> {
  public render() {
    const { folder, assignedWatcherIds, onEdit } = this.props;
    return (
      <Stack vertical>
        <WatcherFolderHeading
          title={folder.name}
          onChange={(value: string) => onEdit(folder.id, 'name', value)}
        />
        <Card
          sectioned
          title={`${assignedWatcherIds.length} watchers in this folder.`}
          actions={[{ content: 'Start all' }]}
        />
        {assignedWatcherIds.map(watcherId => (
          <WatcherFolderListItem key={watcherId} watcherId={watcherId} />
        ))}
      </Stack>
    );
  }
}

const mapState = (state: RootState, { folderId }: OwnProps): Props => ({
  folder: state.watcherFolders.get(folderId),
  assignedWatcherIds: getWatcherIdsAssignedToFolder(folderId)(state)
});

const mapDispatch = (dispatch: Dispatch<EditWatcherFolder>): Handlers => ({
  onEdit: (id: string, field: 'name', value: string) =>
    dispatch(editWatcherFolder(id, field, value))
});

export default connect(mapState, mapDispatch)(WatcherFolderInfo);

{'fraction_non_alphanumeric': 0.12806301050175029, 'fraction_numerical': 0.0, 'mean_word_length': 3.28625, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 26, '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': '1457964', 'n_tokens_mistral': 1032, 'n_tokens_neox': 1026, 'n_words': 232}