import { DateTime } from 'luxon' ; import { PropsWithChildren } from 'react' ; import { CommonSection } from '../common/CommonSection' ; import { EmptyRowCol } from '../common' ; import { CommonRows } from '../common/CommonRow' ; import { IRow } from '../common/IRow' ; import Util from '../common/Util' ; import { IEtc } from './IEtc' ; import { PreProcessingComponent } from '../common/PreProcessingComponent' ; type Payload = IEtc . Payload ; type Item = IEtc . Item ; export const Etc = { Component : ( { payload } ) => { return PreProcessingComponent < IEtc . Payload > ( { payload , component : Component , } ) ; } , } ; function Component ( { payload } ) { return ( < CommonSection title = "ETC" > < EducationRow payload = { payload } /> < /CommonSection>); } function EducationRow ( { payload } ) { return ( < EmptyRowCol > { payload . list . map ( ( item , index ) => { return < CommonRows key = { index . toString ( ) } payload = { serialize ( item ) } index = { index } / > ; } ) } < /EmptyRowCol>); } function serialize ( item ) { const DATE_FORMAT = Util . LUXON_DATE_FORMAT ; const startedAt = DateTime . fromFormat ( item . startedAt , DATE_FORMAT . YYYY_LL ) . toFormat ( DATE_FORMAT . YYYY_DOT_LL ) ; const title = ( ( ) => { if ( item . endedAt ) { const endedAt = DateTime . fromFormat ( item . endedAt , DATE_FORMAT . YYYY_LL ) . toFormat ( DATE_FORMAT . YYYY_DOT_LL ) ; return `${ startedAt } ~ ${ endedAt }` ; } return startedAt ; } ) ( ) ; return { left : { title , } , right : { ... item , } , } ; }