Release Fediverse interaction center to production

src/common/enums/route.ts

@@ -53,6 +53,7 @@ type ROUTE_KEY =
   | 'ME_HISTORY_LIKES_SENT'
   | 'ME_HISTORY_LIKES_RECEIVED'
   | 'ME_NOTIFICATIONS'
+  | 'ME_FEDIVERSE'
   | 'ME_ANALYTICS'
   | 'ME_WALLET'
   | 'ME_WALLET_TRANSACTIONS'
@@ -106,6 +107,7 @@ export const PROTECTED_ROUTES: {
   { key: 'ME_HISTORY_LIKES_SENT', pathname: '/me/history/likes/sent' },
   { key: 'ME_HISTORY_LIKES_RECEIVED', pathname: '/me/history/likes/received' },
   { key: 'ME_NOTIFICATIONS', pathname: '/me/notifications' },
+  { key: 'ME_FEDIVERSE', pathname: '/me/fediverse' },
   { key: 'ME_WALLET', pathname: '/me/wallet' },
   { key: 'ME_WALLET_TRANSACTIONS', pathname: '/me/wallet/transactions' },
   { key: 'ME_ANALYTICS', pathname: '/me/analytics' },

src/common/utils/types/index.ts

@@ -55,54 +55,17 @@ export default gql`
     community_watch
   }
 
-  enum FederationAuthorSettingState {
-    enabled
-    disabled
-  }
-
-  enum FederationArticleSettingState {
-    inherit
-    enabled
-    disabled
-  }
-
-  type UserFederationSetting {
-    userId: ID!
-    state: FederationAuthorSettingState!
-    updatedBy: ID
-  }
-
-  type ArticleFederationSetting {
-    articleId: ID!
-    state: FederationArticleSettingState!
-    updatedBy: ID
-  }
-
-  extend type User {
-    federationSetting: UserFederationSetting
-  }
-
-  extend type Article {
-    federationSetting: ArticleFederationSetting
-  }
-
-  input SetViewerFederationSettingInput {
-    state: FederationAuthorSettingState!
-  }
-
-  input SetArticleFederationSettingInput {
-    id: ID!
-    state: FederationArticleSettingState!
+  # Temporary schema extension for the Fediverse interaction hardening release.
+  # Remove these fields after the matching matters-server schema is deployed.
+  extend type Query {
+    viewerFediverseUnreadCount: Int!
   }
 
-  extend type Mutation {
-    setViewerFederationSetting(
-      input: SetViewerFederationSettingInput!
-    ): UserFederationSetting!
-
-    setArticleFederationSetting(
-      input: SetArticleFederationSettingInput!
-    ): ArticleFederationSetting!
+  extend type FediversePost {
+    liked: Boolean!
+    announced: Boolean!
+    likeActivityId: String
+    announceActivityId: String
   }
 
   enum CommunityWatchRemoveCommentReason {

src/components/Context/Viewer/index.tsx

@@ -60,6 +60,9 @@ const ViewerFragments = {
         followers(input: { first: 0 }) {
           totalCount
         }
+        federationSetting {
+          state
+        }
       }
     `,
     private: gql`

src/components/Layout/GlobalNav/MeMenu/index.tsx

@@ -14,6 +14,7 @@ import IconProfile from '@/public/static/icons/24px/profile.svg'
 import IconSave from '@/public/static/icons/24px/save.svg'
 import IconSettings from '@/public/static/icons/24px/settings.svg'
 import IconWallet from '@/public/static/icons/24px/wallet.svg'
+import IconWorld from '@/public/static/icons/24px/world.svg'
 import {
   COOKIE_TOKEN_NAME,
   COOKIE_USER_GROUP,
@@ -140,6 +141,13 @@ const MeMenu: React.FC = () => {
         is="link"
       />
 
+      <Menu.Item
+        text={<FormattedMessage defaultMessage="Fediverse" id="R6sMIX" />}
+        icon={<Icon icon={IconWorld} size={20} />}
+        href={PATHS.ME_FEDIVERSE}
+        is="link"
+      />
+
       <Menu.Divider />
 
       <Menu.Item

src/components/Layout/GlobalNav/UnreadIcon/Notification.tsx

@@ -1,5 +1,6 @@
 import { useQuery } from '@apollo/client'
 import classNames from 'classnames'
+import gql from 'graphql-tag'
 import { useContext, useEffect } from 'react'
 
 import IconNavNotifications from '@/public/static/icons/24px/nav-notifications.svg'
@@ -15,28 +16,63 @@ interface UnreadIconProps {
   iconSize?: 24 | 26 | 28 | 30
 }
 
+const FEDIVERSE_UNREAD_COUNT = gql`
+  query FediverseUnreadCount {
+    viewerFediverseUnreadCount
+  }
+`
+
 const NotificationUnreadIcon: React.FC<UnreadIconProps> = ({
   active,
   iconSize = 24,
 }) => {
   const viewer = useContext(ViewerContext)
-  const { data, startPolling } = useQuery<UnreadNoticeCountQuery>(
+  const { data, startPolling, stopPolling } = useQuery<UnreadNoticeCountQuery>(
     UNREAD_NOTICE_COUNT,
     {
       errorPolicy: 'ignore',
       fetchPolicy: 'network-only',
       skip: !viewer.isAuthed || typeof window === 'undefined',
     }
   )
+  const federationEnabled = viewer.federationSetting?.state === 'enabled'
+  const {
+    data: federationData,
+    startPolling: startFederationPolling,
+    stopPolling: stopFederationPolling,
+  } = useQuery<{
+    viewerFediverseUnreadCount: number
+  }>(FEDIVERSE_UNREAD_COUNT, {
+    errorPolicy: 'ignore',
+    fetchPolicy: 'network-only',
+    skip:
+      !viewer.isAuthed || !federationEnabled || typeof window === 'undefined',
+  })
 
   // FIXME: https://github.com/apollographql/apollo-client/issues/3775
   useEffect(() => {
     if (viewer.isAuthed) {
       startPolling(1000 * 20) // 20s
+      if (federationEnabled) {
+        startFederationPolling(1000 * 60) // 60s
+      }
+    }
+    return () => {
+      stopPolling()
+      stopFederationPolling()
     }
-  }, [])
+  }, [
+    federationEnabled,
+    startFederationPolling,
+    startPolling,
+    stopFederationPolling,
+    stopPolling,
+    viewer.isAuthed,
+  ])
 
-  const unread = (data?.viewer?.status?.unreadNoticeCount || 0) >= 1
+  const unread =
+    (data?.viewer?.status?.unreadNoticeCount || 0) >= 1 ||
+    (federationData?.viewerFediverseUnreadCount || 0) >= 1
   const iconClasses = classNames({
     [styles.unreadIcon]: true,
     [styles.unread]: unread,

src/components/Layout/Header/MeButton/SideDrawerNav/DrawerContent/MeMenu/index.tsx

@@ -14,6 +14,7 @@ import IconProfile from '@/public/static/icons/24px/profile.svg'
 import IconSave from '@/public/static/icons/24px/save.svg'
 import IconSettings from '@/public/static/icons/24px/settings.svg'
 import IconWallet from '@/public/static/icons/24px/wallet.svg'
+import IconWorld from '@/public/static/icons/24px/world.svg'
 import {
   COOKIE_TOKEN_NAME,
   COOKIE_USER_GROUP,
@@ -109,6 +110,14 @@ const Top: React.FC = () => {
         href={PATHS.ME_ANALYTICS}
         is="link"
       />
+
+      <Menu.Item
+        {...menuItemProps}
+        text={<FormattedMessage defaultMessage="Fediverse" id="R6sMIX" />}
+        icon={<Icon icon={IconWorld} size={24} />}
+        href={PATHS.ME_FEDIVERSE}
+        is="link"
+      />
     </Menu>
   )
 }

src/pages/me/fediverse.tsx

@@ -0,0 +1,10 @@
+import { Protected } from '~/components'
+import Fediverse from '~/views/Me/Fediverse'
+
+const ProtectedFediverse = () => (
+  <Protected>
+    <Fediverse />
+  </Protected>
+)
+
+export default ProtectedFediverse