chore: ability to view profile logged out

Author: VulpoTheDev

apps/web/src/app/(profile)/profile/[handle]/(user)/(characters)/characters/CharacterView.tsx

@@ -53,17 +53,21 @@ export default function CharacterView({
                   nestedItem
                 />
               ))}
-              <FolderView.Item
-                newItem
-                nestedItem
-                onClick={() => {
-                  setParentFolderId(folder.id)
-                  toggleCreateFolderModal()
-                }}
-              />
+              {owner && (
+                <FolderView.Item
+                  newItem
+                  nestedItem
+                  onClick={() => {
+                    setParentFolderId(folder.id)
+                    toggleCreateFolderModal()
+                  }}
+                />
+              )}
             </FolderView.Item>
           ))}
-        <FolderView.Item newItem onClick={toggleCreateFolderModal} />
+        {owner && (
+          <FolderView.Item newItem onClick={toggleCreateFolderModal} />
+        )}
       </FolderView.Shelf>
       <FolderView.Contents>
         <div className="mb-4 flex w-full gap-x-2.5">

apps/web/src/app/(profile)/profile/[handle]/(user)/(characters)/characters/page.tsx

@@ -22,14 +22,14 @@ export default async function Page({ params }: AsyncProps) {
   const { handle } = await params
   const characters = await fetchUserCharacters(handle)
   const { folders, id } = await fetchUser(handle)
-  const self = await fetchUserData()
+  const self = await fetchUserData().catch(() => {})
   return (
     <MarginClamp>
       <CharacterView
         handle={handle}
         characters={characters}
         folders={folders}
-        owner={self.id === id}
+        owner={self ? self.id === id : false}
       />
     </MarginClamp>
   )

apps/web/src/app/(profile)/profile/[handle]/(user)/(overview)/OverviewContent.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import Image from "next/image"
 import React from "react"
 import { Button } from "@mav/ui/components/buttons"
@@ -7,13 +9,14 @@ import { sanitize } from "isomorphic-dompurify"
 import type { DashboardPanel, UserType } from "@/types/users"
 import CommentPanel from "./panels/Comments/CommentPanel"
 import InformationPanel from "./panels/InformationPanel"
+import { useAuth, type User } from "@/app/context/AuthContext"
 
-function renderPanel(panel: DashboardPanel, userData: UserType) {
+function renderPanel(panel: DashboardPanel, userData: UserType, self?: User | null) {
   switch (panel.type) {
     case "customHTML":
       return null
     case "comments":
-      return <CommentPanel comments={userData.comments} user={userData} />
+      return <CommentPanel comments={userData.comments} user={userData} self={self} />
     case "information":
       return <InformationPanel user={userData} />
     default:
@@ -30,6 +33,7 @@ export default function OverviewContent({
   panels: DashboardPanel[]
   userData: UserType
 }) {
+  const { user: self } = useAuth()
   const customHTMLPanel = panels.find((panel) => panel.type === "customHTML")
   const htmlContent = customHTMLPanel?.settings?.html
     ? sanitize(customHTMLPanel.settings.html)
@@ -57,7 +61,7 @@ export default function OverviewContent({
           .filter((panel) => panel.position.row === 2)
           .map((panel, index) => (
             <div key={index} className="p-4">
-              {renderPanel(panel, userData)}
+              {renderPanel(panel, userData, self)}
             </div>
           ))}
       </div>
@@ -66,7 +70,7 @@ export default function OverviewContent({
           .filter((panel) => panel.position.row === 3)
           .map((panel, index) => (
             <div key={index} className="p-4">
-              {renderPanel(panel, userData)}
+              {renderPanel(panel, userData, self)}
             </div>
           ))}
       </div>

apps/web/src/app/(profile)/profile/[handle]/(user)/(overview)/panels/Comments/CommentPanel.tsx

@@ -9,26 +9,33 @@ import { UserComment, UserCommentInput } from "@mav/ui/components/comments"
 import { Group } from "@mav/ui/components/layouts"
 import type { Comments, UserType } from "@/types/users"
 import CommentThread from "./Thread"
+import { type User } from "@/app/context/AuthContext"
+
 
 export default function CommentPanel({
   comments,
-  user
+  user,
+  self
 }: {
   comments: Comments[]
-  user: UserType
+  user: UserType,
+  self: User
 }) {
   return (
     <Group title="Comments" potentialActions={<Button>Filter</Button>}>
-      <div className="my-5">
-        <UserCommentInput
-          postComment={postComment}
-          imgTag={<img />}
-          avatar={user?.avatarUrl || USER_DEFAULT_AVATAR}
-          commentType="user"
-          redirectRoute={`/@${user.handle}`}
-          username={user.handle}
-        />
-      </div>
+      {self && (
+        <div className="my-5">
+          <UserCommentInput
+            postComment={postComment}
+            imgTag={<img />}
+            avatar={user?.avatarUrl || USER_DEFAULT_AVATAR}
+            commentType="user"
+            redirectRoute={`/@${user.handle}`}
+            username={user.handle}
+          />
+        </div>
+      )}
+
 
       <div className="grid gap-y-4">
         {comments.map((comment) => (

apps/web/src/app/(profile)/profile/[handle]/(user)/layout.tsx

@@ -10,8 +10,8 @@ export default async function MainProfileLayout(
 ) {
   const { handle } = await props.params
 
-  const self = await fetchUserData()
-  const user = handle === self.handle ? self : await fetchUser(handle)
+  const self = await fetchUserData().catch(() => {})
+  const user = await fetchUser(handle) 
 
   return (
     <AppLayout>
@@ -23,6 +23,7 @@ export default async function MainProfileLayout(
         followingCount={user.following.length}
         profileBio={user?.bio || ""}
         bannerUrl={user?.bannerUrl || undefined}
+        isOwnProfile={self ? self.handle === user.handle : false}
       />
       {props.children}
     </AppLayout>

apps/web/src/utils/api.ts

@@ -296,6 +296,5 @@ export const postComment = async (
   if (!data) throw new Error("Unable to post comment");
 
   return redirect(redirectRoute);
-
 };