internal: Some improvements to github example (#2167)

docs/core/guides/unit-testing-components.md

@@ -15,9 +15,7 @@ trying to test. Using [<MockResolver /\>](../api/MockResolver) in our tests allo
 us to prime the cache with provided fixtures so the components will immediately render
 with said results.
 
-<details open><summary><b>__tests__/fixtures.ts</b></summary>
-
-```typescript
+```typescript title="__tests__/fixtures.ts"
 export default {
   full: [
     {
@@ -68,11 +66,7 @@ export default {
 };
 ```
 
-</details>
-
-<details open><summary><b>__tests__/ArticleList.tsx</b></summary>
-
-```tsx
+```tsx title="__tests__/ArticleList.tsx"
 import { CacheProvider } from 'rest-hooks';
 import { render } from '@testing-library/react';
 import { MockResolver } from '@rest-hooks/test';
@@ -110,5 +104,3 @@ describe('<ArticleList />', () => {
   })
 });
 ```
-
-</details>

examples/github-app/src/pages/IssueDetail/CommentsList.tsx

@@ -1,5 +1,5 @@
 import { Card } from 'antd';
-import { CommentResource, Comment } from 'resources/Comment';
+import { CommentResource } from 'resources/Comment';
 import { useSuspense } from 'rest-hooks';
 
 import CommentInline from './CommentInline';

examples/github-app/src/pages/IssueDetail/index.tsx

@@ -12,10 +12,9 @@ import { IssueResource } from 'resources/Issue';
 import remarkGfm from 'remark-gfm';
 import remarkRemoveComments from 'remark-remove-comments';
 import rehypeHighlight from 'rehype-highlight';
-import { authdContext } from 'navigation/authdContext';
-import { styled } from '@linaria/react';
 import FlexRow from 'components/FlexRow';
 import UserResource from 'resources/User';
+import { ErrorBoundary } from 'react-error-boundary';
 
 import CreateComment from './CreateComment';
 import CommentsList, { CardLoading } from './CommentsList';
@@ -88,12 +87,16 @@ function IssueDetail({
             </FlexRow>
           }
           description={
-            <Markdown
-              remarkPlugins={[remarkRemoveComments, remarkGfm]}
-              rehypePlugins={[rehypeHighlight]}
+            <ErrorBoundary
+              fallbackRender={({ error }) => <div>{error.message}</div>}
             >
-              {issue.body}
-            </Markdown>
+              <Markdown
+                remarkPlugins={[remarkRemoveComments, remarkGfm]}
+                rehypePlugins={[() => rehypeHighlight({ ignoreMissing: true })]}
+              >
+                {issue.body}
+              </Markdown>
+            </ErrorBoundary>
           }
         />
       </Card>

examples/github-app/src/pages/ProfileDetail/UserRepos.tsx

@@ -1,26 +1,27 @@
-import React, { useMemo } from 'react';
-import { useSuspense } from 'rest-hooks';
+import React from 'react';
+import { useCache, useSuspense } from 'rest-hooks';
 import { Card, List, Layout, Space, Timeline, Typography, Divider } from 'antd';
-import Markdown from 'react-markdown';
 import { Link } from '@anansi/router';
 import { UserResource, User } from 'resources/User';
 import RepositoryResource, { Repository } from 'resources/Repository';
 import { ForkOutlined, StarOutlined } from '@ant-design/icons';
-import { EventResource, typeToIcon, Event } from 'resources/Event';
-import { groupBy } from 'lodash';
 
-const { Meta } = Card;
-const { Sider, Content } = Layout;
-const { Title, Paragraph } = Typography;
+const { Title } = Typography;
 
 export default function UserRepositories({ user }: { user: User }) {
   const { results } = useSuspense(RepositoryResource.getByUser, {
     login: user.login,
   });
-  const pinned = useSuspense(RepositoryResource.getByPinned, {
-    login: user.login,
-  });
-  let repos = pinned.user.pinnedItems.nodes;
+  const currentUser = useCache(UserResource.current);
+  const pinned = useSuspense(
+    RepositoryResource.getByPinned,
+    currentUser
+      ? {
+          login: user.login,
+        }
+      : null,
+  );
+  let repos = pinned.user.pinnedItems.nodes ?? [];
   if (!repos.length) {
     repos = [...results.filter((repo) => !repo.fork)];
     repos.sort((a, b) => b.stargazersCount - a.stargazersCount);

examples/github-app/src/resources/Comment.ts

@@ -30,27 +30,29 @@ const baseResource = createGithubResource(
   '/repos/:owner/:repo/issues/comments/:id' as const,
   Comment,
 );
+const getList = baseResource.getList.extend({
+  urlRoot: '/repos/:owner/:repo/issues/:number/comments' as const,
+  body: undefined,
+});
+const create = baseResource.create.extend({
+  urlRoot: '/repos/:owner/:repo/issues/:number/comments' as const,
+  body: { body: '' },
+  update: (newId: string, params: any) => ({
+    [getList.key(params)]: ({ results = [], ...rest } = {}) => ({
+      results: [...new Set([...results, newId])],
+      ...rest,
+    }),
+  }),
+});
 export const CommentResource = {
   ...baseResource,
-  getList: baseResource.getList.extend({
-    urlRoot: '/repos/:owner/:repo/issues/:number/comments' as const,
-    body: undefined,
-  }),
-  create: baseResource.create.extend({
-    urlRoot: '/repos/:owner/:repo/issues/:number/comments' as const,
-    body: { body: '' },
-    update: (newId: string, params: any) => ({
-      [CommentResource.getList.key(params)]: ({
-        results = [],
-        ...rest
-      } = {}) => ({ results: [...new Set([...results, newId])], ...rest }),
-    }),
+  getList,
+  create,
+  delete: baseResource.delete.extend({
+    getOptimisticResponse(snap, params) {
+      return params;
+    },
   }),
 };
-CommentResource.delete = baseResource.delete.extend({
-  getOptimisticResponse(snap, params) {
-    return params;
-  },
-});
 
 export default CommentResource;

examples/github-app/src/resources/Reaction.tsx

@@ -63,18 +63,18 @@ export const ReactionResource = {
     urlRoot: 'repos/:owner/:repo/issues/comments/:comment/reactions' as const,
     body: undefined,
   }),
-};
-ReactionResource.create = ReactionResource.create.extend({
-  update: (newId: string, params: any) => ({
-    [ReactionResource.getList.key(params)]: ({
-      results = [],
-      ...rest
-    } = {}) => ({ results: [...new Set([newId, ...results])], ...rest }),
+  create: base.create.extend({
+    update: (newId: string, params: any) => ({
+      [base.getList.key(params)]: ({ results = [], ...rest } = {}) => ({
+        results: [...new Set([newId, ...results])],
+        ...rest,
+      }),
+    }),
+    getOptimisticResponse: (snap, params, body) => body,
+  }),
+  delete: base.delete.extend({
+    getOptimisticResponse: (snap, params) => params,
   }),
-  getOptimisticResponse: (snap, params, body) => body,
-});
-ReactionResource.delete = ReactionResource.delete.extend({
-  getOptimisticResponse: (snap, params) => params,
-});
+};
 
 export default ReactionResource;

examples/github-app/src/resources/User.ts

@@ -49,7 +49,6 @@ export const UserResource = {
   ...createGithubResource('/users/:login' as const, User),
   current: new GithubEndpoint({
     urlRoot: '/user' as const,
-    body: undefined,
     schema: User,
   }),
 };