Disable editing dictionary if marked complete

src/components/MainDisplay.jsx

@@ -49,6 +49,7 @@ export class MainDisplay extends Component {
   render () {
     const { dictionaryInfo, wordsToDisplay, updateDisplay, updater } = this.props;
     const { isMobile, wordFormIsOpen } = this.state;
+    const wordFormIsDisabled = dictionaryInfo.settings.isComplete;
 
     return (
       <section className='section'>
@@ -56,6 +57,7 @@ export class MainDisplay extends Component {
           <div className='columns'>
             
             <LeftColumn
+              isDisabled={ wordFormIsDisabled }
               isMobile={ isMobile }
               displayForm={ wordFormIsOpen }
               openWordForm={ this.openWordForm.bind(this) }
@@ -66,7 +68,7 @@ export class MainDisplay extends Component {
               />
             </LeftColumn>
 
-            <RightColumn formIsDisplayed={ this.state.wordFormIsOpen }>
+            <RightColumn formIsDisplayed={ !wordFormIsDisabled && wordFormIsOpen }>
               <DictionaryDetails
                 updater={ updater }
                 name={ dictionaryInfo.name }

src/components/management/EditDictionaryModal/EditSettingsForm.jsx

@@ -106,7 +106,7 @@ export const EditSettingsForm = (props) => {
               }} />
           </label>
           <div className='help'>
-            Checking this box will mark your { specification } as "complete", and you will not be able to alter it until this checkbox is unchecked.
+            Checking this box will mark your { specification } as "complete" and prevent any changes from being made.
           </div>
         </div>
       </div>

src/components/management/EditDictionaryModal/index.jsx

@@ -242,10 +242,11 @@ export class EditDictionaryModal extends Component {
 
   render () {
     const { currentDisplay, hasChanged } = this.state;
+    const { specification, settings, isLoggedIn } = this.props;
 
     return (
-      <Modal title={ `Edit ${ this.props.specification }` }
-        buttonText={ `Edit ${ this.props.specification }` }
+      <Modal title={ `Edit ${ specification }` }
+        buttonText={ `Edit ${ specification }` }
         footerAlign='right'
         footerContent={
           (
@@ -261,6 +262,8 @@ export class EditDictionaryModal extends Component {
         }
       >
 
+        {!settings.isComplete
+          ? [(
               <div className='tabs'>
                 <ul>
                   <li className={ (currentDisplay === DISPLAY.DETAILS) ? 'is-active' : null }>
@@ -280,9 +283,53 @@ export class EditDictionaryModal extends Component {
                   </li>
                 </ul>
               </div>
+            ),
+            this.displaySection(),
+          ] : (
+            <div className='columns'>
 
-        { this.displaySection() }
+              <div className='column has-text-centered'>
+                { specification } marked complete<br />
+                <a className='button is-warning is-small'
+                  onClick={() => {
+                    this.setState({ isComplete: false, currentDisplay: DISPLAY.SETTINGS }, () => {
+                      this.save();
+                    })
+                  }}>
+                  Mark it incomplete
+                </a>
+              </div>
 
+              {isLoggedIn
+               && (
+                  <div className='column has-text-centered'>
+                    Your dictionary is <strong>{ settings.isPublic ? 'Public' : 'Private'}</strong>
+                    {settings.isPublic
+                      && (
+                        [
+                          ' You can view it at',
+                          <br />,
+                          <a className='button is-text is-small'
+                            onClick={() => console.log('set up copying to clipboard')}>
+                            PUBLIC_LINK
+                          </a>,
+                        ]
+                      )}
+                    <br />
+                    <a className='button is-small'
+                      onClick={() => {
+                        this.setState({ isPublic: !settings.isPublic }, () => {
+                          this.save();
+                        })
+                      }}>
+                      Mark it { settings.isPublic ? 'Private' : 'Public'}
+                    </a>
+                  </div>
+                )}
+
+            </div>
+          )
+        }
       </Modal>
     );
   }

src/components/structure/LeftColumn/index.jsx

@@ -7,6 +7,7 @@ import './styles.scss';
 
 export const LeftColumn = (props) => {
   PropTypes.checkPropTypes({
+    isDisabled: PropTypes.bool,
     isMobile: PropTypes.bool.isRequired,
     displayForm: PropTypes.bool.isRequired,
     openWordForm: PropTypes.func.isRequired,
@@ -14,8 +15,9 @@ export const LeftColumn = (props) => {
     children: PropTypes.object,
   }, props, 'prop', 'LeftColumn');
 
-  const { isMobile, displayForm, openWordForm, closeWordForm } = props;
+  const { isDisabled, isMobile, displayForm, openWordForm, closeWordForm } = props;
 
+  if (!isDisabled) {
     return (
       <div className={ `left-column-${ displayForm ? 'open' : 'closed' }` } >
         {isMobile
@@ -52,4 +54,5 @@ export const LeftColumn = (props) => {
         }
       </div>
     );
+  }
 }