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,28 +262,74 @@ export class EditDictionaryModal extends Component {
         }
       >
 
-        <div className='tabs'>
-          <ul>
-            <li className={ (currentDisplay === DISPLAY.DETAILS) ? 'is-active' : null }>
-              <a onClick={ this.toggleDisplay.bind(this, DISPLAY.DETAILS) }>
-                Details
-              </a>
-            </li>
-            <li className={ (currentDisplay === DISPLAY.LINGUISTICS) ? 'is-active' : null }>
-              <a onClick={ this.toggleDisplay.bind(this, DISPLAY.LINGUISTICS) }>
-                Linguistics
-              </a>
-            </li>
-            <li className={ (currentDisplay === DISPLAY.SETTINGS) ? 'is-active' : null }>
-              <a onClick={ this.toggleDisplay.bind(this, DISPLAY.SETTINGS) }>
-                Settings
-              </a>
-            </li>
-          </ul>
-        </div>
+        {!settings.isComplete
+          ? [(
+              <div className='tabs'>
+                <ul>
+                  <li className={ (currentDisplay === DISPLAY.DETAILS) ? 'is-active' : null }>
+                    <a onClick={ this.toggleDisplay.bind(this, DISPLAY.DETAILS) }>
+                      Details
+                    </a>
+                  </li>
+                  <li className={ (currentDisplay === DISPLAY.LINGUISTICS) ? 'is-active' : null }>
+                    <a onClick={ this.toggleDisplay.bind(this, DISPLAY.LINGUISTICS) }>
+                      Linguistics
+                    </a>
+                  </li>
+                  <li className={ (currentDisplay === DISPLAY.SETTINGS) ? 'is-active' : null }>
+                    <a onClick={ this.toggleDisplay.bind(this, DISPLAY.SETTINGS) }>
+                      Settings
+                    </a>
+                  </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,42 +15,44 @@ export const LeftColumn = (props) => {
     children: PropTypes.object,
   }, props, 'prop', 'LeftColumn');
 
-  const { isMobile, displayForm, openWordForm, closeWordForm } = props;
+  const { isDisabled, isMobile, displayForm, openWordForm, closeWordForm } = props;
 
-  return (
-    <div className={ `left-column-${ displayForm ? 'open' : 'closed' }` } >
-      {isMobile
-        ? (
-          <div className='floating-word-button'>
-            <Modal title='New Word'
-              buttonText={<span className='icon'><i className='fa fa-plus' /></span>}
-            >
-              { props.children }
-            </Modal>
-          </div>
-        ) : (
-          <div>
-            {displayForm
-              ? (
-                <div className='floating-word-form'>
-                  <a className='button is-pulled-right'
-                    onClick={ closeWordForm }
-                  >
-                    <span className='icon'><i className='fa fa-close' /></span>
-                  </a>
-                  { props.children }
-                </div>
-              ) : (
-                <div className='floating-word-button'>
-                  <a className='button' onClick={ openWordForm }>
-                    <span className='icon'><i className='fa fa-plus' /></span>
-                  </a>
-                </div>
-              )
-            }
-          </div>
-        )
-      }
-    </div>
-  );
-}
+  if (!isDisabled) {
+    return (
+      <div className={ `left-column-${ displayForm ? 'open' : 'closed' }` } >
+        {isMobile
+          ? (
+            <div className='floating-word-button'>
+              <Modal title='New Word'
+                buttonText={<span className='icon'><i className='fa fa-plus' /></span>}
+              >
+                { props.children }
+              </Modal>
+            </div>
+          ) : (
+            <div>
+              {displayForm
+                ? (
+                  <div className='floating-word-form'>
+                    <a className='button is-pulled-right'
+                      onClick={ closeWordForm }
+                    >
+                      <span className='icon'><i className='fa fa-close' /></span>
+                    </a>
+                    { props.children }
+                  </div>
+                ) : (
+                  <div className='floating-word-button'>
+                    <a className='button' onClick={ openWordForm }>
+                      <span className='icon'><i className='fa fa-plus' /></span>
+                    </a>
+                  </div>
+                )
+              }
+            </div>
+          )
+        }
+      </div>
+    );
+  }
+}