Code clean

src/App.js

@@ -16,7 +16,7 @@ function App() {
       <Router>
         <Header />
 
-        <div className='p-3'>
+        <main className='p-3'>
           <Switch>
             <Route exact path='/'>
               <Home />
@@ -28,7 +28,7 @@ function App() {
               <Product />
             </Route>
           </Switch>
-        </div>
+        </main>
 
         <Footer />
       </Router>

src/Components/CounterExample.js

@@ -8,12 +8,12 @@ function CounterExample() {
             <h1>
                 {count}
             </h1>
-            <h1 onClick={() => setCount(count + 1)}>
+            <h2 onClick={() => setCount(count + 1)}>
                 Plus
-            </h1>
-            <h1 onClick={() => setCount(count - 1)}>
+            </h2>
+            <h2 onClick={() => setCount(count - 1)}>
                 Minus
-            </h1>
+            </h2>
         </div>
     )
 }

src/Components/Footer.js

@@ -3,7 +3,7 @@ import React from 'react';
 function Footer() {
     return (
         <footer className='bg-gray-200 text-center text-xs p-3 absolute bottom-0 w-full'>
-            AppName
+            <p>AppName</p>
         </footer>
     )
 }

src/Components/Header.js

@@ -1,11 +1,11 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 import Navigation from './Navigation'
 
 function Header() {
     return (
         <header className='border-b font-bold p-3 flex justify-between items-center'>
-            <span>AppName</span>
-
+            <Link to="/">AppName</Link>
             <Navigation />
         </header>
     )

src/Components/Loader.js

@@ -3,7 +3,7 @@ import React from 'react'
 function Loader() {
     return (
         <div className='flex justify-center'>
-            <div className='loader'></div>
+            <div className='loader' />
         </div>
     )
 }

src/Components/NavigationMenu.js

@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom';
 function NavigationMenu(props) {
     return (
         <div>
-            <div className='font-bold py-3'>AppName</div>
+            <header className='font-bold py-3'>AppName</header>
             <ul>
                 <li>
                     <Link

src/Components/ProductCard.js

@@ -19,14 +19,13 @@ export default function ProductCard(props) {
                 <div className="font-bold mb-3">
                     $ {props.product.price}
                 </div>
-                <div className="mb-3">
+                <p className="mb-3">
                     {props.product.description}
-                </div>
-                <Link
-                    to={`/products/${props.product.id}`}
-                    className="bg-blue-500 text-white p-2 flex justify-center"
-                >
-                    View
+                </p>
+                <Link to={`/products/${props.product.id}`}>
+                    <button className="bg-blue-500 text-white p-2 flex justify-center w-full">
+                        View
+                    </button>
                 </Link>
             </div>
         </div >

src/Hooks/HTTPRequest.js

@@ -1,35 +1,35 @@
-import React, { useState, useEffect } from 'react'
-import axios from 'axios'
+import { useState, useEffect } from 'react';
+import axios from 'axios';
 
 export function useAxiosGet(url) {
-    const [products, setProducts] = useState({
+    const [request, setRequest] = useState({
         loading: false,
         data: null,
         error: false
     });
 
     useEffect(() => {
-        setProducts({
+        setRequest({
             loading: true,
             data: null,
             error: false
         });
 
         axios.get(url).then(response => {
-            setProducts({
+            setRequest({
                 loading: false,
                 data: response.data,
                 error: false
             });
         }).catch(() => {
-            setProducts({
+            setRequest({
                 loading: false,
                 data: null,
                 error: true
             });
         });
     }, [url]);
 
-    return products;
+    return request;
 }
 

src/Views/About.js

@@ -2,10 +2,10 @@ import React from 'react'
 
 function About() {
     return (
-        <div>
+        <article>
             <h1 className='font-bold text-2xl mb-3'>About us</h1>
             <p>This is the about page content.</p>
-        </div>
+        </article>
     );
 }
 

src/Views/Home.js

@@ -1,19 +1,19 @@
-import React from 'react'
+import React from 'react';
 import Loader from '../Components/Loader';
 import ProductCard from '../Components/ProductCard';
 import { useAxiosGet } from '../Hooks/HTTPRequest';
 
 function Home() {
     const url = 'https://5f7b89e100bd740016909a8a.mockapi.io/products?page=1&limit=10';
+    const products = useAxiosGet(url);
     let content = null;
-    let products = useAxiosGet(url);
 
     if (products.loading) {
         content = <Loader />
     }
 
     if (products.error) {
-        content = <p>There was an error. Please refresh or try again.</p>
+        content = <p className="bg-red-300 p-3 rounded-md">There was an error. Please refresh or try again.</p>
     }
 
     if (products.data) {

src/Views/Product.js

@@ -1,40 +1,14 @@
-import React, { useState, useEffect } from 'react'
-import axios from 'axios'
+import React from 'react'
 import { useParams } from 'react-router-dom';
 import Loader from '../Components/Loader';
+import { useAxiosGet } from '../Hooks/HTTPRequest';
 
 function Product() {
     const { id } = useParams();
     const url = `https://5f7b89e100bd740016909a8a.mockapi.io/products/${id}`;
-    const [product, setProduct] = useState({
-        loading: false,
-        data: null,
-        error: false
-    });
+    const product = useAxiosGet(url);
     let content = null;
 
-    useEffect(() => {
-        setProduct({
-            loading: true,
-            data: null,
-            error: false
-        });
-
-        axios.get(url).then(response => {
-            setProduct({
-                loading: false,
-                data: response.data,
-                error: false
-            });
-        }).catch(() => {
-            setProduct({
-                loading: false,
-                data: null,
-                error: true
-            });
-        });
-    }, [url]);
-
     if (product.loading) {
         content = <Loader />
     }