<commit_before>import React from 'react';
import styled from 'styled-components';
import API from 'api';
import UIState from 'ui/UIState';

const Container = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
`;

const Button = styled.button`
  border: 1px solid #a2bfe8;
  border-radius: 5px;
  background: transparent;
  padding: 3px;
  margin: 0 6px;
  outline: none;
  cursor: pointer;
  color: #4882d3;
  font-size: 14px;
`;

const Text = styled.span`
  color: #858585;
`;

export class MultiSelectView extends React.Component {

  groupMocks = () => {
    const group = API.addGroup({ name: 'Grouped Mocks' });

    if (group) {
      this.props.selectedMocks.forEach((mock) => {
        if (mock.groupId) {
          API.mockRequest({ ...mock, groupId: group.id });
          return;
        }

        API.updateMock(mock.id, { ...mock, groupId: group.id })
      });
    }

    this.props.selectMock(group.mocks[0]);

    const groups = UIState.groups.map((item) => {
      if (item.id === group.id) {
        return { ...item, isOpen: true }
      }

      return item;
    });

    UIState.update({ groups });
  };

  render() {
    return (
      <Container>
        <div>
          <Button onClick={ this.groupMocks }>Group</Button>
          <Text>these mocks</Text>
        </div>
      </Container>
    );
  }

}

export default MultiSelectView;
<commit_msg>Fix a bug where duplicated mocks had the same id<commit_after>import React from 'react';
import styled from 'styled-components';
import API from 'api';
import UIState from 'ui/UIState';
import omit from 'lodash/omit';

const Container = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
`;

const Button = styled.button`
  border: 1px solid #a2bfe8;
  border-radius: 5px;
  background: transparent;
  padding: 3px;
  margin: 0 6px;
  outline: none;
  cursor: pointer;
  color: #4882d3;
  font-size: 14px;
`;

const Text = styled.span`
  color: #858585;
`;

export class MultiSelectView extends React.Component {

  groupMocks = () => {
    const group = API.addGroup({ name: 'Grouped Mocks' });

    if (group) {
      this.props.selectedMocks.forEach((mock) => {
        if (mock.groupId) {
          API.mockRequest({ ...omit(mock, ['id']), groupId: group.id });
          return;
        }

        API.updateMock(mock.id, { ...mock, groupId: group.id })
      });
    }

    this.props.selectMock(group.mocks[0]);

    const groups = UIState.groups.map((item) => {
      if (item.id === group.id) {
        return { ...item, isOpen: true }
      }

      return item;
    });

    UIState.update({ groups });
  };

  render() {
    return (
      <Container>
        <div>
          <Button onClick={ this.groupMocks }>Group</Button>
          <Text>these mocks</Text>
        </div>
      </Container>
    );
  }

}

export default MultiSelectView;

{'fraction_non_alphanumeric': 0.1478612327382957, 'fraction_numerical': 0.016167059616032334, 'mean_word_length': 2.518957345971564, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 25, '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': '7303180', 'n_tokens_mistral': 1036, 'n_tokens_neox': 984, 'n_words': 242}