From 9fefba354fd5a3dc5bfcdf23e493902d572a82fe Mon Sep 17 00:00:00 2001
From: Abdellah Hariti <haritiabdellah@gmail.com>
Date: Mon, 19 Aug 2024 13:46:41 +0100
Subject: [PATCH 1/5] feat: add header logged in state

---
 src/components/header.tsx | 54 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 54 insertions(+)

diff --git a/src/components/header.tsx b/src/components/header.tsx
index 94358d84c828a..51b0ec778ed67 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -1,5 +1,9 @@
+'use client';
+
+import {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';
 
@@ -17,7 +21,47 @@ 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">
+        <Image
+          src={user.avatarUrl}
+          alt={user.name}
+          width={32}
+          height={32}
+          className="rounded-full h-8 w-8"
+        />
+        <div className="flex flex-col gap-1">
+          <span className="font-medium text-sm">{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-white h-[var(--header-height)] w-full z-50 border-b border-gray fixed top-0">
       {/* define a header-height variable for consumption by other components */}
@@ -58,6 +102,7 @@ export function Header({pathname, searchPlatforms, noSearch}: Props) {
         <div className="hidden lg: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>
+<<<<<<< Updated upstream
           <NavLink href="https://sentry.io/">Sign In</NavLink>
           <NavLink
             href="https://sentry.io/signup/"
@@ -65,6 +110,15 @@ export function Header({pathname, searchPlatforms, noSearch}: Props) {
           >
             Get Started
           </NavLink>
+||||||| Stash base
+          <NavLink href="https://sentry.io/">Sign In</NavLink>
+=======
+          {user ? (
+            <Avatar user={user} />
+          ) : (
+            <NavLink href="https://sentry.io/">Sign In</NavLink>
+          )}
+>>>>>>> Stashed changes
         </div>
         <div className="lg:hidden ml-auto">
           <MobileMenu pathname={pathname} searchPlatforms={searchPlatforms} />

From fb0315dee3101f50c784ef2418551732760dd05a Mon Sep 17 00:00:00 2001
From: Abdellah Hariti <haritiabdellah@gmail.com>
Date: Mon, 19 Aug 2024 13:51:38 +0100
Subject: [PATCH 2/5] fix merge conflict

---
 src/components/header.tsx | 24 ++++++++++--------------
 1 file changed, 10 insertions(+), 14 deletions(-)

diff --git a/src/components/header.tsx b/src/components/header.tsx
index 51b0ec778ed67..abc6894968701 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import {useEffect, useState} from 'react';
+import {Fragment, useEffect, useState} from 'react';
 import {HamburgerMenuIcon} from '@radix-ui/react-icons';
 import Image from 'next/image';
 import Link from 'next/link';
@@ -102,23 +102,19 @@ export function Header({pathname, searchPlatforms, noSearch}: Props) {
         <div className="hidden lg: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>
-<<<<<<< Updated upstream
-          <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>
-||||||| Stash base
-          <NavLink href="https://sentry.io/">Sign In</NavLink>
-=======
           {user ? (
             <Avatar user={user} />
           ) : (
-            <NavLink href="https://sentry.io/">Sign In</NavLink>
+            <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>
           )}
->>>>>>> Stashed changes
         </div>
         <div className="lg:hidden ml-auto">
           <MobileMenu pathname={pathname} searchPlatforms={searchPlatforms} />

From 7e40273abc4df0665fc6c09d0b1eea10b8b3b280 Mon Sep 17 00:00:00 2001
From: Abdellah Hariti <haritiabdellah@gmail.com>
Date: Thu, 22 Aug 2024 12:23:25 +0100
Subject: [PATCH 3/5] use img instead of next/image

---
 src/components/header.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/header.tsx b/src/components/header.tsx
index abc6894968701..4bff1403bb4ff 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -34,7 +34,8 @@ function Avatar({user}: {user: User}) {
   return (
     <Link href="https://sentry.io" className="">
       <div className="flex items-center space-x-2 px-4">
-        <Image
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img
           src={user.avatarUrl}
           alt={user.name}
           width={32}

From 906ed8141f58da580fb2033ed17e851795912974 Mon Sep 17 00:00:00 2001
From: Abdellah Hariti <haritiabdellah@gmail.com>
Date: Wed, 28 Aug 2024 13:41:40 +0100
Subject: [PATCH 4/5] fixes

---
 src/components/header.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/header.tsx b/src/components/header.tsx
index 4bff1403bb4ff..db918dc04bfee 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -42,8 +42,8 @@ function Avatar({user}: {user: User}) {
           height={32}
           className="rounded-full h-8 w-8"
         />
-        <div className="flex flex-col gap-1">
-          <span className="font-medium text-sm">{user.name}</span>
+        <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>

From 4d244d872e00b89203e7b6a999b2bf326620e63b Mon Sep 17 00:00:00 2001
From: Abdellah Hariti <haritiabdellah@gmail.com>
Date: Wed, 28 Aug 2024 14:03:43 +0100
Subject: [PATCH 5/5] fix

---
 src/components/header.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/header.tsx b/src/components/header.tsx
index 09192397873ee..4ce79d8a5d507 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -122,6 +122,7 @@ export function Header({pathname, searchPlatforms, noSearch}: Props) {
               </NavLink>
             </Fragment>
           )}
+          <ThemeToggle />
         </div>
         <div className="lg-xl:hidden ml-auto">
           <MobileMenu pathname={pathname} searchPlatforms={searchPlatforms} />