Make REPL scroll down on I/O change (#67)

* Add componentUpdate function to scroll down

* Fix glitchiness of output when updating Repl

I believe that this is due to trying to scroll and update the component
at the same time, causing glitches (such as half the output being
rendered, followed by the other half in 0.2s). I solved this using a
slightly hacky solution -- to wait for a very short period before
scrolling. Ideally, I would like to use a React method that is called
*after* updating.

* Revert "Fix glitchiness of output when updating Repl"

This reverts commit 6c8bc34.
Using setTimeOut caused an error where, given fast input and output, the
outputs may not be grouped together properly.

* Make div surrounding ReplInput a card

So that it is padded in a similar fashion as ReplOutputs

Resolves #41

src/components/workspace/Repl.tsx

@@ -17,6 +17,12 @@ export interface IReplProps {
 }
 
 class Repl extends React.Component<IReplProps, {}> {
+  private replBottom: HTMLDivElement
+
+  public componentDidUpdate() {
+    this.replBottom.scrollIntoView()
+  }
+
   public render() {
     const cards = this.props.output.map((slice, index) => <Output output={slice} key={index} />)
     const controlProps: IReplControlProps = this.props as IReplControlProps
@@ -28,9 +34,14 @@ class Repl extends React.Component<IReplProps, {}> {
         </div>
         <div className="repl-output-parent">
           {cards}
-          <div className="repl-input-parent row">
+          <div className="repl-input-parent row pt-card pt-elevation-0">
             <ReplInput {...inputProps} />
           </div>
+          <div
+            ref={el => {
+              this.replBottom = el as HTMLDivElement
+            }}
+          />
         </div>
       </div>
     )

src/components/workspace/__tests__/__snapshots__/Repl.tsx.snap

@@ -15,9 +15,10 @@ exports[`Repl renders correctly 1`] = `
   </div>
   <div className=\\"repl-output-parent\\">
     <Component output={{...}} />
-    <div className=\\"repl-input-parent row\\">
+    <div className=\\"repl-input-parent row pt-card pt-elevation-0\\">
       <ReplInput output={{...}} replValue=\\"\\" handleReplValueChange={[Function: handleReplValueChange]} handleReplEval={[Function: handleReplEval]} handleReplOutputClear={[Function: handleReplOutputClear]} handleChapterSelect={[Function: handleChapterSelect]} />
     </div>
+    <div />
   </div>
 </div>"
 `;

src/styles/_workspace.scss

@@ -86,7 +86,7 @@ $code-color-error: #ff4444;
     }
 
     .repl-react-ace {
-      margin-left: 0.5rem;
+      margin-left: -0.2rem;
       margin-right: 0.5rem;
       margin-top: 0rem;
     }