fix(ui): clicking on side links refreshed page and dismissed banner (#…

…621) * feat: remove `id` query; remove additional `s` from `ids` array * fix: correct `s` typo * fix: correct `s` typo; remove commented out code * fix: correct Package Details label
Enterprise-CMCS · Jul 11, 2024 · 69c4d86 · 69c4d86
1 parent b0e6b1a
commit 69c4d86
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 18 deletions.
diff --git a/src/services/ui/src/features/package/admin-changes/index.tsx b/src/services/ui/src/features/package/admin-changes/index.tsx
@@ -137,7 +137,7 @@ export const AdminChanges = () => {
 
   return (
     <DetailsSection
-      id="administrative_package_changess"
+      id="administrative_package_changes"
       title={`Administrative Package Changes (${data?.length})`}
       description="Administrative changes reflect updates to specific data fields. If you have additional questions, please contact the assigned CPOC."
     >

diff --git a/src/services/ui/src/features/package/hooks.tsx b/src/services/ui/src/features/package/hooks.tsx
@@ -1,5 +1,4 @@
 import { useGetItem } from "@/api";
-import { removeUnderscoresAndCapitalize } from "@/utils";
 import { useLayoutEffect, useState } from "react";
 
 export type DetailsSidebarLink = {
@@ -16,19 +15,22 @@ export const useDetailsSidebarLinks = (
 
   useLayoutEffect(() => {
     const ids = [
-      "package_detailss",
-      "package_activity",
-      "administrative_package_changess",
+      { id: "package_details", label: "Package Details" },
+      { id: "package_activity", label: "Package Activity" },
+      {
+        id: "administrative_package_changes",
+        label: "Administrative Package Changes",
+      },
     ];
 
     // Check if dataId is not undefined before proceeding
     if (data?._id) {
       const links = ids
-        .filter((id) => document.getElementById(id) != null)
-        .map((id) => ({
-          id,
-          href: `?id=${encodeURIComponent(dataId)}#${id}`,
-          displayName: removeUnderscoresAndCapitalize(id),
+        .filter(({ id }) => document.getElementById(id) !== null)
+        .map((link) => ({
+          id: link.id,
+          href: `#${link.id}`,
+          displayName: link.label,
         }));
 
       setSideBarLinks(links);

diff --git a/src/services/ui/src/features/package/package-details/index.tsx b/src/services/ui/src/features/package/package-details/index.tsx
@@ -45,15 +45,9 @@ export const PackageDetails: FC<{
   title: string;
 }> = (props) => {
   const { data } = usePackageDetailsCache();
-  // const title = props.title || `${data.authority} Package Details`;
 
-  // andies thoughts:
-  //     abstract out the grid container from the Details Item Grid components
-  //     instead make the items just the "cells in the grid"
-  //     add some sort of logic for the description to conditionally make it take up 2 cells
-  //    ^ if it takes up 2 cells it must be on its own row
   return (
-    <DetailsSection id="package_detailss" title={props.title}>
+    <DetailsSection id="package_details" title={props.title}>
       <div className="flex-col gap-4 max-w-2xl">
         <DetailItemsGrid
           displayItems={[
@@ -63,7 +57,6 @@ export const PackageDetails: FC<{
           ]}
           containerStyle="py-4"
         />
-        {/* <DetailItemsGrid displayItems={descriptionDetails(data)} fullWidth /> */}
         <hr className="my-4" />
         <DetailItemsGrid displayItems={submissionDetails(data)} />
         <AppK />