Load issue by number

src/issues/actions/get-issue.action.ts

@@ -0,0 +1,11 @@
+import { sleep } from "../../helpers";
+import { githubApi } from "../../api";
+import { GitHubIssue } from "../interfaces";
+
+export const getIssue = async (issueNumber: number): Promise<GitHubIssue> => {
+  await sleep(1500);
+
+  const { data } = await githubApi.get<GitHubIssue>(`/issues/${issueNumber}`);
+
+  return data;
+};

src/issues/actions/index.ts

@@ -1,2 +1,3 @@
+export * from "./get-issue.action";
 export * from "./get-issues.action";
 export * from "./get-labels.action";

src/issues/hooks/index.ts

@@ -1,2 +1,3 @@
+export * from "./useIssue";
 export * from "./useIssues";
 export * from "./useLabels";

src/issues/hooks/useIssue.tsx

@@ -0,0 +1,12 @@
+import { useQuery } from "@tanstack/react-query";
+import { getIssue } from "../actions";
+
+export const useIssue = (issueNumber: number) => {
+  const issueQuery = useQuery({
+    queryKey: ["issues", issueNumber],
+    queryFn: () => getIssue(issueNumber),
+    staleTime: 60000,
+  });
+
+  return { issueQuery };
+};

src/issues/views/IssueView.tsx

@@ -1,6 +1,7 @@
-import { useNavigate } from 'react-router-dom';
-import { IssueComment } from '../components/IssueComment';
-import { FiSkipBack } from 'react-icons/fi';
+import { Navigate, useNavigate, useParams } from "react-router-dom";
+import { IssueComment } from "../components/IssueComment";
+import { FiSkipBack } from "react-icons/fi";
+import { useIssue } from "../hooks";
 
 const comment1 =
   "It would provide the ability to create a state, read the state \r\nand set the state form anywhere in the code base.\r\n\r\nIt would be something like this:\r\n\r\n## adding the state to the global state\r\n\r\n```js\r\nimport {useGlobalState} from 'react';\r\nconst ProviderComponent = ()=>{\r\n\r\n  const [ceateState, _, _] = useGlobalState();\r\n\r\n  createState('provider', 'stateName', 'state value');\r\n  createState('provider', 'otherStateName', 'another state value');\r\n  // or maybe, set all the states in one line\r\n  createState('provider', {stateName: 'state value', anotherStateName: 'another state value'});\r\n\r\n  return <></>\r\n}\r\n```\r\n\r\n##  now I can use it like so:\r\n\r\n```js\r\nimport {useGlobalState} from 'react';\r\n\r\nconst ConsumerComponent = ()=>{\r\n  \r\n  const [_, getState, setState] = useGlobalState();\r\n\r\n  const providerStateCpy = getState('key', 'stateName');\r\n\r\n  const changeProviderState = ()=>{\r\n    setState('key', 'stateName', 'new state value');\r\n  }\r\n  return <p onClick={changeProviderState}>{providerStateCpy}</p>\r\n}\r\n```\r\nI wonder if it's a possible thing without making major changes though.";
@@ -11,6 +12,18 @@ const comment3 =
 
 export const IssueView = () => {
   const navigate = useNavigate();
+  const params = useParams();
+
+  const issueNumber = Number(params.issueNumber ?? 0);
+  const { issueQuery } = useIssue(issueNumber);
+
+  if (issueQuery.isLoading) {
+    return <div>Cargando issue</div>;
+  }
+
+  if (!issueQuery.data) {
+    return <Navigate to="/404" />;
+  }
 
   return (
     <div className="mb-5">
@@ -28,8 +41,8 @@ export const IssueView = () => {
       <IssueComment body={comment1} />
 
       {/* Comentario de otros */}
-      <IssueComment body={comment2} />
-      <IssueComment body={comment3} />
+      {/* <IssueComment body={comment2} />
+      <IssueComment body={comment3} /> */}
     </div>
   );
 };

src/main.tsx

@@ -9,7 +9,13 @@ import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
 import "./index.css";
 
-const queryClient = new QueryClient();
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+    },
+  },
+});
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>

src/router/index.tsx

@@ -1,24 +1,24 @@
-import { createBrowserRouter, Navigate } from 'react-router-dom';
-import { GitApp } from '../GitApp';
+import { createBrowserRouter, Navigate } from "react-router-dom";
+import { GitApp } from "../GitApp";
 
-import { ListView, IssueView } from '../issues/views';
+import { ListView, IssueView } from "../issues/views";
 
 export const router = createBrowserRouter([
   {
-    path: '/issues',
+    path: "/issues",
     element: <GitApp />,
     children: [
-      { path: 'list', element: <ListView /> },
-      { path: 'issue/:id', element: <IssueView /> },
-      { path: '*', element: <Navigate to="list" /> },
+      { path: "list", element: <ListView /> },
+      { path: "issue/:issueNumber", element: <IssueView /> },
+      { path: "*", element: <Navigate to="list" /> },
     ],
   },
   {
-    path: '/',
+    path: "/",
     element: <Navigate to="issues/list" />,
   },
   {
-    path: '*',
+    path: "*",
     element: <h1>Not found</h1>,
   },
 ]);