From fd20547ba06aeaed82af6b5b5f7d4f2e04e5e7c4 Mon Sep 17 00:00:00 2001 From: progali007 Date: Wed, 22 Mar 2023 15:04:00 +0430 Subject: [PATCH 01/14] Implement react query basic setups --- src/main.jsx | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/src/main.jsx b/src/main.jsx index 320aeed..298027b 100644 --- a/src/main.jsx +++ b/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 client = new QueryClient(); new Promise((res) => setTimeout(res, 100)) .then(() => @@ -15,11 +18,13 @@ new Promise((res) => setTimeout(res, 100)) .then(() => { ReactDOM.render( - -
- -
- + + +
+ +
+ + , document.getElementById("root") ); From 0333fc12685df69d856074751b01bd64b4783ffd Mon Sep 17 00:00:00 2001 From: progali007 Date: Wed, 22 Mar 2023 15:18:54 +0430 Subject: [PATCH 02/14] Set query client --- src/main.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/main.jsx b/src/main.jsx index 298027b..9cad8fb 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -18,7 +18,7 @@ new Promise((res) => setTimeout(res, 100)) .then(() => { ReactDOM.render( - +
From 88e79b3367841ef094bea0e2f3105fadd201082f Mon Sep 17 00:00:00 2001 From: progali007 Date: Tue, 21 Mar 2023 15:22:07 +0330 Subject: [PATCH 03/14] Install all necessary packages --- package-lock.json | 80 ++++++++++++++++++++++++++++++++--------------- 1 file changed, 54 insertions(+), 26 deletions(-) diff --git a/package-lock.json b/package-lock.json index 753ec12..3d16b42 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,7 @@ "react": "^17.0.2", "react-dom": "^17.0.2", "react-icons": "^4.3.1", - "react-query": "^4.0.0-alpha.18", + "react-query": "^4.0.0-beta.3", "react-router-dom": "^6.1.1" }, "devDependencies": { @@ -394,11 +394,11 @@ } }, "node_modules/@babel/runtime": { - "version": "7.16.3", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.3.tgz", - "integrity": "sha512-WBwekcqacdY2e9AF/Q7WLFUWmdJGJTkbjqTjoMDgXkVZ3ZRUvOPsLb5KdwISoQVsbP+DQzVZW4Zhci0DvpbNTQ==", + "version": "7.21.0", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz", + "integrity": "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==", "dependencies": { - "regenerator-runtime": "^0.13.4" + "regenerator-runtime": "^0.13.11" }, "engines": { "node": ">=6.9.0" @@ -531,6 +531,11 @@ "@types/node": "*" } }, + "node_modules/@types/use-sync-external-store": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz", + "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==" + }, "node_modules/@uidotdev/react-query-api": { "version": "0.1.18", "resolved": "https://registry.npmjs.org/@uidotdev/react-query-api/-/react-query-api-0.1.18.tgz", @@ -2217,20 +2222,22 @@ } }, "node_modules/react-query": { - "version": "4.0.0-alpha.18", - "resolved": "https://registry.npmjs.org/react-query/-/react-query-4.0.0-alpha.18.tgz", - "integrity": "sha512-yeMFhn+1tBCxFnQnvK2mW9j0jXgrBKZWXsjObGGyNZDrgTPzkjcF+iW6KBXimVRLg4DH/3Knjw5hj8WmPLbDNg==", + "version": "4.0.0-beta.23", + "resolved": "https://registry.npmjs.org/react-query/-/react-query-4.0.0-beta.23.tgz", + "integrity": "sha512-e6mNBVAYGy0M1OwX0mhRB/lCkOedKeqTUrbPjNCqvm8hQGUsJJobqfHVvTv8o6JJaOO2MFcxKF4vZM+PEKbHZA==", "dependencies": { - "@babel/runtime": "^7.5.5", + "@babel/runtime": "^7.17.9", + "@types/use-sync-external-store": "^0.0.3", "broadcast-channel": "^3.4.1", - "match-sorter": "^6.0.2" + "match-sorter": "^6.0.2", + "use-sync-external-store": "^1.1.0" }, "funding": { "type": "github", "url": "https://github.com/sponsors/tannerlinsley" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0" + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" }, "peerDependenciesMeta": { "react-dom": { @@ -2299,9 +2306,9 @@ } }, "node_modules/regenerator-runtime": { - "version": "0.13.9", - "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz", - "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==" + "version": "0.13.11", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", + "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==" }, "node_modules/remove-accents": { "version": "0.4.2", @@ -2633,6 +2640,14 @@ "detect-node": "^2.0.4" } }, + "node_modules/use-sync-external-store": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", + "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", @@ -3059,11 +3074,11 @@ } }, "@babel/runtime": { - "version": "7.16.3", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.3.tgz", - "integrity": "sha512-WBwekcqacdY2e9AF/Q7WLFUWmdJGJTkbjqTjoMDgXkVZ3ZRUvOPsLb5KdwISoQVsbP+DQzVZW4Zhci0DvpbNTQ==", + "version": "7.21.0", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz", + "integrity": "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==", "requires": { - "regenerator-runtime": "^0.13.4" + "regenerator-runtime": "^0.13.11" } }, "@babel/template": { @@ -3181,6 +3196,11 @@ "@types/node": "*" } }, + "@types/use-sync-external-store": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz", + "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==" + }, "@uidotdev/react-query-api": { "version": "0.1.18", "resolved": "https://registry.npmjs.org/@uidotdev/react-query-api/-/react-query-api-0.1.18.tgz", @@ -4352,13 +4372,15 @@ "requires": {} }, "react-query": { - "version": "4.0.0-alpha.18", - "resolved": "https://registry.npmjs.org/react-query/-/react-query-4.0.0-alpha.18.tgz", - "integrity": "sha512-yeMFhn+1tBCxFnQnvK2mW9j0jXgrBKZWXsjObGGyNZDrgTPzkjcF+iW6KBXimVRLg4DH/3Knjw5hj8WmPLbDNg==", + "version": "4.0.0-beta.23", + "resolved": "https://registry.npmjs.org/react-query/-/react-query-4.0.0-beta.23.tgz", + "integrity": "sha512-e6mNBVAYGy0M1OwX0mhRB/lCkOedKeqTUrbPjNCqvm8hQGUsJJobqfHVvTv8o6JJaOO2MFcxKF4vZM+PEKbHZA==", "requires": { - "@babel/runtime": "^7.5.5", + "@babel/runtime": "^7.17.9", + "@types/use-sync-external-store": "^0.0.3", "broadcast-channel": "^3.4.1", - "match-sorter": "^6.0.2" + "match-sorter": "^6.0.2", + "use-sync-external-store": "^1.1.0" } }, "react-refresh": { @@ -4403,9 +4425,9 @@ } }, "regenerator-runtime": { - "version": "0.13.9", - "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz", - "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==" + "version": "0.13.11", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", + "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==" }, "remove-accents": { "version": "0.4.2", @@ -4652,6 +4674,12 @@ "detect-node": "^2.0.4" } }, + "use-sync-external-store": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", + "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==", + "requires": {} + }, "util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", From a154a8787704cebc111d2680ca77b7eecb84de39 Mon Sep 17 00:00:00 2001 From: progali007 Date: Wed, 22 Mar 2023 15:22:38 +0430 Subject: [PATCH 04/14] Get issues list data --- src/components/IssuesList.jsx | 22 ++++++++++++++++------ 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/src/components/IssuesList.jsx b/src/components/IssuesList.jsx index f1822db..c7dc28c 100644 --- a/src/components/IssuesList.jsx +++ b/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 (
-

Issues List

-
    -
  • - Issue 1 -
    • -
+

Issues List

+ {issuesQuery.isLoading ? ( +

Loading...

+ ) : ( +
    + {issuesQuery.data?.map((issue) => ( + + ))} +
+ )}
); } From cda10e8694ef8c0e5219a35d5d7824516ef5fc3c Mon Sep 17 00:00:00 2001 From: progali007 Date: Wed, 22 Mar 2023 15:23:40 +0430 Subject: [PATCH 05/14] Created issue item component --- src/components/IssueItem.jsx | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 src/components/IssueItem.jsx diff --git a/src/components/IssueItem.jsx b/src/components/IssueItem.jsx new file mode 100644 index 0000000..ff02816 --- /dev/null +++ b/src/components/IssueItem.jsx @@ -0,0 +1,8 @@ +import React from "react"; + +function IssueItem({ issue }) { + const { title, labels, comments, number, createdDate, createdBy, assignee } = issue; + return
IssueItem
; +} + +export default IssueItem; From 4244e26efa4cbe9445ce4d103355f11e052b21a5 Mon Sep 17 00:00:00 2001 From: progali007 Date: Wed, 22 Mar 2023 15:43:58 +0430 Subject: [PATCH 06/14] Set issue item icon --- src/components/IssueItem.jsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/IssueItem.jsx b/src/components/IssueItem.jsx index ff02816..38e29ae 100644 --- a/src/components/IssueItem.jsx +++ b/src/components/IssueItem.jsx @@ -1,8 +1,13 @@ import React from "react"; +import { GoIssueOpened, GoIssueClosed } from "react-icons/go"; function IssueItem({ issue }) { - const { title, labels, comments, number, createdDate, createdBy, assignee } = issue; - return
IssueItem
; + const { title, labels, comments, number, createdDate, createdBy, assignee, status } = issue; + return
  • +
    + {status === "done" || status === "cancelled" ? : } +
    +
    • ; } export default IssueItem; From afca37aec8588e670d4e6fd79d897d40c4b11c8c Mon Sep 17 00:00:00 2001 From: progali007 Date: Wed, 22 Mar 2023 15:46:23 +0430 Subject: [PATCH 07/14] Set issue title in a link component --- src/components/IssueItem.jsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/components/IssueItem.jsx b/src/components/IssueItem.jsx index 38e29ae..55e442d 100644 --- a/src/components/IssueItem.jsx +++ b/src/components/IssueItem.jsx @@ -1,5 +1,6 @@ import React from "react"; import { GoIssueOpened, GoIssueClosed } from "react-icons/go"; +import { Link } from "react-router-dom"; function IssueItem({ issue }) { const { title, labels, comments, number, createdDate, createdBy, assignee, status } = issue; @@ -7,6 +8,11 @@ function IssueItem({ issue }) {
    {status === "done" || status === "cancelled" ? : }
    +
    + + {title} + +
    ; } From 746500dc8edd512e78635a639ecafd58d9ffef2a Mon Sep 17 00:00:00 2001 From: progali007 Date: Wed, 22 Mar 2023 15:59:45 +0430 Subject: [PATCH 08/14] Add lable section and show created date of each issue --- src/components/IssueItem.jsx | 46 +++++++++++++++++++++++++++--------- 1 file changed, 35 insertions(+), 11 deletions(-) diff --git a/src/components/IssueItem.jsx b/src/components/IssueItem.jsx index 55e442d..a216d57 100644 --- a/src/components/IssueItem.jsx +++ b/src/components/IssueItem.jsx @@ -1,19 +1,43 @@ import React from "react"; import { GoIssueOpened, GoIssueClosed } from "react-icons/go"; import { Link } from "react-router-dom"; +import { relativeDate } from "../helpers/relativeDate"; function IssueItem({ issue }) { - const { title, labels, comments, number, createdDate, createdBy, assignee, status } = issue; - return
  • -
    - {status === "done" || status === "cancelled" ? : } -
    -
    - - {title} - -
    -
    • ; + const { + title, + labels, + comments, + number, + createdDate, + createdBy, + assignee, + status, + } = issue; + return ( +
  • +
    + {status === "done" || status === "cancelled" ? ( + + ) : ( + + )} +
    +
    + + {title} + {labels?.map((label) => ( + + {label} + + ))} + + + # {number} opened {relativeDate(createdDate)} + +
    +
    • + ); } export default IssueItem; From 3ff3d1da806409286c498901611907919770eda0 Mon Sep 17 00:00:00 2001 From: progali007 Date: Wed, 22 Mar 2023 16:00:07 +0430 Subject: [PATCH 09/14] Add css class for styling --- src/components/IssuesList.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/IssuesList.jsx b/src/components/IssuesList.jsx index c7dc28c..4f906b9 100644 --- a/src/components/IssuesList.jsx +++ b/src/components/IssuesList.jsx @@ -13,7 +13,7 @@ export default function IssuesList() { {issuesQuery.isLoading ? (

    Loading...

    ) : ( -
      +
        {issuesQuery.data?.map((issue) => ( ))} From a1b4ec71222f5844fefd0e8f3d31ed0be8be1d16 Mon Sep 17 00:00:00 2001 From: progali007 Date: Wed, 22 Mar 2023 16:12:28 +0430 Subject: [PATCH 10/14] Show count of issue comments --- src/components/IssueItem.jsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/components/IssueItem.jsx b/src/components/IssueItem.jsx index a216d57..4a4bbc9 100644 --- a/src/components/IssueItem.jsx +++ b/src/components/IssueItem.jsx @@ -1,5 +1,6 @@ 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"; @@ -36,6 +37,15 @@ function IssueItem({ issue }) { # {number} opened {relativeDate(createdDate)}
    + {assignee ?
    {assignee}
    : null} + + {comments.length > 0 ? ( + + + {comments.length} + + ) : null} + ); } From c20ffdcadae3169b206d4dda2a060e1987973643 Mon Sep 17 00:00:00 2001 From: progali007 Date: Sat, 25 Mar 2023 00:15:14 +0430 Subject: [PATCH 11/14] Show username --- src/components/IssueItem.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/IssueItem.jsx b/src/components/IssueItem.jsx index 4a4bbc9..81c0f45 100644 --- a/src/components/IssueItem.jsx +++ b/src/components/IssueItem.jsx @@ -34,7 +34,7 @@ function IssueItem({ issue }) { ))} - # {number} opened {relativeDate(createdDate)} + # {number} opened {relativeDate(createdDate)} by {createdBy} {assignee ?
    {assignee}
    : null} From 7eeec20c6a15a3a5afd6965917e48d85f56c53ed Mon Sep 17 00:00:00 2001 From: progali007 Date: Sat, 25 Mar 2023 13:10:29 +0430 Subject: [PATCH 12/14] Create custom hook to fetch user details data --- src/helpers/useUserData.js | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 src/helpers/useUserData.js diff --git a/src/helpers/useUserData.js b/src/helpers/useUserData.js new file mode 100644 index 0000000..cee8ec6 --- /dev/null +++ b/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()) + ) +} \ No newline at end of file From 6dfc023feed789302b7db09f2a3e30f82def01ba Mon Sep 17 00:00:00 2001 From: progali007 Date: Sat, 25 Mar 2023 13:11:13 +0430 Subject: [PATCH 13/14] Get user details such as profile image & username --- src/components/IssueItem.jsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/IssueItem.jsx b/src/components/IssueItem.jsx index 81c0f45..1d3c8da 100644 --- a/src/components/IssueItem.jsx +++ b/src/components/IssueItem.jsx @@ -3,6 +3,7 @@ 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 { @@ -15,6 +16,10 @@ function IssueItem({ issue }) { assignee, status, } = issue; + + const userImageData = useUserData(assignee); + const userNameData = useUserData(createdBy); + return (
  • @@ -34,10 +39,10 @@ function IssueItem({ issue }) { ))} - # {number} opened {relativeDate(createdDate)} by {createdBy} + # {number} opened {relativeDate(createdDate)} {userNameData.isSuccess ? `by ${userNameData.data.name}` : null}
    - {assignee ?
    {assignee}
    : null} + {assignee ? profile : null} {comments.length > 0 ? ( From ab735ef8b22b0d5362af5ec459146f4c7700e07c Mon Sep 17 00:00:00 2001 From: Non-Chain <51164107+nonchain@users.noreply.github.com> Date: Mon, 27 Mar 2023 11:12:15 +0330 Subject: [PATCH 14/14] Revert "2 issues list" --- package-lock.json | 80 ++++++++++++----------------------- src/components/IssueItem.jsx | 58 ------------------------- src/components/IssuesList.jsx | 22 +++------- src/helpers/useUserData.js | 8 ---- src/main.jsx | 2 +- 5 files changed, 33 insertions(+), 137 deletions(-) delete mode 100644 src/components/IssueItem.jsx delete mode 100644 src/helpers/useUserData.js diff --git a/package-lock.json b/package-lock.json index 3d16b42..753ec12 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,7 @@ "react": "^17.0.2", "react-dom": "^17.0.2", "react-icons": "^4.3.1", - "react-query": "^4.0.0-beta.3", + "react-query": "^4.0.0-alpha.18", "react-router-dom": "^6.1.1" }, "devDependencies": { @@ -394,11 +394,11 @@ } }, "node_modules/@babel/runtime": { - "version": "7.21.0", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz", - "integrity": "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==", + "version": "7.16.3", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.3.tgz", + "integrity": "sha512-WBwekcqacdY2e9AF/Q7WLFUWmdJGJTkbjqTjoMDgXkVZ3ZRUvOPsLb5KdwISoQVsbP+DQzVZW4Zhci0DvpbNTQ==", "dependencies": { - "regenerator-runtime": "^0.13.11" + "regenerator-runtime": "^0.13.4" }, "engines": { "node": ">=6.9.0" @@ -531,11 +531,6 @@ "@types/node": "*" } }, - "node_modules/@types/use-sync-external-store": { - "version": "0.0.3", - "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz", - "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==" - }, "node_modules/@uidotdev/react-query-api": { "version": "0.1.18", "resolved": "https://registry.npmjs.org/@uidotdev/react-query-api/-/react-query-api-0.1.18.tgz", @@ -2222,22 +2217,20 @@ } }, "node_modules/react-query": { - "version": "4.0.0-beta.23", - "resolved": "https://registry.npmjs.org/react-query/-/react-query-4.0.0-beta.23.tgz", - "integrity": "sha512-e6mNBVAYGy0M1OwX0mhRB/lCkOedKeqTUrbPjNCqvm8hQGUsJJobqfHVvTv8o6JJaOO2MFcxKF4vZM+PEKbHZA==", + "version": "4.0.0-alpha.18", + "resolved": "https://registry.npmjs.org/react-query/-/react-query-4.0.0-alpha.18.tgz", + "integrity": "sha512-yeMFhn+1tBCxFnQnvK2mW9j0jXgrBKZWXsjObGGyNZDrgTPzkjcF+iW6KBXimVRLg4DH/3Knjw5hj8WmPLbDNg==", "dependencies": { - "@babel/runtime": "^7.17.9", - "@types/use-sync-external-store": "^0.0.3", + "@babel/runtime": "^7.5.5", "broadcast-channel": "^3.4.1", - "match-sorter": "^6.0.2", - "use-sync-external-store": "^1.1.0" + "match-sorter": "^6.0.2" }, "funding": { "type": "github", "url": "https://github.com/sponsors/tannerlinsley" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + "react": "^16.8.0 || ^17.0.0" }, "peerDependenciesMeta": { "react-dom": { @@ -2306,9 +2299,9 @@ } }, "node_modules/regenerator-runtime": { - "version": "0.13.11", - "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", - "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==" + "version": "0.13.9", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz", + "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==" }, "node_modules/remove-accents": { "version": "0.4.2", @@ -2640,14 +2633,6 @@ "detect-node": "^2.0.4" } }, - "node_modules/use-sync-external-store": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", - "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==", - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0" - } - }, "node_modules/util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", @@ -3074,11 +3059,11 @@ } }, "@babel/runtime": { - "version": "7.21.0", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz", - "integrity": "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==", + "version": "7.16.3", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.3.tgz", + "integrity": "sha512-WBwekcqacdY2e9AF/Q7WLFUWmdJGJTkbjqTjoMDgXkVZ3ZRUvOPsLb5KdwISoQVsbP+DQzVZW4Zhci0DvpbNTQ==", "requires": { - "regenerator-runtime": "^0.13.11" + "regenerator-runtime": "^0.13.4" } }, "@babel/template": { @@ -3196,11 +3181,6 @@ "@types/node": "*" } }, - "@types/use-sync-external-store": { - "version": "0.0.3", - "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz", - "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==" - }, "@uidotdev/react-query-api": { "version": "0.1.18", "resolved": "https://registry.npmjs.org/@uidotdev/react-query-api/-/react-query-api-0.1.18.tgz", @@ -4372,15 +4352,13 @@ "requires": {} }, "react-query": { - "version": "4.0.0-beta.23", - "resolved": "https://registry.npmjs.org/react-query/-/react-query-4.0.0-beta.23.tgz", - "integrity": "sha512-e6mNBVAYGy0M1OwX0mhRB/lCkOedKeqTUrbPjNCqvm8hQGUsJJobqfHVvTv8o6JJaOO2MFcxKF4vZM+PEKbHZA==", + "version": "4.0.0-alpha.18", + "resolved": "https://registry.npmjs.org/react-query/-/react-query-4.0.0-alpha.18.tgz", + "integrity": "sha512-yeMFhn+1tBCxFnQnvK2mW9j0jXgrBKZWXsjObGGyNZDrgTPzkjcF+iW6KBXimVRLg4DH/3Knjw5hj8WmPLbDNg==", "requires": { - "@babel/runtime": "^7.17.9", - "@types/use-sync-external-store": "^0.0.3", + "@babel/runtime": "^7.5.5", "broadcast-channel": "^3.4.1", - "match-sorter": "^6.0.2", - "use-sync-external-store": "^1.1.0" + "match-sorter": "^6.0.2" } }, "react-refresh": { @@ -4425,9 +4403,9 @@ } }, "regenerator-runtime": { - "version": "0.13.11", - "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", - "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==" + "version": "0.13.9", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz", + "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==" }, "remove-accents": { "version": "0.4.2", @@ -4674,12 +4652,6 @@ "detect-node": "^2.0.4" } }, - "use-sync-external-store": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", - "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==", - "requires": {} - }, "util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", diff --git a/src/components/IssueItem.jsx b/src/components/IssueItem.jsx deleted file mode 100644 index 1d3c8da..0000000 --- a/src/components/IssueItem.jsx +++ /dev/null @@ -1,58 +0,0 @@ -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 ( -
  • -
    - {status === "done" || status === "cancelled" ? ( - - ) : ( - - )} -
    -
    - - {title} - {labels?.map((label) => ( - - {label} - - ))} - - - # {number} opened {relativeDate(createdDate)} {userNameData.isSuccess ? `by ${userNameData.data.name}` : null} - -
    - {assignee ? profile : null} - - {comments.length > 0 ? ( - - - {comments.length} - - ) : null} - -
    • - ); -} - -export default IssueItem; diff --git a/src/components/IssuesList.jsx b/src/components/IssuesList.jsx index 4f906b9..f1822db 100644 --- a/src/components/IssuesList.jsx +++ b/src/components/IssuesList.jsx @@ -1,24 +1,14 @@ -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 (
    -

    Issues List

    - {issuesQuery.isLoading ? ( -

    Loading...

    - ) : ( -
      - {issuesQuery.data?.map((issue) => ( - - ))} -
    - )} +

    Issues List

    +
      +
    • + Issue 1 +
      • +
    ); } diff --git a/src/helpers/useUserData.js b/src/helpers/useUserData.js deleted file mode 100644 index cee8ec6..0000000 --- a/src/helpers/useUserData.js +++ /dev/null @@ -1,8 +0,0 @@ -import { useQuery } from "react-query"; - -export function useUserData(userId) { - return useQuery( - ["user", userId], - ()=> fetch(`api/users/${userId}`).then(res => res.json()) - ) -} \ No newline at end of file diff --git a/src/main.jsx b/src/main.jsx index 9cad8fb..298027b 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -18,7 +18,7 @@ new Promise((res) => setTimeout(res, 100)) .then(() => { ReactDOM.render( - +