Reformat codebase

CodeYourFuture · Feb 28, 2019 · 965f624 · 965f624
1 parent fe75e04
commit 965f624
Show file tree

Hide file tree

Showing 15 changed files with 203 additions and 208 deletions.
diff --git a/public/index.html b/public/index.html
@@ -1,8 +1,8 @@
 <!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 charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
     <title>React App</title>
   </head>
   <body>

diff --git a/src/App.js b/src/App.js
@@ -1,17 +1,17 @@
-import React, { Component } from 'react';
-import Favourites from './components/Favourites';
-import RandomDog from './components/RandomDog';
-import DogBattle from './components/DogBattle';
-import Breeds from './components/Breeds';
-import './App.css';
+import React, { Component } from "react";
+import Favourites from "./components/Favourites";
+import RandomDog from "./components/RandomDog";
+import DogBattle from "./components/DogBattle";
+import Breeds from "./components/Breeds";
+import "./App.css";
 
 class App extends Component {
   constructor() {
     super();
     this.state = {
       favouriteBreeds: [],
-      savedPhotos: [],
-    }
+      savedPhotos: []
+    };
   }
   render() {
     return (

diff --git a/src/App.test.js b/src/App.test.js
@@ -1,9 +1,9 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
 
-it('renders without crashing', () => {
-  const div = document.createElement('div');
+it("renders without crashing", () => {
+  const div = document.createElement("div");
   ReactDOM.render(<App />, div);
   ReactDOM.unmountComponentAtNode(div);
 });
diff --git a/src/components/Breeds.css b/src/components/Breeds.css
@@ -1,35 +1,35 @@
 .Breeds {
-	margin: 4rem auto;
-	max-width: 50rem;
-	border: 1px solid #ddd;
-	border-bottom-width: 4px;
-	border-top: 0;
-	box-shadow: 0 -4px 0 #efd67f;
-	padding: 1.5rem;
+  margin: 4rem auto;
+  max-width: 50rem;
+  border: 1px solid #ddd;
+  border-bottom-width: 4px;
+  border-top: 0;
+  box-shadow: 0 -4px 0 #efd67f;
+  padding: 1.5rem;
 }
 
 .Breeds-title {
-	margin: 0 0 1rem;
-	font-size: 1rem;
+  margin: 0 0 1rem;
+  font-size: 1rem;
 }
 
 .Breeds-image {
-	max-width: 300px;
-	height: auto;
-	border-radius: 0.5em;
+  max-width: 300px;
+  height: auto;
+  border-radius: 0.5em;
 }
 
 .Breeds-button {
-	display: inline-block;
-	border: none;
-	border-radius: 3px;
-	background: #49bae0;
-	padding: 0.5em 1em;
-	color: #fff;
-	cursor: pointer;
+  display: inline-block;
+  border: none;
+  border-radius: 3px;
+  background: #49bae0;
+  padding: 0.5em 1em;
+  color: #fff;
+  cursor: pointer;
 }
 
 .Breeds-button:hover,
 .Breeds-button:focus {
-	background: #54cbf3;
+  background: #54cbf3;
 }
diff --git a/src/components/Breeds.js b/src/components/Breeds.js
@@ -1,27 +1,27 @@
-import React from 'react';
-import './Breeds.css';
+import React from "react";
+import "./Breeds.css";
 
 class Breeds extends React.Component {
-	render() {
-		return (
-			<div className="Breeds">
-				<h2 className="Breeds-title">Select a Breed</h2>
-				<p>
-					<select className="Breeds-select">
-						<option>beagle</option>
-						<option>bluetick</option>
-						<option>bullterrier-staffordshire</option>
-						<option>malinois</option>
-						<option>wolfhound-irish</option>
-					</select>
-				</p>
-				<img className="Breeds-image" src="http://via.placeholder.com/300x300" />
-				<p>
-					<button className="Breeds-button">Show me more!</button>
-				</p>
-			</div>
-		)
-	}
+  render() {
+    return (
+      <div className="Breeds">
+        <h2 className="Breeds-title">Select a Breed</h2>
+        <p>
+          <select className="Breeds-select">
+            <option>beagle</option>
+            <option>bluetick</option>
+            <option>bullterrier-staffordshire</option>
+            <option>malinois</option>
+            <option>wolfhound-irish</option>
+          </select>
+        </p>
+        <img className="Breeds-image" src="http://via.placeholder.com/300x300" />
+        <p>
+          <button className="Breeds-button">Show me more!</button>
+        </p>
+      </div>
+    );
+  }
 }
 
 export default Breeds;
diff --git a/src/components/Dog.css b/src/components/Dog.css
@@ -1,20 +1,20 @@
 .Dog-image {
-	max-width: 300px;
-	height: auto;
-	border-radius: 0.5em;
+  max-width: 300px;
+  height: auto;
+  border-radius: 0.5em;
 }
 
 .Dog-button {
-	display: inline-block;
-	border: none;
-	border-radius: 3px;
-	background: #49bae0;
-	padding: 0.5em 1em;
-	color: #fff;
-	cursor: pointer;
+  display: inline-block;
+  border: none;
+  border-radius: 3px;
+  background: #49bae0;
+  padding: 0.5em 1em;
+  color: #fff;
+  cursor: pointer;
 }
 
 .Dog-button:hover,
 .Dog-button:focus {
-	background: #54cbf3;
+  background: #54cbf3;
 }
diff --git a/src/components/Dog.js b/src/components/Dog.js
@@ -1,15 +1,15 @@
-import React from 'react';
-import './Dog.css';
+import React from "react";
+import "./Dog.css";
 
 function Dog(props) {
-	return (
-		<div className="Dog">
-			<img className="Dog-image" src={props.image} />
-			<p>
-				<button className="Dog-button">Best Dog</button>
-			</p>
-		</div>
-	)
+  return (
+    <div className="Dog">
+      <img className="Dog-image" src={props.image} />
+      <p>
+        <button className="Dog-button">Best Dog</button>
+      </p>
+    </div>
+  );
 }
 
 export default Dog;
diff --git a/src/components/DogBattle.css b/src/components/DogBattle.css
@@ -1,19 +1,19 @@
 .DogBattle {
-	margin: 4rem auto;
-	max-width: 50rem;
-	border: 1px solid #ddd;
-	border-bottom-width: 4px;
-	border-top: 0;
-	box-shadow: 0 -4px 0 #e17fef;
-	padding: 1.5rem;
+  margin: 4rem auto;
+  max-width: 50rem;
+  border: 1px solid #ddd;
+  border-bottom-width: 4px;
+  border-top: 0;
+  box-shadow: 0 -4px 0 #e17fef;
+  padding: 1.5rem;
 }
 
 .DogBattle-title {
-	margin: 0 0 1rem;
-	font-size: 1rem;
+  margin: 0 0 1rem;
+  font-size: 1rem;
 }
 
 .DogBattle-images {
-	display: flex;
-	justify-content: space-around;
+  display: flex;
+  justify-content: space-around;
 }
diff --git a/src/components/DogBattle.js b/src/components/DogBattle.js
@@ -1,19 +1,19 @@
-import React from 'react';
-import Dog from './Dog.js';
-import './DogBattle.css';
+import React from "react";
+import Dog from "./Dog.js";
+import "./DogBattle.css";
 
 class DogBattle extends React.Component {
-	render() {
-		return (
-			<div className="DogBattle">
-				<h2 className="DogBattle-title">Choose the best dog</h2>
-				<div className="DogBattle-images">
-					<Dog image="http://via.placeholder.com/300x300" />
-					<Dog image="http://via.placeholder.com/300x300" />
-				</div>
-			</div>
-		)
-	}
+  render() {
+    return (
+      <div className="DogBattle">
+        <h2 className="DogBattle-title">Choose the best dog</h2>
+        <div className="DogBattle-images">
+          <Dog image="http://via.placeholder.com/300x300" />
+          <Dog image="http://via.placeholder.com/300x300" />
+        </div>
+      </div>
+    );
+  }
 }
 
 export default DogBattle;
diff --git a/src/components/Favourites.css b/src/components/Favourites.css
@@ -1,37 +1,37 @@
 .Favourites {
-	display: flex;
-	margin: 4rem auto;
-	max-width: 50rem;
-	border: 1px solid #ddd;
-	border-bottom-width: 4px;
-	border-top: 0;
-	box-shadow: 0 -4px 0 #ef7f7f;
-	padding: 1.5rem;
-	text-align: left;
+  display: flex;
+  margin: 4rem auto;
+  max-width: 50rem;
+  border: 1px solid #ddd;
+  border-bottom-width: 4px;
+  border-top: 0;
+  box-shadow: 0 -4px 0 #ef7f7f;
+  padding: 1.5rem;
+  text-align: left;
 }
 
 .Favourites h2 {
-	margin: 0 0 0.5rem;
-	font-size: 1rem;
+  margin: 0 0 0.5rem;
+  font-size: 1rem;
 }
 
 .Favourites-breeds {
-	flex-grow: 2;
+  flex-grow: 2;
 }
 
 .Favourites-saved {
-	flex-grow: 1;
+  flex-grow: 1;
 }
 
 .Favourites-photos {
-	display: flex;
-	flex-wrap: wrap;
+  display: flex;
+  flex-wrap: wrap;
 }
 
 .Favourites-photos img {
-	max-width: 80px;
-	height: auto;
-	margin-right: 1em;
-	margin-bottom: 1em;
-	border-radius: 0.5em;
+  max-width: 80px;
+  height: auto;
+  margin-right: 1em;
+  margin-bottom: 1em;
+  border-radius: 0.5em;
 }
diff --git a/src/components/Favourites.js b/src/components/Favourites.js
@@ -1,25 +1,25 @@
-import React from 'react';
-import './Favourites.css';
+import React from "react";
+import "./Favourites.css";
 
 class Favourites extends React.Component {
-	render() {
-		return (
-			<div className="Favourites">
-				<div className="Favourites-breeds">
-					<h2>Favourite Breeds</h2>
-					<p>???</p>
-					<p>???</p>
-				</div>
-				<div className="Favourites-saved">
-					<h2>Saved Photos</h2>
-					<div className="Favourites-photos">
-						<img src="http://via.placeholder.com/80x80" />
-						<img src="http://via.placeholder.com/80x80" />
-					</div>
-				</div>
-			</div>
-		)
-	}
+  render() {
+    return (
+      <div className="Favourites">
+        <div className="Favourites-breeds">
+          <h2>Favourite Breeds</h2>
+          <p>???</p>
+          <p>???</p>
+        </div>
+        <div className="Favourites-saved">
+          <h2>Saved Photos</h2>
+          <div className="Favourites-photos">
+            <img src="http://via.placeholder.com/80x80" />
+            <img src="http://via.placeholder.com/80x80" />
+          </div>
+        </div>
+      </div>
+    );
+  }
 }
 
 export default Favourites;