vikingeducation · rollinglex · Oct 5, 2017 · Oct 6, 2017 · Oct 6, 2017 · Oct 8, 2017
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+/src/config.js
diff --git a/README.md b/README.md
@@ -1,2 +1,4 @@
 # assignment_exchange_rates
 How much does a Big Mac cost in Italy?
+
+Alex Thomas
diff --git a/package.json b/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "assignment_exchange_rates",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "bootstrap": "^4.0.0-alpha.6",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "react-scripts": "1.0.14"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="en">
+
+<head> 
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="theme-color" content="#000000">
+  <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+  <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+  <title>Currency Converter</title>
+</head>
+
+<body>
+  <noscript>
+    You need to enable JavaScript to run this app.
+  </noscript>
+  <div id="root"></div>
+  <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "192x192",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/src/App.test.js b/src/App.test.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<App />, div);
+});
diff --git a/src/components/App.js b/src/components/App.js
@@ -0,0 +1,85 @@
+import React, { Component } from "react";
+import CurrencyConverterContainer from "./CurrencyConverterContainer";
+import CurrencyRatesTableContainer from "./CurrencyRatesTableContainer";
+import JumbotronFluid from "./elements/JumbotronFluid";
+import config from '../config'
+class App extends Component {
+  constructor() {
+    super(),
+      (this.state = {
+        isFetching: false,
+        baseCurrency: "USD",
+        rates: [],
+        date: new Date().toISOString().slice(0, 10)
+      });
+  }
+
+
+  getRates = () => {
+    fetch(
+      `http://api.fixer.io/${this.state.date}?base=${this.state.baseCurrency}?{config.key}`
+    )
+      .then(response => response.json())
+      .then(json => {
+        this.setState({
+          rates: json.rates,
+          isFetching: false
+        });
+      });
+  };
+  componentDidMount() {
+    // Before performing the fetch, set isFetching to true
+    this.setState({ isFetching: true }, this.getRates());
+  }
+  shouldComponentUpdate() {
+    return this.state.isFetching !== false;
+  }
+
+  switch_currency = e => {
+    e.preventDefault();
+    //console.log("select-target", e.target);
+    //console.log("select-target.value", e.target.value);
+    this.setState(
+      {
+        baseCurrency: e.target.value
+      },
+      this.setState({ isFetching: true }, this.getRates())
+    );
+  };
+
+  setDate = e => {
+    //console.log("date-target", e.target);
+    //console.log("date-target.value", e.target.value);
+    this.setState(
+      {
+        date: e.target.value,
+        isFetching: true
+      },
+      this.getRates()
+    );
+  };
+  render() {
+    const { baseCurrency, rates, date } = this.state;
+    const currenciesArray = Object.keys(rates);
+    //console.log("RATES Passed", rates);
+    console.log("RATES Passed", config.key);
+    return (
+      <div className="wrapper">
+        <JumbotronFluid heading="Currency Converter" />
+        <CurrencyRatesTableContainer
+          baseCurrency={baseCurrency}
+          onSubmit={this.populateCurrencyTable}
+          switch_currency={this.switch_currency}
+          setDate={this.setDate}
+          date={date}
+          rates={rates}
+          currenciesArray={currenciesArray}
+        />
+        <hr />
+        <CurrencyConverterContainer />
+      </div>
+    );
+  }
+}
+
+export default App;
diff --git a/src/components/BaseCurrencyForm.js b/src/components/BaseCurrencyForm.js
@@ -0,0 +1,42 @@
+import React from "react";
+import Select from "./elements/Select";
+import Button from "./elements/Button";
+
+const BaseCurrencyForm = props => {
+	const {
+		rates,
+		baseCurrency,
+		switch_currency,
+		setDate,
+		date,
+		currenciesArray
+	} = props;
+	return (
+		<form className="container" id="ChooseBaseCurrency">
+			<Select
+				className="form-control"
+				name="baseCurrency"
+				form="ChooseBaseCurrency"
+				handleSwitch={switch_currency}
+				data={currenciesArray}
+				baseValue={baseCurrency}
+			/>
+			<input
+				className="form-control"
+				type="date"
+				name="rateDate"
+				value={date}
+				onChange={setDate}
+			/>
+			<br />
+		</form>
+	);
+};
+
+BaseCurrencyForm.defaultProps = {
+	type: "button",
+	color: "default",
+	children: "Submit"
+};
+
+export default BaseCurrencyForm;
diff --git a/src/components/ConverterBaseCurrencySelector.js b/src/components/ConverterBaseCurrencySelector.js
@@ -0,0 +1,28 @@
+import React from "react";
+import Select from "./elements/Select";
+import PropTypes from "prop-types";
+
+const ConverterBaseCurrencySelector = ({
+	selectCurrency,
+	converterBaseCurrency,
+	currenciesArray
+}) => {
+	//currenciesArray.unshift(converterBaseCurrency);
+	return (
+		<Select
+			name="baseCurrency"
+			form="CurrencyConverterForm"
+			handleSwitch={selectCurrency}
+			baseValue={converterBaseCurrency}
+			data={currenciesArray}
+		/>
+	);
+};
+
+ConverterBaseCurrencySelector.propTypes = {
+	convertedCurrency: PropTypes.string.isRequired,
+	selectCurrency: PropTypes.func.isRequired,
+	currenciesArray: PropTypes.array.isRequired
+};
+export default ConverterBaseCurrencySelector;
+
diff --git a/src/components/ConverterConvertedCurrencySelector.js b/src/components/ConverterConvertedCurrencySelector.js
@@ -0,0 +1,28 @@
+import React from "react";
+import Select from "./elements/Select";
+import PropTypes from "prop-types";
+
+const ConverterConvertedCurrencySelector = ({
+	selectCurrency,
+	convertedCurrency,
+	currenciesArray
+}) => {
+	//currenciesArray.unshift(convertedCurrency);
+	return (
+		<Select
+			name="baseCurrency"
+			form="CurrencyConverterForm"
+			handleSwitch={selectCurrency}
+			baseValue={convertedCurrency}
+			data={currenciesArray}
+		/>
+	);
+};
+
+ConverterConvertedCurrencySelector.propTypes = {
+	convertedCurrency: PropTypes.string.isRequired,
+	selectCurrency: PropTypes.func.isRequired,
+	currenciesArray: PropTypes.array.isRequired
+};
+
+export default ConverterConvertedCurrencySelector;
diff --git a/src/components/CurrencyConverter.js b/src/components/CurrencyConverter.js
@@ -0,0 +1,8 @@
+import React from "react";
+import Converter from "./elements/Converter";
+
+const CurrencyConverter = () => {
+  return <div />;
+};
+
+export default CurrencyConverter;