Update to release on NPM.

Author: alexanderson1993

.gitignore

@@ -1,3 +1,4 @@
 *.log
 .DS_Store
 node_modules
+dist

README.md

@@ -1,103 +1,3 @@
-# TSDX User Guide
+# React Query API
 
-Congrats! You just saved yourself hours of work by bootstrapping this project with TSDX. Let’s get you oriented with what’s here and how to use it.
-
-> This TSDX setup is meant for developing libraries (not apps!) that can be published to NPM. If you’re looking to build a Node app, you could use `ts-node-dev`, plain `ts-node`, or simple `tsc`.
-
-> If you’re new to TypeScript, checkout [this handy cheatsheet](https://devhints.io/typescript)
-
-## Commands
-
-TSDX scaffolds your new library inside `/src`.
-
-To run TSDX, use:
-
-```bash
-npm start # or yarn start
-```
-
-This builds to `/dist` and runs the project in watch mode so any edits you save inside `src` causes a rebuild to `/dist`.
-
-To do a one-off build, use `npm run build` or `yarn build`.
-
-To run tests, use `npm test` or `yarn test`.
-
-## Configuration
-
-Code quality is set up for you with `prettier`, `husky`, and `lint-staged`. Adjust the respective fields in `package.json` accordingly.
-
-### Jest
-
-Jest tests are set up to run with `npm test` or `yarn test`.
-
-### Bundle Analysis
-
-[`size-limit`](https://github.com/ai/size-limit) is set up to calculate the real cost of your library with `npm run size` and visualize the bundle with `npm run analyze`.
-
-#### Setup Files
-
-This is the folder structure we set up for you:
-
-```txt
-/src
-  index.tsx       # EDIT THIS
-/test
-  blah.test.tsx   # EDIT THIS
-.gitignore
-package.json
-README.md         # EDIT THIS
-tsconfig.json
-```
-
-### Rollup
-
-TSDX uses [Rollup](https://rollupjs.org) as a bundler and generates multiple rollup configs for various module formats and build settings. See [Optimizations](#optimizations) for details.
-
-### TypeScript
-
-`tsconfig.json` is set up to interpret `dom` and `esnext` types, as well as `react` for `jsx`. Adjust according to your needs.
-
-## Continuous Integration
-
-### GitHub Actions
-
-Two actions are added by default:
-
-- `main` which installs deps w/ cache, lints, tests, and builds on all pushes against a Node and OS matrix
-- `size` which comments cost comparison of your library on every pull request using [`size-limit`](https://github.com/ai/size-limit)
-
-## Optimizations
-
-Please see the main `tsdx` [optimizations docs](https://github.com/palmerhq/tsdx#optimizations). In particular, know that you can take advantage of development-only optimizations:
-
-```js
-// ./types/index.d.ts
-declare var __DEV__: boolean;
-
-// inside your code...
-if (__DEV__) {
-  console.log('foo');
-}
-```
-
-You can also choose to install and use [invariant](https://github.com/palmerhq/tsdx#invariant) and [warning](https://github.com/palmerhq/tsdx#warning) functions.
-
-## Module Formats
-
-CJS, ESModules, and UMD module formats are supported.
-
-The appropriate paths are configured in `package.json` and `dist/index.js` accordingly. Please report if any issues are found.
-
-## Named Exports
-
-Per Palmer Group guidelines, [always use named exports.](https://github.com/palmerhq/typescript#exports) Code split inside your React app instead of your React library.
-
-## Including Styles
-
-There are many ways to ship styles, including with CSS-in-JS. TSDX has no opinion on this, configure how you like.
-
-For vanilla CSS, you can include it at the root directory and add it to the `files` section in your `package.json`, so that it can be imported separately by your users and run through their bundler's loader.
-
-## Publishing to NPM
-
-We recommend using [np](https://github.com/sindresorhus/np).
+This is the React Query API which is used for the React Query course on ui.dev. Built with [MSW](https://mswjs.io).

package.json

@@ -11,6 +11,7 @@
     "node": ">=10"
   },
   "scripts": {
+    "dev": "nodemon --exec node -r ts-eager/register server.ts",
     "start": "tsdx watch",
     "build": "tsdx build",
     "lint": "tsdx lint",
@@ -30,7 +31,7 @@
     "singleQuote": true,
     "trailingComma": "es5"
   },
-  "name": "react-query-api",
+  "name": "@uidotdev/react-query-api",
   "author": "Alex Anderson",
   "module": "dist/react-query-api.esm.js",
   "size-limit": [
@@ -46,12 +47,15 @@
   "devDependencies": {
     "@size-limit/preset-small-lib": "^5.0.5",
     "husky": "^7.0.2",
+    "nodemon": "^2.0.13",
     "size-limit": "^5.0.5",
     "tsdx": "^0.14.1",
     "tslib": "^2.3.1",
     "typescript": "^4.4.3"
   },
   "dependencies": {
-    "msw": "^0.35.0"
+    "msw": "^0.35.0",
+    "node-fetch": "^3.0.0",
+    "ts-eager": "^2.0.2"
   }
 }

server.ts

@@ -0,0 +1,54 @@
+import { setupServer } from 'msw/node';
+import { handlers } from './src/handlers';
+import http from 'http';
+
+const port = Number(process.env.PORT) || 3000;
+
+(async function runServer() {
+  const { default: fetch, Headers, Response } = await import('node-fetch');
+  const mockServer = setupServer(...handlers);
+
+  mockServer.listen();
+
+  const server = http.createServer(async (req, res) => {
+    const body: string = await new Promise(res => {
+      let data = '';
+      req.on('data', chunk => {
+        data += chunk;
+      });
+
+      req.on('end', () => {
+        res(data);
+      });
+    });
+    const headers = new Headers();
+    for (let header in req.headers) {
+      headers.append(header, req.headers[header].toString());
+    }
+    try {
+      const response = await Promise.race([
+        fetch(`http://localhost:3000${req.url}`, {
+          method: req.method,
+          body: req.method !== 'GET' ? body : undefined,
+          headers,
+        }),
+        new Promise((_, reject) => setTimeout(reject, 1500)),
+      ]);
+      if (!(response instanceof Response)) {
+        throw new Error('Response is not instance of Response');
+      }
+      const result = await response.text();
+      response.headers.forEach((v, k) => res.setHeader(k, v));
+      res.statusCode = response.status;
+      res.end(result);
+    } catch (err) {
+      console.log(err);
+      res.statusCode = 500;
+      res.end('Error making request');
+    }
+  });
+
+  server.listen(port, () => {
+    console.log(`Server running at port ${port}`);
+  });
+})();

src/db.ts

@@ -1,55 +1,55 @@
-import { Issue, Label, User } from "./types";
+import { Issue, Label, User, IssueComment } from './types';
 
 export let users: User[] = [
   {
-    id: "u_1",
-    name: "Tyler",
+    id: 'u_1',
+    name: 'Tyler',
     profilePictureUrl:
-      "https://pbs.twimg.com/profile_images/1428205319616798721/xmr7q976_400x400.jpg",
+      'https://pbs.twimg.com/profile_images/1428205319616798721/xmr7q976_400x400.jpg',
   },
   {
-    id: "u_2",
-    name: "Bono",
+    id: 'u_2',
+    name: 'Bono',
     profilePictureUrl:
-      "https://pbs.twimg.com/profile_images/1384860221110095873/f8s_E6a6_400x400.jpg",
+      'https://pbs.twimg.com/profile_images/1384860221110095873/f8s_E6a6_400x400.jpg',
   },
   {
-    id: "u_3",
-    name: "Tanner",
+    id: 'u_3',
+    name: 'Tanner',
     profilePictureUrl:
-      "https://pbs.twimg.com/profile_images/1164219021283094530/ACRln2kL_400x400.jpg",
+      'https://pbs.twimg.com/profile_images/1164219021283094530/ACRln2kL_400x400.jpg',
   },
   {
-    id: "u_4",
-    name: "Alex",
+    id: 'u_4',
+    name: 'Alex',
     profilePictureUrl:
-      "https://pbs.twimg.com/profile_images/1403026826075779075/cHtraFgQ_400x400.jpg",
+      'https://pbs.twimg.com/profile_images/1403026826075779075/cHtraFgQ_400x400.jpg',
   },
 ];
 
 export let labels: Label[] = [
-  { id: "l_1", color: "red", name: "bug" },
-  { id: "l_2", color: "blue", name: "feature" },
-  { id: "l_3", color: "cyan", name: "enhancement" },
-  { id: "l_4", color: "orange", name: "question" },
-  { id: "l_5", color: "lime", name: "help wanted" },
-  { id: "l_6", color: "white", name: "wontfix" },
-  { id: "l_7", color: "rebeccapurple", name: "duplicate" },
-  { id: "l_8", color: "yellow", name: "help-wanted" },
+  { id: 'l_1', color: 'red', name: 'bug' },
+  { id: 'l_2', color: 'blue', name: 'feature' },
+  { id: 'l_3', color: 'cyan', name: 'enhancement' },
+  { id: 'l_4', color: 'orange', name: 'question' },
+  { id: 'l_5', color: 'lime', name: 'help wanted' },
+  { id: 'l_6', color: 'white', name: 'wontfix' },
+  { id: 'l_7', color: 'rebeccapurple', name: 'duplicate' },
+  { id: 'l_8', color: 'yellow', name: 'help-wanted' },
 ];
 
 const templateIssues = [
-  "Dependencies need to be updated",
-  "Poor performance on Windows devices",
-  "Poor performance on macOS devices",
-  "Poor performance on Android devices",
-  "Holding down the space bar causes the processor to heat up",
+  'Dependencies need to be updated',
+  'Poor performance on Windows devices',
+  'Poor performance on macOS devices',
+  'Poor performance on Android devices',
+  'Holding down the space bar causes the processor to heat up',
   `Error: "Cannot read property 'length' of undefined"`,
-  "The app is crashing on iOS devices",
-  "How am I supposed to create new tasks?",
-  "Styling on the profile page looks weird.",
-  "Feature: Build out multiplayer connectivity",
-  "Feature: Build out a leaderboard",
+  'The app is crashing on iOS devices',
+  'How am I supposed to create new tasks?',
+  'Styling on the profile page looks weird.',
+  'Feature: Build out multiplayer connectivity',
+  'Feature: Build out a leaderboard',
 ];
 
 const templateIssueComments = [
@@ -58,51 +58,59 @@ const templateIssueComments = [
   "I'm working on it.",
   "I'm not sure how to fix it.",
   "I'm not sure if I can reproduce the problem.",
-  "This is a really big deal for me.",
-  "Has there been any progress on this?",
-  "What is the status of this issue?",
-  "Never mind, I figured out how to fix this",
-  "Can you send me a little bit more information about the problem.",
+  'This is a really big deal for me.',
+  'Has there been any progress on this?',
+  'What is the status of this issue?',
+  'Never mind, I figured out how to fix this',
+  'Can you send me a little bit more information about the problem.',
   "I've reproduced this issue. Working on a fix now.",
   "I'm on it. I'll get back to you when I'm done.",
-  "It would seem this is caused by user error.",
-  "Whoops, I just dropped the production database. Hang on...",
+  'It would seem this is caused by user error.',
+  'Whoops, I just dropped the production database. Hang on...',
 ];
 
-const allStatus: ("backlog" | "todo" | "inProgress" | "done" | "cancelled")[] =
-  ["backlog", "todo", "inProgress", "done", "cancelled"];
+const allStatus: (
+  | 'backlog'
+  | 'todo'
+  | 'inProgress'
+  | 'done'
+  | 'cancelled'
+)[] = ['backlog', 'todo', 'inProgress', 'done', 'cancelled'];
+
+export let issueComments: IssueComment[] = [];
 
 export const issues: Issue[] = Array.from({ length: 100 }, (_, i) => {
   const isCompleted = Math.random() > 0.9;
+  const comments: IssueComment[] = Array.from(
+    { length: Math.floor(Math.random() * 10) + 1 },
+    (_, j) => ({
+      id: `c_${issueComments.length + j}`,
+      createdDate: new Date(Date.now() - Math.floor(Math.random() * 100000)),
+      createdBy: users[Math.floor(Math.random() * users.length)].id,
+      issueId: `i_${i}`,
+      comment:
+        templateIssueComments[
+          Math.floor(Math.random() * templateIssueComments.length)
+        ],
+    })
+  );
+  issueComments = issueComments.concat(comments);
   return {
     id: `i_${i}`,
     title: templateIssues[Math.floor(Math.random() * templateIssues.length)],
-    labels: [labels[Math.floor(Math.random() * labels.length)]],
-    comments: Array.from(
-      { length: Math.floor(Math.random() * 10) + 1 },
-      (_, j) => ({
-        id: `c_${i}_${j}`,
-        createdDate: new Date(Date.now() - Math.floor(Math.random() * 100000)),
-        createdBy: users[Math.floor(Math.random() * users.length)],
-        issueId: `i_${i}`,
-        user: users[Math.floor(Math.random() * users.length)],
-        comment:
-          templateIssueComments[
-            Math.floor(Math.random() * templateIssueComments.length)
-          ],
-      })
-    ),
+    labels: [labels[Math.floor(Math.random() * labels.length)].id],
+    comments: comments.map(c => c.id),
     number: i + 1,
     status: isCompleted
-      ? "done"
-      : allStatus.filter((f) => f !== "done")[
+      ? 'done'
+      : allStatus.filter(f => f !== 'done')[
           Math.floor(Math.random() * allStatus.length)
         ],
     createdDate: new Date(Date.now() - Math.floor(Math.random() * 10000000000)),
-    createdBy: users[Math.floor(Math.random() * users.length)],
+    createdBy: users[Math.floor(Math.random() * users.length)].id,
     assignee:
       Math.random() > 0.5
-        ? users[Math.floor(Math.random() * users.length)]
+        ? users[Math.floor(Math.random() * users.length)].id
         : null,
     dueDate:
       Math.random() > 0.5