Task I: fetch data from url

package.json

@@ -11,6 +11,7 @@
     "coverage": "vitest run --coverage"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.59.0",
     "bootstrap": "^5.3.3",
     "bootstrap-icons": "^1.11.3",
     "react": "^18.3.0",

src/App.jsx

@@ -1,45 +1,31 @@
-// import { useState } from 'react';
-// import logo from './logo.svg';
-// import './App.css';
 import Banner from './components/Banner';
 import CourseList from './components/CourseList';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { useJsonQuery } from './utilities/fetch';
+
+const Main = () => {
+  const [data, isLoading, error] = useJsonQuery('https://courses.cs.northwestern.edu/394/guides/data/cs-courses.php');
+
+  if (error) {return <h1>Error loading courses data: {`${error}`}</h1>};
+  if (isLoading) {return <h1>Loading courses data...</h1>};
+  if (!data) {return <h1>No course data found</h1>};
 
-const schedule = {
-  "title": "CS Courses for 2018-2019",
-  "courses": {
-    "F101" : {
-      "term": "Fall",
-      "number": "101",
-      "meets" : "MWF 11:00-11:50",
-      "title" : "Computer Science: Concepts, Philosophy, and Connections"
-    },
-    "F110" : {
-      "term": "Fall",
-      "number": "110",
-      "meets" : "MWF 10:00-10:50",
-      "title" : "Intro Programming for non-majors"
-    },
-    "S313" : {
-      "term": "Spring",
-      "number": "313",
-      "meets" : "TuTh 15:30-16:50",
-      "title" : "Tangible Interaction Design and Learning"
-    },
-    "S314" : {
-      "term": "Spring",
-      "number": "314",
-      "meets" : "TuTh 9:30-10:50",
-      "title" : "Tech & Human Interaction"
-    }
-  }
-};
-const App = () => {
   return (
     <div>
-      <Banner title={schedule.title}></Banner>
-      <CourseList courses={schedule.courses}></CourseList>
+      <Banner title={data.title}></Banner>
+      <CourseList courses={data.courses}></CourseList>
     </div>
   );
-};
+}
+
+const queryClient = new QueryClient();
+
+const App = () => (
+  <QueryClientProvider client={queryClient}>
+    <div className="container">
+      <Main />
+    </div>
+  </QueryClientProvider>
+);
 
-export default App;
+export default App;

src/utilities/fetch.js

@@ -0,0 +1,16 @@
+import { useQuery } from '@tanstack/react-query';
+
+const fetchJson = async (url) => {
+  const response = await fetch(url);
+  if (!response.ok) throw response;
+  return response.json();
+};
+
+export const useJsonQuery = (url) => {
+  const { data, isLoading, error } = useQuery({
+    queryKey: [url],
+    queryFn: () => fetchJson(url)
+  });
+
+  return [ data, isLoading, error ];
+};