chore(users): renaming the account now triggers a re-render in the sidebar (#7005)

2026-07-24 21:11:53 +00:00 · 2025-02-20 16:58:45 +01:00
parent 43710783f9
commit b4e1434052
7 changed files with 44 additions and 18 deletions
@@ -1,8 +1,9 @@
 import "@/styles/globals.css";

 import { Metadata, Viewport } from "next";
-import React from "react";
+import React, { use } from "react";

+import { getProfileInfo } from "@/actions/users/users";
 import { SidebarWrap, Toaster } from "@/components/ui";
 import { fontSans } from "@/config/fonts";
 import { siteConfig } from "@/config/site";
@@ -33,6 +34,8 @@ export default function RootLayout({
 }: {
  children: React.ReactNode;
 }) {
+  const user = use(getProfileInfo());
+
  return (
    <html suppressHydrationWarning lang="en">
      <head />
@@ -45,7 +48,7 @@ export default function RootLayout({
      >
        <Providers themeProps={{ attribute: "class", defaultTheme: "dark" }}>
          <div className="flex h-dvh items-center justify-center overflow-hidden">
-            <SidebarWrap />
+            <SidebarWrap user={user} />
            <main className="no-scrollbar mb-auto h-full flex-1 flex-col overflow-y-auto px-6 py-4 xl:px-10">
              {children}
              <Toaster />
@@ -165,7 +165,7 @@ export const AuthForm = ({
                    control={form.control}
                    name="company"
                    type="text"
-                    label="Company Name"
+                    label="Company name"
                    placeholder="Enter your company name"
                    isRequired={false}
                    isInvalid={!!form.formState.errors.company}
@@ -224,11 +224,13 @@ export const FindingDetail = ({
            <h4 className="text-sm font-bold text-gray-500 dark:text-gray-400">
              Tags
            </h4>
-            {Object.entries(resource.tags).map(([key, value]) => (
-              <InfoField key={key} label={key}>
-                {renderValue(value)}
-              </InfoField>
-            ))}
+            <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+              {Object.entries(resource.tags).map(([key, value]) => (
+                <InfoField key={key} label={key}>
+                  {renderValue(value)}
+                </InfoField>
+              ))}
+            </div>
          </div>
        )}

@@ -1,5 +1,6 @@
 export * from "./sidebar";
 export * from "./sidebar-items";
 export * from "./sidebar-wrap";
+export * from "./skeleton-profile";
 export * from "./team-avatar";
 export * from "./user-avatar";
@@ -5,13 +5,13 @@ import { Button, ScrollShadow, Spacer, Tooltip } from "@nextui-org/react";
 import clsx from "clsx";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { useSession } from "next-auth/react";
-import React, { Suspense, useCallback } from "react";
+import React, { useCallback } from "react";
 import { useMediaQuery } from "usehooks-ts";

 import { logOut } from "@/actions/auth";
 import { AddIcon } from "@/components/icons";
 import { useUIStore } from "@/store";
+import { UserProfileProps } from "@/types";

 import {
  ProwlerExtended,
@@ -21,12 +21,11 @@ import { ThemeSwitch } from "../../ThemeSwitch";
 import { CustomButton } from "../custom";
 import Sidebar from "./sidebar";
 import { sectionItemsWithTeams } from "./sidebar-items";
+import { SkeletonProfile } from "./skeleton-profile";
 import { UserAvatar } from "./user-avatar";

-export const SidebarWrap = () => {
+export const SidebarWrap = ({ user }: { user: UserProfileProps }) => {
  const pathname = usePathname();
-  const { data: session } = useSession();
-
  const isCollapsed = useUIStore((state) => state.isSideMenuOpen);
  const openSideMenu = useUIStore((state) => state.openSideMenu);
  const closeSideMenu = useUIStore((state) => state.closeSideMenu);
@@ -78,13 +77,15 @@ export const SidebarWrap = () => {
          </div>
        </Link>
        <Link href={"/users"}>
-          <Suspense fallback={<p>Loading...</p>}>
+          {!user ? (
+            <SkeletonProfile />
+          ) : (
            <UserAvatar
-              userName={session?.user.name ?? "Guest"}
-              position={session?.user.companyName ?? "Company Name"}
+              userName={user?.data?.attributes?.name as string}
+              position={user?.data?.attributes?.company_name as string}
              isCompact={isCompact}
            />
-          </Suspense>
+          )}
        </Link>
        <div
          className={clsx({
@@ -0,0 +1,19 @@
+import { Skeleton } from "@nextui-org/react";
+
+export const SkeletonProfile = () => {
+  return (
+    <div className="flex items-center space-x-2">
+      <Skeleton className="h-10 w-10 rounded-full">
+        <div className="h-10 w-10 rounded-full bg-default-200"></div>
+      </Skeleton>
+      <div className="flex flex-col space-y-1">
+        <Skeleton className="h-4 w-24 rounded-lg">
+          <div className="h-4 bg-default-200"></div>
+        </Skeleton>
+        <Skeleton className="h-3 w-24 rounded-lg">
+          <div className="h-3 bg-default-200"></div>
+        </Skeleton>
+      </div>
+    </div>
+  );
+};
@@ -46,7 +46,7 @@ export const ColumnsUser: ColumnDef<UserProps>[] = [
    header: ({ column }) => (
      <DataTableColumnHeader
        column={column}
-        title={"Company Name"}
+        title={"Company name"}
        param="company_name"
      />
    ),