improved

RalphKemp · Feb 5, 2019 · 5a342e8 · 5a342e8
1 parent 132e6ab
commit 5a342e8
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 29 deletions.
diff --git a/src/components/Results.js b/src/components/Results.js
@@ -3,15 +3,20 @@ import { connect } from "react-redux";
 import styled from "styled-components";
 import { data } from "../data/words";
 import { puzzleSolver } from "../helpers/puzzleSolver";
+import uuidv1 from "uuid/v1";
 
 const MainResultsDiv = styled.div`
   min-height: 50vh;
   width: 100vw;
   background-color: blue;
   color: white;
+  display: flex;
   @media (min-width: 600px) {
     min-height: 100vh;
     width: 50vw;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
   }
 `;
 
@@ -25,6 +30,7 @@ const Words = styled.div`
   margin: 20px 0px 0px 20px;
   display: flex;
   justify-content: center;
+  align-items: center;
 `;
 
 const LadderStep = styled.div`
@@ -38,41 +44,56 @@ const Blob = styled.div`
   padding: 10px;
 `;
 
+const InputtedWord = styled(Blob)`
+  background-color: red;
+`;
+
 class Results extends Component {
   render() {
     return (
       <MainResultsDiv>
-        <Title>currently we're trying to go from JINX to BULL.</Title>
         {this.props.words ? (
           <Words>
+            <LadderStep>
+              <InputtedWord>{this.props.words.firstWord}</InputtedWord>
+            </LadderStep>
             {puzzleSolver(
               this.props.words.firstWord,
               this.props.words.secondWord,
               data
             ).map(x => {
               return (
-                <LadderStep key={x}>
-                  {x.map(y => (
-                    <div>
-                      {!Array.isArray(y) ? (
-                        <Blob>{y}</Blob>
-                      ) : (
-                        <Blob
-                          style={{
-                            backgroundColor: "green",
-                            marginBottom: "20px"
-                          }}
-                        >
-                          {y}
-                        </Blob>
-                      )}
-                    </div>
-                  ))}
-                </LadderStep>
+                <div>
+                  <LadderStep key={x}>
+                    {x.map(y => (
+                      <div key={uuidv1()}>
+                        {!Array.isArray(y) ? (
+                          <Blob>{y}</Blob>
+                        ) : (
+                          <Blob
+                            style={{
+                              backgroundColor: "green",
+                              marginBottom: "20px"
+                            }}
+                          >
+                            {y}
+                          </Blob>
+                        )}
+                      </div>
+                    ))}
+                  </LadderStep>
+                </div>
               );
             })}
+            <LadderStep>
+              <InputtedWord>{this.props.words.secondWord}</InputtedWord>
+            </LadderStep>
           </Words>
-        ) : null}
+        ) : (
+          <Title>
+            For example: JINX to BULL, COSY to RINK, or DEAF to SOON.
+          </Title>
+        )}
       </MainResultsDiv>
     );
   }

diff --git a/src/components/Search.js b/src/components/Search.js
@@ -1,8 +1,8 @@
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import * as actions from '../actions';
-import { Field, reduxForm } from 'redux-form';
-import styled from 'styled-components';
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import * as actions from "../actions";
+import { Field, reduxForm } from "redux-form";
+import styled from "styled-components";
 
 const Fields = styled.div`
   display: flex;
@@ -43,7 +43,7 @@ class Search extends Component {
         onSubmit={handleSubmit(values => setWords(values))}
         autoComplete="off"
       >
-        <Label>Enter your two words:</Label>
+        <Label>Enter your two 4-letter words:</Label>
         <div>
           <Fields>
             <Field
@@ -75,7 +75,7 @@ export default connect(
   actions
 )(
   reduxForm({
-    form: 'search'
+    form: "search"
     // onSubmitSuccess: afterSubmit
   })(Search)
 );
diff --git a/src/helpers/puzzleSolver.js b/src/helpers/puzzleSolver.js
@@ -11,7 +11,6 @@ export const puzzleSolver = (x, y, d) => {
 
   // new pools created from poolOne. (second ladder place)
   const poolTwo = createComparativePool(poolOne, data, y, 3, 1);
-  console.log(poolTwo);
 
   const poolThree = [];
   // for each pool in poolTwo, we run the function again, but this time we need TWO
@@ -28,11 +27,15 @@ export const puzzleSolver = (x, y, d) => {
     );
   });
 
-  pools.push(poolOne, poolTwo, poolThree, poolFour);
+  pools.push(poolOne, poolTwo, removeEmpty(poolThree), removeEmpty(poolFour));
 
   return pools;
 };
 
+function removeEmpty(arr) {
+  return arr.filter(x => x.length > 0);
+}
+
 function createFirstPool(firstWord, data, y) {
   const secondWord = y.split("");
   const word = firstWord.split("");