import { Theme } from '@ulangi/ulangi-common/enums' ; import { ObservableScreenLayout , ObservableVocabulary , } from '@ulangi/ulangi-observable' ; import * as _ from 'lodash' ; import * as moment from 'moment' ; import * as React from 'react' ; import { SectionGroup } from '../section/SectionGroup' ; import { SectionRow } from '../section/SectionRow' ; export interface VocabularyDetailWritingInfoProps { theme : Theme ; screenLayout : ObservableScreenLayout ; vocabulary : ObservableVocabulary ; nextReview : string ; } export class VocabularyDetailWritingInfo extends React . Component < VocabularyDetailWritingInfoProps > { public render ( ) { return ( < SectionGroup theme = { this . props . theme } screenLayout = { this . props . screenLayout } header = "WRITING INFO" > < SectionRow key = "level" theme = { this . props . theme } screenLayout = { this . props . screenLayout } leftText = "WR Level" rightText = { typeof this . props . vocabulary . writing !== 'undefined' ? this . props . vocabulary . writing . level . toString ( ) : '0' } / > < SectionRow key = "last_written" theme = { this . props . theme } screenLayout = { this . props . screenLayout } leftText = "Last Written" rightText = { typeof this . props . vocabulary . writing === 'undefined' || this . props . vocabulary . writing . lastWrittenAt === null ? 'N/A' : _ . upperFirst ( moment ( this . props . vocabulary . writing . lastWrittenAt ) . fromNow ( ) ) } / > < SectionRow key = "next_review" theme = { this . props . theme } screenLayout = { this . props . screenLayout } leftText = "Next Review" rightText = { _ . upperFirst ( this . props . nextReview ) } / > < SectionRow key = "writing_disabled" theme = { this . props . theme } screenLayout = { this . props . screenLayout } leftText = "Disabled" rightText = { typeof this . props . vocabulary . writing !== 'undefined' ? this . props . vocabulary . writing . disabled === true ? 'Yes' : 'No' : 'No' } / > < /SectionGroup>); } }