Program name component

src/actions/__test__/code.test.js

@@ -38,12 +38,28 @@ describe('Code actions', () => {
     expect(payload).toEqual(EXECUTION_RUN);
   });
 
-  test('changeName', () => {
-    const action = changeName('test name');
-    const { type, payload } = action;
+  test('changeName', async () => {
+    const mock = new MockAdapter(axios);
+    const program = {
+      id: 1,
+      name: 'test name',
+      content: '<xml></xml>',
+      user: 1,
+    };
+    const name = {
+      name: 'test name',
+    };
+
+    mock.onPatch('/api/v1/block-diagrams/1/', name).reply(200, program);
+
+    const action = changeName(1, 'test name');
+    const { type } = action;
+    const payload = await action.payload;
 
     expect(type).toEqual('CHANGE_NAME');
-    expect(payload).toEqual('test name');
+    expect(payload).toEqual(program);
+
+    mock.restore();
   });
 
   test('changeId', () => {

src/actions/code.js

@@ -17,6 +17,8 @@ export const UPDATE_JSCODE = 'UPDATE_JSCODE';
 export const UPDATE_XMLCODE = 'UPDATE_XMLCODE';
 export const CHANGE_EXECUTION_STATE = 'CHANGE_EXECUTION_STATE';
 export const CHANGE_NAME = 'CHANGE_NAME';
+export const CHANGE_NAME_FULFILLED = `${CHANGE_NAME}_FULFILLED`;
+export const CHANGE_NAME_REJECTED = `${CHANGE_NAME}_REJECTED`;
 export const CHANGE_ID = 'CHANGE_ID';
 
 // Execution States
@@ -41,9 +43,14 @@ export const changeExecutionState = state => ({
   payload: state,
 });
 
-export const changeName = name => ({
+export const changeName = (id, name, xhroptions) => ({
   type: CHANGE_NAME,
-  payload: name,
+  payload: axios.patch(`/api/v1/block-diagrams/${id}/`, {
+    name,
+  }, xhroptions)
+    .then(({ data }) => (
+      data
+    )),
 });
 
 export const changeId = id => ({

src/components/ProgramName.js

@@ -0,0 +1,96 @@
+import React, { Component, Fragment } from 'react';
+import { Confirm, Input } from 'semantic-ui-react';
+import { connect } from 'react-redux';
+import { hot } from 'react-hot-loader';
+import { withCookies } from 'react-cookie';
+import PropTypes from 'prop-types';
+
+import { changeName as actionChangeName } from '@/actions/code';
+
+const mapStateToProps = ({ code }) => ({ code });
+const mapDispatchToProps = (dispatch, { cookies }) => ({
+  changeName: (id, name) => {
+    const changeNameAction = actionChangeName(id, name, {
+      headers: {
+        Authorization: `JWT ${cookies.get('auth_jwt')}`,
+      },
+    });
+    return dispatch(changeNameAction);
+  },
+});
+
+class Console extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      confirmOpen: false,
+      editingName: null,
+      previousPropName: null, // eslint-disable-line react/no-unused-state
+    };
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    const { code } = props;
+    const { previousPropName } = state;
+
+    if (code.name !== previousPropName) {
+      return {
+        editingName: code.name,
+        previousPropName: code.name,
+      };
+    }
+
+    return null;
+  }
+
+  closeConfirm = () => this.setState({ confirmOpen: false })
+
+  openConfirm = () => this.setState({ confirmOpen: true })
+
+  handleChange = (e) => {
+    this.setState({
+      editingName: e.target.value,
+    });
+  }
+
+  handleSave = () => {
+    const { changeName, code } = this.props;
+    const { editingName } = this.state;
+
+    changeName(code.id, editingName);
+    this.closeConfirm();
+  }
+
+  render() {
+    const { confirmOpen, editingName } = this.state;
+
+    return (
+      <Fragment>
+        <Input
+          type="text"
+          label="Name:"
+          defaultValue={editingName}
+          onChange={this.handleChange}
+          action={{ content: 'Save', onClick: this.openConfirm }}
+        />
+        <Confirm
+          content="Are you sure that you want to change the name of this program?"
+          open={confirmOpen}
+          onCancel={this.closeConfirm}
+          onConfirm={this.handleSave}
+        />
+      </Fragment>
+    );
+  }
+}
+
+Console.propTypes = {
+  code: PropTypes.shape({
+    id: PropTypes.number,
+    name: PropTypes.string,
+  }).isRequired,
+  changeName: PropTypes.func.isRequired,
+};
+
+export default hot(module)(withCookies(connect(mapStateToProps, mapDispatchToProps)(Console)));

src/components/__tests__/ProgramName.test.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import { Confirm, Input } from 'semantic-ui-react';
+import { mount, shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
+import configureStore from 'redux-mock-store';
+import { Cookies } from 'react-cookie';
+
+import { changeName } from '@/actions/code';
+import ProgramName from '../ProgramName';
+
+const cookiesValues = { auth_jwt: '1234' };
+const cookies = new Cookies(cookiesValues);
+
+describe('The Console component', () => {
+  const mockStore = configureStore();
+  const context = { cookies };
+  let store;
+
+  beforeEach(() => {
+    store = mockStore({
+      code: {
+        name: 'test name',
+      },
+    });
+    store.dispatch = jest.fn();
+  });
+
+  test('renders on the page with no errors', () => {
+    const wrapper = mount(<ProgramName store={store} />, { context });
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+
+  test('displays name', () => {
+    const wrapper = shallow(<ProgramName store={store} />, { context }).dive().dive();
+
+    expect(wrapper.find(Confirm).prop('open')).toBe(false);
+    expect(wrapper.find(Input).length).toBe(1);
+    expect(wrapper.find(Input).props().defaultValue).toBe('test name');
+  });
+
+  test('handles change', () => {
+    const wrapper = shallow(<ProgramName store={store} />, { context }).dive().dive();
+
+    wrapper.find(Input).simulate('change', { target: { value: 'new name' } });
+    wrapper.update();
+
+    expect(wrapper.find(Confirm).prop('open')).toBe(false);
+    expect(wrapper.find(Input).props().defaultValue).toBe('new name');
+  });
+
+  test('handles save cancel', () => {
+    const wrapper = shallow(<ProgramName store={store} />, { context }).dive().dive();
+
+    // User opens save confirmation modal
+    wrapper.find(Input).props().action.onClick();
+    wrapper.update();
+
+    expect(wrapper.find(Confirm).prop('open')).toBe(true);
+
+    // User clicks 'cancel'
+    wrapper.find(Confirm).prop('onCancel')();
+    wrapper.update();
+
+    expect(wrapper.find(Confirm).prop('open')).toBe(false);
+    expect(store.dispatch).not.toHaveBeenCalled();
+  });
+
+  test('handles save confirm', () => {
+    const wrapper = shallow(<ProgramName store={store} />, { context }).dive().dive();
+
+    // User opens save confirmation modal
+    wrapper.find(Input).props().action.onClick();
+    wrapper.update();
+
+    expect(wrapper.find(Confirm).prop('open')).toBe(true);
+
+    // User clicks 'OK'
+    wrapper.find(Confirm).prop('onConfirm')();
+    wrapper.update();
+
+    expect(wrapper.find(Confirm).prop('open')).toBe(false);
+    expect(store.dispatch).toHaveBeenCalled();
+    expect(store.dispatch).toHaveBeenCalledWith(changeName('test name'));
+  });
+});