JSON server and fetch listings

Author: bradtraversy

package-lock.json

@@ -7,13 +7,15 @@
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "server": "json-server --watch src/jobs.json --port 8000"
   },
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^5.0.1",
-    "react-router-dom": "^6.22.3"
+    "react-router-dom": "^6.22.3",
+    "react-spinners": "^0.13.8"
   },
   "devDependencies": {
     "@types/react": "^18.2.64",
@@ -24,6 +26,7 @@
     "eslint-plugin-react": "^7.34.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
+    "json-server": "^1.0.0-alpha.23",
     "postcss": "^8.4.35",
     "tailwindcss": "^3.4.1",
     "vite": "^5.1.6"

package.json

@@ -6,11 +6,15 @@ import {
 } from 'react-router-dom';
 import MainLayout from './layouts/MainLayout';
 import HomePage from './pages/HomePage';
+import JobsPage from './pages/JobsPage';
+import NotFoundPage from './pages/NotFoundPage';
 
 const router = createBrowserRouter(
   createRoutesFromElements(
     <Route path='/' element={<MainLayout />}>
       <Route index element={<HomePage />} />
+      <Route path='/jobs' element={<JobsPage />} />
+      <Route path='*' element={<NotFoundPage />} />
     </Route>
   )
 );

src/App.jsx

@@ -1,3 +1,4 @@
+import { Link } from 'react-router-dom';
 import Card from './Card';
 
 const HomeCards = () => {
@@ -10,24 +11,24 @@ const HomeCards = () => {
             <p className='mt-2 mb-4'>
               Browse our React jobs and start your career today
             </p>
-            <a
-              href='/jobs.html'
+            <Link
+              to='/jobs'
               className='inline-block bg-black text-white rounded-lg px-4 py-2 hover:bg-gray-700'
             >
               Browse Jobs
-            </a>
+            </Link>
           </Card>
           <Card bg='bg-indigo-100'>
             <h2 className='text-2xl font-bold'>For Employers</h2>
             <p className='mt-2 mb-4'>
               List your job to find the perfect developer for the role
             </p>
-            <a
-              href='/add-job.html'
+            <Link
+              to='/add-job'
               className='inline-block bg-indigo-500 text-white rounded-lg px-4 py-2 hover:bg-indigo-600'
             >
               Add Job
-            </a>
+            </Link>
           </Card>
         </div>
       </div>

src/components/HomeCards.jsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { FaMapMarker } from 'react-icons/fa';
+import { Link } from 'react-router-dom';
 
 const JobListing = ({ job }) => {
   const [showFullDescription, setShowFullDescription] = useState(false);
@@ -36,12 +37,12 @@ const JobListing = ({ job }) => {
             <FaMapMarker className='inline text-lg mb-1 mr-1' />
             {job.location}
           </div>
-          <a
-            href={`/job/${job.id}`}
+          <Link
+            to={`/job/${job.id}`}
             className='h-[36px] bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-lg text-center text-sm'
           >
             Read More
-          </a>
+          </Link>
         </div>
       </div>
     </div>

src/components/JobListing.jsx

@@ -1,20 +1,44 @@
+import { useState, useEffect } from 'react';
 import JobListing from './JobListing';
-import jobs from '../jobs.json';
+import Spinner from './Spinner';
 
-const JobListings = () => {
-  const recentJobs = jobs.slice(0, 3);
+const JobListings = ({ isHome = false }) => {
+  const [jobs, setJobs] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchJobs = async () => {
+      const apiUrl = isHome ? '/api/jobs?_limit=3' : '/api/jobs';
+      try {
+        const res = await fetch(apiUrl);
+        const data = await res.json();
+        setJobs(data);
+      } catch (error) {
+        console.log('Error fetching data', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchJobs();
+  }, []);
 
   return (
     <section className='bg-blue-50 px-4 py-10'>
       <div className='container-xl lg:container m-auto'>
         <h2 className='text-3xl font-bold text-indigo-500 mb-6 text-center'>
-          Browse Jobs
+          {isHome ? 'Recent Jobs' : 'Browse Jobs'}
         </h2>
-        <div className='grid grid-cols-1 md:grid-cols-3 gap-6'>
-          {recentJobs.map((job) => (
-            <JobListing key={job.id} job={job} />
-          ))}
-        </div>
+
+        {loading ? (
+          <Spinner loading={loading} />
+        ) : (
+          <div className='grid grid-cols-1 md:grid-cols-3 gap-6'>
+            {jobs.map((job) => (
+              <JobListing key={job.id} job={job} />
+            ))}
+          </div>
+        )}
       </div>
     </section>
   );

src/components/JobListings.jsx

@@ -1,40 +1,34 @@
+import { NavLink } from 'react-router-dom';
 import logo from '../assets/images/logo.png';
 
 const Navbar = () => {
+  const linkClass = ({ isActive }) =>
+    isActive
+      ? 'bg-black text-white hover:bg-gray-900 hover:text-white rounded-md px-3 py-2'
+      : 'text-white hover:bg-gray-900 hover:text-white rounded-md px-3 py-2';
+
   return (
     <nav className='bg-indigo-700 border-b border-indigo-500'>
       <div className='mx-auto max-w-7xl px-2 sm:px-6 lg:px-8'>
         <div className='flex h-20 items-center justify-between'>
           <div className='flex flex-1 items-center justify-center md:items-stretch md:justify-start'>
-            <a
-              className='flex flex-shrink-0 items-center mr-4'
-              href='/index.html'
-            >
+            <NavLink className='flex flex-shrink-0 items-center mr-4' to='/'>
               <img className='h-10 w-auto' src={logo} alt='React Jobs' />
               <span className='hidden md:block text-white text-2xl font-bold ml-2'>
                 React Jobs
               </span>
-            </a>
+            </NavLink>
             <div className='md:ml-auto'>
               <div className='flex space-x-2'>
-                <a
-                  href='/index.html'
-                  className='text-white bg-black hover:bg-gray-900 hover:text-white rounded-md px-3 py-2'
-                >
+                <NavLink to='/' className={linkClass}>
                   Home
-                </a>
-                <a
-                  href='/jobs.html'
-                  className='text-white hover:bg-gray-900 hover:text-white rounded-md px-3 py-2'
-                >
+                </NavLink>
+                <NavLink to='/jobs' className={linkClass}>
                   Jobs
-                </a>
-                <a
-                  href='/add-job.html'
-                  className='text-white hover:bg-gray-900 hover:text-white rounded-md px-3 py-2'
-                >
+                </NavLink>
+                <NavLink to='/add-job' className={linkClass}>
                   Add Job
-                </a>
+                </NavLink>
               </div>
             </div>
           </div>

src/components/Navbar.jsx

@@ -0,0 +1,18 @@
+import ClipLoader from 'react-spinners/ClipLoader';
+
+const override = {
+  display: 'block',
+  margin: '100px auto',
+};
+
+const Spinner = ({ loading }) => {
+  return (
+    <ClipLoader
+      color='#4338ca'
+      loading={loading}
+      cssOverride={override}
+      size={150}
+    />
+  );
+};
+export default Spinner;

src/components/Spinner.jsx

@@ -1,12 +1,14 @@
+import { Link } from 'react-router-dom';
+
 const ViewAllJobs = () => {
   return (
     <section className='m-auto max-w-lg my-10 px-6'>
-      <a
-        href='/jobs'
+      <Link
+        to='/jobs'
         className='block bg-black text-white text-center py-4 px-6 rounded-xl hover:bg-gray-700'
       >
         View All Jobs
-      </a>
+      </Link>
     </section>
   );
 };