fix: access NEXT_PUBLIC environment variables directly from the envir…

…onment (#272) (#273)

Co-authored-by: Fran McDade <[email protected]>

src/components/Layout/components/Footer/components/VersionInfo/constants.ts

@@ -1,5 +1,6 @@
 import { ChipProps, TooltipProps } from "@mui/material";
 import { CHIP_PROPS as MUI_CHIP_PROPS } from "../../../../../../styles/common/mui/chip";
+import { VersionInfo } from "./types";
 
 export const CHIP_PROPS: Partial<ChipProps> = {
   color: MUI_CHIP_PROPS.COLOR.DEFAULT,
@@ -28,3 +29,9 @@ export const TOOLTIP_PROPS: Partial<TooltipProps> = {
     },
   },
 };
+
+export const VERSION_INFO: VersionInfo = {
+  buildDate: process.env.NEXT_PUBLIC_BUILD_DATE,
+  gitHash: process.env.NEXT_PUBLIC_GIT_HASH,
+  version: process.env.NEXT_PUBLIC_VERSION,
+};

src/components/Layout/components/Footer/components/VersionInfo/versionInfo.tsx

@@ -1,29 +1,30 @@
 import { Tooltip } from "@mui/material";
 import React from "react";
+import { useCatalog } from "../../../../../../hooks/useCatalog";
 import { BaseComponentProps } from "../../../../../types";
 import { Title } from "./components/Tooltip/components/Title/title";
-import { CHIP_PROPS, TOOLTIP_PROPS } from "./constants";
+import { CHIP_PROPS, TOOLTIP_PROPS, VERSION_INFO } from "./constants";
 import { VersionInfoProps } from "./types";
-
 import { getLabel } from "./utils";
 import { StyledChip } from "./versionInfo.styles";
 
 export const VersionInfo = ({
   chipProps,
   className,
   tooltipProps,
-  versionInfo,
+  versionInfo = VERSION_INFO,
 }: BaseComponentProps & VersionInfoProps): JSX.Element | null => {
+  const catalog = useCatalog();
   return (
     <Tooltip
       {...TOOLTIP_PROPS}
-      title={<Title versionInfo={versionInfo} />}
+      title={<Title versionInfo={{ catalog, ...versionInfo }} />}
       {...tooltipProps}
     >
       <StyledChip
         {...CHIP_PROPS}
         className={className}
-        label={getLabel(versionInfo)}
+        label={getLabel({ catalog, ...versionInfo })}
         {...chipProps}
       />
     </Tooltip>

src/components/Layout/components/Footer/footer.tsx

@@ -2,7 +2,9 @@ import { Toolbar } from "@mui/material";
 import React, { ReactNode } from "react";
 import { Social } from "../../../common/Socials/socials";
 import { ANCHOR_TARGET } from "../../../Links/common/entities";
+import { isNodeBoolean } from "../../../utils";
 import { NavLinkItem } from "../Header/components/Content/components/Navigation/navigation";
+import { VersionInfo } from "./components/VersionInfo/versionInfo";
 import { AppBar, Link, Links, Socials } from "./footer.styles";
 
 export interface FooterProps {
@@ -41,7 +43,7 @@ export const Footer = ({
                 />
               ))}
             {socials && <Socials buttonSize="small" socials={socials} />}
-            {versionInfo}
+            {isNodeBoolean(versionInfo) ? <VersionInfo /> : versionInfo}
           </Links>
         )}
       </Toolbar>

src/components/utils.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+
+/**
+ * Type guard for ReactNode; returns true if the value is a boolean.
+ * @param value - Value to check.
+ * @returns true if the value is a boolean.
+ */
+export function isNodeBoolean(value: ReactNode): value is boolean {
+  return typeof value === "boolean";
+}