chore: upgrade storybook

lifeiscontent · Mar 29, 2023 · 251d657 · 251d657
1 parent 4f0e80c
commit 251d657
Show file tree

Hide file tree

Showing 9 changed files with 5,601 additions and 7,291 deletions.
diff --git a/web/jest.config.js b/web/jest.config.js
@@ -44,9 +44,6 @@ module.exports = {
     // Handle image imports
     // https://jestjs.io/docs/webpack#handling-static-assets
     '^.+\\.(jpg|jpeg|png|gif|webp|avif|svg)$': `<rootDir>/__mocks__/fileMock.js`,
-
-    // Handle module aliases
-    '^@/components/(.*)$': '<rootDir>/components/$1',
   },
   setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
   testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/.next/'],

diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -1,20 +1,19 @@
 {
   "dependencies": {
-    "@apollo/client": "3.7.3",
+    "@apollo/client": "3.7.10",
     "clsx": "1.2.1",
     "cookie": "0.5.0",
-    "deepmerge": "4.2.2",
+    "deepmerge": "4.3.1",
     "formik": "2.2.9",
     "graphql": "16.6.0",
     "graphql-tag": "2.12.6",
-    "isomorphic-unfetch": "4.0.2",
     "lodash": "4.17.21",
-    "next": "13.1.1",
+    "next": "13.2.4",
     "prop-types": "15.8.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-markdown": "8.0.4",
-    "yup": "0.32.11"
+    "react-markdown": "8.0.6",
+    "yup": "1.0.2"
   },
   "devDependencies": {
     "@babel/core": "7.20.12",
@@ -25,12 +24,12 @@
     "@storybook/addon-links": "next",
     "@storybook/addons": "next",
     "@storybook/client-api": "next",
-    "@storybook/jest": "0.0.11-next.0",
+    "@storybook/jest": "next",
     "@storybook/nextjs": "next",
     "@storybook/react": "next",
-    "@storybook/test-runner": "0.10.0-next.4",
-    "@storybook/testing-library": "0.0.14-next.1",
-    "@storybook/testing-react": "2.0.0-next.0",
+    "@storybook/test-runner": "next",
+    "@storybook/testing-library": "next",
+    "@storybook/testing-react": "next",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "13.4.0",
     "@testing-library/user-event": "14.4.3",
@@ -59,9 +58,9 @@
     "prettier": "2.8.2",
     "react-test-renderer": "18.2.0",
     "storybook": "next",
-    "storybook-addon-apollo-client": "4.0.13",
+    "storybook-addon-apollo-client": "4.1.4",
     "typescript": "4.9.4",
-    "webpack": "5.75.0"
+    "webpack": "^5.76.3"
   },
   "engines": {
     "node": "16.x",

diff --git a/web/src/components/article-form/index.spec.js b/web/src/components/article-form/index.spec.js
diff --git a/web/src/components/comment-card/index.js b/web/src/components/comment-card/index.js
@@ -36,12 +36,9 @@ export function CommentCard({
             priority
             width="20"
           />
+          &nbsp;&nbsp;
           <span className="comment-author-name">{author.username}</span>
         </Link>
-        &nbsp;&nbsp;&nbsp;
-        <Link href={`/user/${author.username}`} className="comment-author">
-          {author.username}
-        </Link>
         <time dateTime={createdAt} className="date-posted">
           {format(new Date(createdAt), 'MMM Qo')}
         </time>

diff --git a/web/src/components/user-follow-button/index.js b/web/src/components/user-follow-button/index.js
@@ -3,8 +3,8 @@ import clsx from 'clsx';
 import { gql } from '@apollo/client';
 
 export function UserFollowButton({
-  canFollow,
-  canUnfollow,
+  canFollow = { value: false },
+  canUnfollow = { value: false },
   followersCount = 0,
   onFollow,
   onUnfollow,

diff --git a/web/src/containers/article-comments/index.js b/web/src/containers/article-comments/index.js
@@ -11,9 +11,59 @@ export function ArticleComments({ articleSlug }) {
     },
   });
 
-  const [deleteComment] = useMutation(ArticleCommentsDeleteCommentMutation);
+  const [deleteComment] = useMutation(ArticleCommentsDeleteCommentMutation, {
+    update(
+      cache,
+      {
+        data: {
+          deleteComment: { comment },
+        },
+      }
+    ) {
+      cache.modify({
+        id: cache.identify(component.data.article),
+        fields: {
+          comments(existingCommentRefs = [], { readField }) {
+            return existingCommentRefs.filter(
+              ref => readField('id', ref) !== comment.id
+            );
+          },
+        },
+      });
+    },
+  });
 
-  const [createComment] = useMutation(ArticleCommentsCreateCommentMutation);
+  const [createComment] = useMutation(ArticleCommentsCreateCommentMutation, {
+    update(
+      cache,
+      {
+        data: {
+          createComment: { comment },
+        },
+      }
+    ) {
+      cache.modify({
+        id: cache.identify(component.data.article),
+        fields: {
+          comments(existingCommentRefs = [], { readField }) {
+            const newCommentRef = cache.writeFragment({
+              data: comment,
+              fragment: CommentCard.fragments.comment,
+            });
+            if (
+              existingCommentRefs.some(
+                ref => readField('id', ref) === comment.id
+              )
+            ) {
+              return existingCommentRefs;
+            }
+
+            return [newCommentRef, ...existingCommentRefs];
+          },
+        },
+      });
+    },
+  });
 
   const handleSubmit = (input, { setSubmitting, setStatus, resetForm }) => {
     createComment({