From cc83872535d26227f42f0e1352a60b01ad5b19c9 Mon Sep 17 00:00:00 2001 From: RoberTu Date: Thu, 9 Jan 2020 16:29:29 +0800 Subject: [PATCH 001/127] Remove `@include` directives: "hasArticleDigestActionBookmark", "hasArticleDigestActionTopicScore" and "hasArticleDigestCover" --- src/components/ArticleDigest/Actions/index.tsx | 8 ++++---- src/components/ArticleDigest/SidebarDigest/index.tsx | 2 +- src/components/CommentDigest/FeedDigest/index.tsx | 4 ++-- src/components/GQL/fragments/comment.ts | 4 ++-- src/components/GQL/queries/articleResponses.ts | 4 +--- src/components/GQL/queries/commentComments.ts | 8 ++++---- src/components/GQL/queries/tagDetailArticles.ts | 7 +------ src/components/GQL/queries/userArticles.ts | 7 +------ .../ArticleDetail/Collection/CollectionList.tsx | 9 +-------- src/views/ArticleDetail/Collection/EditButton.tsx | 3 --- .../ArticleDetail/Responses/FeaturedComments.tsx | 6 +++--- .../ArticleDetail/Responses/LatestResponses.tsx | 4 +--- src/views/ArticleDetail/index.tsx | 6 +----- src/views/Follow/FollowFeed/index.tsx | 7 +------ src/views/Home/Feed/index.tsx | 12 ++---------- src/views/Home/MattersToday/index.tsx | 5 +---- src/views/Home/Sidebar/Icymi/index.tsx | 6 +----- src/views/Home/Sidebar/Topics/index.tsx | 6 +----- src/views/Search/SearchArticles/index.tsx | 8 +------- src/views/Topics/index.tsx | 6 +----- src/views/User/Bookmarks/MeBookmarks.tsx | 6 +----- src/views/User/Comments/UserComments/index.tsx | 2 +- src/views/User/History/MeHistory.tsx | 6 +----- 23 files changed, 33 insertions(+), 103 deletions(-) diff --git a/src/components/ArticleDigest/Actions/index.tsx b/src/components/ArticleDigest/Actions/index.tsx index fbb91a0ba5..cade5cba34 100644 --- a/src/components/ArticleDigest/Actions/index.tsx +++ b/src/components/ArticleDigest/Actions/index.tsx @@ -37,8 +37,8 @@ const fragments = { createdAt ...AppreciationArticle ...ResponseCountArticle - ...BookmarkArticle @include(if: $hasArticleDigestActionBookmark) - ...TopicScoreArticle @include(if: $hasArticleDigestActionTopicScore) + ...BookmarkArticle + ...TopicScoreArticle ...StateActionsArticle } ${UserDigest.Mini.fragments.user} @@ -56,8 +56,8 @@ const fragments = { createdAt ...AppreciationArticle ...ResponseCountArticle - ...BookmarkArticle @include(if: $hasArticleDigestActionBookmark) - ...TopicScoreArticle @include(if: $hasArticleDigestActionTopicScore) + ...BookmarkArticle + ...TopicScoreArticle ...ResponseStateActionsArticle } ${UserDigest.Mini.fragments.user} diff --git a/src/components/ArticleDigest/SidebarDigest/index.tsx b/src/components/ArticleDigest/SidebarDigest/index.tsx index f2886cabb7..f5b5230cf3 100644 --- a/src/components/ArticleDigest/SidebarDigest/index.tsx +++ b/src/components/ArticleDigest/SidebarDigest/index.tsx @@ -26,7 +26,7 @@ const fragments = { title slug live - cover @include(if: $hasArticleDigestCover) + cover author { id userName diff --git a/src/components/CommentDigest/FeedDigest/index.tsx b/src/components/CommentDigest/FeedDigest/index.tsx index c8c460307d..28597c3468 100644 --- a/src/components/CommentDigest/FeedDigest/index.tsx +++ b/src/components/CommentDigest/FeedDigest/index.tsx @@ -11,7 +11,7 @@ import { FeedDigestComment_comments_edges_node } from '~/components/GQL/fragments/__generated__/FeedDigestComment' import { FolloweeFeedDigestComment } from '~/components/GQL/fragments/__generated__/FolloweeFeedDigestComment' -import commentFragments from '~/components/GQL/fragments/comment' +import CommentFragments from '~/components/GQL/fragments/comment' import { UserDigest } from '~/components/UserDigest' import { TEXT } from '~/common/enums' @@ -30,7 +30,7 @@ import styles from './styles.css' const COLLAPSE_DESCENDANT_COUNT = 2 const fragments = { - comment: commentFragments.feed + comment: CommentFragments.feed } const FeedDigest = ({ diff --git a/src/components/GQL/fragments/comment.ts b/src/components/GQL/fragments/comment.ts index 5a0b3557b2..28c384b4be 100644 --- a/src/components/GQL/fragments/comment.ts +++ b/src/components/GQL/fragments/comment.ts @@ -41,7 +41,7 @@ export default { title } comments(input: { sort: oldest, first: null }) - @include(if: $hasDescendantComments) { + @include(if: $hasDescendants) { edges { cursor node { @@ -59,7 +59,7 @@ export default { title } comments(input: { sort: oldest, first: null }) - @include(if: $hasDescendantComments) { + @include(if: $hasDescendants) { edges { cursor node { diff --git a/src/components/GQL/queries/articleResponses.ts b/src/components/GQL/queries/articleResponses.ts index c46f0de432..e04e01216f 100644 --- a/src/components/GQL/queries/articleResponses.ts +++ b/src/components/GQL/queries/articleResponses.ts @@ -10,9 +10,7 @@ export default gql` $first: Int = 8 $includeAfter: Boolean $includeBefore: Boolean - $hasDescendantComments: Boolean = true - $hasArticleDigestActionBookmark: Boolean = true - $hasArticleDigestActionTopicScore: Boolean = false + $hasDescendants: Boolean = true $articleOnly: Boolean ) { article(input: { mediaHash: $mediaHash }) { diff --git a/src/components/GQL/queries/commentComments.ts b/src/components/GQL/queries/commentComments.ts index b556fcfffb..2390ba4561 100644 --- a/src/components/GQL/queries/commentComments.ts +++ b/src/components/GQL/queries/commentComments.ts @@ -1,14 +1,14 @@ import gql from 'graphql-tag' -import commentFragments from '~/components/GQL/fragments/comment' +import CommentFragments from '~/components/GQL/fragments/comment' export default gql` - query CommentComments($id: ID!, $hasDescendantComments: Boolean = true) { + query CommentComments($id: ID!, $hasDescendants: Boolean = true) { node(input: { id: $id }) { ... on Comment { id comments(input: { sort: oldest, first: null }) - @include(if: $hasDescendantComments) { + @include(if: $hasDescendants) { edges { cursor node { @@ -19,5 +19,5 @@ export default gql` } } } - ${commentFragments.base} + ${CommentFragments.base} ` diff --git a/src/components/GQL/queries/tagDetailArticles.ts b/src/components/GQL/queries/tagDetailArticles.ts index 0f2bbfb888..183bc742b2 100644 --- a/src/components/GQL/queries/tagDetailArticles.ts +++ b/src/components/GQL/queries/tagDetailArticles.ts @@ -3,12 +3,7 @@ import gql from 'graphql-tag' import { ArticleDigest } from '~/components/ArticleDigest' export default gql` - query TagDetailArticles( - $id: ID! - $after: String - $hasArticleDigestActionBookmark: Boolean = true - $hasArticleDigestActionTopicScore: Boolean = false - ) { + query TagDetailArticles($id: ID!, $after: String) { node(input: { id: $id }) { ... on Tag { id diff --git a/src/components/GQL/queries/userArticles.ts b/src/components/GQL/queries/userArticles.ts index e0f526369e..c84c7c850a 100644 --- a/src/components/GQL/queries/userArticles.ts +++ b/src/components/GQL/queries/userArticles.ts @@ -3,12 +3,7 @@ import gql from 'graphql-tag' import { ArticleDigest } from '~/components/ArticleDigest' export default gql` - query UserArticles( - $userName: String! - $after: String - $hasArticleDigestActionBookmark: Boolean = true - $hasArticleDigestActionTopicScore: Boolean = false - ) { + query UserArticles($userName: String!, $after: String) { user(input: { userName: $userName }) { id displayName diff --git a/src/views/ArticleDetail/Collection/CollectionList.tsx b/src/views/ArticleDetail/Collection/CollectionList.tsx index aef8b77ff8..4c20b78dbc 100644 --- a/src/views/ArticleDetail/Collection/CollectionList.tsx +++ b/src/views/ArticleDetail/Collection/CollectionList.tsx @@ -15,14 +15,7 @@ import { CollectionList as CollectionListTypes } from './__generated__/Collectio import styles from './styles.css' export const COLLECTION_LIST = gql` - query CollectionList( - $mediaHash: String - $after: String - $first: Int - $hasArticleDigestActionBookmark: Boolean = false - $hasArticleDigestCover: Boolean = true - $hasArticleDigestActionTopicScore: Boolean = false - ) { + query CollectionList($mediaHash: String, $after: String, $first: Int) { article(input: { mediaHash: $mediaHash }) { ...ArticleCollection } diff --git a/src/views/ArticleDetail/Collection/EditButton.tsx b/src/views/ArticleDetail/Collection/EditButton.tsx index 7ed8bfc940..d34b7f1955 100644 --- a/src/views/ArticleDetail/Collection/EditButton.tsx +++ b/src/views/ArticleDetail/Collection/EditButton.tsx @@ -32,9 +32,6 @@ const EDITOR_SET_COLLECTION = gql` $after: String $first: Int $collection: [ID!]! - $hasArticleDigestActionBookmark: Boolean = false - $hasArticleDigestCover: Boolean = true - $hasArticleDigestActionTopicScore: Boolean = false ) { setCollection(input: { id: $id, collection: $collection }) { ...ArticleCollection diff --git a/src/views/ArticleDetail/Responses/FeaturedComments.tsx b/src/views/ArticleDetail/Responses/FeaturedComments.tsx index 3e69d7f4dd..f7464fe58f 100644 --- a/src/views/ArticleDetail/Responses/FeaturedComments.tsx +++ b/src/views/ArticleDetail/Responses/FeaturedComments.tsx @@ -4,7 +4,7 @@ import { useRouter } from 'next/router' import { LoadMore, Spinner, Translate } from '~/components' import { CommentDigest } from '~/components/CommentDigest' -import commentFragments from '~/components/GQL/fragments/comment' +import CommentFragments from '~/components/GQL/fragments/comment' import { TEXT } from '~/common/enums' import { filterComments, getQuery, mergeConnections } from '~/common/utils' @@ -20,7 +20,7 @@ const FEATURED_COMMENTS = gql` $mediaHash: String $after: String $first: Int = 10 - $hasDescendantComments: Boolean = true + $hasDescendants: Boolean = true ) { article(input: { mediaHash: $mediaHash }) { id @@ -40,7 +40,7 @@ const FEATURED_COMMENTS = gql` } } } - ${commentFragments.feed} + ${CommentFragments.feed} ` const FeaturedComments = () => { diff --git a/src/views/ArticleDetail/Responses/LatestResponses.tsx b/src/views/ArticleDetail/Responses/LatestResponses.tsx index 5617884dbf..a0c0e85263 100644 --- a/src/views/ArticleDetail/Responses/LatestResponses.tsx +++ b/src/views/ArticleDetail/Responses/LatestResponses.tsx @@ -44,9 +44,7 @@ const SUBSCRIBE_RESPONSES = gql` $first: Int $includeAfter: Boolean $includeBefore: Boolean - $hasDescendantComments: Boolean = true - $hasArticleDigestActionBookmark: Boolean = true - $hasArticleDigestActionTopicScore: Boolean = false + $hasDescendants: Boolean = true $articleOnly: Boolean ) { nodeEdited(input: { id: $id }) { diff --git a/src/views/ArticleDetail/index.tsx b/src/views/ArticleDetail/index.tsx index 7f8c917675..826daa5368 100644 --- a/src/views/ArticleDetail/index.tsx +++ b/src/views/ArticleDetail/index.tsx @@ -46,11 +46,7 @@ import AppreciatorsModal from './Toolbar/Appreciators/AppreciatorsModal' import Wall from './Wall' const ARTICLE_DETAIL = gql` - query ArticleDetail( - $mediaHash: String - $hasArticleDigestActionBookmark: Boolean = false - $hasArticleDigestActionTopicScore: Boolean = false - ) { + query ArticleDetail($mediaHash: String) { article(input: { mediaHash: $mediaHash }) { id title diff --git a/src/views/Follow/FollowFeed/index.tsx b/src/views/Follow/FollowFeed/index.tsx index d278bf82d2..d9d6753b2a 100644 --- a/src/views/Follow/FollowFeed/index.tsx +++ b/src/views/Follow/FollowFeed/index.tsx @@ -21,12 +21,7 @@ import { FollowFeed as FollowFeedType } from './__generated__/FollowFeed' import styles from './styles.css' const FOLLOW_FEED = gql` - query FollowFeed( - $after: String - $hasArticleDigestActionBookmark: Boolean = true - $hasArticleDigestActionTopicScore: Boolean = false - $hasDescendantComments: Boolean = false - ) { + query FollowFeed($after: String, $hasDescendants: Boolean = false) { viewer { id recommendation { diff --git a/src/views/Home/Feed/index.tsx b/src/views/Home/Feed/index.tsx index c2fbdd2bf4..f5d7cf0c17 100644 --- a/src/views/Home/Feed/index.tsx +++ b/src/views/Home/Feed/index.tsx @@ -42,11 +42,7 @@ const feedFragment = gql` export const queries = { hottest: gql` - query HottestFeed( - $after: String - $hasArticleDigestActionBookmark: Boolean = true - $hasArticleDigestActionTopicScore: Boolean = false - ) { + query HottestFeed($after: String) { viewer { id recommendation { @@ -59,11 +55,7 @@ export const queries = { ${feedFragment} `, newest: gql` - query NewestFeed( - $after: String - $hasArticleDigestActionBookmark: Boolean = true - $hasArticleDigestActionTopicScore: Boolean = false - ) { + query NewestFeed($after: String) { viewer { id recommendation { diff --git a/src/views/Home/MattersToday/index.tsx b/src/views/Home/MattersToday/index.tsx index 34981b4749..91ee0563f6 100644 --- a/src/views/Home/MattersToday/index.tsx +++ b/src/views/Home/MattersToday/index.tsx @@ -11,10 +11,7 @@ import { analytics } from '~/common/utils' import { HomeToday } from './__generated__/HomeToday' export const HOME_TODAY = gql` - query HomeToday( - $hasArticleDigestActionBookmark: Boolean = true - $hasArticleDigestActionTopicScore: Boolean = false - ) { + query HomeToday() { viewer { id recommendation { diff --git a/src/views/Home/Sidebar/Icymi/index.tsx b/src/views/Home/Sidebar/Icymi/index.tsx index a5b665332b..979dfc9c62 100644 --- a/src/views/Home/Sidebar/Icymi/index.tsx +++ b/src/views/Home/Sidebar/Icymi/index.tsx @@ -10,11 +10,7 @@ import { analytics } from '~/common/utils' import { SidebarIcymi } from './__generated__/SidebarIcymi' export const SIDEBAR_ICYMI = gql` - query SidebarIcymi( - $hasArticleDigestActionBookmark: Boolean = false - $hasArticleDigestCover: Boolean = true - $hasArticleDigestActionTopicScore: Boolean = false - ) { + query SidebarIcymi { viewer { id recommendation { diff --git a/src/views/Home/Sidebar/Topics/index.tsx b/src/views/Home/Sidebar/Topics/index.tsx index 08961a2bf9..03acfc8364 100644 --- a/src/views/Home/Sidebar/Topics/index.tsx +++ b/src/views/Home/Sidebar/Topics/index.tsx @@ -13,11 +13,7 @@ import { SidebarTopics } from './__generated__/SidebarTopics' import styles from './styles.css' export const SIDEBAR_TOPICS = gql` - query SidebarTopics( - $hasArticleDigestActionBookmark: Boolean = false - $hasArticleDigestCover: Boolean = false - $hasArticleDigestActionTopicScore: Boolean = true - ) { + query SidebarTopics { viewer { id recommendation { diff --git a/src/views/Search/SearchArticles/index.tsx b/src/views/Search/SearchArticles/index.tsx index 272719a8c7..abcc67ce33 100644 --- a/src/views/Search/SearchArticles/index.tsx +++ b/src/views/Search/SearchArticles/index.tsx @@ -20,13 +20,7 @@ import EmptySearch from '../EmptySearch' import { SeachArticles } from './__generated__/SeachArticles' const SEARCH_ARTICLES = gql` - query SeachArticles( - $key: String! - $first: Int! - $after: String - $hasArticleDigestActionBookmark: Boolean = true - $hasArticleDigestActionTopicScore: Boolean = false - ) { + query SeachArticles($key: String!, $first: Int!, $after: String) { search(input: { key: $key, type: Article, first: $first, after: $after }) { pageInfo { startCursor diff --git a/src/views/Topics/index.tsx b/src/views/Topics/index.tsx index 6f372a0494..f22ff59fc3 100644 --- a/src/views/Topics/index.tsx +++ b/src/views/Topics/index.tsx @@ -19,11 +19,7 @@ import { analytics, mergeConnections } from '~/common/utils' import { AllTopics } from './__generated__/AllTopics' const ALL_TOPICSS = gql` - query AllTopics( - $after: String - $hasArticleDigestActionBookmark: Boolean = true - $hasArticleDigestActionTopicScore: Boolean = true - ) { + query AllTopics($after: String) { viewer { id recommendation { diff --git a/src/views/User/Bookmarks/MeBookmarks.tsx b/src/views/User/Bookmarks/MeBookmarks.tsx index 8ba1d9e99f..ab186ef900 100644 --- a/src/views/User/Bookmarks/MeBookmarks.tsx +++ b/src/views/User/Bookmarks/MeBookmarks.tsx @@ -10,11 +10,7 @@ import { mergeConnections } from '~/common/utils' import { MeBookmarkFeed } from './__generated__/MeBookmarkFeed' const ME_BOOKMARK_FEED = gql` - query MeBookmarkFeed( - $after: String - $hasArticleDigestActionBookmark: Boolean = true - $hasArticleDigestActionTopicScore: Boolean = false - ) { + query MeBookmarkFeed($after: String) { viewer { id subscriptions(input: { first: 10, after: $after }) { diff --git a/src/views/User/Comments/UserComments/index.tsx b/src/views/User/Comments/UserComments/index.tsx index f5dfc6ef3f..7d663ae3e6 100644 --- a/src/views/User/Comments/UserComments/index.tsx +++ b/src/views/User/Comments/UserComments/index.tsx @@ -38,7 +38,7 @@ const USER_COMMENT_FEED = gql` query UserCommentFeed( $id: ID! $after: String - $hasDescendantComments: Boolean = false + $hasDescendants: Boolean = false ) { node(input: { id: $id }) { ... on User { diff --git a/src/views/User/History/MeHistory.tsx b/src/views/User/History/MeHistory.tsx index df2a1c9c10..090a7d0005 100644 --- a/src/views/User/History/MeHistory.tsx +++ b/src/views/User/History/MeHistory.tsx @@ -11,11 +11,7 @@ import { analytics, mergeConnections } from '~/common/utils' import { MeHistoryFeed } from './__generated__/MeHistoryFeed' const ME_HISTORY_FEED = gql` - query MeHistoryFeed( - $after: String - $hasArticleDigestActionBookmark: Boolean = true - $hasArticleDigestActionTopicScore: Boolean = false - ) { + query MeHistoryFeed($after: String) { viewer { id activity { From 31b6df95254bc4f8fd17d01ffbcc518283718409 Mon Sep 17 00:00:00 2001 From: RoberTu Date: Thu, 9 Jan 2020 17:04:44 +0800 Subject: [PATCH 002/127] `` to `` --- src/common/utils/comment.ts | 11 ++- .../CancelEditButton.tsx | 0 .../CommentToArticle.tsx | 7 +- .../Content/Collapsed.tsx | 0 .../Content/index.tsx | 0 .../Content/styles.css | 0 .../DescendantComment.tsx | 10 +-- .../DropdownActions/CollapseButton.tsx | 0 .../DropdownActions/DeleteButton.tsx | 0 .../DropdownActions/EditButton.tsx | 0 .../DropdownActions/PinButton.tsx | 0 .../DropdownActions/ReportButton.tsx | 0 .../DropdownActions/index.tsx | 0 .../DropdownActions/styles.css | 0 .../FooterActions/DownvoteButton.tsx | 0 .../FooterActions/UpvoteButton.tsx | 0 .../FooterActions/index.tsx | 0 .../FooterActions/styles.css | 0 .../FeedDigest => Comment}/PinnedLabel.tsx | 0 .../FeedDigest => Comment}/ReplyTo.tsx | 4 +- src/components/Comment/fragments.ts | 55 ++++++++++++++ .../FeedDigest => Comment}/index.tsx | 33 +++------ .../FeedDigest => Comment}/styles.css | 0 src/components/CommentDigest/index.tsx | 5 -- src/components/Form/CommentForm/index.tsx | 16 +++- src/components/GQL/fragments/comment.ts | 73 ------------------- src/components/GQL/fragments/response.ts | 8 +- .../GQL/queries/articleResponses.ts | 1 - src/components/GQL/queries/commentComments.ts | 23 ------ src/components/NoticeDigest/NoticeComment.tsx | 2 +- src/components/index.tsx | 2 +- .../Responses/FeaturedComments.tsx | 11 +-- .../Responses/LatestResponses.tsx | 13 ++-- src/views/Follow/FollowFeed/index.tsx | 11 ++- src/views/Home/MattersToday/index.tsx | 2 +- .../User/Comments/UserComments/index.tsx | 15 ++-- 36 files changed, 124 insertions(+), 178 deletions(-) rename src/components/{CommentDigest/FeedDigest => Comment}/CancelEditButton.tsx (100%) rename src/components/{CommentDigest/FeedDigest => Comment}/CommentToArticle.tsx (72%) rename src/components/{CommentDigest => Comment}/Content/Collapsed.tsx (100%) rename src/components/{CommentDigest => Comment}/Content/index.tsx (100%) rename src/components/{CommentDigest => Comment}/Content/styles.css (100%) rename src/components/{CommentDigest/FeedDigest => Comment}/DescendantComment.tsx (88%) rename src/components/{CommentDigest => Comment}/DropdownActions/CollapseButton.tsx (100%) rename src/components/{CommentDigest => Comment}/DropdownActions/DeleteButton.tsx (100%) rename src/components/{CommentDigest => Comment}/DropdownActions/EditButton.tsx (100%) rename src/components/{CommentDigest => Comment}/DropdownActions/PinButton.tsx (100%) rename src/components/{CommentDigest => Comment}/DropdownActions/ReportButton.tsx (100%) rename src/components/{CommentDigest => Comment}/DropdownActions/index.tsx (100%) rename src/components/{CommentDigest => Comment}/DropdownActions/styles.css (100%) rename src/components/{CommentDigest => Comment}/FooterActions/DownvoteButton.tsx (100%) rename src/components/{CommentDigest => Comment}/FooterActions/UpvoteButton.tsx (100%) rename src/components/{CommentDigest => Comment}/FooterActions/index.tsx (100%) rename src/components/{CommentDigest => Comment}/FooterActions/styles.css (100%) rename src/components/{CommentDigest/FeedDigest => Comment}/PinnedLabel.tsx (100%) rename src/components/{CommentDigest/FeedDigest => Comment}/ReplyTo.tsx (76%) create mode 100644 src/components/Comment/fragments.ts rename src/components/{CommentDigest/FeedDigest => Comment}/index.tsx (88%) rename src/components/{CommentDigest/FeedDigest => Comment}/styles.css (100%) delete mode 100644 src/components/CommentDigest/index.tsx delete mode 100644 src/components/GQL/fragments/comment.ts delete mode 100644 src/components/GQL/queries/commentComments.ts diff --git a/src/common/utils/comment.ts b/src/common/utils/comment.ts index d2b1d5280c..a08b5b1fe4 100644 --- a/src/common/utils/comment.ts +++ b/src/common/utils/comment.ts @@ -1,20 +1,19 @@ import _get from 'lodash/get' -import { BaseDigestComment } from '~/components/GQL/fragments/__generated__/BaseDigestComment' +import { Comment } from '~/components/Comment/__generated__/Comment' /** * Filter out comment that banned/archived and hasn't descendants * * @param comments */ -export const filterComment = (comment: BaseDigestComment) => { +export const filterComment = (comment: Comment) => { const isActive = comment.state === 'active' const isDescendant = comment.parentComment && comment.parentComment.id const descendants = _get(comment, 'comments.edges', []) const hasActiveDescendants = - descendants.filter( - ({ node }: { node: BaseDigestComment }) => node.state === 'active' - ).length > 0 + descendants.filter(({ node }: { node: Comment }) => node.state === 'active') + .length > 0 // skip if comment's state is active if (isActive) { @@ -34,5 +33,5 @@ export const filterComment = (comment: BaseDigestComment) => { return false } -export const filterComments = (comments: BaseDigestComment[]) => +export const filterComments = (comments: Comment[]) => comments.filter(filterComment) diff --git a/src/components/CommentDigest/FeedDigest/CancelEditButton.tsx b/src/components/Comment/CancelEditButton.tsx similarity index 100% rename from src/components/CommentDigest/FeedDigest/CancelEditButton.tsx rename to src/components/Comment/CancelEditButton.tsx diff --git a/src/components/CommentDigest/FeedDigest/CommentToArticle.tsx b/src/components/Comment/CommentToArticle.tsx similarity index 72% rename from src/components/CommentDigest/FeedDigest/CommentToArticle.tsx rename to src/components/Comment/CommentToArticle.tsx index 35babd9c00..8411176c89 100644 --- a/src/components/CommentDigest/FeedDigest/CommentToArticle.tsx +++ b/src/components/Comment/CommentToArticle.tsx @@ -1,17 +1,16 @@ import _get from 'lodash/get' import Link from 'next/link' -import { FeedDigestComment } from '~/components/GQL/fragments/__generated__/FeedDigestComment' -import { FolloweeFeedDigestComment } from '~/components/GQL/fragments/__generated__/FolloweeFeedDigestComment' - import { toPath } from '~/common/utils' +import { Comment } from './__generated__/Comment' +import { DescendantsIncludedComment } from './__generated__/DescendantsIncludedComment' import styles from './styles.css' const CommentToArticle = ({ comment }: { - comment: FeedDigestComment | FolloweeFeedDigestComment + comment: Comment | DescendantsIncludedComment }) => { if (!comment.article) { return null diff --git a/src/components/CommentDigest/Content/Collapsed.tsx b/src/components/Comment/Content/Collapsed.tsx similarity index 100% rename from src/components/CommentDigest/Content/Collapsed.tsx rename to src/components/Comment/Content/Collapsed.tsx diff --git a/src/components/CommentDigest/Content/index.tsx b/src/components/Comment/Content/index.tsx similarity index 100% rename from src/components/CommentDigest/Content/index.tsx rename to src/components/Comment/Content/index.tsx diff --git a/src/components/CommentDigest/Content/styles.css b/src/components/Comment/Content/styles.css similarity index 100% rename from src/components/CommentDigest/Content/styles.css rename to src/components/Comment/Content/styles.css diff --git a/src/components/CommentDigest/FeedDigest/DescendantComment.tsx b/src/components/Comment/DescendantComment.tsx similarity index 88% rename from src/components/CommentDigest/FeedDigest/DescendantComment.tsx rename to src/components/Comment/DescendantComment.tsx index 924577aadf..bd8ba69c9a 100644 --- a/src/components/CommentDigest/FeedDigest/DescendantComment.tsx +++ b/src/components/Comment/DescendantComment.tsx @@ -3,13 +3,13 @@ import _get from 'lodash/get' import { useState } from 'react' import CommentForm from '~/components/Form/CommentForm' -import { FeedDigestComment_comments_edges_node } from '~/components/GQL/fragments/__generated__/FeedDigestComment' import { UserDigest } from '~/components/UserDigest' -import CommentContent from '../Content' -import DropdownActions from '../DropdownActions' -import FooterActions, { FooterActionsControls } from '../FooterActions' +import { DescendantsIncludedComment_comments_edges_node } from './__generated__/DescendantsIncludedComment' import CancelEditButton from './CancelEditButton' +import CommentContent from './Content' +import DropdownActions from './DropdownActions' +import FooterActions, { FooterActionsControls } from './FooterActions' import PinnedLabel from './PinnedLabel' import ReplyTo from './ReplyTo' import styles from './styles.css' @@ -20,7 +20,7 @@ const DescendantComment = ({ commentCallback, ...actionControls }: { - comment: FeedDigestComment_comments_edges_node + comment: DescendantsIncludedComment_comments_edges_node inArticle?: boolean commentCallback?: () => void } & FooterActionsControls) => { diff --git a/src/components/CommentDigest/DropdownActions/CollapseButton.tsx b/src/components/Comment/DropdownActions/CollapseButton.tsx similarity index 100% rename from src/components/CommentDigest/DropdownActions/CollapseButton.tsx rename to src/components/Comment/DropdownActions/CollapseButton.tsx diff --git a/src/components/CommentDigest/DropdownActions/DeleteButton.tsx b/src/components/Comment/DropdownActions/DeleteButton.tsx similarity index 100% rename from src/components/CommentDigest/DropdownActions/DeleteButton.tsx rename to src/components/Comment/DropdownActions/DeleteButton.tsx diff --git a/src/components/CommentDigest/DropdownActions/EditButton.tsx b/src/components/Comment/DropdownActions/EditButton.tsx similarity index 100% rename from src/components/CommentDigest/DropdownActions/EditButton.tsx rename to src/components/Comment/DropdownActions/EditButton.tsx diff --git a/src/components/CommentDigest/DropdownActions/PinButton.tsx b/src/components/Comment/DropdownActions/PinButton.tsx similarity index 100% rename from src/components/CommentDigest/DropdownActions/PinButton.tsx rename to src/components/Comment/DropdownActions/PinButton.tsx diff --git a/src/components/CommentDigest/DropdownActions/ReportButton.tsx b/src/components/Comment/DropdownActions/ReportButton.tsx similarity index 100% rename from src/components/CommentDigest/DropdownActions/ReportButton.tsx rename to src/components/Comment/DropdownActions/ReportButton.tsx diff --git a/src/components/CommentDigest/DropdownActions/index.tsx b/src/components/Comment/DropdownActions/index.tsx similarity index 100% rename from src/components/CommentDigest/DropdownActions/index.tsx rename to src/components/Comment/DropdownActions/index.tsx diff --git a/src/components/CommentDigest/DropdownActions/styles.css b/src/components/Comment/DropdownActions/styles.css similarity index 100% rename from src/components/CommentDigest/DropdownActions/styles.css rename to src/components/Comment/DropdownActions/styles.css diff --git a/src/components/CommentDigest/FooterActions/DownvoteButton.tsx b/src/components/Comment/FooterActions/DownvoteButton.tsx similarity index 100% rename from src/components/CommentDigest/FooterActions/DownvoteButton.tsx rename to src/components/Comment/FooterActions/DownvoteButton.tsx diff --git a/src/components/CommentDigest/FooterActions/UpvoteButton.tsx b/src/components/Comment/FooterActions/UpvoteButton.tsx similarity index 100% rename from src/components/CommentDigest/FooterActions/UpvoteButton.tsx rename to src/components/Comment/FooterActions/UpvoteButton.tsx diff --git a/src/components/CommentDigest/FooterActions/index.tsx b/src/components/Comment/FooterActions/index.tsx similarity index 100% rename from src/components/CommentDigest/FooterActions/index.tsx rename to src/components/Comment/FooterActions/index.tsx diff --git a/src/components/CommentDigest/FooterActions/styles.css b/src/components/Comment/FooterActions/styles.css similarity index 100% rename from src/components/CommentDigest/FooterActions/styles.css rename to src/components/Comment/FooterActions/styles.css diff --git a/src/components/CommentDigest/FeedDigest/PinnedLabel.tsx b/src/components/Comment/PinnedLabel.tsx similarity index 100% rename from src/components/CommentDigest/FeedDigest/PinnedLabel.tsx rename to src/components/Comment/PinnedLabel.tsx diff --git a/src/components/CommentDigest/FeedDigest/ReplyTo.tsx b/src/components/Comment/ReplyTo.tsx similarity index 76% rename from src/components/CommentDigest/FeedDigest/ReplyTo.tsx rename to src/components/Comment/ReplyTo.tsx index 8a533fabe6..7a4c871567 100644 --- a/src/components/CommentDigest/FeedDigest/ReplyTo.tsx +++ b/src/components/Comment/ReplyTo.tsx @@ -1,16 +1,16 @@ -import { FeedDigestComment_comments_edges_node_replyTo_author } from '~/components/GQL/fragments/__generated__/FeedDigestComment' import { Translate } from '~/components/Language' import { UserDigest } from '~/components/UserDigest' import { TEXT } from '~/common/enums' +import { DescendantsIncludedComment_comments_edges_node_replyTo_author } from './__generated__/DescendantsIncludedComment' import styles from './styles.css' const ReplyTo = ({ user, inArticle }: { - user: FeedDigestComment_comments_edges_node_replyTo_author + user: DescendantsIncludedComment_comments_edges_node_replyTo_author inArticle: boolean }) => (
diff --git a/src/components/Comment/fragments.ts b/src/components/Comment/fragments.ts new file mode 100644 index 0000000000..7245d38cc0 --- /dev/null +++ b/src/components/Comment/fragments.ts @@ -0,0 +1,55 @@ +import gql from 'graphql-tag' + +import { UserDigest } from '~/components/UserDigest' + +import DropdownActions from './DropdownActions' +import FooterActions from './FooterActions' + +const comment = gql` + fragment Comment on Comment { + id + state + content + pinned + author { + ...UserDigestMiniUser + isBlocking + isBlocked + } + parentComment { + id + } + replyTo { + id + author { + ...UserDigestMiniUser + } + } + article { + title + } + ...DigestActionsComment + ...DropdownActionsComment + } + ${UserDigest.Mini.fragments.user} + ${FooterActions.fragments.comment} + ${DropdownActions.fragments.comment} +` + +export default { + comment, + descendantsIncluded: gql` + fragment DescendantsIncludedComment on Comment { + ...Comment + comments(input: { sort: oldest, first: null }) { + edges { + cursor + node { + ...Comment + } + } + } + } + ${comment} + ` +} diff --git a/src/components/CommentDigest/FeedDigest/index.tsx b/src/components/Comment/index.tsx similarity index 88% rename from src/components/CommentDigest/FeedDigest/index.tsx rename to src/components/Comment/index.tsx index 28597c3468..b7932a49bc 100644 --- a/src/components/CommentDigest/FeedDigest/index.tsx +++ b/src/components/Comment/index.tsx @@ -6,34 +6,27 @@ import { useState } from 'react' import { Icon, TextIcon, Translate } from '~/components' import { Expandable } from '~/components/Expandable' import CommentForm from '~/components/Form/CommentForm' -import { - FeedDigestComment, - FeedDigestComment_comments_edges_node -} from '~/components/GQL/fragments/__generated__/FeedDigestComment' -import { FolloweeFeedDigestComment } from '~/components/GQL/fragments/__generated__/FolloweeFeedDigestComment' -import CommentFragments from '~/components/GQL/fragments/comment' import { UserDigest } from '~/components/UserDigest' import { TEXT } from '~/common/enums' import { filterComments, toPath } from '~/common/utils' -import CommentContent from '../Content' -import DropdownActions from '../DropdownActions' -import FooterActions, { FooterActionsControls } from '../FooterActions' +import { Comment as CommentType } from './__generated__/Comment' +import { DescendantsIncludedComment } from './__generated__/DescendantsIncludedComment' import CancelEditButton from './CancelEditButton' import CommentToArticle from './CommentToArticle' +import CommentContent from './Content' import DescendantComment from './DescendantComment' +import DropdownActions from './DropdownActions' +import FooterActions, { FooterActionsControls } from './FooterActions' +import fragments from './fragments' import PinnedLabel from './PinnedLabel' import ReplyTo from './ReplyTo' import styles from './styles.css' const COLLAPSE_DESCENDANT_COUNT = 2 -const fragments = { - comment: CommentFragments.feed -} - -const FeedDigest = ({ +export const Comment = ({ comment, inArticle, expandDescendants, @@ -42,7 +35,7 @@ const FeedDigest = ({ inFolloweeFeed, ...actionControls }: { - comment: FeedDigestComment | FolloweeFeedDigestComment + comment: CommentType | DescendantsIncludedComment inArticle?: boolean expandDescendants?: boolean commentCallback?: () => void @@ -58,14 +51,14 @@ const FeedDigest = ({ author, replyTo, parentComment, - pinned, - comments + pinned } = comment + const comments = 'comments' in comment ? comment.comments : undefined // descendant const descendantComments = filterComments( (comments?.edges || []).map(({ node }) => node) - ) as FeedDigestComment_comments_edges_node[] + ) as DescendantsIncludedComment[] const restDescendantCommentCount = descendantComments.length - COLLAPSE_DESCENDANT_COUNT const [expand, setExpand] = useState( @@ -223,6 +216,4 @@ const FeedDigest = ({ ) } -FeedDigest.fragments = fragments - -export default FeedDigest +Comment.fragments = fragments diff --git a/src/components/CommentDigest/FeedDigest/styles.css b/src/components/Comment/styles.css similarity index 100% rename from src/components/CommentDigest/FeedDigest/styles.css rename to src/components/Comment/styles.css diff --git a/src/components/CommentDigest/index.tsx b/src/components/CommentDigest/index.tsx deleted file mode 100644 index dfb40c533f..0000000000 --- a/src/components/CommentDigest/index.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import FeedDigest from './FeedDigest' - -export const CommentDigest = { - Feed: FeedDigest -} diff --git a/src/components/Form/CommentForm/index.tsx b/src/components/Form/CommentForm/index.tsx index b76427fae1..dc17aa9328 100644 --- a/src/components/Form/CommentForm/index.tsx +++ b/src/components/Form/CommentForm/index.tsx @@ -5,10 +5,10 @@ import { useContext, useState } from 'react' import { Icon, Translate } from '~/components' import { Button } from '~/components/Button' +import CommentFragments from '~/components/Comment/fragments' import { useMutation } from '~/components/GQL' import { ClientPreference } from '~/components/GQL/queries/__generated__/ClientPreference' import CLIENT_PREFERENCE from '~/components/GQL/queries/clientPreference' -import COMMENT_COMMENTS from '~/components/GQL/queries/commentComments' import { ModalSwitch } from '~/components/ModalManager' import { Spinner } from '~/components/Spinner' import { ViewerContext } from '~/components/Viewer' @@ -43,6 +43,18 @@ const COMMENT_DRAFT = gql` } ` +const COMMENT_WITH_DESCENDANTS = gql` + query CommentWithDescendants($id: ID!) { + node(input: { id: $id }) { + ... on Comment { + id + ...DescendantsIncludedComment + } + } + } + ${CommentFragments.descendantsIncluded} +` + interface CommentFormProps { articleId: string commentId?: string @@ -77,7 +89,7 @@ const CommentForm = ({ : parentId ? [ { - query: COMMENT_COMMENTS, + query: COMMENT_WITH_DESCENDANTS, variables: { id: parentId } } ] diff --git a/src/components/GQL/fragments/comment.ts b/src/components/GQL/fragments/comment.ts deleted file mode 100644 index 28c384b4be..0000000000 --- a/src/components/GQL/fragments/comment.ts +++ /dev/null @@ -1,73 +0,0 @@ -import gql from 'graphql-tag' - -import DropdownActions from '~/components/CommentDigest/DropdownActions' -import FooterActions from '~/components/CommentDigest/FooterActions' -import { UserDigest } from '~/components/UserDigest' - -const base = gql` - fragment BaseDigestComment on Comment { - id - state - content - pinned - author { - ...UserDigestMiniUser - isBlocking - isBlocked - } - parentComment { - id - } - replyTo { - id - author { - ...UserDigestMiniUser - } - } - ...DigestActionsComment - ...DropdownActionsComment - } - ${UserDigest.Mini.fragments.user} - ${FooterActions.fragments.comment} - ${DropdownActions.fragments.comment} -` - -export default { - base, - feed: gql` - fragment FeedDigestComment on Comment { - ...BaseDigestComment - article { - title - } - comments(input: { sort: oldest, first: null }) - @include(if: $hasDescendants) { - edges { - cursor - node { - ...BaseDigestComment - } - } - } - } - ${base} - `, - followee: gql` - fragment FolloweeFeedDigestComment on Comment { - ...BaseDigestComment - article { - title - } - comments(input: { sort: oldest, first: null }) - @include(if: $hasDescendants) { - edges { - cursor - node { - ...BaseDigestComment - } - } - } - } - ${base} - ` -} diff --git a/src/components/GQL/fragments/response.ts b/src/components/GQL/fragments/response.ts index a9174b4af1..6416007c77 100644 --- a/src/components/GQL/fragments/response.ts +++ b/src/components/GQL/fragments/response.ts @@ -1,8 +1,6 @@ import gql from 'graphql-tag' -import { ArticleDigest } from '~/components/ArticleDigest' - -import commentFragments from './comment' +import { ArticleDigest, Comment } from '~/components' export const ArticleDetailResponses = gql` fragment ArticleDetailResponses on Article { @@ -30,12 +28,12 @@ export const ArticleDetailResponses = gql` ...ResponseDigestArticle } ... on Comment { - ...FeedDigestComment + ...DescendantsIncludedComment } } } } } ${ArticleDigest.Response.fragments.response} - ${commentFragments.feed} + ${Comment.fragments.descendantsIncluded} ` diff --git a/src/components/GQL/queries/articleResponses.ts b/src/components/GQL/queries/articleResponses.ts index e04e01216f..bb94bfaa45 100644 --- a/src/components/GQL/queries/articleResponses.ts +++ b/src/components/GQL/queries/articleResponses.ts @@ -10,7 +10,6 @@ export default gql` $first: Int = 8 $includeAfter: Boolean $includeBefore: Boolean - $hasDescendants: Boolean = true $articleOnly: Boolean ) { article(input: { mediaHash: $mediaHash }) { diff --git a/src/components/GQL/queries/commentComments.ts b/src/components/GQL/queries/commentComments.ts deleted file mode 100644 index 2390ba4561..0000000000 --- a/src/components/GQL/queries/commentComments.ts +++ /dev/null @@ -1,23 +0,0 @@ -import gql from 'graphql-tag' - -import CommentFragments from '~/components/GQL/fragments/comment' - -export default gql` - query CommentComments($id: ID!, $hasDescendants: Boolean = true) { - node(input: { id: $id }) { - ... on Comment { - id - comments(input: { sort: oldest, first: null }) - @include(if: $hasDescendants) { - edges { - cursor - node { - ...BaseDigestComment - } - } - } - } - } - } - ${CommentFragments.base} -` diff --git a/src/components/NoticeDigest/NoticeComment.tsx b/src/components/NoticeDigest/NoticeComment.tsx index dc7aaca405..2c1dc759e9 100644 --- a/src/components/NoticeDigest/NoticeComment.tsx +++ b/src/components/NoticeDigest/NoticeComment.tsx @@ -1,6 +1,6 @@ import gql from 'graphql-tag' -import CommentContent from '~/components/CommentDigest/Content' +import CommentContent from '~/components/Comment/Content' import { makeSummary, toPath } from '~/common/utils' diff --git a/src/components/index.tsx b/src/components/index.tsx index f7f44f9511..933d54a632 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -36,5 +36,5 @@ export * from './Button/Bookmark' export * from './Tabs' export * from './UserProfile' export * from './DraftDigest' -export * from './CommentDigest' +export * from './Comment' export * from './Expandable' diff --git a/src/views/ArticleDetail/Responses/FeaturedComments.tsx b/src/views/ArticleDetail/Responses/FeaturedComments.tsx index f7464fe58f..499636bfba 100644 --- a/src/views/ArticleDetail/Responses/FeaturedComments.tsx +++ b/src/views/ArticleDetail/Responses/FeaturedComments.tsx @@ -2,9 +2,7 @@ import { useQuery } from '@apollo/react-hooks' import gql from 'graphql-tag' import { useRouter } from 'next/router' -import { LoadMore, Spinner, Translate } from '~/components' -import { CommentDigest } from '~/components/CommentDigest' -import CommentFragments from '~/components/GQL/fragments/comment' +import { Comment, LoadMore, Spinner, Translate } from '~/components' import { TEXT } from '~/common/enums' import { filterComments, getQuery, mergeConnections } from '~/common/utils' @@ -20,7 +18,6 @@ const FEATURED_COMMENTS = gql` $mediaHash: String $after: String $first: Int = 10 - $hasDescendants: Boolean = true ) { article(input: { mediaHash: $mediaHash }) { id @@ -34,13 +31,13 @@ const FEATURED_COMMENTS = gql` } edges { node { - ...FeedDigestComment + ...DescendantsIncludedComment } } } } } - ${CommentFragments.feed} + ${Comment.fragments.descendantsIncluded} ` const FeaturedComments = () => { @@ -96,7 +93,7 @@ const FeaturedComments = () => {
    {comments.map(comment => (
  • - +
    • ))}
diff --git a/src/views/ArticleDetail/Responses/LatestResponses.tsx b/src/views/ArticleDetail/Responses/LatestResponses.tsx index a0c0e85263..bf712dd63a 100644 --- a/src/views/ArticleDetail/Responses/LatestResponses.tsx +++ b/src/views/ArticleDetail/Responses/LatestResponses.tsx @@ -8,9 +8,13 @@ import _merge from 'lodash/merge' import { useRouter } from 'next/router' import { useEffect, useState } from 'react' -import { LoadMore, Spinner, Translate } from '~/components' -import { ArticleDigest } from '~/components/ArticleDigest' -import { CommentDigest } from '~/components/CommentDigest' +import { + ArticleDigest, + Comment, + LoadMore, + Spinner, + Translate +} from '~/components' import EmptyResponse from '~/components/Empty/EmptyResponse' import { QueryError } from '~/components/GQL' import { ArticleDetailResponses } from '~/components/GQL/fragments/response' @@ -44,7 +48,6 @@ const SUBSCRIBE_RESPONSES = gql` $first: Int $includeAfter: Boolean $includeBefore: Boolean - $hasDescendants: Boolean = true $articleOnly: Boolean ) { nodeEdited(input: { id: $id }) { @@ -281,7 +284,7 @@ const LatestResponses = () => { {_has(response, 'title') ? ( ) : ( - { @@ -112,7 +111,7 @@ const FollowFeed = () => { /> )} {node.__typename === 'Comment' && ( - { @@ -191,7 +186,7 @@ const UserComments = ({ user }: UserIdUser) => {
    {filteredComments.map(comment => (
  • - +
    • ))}
From 97f6ff2ee8f4e8ef27da95279420ba2c3bf42f11 Mon Sep 17 00:00:00 2001 From: RoberTu Date: Fri, 10 Jan 2020 23:16:13 +0800 Subject: [PATCH 003/127] Breaking down comment-related components; add `__generated__` to imports order; --- src/common/utils/comment.ts | 9 +- .../Analytics/AnalyticsListener.tsx | 1 + .../ArticleDigest/Actions/ResponseCount.tsx | 3 +- .../ArticleDigest/Actions/State.tsx | 3 +- .../ArticleDigest/Actions/index.tsx | 5 +- .../DropdownActions/ArchiveButton.tsx | 5 +- .../DropdownActions/RemoveTagButton.tsx | 3 +- .../DropdownActions/StickyButton.tsx | 3 +- .../ArticleDigest/DropdownActions/index.tsx | 5 +- .../ArticleDigest/DropdownDigest/index.tsx | 3 +- .../ArticleDigest/FeatureDigest/index.tsx | 3 +- .../ArticleDigest/FeedDigest/index.tsx | 3 +- .../ArticleDigest/PlainDigest/index.tsx | 3 +- .../ArticleDigest/RelatedDigest/index.tsx | 3 +- .../ArticleDigest/ResponseDigest/index.tsx | 3 +- .../ArticleDigest/SidebarDigest/index.tsx | 3 +- src/components/Avatar/index.tsx | 3 +- .../Button/BlockUser/Dropdown/index.tsx | 7 +- .../Button/BlockUser/Unblock/index.tsx | 2 +- src/components/Button/Bookmark/Subscribe.tsx | 2 +- src/components/Button/Bookmark/index.tsx | 3 +- src/components/Button/Follow/index.tsx | 3 +- .../CollectionEditor/CollectForm.tsx | 9 +- src/components/CollectionEditor/index.tsx | 3 +- .../index.tsx} | 2 +- .../Comment/CancelEditButton/styles.css | 6 + .../index.tsx} | 5 +- .../Comment/CommentToArticle/styles.css | 6 + src/components/Comment/Content/index.tsx | 44 ++++-- .../index.tsx} | 32 ++-- .../DropdownActions/CollapseButton.tsx | 3 +- .../Comment/DropdownActions/DeleteButton.tsx | 3 +- .../Comment/DropdownActions/PinButton.tsx | 3 +- .../Comment/DropdownActions/index.tsx | 3 +- .../Comment/FeedComment/ReplyTo/index.tsx | 40 +++++ .../Comment/FeedComment/ReplyTo/styles.css | 12 ++ src/components/Comment/FeedComment/index.tsx | 122 +++++++++++++++ src/components/Comment/FeedComment/styles.css | 39 +++++ .../Comment/FooterActions/CreatedAt/index.tsx | 82 ++++++++++ .../index.tsx} | 4 +- .../FooterActions/ReplyButton/index.tsx | 26 +++ .../FooterActions/ReplyButton/styles.css | 3 + .../index.tsx} | 4 +- .../Comment/FooterActions/index.tsx | 148 ++++++------------ .../Comment/FooterActions/styles.css | 14 +- src/components/Comment/PinnedLabel.tsx | 21 --- src/components/Comment/PinnedLabel/index.tsx | 41 +++++ src/components/Comment/PinnedLabel/styles.css | 4 + src/components/Comment/ReplyTo.tsx | 33 ---- src/components/Comment/fragments.ts | 2 +- src/components/Comment/index.tsx | 32 +--- src/components/Comment/styles.css | 15 +- src/components/DateTime/styles.css | 5 +- .../DraftDigest/Components/PendingState.tsx | 2 +- .../DraftDigest/FeedDigest/index.tsx | 3 +- .../DraftDigest/SidebarDigest/index.tsx | 3 +- src/components/Dropdown/ArticleList/index.tsx | 3 +- src/components/Dropdown/UserList/index.tsx | 3 +- src/components/Editor/Article/index.tsx | 11 +- src/components/Editor/Comment/index.tsx | 9 +- .../Editor/MentionUserList/index.tsx | 1 + .../FileUploader/ProfileAvatar/index.tsx | 5 +- .../FileUploader/ProfileCover/index.tsx | 5 +- .../FileUploader/SignUpAvatar/index.tsx | 3 +- src/components/Fingerprint/index.tsx | 3 +- src/components/Follow/AuthorPicker/index.tsx | 3 +- src/components/Form/Button/SendCode/index.tsx | 3 +- src/components/Form/CommentForm/index.tsx | 5 +- .../Form/EmailChangeForm/Confirm/index.tsx | 5 +- .../Form/EmailChangeForm/Request/index.tsx | 3 +- src/components/Form/LoginForm/index.tsx | 3 +- .../Form/PasswordChangeForm/Confirm/index.tsx | 3 +- .../Form/PasswordChangeForm/Request/index.tsx | 3 +- .../Form/SignUpForm/Follow/index.tsx | 3 +- src/components/Form/SignUpForm/Init/index.tsx | 5 +- .../Form/SignUpForm/Profile/index.tsx | 3 +- .../Form/UserNameChangeForm/Confirm/index.tsx | 3 +- .../GQL/updates/userFollowerCount.ts | 3 +- .../GQL/updates/viewerFolloweeCount.ts | 3 +- .../updates/viewerUnreadFolloweeArticles.ts | 3 +- .../GQL/updates/viewerUnreadNoticeCount.ts | 3 +- .../GlobalHeader/MeDigest/DropdownMenu.tsx | 3 +- .../GlobalHeader/MeDigest/index.tsx | 3 +- src/components/GlobalHeader/Nav/index.tsx | 3 +- .../DropdownNotices/index.tsx | 3 +- .../GlobalHeader/NotificationButton/index.tsx | 7 +- src/components/GlobalHeader/index.tsx | 3 +- src/components/Modal/PublishModal/index.tsx | 5 +- .../Modal/TagArticleModal/index.tsx | 3 +- src/components/Modal/TagModal/index.tsx | 3 +- src/components/Modal/TermModal/index.tsx | 5 +- .../ArticleMentionedYouNotice.tsx | 3 +- .../ArticleNewAppreciationNotice.tsx | 3 +- .../ArticleNewCollectedNotice.tsx | 3 +- .../NoticeDigest/ArticleNewCommentNotice.tsx | 3 +- .../ArticleNewDownstreamNotice.tsx | 3 +- .../ArticleNewSubscriberNotice.tsx | 3 +- .../NoticeDigest/ArticlePublishedNotice.tsx | 3 +- .../ArticleTagHasBeenAddedNotice.tsx | 3 +- .../ArticleTagHasBeenRemovedNotice.tsx | 3 +- .../CommentMentionedYouNotice.tsx | 3 +- .../NoticeDigest/CommentNewReplyNotice.tsx | 3 +- .../NoticeDigest/CommentNewUpvoteNotice.tsx | 3 +- .../NoticeDigest/CommentPinnedNotice.tsx | 3 +- .../DownstreamArticleArchivedNotice.tsx | 3 +- src/components/NoticeDigest/NoticeComment.tsx | 61 ++++---- src/components/NoticeDigest/NoticeDate.tsx | 3 +- .../OfficialAnnouncementNotice.tsx | 3 +- .../SubscribedArticleNewCommentNotice.tsx | 3 +- .../UpstreamArticleArchivedNotice.tsx | 3 +- .../NoticeDigest/UserNewFollowerNotice.tsx | 3 +- src/components/NoticeDigest/index.tsx | 3 +- .../AutoComplete/ClearHistoryButton.tsx | 3 +- .../SearchBar/AutoComplete/index.tsx | 3 +- .../SetupLikeCoin/Binding/index.tsx | 3 +- .../SetupLikeCoin/Generating/index.tsx | 3 +- src/components/Tag/index.tsx | 3 +- .../AppreciationReceived/index.tsx | 3 +- .../AppreciationSent/index.tsx | 3 +- src/components/UserDigest/BriefDesc/index.tsx | 3 +- src/components/UserDigest/FullDesc/index.tsx | 3 +- src/components/UserDigest/Mini/index.tsx | 3 +- src/components/UserDigest/Plain/index.tsx | 80 ++++++++++ src/components/UserDigest/Plain/styles.css | 16 ++ src/components/UserDigest/index.tsx | 4 +- src/components/UserProfile/index.tsx | 5 +- src/components/UserProfileEditor/index.tsx | 3 +- .../Collection/CollectionList.tsx | 3 +- .../ArticleDetail/Collection/EditButton.tsx | 3 +- .../ArticleDetail/Collection/EditingList.tsx | 3 +- src/views/ArticleDetail/Collection/index.tsx | 3 +- .../ArticleDetail/RelatedArticles/index.tsx | 3 +- .../Responses/FeaturedComments.tsx | 5 +- .../Responses/LatestResponses.tsx | 98 ++++++------ src/views/ArticleDetail/Responses/index.tsx | 5 +- src/views/ArticleDetail/State/index.tsx | 3 +- src/views/ArticleDetail/TagList/index.tsx | 3 +- .../Toolbar/AppreciationButton/index.tsx | 7 +- .../Appreciators/AppreciatorsModal.tsx | 3 +- .../Toolbar/Appreciators/index.tsx | 3 +- src/views/ArticleDetail/Toolbar/index.tsx | 3 +- src/views/ArticleDetail/index.tsx | 7 +- src/views/Authors/index.tsx | 3 +- src/views/Follow/FollowFeed/index.tsx | 3 +- src/views/Follow/index.tsx | 5 +- src/views/Home/Feed/index.tsx | 5 +- src/views/Home/Sidebar/Authors/index.tsx | 3 +- src/views/Home/Sidebar/Tags/index.tsx | 3 +- src/views/Home/Sidebar/Topics/index.tsx | 3 +- src/views/Me/AppreciationTabs/index.tsx | 3 +- src/views/Me/AppreciationsReceived/index.tsx | 3 +- src/views/Me/AppreciationsSent/index.tsx | 3 +- src/views/Me/DraftDetail/Content/index.tsx | 5 +- .../DraftDetail/PublishState/ErrorState.tsx | 3 +- .../DraftDetail/PublishState/PendingState.tsx | 5 +- .../Me/DraftDetail/PublishState/index.tsx | 3 +- .../Me/DraftDetail/Sidebar/AddCover/index.tsx | 3 +- .../Sidebar/AddTags/SearchTags.tsx | 9 +- .../Me/DraftDetail/Sidebar/AddTags/index.tsx | 5 +- .../Sidebar/CollectArticles/index.tsx | 5 +- .../DraftDetail/Sidebar/DraftList/index.tsx | 1 + src/views/Me/DraftDetail/Sidebar/index.tsx | 3 +- src/views/Me/DraftDetail/index.tsx | 3 +- src/views/Me/Notifications/index.tsx | 5 +- .../Me/Settings/Account/WalletSettings.tsx | 3 +- .../Me/Settings/Notification/PushSwitch.tsx | 3 +- .../Notification/SettingsNotification.tsx | 5 +- src/views/OAuth/Authorize/index.tsx | 3 +- src/views/Search/SearchArticles/index.tsx | 1 + src/views/Search/SearchTags/index.tsx | 3 +- src/views/Search/SearchUsers/index.tsx | 3 +- src/views/TagDetail/index.tsx | 5 +- src/views/Tags/index.tsx | 3 +- src/views/User/Articles/UserArticles.tsx | 3 +- .../User/Comments/UserComments/index.tsx | 12 +- tslint.json | 5 + 176 files changed, 1023 insertions(+), 508 deletions(-) rename src/components/Comment/{CancelEditButton.tsx => CancelEditButton/index.tsx} (82%) create mode 100644 src/components/Comment/CancelEditButton/styles.css rename src/components/Comment/{CommentToArticle.tsx => CommentToArticle/index.tsx} (84%) create mode 100644 src/components/Comment/CommentToArticle/styles.css rename src/components/Comment/{DescendantComment.tsx => DescendantComment/index.tsx} (73%) create mode 100644 src/components/Comment/FeedComment/ReplyTo/index.tsx create mode 100644 src/components/Comment/FeedComment/ReplyTo/styles.css create mode 100644 src/components/Comment/FeedComment/index.tsx create mode 100644 src/components/Comment/FeedComment/styles.css create mode 100644 src/components/Comment/FooterActions/CreatedAt/index.tsx rename src/components/Comment/FooterActions/{DownvoteButton.tsx => DownvoteButton/index.tsx} (100%) create mode 100644 src/components/Comment/FooterActions/ReplyButton/index.tsx create mode 100644 src/components/Comment/FooterActions/ReplyButton/styles.css rename src/components/Comment/FooterActions/{UpvoteButton.tsx => UpvoteButton/index.tsx} (100%) delete mode 100644 src/components/Comment/PinnedLabel.tsx create mode 100644 src/components/Comment/PinnedLabel/index.tsx create mode 100644 src/components/Comment/PinnedLabel/styles.css delete mode 100644 src/components/Comment/ReplyTo.tsx create mode 100644 src/components/UserDigest/Plain/index.tsx create mode 100644 src/components/UserDigest/Plain/styles.css diff --git a/src/common/utils/comment.ts b/src/common/utils/comment.ts index a08b5b1fe4..4b67d5bbd5 100644 --- a/src/common/utils/comment.ts +++ b/src/common/utils/comment.ts @@ -1,12 +1,17 @@ import _get from 'lodash/get' -import { Comment } from '~/components/Comment/__generated__/Comment' - /** * Filter out comment that banned/archived and hasn't descendants * * @param comments */ +interface Comment { + state: string + parentComment: { + id: string + } | null +} + export const filterComment = (comment: Comment) => { const isActive = comment.state === 'active' const isDescendant = comment.parentComment && comment.parentComment.id diff --git a/src/components/Analytics/AnalyticsListener.tsx b/src/components/Analytics/AnalyticsListener.tsx index 40483ab344..a1e18fefdb 100644 --- a/src/components/Analytics/AnalyticsListener.tsx +++ b/src/components/Analytics/AnalyticsListener.tsx @@ -3,6 +3,7 @@ import gql from 'graphql-tag' import { ANALYTIC_TYPES, ANALYTICS, GA_TRACKING_ID } from '~/common/enums' import { useEventListener } from '../Hook' + import { AnalyticsUser } from './__generated__/AnalyticsUser' declare global { diff --git a/src/components/ArticleDigest/Actions/ResponseCount.tsx b/src/components/ArticleDigest/Actions/ResponseCount.tsx index 5619037d8e..d79ed808f7 100644 --- a/src/components/ArticleDigest/Actions/ResponseCount.tsx +++ b/src/components/ArticleDigest/Actions/ResponseCount.tsx @@ -7,9 +7,10 @@ import { Icon, TextIcon } from '~/components' import { ANALYTICS_EVENTS, UrlFragments } from '~/common/enums' import { analytics, numAbbr, responseStateIs, toPath } from '~/common/utils' -import { ResponseCountArticle } from './__generated__/ResponseCountArticle' import styles from './styles.css' +import { ResponseCountArticle } from './__generated__/ResponseCountArticle' + const fragments = { article: gql` fragment ResponseCountArticle on Article { diff --git a/src/components/ArticleDigest/Actions/State.tsx b/src/components/ArticleDigest/Actions/State.tsx index de11c78e91..452ac07e91 100644 --- a/src/components/ArticleDigest/Actions/State.tsx +++ b/src/components/ArticleDigest/Actions/State.tsx @@ -6,9 +6,10 @@ import { TextIcon } from '~/components/TextIcon' import { responseStateIs } from '~/common/utils' +import styles from './styles.css' + import { ResponseStateActionsArticle } from './__generated__/ResponseStateActionsArticle' import { StateActionsArticle } from './__generated__/StateActionsArticle' -import styles from './styles.css' const fragments = { article: gql` diff --git a/src/components/ArticleDigest/Actions/index.tsx b/src/components/ArticleDigest/Actions/index.tsx index cade5cba34..aadfa8d3f8 100644 --- a/src/components/ArticleDigest/Actions/index.tsx +++ b/src/components/ArticleDigest/Actions/index.tsx @@ -7,14 +7,15 @@ import { UserDigest } from '~/components/UserDigest' import { responseStateIs } from '~/common/utils' -import { DigestActionsArticle } from './__generated__/DigestActionsArticle' -import { ResponseDigestActionsArticle } from './__generated__/ResponseDigestActionsArticle' import Appreciation from './Appreciation' import ResponseCount from './ResponseCount' import State from './State' import styles from './styles.css' import TopicScore from './TopicScore' +import { DigestActionsArticle } from './__generated__/DigestActionsArticle' +import { ResponseDigestActionsArticle } from './__generated__/ResponseDigestActionsArticle' + type ActionsType = 'feature' | 'feed' | 'sidebar' | 'related' | 'response' export interface ActionsControls { hasAuthor?: boolean diff --git a/src/components/ArticleDigest/DropdownActions/ArchiveButton.tsx b/src/components/ArticleDigest/DropdownActions/ArchiveButton.tsx index 4e8bdf6335..71b28d5bf2 100644 --- a/src/components/ArticleDigest/DropdownActions/ArchiveButton.tsx +++ b/src/components/ArticleDigest/DropdownActions/ArchiveButton.tsx @@ -2,13 +2,14 @@ import gql from 'graphql-tag' import { Icon, TextIcon, Translate } from '~/components' import { useMutation } from '~/components/GQL' -import { ArchiveArticle } from '~/components/GQL/mutations/__generated__/ArchiveArticle' import ARCHIVE_ARTICLE from '~/components/GQL/mutations/archiveArticle' import updateUserArticles from '~/components/GQL/updates/userArticles' +import styles from './styles.css' + +import { ArchiveArticle } from '~/components/GQL/mutations/__generated__/ArchiveArticle' import { ArchiveButtonArticle } from './__generated__/ArchiveButtonArticle' import { FolloweeArchiveButtonArticle } from './__generated__/FolloweeArchiveButtonArticle' -import styles from './styles.css' const fragments = { article: gql` diff --git a/src/components/ArticleDigest/DropdownActions/RemoveTagButton.tsx b/src/components/ArticleDigest/DropdownActions/RemoveTagButton.tsx index bfbd98a0ca..b88c48b9ae 100644 --- a/src/components/ArticleDigest/DropdownActions/RemoveTagButton.tsx +++ b/src/components/ArticleDigest/DropdownActions/RemoveTagButton.tsx @@ -7,9 +7,10 @@ import { useMutation } from '~/components/GQL' import { REFETCH_TAG_DETAIL_ARTICLES } from '~/common/enums' +import styles from './styles.css' + import { DeleteArticleTags } from './__generated__/DeleteArticleTags' import { RemoveTagButtonArticle } from './__generated__/RemoveTagButtonArticle' -import styles from './styles.css' const DELETE_ARTICLE_TAGS = gql` mutation DeleteArticleTags($id: ID!, $articles: [ID!]) { diff --git a/src/components/ArticleDigest/DropdownActions/StickyButton.tsx b/src/components/ArticleDigest/DropdownActions/StickyButton.tsx index dcf50b30be..cd245c9cef 100644 --- a/src/components/ArticleDigest/DropdownActions/StickyButton.tsx +++ b/src/components/ArticleDigest/DropdownActions/StickyButton.tsx @@ -4,9 +4,10 @@ import { Icon, TextIcon, Translate } from '~/components' import { useMutation } from '~/components/GQL' import updateUserArticles from '~/components/GQL/updates/userArticles' +import styles from './styles.css' + import { StickyButtonArticle } from './__generated__/StickyButtonArticle' import { UpdateArticleInfo } from './__generated__/UpdateArticleInfo' -import styles from './styles.css' const UPDATE_ARTICLE_INFO = gql` mutation UpdateArticleInfo($id: ID!, $sticky: Boolean!) { diff --git a/src/components/ArticleDigest/DropdownActions/index.tsx b/src/components/ArticleDigest/DropdownActions/index.tsx index 12030b6538..8380f23c13 100644 --- a/src/components/ArticleDigest/DropdownActions/index.tsx +++ b/src/components/ArticleDigest/DropdownActions/index.tsx @@ -6,13 +6,14 @@ import { ViewerContext } from '~/components/Viewer' import { responseStateIs } from '~/common/utils' -import { DropdownActionsArticle } from './__generated__/DropdownActionsArticle' -import { FolloweeDropdownActionsArticle } from './__generated__/FolloweeDropdownActionsArticle' import ArchiveButton from './ArchiveButton' import RemoveTagButton from './RemoveTagButton' import StickyButton from './StickyButton' import styles from './styles.css' +import { DropdownActionsArticle } from './__generated__/DropdownActionsArticle' +import { FolloweeDropdownActionsArticle } from './__generated__/FolloweeDropdownActionsArticle' + const fragments = { article: gql` fragment DropdownActionsArticle on Article { diff --git a/src/components/ArticleDigest/DropdownDigest/index.tsx b/src/components/ArticleDigest/DropdownDigest/index.tsx index 9f2f8c3a45..ad4a3a196d 100644 --- a/src/components/ArticleDigest/DropdownDigest/index.tsx +++ b/src/components/ArticleDigest/DropdownDigest/index.tsx @@ -9,9 +9,10 @@ import { UserDigest } from '~/components/UserDigest' import { TEXT } from '~/common/enums' import { toPath } from '~/common/utils' -import { DropdownDigestArticle } from './__generated__/DropdownDigestArticle' import styles from './styles.css' +import { DropdownDigestArticle } from './__generated__/DropdownDigestArticle' + interface DropdownDigestProps { article: DropdownDigestArticle hasArrow?: boolean diff --git a/src/components/ArticleDigest/FeatureDigest/index.tsx b/src/components/ArticleDigest/FeatureDigest/index.tsx index b135370f51..41c05afb14 100644 --- a/src/components/ArticleDigest/FeatureDigest/index.tsx +++ b/src/components/ArticleDigest/FeatureDigest/index.tsx @@ -8,9 +8,10 @@ import { toPath } from '~/common/utils' import IMAGE_COVER_FALLBACK from '~/static/images/cover-fallback.jpg?url' import Actions, { ActionsControls } from '../Actions' -import { TodayDigestArticle } from './__generated__/TodayDigestArticle' import styles from './styles.css' +import { TodayDigestArticle } from './__generated__/TodayDigestArticle' + const fragments = { article: gql` fragment TodayDigestArticle on Article { diff --git a/src/components/ArticleDigest/FeedDigest/index.tsx b/src/components/ArticleDigest/FeedDigest/index.tsx index 0e0fe86e21..9c3c4b81bb 100644 --- a/src/components/ArticleDigest/FeedDigest/index.tsx +++ b/src/components/ArticleDigest/FeedDigest/index.tsx @@ -13,9 +13,10 @@ import { responseStateIs, stripHtml, toPath } from '~/common/utils' import Actions, { ActionsControls } from '../Actions' import DropdownActions from '../DropdownActions' +import styles from './styles.css' + import { FeedDigestArticle } from './__generated__/FeedDigestArticle' import { FolloweeFeedDigestArticle } from './__generated__/FolloweeFeedDigestArticle' -import styles from './styles.css' const fragments = { article: gql` diff --git a/src/components/ArticleDigest/PlainDigest/index.tsx b/src/components/ArticleDigest/PlainDigest/index.tsx index 589393b566..11c1c69eaa 100644 --- a/src/components/ArticleDigest/PlainDigest/index.tsx +++ b/src/components/ArticleDigest/PlainDigest/index.tsx @@ -7,9 +7,10 @@ import { Translate } from '~/components' import { TEXT } from '~/common/enums' import { toPath } from '~/common/utils' -import { PlainDigestArticle } from './__generated__/PlainDigestArticle' import styles from './styles.css' +import { PlainDigestArticle } from './__generated__/PlainDigestArticle' + interface PlainDigestProps { article: PlainDigestArticle disabled?: boolean diff --git a/src/components/ArticleDigest/RelatedDigest/index.tsx b/src/components/ArticleDigest/RelatedDigest/index.tsx index b81f736661..c8e5389e9e 100644 --- a/src/components/ArticleDigest/RelatedDigest/index.tsx +++ b/src/components/ArticleDigest/RelatedDigest/index.tsx @@ -13,9 +13,10 @@ import { } from '~/common/utils' import Actions, { ActionsControls } from '../Actions' -import { RelatedDigestArticle } from './__generated__/RelatedDigestArticle' import styles from './styles.css' +import { RelatedDigestArticle } from './__generated__/RelatedDigestArticle' + const fragments = { article: gql` fragment RelatedDigestArticle on Article { diff --git a/src/components/ArticleDigest/ResponseDigest/index.tsx b/src/components/ArticleDigest/ResponseDigest/index.tsx index e811a6f97f..5c94f3a64b 100644 --- a/src/components/ArticleDigest/ResponseDigest/index.tsx +++ b/src/components/ArticleDigest/ResponseDigest/index.tsx @@ -7,9 +7,10 @@ import { UserDigest } from '~/components/UserDigest' import { TEXT } from '~/common/enums' import Actions, { ActionsControls } from '../Actions' -import { ResponseDigestArticle } from './__generated__/ResponseDigestArticle' import styles from './styles.css' +import { ResponseDigestArticle } from './__generated__/ResponseDigestArticle' + const fragments = { response: gql` fragment ResponseDigestArticle on Article { diff --git a/src/components/ArticleDigest/SidebarDigest/index.tsx b/src/components/ArticleDigest/SidebarDigest/index.tsx index f5b5230cf3..06919358cd 100644 --- a/src/components/ArticleDigest/SidebarDigest/index.tsx +++ b/src/components/ArticleDigest/SidebarDigest/index.tsx @@ -8,9 +8,10 @@ import { TEXT, UrlFragments } from '~/common/enums' import { toPath } from '~/common/utils' import Actions, { ActionsControls } from '../Actions' -import { SidebarDigestArticle } from './__generated__/SidebarDigestArticle' import styles from './styles.css' +import { SidebarDigestArticle } from './__generated__/SidebarDigestArticle' + type SidebarDigestProps = { type?: 'collection' article: SidebarDigestArticle diff --git a/src/components/Avatar/index.tsx b/src/components/Avatar/index.tsx index 73651229ed..9458a0e48a 100644 --- a/src/components/Avatar/index.tsx +++ b/src/components/Avatar/index.tsx @@ -3,9 +3,10 @@ import gql from 'graphql-tag' import ICON_AVATAR_DEFAULT from '~/static/icons/avatar-default.svg' -import { AvatarUser } from './__generated__/AvatarUser' import styles from './styles.css' +import { AvatarUser } from './__generated__/AvatarUser' + export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' interface AvatarProps { diff --git a/src/components/Button/BlockUser/Dropdown/index.tsx b/src/components/Button/BlockUser/Dropdown/index.tsx index b479224780..3e8f90c1fe 100644 --- a/src/components/Button/BlockUser/Dropdown/index.tsx +++ b/src/components/Button/BlockUser/Dropdown/index.tsx @@ -2,10 +2,7 @@ import Link from 'next/link' import { Icon, TextIcon, Translate } from '~/components' import { useMutation } from '~/components/GQL' -import { BlockUser } from '~/components/GQL/fragments/__generated__/BlockUser' import userFragments from '~/components/GQL/fragments/user' -import { BlockUser as BlockUserMutate } from '~/components/GQL/mutations/__generated__/BlockUser' -import { UnblockUser } from '~/components/GQL/mutations/__generated__/UnblockUser' import BLOCK_USER from '~/components/GQL/mutations/blockUser' import UNBLOCK_USER from '~/components/GQL/mutations/unblockUser' @@ -13,6 +10,10 @@ import { ADD_TOAST, PATHS, TEXT } from '~/common/enums' import styles from './styles.css' +import { BlockUser } from '~/components/GQL/fragments/__generated__/BlockUser' +import { BlockUser as BlockUserMutate } from '~/components/GQL/mutations/__generated__/BlockUser' +import { UnblockUser } from '~/components/GQL/mutations/__generated__/UnblockUser' + const fragments = { user: userFragments.block } diff --git a/src/components/Button/BlockUser/Unblock/index.tsx b/src/components/Button/BlockUser/Unblock/index.tsx index b32af04e06..e50f847edc 100644 --- a/src/components/Button/BlockUser/Unblock/index.tsx +++ b/src/components/Button/BlockUser/Unblock/index.tsx @@ -3,13 +3,13 @@ import { useContext } from 'react' import { Button, Translate } from '~/components' import { useMutation } from '~/components/GQL' -import { UnblockUser } from '~/components/GQL/mutations/__generated__/UnblockUser' import UNBLOCK_USER from '~/components/GQL/mutations/unblockUser' import { LanguageContext } from '~/components/Language' import { ADD_TOAST, TEXT } from '~/common/enums' import { translate } from '~/common/utils' +import { UnblockUser } from '~/components/GQL/mutations/__generated__/UnblockUser' import { UnblockButtonUser } from './__generated__/UnblockButtonUser' const fragments = { diff --git a/src/components/Button/Bookmark/Subscribe.tsx b/src/components/Button/Bookmark/Subscribe.tsx index 23d4a67f86..8439a8f3dd 100644 --- a/src/components/Button/Bookmark/Subscribe.tsx +++ b/src/components/Button/Bookmark/Subscribe.tsx @@ -3,13 +3,13 @@ import gql from 'graphql-tag' import { Icon } from '~/components' import { useMutation } from '~/components/GQL' -import { ClientPreference } from '~/components/GQL/queries/__generated__/ClientPreference' import CLIENT_PREFERENCE from '~/components/GQL/queries/clientPreference' import { Translate } from '~/components/Language' import { ADD_TOAST, TEXT } from '~/common/enums' import { subscribePush } from '~/common/utils' +import { ClientPreference } from '~/components/GQL/queries/__generated__/ClientPreference' import { BookmarkArticle } from './__generated__/BookmarkArticle' import { SubscribeArticle } from './__generated__/SubscribeArticle' diff --git a/src/components/Button/Bookmark/index.tsx b/src/components/Button/Bookmark/index.tsx index c8c7656554..de55985273 100644 --- a/src/components/Button/Bookmark/index.tsx +++ b/src/components/Button/Bookmark/index.tsx @@ -3,10 +3,11 @@ import { useContext } from 'react' import { ViewerContext } from '~/components/Viewer' -import { BookmarkArticle } from './__generated__/BookmarkArticle' import Subscribe from './Subscribe' import Unsubscribe from './Unsubscribe' +import { BookmarkArticle } from './__generated__/BookmarkArticle' + const fragments = { article: gql` fragment BookmarkArticle on Article { diff --git a/src/components/Button/Follow/index.tsx b/src/components/Button/Follow/index.tsx index 208011fbc3..ec1504bbb0 100644 --- a/src/components/Button/Follow/index.tsx +++ b/src/components/Button/Follow/index.tsx @@ -3,11 +3,12 @@ import { useContext } from 'react' import { ViewerContext } from '~/components/Viewer' -import { FollowButtonUser } from './__generated__/FollowButtonUser' import Follow from './Follow' import FollowState from './FollowState' import Unfollow from './Unfollow' +import { FollowButtonUser } from './__generated__/FollowButtonUser' + const fragments = { user: gql` fragment FollowButtonUser on User { diff --git a/src/components/CollectionEditor/CollectForm.tsx b/src/components/CollectionEditor/CollectForm.tsx index d32790bb22..d809c07f81 100644 --- a/src/components/CollectionEditor/CollectForm.tsx +++ b/src/components/CollectionEditor/CollectForm.tsx @@ -4,10 +4,6 @@ import { useContext, useRef, useState } from 'react' import { useDebounce } from 'use-debounce' import ArticleList from '~/components/Dropdown/ArticleList' -import { - SearchArticles, - SearchArticles_search_edges_node_Article -} from '~/components/GQL/queries/__generated__/SearchArticles' import SEARCH_ARTICLES from '~/components/GQL/queries/searchArticles' import { LanguageContext } from '~/components/Language' import { Dropdown, PopperInstance } from '~/components/Popper' @@ -17,6 +13,11 @@ import { translate } from '~/common/utils' import styles from './styles.css' +import { + SearchArticles, + SearchArticles_search_edges_node_Article +} from '~/components/GQL/queries/__generated__/SearchArticles' + interface Props { onAdd: (article: SearchArticles_search_edges_node_Article) => void } diff --git a/src/components/CollectionEditor/index.tsx b/src/components/CollectionEditor/index.tsx index 55dd030826..a42607cc56 100644 --- a/src/components/CollectionEditor/index.tsx +++ b/src/components/CollectionEditor/index.tsx @@ -9,11 +9,12 @@ import { } from 'react-beautiful-dnd' import { ArticleDigest, Icon } from '~/components' -import { DropdownDigestArticle } from '~/components/ArticleDigest/DropdownDigest/__generated__/DropdownDigestArticle' import CollectForm from './CollectForm' import styles from './styles.css' +import { DropdownDigestArticle } from '~/components/ArticleDigest/DropdownDigest/__generated__/DropdownDigestArticle' + interface State { articles: DropdownDigestArticle[] } diff --git a/src/components/Comment/CancelEditButton.tsx b/src/components/Comment/CancelEditButton/index.tsx similarity index 82% rename from src/components/Comment/CancelEditButton.tsx rename to src/components/Comment/CancelEditButton/index.tsx index dd35bbb853..3139181837 100644 --- a/src/components/Comment/CancelEditButton.tsx +++ b/src/components/Comment/CancelEditButton/index.tsx @@ -5,7 +5,7 @@ import { TEXT } from '~/common/enums' import styles from './styles.css' const CancelEditButton = ({ onClick }: { onClick: () => void }) => ( -
{comment.replyTo && (!comment.parentComment || comment.replyTo.id !== comment.parentComment.id) && ( - + )} setEdit(true)} /> @@ -70,18 +69,11 @@ const DescendantComment = ({ defaultContent={comment.content} /> )} - {!edit && ( - - )} + {!edit && } {!edit && ( )} diff --git a/src/components/Comment/DropdownActions/CollapseButton.tsx b/src/components/Comment/DropdownActions/CollapseButton.tsx index 01c456c83a..eb1b8cdb06 100644 --- a/src/components/Comment/DropdownActions/CollapseButton.tsx +++ b/src/components/Comment/DropdownActions/CollapseButton.tsx @@ -5,9 +5,10 @@ import { useMutation } from '~/components/GQL' import { ADD_TOAST, TEXT } from '~/common/enums' +import styles from './styles.css' + import { CollapseButtonComment } from './__generated__/CollapseButtonComment' import { CollapseComment } from './__generated__/CollapseComment' -import styles from './styles.css' const COLLAPSE_COMMENT = gql` mutation CollapseComment($id: ID!, $state: CommentState!) { diff --git a/src/components/Comment/DropdownActions/DeleteButton.tsx b/src/components/Comment/DropdownActions/DeleteButton.tsx index 96c08ad432..72c812dfc0 100644 --- a/src/components/Comment/DropdownActions/DeleteButton.tsx +++ b/src/components/Comment/DropdownActions/DeleteButton.tsx @@ -5,9 +5,10 @@ import { useMutation } from '~/components/GQL' import { TEXT } from '~/common/enums' -import { DeleteComment } from './__generated__/DeleteComment' import styles from './styles.css' +import { DeleteComment } from './__generated__/DeleteComment' + const DELETE_COMMENT = gql` mutation DeleteComment($id: ID!) { deleteComment(input: { id: $id }) { diff --git a/src/components/Comment/DropdownActions/PinButton.tsx b/src/components/Comment/DropdownActions/PinButton.tsx index be13953507..e4f78fb605 100644 --- a/src/components/Comment/DropdownActions/PinButton.tsx +++ b/src/components/Comment/DropdownActions/PinButton.tsx @@ -5,10 +5,11 @@ import { useMutation } from '~/components/GQL' import { TEXT } from '~/common/enums' +import styles from './styles.css' + import { PinButtonComment } from './__generated__/PinButtonComment' import { PinComment } from './__generated__/PinComment' import { UnpinComment } from './__generated__/UnpinComment' -import styles from './styles.css' const PIN_COMMENT = gql` mutation PinComment($id: ID!) { diff --git a/src/components/Comment/DropdownActions/index.tsx b/src/components/Comment/DropdownActions/index.tsx index d03ed257ef..438c59a140 100644 --- a/src/components/Comment/DropdownActions/index.tsx +++ b/src/components/Comment/DropdownActions/index.tsx @@ -5,11 +5,12 @@ import { Dropdown, Icon, Menu, PopperInstance } from '~/components' import BlockUserButton from '~/components/Button/BlockUser/Dropdown' import { ViewerContext } from '~/components/Viewer' -import { DropdownActionsComment } from './__generated__/DropdownActionsComment' import CollapseButton from './CollapseButton' import DeleteButton from './DeleteButton' import EditButton from './EditButton' import PinButton from './PinButton' + +import { DropdownActionsComment } from './__generated__/DropdownActionsComment' // import ReportButton from './ReportButton' const fragments = { diff --git a/src/components/Comment/FeedComment/ReplyTo/index.tsx b/src/components/Comment/FeedComment/ReplyTo/index.tsx new file mode 100644 index 0000000000..840b3e5363 --- /dev/null +++ b/src/components/Comment/FeedComment/ReplyTo/index.tsx @@ -0,0 +1,40 @@ +import gql from 'graphql-tag' + +import { Translate } from '~/components/Language' +import { UserDigest } from '~/components/UserDigest' + +import { TEXT } from '~/common/enums' + +import styles from './styles.css' + +import { ReplyToUser } from './__generated__/ReplyToUser' + +export interface ReplyToProps { + user: ReplyToUser +} + +const fragments = { + user: gql` + fragment ReplyToUser on User { + id + ...UserDigestPlainUser + } + + ${UserDigest.Plain.fragments.user} + ` +} +const ReplyTo = ({ user }: ReplyToProps) => ( +
+ + + + + + + +
+) + +ReplyTo.fragments = fragments + +export default ReplyTo diff --git a/src/components/Comment/FeedComment/ReplyTo/styles.css b/src/components/Comment/FeedComment/ReplyTo/styles.css new file mode 100644 index 0000000000..b60daf03a5 --- /dev/null +++ b/src/components/Comment/FeedComment/ReplyTo/styles.css @@ -0,0 +1,12 @@ +.container { + margin: var(--spacing-xx-tight) 0 var(--spacing-x-tight) + var(--spacing-x-loose); + + color: var(--color-grey-dark); + font-size: var(--font-size-sm-s); + line-height: 1; +} + +.reply-to { + margin-right: var(--spacing-xx-tight); +} diff --git a/src/components/Comment/FeedComment/index.tsx b/src/components/Comment/FeedComment/index.tsx new file mode 100644 index 0000000000..22f3c57d50 --- /dev/null +++ b/src/components/Comment/FeedComment/index.tsx @@ -0,0 +1,122 @@ +import gql from 'graphql-tag' +import _get from 'lodash/get' +import { useState } from 'react' + +import { AvatarSize, UserDigest } from '~/components' +import CommentForm from '~/components/Form/CommentForm' + +import CancelEditButton from '../CancelEditButton' +import Content from '../Content' +import DropdownActions from '../DropdownActions' +import FooterActions, { FooterActionsControls } from '../FooterActions' +import PinnedLabel from '../PinnedLabel' +import ReplyTo from './ReplyTo' +import styles from './styles.css' + +import { FeedCommentComment } from './__generated__/FeedCommentComment' + +export type CommentControls = { + avatarSize?: Extract + hasUserName?: boolean + hasDropdownActions?: boolean +} & FooterActionsControls + +export type CommentProps = { + comment: FeedCommentComment +} & CommentControls + +const fragments = { + comment: gql` + fragment FeedCommentComment on Comment { + id + author { + id + ...UserDigestMiniUser + } + replyTo { + id + author { + id + ...ReplyToUser + } + } + ...ContentComment + ...PinnedLabelComment + ...DropdownActionsComment + ...FooterActionsComment + } + + ${UserDigest.Mini.fragments.user} + ${ReplyTo.fragments.user} + ${Content.fragments.comment} + ${PinnedLabel.fragments.comment} + ${DropdownActions.fragments.comment} + ${FooterActions.fragments.comment} + ` +} + +export const FeedComment = ({ + comment, + refetch, + avatarSize = 'lg', + hasUserName, + hasDropdownActions = true, + ...actionControls +}: CommentProps) => { + const [edit, setEdit] = useState(false) + const { id, article, replyTo, content, author, parentComment } = comment + const nodeId = parentComment ? `${parentComment.id}-${id}` : id + + return ( + + ) +} + +FeedComment.fragments = fragments + +export default FeedComment diff --git a/src/components/Comment/FeedComment/styles.css b/src/components/Comment/FeedComment/styles.css new file mode 100644 index 0000000000..8ad90c0ff4 --- /dev/null +++ b/src/components/Comment/FeedComment/styles.css @@ -0,0 +1,39 @@ +:root { + --descendant-avatar-size: 1.5rem; +} + +article { + padding: var(--spacing-loose) 0; + + &:target { + animation: commentBackgroundFadeOut 2s ease 1s; + } +} + +header { + @mixin flex-start-space-between; + + & .right { + & :global(* + *) { + margin-left: var(--spacing-x-tight); + } + } +} + +.content-container { + margin-top: var(--spacing-xx-tight); + padding-left: var(--spacing-xx-loose); + + font-size: var(--font-size-md-s); +} + +@keyframes commentBackgroundFadeOut { + 50% { + background: var(--color-green-lighter); + } + + 0, + 100% { + background: none; + } +} diff --git a/src/components/Comment/FooterActions/CreatedAt/index.tsx b/src/components/Comment/FooterActions/CreatedAt/index.tsx new file mode 100644 index 0000000000..e9e3034900 --- /dev/null +++ b/src/components/Comment/FooterActions/CreatedAt/index.tsx @@ -0,0 +1,82 @@ +import gql from 'graphql-tag' +import jump from 'jump.js' +import { useRouter } from 'next/router' + +import { DateTime } from '~/components' + +import { PATHS } from '~/common/enums' +import { toPath } from '~/common/utils' + +import { CreatedAtComment } from './__generated__/CreatedAtComment' + +export interface CreatedAtControls { + hasLink?: boolean +} + +export type CreatedAtProps = { + comment: CreatedAtComment +} & CreatedAtControls + +const fragments = { + comment: gql` + fragment CreatedAtComment on Comment { + id + parentComment { + id + } + article { + id + slug + mediaHash + author { + userName + } + } + createdAt + } + ` +} + +const CreatedAt = ({ comment, hasLink }: CreatedAtProps) => { + const router = useRouter() + + const { parentComment, id } = comment + const { slug, mediaHash, author } = comment.article + const fragment = parentComment?.id ? `${parentComment.id}-${id}` : id + const commentPath = + author.userName && mediaHash + ? toPath({ + page: 'articleDetail', + userName: author.userName, + slug, + mediaHash, + fragment + }) + : { href: '', as: '' } + + /** + * FIXME: https://github.com/ReactTraining/history/issues/503 + */ + if (hasLink) { + return ( + { + if (router.pathname === PATHS.ARTICLE_DETAIL.href) { + jump(`#${fragment}`, { + offset: -64 + }) + } + }} + > + + + ) + } + + return +} + +CreatedAt.fragments = fragments + +export default CreatedAt diff --git a/src/components/Comment/FooterActions/DownvoteButton.tsx b/src/components/Comment/FooterActions/DownvoteButton/index.tsx similarity index 100% rename from src/components/Comment/FooterActions/DownvoteButton.tsx rename to src/components/Comment/FooterActions/DownvoteButton/index.tsx index 11e01e9fbf..b04fc2d603 100644 --- a/src/components/Comment/FooterActions/DownvoteButton.tsx +++ b/src/components/Comment/FooterActions/DownvoteButton/index.tsx @@ -2,8 +2,6 @@ import gql from 'graphql-tag' import { Icon, TextIcon } from '~/components' import { useMutation } from '~/components/GQL' -import { UnvoteComment } from '~/components/GQL/mutations/__generated__/UnvoteComment' -import { VoteComment } from '~/components/GQL/mutations/__generated__/VoteComment' import { UNVOTE_COMMENT, VOTE_COMMENT @@ -11,6 +9,8 @@ import { import { numAbbr } from '~/common/utils' +import { UnvoteComment } from '~/components/GQL/mutations/__generated__/UnvoteComment' +import { VoteComment } from '~/components/GQL/mutations/__generated__/VoteComment' import { DownvoteComment } from './__generated__/DownvoteComment' const fragments = { diff --git a/src/components/Comment/FooterActions/ReplyButton/index.tsx b/src/components/Comment/FooterActions/ReplyButton/index.tsx new file mode 100644 index 0000000000..16ea5748eb --- /dev/null +++ b/src/components/Comment/FooterActions/ReplyButton/index.tsx @@ -0,0 +1,26 @@ +import { Icon } from '~/components' + +import styles from './styles.css' + +const ReplyButton = ({ + onClick, + active, + disabled +}: { + onClick: () => any + active: boolean + disabled: boolean +}) => ( + +) + +export default ReplyButton diff --git a/src/components/Comment/FooterActions/ReplyButton/styles.css b/src/components/Comment/FooterActions/ReplyButton/styles.css new file mode 100644 index 0000000000..70c2aaf289 --- /dev/null +++ b/src/components/Comment/FooterActions/ReplyButton/styles.css @@ -0,0 +1,3 @@ +.active { + color: var(--color-black); +} diff --git a/src/components/Comment/FooterActions/UpvoteButton.tsx b/src/components/Comment/FooterActions/UpvoteButton/index.tsx similarity index 100% rename from src/components/Comment/FooterActions/UpvoteButton.tsx rename to src/components/Comment/FooterActions/UpvoteButton/index.tsx index 1f22b44e12..3387a10b8f 100644 --- a/src/components/Comment/FooterActions/UpvoteButton.tsx +++ b/src/components/Comment/FooterActions/UpvoteButton/index.tsx @@ -2,8 +2,6 @@ import gql from 'graphql-tag' import { Icon, TextIcon } from '~/components' import { useMutation } from '~/components/GQL' -import { UnvoteComment } from '~/components/GQL/mutations/__generated__/UnvoteComment' -import { VoteComment } from '~/components/GQL/mutations/__generated__/VoteComment' import { UNVOTE_COMMENT, VOTE_COMMENT @@ -11,6 +9,8 @@ import { import { numAbbr } from '~/common/utils' +import { UnvoteComment } from '~/components/GQL/mutations/__generated__/UnvoteComment' +import { VoteComment } from '~/components/GQL/mutations/__generated__/VoteComment' import { UpvoteComment } from './__generated__/UpvoteComment' const fragments = { diff --git a/src/components/Comment/FooterActions/index.tsx b/src/components/Comment/FooterActions/index.tsx index ef17939f89..125a5c33c9 100644 --- a/src/components/Comment/FooterActions/index.tsx +++ b/src/components/Comment/FooterActions/index.tsx @@ -1,166 +1,120 @@ import gql from 'graphql-tag' -import jump from 'jump.js' -import { useRouter } from 'next/router' import { useContext, useState } from 'react' -import { DateTime, Icon } from '~/components' import CommentForm from '~/components/Form/CommentForm' import { ModalSwitch } from '~/components/ModalManager' import { ViewerContext } from '~/components/Viewer' -import { PATHS } from '~/common/enums' -import { toPath } from '~/common/utils' - -import { DigestActionsComment } from './__generated__/DigestActionsComment' +import CreatedAt, { CreatedAtControls } from './CreatedAt' import DownvoteButton from './DownvoteButton' +import ReplyButton from './ReplyButton' import styles from './styles.css' import UpvoteButton from './UpvoteButton' -export interface FooterActionsControls { - hasForm?: boolean - hasLink?: boolean + +import { FooterActionsComment } from './__generated__/FooterActionsComment' + +export type FooterActionsControls = { refetch?: boolean - commentCallback?: () => void -} -type FooterActionsProps = { - comment: DigestActionsComment + hasReply?: boolean +} & CreatedAtControls + +export type FooterActionsProps = { + comment: FooterActionsComment } & FooterActionsControls const fragments = { comment: gql` - fragment DigestActionsComment on Comment { + fragment FooterActionsComment on Comment { id - createdAt state article { id - slug - mediaHash author { id - userName isBlocking } } parentComment { id } - replyTo { - id - } ...UpvoteComment ...DownvoteComment + ...CreatedAtComment } + ${UpvoteButton.fragments.comment} ${DownvoteButton.fragments.comment} + ${CreatedAt.fragments.comment} ` } -const FooterActions: React.FC & { - fragments: typeof fragments -} = ({ comment, hasForm, hasLink, refetch, commentCallback }) => { - const router = useRouter() +const FooterActions = ({ + comment, + hasReply, + hasLink, + refetch +}: FooterActionsProps) => { const viewer = useContext(ViewerContext) const [showForm, setShowForm] = useState(false) - const isActive = comment.state === 'active' - const isCollapsed = comment.state === 'collapsed' + + const { id, state, article, parentComment } = comment + const isActive = state === 'active' + const isCollapsed = state === 'collapsed' const isDisabled = (!isActive && !isCollapsed) || viewer.isInactive || - (viewer.isOnboarding && comment.article.author.id !== viewer.id) - - const { parentComment, id } = comment - const { slug, mediaHash, author } = comment.article - const isBlockedByAuthor = author.isBlocking - const fragment = parentComment?.id ? `${parentComment.id}-${id}` : id - const commentPath = - author.userName && mediaHash - ? toPath({ - page: 'articleDetail', - userName: author.userName, - slug, - mediaHash, - fragment - }) - : { href: '', as: '' } - const commentFormCallback = () => { - if (commentCallback) { - commentCallback() - } - setShowForm(false) - } + (viewer.isOnboarding && article.author.id !== viewer.id) return ( <> -