Save options functionality

5 files changed, 74 insertions, 34 deletions

diff --git a/src/components/options-form/index.js b/src/components/options-form/index.js
index 393ab93..f83bfe3 100644
--- a/src/components/options-form/index.js
+++ b/src/components/options-form/index.js
@@ -1,29 +1,60 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import PropTypes from 'prop-types';
 
 import './styles.css';
 
-const OptionsForm = () => (
-  <div className="options-form">
-    <div className="form-field">
-      <h2>Add the Token</h2>
-      <p className="text-muted">Generate a token and add it below to avoid hitting the rate limit.</p>
-      <hr/>
-      <ul>
-        <li>
-          Go to the <a href="https://github.com/settings/tokens" target="_blank" rel="noopener noreferrer"><i className="fa fa-external-link mr-1"></i> Settings <i className="fa fa-angle-right"></i> Personal Access Tokens</a> of your github profile
-        </li>
-        <li>Click <span>Generate New Token</span>. Enter the description and select the <span>scope</span> called <span>public_repo</span> under repo and click <span>Generate Token</span>.</li>
-        <li>You will be presented with the generated token. Copy the token and add it below</li>
-      </ul>
-      <input type="text" className="form-control"/>
-    </div>
-    <button className="btn btn-dark btn-lg btn-save shadow">
-      <i className="fa fa-cog mr-2"></i>
-      Save Settings
-    </button>
-    <Link className='btn btn-primary shadow btn-block btn-lg' to='/'><i className="fa fa-arrow-left"></i> Go Home</Link>
-  </div>
-);
+class OptionsForm extends React.Component {
+
+  state = {
+    token: this.props.options.token
+  };
+
+  saveOptions = () => {
+    this.props.updateOptions({
+      token: this.state.token
+    });
+  };
+
+  onChange = (e) => {
+    this.setState({
+      [e.target.name]: e.target.value
+    });
+  };
+
+  render() {
+    return (
+      <div className="options-form">
+        <div className="form-field">
+          <h2>Add the Token</h2>
+          <p className="text-muted">Generate a token and add it below to avoid hitting the rate limit.</p>
+          <hr/>
+          <ul>
+            <li>
+              Go to the <a href="https://github.com/settings/tokens" target="_blank" rel="noopener noreferrer"><i className="fa fa-external-link mr-1"></i> Settings <i className="fa fa-angle-right"></i> Personal Access Tokens</a> of your github profile
+            </li>
+            <li>Click <span>Generate New Token</span>. Enter the description and select the <span>scope</span> called <span>public_repo</span> under repo and click <span>Generate Token</span>.</li>
+            <li>You will be presented with the generated token. Copy the token and add it below</li>
+          </ul>
+          <input type="text"
+                 name='token'
+                 onChange={ this.onChange }
+                 className="form-control"
+                 value={ this.state.token }/>
+        </div>
+        <button className="btn btn-dark btn-lg btn-save shadow" onClick={ this.saveOptions }>
+          <i className="fa fa-cog mr-2"></i>
+          Save Token
+        </button>
+        <Link className='btn btn-primary shadow btn-block btn-lg' to='/'><i className="fa fa-arrow-left"></i> Go Home</Link>
+      </div>
+    );
+  }
+}
+
+OptionsForm.propTypes = {
+  updateOptions: PropTypes.func.isRequired,
+  options: PropTypes.object.isRequired
+};
 
 export default OptionsForm;
diff --git a/src/containers/options/index.js b/src/containers/options/index.js
index d986f6e..588861d 100644
--- a/src/containers/options/index.js
+++ b/src/containers/options/index.js
@@ -1,9 +1,11 @@
 import React from 'react';
+import { connect } from 'react-redux';
+import { Link } from 'react-router-dom';
 
 import './styles.css';
 import Logo from '../../components/icons/logo';
-import { Link } from 'react-router-dom';
 import OptionsForm from '../../components/options-form';
+import { updateOptions } from '../../redux/preference/actions';
 
 class OptionsContainer extends React.Component {
   render() {
@@ -21,11 +23,24 @@ class OptionsContainer extends React.Component {
         </div>
 
         <div className="container shadow">
-          <OptionsForm/>
+          <OptionsForm
+            updateOptions={ this.props.updateOptions }
+            options={ this.props.preference.options }
+          />
         </div>
       </div>
     );
   }
 }
 
-export default OptionsContainer;
+const mapStateToProps = (store) => {
+  return {
+    preference: store.preference
+  };
+};
+
+const mapDispatchToProps = {
+  updateOptions
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(OptionsContainer);
diff --git a/src/redux/preference/actions.js b/src/redux/preference/actions.js
index 57ab13a..54b8259 100644
--- a/src/redux/preference/actions.js
+++ b/src/redux/preference/actions.js
@@ -1,10 +1,10 @@
 import { UPDATE_DATE_TYPE, UPDATE_LANGUAGE, UPDATE_OPTIONS, UPDATE_VIEW_TYPE } from './types';
 
-export const updateOptions = function (setting) {
+export const updateOptions = function (options) {
   return dispatch => {
     dispatch({
       type: UPDATE_OPTIONS,
-      payload: setting,
+      payload: options,
     });
   };
 };
diff --git a/src/redux/preference/reducer.js b/src/redux/preference/reducer.js
index e634104..089d828 100644
--- a/src/redux/preference/reducer.js
+++ b/src/redux/preference/reducer.js
@@ -1,4 +1,4 @@
-import { RESET_OPTIONS, UPDATE_DATE_TYPE, UPDATE_LANGUAGE, UPDATE_OPTIONS, UPDATE_VIEW_TYPE } from './types';
+import { UPDATE_DATE_TYPE, UPDATE_LANGUAGE, UPDATE_OPTIONS, UPDATE_VIEW_TYPE } from './types';
 
 const initialState = {
   viewType: 'grid',
@@ -16,11 +16,6 @@ export default function reducer(state = initialState, action) {
         ...state,
         options: action.payload
       };
-    case RESET_OPTIONS:
-      return {
-        ...state,
-        options: initialState.options
-      };
     case UPDATE_DATE_TYPE:
       return {
         ...state,
diff --git a/src/redux/preference/types.js b/src/redux/preference/types.js
index e5e52a4..1681e8f 100644
--- a/src/redux/preference/types.js
+++ b/src/redux/preference/types.js
@@ -1,5 +1,4 @@
 export const UPDATE_OPTIONS = 'UPDATE_OPTIONS';
-export const RESET_OPTIONS = 'RESET_OPTIONS';
 export const UPDATE_VIEW_TYPE = 'UPDATE_VIEW_TYPE';
 export const UPDATE_DATE_TYPE = 'UPDATE_DATE_TYPE';
 export const UPDATE_LANGUAGE = 'UPDATE_LANGUAGE';