prettierrc save

src/About.js

@@ -1,7 +1,7 @@
-import React from "react"
-import { Link } from "react-router-dom"
+import React from 'react'
+import { Link } from 'react-router-dom'
 // import logo from './logo.svg';
-import "./About.css"
+import './About.css'
 
 const About = props => {
   return (

src/AnimalDetail.js

@@ -1,7 +1,7 @@
-import React, { useState, useEffect } from "react"
-import { useParams } from "react-router-dom"
-import axios from "axios"
-import "./AnimalDetail.css"
+import React, { useState, useEffect } from 'react'
+import { useParams } from 'react-router-dom'
+import axios from 'axios'
+import './AnimalDetail.css'
 
 const AnimalDetail = props => {
   // start a state varaible with a blank array
@@ -15,7 +15,7 @@ const AnimalDetail = props => {
     // fetch some mock data about animals for sale
     // the id of the animal that was clicked on is passed as a part of the match field of the props
     console.log(`fetching animal id=${animalId}...`)
-    axios("https://my.api.mockaroo.com/animals.json?num=1&key=d9ddfc40")
+    axios('https://my.api.mockaroo.com/animals.json?num=1&key=d9ddfc40')
       .then(response => {
         // extract the data from the server response
         setData(response.data)
@@ -29,11 +29,11 @@ const AnimalDetail = props => {
         const backupData = [
           {
             id: 2,
-            title: "Numbat",
-            country: "Russia",
-            price: "$2.37",
+            title: 'Numbat',
+            country: 'Russia',
+            price: '$2.37',
             description:
-              "Cras non velit nec nisi vulputate nonummy. Maecenas tincidunt lacus at velit. Vivamus vel nulla eget eros elementum pellentesque.",
+              'Cras non velit nec nisi vulputate nonummy. Maecenas tincidunt lacus at velit. Vivamus vel nulla eget eros elementum pellentesque.',
           },
         ]
 

src/AnimalThumb.js

@@ -1,6 +1,6 @@
-import React from "react"
-import { Link } from "react-router-dom"
-import "./AnimalThumb.css"
+import React from 'react'
+import { Link } from 'react-router-dom'
+import './AnimalThumb.css'
 
 const AnimalThumb = props => {
   // console.log(props);

src/AnimalsList.js

@@ -1,9 +1,9 @@
-import React, { useState, useEffect } from "react"
-import { Navigate } from "react-router-dom"
-import axios from "axios"
+import React, { useState, useEffect } from 'react'
+import { Navigate } from 'react-router-dom'
+import axios from 'axios'
 // import logo from './logo.svg';
-import "./AnimalsList.css"
-import AnimalThumb from "./AnimalThumb"
+import './AnimalsList.css'
+import AnimalThumb from './AnimalThumb'
 
 const AnimalsList = props => {
   // start a state varaible with a blank array
@@ -12,8 +12,8 @@ const AnimalsList = props => {
   // the following side-effect will be called once upon initial render
   useEffect(() => {
     // fetch some mock data about animals for sale
-    console.log("fetching 10 random animals...")
-    axios("https://my.api.mockaroo.com/animals.json?num=10&key=d9ddfc40")
+    console.log('fetching 10 random animals...')
+    axios('https://my.api.mockaroo.com/animals.json?num=10&key=d9ddfc40')
       .then(response => {
         // extract the data from the server response
         setData(response.data)
@@ -27,19 +27,19 @@ const AnimalsList = props => {
         const backupData = [
           {
             id: 1,
-            title: "Paddy heron (unidentified)",
-            country: "Brazil",
-            price: "$10.51",
+            title: 'Paddy heron (unidentified)',
+            country: 'Brazil',
+            price: '$10.51',
             description:
-              "Donec diam neque, vestibulum eget, vulputate ut, ultrices vel, augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec pharetra, magna vestibulum aliquet ultrices, erat tortor sollicitudin mi, sit amet lobortis sapien sapien non mi. Integer ac neque.",
+              'Donec diam neque, vestibulum eget, vulputate ut, ultrices vel, augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec pharetra, magna vestibulum aliquet ultrices, erat tortor sollicitudin mi, sit amet lobortis sapien sapien non mi. Integer ac neque.',
           },
           {
             id: 2,
-            title: "Numbat",
-            country: "Russia",
-            price: "$2.37",
+            title: 'Numbat',
+            country: 'Russia',
+            price: '$2.37',
             description:
-              "Cras non velit nec nisi vulputate nonummy. Maecenas tincidunt lacus at velit. Vivamus vel nulla eget eros elementum pellentesque.",
+              'Cras non velit nec nisi vulputate nonummy. Maecenas tincidunt lacus at velit. Vivamus vel nulla eget eros elementum pellentesque.',
           },
         ]
 

src/App.js

@@ -1,13 +1,13 @@
-import React, { useState } from "react"
-import { BrowserRouter as Router, Routes, Route } from "react-router-dom"
-import PrimaryNav from "./PrimaryNav"
-import Home from "./Home"
-import About from "./About"
-import AnimalDetail from "./AnimalDetail"
-import AnimalsList from "./AnimalsList"
-import Login from "./Login"
-import Logout from "./Logout"
-import "./App.css"
+import React, { useState } from 'react'
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
+import PrimaryNav from './PrimaryNav'
+import Home from './Home'
+import About from './About'
+import AnimalDetail from './AnimalDetail'
+import AnimalsList from './AnimalsList'
+import Login from './Login'
+import Logout from './Logout'
+import './App.css'
 
 // set up routes so different URL routes load up different main components
 const App = props => {

src/Home.js

@@ -1,7 +1,7 @@
-import React from "react"
-import { Link } from "react-router-dom"
+import React from 'react'
+import { Link } from 'react-router-dom'
 // import logo from './logo.svg';
-import "./Home.css"
+import './Home.css'
 
 const Home = props => {
   return (

src/Login.js

@@ -1,8 +1,8 @@
-import React, { useState, useEffect } from "react"
-import { Navigate, useSearchParams } from "react-router-dom"
-import axios from "axios"
+import React, { useState, useEffect } from 'react'
+import { Navigate, useSearchParams } from 'react-router-dom'
+import axios from 'axios'
 // import logo from './logo.svg';
-import "./Login.css"
+import './Login.css'
 
 const Login = props => {
   let [urlSearchParams] = useSearchParams() // get access to the URL query string parameters
@@ -13,10 +13,10 @@ const Login = props => {
 
   // if the user got here by trying to access our Protected page, there will be a query string parameter called 'error' with the value 'protected'
   useEffect(() => {
-    const qsError = urlSearchParams.get("error") // get any 'error' field in the URL query string
-    if (qsError === "protected")
+    const qsError = urlSearchParams.get('error') // get any 'error' field in the URL query string
+    if (qsError === 'protected')
       setErrorMessage(
-        "Please log in to view our fabulous protected animals list."
+        'Please log in to view our fabulous protected animals list.'
       )
   }, [])
 
@@ -41,7 +41,7 @@ const Login = props => {
       }
       // send the request to the server api to authenticate
       const response = await axios.post(
-        "https://my.api.mockaroo.com/login.json?key=d9ddfc40",
+        'https://my.api.mockaroo.com/login.json?key=d9ddfc40',
         requestData
       )
       // store the response data into the data state variable
@@ -64,7 +64,7 @@ const Login = props => {
           mock API and randomly allow the user in or not. Keep trying until you
           get in.
         </p>
-        {errorMessage ? <p className="error">{errorMessage}</p> : ""}
+        {errorMessage ? <p className="error">{errorMessage}</p> : ''}
         <section className="main-content">
           <img alt="login!" src="https://picsum.photos/200?page=home" />
           <form onSubmit={handleSubmit}>

src/Logout.js

@@ -1,5 +1,5 @@
-import React, { useEffect } from "react"
-import { Navigate } from "react-router-dom"
+import React, { useEffect } from 'react'
+import { Navigate } from 'react-router-dom'
 // import logo from './logo.svg';
 
 const Logout = props => {

src/PrimaryNav.js

@@ -1,6 +1,6 @@
-import React from "react"
-import "./PrimaryNav.css"
-import { Link } from "react-router-dom"
+import React from 'react'
+import './PrimaryNav.css'
+import { Link } from 'react-router-dom'
 
 const PrimaryNav = props => {
   // we assume a function named setuser is passed as a prop to this component

src/index.js

@@ -1,11 +1,11 @@
-import React from "react"
-import ReactDOM from "react-dom"
-import "./index.css"
-import App from "./App"
-import * as serviceWorker from "./serviceWorker"
+import React from 'react'
+import ReactDOM from 'react-dom'
+import './index.css'
+import App from './App'
+import * as serviceWorker from './serviceWorker'
 
 // inject the first components into the page
-ReactDOM.render(<App />, document.getElementById("root"))
+ReactDOM.render(<App />, document.getElementById('root'))
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.