Initial commit

-Add code base to already started project
jonaskinnvall · Jan 13, 2021 · 18ff13e · 18ff13e
commit 18ff13e
Show file tree

Hide file tree

Showing 9 changed files with 30,483 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,8 @@
+#Dependencies
+node_modules/
+
+#Production
+build/
+
+#Misc
+.DS_Store
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "countrysearch",
+  "version": "1.0.0",
+  "description": "",
+  "keywords": [],
+  "main": "src/index.js",
+  "dependencies": {
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "react-scripts": "^3.4.4"
+  },
+  "devDependencies": {
+    "typescript": "3.8.3"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,44 @@
+<!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>React App</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/src/App.js b/src/App.js
@@ -0,0 +1,48 @@
+import React, { useState, useEffect } from "react";
+import "./styles.css";
+import CountryCard from "./CountryCard";
+import InputField from "./InputField";
+
+export default function App() {
+  const [Countries, setCountries] = useState();
+  const [Search, setSearch] = useState();
+console.log("APP")
+  // UseEFfect to fetch country when user types in search field
+  useEffect(() => {
+    const fetchCountry = (country) => {
+      fetch(
+        "https://restcountries.eu/rest/v2/name/" + country + "?fullText=true"
+      )
+        .then((response) => response.json())
+        .then((data) => setCountries(data))
+        .catch((err) => console.log("Fetching error", err));
+    };
+
+    if (Search) {
+      fetchCountry(Search);
+    }
+  }, [Search]);
+
+  return (
+    <>
+      <div className="App Navbar">
+        <h1>Country Search</h1>
+        <InputField
+          inputType={"Search"}
+          inputValue={Search}
+          setInput={setSearch}
+        />
+      </div>
+
+      {!Countries ? (
+        <div className="App">
+          <h2>Search for a country to learn more about it!</h2>
+        </div>
+      ) : (
+        <div className="App">
+          <CountryCard countryInfo={Countries[0]} />
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/src/CountryCard.js b/src/CountryCard.js
@@ -0,0 +1,85 @@
+import React, { useState, useEffect } from "react";
+import InputField from "./InputField";
+import "./styles.css";
+
+const CountryCard = ({ countryInfo }) => {
+  const [AmountSEK, setAmountSEK] = useState();
+  const [Currency, setCurrency] = useState();
+
+  // UseEffect to fetch exchange rate when user has
+  // searched for a country and types a value in SEK field
+  useEffect(() => {
+    const fetchRate = (amount, targetCurr) => {
+      fetch(
+        "https://api.exchangerate.host/convert?from=SEK&to=" +
+          targetCurr +
+          "&amount=" +
+          amount
+      )
+        .then((response) => response.json())
+        .then((data) => setCurrency(data))
+        .catch((err) => console.log("Fetching error", err));
+    };
+
+    if (AmountSEK && countryInfo) {
+      fetchRate(AmountSEK, countryInfo.currencies[0].code);
+    }
+  }, [AmountSEK, countryInfo]);
+
+  return (
+    <>
+      {!countryInfo ? (
+        <div>
+          <h2>
+            Fetching error... No country with matching name or country code.
+            Please try again.
+          </h2>
+        </div>
+      ) : (
+        <div className="countryCard">
+          <img className="flag" src={countryInfo.flag} alt="" />
+          <div className="columnWidth">
+            <h1>{countryInfo.name}</h1>
+            <h3>({countryInfo.nativeName})</h3>
+            <h3> Part of {countryInfo.region}</h3>
+          </div>
+          <div className="categories columnWidth">
+            <h3>Capital: {countryInfo.capital}</h3>
+            <h3>Population: {countryInfo.population.toLocaleString()}</h3>
+            <h3>
+              Currency: {countryInfo.currencies[0].name} (
+              {countryInfo.currencies[0].code})
+            </h3>
+          </div>
+          <div>
+            <p>
+              Input value in SEK to get current exchange rate for{" "}
+              {countryInfo.currencies[0].code}:
+            </p>
+            <div className="currencyInput">
+              <div className="columnWidth">
+                <InputField
+                  inputType={"SEK"}
+                  inputValue={AmountSEK}
+                  setInput={setAmountSEK}
+                />
+              </div>
+              <div>
+                <p>=</p>
+              </div>
+              {Currency && AmountSEK !== "" ? (
+                <p>
+                  {Currency.result} {countryInfo.currencies[0].code}
+                </p>
+              ) : (
+                <p>{countryInfo.currencies[0].code}</p>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default CountryCard;
diff --git a/src/InputField.js b/src/InputField.js
@@ -0,0 +1,31 @@
+import React from "react";
+import "./styles.css";
+
+const InputField = ({ inputType, setInput }) => {
+  let waitInput = null;
+
+  // Handle change in input fields with a timeout
+  // to wait for user to finish typing before setting value
+  const handleChange = (e) => {
+    let inputText = e.target.value;
+    if (waitInput) clearTimeout(waitInput);
+    waitInput = setTimeout(() => {
+      setInput(inputText);
+    }, 500);
+  };
+
+  return (
+    <>
+      <input
+        className="Input"
+        type="text"
+        placeholder={inputType === "Search" ? "Search countries.." : "SEK"}
+        onChange={(e) => {
+          handleChange(e);
+        }}
+      ></input>
+    </>
+  );
+};
+
+export default InputField;
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,13 @@
+import React from "react";
+import ReactDOM from "react-dom";
+
+import App from "./App";
+
+const rootElement = document.getElementById("root");
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  rootElement
+);
diff --git a/src/styles.css b/src/styles.css
@@ -0,0 +1,61 @@
+.App {
+  font-family: sans-serif;
+  text-align: center;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+}
+.Navbar {
+  background-color: rgb(9, 22, 104);
+  margin-bottom: 10px;
+}
+
+.Navbar h1 {
+  color: rgb(250, 165, 170);
+}
+
+.Input {
+  height: 50%;
+}
+
+.countryCard {
+  border-radius: 10px;
+  background-color: rgb(255, 241, 242);
+  margin: 5px;
+  padding: 15px;
+  min-width: auto;
+  max-width: auto;
+  width: 50%;
+  height: 50%;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-around;
+  align-items: center;
+
+  -webkit-box-shadow: -2px 1px 33px -20px rgba(0, 0, 0, 0.17);
+  -moz-box-shadow: -2px 1px 33px -20px rgba(0, 0, 0, 0.17);
+  box-shadow: -2px 1px 33px -20px rgba(0, 0, 0, 0.17);
+}
+
+.columnWidth {
+  width: 50%;
+}
+
+.flag {
+  display: block;
+  border-radius: 10px;
+  margin: auto;
+  max-height: 100%;
+  max-width: 100%;
+  height: 150px;
+  width: auto;
+  -webkit-box-shadow: -2px 1px 33px -20px rgba(0, 0, 0, 0.17);
+  -moz-box-shadow: -2px 1px 33px -20px rgba(0, 0, 0, 0.17);
+  box-shadow: -2px 1px 33px -20px rgba(0, 0, 0, 0.17);
+}
+
+.currencyInput {
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+}