2 - Setting Up React Query

Author: alexanderson1993

src/components/IssueItem.jsx

@@ -0,0 +1,48 @@
+import { Link } from "react-router-dom";
+import { GoIssueOpened, GoIssueClosed, GoComment } from "react-icons/go";
+import { relativeDate } from "../helpers/relativeDate";
+
+export function IssueItem({
+  title,
+  number,
+  assignee,
+  commentCount,
+  createdBy,
+  createdDate,
+  labels,
+  status,
+}) {
+  return (
+    <li>
+      <div>
+        {status === "done" || status === "cancelled" ? (
+          <GoIssueClosed style={{ color: "red" }} />
+        ) : (
+          <GoIssueOpened style={{ color: "green" }} />
+        )}
+      </div>
+      <div className="issue-content">
+        <span>
+          <Link to={`/issue/${number}`}>{title}</Link>
+          {labels.map((label) => (
+            <span key={label} className={`label red`}>
+              {label}
+            </span>
+          ))}
+        </span>
+        <small>
+          #{number} opened {relativeDate(createdDate)} by {createdBy}
+        </small>
+      </div>
+      {assignee ? <div>{assignee}</div> : null}
+      <span className="comment-count">
+        {commentCount > 0 ? (
+          <>
+            <GoComment />
+            {commentCount}
+          </>
+        ) : null}
+      </span>
+    </li>
+  );
+}

src/components/IssuesList.jsx

@@ -1,14 +1,32 @@
-import { Link } from "react-router-dom";
+import { useQuery } from "react-query";
+import { IssueItem } from "./IssueItem";
 
 export default function IssuesList() {
+  const issuesQuery = useQuery(["issues"], () =>
+    fetch("/api/issues").then((res) => res.json())
+  );
   return (
     <div>
-      <h1>Issues List</h1>
-      <ul>
-        <li>
-          <Link to="/issue/1">Issue 1</Link>
-        </li>
-      </ul>
+      <h2>Issues List</h2>
+      {issuesQuery.isLoading ? (
+        <p>Loading...</p>
+      ) : (
+        <ul className="issues-list">
+          {issuesQuery.data.map((issue) => (
+            <IssueItem
+              key={issue.id}
+              title={issue.title}
+              number={issue.number}
+              assignee={issue.assignee}
+              commentCount={issue.comments.length}
+              createdBy={issue.createdBy}
+              createdDate={issue.createdDate}
+              labels={issue.labels}
+              status={issue.status}
+            />
+          ))}
+        </ul>
+      )}
     </div>
   );
 }

src/main.jsx

@@ -4,6 +4,9 @@ import "./index.css";
 import App from "./App";
 import { BrowserRouter } from "react-router-dom";
 import { worker } from "@uidotdev/react-query-api";
+import { QueryClient, QueryClientProvider } from "react-query";
+
+const queryClient = new QueryClient();
 
 new Promise((res) => setTimeout(res, 100))
   .then(() =>
@@ -15,11 +18,13 @@ new Promise((res) => setTimeout(res, 100))
   .then(() => {
     ReactDOM.render(
       <React.StrictMode>
-        <BrowserRouter>
-          <div className="container">
-            <App />
-          </div>
-        </BrowserRouter>
+        <QueryClientProvider client={queryClient}>
+          <BrowserRouter>
+            <div className="container">
+              <App />
+            </div>
+          </BrowserRouter>
+        </QueryClientProvider>
       </React.StrictMode>,
       document.getElementById("root")
     );