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<Investors> = [ +const investorsData: $ReadOnlyArray<Investors> = [ { 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 ( + <InvestorProfile + name={foundInvestor.name} + description={foundInvestor.description} + involvement={foundInvestor.involvement} + imageURL={foundInvestor.imageURL} + onClick={popModal} + isModalContent + /> + ); + }, [investorID, popModal]); + return ( <ModalOverlay onClose={popModal}> - <div className={css.modalContainer} /> + <div className={css.modalContainer}>{selectedInvestor}</div> </ModalOverlay> ); } 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(<InvestorProfileModal investorID={id} />), + [pushModal], + ); + + const investors = React.useMemo(() => { + return investorsData.map(investor => ( + <InvestorProfile + key={investor.id} + name={investor.name} + description={investor.description} + involvement={investor.involvement} + imageURL={investor.imageURL} + onClick={() => onClickInvestorProfileCard(investor.id)} + /> + )); + }, [onClickInvestorProfileCard]); + return ( <div className={css.wrapper}> <h2 className={css.header}>Investors</h2> @@ -17,7 +42,7 @@ </p> </div> - <div className={css.investorContainer} /> + <div className={css.investorContainer}>{investors}</div> </section> </div> );