Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 | 4x 6x 6x 6x 6x 6x 6x 6x 6x 6x 4x 5x 5x 5x 5x 5x | import LZ from "lz-string";
import { useMemo } from "react";
import { LoaderFunctionArgs, redirect, useLoaderData } from "react-router";
import { getUserDetails, getUserProfile, OneMacUserProfile, UserDetails } from "@/api";
import { GroupAndDivision, RoleStatusCard, SubNavHeader, UserInformation } from "@/components";
import { useFeatureFlag } from "@/hooks/useFeatureFlag";
import { filterRoleStatus, orderRoleStatus } from "../utils";
type LoaderData = {
userDetails: UserDetails;
userProfile: OneMacUserProfile;
};
export const userProfileLoader = async ({
params,
}: LoaderFunctionArgs): Promise<LoaderData | Response> => {
const { profileId } = params;
try {
const currUserDetails = await getUserDetails();
Iif (
!currUserDetails?.role ||
!["systemadmin", "statesystemadmin", "cmsroleapprover", "helpdesk"].includes(
currUserDetails?.role,
)
) {
return redirect("/");
}
const userEmail = LZ.decompressFromEncodedURIComponent(profileId.replaceAll("_", "+"));
Iif (!userEmail) return redirect("/usermanagement");
const profileUserDetails = await getUserDetails(userEmail);
const profileUserProfile = await getUserProfile(userEmail);
return { userDetails: profileUserDetails, userProfile: profileUserProfile };
} catch (error) {
if (error instanceof Error) {
console.log("Error fetching profile: ", error.message);
} else {
console.log("Unknown error fetching profile: ", error);
}
return redirect("/usermanagement");
}
};
export const UserProfile = () => {
const { userDetails, userProfile } = useLoaderData<LoaderData>();
const isNewUserRoleDisplay = useFeatureFlag("SHOW_USER_ROLE_UPDATE");
const orderedRoleStatus = useMemo(() => {
const filteredRoleStatus = isNewUserRoleDisplay
? userProfile?.stateAccess
: filterRoleStatus(userDetails, userProfile);
return orderRoleStatus(filteredRoleStatus);
}, [userDetails, userProfile, isNewUserRoleDisplay]);
return (
<>
<SubNavHeader>
<h1 className="text-xl font-medium">User Profile</h1>
</SubNavHeader>
<section className="block max-w-screen-xl m-auto px-4 lg:px-8 py-8 gap-10">
<div className="flex flex-col md:flex-row">
<UserInformation
fullName={userDetails?.fullName || "Unknown"}
role={userDetails.role}
email={userDetails?.email}
group={userDetails.group}
division={userDetails.division}
/>
<div className="flex flex-col gap-6 md:basis-1/2">
<div>
{isNewUserRoleDisplay ? (
<h2 className="text-2xl font-bold">My User Roles</h2>
) : (
<h2 className="text-2xl font-bold">
{userDetails.role === "statesubmitter" || userDetails.role === "statesystemadmin"
? "State Access Management"
: "Status"}
</h2>
)}
{orderedRoleStatus?.map((access) => (
<RoleStatusCard role={userDetails.role} access={access} key={access.id} />
))}
</div>
{userDetails.role === "cmsroleapprover" && !isNewUserRoleDisplay && (
<GroupAndDivision
group={userDetails.group}
division={userDetails.division}
role={userDetails.role}
/>
)}
</div>
</div>
</section>
</>
);
};
|