import { DateTime , Duration } from 'luxon' ; import { PropsWithChildren } from 'react' ; import { Badge , Col , Row } from 'reactstrap' ; import { EmptyRowCol } from '../common' ; import { PreProcessingComponent } from '../common/PreProcessingComponent' ; import { Style } from '../common/Style' ; import Util from '../common/Util' ; import { IExperience } from './IExperience' ; import ExperienceRow from './row' ; type Payload = IExperience . Payload ; export const Experience = { Component : ( { payload } ) => { return PreProcessingComponent < Payload > ( { payload , component : Component , } ) ; } , } ; function Component ( { payload } ) { const totalPeriod = ( ) => { if ( payload . disableTotalPeriod ) { return '' ; } return ( < span style = { { fontSize : '50%' } } > < Badge > { getFormattingExperienceTotalDuration ( payload ) } < /Badge> < /span>); } ; return ( < div className = "mt-5" > < EmptyRowCol > < Row className = "pb-3" > < Col > < h2 style = { Style . blue } > EXPERIENCE { totalPeriod ( ) } < /h2> < /Col> < /Row> { payload . list . map ( ( item , index ) => ( < ExperienceRow key = { index . toString ( ) } item = { item } index = { index } / > ) ) } < /EmptyRowCol> < /div>); } function getFormattingExperienceTotalDuration ( payload ) { const durations = payload . list . map ( ( item ) => { return { endedAt : item . endedAt ? DateTime . fromFormat ( item . endedAt , Util . LUXON_DATE_FORMAT . YYYY_LL ) : DateTime . local ( ) , startedAt : DateTime . fromFormat ( item . startedAt , Util . LUXON_DATE_FORMAT . YYYY_LL ) , } ; } ) . map ( ( { endedAt , startedAt } ) => { return endedAt . plus ( { month : 1 } ) . diff ( startedAt ) ; } ) ; const totalExperience = durations . reduce ( ( prev , cur ) => prev . plus ( cur ) , Duration . fromMillis ( 0 ) ) ; return totalExperience . toFormat ( `총 ${ Util . LUXON_DATE_FORMAT . DURATION_KINDNESS }` ) ; }