input length check and component splitting

3 files changed, 79 insertions, 15 deletions

diff --git a/frontend/src/components/CharLimit.js b/frontend/src/components/CharLimit.js
new file mode 100644
index 0000000..623b378
--- /dev/null
+++ b/frontend/src/components/CharLimit.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import styled, { css } from 'styled-components'
+
+// show char limit if length > half of max
+const Chars = styled.p`
+    color: #11111100;
+    font-family: 'Roboto Mono', monospace;
+    position: absolute; 
+    font-size: 0.8em;
+    writing-mode: vertical-rl;
+    top: 50%;
+    transform: translate(5em, -50%);
+    right: 0;
+    transition: all 0.5s cubic-bezier(.25,.8,.25,1);
+
+    ${props =>
+        ((props.content.length / props.maxLength) > 0.5) &&
+        css`
+        color: #111111;
+    `};
+
+    ${props =>
+        ((props.content.length / props.maxLength) > 1) &&
+        css`
+        color: #ee1111;
+    `};
+`;
+
+class CharLimit extends React.Component {
+    render() {
+        return (
+            <Chars {...this.props} >{this.props.maxLength - this.props.content.length}/{this.props.maxLength}</Chars>
+        );
+    }
+}
+
+export default CharLimit
\ No newline at end of file
diff --git a/frontend/src/components/Inputs.js b/frontend/src/components/Inputs.js
index 777e3c6..d2238af 100644
--- a/frontend/src/components/Inputs.js
+++ b/frontend/src/components/Inputs.js
@@ -1,15 +1,27 @@
 import React from 'react';
+import CharLimit from './CharLimit'
+import styled from 'styled-components'
+
+const CharLimitContainer = styled.div`
+    position: relative; 
+`
 
 class TitleInput extends React.Component {
     render() {
         return (
-            <input
-                name="title"
-                className="lt-shadow"
-                placeholder="Title"
-                type="text"
-                onChange={this.props.onChange}
-                value={this.props.title} />
+            <CharLimitContainer>
+                <input
+                    name="title"
+                    className="lt-shadow"
+                    placeholder="Title"
+                    type="text"
+                    autoComplete="off"
+                    onChange={this.props.onChange}
+                    value={this.props.value} />
+                <CharLimit
+                    content={this.props.value}
+                    maxLength={this.props.maxLength} />
+            </CharLimitContainer>
         );
     }
 }
@@ -17,12 +29,17 @@ class TitleInput extends React.Component {
 class PasteInput extends React.Component {
     render() {
         return (
-            <textarea
-                name="content"
-                placeholder="Paste your text here"
-                value={this.props.content}
-                onChange={this.props.onChange}
-                className="lt-shadow" />
+            <CharLimitContainer>
+                <textarea
+                    name="content"
+                    placeholder="Paste your text here"
+                    value={this.props.content}
+                    onChange={this.props.onChange}
+                    className="lt-shadow" />
+                <CharLimit
+                    content={this.props.content}
+                    maxLength={this.props.maxLength} />
+            </CharLimitContainer>
         );
     }
 }
diff --git a/frontend/src/components/PasteArea.js b/frontend/src/components/PasteArea.js
index fb3db64..f026ef9 100644
--- a/frontend/src/components/PasteArea.js
+++ b/frontend/src/components/PasteArea.js
@@ -13,6 +13,14 @@ class PasteArea extends React.Component {
         this.handleSubmit = this.handleSubmit.bind(this);
     }
 
+    componentDidUpdate() {
+        if (this.state.title === "") {
+            document.title = `ctrl-v`;
+        } else {
+            document.title = `ctrl-v | ${this.state.title}`;
+        }
+    }
+
     handleChange(event) {
         const target = event.target;
         const name = target.name;
@@ -33,10 +41,12 @@ class PasteArea extends React.Component {
             <form onSubmit={this.handleSubmit}>
                 <TitleInput 
                     onChange={this.handleChange}
-                    value={this.state.title} />
+                    value={this.state.title}
+                    maxLength="100" />
                 <PasteInput
                     onChange={this.handleChange}
-                    content={this.state.content} />
+                    content={this.state.content}
+                    maxLength="100000" />
                 <br />
                 <input className="lt-button lt-shadow lt-hover" type="submit" value="new paste" />
             </form>