generify modal props

Author: avivkeller

apps/site/components/Downloads/ReleaseModal/index.tsx

@@ -8,22 +8,25 @@ import { ReleaseOverview } from '#site/components/Downloads/ReleaseOverview';
 import Link from '#site/components/Link';
 import type { ModalProps, NodeRelease } from '#site/types';
 
-const ReleaseModal: FC<ModalProps> = ({ open, closeModal, data }) => {
-  const release = data as NodeRelease;
+const ReleaseModal: FC<ModalProps<NodeRelease>> = ({
+  open,
+  closeModal,
+  data,
+}) => {
   const t = useTranslations();
 
-  const modalHeadingKey = release.codename
+  const modalHeadingKey = data.codename
     ? 'components.releaseModal.title'
     : 'components.releaseModal.titleWithoutCodename';
 
   const modalHeading = t(modalHeadingKey, {
-    version: release.major,
-    codename: release.codename ?? '',
+    version: data.major,
+    codename: data.codename ?? '',
   });
 
   return (
     <Modal open={open} onOpenChange={closeModal}>
-      {release.status === 'End-of-life' && (
+      {data.status === 'End-of-life' && (
         <div className="mb-4">
           <AlertBox
             title={t('components.common.alertBox.warning')}
@@ -41,7 +44,7 @@ const ReleaseModal: FC<ModalProps> = ({ open, closeModal, data }) => {
         </div>
       )}
 
-      {release.isLts && (
+      {data.isLts && (
         <div className="mb-4">
           <AlertBox
             title={t('components.common.alertBox.info')}
@@ -58,11 +61,11 @@ const ReleaseModal: FC<ModalProps> = ({ open, closeModal, data }) => {
       <Title>{modalHeading}</Title>
 
       <Content>
-        <ReleaseOverview release={release} />
+        <ReleaseOverview release={data} />
 
         <h5>{t('components.releaseModal.minorVersions')}</h5>
 
-        <MinorReleasesTable releases={release.minorVersions} />
+        <MinorReleasesTable releases={data.minorVersions} />
       </Content>
     </Modal>
   );

apps/site/components/EOL/EOLModal/index.tsx

@@ -12,8 +12,11 @@ import type {
   UnknownSeverityVulnerability,
 } from '#site/types/vulnerabilities';
 
-const EOLModal: FC<ModalProps> = ({ open, closeModal, data }) => {
-  const { release, vulnerabilities } = data as EOLModalData;
+const EOLModal: FC<ModalProps<EOLModalData>> = ({
+  open,
+  closeModal,
+  data: { release, vulnerabilities },
+}) => {
   const t = useTranslations();
 
   const modalHeading = release.codename

apps/site/components/withLayout.tsx

@@ -21,9 +21,7 @@ const layouts = {
   article: ArticlePageLayout,
 } satisfies Record<Layouts, FC>;
 
-type WithLayoutProps<L = Layouts> = PropsWithChildren<{
-  layout: L;
-}>;
+type WithLayoutProps<L = Layouts> = PropsWithChildren<{ layout: L }>;
 
 const WithLayout: FC<WithLayoutProps<Layouts>> = ({ layout, children }) => {
   const LayoutComponent = layouts[layout] ?? DefaultLayout;

apps/site/providers/modalProvider.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { createContext, useState } from 'react';
-import type { FC, ComponentType, PropsWithChildren } from 'react';
+import type { ComponentType, PropsWithChildren } from 'react';
 
 import type { ModalContextType, ModalProps } from '#site/types/modal';
 
@@ -11,12 +11,13 @@ export const ModalContext = createContext<ModalContextType>({
   closeModal: () => {},
 });
 
-export const ModalProvider: FC<
-  PropsWithChildren<{ Component: ComponentType<ModalProps> }>
-> = ({ Component, children }) => {
-  const [data, setData] = useState<unknown>(null);
+export const ModalProvider = <T,>({
+  Component,
+  children,
+}: PropsWithChildren<{ Component: ComponentType<ModalProps<T>> }>) => {
+  const [data, setData] = useState<T | null>(null);
 
-  const openModal = (newData: unknown) => {
+  const openModal = (newData: T) => {
     setData(newData);
   };
 
@@ -25,7 +26,9 @@ export const ModalProvider: FC<
   };
 
   return (
-    <ModalContext.Provider value={{ data, openModal, closeModal }}>
+    <ModalContext.Provider
+      value={{ data, openModal, closeModal } as ModalContextType<T>}
+    >
       {children}
       {!!data && (
         <Component open={!!data} closeModal={closeModal} data={data} />

apps/site/types/modal.ts

@@ -1,11 +1,11 @@
-export type ModalProps = {
+export type ModalProps<T = unknown> = {
   open: boolean;
   closeModal: () => void;
-  data: unknown;
+  data: T;
 };
 
-export type ModalContextType = {
-  data: unknown;
+export type ModalContextType<T = unknown> = {
+  data: T;
   openModal: (data: unknown) => void;
   closeModal: () => void;
 };