fixed api call by passing it thorugh a heroku project lol, fixed up r…

…edux form, rendering words on results page, added uuidv1

package.json

@@ -11,7 +11,8 @@
     "redux": "^4.0.1",
     "redux-form": "^8.1.0",
     "redux-thunk": "^2.3.0",
-    "styled-components": "^4.1.3"
+    "styled-components": "^4.1.3",
+    "uuidv1": "^1.6.14"
   },
   "scripts": {
     "start": "react-scripts start",

src/actions/index.js

@@ -1,3 +1,16 @@
-import axios from 'axios';
-import { FETCH_WORDS } from './types';
+import axios from "axios";
+import { FETCH_WORDS } from "./types";
 
+export const fetchWords = word => async dispatch => {
+  const res = await axios.get(
+    `${'https://cors-anywhere.herokuapp.com/'}https://od-api.oxforddictionaries.com:443/api/v1/wordlist/en/regions%3Dbritish%2C?word_length=4%2C&exact=false&limit=10`,
+    {
+      headers: {
+        'Accept': "application/json",
+        'app_id': "4bb65adf",
+        'app_key': "f0952a9ea06c8a6b1fc1bbb40a2e5688"
+      }
+    }
+  );
+  dispatch({ type: FETCH_WORDS, payload: res.data });
+};

src/components/Results.js

@@ -1,5 +1,7 @@
-import React, { Component } from 'react';
-import styled from 'styled-components';
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import styled from "styled-components";
+import uuidv1 from "uuid/v1";
 
 const MainResultsDiv = styled.div`
   height: 100vh;
@@ -8,12 +10,31 @@ const MainResultsDiv = styled.div`
   color: white;
 `;
 
-const Results = () => {
-  return (
-    <MainResultsDiv>
-      Results
-    </MainResultsDiv>
-  );
+class Results extends Component {
+  render() {
+    const words = this.props.words.results;
+    console.log(words);
+    return (
+      <MainResultsDiv>
+        {words ? (
+          <div>
+            {words.map(x => {
+              return <div key={uuidv1()}>{x.word}</div>;
+            })}
+          </div>
+        ) : (
+          <div>no</div>
+        )}
+      </MainResultsDiv>
+    );
+  }
 }
 
-export default Results;
+function mapStateToProps({ words }) {
+  return { words };
+}
+
+export default connect(
+  mapStateToProps,
+  null
+)(Results);

src/components/Search.js

@@ -1,30 +1,40 @@
-import React from "react";
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import * as actions from "../actions";
 import { Field, reduxForm } from "redux-form";
 
-const Search = props => {
-  const { handleSubmit, pristine, reset, submitting } = props;
-  return (
-    <form onSubmit={handleSubmit}>
-      <div>
-        <label>First Name</label>
+class Search extends Component {
+  render() {
+    const { handleSubmit, pristine, reset, submitting, fetchWords } = this.props;
+    return (
+      <form onSubmit={handleSubmit(values => fetchWords(values.firstWord))}>
         <div>
-          <Field
-            name="firstWord"
-            component="input"
-            type="text"
-            placeholder="First Word"
-          />
+          <label>First Name</label>
+          <div>
+            <Field
+              name="firstWord"
+              component="input"
+              type="text"
+              placeholder="First Word"
+            />
+          </div>
+          <div>
+            <button type="submit" disabled={pristine || submitting}>
+              Submit
+            </button>
+          </div>
         </div>
-        <div>
-          <button type="submit" disabled={pristine || submitting}>
-            Submit
-          </button>
-        </div>
-      </div>
-    </form>
-  );
-};
+      </form>
+    );
+  }
+}
 
-export default reduxForm({
-  form: "search" // a unique identifier for this form
-})(Search);
+export default connect(
+  null,
+  actions
+)(
+  reduxForm({
+    form: "search"
+    // onSubmitSuccess: afterSubmit
+  })(Search)
+);