feat: show toast when post is shared by user

packages/shared/src/components/post/PostContent.tsx

@@ -24,7 +24,6 @@ import { cloudinaryPostImageCoverPlaceholder } from '../../lib/image';
 import { withPostById } from './withPostById';
 import { PostClickbaitShield } from './common/PostClickbaitShield';
 import { useSmartTitle } from '../../hooks/post/useSmartTitle';
-import { SharedByUserBanner } from '../SharedByUserBanner';
 import { SmartPrompt } from './smartPrompts/SmartPrompt';
 import { PostTagList } from './tags/PostTagList';
 
@@ -147,7 +146,6 @@ export function PostContentRaw({
           origin={origin}
           post={post}
         >
-          <SharedByUserBanner />
           <div className="my-6">
             <h1
               className="break-words font-bold typo-large-title"

packages/shared/src/components/post/SquadPostContent.tsx

@@ -16,7 +16,6 @@ import type { PostContentProps, PostNavigationProps } from './common';
 import ShareYouTubeContent from './ShareYouTubeContent';
 import { useViewPost } from '../../hooks/post';
 import { withPostById } from './withPostById';
-import { SharedByUserBanner } from '../SharedByUserBanner';
 
 const ContentMap = {
   [PostType.Freeform]: MarkdownPostContent,
@@ -51,7 +50,6 @@ function SquadPostContentRaw({
     source: post?.source,
     user: post?.author,
   });
-
   const navigationProps: PostNavigationProps = {
     post,
     onPreviousPost,
@@ -117,7 +115,6 @@ function SquadPostContentRaw({
           origin={origin}
           post={post}
         >
-          <SharedByUserBanner className="mb-3" />
           <PostSourceInfo
             source={post.source}
             className={classNames('!typo-body', customNavigation && 'mt-6')}

packages/shared/src/components/post/collection/CollectionPostContent.tsx

@@ -21,7 +21,6 @@ import { webappUrl } from '../../../lib/constants';
 import { useViewPost } from '../../../hooks/post/useViewPost';
 import { DateFormat } from '../../utilities';
 import { withPostById } from '../withPostById';
-import { SharedByUserBanner } from '../../SharedByUserBanner';
 import { PostTagList } from '../tags/PostTagList';
 
 const CollectionPostContentRaw = ({
@@ -118,7 +117,6 @@ const CollectionPostContentRaw = ({
           origin={origin}
           post={post}
         >
-          <SharedByUserBanner className="mb-3" />
           <div
             className={classNames(
               'mb-6 flex flex-col gap-6',

packages/shared/src/hooks/useToastNotification.ts

@@ -1,10 +1,14 @@
+import type { ReactNode } from 'react';
 import { useMemo } from 'react';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 
 type AnyFunction = (() => Promise<unknown>) | (() => unknown);
 
 interface UseToastNotification {
-  displayToast: (message: string, params?: NotifyOptionalProps) => void;
+  displayToast: (
+    message: string | ReactNode,
+    params?: NotifyOptionalProps,
+  ) => void;
   dismissToast: () => void;
   subject?: ToastSubject;
 }
@@ -15,7 +19,7 @@ export enum ToastSubject {
 }
 
 export interface ToastNotification {
-  message: string;
+  message: string | ReactNode;
   timer: number;
   subject?: ToastSubject;
   onUndo?: AnyFunction;
@@ -39,7 +43,7 @@ export const useToastNotification = (): UseToastNotification => {
     client.setQueryData(TOAST_NOTIF_KEY, data);
 
   const displayToast = (
-    message: string,
+    message: string | ReactNode,
     { timer = 5000, ...props }: NotifyOptionalProps = {},
   ) => setToastNotification({ message, timer, ...props });
 

packages/webapp/hooks/useSharedByToast.tsx

@@ -0,0 +1,116 @@
+import React, { useEffect, useRef } from 'react';
+import { useRouter } from 'next/router';
+import Link from 'next/link';
+import { useAuthContext } from '@dailydotdev/shared/src/contexts/AuthContext';
+import { useToastNotification } from '@dailydotdev/shared/src/hooks/useToastNotification';
+import { useContentPreferenceStatusQuery } from '@dailydotdev/shared/src/hooks/contentPreference/useContentPreferenceStatusQuery';
+import {
+  ContentPreferenceStatus,
+  ContentPreferenceType,
+} from '@dailydotdev/shared/src/graphql/contentPreference';
+import { useUserShortByIdQuery } from '@dailydotdev/shared/src/hooks/user/useUserShortByIdQuery';
+import { useContentPreference } from '@dailydotdev/shared/src/hooks/contentPreference/useContentPreference';
+import { ButtonSize } from '@dailydotdev/shared/src/components/buttons/common';
+import {
+  ProfileImageSize,
+  ProfilePicture,
+} from '@dailydotdev/shared/src/components/ProfilePicture';
+import { Button } from '@dailydotdev/shared/src/components/buttons/Button';
+import {
+  Typography,
+  TypographyTag,
+  TypographyType,
+} from '@dailydotdev/shared/src/components/typography/Typography';
+
+const useSharedByToast = (): void => {
+  const hasShownToast = useRef(false);
+  const { user: currentUser, isAuthReady } = useAuthContext();
+  const { query } = useRouter();
+  const userId = (query?.userid as string) || null;
+  const isSameUser = !!userId && userId === currentUser?.id;
+  const { data: contentPreference, isPending } =
+    useContentPreferenceStatusQuery({
+      id: userId,
+      entity: ContentPreferenceType.User,
+    });
+  const { data: user } = useUserShortByIdQuery({ id: userId });
+  const { follow } = useContentPreference({ showToastOnSuccess: true });
+  const { displayToast, dismissToast } = useToastNotification();
+  const isDataReady = isAuthReady || (currentUser && !isPending);
+
+  useEffect(() => {
+    if (
+      !user ||
+      isSameUser ||
+      !isDataReady ||
+      hasShownToast.current ||
+      contentPreference?.status === ContentPreferenceStatus.Blocked
+    ) {
+      return undefined;
+    }
+
+    const showFollow =
+      !!currentUser &&
+      contentPreference?.status !== ContentPreferenceStatus.Follow;
+
+    const timeout = setTimeout(() => {
+      hasShownToast.current = true;
+      displayToast(
+        <div className="flex items-center gap-4 ">
+          <Link
+            onClick={() => dismissToast()}
+            className="flex items-center gap-2 "
+            href={`/${user.username}`}
+          >
+            <ProfilePicture user={user} size={ProfileImageSize.Medium} />
+            <span>
+              <Typography
+                type={TypographyType.Subhead}
+                tag={TypographyTag.Span}
+                bold
+              >
+                {user.name}
+              </Typography>{' '}
+              <Typography
+                type={TypographyType.Subhead}
+                tag={TypographyTag.Span}
+              >
+                shared this post
+              </Typography>
+            </span>
+          </Link>
+          {showFollow && (
+            <Button
+              onClick={() => {
+                follow({
+                  entity: ContentPreferenceType.User,
+                  id: user?.id,
+                  entityName: `@${user.username}`,
+                });
+              }}
+              className="bg-background-default text-text-primary"
+              size={ButtonSize.Small}
+            >
+              Follow
+            </Button>
+          )}
+        </div>,
+      );
+      // Set a small timeout to ensure its shown after the page is loaded and won't be cleared by updates.
+    }, 1000);
+
+    return () => clearTimeout(timeout);
+  }, [
+    user,
+    contentPreference?.status,
+    hasShownToast,
+    displayToast,
+    dismissToast,
+    follow,
+    isSameUser,
+    isDataReady,
+    currentUser,
+  ]);
+};
+
+export default useSharedByToast;

packages/webapp/pages/posts/[id]/index.tsx

@@ -41,6 +41,7 @@ import {
   PostSEOSchema,
 } from '../../../components/PostSEOSchema';
 import type { DynamicSeoProps } from '../../../components/common';
+import useSharedByToast from '../../../hooks/useSharedByToast';
 
 const Unauthorized = dynamic(
   () =>
@@ -124,6 +125,7 @@ export const PostPage = ({ id, initialData, error }: Props): ReactElement => {
     [PostType.Share, PostType.Welcome, PostType.Freeform].includes(post?.type),
     featureTheme && 'bg-transparent',
   );
+  useSharedByToast();
 
   useScrollTopOffset(() => globalThis.window, {
     onOverOffset: () => position !== 'fixed' && setPosition('fixed'),