From 064322b3849574a8c544d62511db439c2ca8fc01 Mon Sep 17 00:00:00 2001
From: Chris Bongers <chrisbongers@gmail.com>
Date: Mon, 3 Feb 2025 19:57:18 +0200
Subject: [PATCH] chore: shared post private changes (#4136)

---
 .../src/components/post/SharePostContent.tsx  | 72 ++++++++++++++-----
 packages/webapp/pages/posts/[id]/index.tsx    | 18 +++--
 2 files changed, 70 insertions(+), 20 deletions(-)

diff --git a/packages/shared/src/components/post/SharePostContent.tsx b/packages/shared/src/components/post/SharePostContent.tsx
index a115b376be..d75a902919 100644
--- a/packages/shared/src/components/post/SharePostContent.tsx
+++ b/packages/shared/src/components/post/SharePostContent.tsx
@@ -22,13 +22,14 @@ import { TruncateText } from '../utilities';
 import { LazyImage } from '../LazyImage';
 import { cloudinaryPostImageCoverPlaceholder } from '../../lib/image';
 import { SharePostTitle } from './share/SharePostTitle';
-import { BlockIcon } from '../icons';
+import { BlockIcon, EarthIcon } from '../icons';
 import {
   Typography,
   TypographyColor,
   TypographyType,
 } from '../typography/Typography';
 import { DeletedPostId } from '../../lib/constants';
+import { IconSize } from '../Icon';
 
 export interface CommonSharePostContentProps {
   sharedPost: SharedPost;
@@ -51,6 +52,54 @@ const SharePostContentSkeleton = () => (
   </>
 );
 
+const DeletedPost = () => (
+  <SharedLinkContainer className="mb-5 mt-8">
+    <div className="flex flex-row items-center gap-1 px-5 py-4">
+      <BlockIcon />
+      <Typography
+        className="flex-1"
+        type={TypographyType.Subhead}
+        color={TypographyColor.Secondary}
+      >
+        This post is no longer available. It might have been removed or the link
+        has expired.
+      </Typography>
+    </div>
+  </SharedLinkContainer>
+);
+
+const PrivatePost = ({
+  post,
+  openArticle,
+}: {
+  post: Post;
+  openArticle: (e: React.MouseEvent) => void;
+}) => (
+  <SharedLinkContainer className="mb-5 mt-8">
+    <div className="flex flex-row items-center gap-1 px-5 py-4">
+      <div className="flex size-6 items-center justify-center rounded-full bg-surface-secondary">
+        <EarthIcon size={IconSize.Size16} />
+      </div>
+      <Typography
+        className="flex-1"
+        type={TypographyType.Subhead}
+        color={TypographyColor.Secondary}
+      >
+        This post is in a private squad.
+      </Typography>
+      <ReadArticleButton
+        content={getReadPostButtonText(post)}
+        className="w-fit"
+        href={post.commentsPermalink}
+        variant={ButtonVariant.Secondary}
+        title="Go to post"
+        rel="noopener"
+        {...combinedClicks(openArticle)}
+      />
+    </div>
+  </SharedLinkContainer>
+);
+
 export function CommonSharePostContent({
   sharedPost,
   source,
@@ -71,23 +120,14 @@ export function CommonSharePostContent({
     isSharedPostSquadPost({ sharedPost }) || isInternalReadType(sharedPost);
 
   const isDeleted = sharedPost.id === DeletedPostId;
+  const { private: isPrivate } = sharedPost;
 
   if (isDeleted) {
-    return (
-      <SharedLinkContainer summary={sharedPost.summary} className="mb-5 mt-8">
-        <div className="flex flex-row items-center gap-1 px-5 py-4">
-          <BlockIcon />
-          <Typography
-            className="flex-1"
-            type={TypographyType.Subhead}
-            color={TypographyColor.Secondary}
-          >
-            This post is no longer available. It might have been removed or the
-            link has expired.
-          </Typography>
-        </div>
-      </SharedLinkContainer>
-    );
+    return <DeletedPost />;
+  }
+
+  if (isPrivate) {
+    return <PrivatePost post={sharedPost} openArticle={openArticle} />;
   }
 
   return (
diff --git a/packages/webapp/pages/posts/[id]/index.tsx b/packages/webapp/pages/posts/[id]/index.tsx
index bbcfc9da55..96f10470f8 100644
--- a/packages/webapp/pages/posts/[id]/index.tsx
+++ b/packages/webapp/pages/posts/[id]/index.tsx
@@ -24,7 +24,6 @@ import { usePrivateSourceJoin } from '@dailydotdev/shared/src/hooks/source/usePr
 import { ApiError, gqlClient } from '@dailydotdev/shared/src/graphql/common';
 import PostLoadingSkeleton from '@dailydotdev/shared/src/components/post/PostLoadingSkeleton';
 import classNames from 'classnames';
-
 import { useOnboarding } from '@dailydotdev/shared/src/hooks/auth/useOnboarding';
 import {
   useJoinReferral,
@@ -43,6 +42,12 @@ import {
 } from '../../../components/PostSEOSchema';
 import type { DynamicSeoProps } from '../../../components/common';
 
+const Unauthorized = dynamic(
+  () =>
+    import(
+      /* webpackChunkName: "unauthorized" */ '@dailydotdev/shared/src/components/errors/Unauthorized'
+    ),
+);
 const Custom404 = dynamic(
   () => import(/* webpackChunkName: "404" */ '../../404'),
 );
@@ -74,6 +79,7 @@ const PostAuthBanner = dynamic(() =>
 export interface Props extends DynamicSeoProps {
   id: string;
   initialData?: PostData;
+  error?: ApiError;
 }
 
 const CONTENT_MAP: Record<PostType, typeof PostContent> = {
@@ -97,7 +103,7 @@ export const seoTitle = (post: Post): string | undefined => {
   return post?.title;
 };
 
-export const PostPage = ({ id, initialData }: Props): ReactElement => {
+export const PostPage = ({ id, initialData, error }: Props): ReactElement => {
   useJoinReferral();
   const [position, setPosition] =
     useState<CSSProperties['position']>('relative');
@@ -140,6 +146,9 @@ export const PostPage = ({ id, initialData }: Props): ReactElement => {
   const Content = CONTENT_MAP[post?.type];
 
   if (!Content || isError) {
+    if (error === ApiError.Forbidden) {
+      return <Unauthorized />;
+    }
     return <Custom404 />;
   }
 
@@ -220,12 +229,13 @@ export async function getStaticProps({
     };
   } catch (err) {
     const clientError = err as ClientError;
+    const errorCode = clientError?.response?.errors?.[0]?.extensions?.code;
     const errors = Object.values(ApiError);
-    if (errors.includes(clientError?.response?.errors?.[0]?.extensions?.code)) {
+    if (errors.includes(errorCode)) {
       const { postId } = clientError.response.errors[0].extensions;
 
       return {
-        props: { id: postId || id },
+        props: { id: postId || id, error: errorCode },
         revalidate: 60,
       };
     }