Clean up files structures

.eslintrc.js

@@ -1,21 +1,43 @@
 module.exports = {
+  extends: ['airbnb', 'plugin:prettier/recommended', 'prettier/react'],
   env: {
     browser: true,
+    commonjs: true,
     es6: true,
+    jest: true,
     node: true,
   },
-  extends: ["plugin:react/recommended", "airbnb"],
-  globals: {
-    Atomics: "readonly",
-    SharedArrayBuffer: "readonly",
+  rules: {
+    'no-await-in-loop': 'off',
+    'no-param-reassign': 'off',
+    'import/extensions': 'off',
+    'jsx-a11y/interactive-supports-focus': 'off',
+    'jsx-a11y/click-events-have-key-events': 'off',
+    'jsx-a11y/click-events-have-key-events': 'off',
+    'react/prop-types': 'off',
+    'jsx-a11y/label-has-associated-control': 'off',
+    'react/self-closing-comp': 'off',
+    'react/prefer-stateless-function': 'off',
+    'react/button-has-type': 'off',
+    'func-names': 'off',
+    'one-var': 'off',
+    'no-console': 'off',
+    'no-plusplus': 'off',
+    'jsx-a11y/href-no-hash': ['off'],
+    'react/jsx-filename-extension': ['warn', { extensions: ['.js', '.jsx'] }],
+    'max-len': [
+      'warn',
+      {
+        code: 80,
+        tabWidth: 2,
+        comments: 80,
+        ignoreComments: false,
+        ignoreTrailingComments: true,
+        ignoreUrls: true,
+        ignoreStrings: true,
+        ignoreTemplateLiterals: true,
+        ignoreRegExpLiterals: true,
+      },
+    ],
   },
-  parserOptions: {
-    ecmaFeatures: {
-      jsx: false,
-    },
-    ecmaVersion: 11,
-    sourceType: "module",
-  },
-  plugins: ["react"],
-  rules: {},
 };

.prettierrc.js

@@ -1,4 +1,6 @@
 module.exports = {
-  printWidth: 100,
+  printWidth: 80,
   singleQuote: true,
+  trailingComma: 'es5',
+  arrowParens: 'avoid',
 };

src/components/containers/Attractions.js → src/client/components/Attractions.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Attraction from '../display/Attraction';
+import Attraction from './display/Attraction';
 
 const Attractions = (props) => {
   const attractionArr = [];
@@ -16,8 +16,8 @@ const Attractions = (props) => {
     );
   });
   return (
-    <div id='attractions-list'>
-      <h1 id='attractions-title'>Sights to See</h1>
+    <div id="attractions-list">
+      <h1 id="attractions-title">Sights to See</h1>
       {attractionArr}
     </div>
   );

src/components/containers/Favorites.js → src/client/components/Favorites.js

@@ -1,11 +1,11 @@
 import React from 'react';
 
-import City from '../display/City';
+import City from './display/City';
 
 function Favorites(props) {
   // props.favorites(array of cities)   props.setCurrent(function to change current)
   if (props.favorites.length === 0)
-    return <div id='favorites'>You don't have any favorites yet</div>;
+    return <div id="favorites">You don't have any favorites yet</div>;
   const arrayOfCities = [];
   console.log('Faves in Favorites.js', props.favorites);
   props.favorites.forEach((city, index) => {
@@ -21,8 +21,8 @@ function Favorites(props) {
   });
 
   return (
-    <div id='favorites'>
-      <h1 id='favorites-title'>Favorite Cities</h1>
+    <div id="favorites">
+      <h1 id="favorites-title">Favorite Cities</h1>
       {arrayOfCities}
     </div>
   );

src/components/containers/Food.js → src/client/components/Food.js

@@ -1,24 +1,19 @@
 import React from 'react';
-import Recipe from '../display/Recipe';
+import Recipe from './display/Recipe';
 
-const Food = props => {
+const Food = (props) => {
   const recipeArr = [];
   const { recipes } = props;
   recipes.forEach((recipe, index) => {
     let { title, sourceUrl, image } = recipe;
     title = title.charAt(0).toUpperCase() + title.slice(1);
     recipeArr.push(
-      <Recipe
-        key={`recipe-${index + 1}`}
-        title={title}
-        sourceUrl={sourceUrl}
-        image={image}
-      />
+      <Recipe key={`recipe-${index + 1}`} title={title} sourceUrl={sourceUrl} image={image} />
     );
   });
   return (
-    <div id='food-container'>
-      <p id='food-title'>Great Local Recipes!</p>
+    <div id="food-container">
+      <p id="food-title">Great Local Recipes!</p>
       {recipeArr}
     </div>
   );

src/components/containers/WIndow.js → src/client/components/WIndow.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Switch, Route, Link } from 'react-router-dom';
 import { useState, useEffect } from 'react';
-import Info from '../display/Info';
+import Info from './display/Info';
 import { FontAwesomeIcon as FAIcon } from '@fortawesome/react-fontawesome';
 import { faStar as solidStar } from '@fortawesome/free-solid-svg-icons';
 import { faStar as regStar } from '@fortawesome/free-regular-svg-icons';
@@ -10,14 +10,14 @@ const Window = (props) => {
   // props.country={current.countryData} props.addFavorite={setFavorites} />
   return (
     <div id="window">
-      <div id='country-name'>{props.country.name}</div>
-      <img className='country-flag' src={props.country.flag} />
+      <div id="country-name">{props.country.name}</div>
+      <img className="country-flag" src={props.country.flag} />
       <Info countryData={props.country} />
       <a id="wiki" href={`https://en.wikipedia.org/wiki/${props.country.name}`}>
         Read more on wiki!
       </a>
     </div>
   );
-}
+};
 
 export default Window;

src/components/containers/Home.js → src/client/containers/Home.js

@@ -1,75 +1,75 @@
 /* eslint-disable react/prop-types */
 /* eslint-disable react/jsx-filename-extension */
-import React from "react";
-import { useState, useEffect } from "react";
-import { FontAwesomeIcon as FAIcon } from "@fortawesome/react-fontawesome";
-import { faStar as regStar } from "@fortawesome/free-regular-svg-icons";
-import { faStar as solidStar } from "@fortawesome/free-solid-svg-icons";
+import React from 'react';
+import { useState, useEffect } from 'react';
+import { FontAwesomeIcon as FAIcon } from '@fortawesome/react-fontawesome';
+import { faStar as regStar } from '@fortawesome/free-regular-svg-icons';
+import { faStar as solidStar } from '@fortawesome/free-solid-svg-icons';
 
-import Spotify from "./Spotify";
-import Weather from "./Weather";
-import Window from "./Window";
-import Search from "./Search";
-import Food from "./Food";
-import Favorites from "./Favorites";
-import Attractions from "./Attractions";
-import Youtube from "./Youtube";
-import unsplashId from "../../unsplash_id";
+import Spotify from '../components/Spotify';
+import Weather from '../components/Weather';
+import Window from '../components/Window';
+import Search from '../components/Search';
+import Food from '../components/Food';
+import Favorites from '../components/Favorites';
+import Attractions from '../components/Attractions';
+import Youtube from '../components/Youtube';
+import unsplashId from '../../unsplash_id';
 
 const Home = () => {
-  const [current, setCurrent] = useState({});  
+  const [current, setCurrent] = useState({});
   // current is the bigAssObject we receive from "grabLocationData" that feeds most of the components with data
-  const [username, setUserName] = useState("");
+  const [username, setUserName] = useState('');
   // for welcoming
-  const [email, setEmail] = useState("");
+  const [email, setEmail] = useState('');
   // unique name to add favs to db
   const [favorites, setFavorites] = useState([]);
   // array of favs we got on initial load
-  const [query, setQuery] = useState("");
+  const [query, setQuery] = useState('');
   // save users search in case he wants to add it to favs(we only save his query, not actual country data
   const [iconStatus, setFavIcon] = useState(false);
   // FavIcon condition
-  
+
   // since its different every time)
 
   // initial load
   useEffect(() => {
-    fetch("http://localhost:8080/api/user")
+    fetch('http://localhost:8080/api/user')
       .then((res) => res.json())
       .then((user) => {
-        console.log('Api/user path')
+        console.log('Api/user path');
         setUserName(user.display_name);
-        console.log('line 42 before email')
+        console.log('line 42 before email');
         setEmail(user.email);
-        console.log('line 44 after email')
-        console.log('Updating favs: ', user.favsArray)
+        console.log('line 44 after email');
+        console.log('Updating favs: ', user.favsArray);
         setFavorites(user.favsArray);
       })
       .catch((err) => err);
   }, []);
   // fires up on search submit and on click of fav city
   const grabLocationData = (location) => {
-    console.log('Grabbing location')
+    console.log('Grabbing location');
     if (!location) return;
     // change the format of incoming string to add if as params
     const locationString = location
-      .split(",")
+      .split(',')
       .map((word) => word.trim())
-      .join("&");
+      .join('&');
     fetch(`http://localhost:8080/api/${locationString}`)
       .then((data) => data.json())
       .then((response) => {
-        console.log("This is the response in grabLocationData: ", response);
+        console.log('This is the response in grabLocationData: ', response);
         setCurrent(response);
-        setQuery(email + ", " + response.userQuery);
+        setQuery(email + ', ' + response.userQuery);
       });
-    
+
     fetch(
       `https://api.unsplash.com/search/photos?query=${locationString},skyline&client_id=${unsplashId}`
     )
       .then((data) => data.json())
       .then((response) => {
-        console.log("This is the response from unsplash: ", response);
+        console.log('This is the response from unsplash: ', response);
         const gradientOpacity = 0.2;
         const rand = Math.floor(Math.random() * 1000);
         document.body.style.backgroundImage = `linear-gradient(rgba(0, 0, 0, ${gradientOpacity}), rgba(0, 0, 0, ${gradientOpacity})), url(${response.results[1].urls.full})`;
@@ -78,16 +78,16 @@ const Home = () => {
   // toggle fav doesnt toggle, only adds fav, there is no way to remove it, sorry guys, we had no time:(
   const toggleFav = (queryString) => {
     // format the string for params
-    const values = queryString.split(",").map((elem) => elem.trim());
+    const values = queryString.split(',').map((elem) => elem.trim());
     const city = values[1];
     const country = values[2];
     const userEmail = values[0];
     fetch(`http://localhost:8080/api/toggleFav/${city}&${country}&${userEmail}`, {
-      method: "POST",
+      method: 'POST',
     })
       .then((data) => data.json())
       .then((updatedFavs) => {
-        console.log('Updating favs: ', updatedFavs)
+        console.log('Updating favs: ', updatedFavs);
         setFavorites(updatedFavs);
         // receive new array of favs and change the state
       });
@@ -114,17 +114,17 @@ const Home = () => {
   }
 
   // Determine star icon based on whether current city is a favorite or not
-  const favIcon =( 
+  const favIcon = (
     <span className="favIcon empty-icon">
       <FAIcon
         onClick={() => {
           toggleFav(query);
         }}
         size="2x"
         icon={regStar}
-        style={{ color: "white" }}
+        style={{ color: 'white' }}
       />
-  </span>
+    </span>
   );
   // const values = current.userQuery.split(",").map((elem) => elem.trim());
   // // If the favorites array is not empty
@@ -147,12 +147,12 @@ const Home = () => {
     <div id="main">
       <div id="leftColumn">
         <div className="welcoming">
-          {" "}
+          {' '}
           <br />
           Welcome, {username}
           !
           <br />
-          <br />{" "}
+          <br />{' '}
         </div>
         <Weather weather={current.weatherData} />
         <Window country={current.countryData} />
@@ -174,7 +174,6 @@ const Home = () => {
           ></iframe>
         </div> */}
         <Attractions attractions={current.travelInfo} />
-
       </div>
       <div id="rightColumn">
         <Favorites
@@ -186,6 +185,6 @@ const Home = () => {
       </div>
     </div>
   );
-}
+};
 
 export default Home;

src/index.js

@@ -1,10 +1,7 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import App from "./components/containers/App.js";
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './client/containers/App.js';
 // import { BrowserRouter } from "react-router-dom";
-import styles from "./styles.scss";
+import styles from './styles.scss';
 
-ReactDOM.render(
-    <App />,
-  document.getElementById("root")
-);
+ReactDOM.render(<App />, document.getElementById('root'));