Client - display characters limitation on textarea - fix #81

fittrackee_client/src/components/App.css

@@ -362,6 +362,11 @@ label {
   padding: 0.1em;
 }
 
+.remaining-chars {
+  font-size: 0.8em;
+  font-style: italic;
+}
+
 .sport-img {
   max-width: 35px;
   max-height: 35px;
@@ -440,6 +445,10 @@ label {
   color: black;
 }
 
+.user-bio, .workout-notes {
+  white-space: pre-wrap;
+}
+
 .user-filters {
   font-size: 0.9em;
   margin-bottom: 10px;
@@ -516,7 +525,7 @@ label {
   line-height: 400px;
 }
 
-.workout-notes, .actvitiy-segments {
+.workout-notes, .actvity-segments {
   font-size: 0.9em;
   font-style: italic;
   margin-top: 10px;

fittrackee_client/src/components/Common/CustomTextArea.jsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import { withTranslation } from 'react-i18next'
+import { connect } from 'react-redux'
+
+class CustomTextArea extends React.Component {
+  constructor(props, context) {
+    super(props, context)
+    this.state = {
+      text: props.defaultValue ? props.defaultValue : '',
+    }
+  }
+
+  handleOnChange(changeEvent) {
+    this.setState({ text: changeEvent.target.value })
+    if (this.props.onTextChange) {
+      this.props.onTextChange(changeEvent)
+    }
+  }
+
+  render() {
+    const { charLimit, loading, name, t } = this.props
+    const { text } = this.state
+    return (
+      <>
+        <textarea
+          name={name}
+          defaultValue={text}
+          disabled={loading ? loading : false}
+          className="form-control input-lg"
+          maxLength={charLimit}
+          onChange={event => this.handleOnChange(event)}
+        />
+        <div className="remaining-chars">
+          {t('common:remaining characters')}: {text.length}/{charLimit}
+        </div>
+      </>
+    )
+  }
+}
+
+export default withTranslation()(
+  connect(state => ({
+    loading: state.loading,
+  }))(CustomTextArea)
+)

fittrackee_client/src/components/User/ProfileDetail.jsx

@@ -79,7 +79,7 @@ function ProfileDetail({
                     </p>
                     <p>
                       <span className="user-label">{t('user:Bio')}</span>:{' '}
-                      {user.bio}
+                      <span className="user-bio">{user.bio}</span>
                     </p>
                     <p>
                       {/* eslint-disable-next-line max-len */}

fittrackee_client/src/components/User/ProfileEdit.jsx

@@ -10,6 +10,7 @@ import { deleteUser, handleProfileFormSubmit } from '../../actions/user'
 import { history } from '../../index'
 import { languages } from '../NavBar/LanguageDropdown'
 import CustomModal from '../Common/CustomModal'
+import CustomTextArea from '../Common/CustomTextArea'
 
 class ProfileEdit extends React.Component {
   constructor(props, context) {
@@ -198,12 +199,11 @@ class ProfileEdit extends React.Component {
                           <div className="form-group">
                             <label>
                               {t('user:Bio')}:
-                              <textarea
+                              <CustomTextArea
+                                charLimit={200}
                                 name="bio"
-                                className="form-control input-lg"
-                                maxLength="200"
-                                value={formData.bio}
-                                onChange={e => this.handleFormChange(e)}
+                                defaultValue={formData.bio}
+                                onTextChange={e => this.handleFormChange(e)}
                               />
                             </label>
                           </div>

fittrackee_client/src/components/Workout/WorkoutForms/FormWithGpx.jsx

@@ -7,6 +7,7 @@ import { addWorkout, editWorkout } from '../../../actions/workouts'
 import { history } from '../../../index'
 import { getFileSize } from '../../../utils'
 import { translateSports } from '../../../utils/workouts'
+import CustomTextArea from '../../Common/CustomTextArea'
 
 function FormWithGpx(props) {
   const {
@@ -105,12 +106,11 @@ function FormWithGpx(props) {
       <div className="form-group">
         <label>
           {t('workouts:Notes')}:
-          <textarea
-            name="notes"
+          <CustomTextArea
+            charLimit={500}
             defaultValue={workout ? workout.notes : ''}
-            disabled={loading}
-            className="form-control input-lg"
-            maxLength="500"
+            loading={loading}
+            name="notes"
           />
         </label>
       </div>

fittrackee_client/src/components/Workout/WorkoutForms/FormWithoutGpx.jsx

@@ -5,6 +5,7 @@ import { addWorkoutWithoutGpx, editWorkout } from '../../../actions/workouts'
 import { history } from '../../../index'
 import { getDateWithTZ } from '../../../utils'
 import { formatWorkoutDate, translateSports } from '../../../utils/workouts'
+import CustomTextArea from '../../Common/CustomTextArea'
 
 function FormWithoutGpx(props) {
   const { onAddOrEdit, sports, t, user, workout } = props
@@ -106,11 +107,10 @@ function FormWithoutGpx(props) {
       <div className="form-group">
         <label>
           {t('workouts:Notes')}:
-          <textarea
-            name="notes"
+          <CustomTextArea
+            charLimit={500}
             defaultValue={workout ? workout.notes : ''}
-            className="form-control input-lg"
-            maxLength="500"
+            name="notes"
           />
         </label>
       </div>

fittrackee_client/src/locales/en/common.json

@@ -20,6 +20,7 @@
   "Page not found": "Page not found",
   "Previous": "Prev",
   "registration date": "registration date",
+  "remaining characters": "remaining characters",
   "Sort": "Sort",
   "Sort by": "Sort by",
   "Sport": "Sport",

fittrackee_client/src/locales/fr/common.json

@@ -19,6 +19,7 @@
   "No workouts.": "Pas de séances.",
   "Page not found": "Page introuvable",
   "Previous": "Page précédente",
+  "remaining characters": "nombre de caractères restants ",
   "registration date": "date d'inscription",
   "Sort": "Tri",
   "Sort by": "Trier par",