feat: profile follow button

packages/shared/src/components/contentPreference/FollowButton.tsx

@@ -67,7 +67,7 @@ export const FollowButton = ({
 
   const isLoading = isLoadingFollow || isLoadingNotify;
 
-  if (user.id === userId) {
+  if (!user || user.id === userId) {
     return null;
   }
 

packages/shared/src/components/profile/Header.tsx

@@ -1,15 +1,17 @@
 import React, { CSSProperties, ReactElement, useState } from 'react';
 import classNames from 'classnames';
-import { PublicProfile } from '../../lib/user';
-import { ShareIcon, SettingsIcon } from '../icons';
+import { LoggedUser, PublicProfile } from '../../lib/user';
+import { SettingsIcon, ShareIcon } from '../icons';
 import { Button, ButtonSize, ButtonVariant } from '../buttons/Button';
 import { useShareOrCopyLink } from '../../hooks/useShareOrCopyLink';
 import { ProfileImageSize, ProfilePicture } from '../ProfilePicture';
 import { largeNumberFormat, ReferralCampaignKey } from '../../lib';
 import { ProfileSettingsMenu } from './ProfileSettingsMenu';
 import { RootPortal } from '../tooltips/Portal';
 import { GoBackButton } from '../post/GoBackHeaderMobile';
-import { ViewSize, useViewSize } from '../../hooks';
+import { useViewSize, ViewSize } from '../../hooks';
+import { FollowButton } from '../contentPreference/FollowButton';
+import { ContentPreferenceType } from '../../graphql/contentPreference';
 
 export interface HeaderProps {
   user: PublicProfile;
@@ -34,7 +36,6 @@ export function Header({
   });
   const isMobile = useViewSize(ViewSize.MobileL);
   const [isMenuOpen, setIsMenuOpen] = useState(false);
-
   return (
     <header
       className={classNames('flex h-12 items-center px-4', className)}
@@ -80,6 +81,13 @@ export function Header({
         icon={<ShareIcon />}
         onClick={() => onShareOrCopyLink()}
       />
+      <FollowButton
+        userId={user.id}
+        type={ContentPreferenceType.User}
+        status={(user as LoggedUser).contentPreference?.status}
+        entityName={`@${user.username}`}
+        className="ml-2"
+      />
       {isSameUser && (
         <>
           <Button

packages/shared/src/hooks/profile/useProfile.ts

@@ -1,24 +1,29 @@
-import { useContext } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { getProfile, PublicProfile } from '../../lib/user';
-import AuthContext from '../../contexts/AuthContext';
 import { generateQueryKey, RequestKey, StaleTime } from '../../lib/query';
 import { disabledRefetch } from '../../lib/func';
+import { useAuthContext } from '../../contexts/AuthContext';
 
-export function useProfile(initialUser?: PublicProfile): PublicProfile {
-  const { user: loggedUser } = useContext(AuthContext);
-  const isSameUser = loggedUser?.id === initialUser?.id;
-
+export function useProfile(initialUser?: PublicProfile): {
+  user: PublicProfile;
+  userQueryKey: unknown[];
+} {
+  const { user: loggedUser } = useAuthContext();
+  const userQueryKey = generateQueryKey(RequestKey.Profile, initialUser, {
+    id: loggedUser?.id,
+  });
   const { data: user } = useQuery(
-    generateQueryKey(RequestKey.Profile, initialUser),
+    userQueryKey,
     () => getProfile(initialUser?.id),
     {
       ...disabledRefetch,
       cacheTime: StaleTime.OneHour,
       initialData: initialUser,
-      enabled: !!initialUser && isSameUser,
     },
   );
 
-  return user;
+  return {
+    user,
+    userQueryKey,
+  };
 }

packages/shared/src/hooks/profile/useProfileContentPreferenceMutationSubscription.ts

@@ -0,0 +1,48 @@
+import { RequestKey } from '../../lib/query';
+import { useMutationSubscription } from '../mutationSubscription';
+import {
+  contentPreferenceMutationMatcher,
+  mutationKeyToContentPreferenceStatusMap,
+} from '../contentPreference/types';
+import { PublicProfile } from '../../lib/user';
+
+type UseProfileContentPreferenceMutationSubscriptionProps = {
+  queryKey: unknown[];
+};
+
+type UseProfileContentPreferenceMutationSubscription = ReturnType<
+  typeof useMutationSubscription
+>;
+
+export const useProfileContentPreferenceMutationSubscription = ({
+  queryKey,
+}: UseProfileContentPreferenceMutationSubscriptionProps): UseProfileContentPreferenceMutationSubscription => {
+  return useMutationSubscription({
+    matcher: contentPreferenceMutationMatcher,
+    callback: ({ mutation, queryClient: mutationQueryClient }) => {
+      const currentData = mutationQueryClient.getQueryData(queryKey);
+      const [requestKey] = mutation.options.mutationKey as [
+        RequestKey,
+        ...unknown[],
+      ];
+
+      if (!currentData) {
+        return;
+      }
+
+      const nextStatus = mutationKeyToContentPreferenceStatusMap[requestKey];
+
+      mutationQueryClient.setQueryData<PublicProfile>(queryKey, (data) => {
+        return {
+          ...data,
+          contentPreference: nextStatus
+            ? {
+                ...data.contentPreference,
+                status: nextStatus,
+              }
+            : undefined,
+        };
+      });
+    },
+  });
+};

packages/shared/src/lib/user.ts

@@ -49,6 +49,7 @@ export interface PublicProfile {
   readmeHtml?: string;
   readme?: string;
   companies?: Company[];
+  contentPreference?: ContentPreference;
 }
 
 export enum UserExperienceLevel {

packages/webapp/components/layouts/ProfileLayout/index.tsx

@@ -43,7 +43,7 @@ export default function ProfileLayout({
 }: ProfileLayoutProps): ReactElement {
   const router = useRouter();
   const { isFallback } = router;
-  const user = useProfile(initialUser);
+  const { user } = useProfile(initialUser);
 
   if (!isFallback && !user) {
     return <Custom404 />;

packages/webapp/pages/[userId]/index.tsx

@@ -17,6 +17,7 @@ import { useProfile } from '@dailydotdev/shared/src/hooks/profile/useProfile';
 import { useJoinReferral } from '@dailydotdev/shared/src/hooks';
 import { useReadingStreak } from '@dailydotdev/shared/src/hooks/streaks';
 import { gqlClient } from '@dailydotdev/shared/src/graphql/common';
+import { useProfileContentPreferenceMutationSubscription } from '@dailydotdev/shared/src/hooks/profile/useProfileContentPreferenceMutationSubscription';
 import {
   getLayout as getProfileLayout,
   getStaticPaths as getProfileStaticPaths,
@@ -36,7 +37,10 @@ const ProfilePage = ({
   const { selectedHistoryYear, before, after, yearOptions, fullHistory } =
     useActivityTimeFilter();
 
-  const user = useProfile(initialUser);
+  const { user, userQueryKey } = useProfile(initialUser);
+  useProfileContentPreferenceMutationSubscription({
+    queryKey: userQueryKey,
+  });
 
   const { data: readingHistory, isLoading } = useQuery<ProfileReadingData>(
     generateQueryKey(RequestKey.ReadingStats, user, selectedHistoryYear),