From d5cea4055d6c1de8cee9345e55b4831366f83798 Mon Sep 17 00:00:00 2001
From: Darin Alleman <darin.alleman@gmail.com>
Date: Sat, 2 Jan 2021 20:57:48 -0500
Subject: [PATCH] Add character counter to most text input boxes

---
 frontend/src/app/PackForm/PackForm.tsx              | 9 ++++++---
 frontend/src/app/components/FormFields/Input.tsx    | 9 ++++++++-
 frontend/src/app/components/FormFields/Textarea.tsx | 8 +++++++-
 frontend/src/app/components/FormFields/styles.ts    | 9 ++++++++-
 frontend/src/app/components/ItemForm/ItemForm.tsx   | 5 ++++-
 frontend/src/types/item.ts                          | 6 ++++++
 frontend/src/types/pack.ts                          | 7 +++++++
 7 files changed, 46 insertions(+), 7 deletions(-)

diff --git a/frontend/src/app/PackForm/PackForm.tsx b/frontend/src/app/PackForm/PackForm.tsx
index ddd5b44..9918c8e 100644
--- a/frontend/src/app/PackForm/PackForm.tsx
+++ b/frontend/src/app/PackForm/PackForm.tsx
@@ -10,8 +10,7 @@ import { getPackPath } from "routes";
 import { PackFormSpecs } from "./types";
 import { DurationUnit } from "enums";
 import { Item, PackItem } from "types/item";
-import { Pack } from "types/pack";
-import { BasePack } from "types/pack";
+import { Pack, BasePack, PackConstants } from "types/pack";
 
 import { durationUnitOptions, genderOptions } from "lib/utils/form";
 
@@ -174,13 +173,15 @@ const PackForm: React.FC<PackFormSpecs.Props> = ({ history, packId, getPack, exp
                                                error={wasSubmitted && !!errors.title}
                                                errorMsg={errors.title}
                                                value={values.title}
+                                               allowedLength={PackConstants.title}
                                                onChange={v => setFieldValue('title', v)}/>
 
                                         <Textarea label="Field Notes"
                                                   placeholder="Additional notes about this trip..."
                                                   value={values.description || ''}
                                                   onChange={v => setFieldValue('description', v)}
-                                                  last={true}/>
+                                                  last={true}
+                                                  allowedLength={PackConstants.description}/>
                                     </div>
                                     <div className="third">
                                         <Row gutter={8}>
@@ -207,6 +208,7 @@ const PackForm: React.FC<PackFormSpecs.Props> = ({ history, packId, getPack, exp
                                         </Row>
                                         <Input label="Temp Range"
                                                placeholder="43° - 81° F"
+                                               allowedLength={PackConstants.temp_range}
                                                value={values.temp_range || ''}
                                                onChange={v => setFieldValue('temp_range', v)}
                                         />
@@ -217,6 +219,7 @@ const PackForm: React.FC<PackFormSpecs.Props> = ({ history, packId, getPack, exp
                                                        value={values.season || ''}
                                                        onChange={v => setFieldValue('season', v)}
                                                        last={true}
+                                                       allowedLength={PackConstants.season}
                                                 />
                                             </Col>
                                             <Col span={12}>
diff --git a/frontend/src/app/components/FormFields/Input.tsx b/frontend/src/app/components/FormFields/Input.tsx
index 65b5d06..bf31f14 100644
--- a/frontend/src/app/components/FormFields/Input.tsx
+++ b/frontend/src/app/components/FormFields/Input.tsx
@@ -1,16 +1,18 @@
 import * as React from 'react';
 import { ChangeEvent } from "react";
 
-import { Input } from './styles';
+import { Input, CharacterCounter } from './styles';
 import { SharedInputProps } from './types';
 import { InputContainer } from './utils';
 
+
 interface InputProps extends SharedInputProps {
     value: string | number;
     onChange: (value: string | number) => void;
     autocomplete?: string;
     type?: 'text' | 'number' | 'url' | 'password';
     placeholder?: string;
+    allowedLength?: number;
 }
 
 const FormInput: React.FC<InputProps> = ({ onChange, label, error, errorMsg, tip, last, style, ...props }) => {
@@ -20,6 +22,11 @@ const FormInput: React.FC<InputProps> = ({ onChange, label, error, errorMsg, tip
     return (
         <InputContainer {...{ error, errorMsg, label, tip, last, style }}>
             <Input {...props} onChange={handleChange}/>
+                {props.allowedLength && props.allowedLength > 0 && 
+                    <CharacterCounter 
+                        className={`${props.value.toString().length > props.allowedLength ? "full": ""}`}>
+                            {props.value.toString().length}/{props.allowedLength}
+                    </CharacterCounter>}
         </InputContainer>
     );
 };
diff --git a/frontend/src/app/components/FormFields/Textarea.tsx b/frontend/src/app/components/FormFields/Textarea.tsx
index 8a1db94..f9fffff 100644
--- a/frontend/src/app/components/FormFields/Textarea.tsx
+++ b/frontend/src/app/components/FormFields/Textarea.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ChangeEvent } from "react";
 
-import { TextareaInput } from './styles';
+import { TextareaInput, CharacterCounter } from './styles';
 import { SharedInputProps } from './types';
 import { InputContainer } from './utils';
 
@@ -9,6 +9,7 @@ interface TextareaProps extends SharedInputProps {
     value: string | number;
     onChange: (value: string | number) => void;
     placeholder?: string;
+    allowedLength?: number;
 }
 
 const Textarea: React.FC<TextareaProps> = ({ onChange, label, error, errorMsg, last, tip, ...props }) => {
@@ -18,6 +19,11 @@ const Textarea: React.FC<TextareaProps> = ({ onChange, label, error, errorMsg, l
     return (
         <InputContainer {...{error, errorMsg, label, tip, last}}>
             <TextareaInput {...props} onChange={handleChange}/>
+            {props.allowedLength && props.allowedLength > 0 && 
+                    <CharacterCounter 
+                        className={`${props.value.toString().length > props.allowedLength ? "full": ""}`}>
+                            {props.value.toString().length}/{props.allowedLength}
+                    </CharacterCounter>}
         </InputContainer>
     );
 };
diff --git a/frontend/src/app/components/FormFields/styles.ts b/frontend/src/app/components/FormFields/styles.ts
index 27576f1..6ab2155 100644
--- a/frontend/src/app/components/FormFields/styles.ts
+++ b/frontend/src/app/components/FormFields/styles.ts
@@ -108,4 +108,11 @@ export const selectStyles: StylesConfig = {
         ...p,
         color: '#ccc'
     })
-};
\ No newline at end of file
+};
+
+export const CharacterCounter = styled.small`
+    float: right;
+    &.full {
+        color:red;
+    }
+`;
\ No newline at end of file
diff --git a/frontend/src/app/components/ItemForm/ItemForm.tsx b/frontend/src/app/components/ItemForm/ItemForm.tsx
index bea79b9..dd08d26 100644
--- a/frontend/src/app/components/ItemForm/ItemForm.tsx
+++ b/frontend/src/app/components/ItemForm/ItemForm.tsx
@@ -6,7 +6,7 @@ import { Row, Col, Button } from "antd";
 import { Input, Select, SelectCreatable, Option } from '../FormFields';
 
 import { AppContext } from 'AppContext';
-import { CreateItem } from "types/item";
+import { CreateItem, ItemConstants } from "types/item";
 import { FormSpecs } from "./types";
 
 import withApi from 'app/components/higher-order/with-api';
@@ -78,6 +78,7 @@ const ItemForm: React.FC<FormSpecs.Props> = ({ createItem, exportCsv, onSubmit }
                             error={wasSubmitted && !!errors.name}
                             placeholder="Backpack, Compass, etc..."
                             onChange={v => setFieldValue('name', v)}
+                            allowedLength={ItemConstants.name}
                         />
                         <SelectCreatable
                             label="Category"
@@ -99,6 +100,7 @@ const ItemForm: React.FC<FormSpecs.Props> = ({ createItem, exportCsv, onSubmit }
                             value={values.product_name || ''}
                             placeholder="Osprey Renn 65"
                             onChange={v => setFieldValue('product_name', v)}
+                            allowedLength={ItemConstants.product_name}
                         />
                         <Row gutter={8}>
                             <Col span={16}>
@@ -134,6 +136,7 @@ const ItemForm: React.FC<FormSpecs.Props> = ({ createItem, exportCsv, onSubmit }
                             type="url"
                             placeholder="https://osprey.com"
                             onChange={v => setFieldValue('product_url', v)}
+                            allowedLength={ItemConstants.product_url}
                         />
                         <Button onClick={submitForm}
                                 disabled={isSubmitting}
diff --git a/frontend/src/types/item.ts b/frontend/src/types/item.ts
index d88a928..80a5b67 100644
--- a/frontend/src/types/item.ts
+++ b/frontend/src/types/item.ts
@@ -51,4 +51,10 @@ export interface PackItemAttr {
 
 export interface PackItem extends Item {
     packItem: PackItemAttr;
+}
+
+export enum ItemConstants {
+    name = 200,
+    product_name = 500,
+    product_url = 500
 }
\ No newline at end of file
diff --git a/frontend/src/types/pack.ts b/frontend/src/types/pack.ts
index 7d2b55f..7908a6a 100644
--- a/frontend/src/types/pack.ts
+++ b/frontend/src/types/pack.ts
@@ -34,3 +34,10 @@ export interface CreatePack extends BasePack {
 export type PackOverview = Omit<Pack, 'items'> & {
     itemCount: number;
 }
+
+export enum PackConstants {
+    title = 300,
+    description = 2000,
+    temp_range = 255,
+    season = 255
+}