Merge pull request #1070 from prolland006/bug1066

#1066 Capitalization across Community Platform
ONEARMY · Jul 17, 2021 · cc9b2b3 · cc9b2b3
2 parents cb22542 + f72181d
commit cc9b2b3
Show file tree

Hide file tree

Showing 8 changed files with 69 additions and 19 deletions.
diff --git a/src/components/EventCard/EventCard.tsx b/src/components/EventCard/EventCard.tsx
@@ -5,7 +5,7 @@ import { Button } from 'src/components/Button'
 import TagDisplay from 'src/components/Tags/TagDisplay/TagDisplay'
 import FlagIconEvents from 'src/components/Icons/FlagIcon/FlagIcon'
 import { IEvent } from '../../models/events.models'
-import { getMonth, getDay } from 'src/utils/helpers'
+import { getMonth, getDay, capitalizeFirstLetter } from 'src/utils/helpers'
 import { LinkTargetBlank } from '../Links/LinkTargetBlank/LinkTargetBlank'
 
 interface IProps {
@@ -76,7 +76,7 @@ export const EventCard = (props: IProps) => (
     >
       <Flex alignItems={'center'} width={1}>
         <Text bold color="black" fontSize={[3, 3, 4]}>
-          {props.event.title}
+          {capitalizeFirstLetter(props.event.title)}
         </Text>
       </Flex>
       <Text auxiliary width={1}>

diff --git a/src/components/Form/Fields.tsx b/src/components/Form/Fields.tsx
@@ -8,11 +8,16 @@ import {
 } from './elements'
 import { FieldRenderProps } from 'react-final-form'
 import 'react-datepicker/dist/react-datepicker.css'
+import { capitalizeFirstLetter } from 'src/utils/helpers'
 
 // any props can be passed to field and down to child component
 // input and meta props come from react field render props and will be
 // picked up by typing
 type FieldProps = FieldRenderProps<any, any> & { children?: React.ReactNode }
+
+type InputModifiers = {
+  capitalize?: boolean
+}
 export interface IFieldProps extends FieldProps {
   // additional fields intending to pass down
   disabled?: boolean
@@ -25,10 +30,19 @@ interface IDatePickerFieldProps extends IFieldProps {
   customChange?: (location) => void
 }
 
+const processInputModifiers = (value: any, modifiers: InputModifiers = {}) => {
+  if (typeof value !== 'string') return value
+  if (modifiers.capitalize) {
+    value = capitalizeFirstLetter(value)
+  }
+  return value
+}
+
 export const InputField = ({
   input,
   meta,
   customOnBlur,
+  modifiers,
   ...rest
 }: IFieldProps) => (
   <>
@@ -37,17 +51,22 @@ export const InputField = ({
       {...input}
       {...rest}
       onBlur={e => {
+        if (modifiers) {
+          e.target.value = processInputModifiers(e.target.value, modifiers)
+          input.onChange(e)
+        }
         if (customOnBlur) {
           customOnBlur(e)
         }
-        input.onBlur()
+        input.onBlur(e)
       }}
     />
     {meta.error && meta.touched ? (
       <ErrorMessage>{meta.error}</ErrorMessage>
     ) : null}
   </>
 )
+
 export const DatePickerField = ({
   input,
   meta,
@@ -82,6 +101,8 @@ export const TextAreaField = ({
   input,
   meta,
   disabled,
+  modifiers,
+  customOnBlur,
   ...rest
 }: IFieldProps) =>
   disabled ? (
@@ -93,6 +114,16 @@ export const TextAreaField = ({
         invalid={meta.error && meta.touched}
         {...input}
         {...rest}
+        onBlur={e => {
+          if (modifiers) {
+            e.target.value = processInputModifiers(e.target.value, modifiers)
+            input.onChange(e)
+          }
+          if (customOnBlur) {
+            customOnBlur(e)
+          }
+          input.onBlur()
+        }}
       />
       {meta.error && meta.touched && <ErrorMessage>{meta.error}</ErrorMessage>}
     </>

diff --git a/src/pages/Events/Content/EventsCreate/EventsCreate.tsx b/src/pages/Events/Content/EventsCreate/EventsCreate.tsx
@@ -146,6 +146,7 @@ export class EventsCreate extends React.Component<IProps, IState> {
                           data-cy="title"
                           validate={required}
                           validateFields={[]}
+                          modifiers={{ capitalize: true }}
                           component={InputField}
                           maxLength="140"
                           placeholder="Title of your event (max 140 characters)"

diff --git a/src/pages/Howto/Content/Common/Howto.form.tsx b/src/pages/Howto/Content/Common/Howto.form.tsx
@@ -50,27 +50,29 @@ interface IInjectedProps extends IProps {
 
 const AnimationContainer = (props: any) => {
   const variants = {
-    pre: { 
-      opacity: 0
+    pre: {
+      opacity: 0,
     },
     enter: {
       opacity: 1,
-      duration: .200,
-      display: "block",
+      duration: 0.2,
+      display: 'block',
     },
     post: {
-      display: "none",
-      duration: .200,
+      display: 'none',
+      duration: 0.2,
       top: '-100%',
     },
   }
   return (
-    <motion.div layout
+    <motion.div
+      layout
       initial="pre"
       animate="enter"
       exit="post"
-      variants={variants}>
-        { props.children }
+      variants={variants}
+    >
+      {props.children}
     </motion.div>
   )
 }
@@ -239,6 +241,7 @@ export class HowtoForm extends React.PureComponent<IProps, IState> {
                                 validateFields={[]}
                                 validate={this.validateTitle}
                                 isEqual={COMPARISONS.textInput}
+                                modifiers={{ capitalize: true }}
                                 component={InputField}
                                 maxLength="50"
                                 placeholder="Make a chair from.. (max 50 characters)"
@@ -296,6 +299,7 @@ export class HowtoForm extends React.PureComponent<IProps, IState> {
                                 data-cy="intro-description"
                                 validate={required}
                                 validateFields={[]}
+                                modifiers={{ capitalize: true }}
                                 isEqual={COMPARISONS.textInput}
                                 component={TextAreaField}
                                 style={{

diff --git a/src/pages/Howto/Content/Common/HowtoStep.form.tsx b/src/pages/Howto/Content/Common/HowtoStep.form.tsx
@@ -1,4 +1,4 @@
-import { PureComponent } from 'react';
+import { PureComponent } from 'react'
 import { Field } from 'react-final-form'
 import { TextAreaField, InputField } from 'src/components/Form/Fields'
 import Heading from 'src/components/Heading'
@@ -143,6 +143,7 @@ class HowtoStep extends PureComponent<IProps, IState> {
           <Field
             name={`${step}.title`}
             data-cy="step-title"
+            modifiers={{ capitalize: true }}
             component={InputField}
             placeholder="Title of this step (max 30 characters)"
             maxLength="30"
@@ -158,6 +159,7 @@ class HowtoStep extends PureComponent<IProps, IState> {
             placeholder="Explain what you are doing in this step. if it gets to long break it into 2 steps (max 700 characters)"
             maxLength="700"
             data-cy="step-description"
+            modifiers={{ capitalize: true }}
             component={TextAreaField}
             style={{ resize: 'vertical', height: '300px' }}
             validate={required}

diff --git a/src/pages/Howto/Content/Howto/HowtoDescription/HowtoDescription.tsx b/src/pages/Howto/Content/Howto/HowtoDescription/HowtoDescription.tsx
@@ -13,7 +13,11 @@ import TimeNeeded from 'src/assets/icons/icon-time-needed.svg'
 import DifficultyLevel from 'src/assets/icons/icon-difficulty-level.svg'
 import { Button } from 'src/components/Button'
 import { IUser } from 'src/models/user.models'
-import { isAllowToEditContent, emStringToPx } from 'src/utils/helpers'
+import {
+  isAllowToEditContent,
+  emStringToPx,
+  capitalizeFirstLetter,
+} from 'src/utils/helpers'
 import theme from 'src/themes/styled.theme'
 import ArrowIcon from 'src/assets/icons/icon-arrow-select.svg'
 import { FlagIconHowTos } from 'src/components/Icons/FlagIcon/FlagIcon'
@@ -147,7 +151,8 @@ export default class HowtoDescription extends PureComponent<IProps> {
               {this.dateLastEditText(howto)}
             </Text>
             <Heading medium mt={2} mb={1}>
-              {howto.title}
+              {/* HACK 2021-07-16 - new howtos auto capitalize title but not older */}
+              {capitalizeFirstLetter(howto.title)}
             </Heading>
             <Text preLine paragraph>
               {howto.description}

diff --git a/src/pages/Howto/Content/Howto/Step/Step.tsx b/src/pages/Howto/Content/Howto/Step/Step.tsx
@@ -1,4 +1,4 @@
-import { PureComponent } from 'react';
+import { PureComponent } from 'react'
 import Linkify from 'react-linkify'
 import ReactPlayer from 'react-player'
 import { Box } from 'rebass'
@@ -8,6 +8,7 @@ import ImageGallery from 'src/components/ImageGallery'
 import Text from 'src/components/Text'
 import { IHowtoStep } from 'src/models/howto.models'
 import { IUploadedFileMeta } from 'src/stores/storage'
+import { capitalizeFirstLetter } from 'src/utils/helpers'
 import styled from 'styled-components'
 
 interface IProps {
@@ -57,11 +58,15 @@ export default class Step extends PureComponent<IProps> {
           >
             <Flex width={[1, 1, 4 / 9]} py={4} px={4} flexDirection={'column'}>
               <Heading medium mb={0}>
-                {step.title}
+                {/* HACK 2021-07-16 - new howtos auto capitalize title but not older */}
+                {capitalizeFirstLetter(step.title)}
               </Heading>
               <Box>
                 <Text preLine paragraph mt={3} color={'grey'}>
-                  <Linkify>{step.text}</Linkify>
+                  <Linkify>
+                    {/* HACK 2021-07-16 - new howtos auto capitalize title but not older */}
+                    {capitalizeFirstLetter(step.text)}
+                  </Linkify>
                 </Text>
               </Box>
             </Flex>

diff --git a/src/pages/Howto/Content/HowtoList/HowToCard.tsx b/src/pages/Howto/Content/HowtoList/HowToCard.tsx
@@ -7,6 +7,7 @@ import { FlagIconHowTos } from 'src/components/Icons/FlagIcon/FlagIcon'
 import TagDisplay from 'src/components/Tags/TagDisplay/TagDisplay'
 import { IHowtoDB } from 'src/models/howto.models'
 import Heading from 'src/components/Heading'
+import { capitalizeFirstLetter } from 'src/utils/helpers'
 
 interface IProps {
   howto: IHowtoDB
@@ -48,7 +49,8 @@ export const HowToCard = (props: IProps) => (
       </Flex>
       <Flex px={3} py={3} flexDirection="column">
         <Heading small clipped color={'black'}>
-          {props.howto.title}
+          {/* HACK 2021-07-16 - new howtos auto capitalize title but not older */}
+          {capitalizeFirstLetter(props.howto.title)}
         </Heading>
         <Flex alignItems="center">
           {props.howto.creatorCountry && (