fix: resolved build errors and implemented signout button (#4502)

space/components/account/user-logged-in.tsx

@@ -1,6 +1,8 @@
 "use client";
 
 import Image from "next/image";
+// components
+import { UserAvatar } from "@/components/issues/navbar/user-avatar";
 // hooks
 import { useUser } from "@/hooks/store";
 // assets
@@ -18,19 +20,7 @@ export const UserLoggedIn = () => {
         <div>
           <Image src={PlaneLogo} alt="User already logged in" />
         </div>
-        <div className="flex items-center gap-2 rounded border border-custom-border-200 p-2">
+        <UserAvatar />
-          {user.avatar && user.avatar !== "" ? (
-            <div className="h-5 w-5 rounded-full">
-              {/* eslint-disable-next-line @next/next/no-img-element */}
-              <img src={user.avatar} alt={user.display_name ?? ""} className="rounded-full" />
-            </div>
-          ) : (
-            <div className="grid h-5 w-5 place-items-center rounded-full bg-custom-background-80 text-[10px] capitalize">
-              {(user.display_name ?? "U")[0]}
-            </div>
-          )}
-          <h6 className="text-xs font-medium">{user.display_name}</h6>
-        </div>
       </div>
 
       <div className="grid h-full w-full place-items-center p-6">

space/components/issues/navbar/controls.tsx

@@ -2,18 +2,16 @@
 
 import { useEffect, FC } from "react";
 import { observer } from "mobx-react-lite";
-import Link from "next/link";
+import { useRouter, useSearchParams } from "next/navigation";
-import { useRouter, useSearchParams, usePathname } from "next/navigation";
-// ui
-import { Avatar, Button } from "@plane/ui";
 // components
 import { IssueFiltersDropdown } from "@/components/issues/filters";
 import { NavbarIssueBoardView } from "@/components/issues/navbar/issue-board-view";
 import { NavbarTheme } from "@/components/issues/navbar/theme";
+import { UserAvatar } from "@/components/issues/navbar/user-avatar";
 // helpers
 import { queryParamGenerator } from "@/helpers/query-param-generator";
 // hooks
-import { useProject, useUser, useIssueFilter, useIssueDetails } from "@/hooks/store";
+import { useProject, useIssueFilter, useIssueDetails } from "@/hooks/store";
 // types
 import { TIssueLayout } from "@/types/issue";
 
@@ -27,7 +25,6 @@ export const NavbarControls: FC<NavbarControlsProps> = observer((props) => {
   const { workspaceSlug, projectId } = props;
   // router
   const router = useRouter();
-  const pathName = usePathname();
   const searchParams = useSearchParams();
   // query params
   const board = searchParams.get("board") || undefined;
@@ -38,7 +35,6 @@ export const NavbarControls: FC<NavbarControlsProps> = observer((props) => {
   // hooks
   const { issueFilters, isIssueFiltersUpdated, initIssueFilters } = useIssueFilter();
   const { settings } = useProject();
-  const { data: user } = useUser();
   const { setPeekId } = useIssueDetails();
   // derived values
   const activeLayout = issueFilters?.display_filters?.layout || undefined;
@@ -115,20 +111,7 @@ export const NavbarControls: FC<NavbarControlsProps> = observer((props) => {
         <NavbarTheme />
       </div>
 
-      {user?.id ? (
+      <UserAvatar />
-        <div className="flex items-center gap-2 rounded border border-custom-border-200 p-2">
-          <Avatar name={user?.display_name} src={user?.avatar ?? undefined} shape="square" size="sm" />
-          <h6 className="text-xs font-medium">
-            {user?.display_name || `${user?.first_name} ${user?.first_name}` || user?.email || "User"}
-          </h6>
-        </div>
-      ) : (
-        <div className="flex-shrink-0">
-          <Link href={`/?next_path=${pathName}`}>
-            <Button variant="outline-primary">Sign in</Button>
-          </Link>
-        </div>
-      )}
     </>
   );
 });

space/components/issues/navbar/user-avatar.tsx

@@ -0,0 +1,124 @@
+"use client";
+
+import { FC, Fragment, useEffect, useState } from "react";
+import { observer } from "mobx-react-lite";
+import Link from "next/link";
+import { usePathname, useSearchParams } from "next/navigation";
+import { usePopper } from "react-popper";
+import { LogOut } from "lucide-react";
+import { Popover, Transition } from "@headlessui/react";
+import { Avatar, Button } from "@plane/ui";
+// helpers
+import { API_BASE_URL } from "@/helpers/common.helper";
+import { queryParamGenerator } from "@/helpers/query-param-generator";
+// hooks
+import { useUser } from "@/hooks/store";
+// services
+import { AuthService } from "@/services/auth.service";
+
+const authService = new AuthService();
+
+export const UserAvatar: FC = observer(() => {
+  const pathName = usePathname();
+  const searchParams = useSearchParams();
+  // query params
+  const board = searchParams.get("board") || undefined;
+  const labels = searchParams.get("labels") || undefined;
+  const state = searchParams.get("state") || undefined;
+  const priority = searchParams.get("priority") || undefined;
+  const peekId = searchParams.get("peekId") || undefined;
+  // hooks
+  const { data: currentUser, signOut } = useUser();
+  // states
+  const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (csrfToken === undefined)
+      authService.requestCSRFToken().then((data) => data?.csrf_token && setCsrfToken(data.csrf_token));
+  }, [csrfToken]);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: "bottom-end",
+    modifiers: [
+      {
+        name: "offset",
+        options: {
+          offset: [0, 40],
+        },
+      },
+    ],
+  });
+
+  // derived values
+  const { queryParam } = queryParamGenerator({ peekId, board, state, priority, labels });
+
+  return (
+    <div className="relative mr-2">
+      {currentUser?.id ? (
+        <div>
+          <Popover as="div">
+            <Popover.Button as={Fragment}>
+              <button
+                ref={setReferenceElement}
+                className="flex items-center gap-2 rounded border border-custom-border-200 p-2"
+              >
+                <Avatar
+                  name={currentUser?.display_name}
+                  src={currentUser?.avatar ?? undefined}
+                  shape="square"
+                  size="sm"
+                  showTooltip={false}
+                />
+                <h6 className="text-xs font-medium">
+                  {currentUser?.display_name ||
+                    `${currentUser?.first_name} ${currentUser?.first_name}` ||
+                    currentUser?.email ||
+                    "User"}
+                </h6>
+              </button>
+            </Popover.Button>
+            <Transition
+              as={Fragment}
+              enter="transition ease-out duration-200"
+              enterFrom="opacity-0 translate-y-1"
+              enterTo="opacity-100 translate-y-0"
+              leave="transition ease-in duration-150"
+              leaveFrom="opacity-100 translate-y-0"
+              leaveTo="opacity-0 translate-y-1"
+            >
+              <Popover.Panel>
+                <div
+                  className="z-10 overflow-hidden rounded border border-custom-border-200 bg-custom-background-100 shadow-custom-shadow-rg p-1"
+                  ref={setPopperElement}
+                  style={styles.popper}
+                  {...attributes.popper}
+                >
+                  {csrfToken && (
+                    <form method="POST" action={`${API_BASE_URL}/auth/spaces/sign-out/`} onSubmit={signOut}>
+                      <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
+                      <button
+                        type="submit"
+                        className="flex items-center gap-2 rounded p-2 whitespace-nowrap hover:bg-custom-background-80 text-sm min-w-36 cursor-pointer"
+                      >
+                        <LogOut size={12} className="flex-shrink-0 text-red-500" />
+                        <div>Sign out</div>
+                      </button>
+                    </form>
+                  )}
+                </div>
+              </Popover.Panel>
+            </Transition>
+          </Popover>
+        </div>
+      ) : (
+        <div className="flex-shrink-0">
+          <Link href={`/?next_path=${pathName}?${queryParam}`}>
+            <Button variant="outline-primary">Sign in</Button>
+          </Link>
+        </div>
+      )}
+    </div>
+  );
+});

space/components/issues/peek-overview/comment/comment-reactions.tsx

@@ -34,7 +34,7 @@ export const CommentReactions: React.FC<Props> = observer((props) => {
   const commentReactions = peekId ? details[peekId].comments.find((c) => c.id === commentId)?.comment_reactions : [];
   const groupedReactions = peekId ? groupReactions(commentReactions ?? [], "reaction") : {};
 
-  const userReactions = commentReactions?.filter((r) => r.actor_detail.id === user?.id);
+  const userReactions = commentReactions?.filter((r) => r?.actor_detail?.id === user?.id);
 
   const handleAddReaction = (reactionHex: string) => {
     if (!workspaceSlug || !projectId || !peekId) return;
@@ -79,7 +79,7 @@ export const CommentReactions: React.FC<Props> = observer((props) => {
               tooltipContent={
                 <div>
                   {reactions
-                    .map((r) => r.actor_detail.display_name)
+                    .map((r) => r?.actor_detail?.display_name)
                     .splice(0, REACTIONS_LIMIT)
                     .join(", ")}
                   {reactions.length > REACTIONS_LIMIT && " and " + (reactions.length - REACTIONS_LIMIT) + " more"}
@@ -93,7 +93,7 @@ export const CommentReactions: React.FC<Props> = observer((props) => {
                   else router.push(`/?next_path=${pathName}?${queryParam}`);
                 }}
                 className={`flex h-full items-center gap-1 rounded-md px-2 py-1 text-sm text-custom-text-100 ${
-                  commentReactions?.some((r) => r.actor_detail.id === user?.id && r.reaction === reaction)
+                  commentReactions?.some((r) => r?.actor_detail?.id === user?.id && r.reaction === reaction)
                     ? "bg-custom-primary-100/10"
                     : "bg-custom-background-80"
                 }`}
@@ -101,7 +101,7 @@ export const CommentReactions: React.FC<Props> = observer((props) => {
                 <span>{renderEmoji(reaction)}</span>
                 <span
                   className={
-                    commentReactions?.some((r) => r.actor_detail.id === user?.id && r.reaction === reaction)
+                    commentReactions?.some((r) => r?.actor_detail?.id === user?.id && r.reaction === reaction)
                       ? "text-custom-primary-100"
                       : ""
                   }

space/store/user.store.ts

@@ -179,7 +179,6 @@ export class UserStore implements IUserStore {
    * @returns {Promise<void>}
    */
   signOut = async (): Promise<void> => {
-    // await this.authService.signOut(API_BASE_URL);
+    this.store.reset();
-    // this.store.resetOnSignOut();
   };
 }