2 issues list

src/components/IssueItem.jsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { GoIssueOpened, GoIssueClosed } from "react-icons/go";
+import { FaRegComment } from "react-icons/fa";
+import { Link } from "react-router-dom";
+import { relativeDate } from "../helpers/relativeDate";
+import { useUserData } from "../helpers/useUserData";
+
+function IssueItem({ issue }) {
+  const {
+    title,
+    labels,
+    comments,
+    number,
+    createdDate,
+    createdBy,
+    assignee,
+    status,
+  } = issue;
+
+  const userImageData = useUserData(assignee);
+  const userNameData = useUserData(createdBy);
+
+  return (
+    <li>
+      <div>
+        {status === "done" || status === "cancelled" ? (
+          <GoIssueOpened style={{ color: "red" }} />
+        ) : (
+          <GoIssueClosed 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)} {userNameData.isSuccess ? `by ${userNameData.data.name}` : null}
+        </small>
+      </div>
+      {assignee ? <img src={userImageData.isSuccess ? userImageData.data.profilePictureUrl : ""} className="assigned-to" alt="profile"/> : null}
+      <span className="comment-count">
+        {comments.length > 0 ? (
+          <React.Fragment>
+            <FaRegComment />
+            {comments.length}
+          </React.Fragment>
+        ) : null}
+      </span>
+    </li>
+  );
+}
+
+export default IssueItem;

src/components/IssuesList.jsx

@@ -1,14 +1,24 @@
+import { useQuery } from "react-query";
 import { Link } from "react-router-dom";
+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} issue={issue}/>
+          ))}
+        </ul>
+      )}
     </div>
   );
 }

src/helpers/useUserData.js

@@ -0,0 +1,8 @@
+import { useQuery } from "react-query";
+
+export function useUserData(userId) {
+  return useQuery(
+    ["user", userId],
+    ()=> fetch(`api/users/${userId}`).then(res => res.json())
+  )
+}

src/main.jsx

@@ -18,7 +18,7 @@ new Promise((res) => setTimeout(res, 100))
   .then(() => {
     ReactDOM.render(
       <React.StrictMode>
-        <QueryClientProvider>
+        <QueryClientProvider client={client}>
           <BrowserRouter>
             <div className="container">
               <App />