Use query param for preview mode and move toggle to sidebar

Co-authored-by: omBratteng <1681525+omBratteng@users.noreply.github.com>

Author: Copilot

packages/shared/src/features/profile/components/ProfileWidgets/ProfileWidgets.tsx

@@ -4,6 +4,7 @@ import classNames from 'classnames';
 import { useQuery } from '@tanstack/react-query';
 import { startOfTomorrow, subDays, subMonths } from 'date-fns';
 import dynamic from 'next/dynamic';
+import { useRouter } from 'next/router';
 import { useAuthContext } from '../../../../contexts/AuthContext';
 import { ActiveOrRecomendedSquads } from './ActiveOrRecomendedSquads';
 import type { ProfileReadingData, ProfileV2 } from '../../../../graphql/users';
@@ -16,6 +17,7 @@ import { ProfileCompletion } from './ProfileCompletion';
 import { Share } from './Share';
 import { ProfileViewsWidget } from './ProfileViewsWidget';
 import { useProfileCompletionIndicator } from '../../../../hooks/profile/useProfileCompletionIndicator';
+import { ProfilePreviewToggle } from '../../../../components/profile/ProfilePreviewToggle';
 
 const BadgesAndAwards = dynamic(() =>
   import('./BadgesAndAwards').then((mod) => mod.BadgesAndAwards),
@@ -31,10 +33,29 @@ export function ProfileWidgets({
   sources,
   className,
 }: ProfileWidgetsProps): ReactElement {
+  const router = useRouter();
   const { user: loggedUser, tokenRefreshed } = useAuthContext();
   const { showIndicator: showProfileCompletion } =
     useProfileCompletionIndicator();
   const isSameUser = loggedUser?.id === user.id;
+  const isPreviewMode = router.query.preview === 'true';
+
+  const handleTogglePreview = () => {
+    const newQuery = { ...router.query };
+    if (isPreviewMode) {
+      delete newQuery.preview;
+    } else {
+      newQuery.preview = 'true';
+    }
+    router.push(
+      {
+        pathname: router.pathname,
+        query: newQuery,
+      },
+      undefined,
+      { shallow: true },
+    );
+  };
 
   const before = startOfTomorrow();
   const after = subMonths(subDays(before, 2), 5);
@@ -64,6 +85,12 @@ export function ProfileWidgets({
         className,
       )}
     >
+      {isSameUser && (
+        <ProfilePreviewToggle
+          isPreviewMode={isPreviewMode}
+          onToggle={handleTogglePreview}
+        />
+      )}
       {isSameUser && showProfileCompletion && (
         <ProfileCompletion className="hidden laptop:flex" />
       )}

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

@@ -1,5 +1,5 @@
 import type { ReactElement } from 'react';
-import React, { useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 import { AboutMe } from '@dailydotdev/shared/src/features/profile/components/AboutMe';
 import { Activity } from '@dailydotdev/shared/src/features/profile/components/Activity';
 import { useProfile } from '@dailydotdev/shared/src/hooks/profile/useProfile';
@@ -27,7 +27,7 @@ import { Header } from '@dailydotdev/shared/src/components/profile/Header';
 import classNames from 'classnames';
 import { ProfileCompletion } from '@dailydotdev/shared/src/features/profile/components/ProfileWidgets/ProfileCompletion';
 import { Share } from '@dailydotdev/shared/src/features/profile/components/ProfileWidgets/Share';
-import { ProfilePreviewToggle } from '@dailydotdev/shared/src/components/profile/ProfilePreviewToggle';
+import { useRouter } from 'next/router';
 import {
   getLayout as getProfileLayout,
   getProfileSeoDefaults,
@@ -44,15 +44,25 @@ const ProfilePage = ({
   sources,
 }: ProfileLayoutProps): ReactElement => {
   useJoinReferral();
+  const router = useRouter();
   const { status, onUpload, shouldShow } = useUploadCv();
   const { checkHasCompleted } = useActions();
   const hasClosedBanner = useMemo(
     () => checkHasCompleted(ActionType.ClosedProfileBanner),
     [checkHasCompleted],
   );
 
-  const { user, isUserSame } = useProfile(initialUser);
-  const [isPreviewMode, setIsPreviewMode] = useState(false);
+  const { user, isUserSame: isUserSameBase } = useProfile(initialUser);
+
+  // Check if preview mode is enabled via query param
+  const isPreviewMode = router.query.preview === 'true';
+
+  // When in preview mode, act as a visitor (not same user)
+  const isSameUser = useMemo(
+    () => isUserSameBase && !isPreviewMode,
+    [isUserSameBase, isPreviewMode],
+  );
+
   const { ref: stickyRef, progress: stickyProgress } =
     useDynamicHeader<HTMLDivElement>(true);
   const hideSticky = !stickyProgress;
@@ -61,41 +71,29 @@ const ProfilePage = ({
     ...getProfileSeoDefaults(user, {}, noindex),
   };
 
-  const shouldShowBanner = isUserSame && shouldShow && !hasClosedBanner;
-
-  // When in preview mode, hide owner-only elements
-  const showAsVisitor = isUserSame && isPreviewMode;
+  const shouldShowBanner = isSameUser && shouldShow && !hasClosedBanner;
 
   return (
     <div className="rounded-16 border border-t-0 border-border-subtlest-tertiary laptop:border-t">
       <NextSeo {...seo} />
       <Header
         user={user}
-        isSameUser={isUserSame && !showAsVisitor}
+        isSameUser={isSameUser}
         sticky={!hideSticky}
         className={classNames(
           'left-0 top-0 z-3 w-full bg-background-default transition-all duration-75 laptop:hidden',
           !hideSticky ? 'fixed tablet:pl-20' : 'relative',
         )}
       />
-      {isUserSame && !showAsVisitor && (
-        <ProfileCompletion className="laptop:hidden" />
-      )}
+      {isSameUser && <ProfileCompletion className="laptop:hidden" />}
       <div ref={stickyRef} />
       <ProfileHeader
         user={user}
         userStats={userStats}
-        isSameUser={isUserSame && !showAsVisitor}
+        isSameUser={isSameUser}
       />
       <div className="flex flex-col divide-y divide-border-subtlest-tertiary p-6">
-        {isUserSame && !showAsVisitor && (
-          <ProfilePreviewToggle
-            isPreviewMode={isPreviewMode}
-            onToggle={() => setIsPreviewMode(!isPreviewMode)}
-            className="mb-4"
-          />
-        )}
-        {shouldShowBanner && !showAsVisitor && (
+        {shouldShowBanner && (
           <AutofillProfileBanner
             onUpload={onUpload}
             isLoading={status === 'pending'}
@@ -108,7 +106,7 @@ const ProfilePage = ({
         <ProfileUserHotTakes user={user} />
         <ProfileUserWorkspacePhotos user={user} />
         <Activity user={user} />
-        {isUserSame && !showAsVisitor && (
+        {isSameUser && (
           <Share permalink={user?.permalink} className="laptop:hidden" />
         )}
         <div className="py-4 laptop:hidden">