diff --git a/landing/investor-data.js b/landing/investor-data.js --- a/landing/investor-data.js +++ b/landing/investor-data.js @@ -1,5 +1,7 @@ // @flow +import _keyBy from 'lodash/fp/keyBy'; + import { assetsCacheURLPrefix } from './asset-meta-data'; type Investors = { @@ -10,7 +12,7 @@ +imageURL: string, }; -const investors: $ReadOnlyArray = [ +const investorsData: $ReadOnlyArray = [ { id: 'ashoat_tevosyan', name: 'Ashoat Tevosyan', @@ -629,4 +631,8 @@ }, ]; -export default investors; +const keyedInvestorData: { [key: string]: Investors } = _keyBy('id')( + investorsData, +); + +export { investorsData, keyedInvestorData }; 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 { keyedInvestorData } 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 = keyedInvestorData[investorID]; + if (!foundInvestor) { + return; + } + + 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 { investorsData } 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 investorsData.map(investor => ( + onClickInvestorProfileCard(investor.id)} + /> + )); + }, [onClickInvestorProfileCard]); + return (

Investors

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

-
+
{investors}
);