From f4b5bca6f08bfa391a6dad369b0b58208f86a4bd Mon Sep 17 00:00:00 2001
From: abdellah hariti <haritiabdellah@gmail.com>
Date: Wed, 28 Aug 2024 14:34:56 +0100
Subject: [PATCH] feat: header logged in state (#11124)

* feat: add header logged in state

* fix merge conflict

* use img instead of next/image

* fixe conflicts
---
 src/components/header.tsx | 65 ++++++++++++++++++++++++++++++++++-----
 1 file changed, 58 insertions(+), 7 deletions(-)

diff --git a/src/components/header.tsx b/src/components/header.tsx
index a8084b735aab5..4ce79d8a5d507 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -1,5 +1,9 @@
+'use client';
+
+import {Fragment, useEffect, useState} from 'react';
 import {HamburgerMenuIcon} from '@radix-ui/react-icons';
 import Image from 'next/image';
+import Link from 'next/link';
 
 import SentryLogoSVG from 'sentry-docs/logos/sentry-logo-dark.svg';
 
@@ -18,7 +22,48 @@ type Props = {
   noSearch?: boolean;
 };
 
+type User = {
+  avatarUrl: string;
+  email: string;
+  id: string;
+  isActive: boolean;
+  name: string;
+  username: string;
+};
+
+function Avatar({user}: {user: User}) {
+  return (
+    <Link href="https://sentry.io" className="">
+      <div className="flex items-center space-x-2 px-4">
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img
+          src={user.avatarUrl}
+          alt={user.name}
+          width={32}
+          height={32}
+          className="rounded-full h-8 w-8"
+        />
+        <div className="flex flex-col">
+          <span className="font-medium text-sm text-primary">{user.name}</span>
+          <span className="text-xs text-gray-500">{user.username}</span>
+        </div>
+      </div>
+    </Link>
+  );
+}
+
 export function Header({pathname, searchPlatforms, noSearch}: Props) {
+  // this should work on production (given the request is not blocked by ad blockers),
+  // but it doesn't on dev or previews because of CORS
+  // I implemeted a workaround in the form of an api route while building this
+  const [user, setUser] = useState<User | null>(null);
+  useEffect(() => {
+    fetch('https://sentry.io/api/0/users/me/', {credentials: 'include'})
+      .then(r => r.json())
+      .then(setUser)
+      // eslint-disable-next-line no-console
+      .catch(console.error);
+  }, []);
   return (
     <header className="bg-[var(--gray-1)] h-[var(--header-height)] w-full z-50 border-b border-[var(--gray-a3)] fixed top-0">
       {/* define a header-height variable for consumption by other components */}
@@ -64,13 +109,19 @@ export function Header({pathname, searchPlatforms, noSearch}: Props) {
         <div className="hidden lg-xl:flex justify-end flex-1 space-x-2 items-center">
           <NavLink href="https://sentry.io/changelog/">Changelog</NavLink>
           <NavLink href="https://try.sentry-demo.com/demo/start/">Sandbox</NavLink>
-          <NavLink href="https://sentry.io/">Sign In</NavLink>
-          <NavLink
-            href="https://sentry.io/signup/"
-            className="transition-all duration-300 ease-in-out hover:bg-gradient-to-r hover:from-[#fa7faa] hover:via-[#ff9691] hover:to-[#ffb287]"
-          >
-            Get Started
-          </NavLink>
+          {user ? (
+            <Avatar user={user} />
+          ) : (
+            <Fragment>
+              <NavLink href="https://sentry.io/">Sign In</NavLink>
+              <NavLink
+                href="https://sentry.io/signup/"
+                className="transition-all duration-300 ease-in-out hover:bg-gradient-to-r hover:from-[#fa7faa] hover:via-[#ff9691] hover:to-[#ffb287]"
+              >
+                Get Started
+              </NavLink>
+            </Fragment>
+          )}
           <ThemeToggle />
         </div>
         <div className="lg-xl:hidden ml-auto">