adds locale toggle, fixes topic naming bug, fixes control flow for ed…

…itors
Datawheel · Feb 7, 2019 · f3b0422 · f3b0422
1 parent d1ee5c1
commit f3b0422
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 7 deletions.
diff --git a/packages/cms/src/Builder.jsx b/packages/cms/src/Builder.jsx
@@ -6,6 +6,7 @@ import StoryBuilder from "./story/StoryBuilder";
 import FormatterEditor from "./formatter/FormatterEditor";
 import {fetchData} from "@datawheel/canon-core";
 import {connect} from "react-redux";
+import {Checkbox} from "@blueprintjs/core";
 
 import "./cms.css";
 import "./themes/cms-dark.css";
@@ -21,6 +22,7 @@ class Builder extends Component {
       locales: false,
       locale: false,
       localeDefault: false,
+      showLocale: false,
 
       formatters: (props.formatters || []).reduce((acc, d) => {
         const f = Function("n", "libs", "formatters", d.logic);
@@ -36,14 +38,17 @@ class Builder extends Component {
     // The CMS is only accessible on localhost/dev. Redirect the user to root otherwise.
     if (!isEnabled && typeof window !== "undefined" && window.location.pathname !== "/") window.location = "/";
 
-    // env.CANON_LANGUAGES = false;
+    env.CANON_LANGUAGES = false;
     // Retrieve the langs from canon vars, use it to build the second language select dropdown.
     const localeDefault = env.CANON_LANGUAGE_DEFAULT || "en";
     if (env.CANON_LANGUAGES && env.CANON_LANGUAGES.includes(",")) {
       const locales = env.CANON_LANGUAGES.split(",").filter(l => l !== localeDefault);
       const locale = locales[0];
       this.setState({locales, locale, localeDefault});
     }
+    else {
+      this.setState({localeDefault});
+    }
   }
 
   getChildContext() {
@@ -58,6 +63,10 @@ class Builder extends Component {
     }
   }
 
+  toggleLocale(e) {
+    this.setState({showLocale: e.target.checked});
+  }
+
   handleThemeSelect(e) {
     this.setState({theme: e.target.value});
   }
@@ -67,7 +76,7 @@ class Builder extends Component {
   }
 
   render() {
-    const {currentTab, theme, locale, locales, localeDefault} = this.state;
+    const {currentTab, theme, locale, locales, localeDefault, showLocale} = this.state;
     const {isEnabled} = this.props;
     const navLinks = ["profiles", "stories", "formatters"];
 
@@ -95,6 +104,7 @@ class Builder extends Component {
               {locales.map(loc => <option key={loc} value={loc}>{loc}</option>)}
             </select>
           </label>}
+          {locales && <Checkbox className="cms-lang-toggle" checked={showLocale} label={showLocale ? "Show Both Locales" : "Show One Locale"} onChange={this.toggleLocale.bind(this)} />}
           <label className="cms-select-label cms-theme-select">theme: 
             <select
               className="cms-select"

diff --git a/packages/cms/src/profile/ProfileBuilder.css b/packages/cms/src/profile/ProfileBuilder.css
@@ -103,6 +103,10 @@
   margin: 10px;
 }
 
+.cms-lang-toggle {
+  margin-top:8px;
+}
+
 /* #Search {
   z-index: 1;
   position: relative;

diff --git a/packages/cms/src/profile/ProfileBuilder.jsx b/packages/cms/src/profile/ProfileBuilder.jsx
@@ -441,7 +441,7 @@ class ProfileBuilder extends Component {
     p.label = varSwap(p.data.slug, formatters, variables);
     p.childNodes = p.childNodes.map(t => {
       const defCon = t.data.content.find(c => c.lang === localeDefault);
-      const title = defCon && defCon.title ? defCon.title : t.slug;
+      const title = defCon && defCon.title ? defCon.title : t.data.slug;
       t.label = varSwap(this.decode(stripHTML(title)), formatters, variables);
       return t;
     });

diff --git a/packages/cms/src/profile/ProfileEditor.jsx b/packages/cms/src/profile/ProfileEditor.jsx
@@ -118,7 +118,12 @@ class ProfileEditor extends Component {
     const {minData, recompiling} = this.state;
     const {children, variables, preview, locale, localeDefault} = this.props;
 
-    if (!minData || !variables || variables && (!variables[localeDefault] || !variables[locale])) return <Loading />;
+    const dataLoaded = minData;
+    const varsLoaded = variables;
+    const defLoaded = variables && !locale && variables[localeDefault];
+    const locLoaded = !locale || variables && locale && variables[localeDefault] && variables[locale];
+
+    if (!dataLoaded || !varsLoaded || !defLoaded || !locLoaded) return <Loading />;
 
     return (
       <div className="cms-editor-inner">

diff --git a/packages/cms/src/profile/TopicEditor.jsx b/packages/cms/src/profile/TopicEditor.jsx
@@ -92,8 +92,9 @@ class TopicEditor extends Component {
   }
 
   onSave(minData) {
-    const enCon = minData.content.find(c => c.lang === "en");
-    const title = enCon.title || "Title Error";
+    const {localeDefault} = this.props;
+    const defCon = minData.content.find(c => c.lang === localeDefault);
+    const title = defCon && defCon.title ? defCon.title : minData.slug;
     if (this.props.reportSave) this.props.reportSave("topic", minData.id, title);
   }
 
@@ -120,7 +121,12 @@ class TopicEditor extends Component {
     const {minData, recompiling} = this.state;
     const {variables, preview, children, locale, localeDefault} = this.props;
 
-    if (!minData || !variables || variables && (!variables[localeDefault] || !variables[locale])) return <Loading />;
+    const dataLoaded = minData;
+    const varsLoaded = variables;
+    const defLoaded = variables && !locale && variables[localeDefault];
+    const locLoaded = !locale || variables && locale && variables[localeDefault] && variables[locale];
+
+    if (!dataLoaded || !varsLoaded || !defLoaded || !locLoaded) return <Loading />;
 
     const varOptions = [<option key="always" value="always">Always</option>]
       .concat(Object.keys(variables[localeDefault])