refactor: simplify CAN Detail

prefer parent to do the hard work
HHS · Nov 5, 2024 · 78d387b · 78d387b
1 parent 58bee8f
commit 78d387b
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 23 deletions.
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
@@ -54,13 +54,13 @@ repos:
         # For running trufflehog locally, use the following:
         # entry: bash -c 'trufflehog git file://. --since-commit HEAD --only-verified --fail'
         # For running trufflehog in docker, use the following entry instead:
-        entry: bash -c 'docker run --rm -v "$(pwd):/workdir" -i --rm trufflesecurity/trufflehog:latest git file:///workdir --since-commit HEAD --only-verified --fail'
+        entry: bash -c 'podman run --rm -v "$(pwd):/workdir" -i --rm trufflesecurity/trufflehog:latest git file:///workdir --since-commit HEAD --only-verified --fail'
         language: system
         stages: ["pre-commit", "pre-push"]
   - repo: https://github.com/alessandrojcm/commitlint-pre-commit-hook
     rev: v9.18.0
     hooks:
       - id: commitlint
-        stages: [ commit-msg ]
-        additional_dependencies: [ "@commitlint/config-conventional" ]
+        stages: [commit-msg]
+        additional_dependencies: ["@commitlint/config-conventional"]
         language_version: 22.8.0
diff --git a/frontend/src/pages/cans/detail/Can.jsx b/frontend/src/pages/cans/detail/Can.jsx
@@ -20,20 +20,21 @@ const Can = () => {
     const { data: can, isLoading } = useGetCanByIdQuery(canId);
     const selectedFiscalYear = useSelector((state) => state.canDetail.selectedFiscalYear);
     const fiscalYear = Number(selectedFiscalYear.value);
-
     if (isLoading) {
         return <div> Loading Can... </div>;
     }
     if (!can) {
         return <div>Can not found</div>;
     }
-
+    const { number, description, nick_name: nickname, portfolio } = can;
+    const { division_id: divisionId, team_leaders: teamLeaders, name: portfolioName } = portfolio;
+    const noData = "TBD";
     const subTitle = `${can.nick_name} - ${can.active_period} ${can.active_period > 1 ? "Years" : "Year"}`;
 
     return (
         <App breadCrumbName={can.display_name}>
             <PageHeader
-                title={can.display_name || "TBD"}
+                title={can.display_name || noData}
                 subTitle={subTitle}
             />
 
@@ -47,11 +48,20 @@ const Can = () => {
             <Routes>
                 <Route
                     path=""
-                    element={<CanDetail can={can} />}
+                    element={
+                        <CanDetail
+                            divisionId={divisionId}
+                            description={description || noData}
+                            nickname={nickname || noData}
+                            number={number}
+                            portfolioName={portfolioName || noData}
+                            teamLeaders={teamLeaders || []}
+                        />
+                    }
                 />
                 <Route
                     path="spending"
-                    element={<CanSpending />}
+                    element={<CanSpending can={can} />}
                 />
                 <Route
                     path="funding"

diff --git a/frontend/src/pages/cans/detail/CanDetail.jsx b/frontend/src/pages/cans/detail/CanDetail.jsx
@@ -5,22 +5,26 @@ import TermTag from "../../../components/UI/Term/TermTag";
 import useGetUserFullNameFromId from "../../../hooks/user.hooks";
 
 /**
-    @typedef {import("../../../components/CANs/CANTypes").CAN} CAN
+    @typedef {import("../../../components/Users/UserTypes").SafeUser} SafeUser
 */
 
 /**
  * @typedef {Object} CanDetailProps
- * @property {CAN} can
+ * @property {string} description
+ * @property {string} number
+ * @property {string} nickname
+ * @property {string} portfolioName
+ * @property {SafeUser[]} teamLeaders
+ * @property {number} divisionId
  */
 
 /**
  * @component - The CAN detail page.
  * @param {CanDetailProps} props
  * @returns  {JSX.Element} - The component JSX.
  */
-const CanDetail = ({ can }) => {
-    const canDivisionId = can.portfolio.division_id;
-    const { data: division, isSuccess } = useGetDivisionQuery(canDivisionId);
+const CanDetail = ({ description, number, nickname, portfolioName, teamLeaders, divisionId }) => {
+    const { data: division, isSuccess } = useGetDivisionQuery(divisionId);
     const divisionDirectorFullName = useGetUserFullNameFromId(isSuccess ? division.division_director_id : null);
 
     return (
@@ -35,7 +39,7 @@ const CanDetail = ({ can }) => {
                     <dl>
                         <Term
                             name="Description"
-                            value={can?.description || "TBD"}
+                            value={description}
                         />
                     </dl>
                     <section data-cy="history">
@@ -51,22 +55,22 @@ const CanDetail = ({ can }) => {
                     <dl>
                         <TermTag
                             term="CAN"
-                            description={can.number}
+                            description={number}
                         />
                         <TermTag
                             term="Nickname"
-                            description={can.nick_name}
+                            description={nickname}
                         />
                         <TermTag
                             term="Portfolio"
-                            description={can.portfolio?.name}
+                            description={portfolioName}
                         />
                     </dl>
                     <dl>
-                        <dt className="margin-0 text-base-dark margin-top-3">Team Leaders</dt>
-                        {can.portfolio?.team_leaders &&
-                            can.portfolio?.team_leaders.length > 0 &&
-                            can.portfolio.team_leaders.map((teamLeader) => (
+                        <dt className="margin-0 text-base-dark margin-top-3">Team Leader</dt>
+                        {teamLeaders &&
+                            teamLeaders.length > 0 &&
+                            teamLeaders.map((teamLeader) => (
                                 <dd
                                     key={teamLeader.id}
                                     className="margin-0 margin-top-1 margin-bottom-2"

diff --git a/frontend/src/pages/cans/detail/CanSpending.jsx b/frontend/src/pages/cans/detail/CanSpending.jsx
@@ -1,8 +1,23 @@
-const CanSpending = () => {
+import DebugCode from "../../../components/DebugCode";
+/**
+    @typedef {import("../../../components/CANs/CANTypes").CAN} CAN
+*/
+
+/**
+ * @typedef {Object} CanSpendingProps
+ * @property {CAN} can
+ */
+
+/**
+ * @component - The CAN detail page.
+ * @param {CanSpendingProps} props
+ * @returns  {JSX.Element} - The component JSX.
+ */
+const CanSpending = ({ can }) => {
     return (
         <div>
             <h2>Can Spending</h2>
-            <p>coming soon...</p>
+            <DebugCode data={can} />
         </div>
     );
 };