Merge pull request codeforboston#1015 from turnerhayes/rename-snippets

Rename 'snippets' to 'translations' in a lot of places. codeforboston#936

OVERVIEW.md

@@ -113,12 +113,12 @@ The type of interaction our partners were looking for was a user-friendly one. S
 
 In the future, this tool could let users try out changes in multiple life circumstances, not just their future income. That said, it should never allow users to change certain kinds of future values. For example, right now the rent share looks like an input _and_ an output. Rent share is just another way of showing the amount of the housing voucher and it _is_ an input for current values. We need that information to calculate future values of the housing voucher. Because we ourselves calculate future values, though, it absolutely can't be a user input field for future values. Basically, you can't put something as an input if it's already a calculated result from the app.
 
-### G2. Snippets
+### G2. Translation objects
 
-Snippets are the way we're working on making the app translatable. As you can see, they have version numbers in the language files. When big changes are made to an English snippet, we bump up that snippet's version number. We then use that to be able to tell what snippets are out of date in other languages. If a snippet is out of date in another language, the app uses the English snippet by default. When another language's snippet is brought up-to-date with the English one, its version number is updated and it will be used in the app again.
+Translation objects are the way we're working on making the app translatable. As you can see, they have version numbers in the language files. When big changes are made to an English translation object, we bump up that translation object's version number. We then use that to be able to tell what translation objects are out of date in other languages. If a translation object is out of date in another language, the app uses the English translation object by default. When another language's translation object is brought up-to-date with the English one, its version number is updated and it will be used in the app again.
 
-When the code preps the snippets for the app, though, it gets rid of the version numbers so that it'll be easier to maintain the code as snippets change. Because we don't want the key name change to be invisible, we decided to add `i_` to the beginning of the snippet. That way a person new to the project can at least see that the weirdness is deliberate and can easily search the code for `i_` to find the source.
+When the code preps the translation objects for the app, though, it gets rid of the version numbers so that it'll be easier to maintain the code as translation objects change. Because we don't want the key name change to be invisible, we decided to add `i_` to the beginning of the translation object. That way a person new to the project can at least see that the weirdness is deliberate and can easily search the code for `i_` to find the source.
 
-There's a wiki page in the works about the flow of editing snippet files, since we use google docs to allow non-coders to edit the translations.
+There's a wiki page in the works about the flow of editing translation object files, since we use google docs to allow non-coders to edit the translations.
 
 ### G3. See some guides in our [wiki](https://github.com/codeforboston/cliff-effects/wiki)

src/App.js

@@ -59,20 +59,20 @@ class App extends Component {
     /**
      *  React state.
      *  @property {string} langCode - [ISO 639-1 code]{@link https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes} of currently selected language
-     *  @property {object} snippets - text snippets in the current language (output of {@link getTextForLanguage})
+     *  @property {object} translations - text translations in the current language (output of {@link getTextForLanguage})
      *  @property {object} clients  - sets of client data to keep track of:
      *  @property {object} clients.default - default set, never changes
      *  @property {object} clients.loaded  - set that has been loaded using the dev HUD
      *  @property {object} devProps - dev HUD settings. They get added as classes to the div that encloses the whole app. May want to rethink.
      *  @property {boolean} devProps.dev - whether dev HUD is turned on
-     *  @property {boolean} devProps.english - whether to highlight English snippets
-     *  @property {boolean} devProps.nonEnglish - whether to highlight snippets in the current language, if that language is not English
+     *  @property {boolean} devProps.english - whether to highlight English translations
+     *  @property {boolean} devProps.nonEnglish - whether to highlight translations in the current language, if that language is not English
      *  @property {boolean} distrustConfirmed - displays modal to accept terms before allowing user to fill out form
      */
     this.state = {
-      langCode: `en`,
-      snippets: getTextForLanguage(`en`),
-      clients:  {
+      langCode:     `en`,
+      translations: getTextForLanguage(`en`),
+      clients:      {
         default: defaults,
         loaded:  defaults,
       },
@@ -99,8 +99,8 @@ class App extends Component {
    * @param {string} inputProps.value - the [ISO 639-1 code]{@link https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes} for the newly selected language.
   */
   setLanguage = (evnt, inputProps) => {
-    let snippets = getTextForLanguage(inputProps.value);
-    this.setState({ language: inputProps.value, snippets: snippets });
+    let translations = getTextForLanguage(inputProps.value);
+    this.setState({ language: inputProps.value, translations: translations });
   };
 
   /** Set the value of a specified key in the app state's devProps.
@@ -174,7 +174,7 @@ class App extends Component {
   render () {
     let {
       langCode,
-      snippets,
+      translations,
       devProps,
       clients,
       distrustConfirmed,
@@ -208,7 +208,7 @@ class App extends Component {
                 return (
                   <Header
                     { ...props }
-                    snippets={{ ...snippets.header, langCode: snippets.langCode }} />);
+                    translations={{ ...translations.header, langCode: translations.langCode }} />);
               } } />
 
             <Switch>
@@ -219,15 +219,15 @@ class App extends Component {
                   return (
                     <HomePage
                       { ...props }
-                      snippets={{ ...snippets.homePage, langCode: snippets.langCode }} />);
+                      translations={{ ...translations.homePage, langCode: translations.langCode }} />);
                 } } />
               <Route
                 path="/about"
                 component={ (props) => {
                   return (
                     <AboutPage
                       { ...props }
-                      snippets={{ ...snippets.aboutPage, langCode: snippets.langCode }} />);
+                      translations={{ ...translations.aboutPage, langCode: translations.langCode }} />);
                 } } />
               <Route
                 path="/visit/:clientId/:visitId/:stepKey?"
@@ -244,7 +244,7 @@ class App extends Component {
                       distrustConfirmed = { distrustConfirmed || warningOff }
                       funcs             = { funcs }
                       confirmer         = { confirmer }
-                      snippets          = {{ ...snippets.visitPage, langCode: snippets.langCode }}
+                      translations      = {{ ...translations.visitPage, langCode: translations.langCode }}
                       clientData        = { clientData } />);
                 } } />
 
@@ -261,7 +261,7 @@ class App extends Component {
 
           </div>
         </HashRouter>
-        <Footer snippets={{ ...snippets.footer, langCode: snippets.langCode }} />
+        <Footer translations={{ ...translations.footer, langCode: translations.langCode }} />
 
         { (devProps.dev === true) ? (
           <DevHud

src/components/Footer.js

@@ -8,7 +8,7 @@ import {
   Image,
 } from 'semantic-ui-react';
 
-const Footer = ({ snippets }) => {
+const Footer = ({ translations }) => {
   return (
     <Segment
       className = { `footer_segment` }
@@ -27,9 +27,9 @@ const Footer = ({ snippets }) => {
             <Header
               as='h4'
               inverted>
-              { snippets.i_header }
+              { translations.i_header }
             </Header>
-            <p>{ snippets.i_cfbCredit }</p>
+            <p>{ translations.i_cfbCredit }</p>
           </Grid.Column>
           <a
 

src/components/Header.js

@@ -15,8 +15,8 @@ class Header extends React.Component {
         textAlign='center'
         vertical
         color='teal'>
-        <MainMenu snippets={ this.props.snippets } />
-        <BetaWarning snippets={ this.props.snippets } />
+        <MainMenu translations={ this.props.translations } />
+        <BetaWarning translations={ this.props.translations } />
       </Segment>
     );
   }

src/components/MainMenu.js

@@ -6,7 +6,7 @@ import {
 import { Link } from 'react-router-dom';
 
 
-const MainMenu = function ({ snippets }) {
+const MainMenu = function ({ translations }) {
   return (
     <Menu
       inverted
@@ -17,17 +17,17 @@ const MainMenu = function ({ snippets }) {
         <Link
           className="main-nav"
           to="/">
-          { snippets.i_homeNav }
+          { translations.i_homeNav }
         </Link>
       </Menu.Item>
       <Menu.Item>
         <Link
           className="main-nav"
           to="/about">
-          { snippets.i_aboutNav }
+          { translations.i_aboutNav }
         </Link>
       </Menu.Item>
-      <Menu.Item>{ snippets.i_githubNav }</Menu.Item>
+      <Menu.Item>{ translations.i_githubNav }</Menu.Item>
       <Menu.Item position='right'>
         {/*<Link to="/login"><Button inverted>Log in</Button></Link>*/}
         {/*<Button as='a' inverted style={{ marginLeft: '0.5em' }}>Sign Up</Button>*/}

src/components/StepBar.js

@@ -3,12 +3,12 @@ import { Step } from 'semantic-ui-react';
 
 import { STEP_VALS } from '../forms/STEP_VALS';
 
-const StepBar = ({ currentStepKey, goToStep, snippets }) => {
+const StepBar = ({ currentStepKey, goToStep, translations }) => {
 
   let cleanSteps = [];
 
   STEP_VALS.forEach((step, index) => {
-    let newStep = { title: { content: snippets[ `i_` + step.key ] }};
+    let newStep = { title: { content: translations[ `i_` + step.key ] }};
     newStep.active = step.key === currentStepKey;
     newStep.onClick = (e) => {
       goToStep({ key: step.key });

src/components/dev/DevHud.js

@@ -25,11 +25,11 @@ const DevMenu = function ({ devProps, funcs, data, state }) {
         langOpts = [];
 
   for (let key in langs) {
-    let snips = langs[ key ],
+    let translations = langs[ key ],
         lang  = {
-          text:  snips.langName,
-          key:   snips.langCode,
-          value: snips.langCode,
+          text:  translations.langName,
+          key:   translations.langCode,
+          value: translations.langCode,
         };
     langOpts.push(lang);
   }
@@ -50,18 +50,18 @@ const DevMenu = function ({ devProps, funcs, data, state }) {
       <Menu.Item header> Snippets</Menu.Item>
       <Menu.Item>
         <Checkbox
-          label    = { `Mark English snippets` }
+          label    = { `Mark English translations` }
           checked  = { devProps.english }
           onChange = { funcs.english } />
       </Menu.Item>
       <Menu.Item>
         <HeadingWithDetail>
           <Checkbox
-            label    = { `Mark non-English snippets` }
+            label    = { `Mark non-English translations` }
             checked  = { devProps.nonEnglish }
             onChange = { funcs.nonEnglish } />
           <span>
-            Note: text that doesn&apos;t have an underline (for reasons) has no snippets.
+            Note: text that doesn&apos;t have an underline (for reasons) has no translations.
           </span>
         </HeadingWithDetail>
       </Menu.Item>

src/components/prompts/PredictionsWarning.js

@@ -12,7 +12,7 @@ import {
  * @extends React.Component
  * @param {boolean} termsAccepted - boolean indicating whether terms and conditions have been accepted by the user
  * @param {function} toggleDistrustConfirmed - function to set the termsAccepted in app state
- * @param {object} snippets - object containing localization snippets
+ * @param {object} translations - object containing translations
  */
 class TermsAndConditions extends Component {
 
@@ -45,7 +45,7 @@ class TermsAndConditions extends Component {
 
     const {
       termsAccepted,
-      snippets,
+      translations,
     } = this.props;
 
     return (
@@ -57,13 +57,13 @@ class TermsAndConditions extends Component {
         closeOnDimmerClick={ false }
         closeOnEscape={ false }>
         <Modal.Header> 
-          { snippets.i_header }
+          { translations.i_header }
         </Modal.Header>
         <Modal.Content scrolling>
 
-          { snippets.i_warning } 
+          { translations.i_warning } 
 
-          <h4>{ snippets.i_formInstructions }</h4>
+          <h4>{ translations.i_formInstructions }</h4>
 
           <div
             className="radio-yes-no"
@@ -75,7 +75,7 @@ class TermsAndConditions extends Component {
                 onClick = { () => {return this.handleChange('checkbox1');} } />
             </Form.Field>
             <Form.Field>
-              { snippets.i_checkboxLabel1 }
+              { translations.i_checkboxLabel1 }
             </Form.Field>
           </div>
 
@@ -89,21 +89,21 @@ class TermsAndConditions extends Component {
                 onClick = { () => {return this.handleChange('checkbox2');} } />
             </Form.Field>
             <Form.Field>
-              { snippets.i_checkboxLabel2 }
+              { translations.i_checkboxLabel2 }
             </Form.Field>
           </div>
 
         </Modal.Content>
         <Modal.Actions>
           <Button
             onClick={ () => {return this.closeModal(false);} }>
-            { snippets.i_buttonCancel }
+            { translations.i_buttonCancel }
           </Button>
           <Button
             disabled={ !this.allowContinue() }
             onClick={ () => {return this.closeModal(true);} }
             color='teal'>
-            { snippets.i_buttonAcceptWarning }
+            { translations.i_buttonAcceptWarning }
           </Button>
         </Modal.Actions>
       </Modal>

src/containers/AboutPage.js

@@ -4,46 +4,46 @@ import { Header, Message } from 'semantic-ui-react';
 import { ExternalLink } from '../components/ExternalLink';
 import { PageLayout } from '../components/PageLayout';
 
-const AboutPage = ({ snippets }) => {
+const AboutPage = ({ translations }) => {
   return (
     <PageLayout>
 
       <Header
         className="ac-header"
         as='h1'>
-        { snippets.i_aboutPageHeader }
+        { translations.i_aboutPageHeader }
       </Header>
 
-      <Header as='h3'>{ snippets.i_whatForHeader }</Header>
-      <Message>{ snippets.i_whatForImportantNote }</Message>
-      <p>{ snippets.i_whatFor }</p>
+      <Header as='h3'>{ translations.i_whatForHeader }</Header>
+      <Message>{ translations.i_whatForImportantNote }</Message>
+      <p>{ translations.i_whatFor }</p>
 
-      <Header as='h3'>{ snippets.i_whyHeader }</Header>
-      <p>{ snippets.i_why1 }</p>
-      <p>{ snippets.i_why2 }</p>
+      <Header as='h3'>{ translations.i_whyHeader }</Header>
+      <p>{ translations.i_why1 }</p>
+      <p>{ translations.i_why2 }</p>
 
       <ul>
         <li>
           <ExternalLink href="https://www.youtube.com/watch?v=BveX_rID4_E">
-            { snippets.i_videoLinkText }
+            { translations.i_videoLinkText }
           </ExternalLink>
         </li>
 
         <li>
           <ExternalLink href="http://www.nccp.org/projects/files/NCCP_CO_presentation07.pdf">
-            { snippets.i_quantLinkText }
+            { translations.i_quantLinkText }
           </ExternalLink>
         </li>
       </ul>
 
-      <Header as='h3'>{ snippets.i_howToUseHeader }</Header>
-      <p>{ snippets.i_howToUse }</p>
-      <Message>{ snippets.i_howToUseNote }</Message>
+      <Header as='h3'>{ translations.i_howToUseHeader }</Header>
+      <p>{ translations.i_howToUse }</p>
+      <Message>{ translations.i_howToUseNote }</Message>
 
-      <Header as='h3'>{ snippets.i_whoMadeThisHeader }</Header>
-      <p>{ snippets.i_whoMadeThis1 }</p>
-      <p>{ snippets.i_whoMadeThis2 }</p>
-      <p>{ snippets.i_whoMadeThis3 }</p>
+      <Header as='h3'>{ translations.i_whoMadeThisHeader }</Header>
+      <p>{ translations.i_whoMadeThis1 }</p>
+      <p>{ translations.i_whoMadeThis2 }</p>
+      <p>{ translations.i_whoMadeThis3 }</p>
 
     </PageLayout>
   );