Merge pull request #3870 from thematters/fix/add-article-to-collectio…

…n-cache

fix(collection): correct local cache on adding articles to collection

src/components/CollectionDigest/Feed/index.tsx

@@ -119,7 +119,7 @@ type MemoizedCollectionDigestFeed = React.MemoExoticComponent<
   fragments: typeof fragments
 }
 
-const CollectionDigestFeed = React.memo(
+export const CollectionDigestFeed = React.memo(
   BaseCollectionDigestFeed,
   ({ collection: prevCollection }, { collection }) => {
     return (
@@ -134,5 +134,3 @@ const CollectionDigestFeed = React.memo(
 
 CollectionDigestFeed.Placeholder = Placeholder
 CollectionDigestFeed.fragments = fragments
-
-export default CollectionDigestFeed

src/components/CollectionDigest/index.tsx

@@ -1,5 +1 @@
-import Feed from './Feed'
-
-export const CollectionDigest = {
-  Feed,
-}
+export * from './Feed'

src/components/Dialogs/AddArticlesCollectionDialog/gql.ts

@@ -1,8 +1,6 @@
 import gql from 'graphql-tag'
 
-// circular dependencies？ 👇
-// import { ArticleDigestFeed } from '~/components'
-import { ArticleDigestFeed } from '../../ArticleDigest/Feed'
+import { ArticleDigestFeed } from '~/components/ArticleDigest/Feed'
 
 export const fragments = {
   user: gql`

src/components/Dialogs/AddCollectionDialog/Content.tsx

@@ -8,7 +8,7 @@ import { FormattedMessage, useIntl } from 'react-intl'
 import { KEYVALUE } from '~/common/enums'
 import { toPath, validateCollectionTitle } from '~/common/utils'
 import {
-  CollectionDigest,
+  CollectionDigestFeed,
   Dialog,
   Form,
   LanguageContext,
@@ -38,7 +38,7 @@ const CREATE_COLLECTION = gql`
       ...CollectionDigestFeedCollection
     }
   }
-  ${CollectionDigest.Feed.fragments.collection}
+  ${CollectionDigestFeed.fragments.collection}
 `
 
 const AddCollectionDialogContent: React.FC<FormProps> = ({

src/components/Dialogs/AddCollectionsArticleDialog/SelectDialogContent.tsx

@@ -36,9 +36,7 @@ const SelectDialogContent: React.FC<SelectDialogContentProps> = ({
   const { data, loading } =
     usePublicQuery<AddCollectionsArticleUserPublicQuery>(
       ADD_COLLECTIONS_ARTICLE_USER_PUBLIC,
-      {
-        variables: { userName, id: articleId },
-      }
+      { variables: { userName, id: articleId }, fetchPolicy: 'network-only' }
     )
 
   const user = data?.user

src/components/Dialogs/AddCollectionsArticleDialog/index.tsx

@@ -39,6 +39,9 @@ const BaseAddCollectionsArticleDialog = ({
   children,
   articleId,
 }: AddCollectionsArticleDialogProps) => {
+  // FIXME: circular dependencies
+  const { COLLECTION_DETAIL } = require('~/views/User/CollectionDetail/gql')
+
   const viewer = useContext(ViewerContext)
   const { getQuery } = useRoute()
 
@@ -77,6 +80,10 @@ const BaseAddCollectionsArticleDialog = ({
             query: USER_COLLECTIONS,
             variables: { userName: viewer.userName },
           },
+          {
+            query: COLLECTION_DETAIL,
+            variables: { id: checked[0] },
+          },
         ],
       })
 

src/stories/components/CollectionDigest/Feed.stories.tsx

@@ -2,18 +2,18 @@ import { MockedProvider } from '@apollo/react-testing'
 import { ComponentMeta, ComponentStory } from '@storybook/react'
 import React from 'react'
 
-import { CollectionDigest } from '~/components'
+import { CollectionDigestFeed } from '~/components'
 
 import { MOCK_COLLECTION } from '../../mocks'
 
 export default {
   title: 'Components/CollectionDigest',
-  component: CollectionDigest.Feed,
-} as ComponentMeta<typeof CollectionDigest.Feed>
+  component: CollectionDigestFeed,
+} as ComponentMeta<typeof CollectionDigestFeed>
 
-const Template: ComponentStory<typeof CollectionDigest.Feed> = (args) => (
+const Template: ComponentStory<typeof CollectionDigestFeed> = (args) => (
   <MockedProvider>
-    <CollectionDigest.Feed {...args} />
+    <CollectionDigestFeed {...args} />
   </MockedProvider>
 )
 

src/views/User/CollectionDetail/CollectionArticles/gql.ts

@@ -1,6 +1,7 @@
 import gql from 'graphql-tag'
 
-import { ArticleDigestFeed, CollectionDigest } from '~/components'
+import { ArticleDigestFeed } from '~/components/ArticleDigest/Feed'
+import { CollectionDigestFeed } from '~/components/CollectionDigest/Feed'
 
 export const fragments = {
   collection: gql`
@@ -22,6 +23,6 @@ export const fragments = {
     }
     ${ArticleDigestFeed.fragments.article.public}
     ${ArticleDigestFeed.fragments.article.private}
-    ${CollectionDigest.Feed.fragments.collection}
+    ${CollectionDigestFeed.fragments.collection}
   `,
 }

src/views/User/Collections/Placeholder/index.tsx

@@ -1,16 +1,16 @@
-import { CollectionDigest, List } from '~/components'
+import { CollectionDigestFeed, List } from '~/components'
 
 const Placeholder = () => {
   return (
     <List aria-busy="true" aria-live="polite">
       <List.Item>
-        <CollectionDigest.Feed.Placeholder />
+        <CollectionDigestFeed.Placeholder />
       </List.Item>
       <List.Item>
-        <CollectionDigest.Feed.Placeholder />
+        <CollectionDigestFeed.Placeholder />
       </List.Item>
       <List.Item>
-        <CollectionDigest.Feed.Placeholder />
+        <CollectionDigestFeed.Placeholder />
       </List.Item>
     </List>
   )

src/views/User/Collections/UserCollections.tsx

@@ -6,7 +6,7 @@ import PROFILE_COVER_DEFAULT from '@/public/static/images/profile-cover.png'
 import { analytics, mergeConnections, stripSpaces } from '~/common/utils'
 import {
   AddCollectionDialog,
-  CollectionDigest,
+  CollectionDigestFeed,
   Empty,
   Head,
   IconAdd20,
@@ -169,7 +169,7 @@ const UserCollections = () => {
           <List>
             {edges.map(({ node, cursor }, i) => (
               <List.Item key={node.id}>
-                <CollectionDigest.Feed
+                <CollectionDigestFeed
                   collection={node}
                   onClick={() =>
                     analytics.trackEvent('click_feed', {

src/views/User/Collections/gql.ts

@@ -1,6 +1,6 @@
 import gql from 'graphql-tag'
 
-import CollectionDigestFeed from '~/components/CollectionDigest/Feed'
+import { CollectionDigestFeed } from '~/components/CollectionDigest/Feed'
 
 const fragments = gql`
   fragment CollectionsUser on User {