rovercode · cabarnes · Jul 5, 2019 · Jun 24, 2019 · Jun 24, 2019 · Jun 24, 2019
diff --git a/src/actions/__test__/code.test.js b/src/actions/__test__/code.test.js
@@ -6,6 +6,7 @@ import {
   changeExecutionState,
   changeName,
   changeId,
+  changeReadOnly,
   fetchProgram,
   saveProgram,
   createProgram,
@@ -132,4 +133,12 @@ describe('Code actions', () => {
     expect(payload).toEqual(program);
     mock.restore();
   });
+
+  test('changeReadOnly', () => {
+    const action = changeReadOnly(true);
+    const { type, payload } = action;
+
+    expect(type).toEqual('CHANGE_READ_ONLY');
+    expect(payload).toEqual(true);
+  });
 });
diff --git a/src/actions/code.js b/src/actions/code.js
@@ -20,6 +20,7 @@ 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';
+export const CHANGE_READ_ONLY = 'CHANGE_READ_ONLY';
 
 // Execution States
 export const EXECUTION_RUN = 1;
@@ -87,3 +88,8 @@ export const createProgram = (name, xhroptions) => ({
       data
     )),
 });
+
+export const changeReadOnly = isReadOnly => ({
+  type: CHANGE_READ_ONLY,
+  payload: isReadOnly,
+});
diff --git a/src/components/ProgramList.js b/src/components/ProgramList.js
@@ -13,7 +13,6 @@ import ProgramCollection from './ProgramCollection';
 
 const defaultState = {
   programLoaded: false,
-  programReadOnly: false,
   confirmOpen: false,
   focusProgram: {
     id: null,
@@ -63,13 +62,16 @@ class ProgramList extends Component {
   }
 
   loadProgram = (e) => {
-    const { fetchProgram } = this.props;
+    const { changeReadOnly, fetchProgram } = this.props;
     const readOnly = e.target.dataset.owned === 'false';
 
-    fetchProgram(e.target.id).then(() => this.setState({
-      programLoaded: true,
-      programReadOnly: readOnly,
-    }));
+
+    fetchProgram(e.target.id).then(() => {
+      changeReadOnly(readOnly);
+      this.setState({
+        programLoaded: true,
+      });
+    });
   }
 
   fetch = (params, owned) => {
@@ -107,7 +109,6 @@ class ProgramList extends Component {
       confirmOpen,
       focusProgram,
       programLoaded,
-      programReadOnly,
     } = this.state;
 
     return (
@@ -120,7 +121,6 @@ class ProgramList extends Component {
           programLoaded ? (
             <Redirect to={{
               pathname: '/mission-control',
-              state: { readOnly: programReadOnly },
             }}
             />
           ) : (null)
@@ -168,6 +168,7 @@ ProgramList.propTypes = {
   fetchProgram: PropTypes.func.isRequired,
   fetchPrograms: PropTypes.func.isRequired,
   removeProgram: PropTypes.func.isRequired,
+  changeReadOnly: PropTypes.func.isRequired,
   user: PropTypes.shape({
     user_id: PropTypes.number.isRequired,
   }).isRequired,

diff --git a/src/components/ProgramName.js b/src/components/ProgramName.js
@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React, { Component, Fragment } from 'react';
 import { Confirm, Input } from 'semantic-ui-react';
 import { connect } from 'react-redux';
 import { hot } from 'react-hot-loader';
@@ -7,7 +7,6 @@ import PropTypes from 'prop-types';
 
 import { updateValidAuth } from '@/actions/auth';
 import { changeName as actionChangeName } from '@/actions/code';
-import ReadOnlyComponent from '@/components/ReadOnly';
 
 const mapStateToProps = ({ code }) => ({ code });
 const mapDispatchToProps = (dispatch, { cookies }) => ({
@@ -26,13 +25,13 @@ const mapDispatchToProps = (dispatch, { cookies }) => ({
   },
 });
 
-class ProgramName extends ReadOnlyComponent {
+class ProgramName extends Component {
   constructor(props) {
     super(props);
 
     this.state = {
       confirmOpen: false,
-      editingName: null,
+      editingName: '',
       previousPropName: null, // eslint-disable-line react/no-unused-state
     };
   }
@@ -70,6 +69,7 @@ class ProgramName extends ReadOnlyComponent {
   }
 
   render() {
+    const { code } = this.props;
     const { confirmOpen, editingName, previousPropName } = this.state;
     let actionProp = {};
 
@@ -88,8 +88,8 @@ class ProgramName extends ReadOnlyComponent {
         <Input
           type="text"
           label="Name:"
-          defaultValue={editingName}
-          disabled={this.isReadOnly()}
+          value={editingName}
+          disabled={code.isReadOnly}
           onChange={this.handleChange}
           {...actionProp}
         />
@@ -108,6 +108,7 @@ ProgramName.propTypes = {
   code: PropTypes.shape({
     id: PropTypes.number,
     name: PropTypes.string,
+    isReadOnly: PropTypes.bool,
   }).isRequired,
   changeName: PropTypes.func.isRequired,
 };

diff --git a/src/components/ReadOnly.js b/src/components/ReadOnly.js