diff --git a/landing/investor-profile-modal.react.js b/landing/investor-profile-modal.react.js --- a/landing/investor-profile-modal.react.js +++ b/landing/investor-profile-modal.react.js @@ -5,14 +5,39 @@ import ModalOverlay from 'lib/components/modal-overlay.react'; import { useModalContext } from 'lib/components/modal-provider.react'; +import investorData from './investor-data'; import css from './investor-profile-modal.css'; +import InvestorProfile from './investor-profile.react'; -function InvestorProfileModal(): React.Node { +type Props = { + +investorID: string, +}; + +function InvestorProfileModal(props: Props): React.Node { + const { investorID } = props; const { popModal } = useModalContext(); + const selectedInvestor = React.useMemo(() => { + const foundInvestor = investorData.find( + investor => investor.id === investorID, + ); + if (foundInvestor) { + return ( + + ); + } + }, [investorID, popModal]); + return ( -
+
{selectedInvestor}
); } diff --git a/landing/investors.react.js b/landing/investors.react.js --- a/landing/investors.react.js +++ b/landing/investors.react.js @@ -2,9 +2,34 @@ import * as React from 'react'; +import { useModalContext } from 'lib/components/modal-provider.react'; + +import investorData from './investor-data'; +import InvestorProfileModal from './investor-profile-modal.react'; +import InvestorProfile from './investor-profile.react'; import css from './investors.css'; function Investors(): React.Node { + const { pushModal } = useModalContext(); + + const onClickInvestorProfileCard = React.useCallback( + (id: string) => pushModal(), + [pushModal], + ); + + const investors = React.useMemo(() => { + return investorData.map(investor => ( + onClickInvestorProfileCard(investor.id)} + /> + )); + }, [onClickInvestorProfileCard]); + return (

Investors

@@ -17,7 +42,7 @@

-
+
{investors}
);