Replace custom text sizing with package

ehmorris · Sep 20, 2018 · ca7ff32 · ca7ff32
1 parent 08978ae
commit ca7ff32
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 32 deletions.
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
     "react-redux": "^5.0.7",
     "react-scripts": "1.1.4",
     "react-textarea-autosize": "^7.0.4",
+    "react-textfit": "^1.1.0",
     "redux": "^4.0.0",
     "redux-persist": "^5.10.0",
     "redux-state-sync": "^1.1.1",

diff --git a/src/InterviewerMode.js b/src/InterviewerMode.js
@@ -1,45 +1,37 @@
 import React, { Component } from 'react';
+import { connect } from 'react-redux';
 import styled from 'react-emotion';
 import BigClock from './BigClock';
-import LatestInterviewerNote from './LatestInterviewerNote';
+import { Textfit } from 'react-textfit';
 
-class InterviewerMode extends Component {
-  constructor(props) {
-    super(props);
-
-    this.sizeNote = this.sizeNote.bind(this);
-
-    this.state = {
-      fontSize: '24vw',
-    }
-  }
-
-  sizeNote(length) {
-    let fontSize = '24vw';
-
-    if (length > 10) fontSize = '18vw';
-    if (length > 15) fontSize = '14vw';
-    if (length > 20) fontSize = '12vw';
-    if (length > 30) fontSize = '8vw';
-
-    this.setState({
-      fontSize: fontSize,
-    });
-  }
+const mapStateToProps = state => ({
+  latestNotes: state.notes.filter(note => note.type === 'interviewer').reverse(),
+});
 
+class InterviewerMode extends Component {
   render() {
     return (
       <Screen>
         <BigClock />
-        <PromptType fontSize={this.state.fontSize}>
-          <LatestInterviewerNote />
-        </PromptType>
+
+        {this.props.latestNotes.length > 0 && !this.props.latestNotes[0].action &&
+          <PromptType>
+            <Textfit
+              min={40}
+              max={1000}
+            >
+              {this.props.latestNotes[0].note}
+            </Textfit>
+          </PromptType>
+        }
       </Screen>
     );
   }
 }
 
-export default InterviewerMode;
+export default connect(
+  mapStateToProps
+)(InterviewerMode);
 
 const Screen = styled('div')`
   width: 100vw;
@@ -54,9 +46,10 @@ const Screen = styled('div')`
 `;
 
 const PromptType = styled('div')`
-  font-size: ${props => props.fontSize};
-  line-height: ${props => props.fontSize};
+  flex: 1;
+  line-height: 1.2;
   font-weight: 600;
+  white-space: pre-wrap;
 
   &:empty {
     display: none;

diff --git a/src/LatestInterviewerNote.js b/src/LatestInterviewerNote.js
@@ -8,7 +8,7 @@ const mapStateToProps = state => ({
 
 class LatestInterviewerNote extends Component {
   render() {
-    if (this.props.latestNotes.length && !this.props.latestNotes[0].action) {
+    if (this.props.latestNotes.length > 0 && !this.props.latestNotes[0].action) {
       return <Text>{this.props.latestNotes[0].note}</Text>;
     } else {
       return null;

diff --git a/yarn.lock b/yarn.lock
@@ -5490,7 +5490,7 @@ process-nextick-args@~2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.0.tgz#a37d732f4271b4ab1ad070d35508e8290788ffaa"
 
-process@^0.11.10:
+process@^0.11.10, process@^0.11.9:
   version "0.11.10"
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
 
@@ -5743,6 +5743,13 @@ react-textarea-autosize@^7.0.4:
   dependencies:
     prop-types "^15.6.0"
 
+react-textfit@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/react-textfit/-/react-textfit-1.1.0.tgz#088855580f2e7aad269efc81b734bf636877d0e1"
+  dependencies:
+    process "^0.11.9"
+    prop-types "^15.5.10"
+
 react@^16.5.1:
   version "16.5.1"
   resolved "https://registry.yarnpkg.com/react/-/react-16.5.1.tgz#8cb8e9f8cdcb4bde41c9a138bfbf907e66132372"