import { assertExists } from '@ulangi/assert' ; import { ActivityState , ErrorCode , Theme } from '@ulangi/ulangi-common/enums' ; import { ObservableScreenLayout , ObservableSuggestionListState , } from '@ulangi/ulangi-observable' ; import * as _ from 'lodash' ; import { observer } from 'mobx-react' ; import * as React from 'react' ; import { VocabularyFormIds } from '../../constants/ids/VocabularyFormIds' ; import { DefaultText } from '../common/DefaultText' ; import { SmartScrollView } from '../common/SmartScrollView' ; import { PickerError } from './PickerError' ; import { PickerLoading } from './PickerLoading' ; import { SuggestionList , SuggestionListProps } from './SuggestionList' ; import { SuggestionsPickerContentStyles , suggestionsPickerContentResponsiveStyles , } from './SuggestionsPickerContent.style' ; export interface SuggestionsPickerContentProps { theme : Theme ; screenLayout : ObservableScreenLayout ; learningLanguageName : string ; translatedToLanguageName : string ; suggestionListState : ObservableSuggestionListState ; getSuggestions : ( ) => void ; showLink : ( link : string , screenTitle : string ) => void ; styles ? : { light : SuggestionsPickerContentStyles ; dark : SuggestionsPickerContentStyles ; } ; } @ observer export class SuggestionsPickerContent extends React . Component < SuggestionsPickerContentProps > { public get styles ( ) : SuggestionsPickerContentStyles { return suggestionsPickerContentResponsiveStyles . compile ( this . props . screenLayout , this . props . theme ) ; } public render ( ) { if ( this . props . suggestionListState . dictionaryEntryState . fetchState . get ( ) === ActivityState . ACTIVE ) { return ( < PickerLoading theme = { this . props . theme } screenLayout = { this . props . screenLayout } message = "Fetching suggestions. Please wait...." / > ) ; } else if ( this . props . suggestionListState . dictionaryEntryState . fetchState . get ( ) === ActivityState . ERROR ) { return this . renderPickerError ( ) ; } else { return this . renderSuggestions ( ) ; } } private renderPickerError ( ) { if ( this . props . suggestionListState . dictionaryEntryState . fetchError . get ( ) === ErrorCode . DICTIONARY__UNSUPPORTED ) { return ( < PickerError theme = { this . props . theme } screenLayout = { this . props . screenLayout } errorMessage = { 'Suggestions is not yet available for ' + this . props . learningLanguageName + ' - ' + this . props . translatedToLanguageName + '.' } / > ) ; } else if ( this . props . suggestionListState . dictionaryEntryState . fetchError . get ( ) === ErrorCode . DICTIONARY__SPECIFIC_LANAGUAGE_REQUIRED ) { return ( < PickerError theme = { this . props . theme } screenLayout = { this . props . screenLayout } testID = { VocabularyFormIds . DICTIONARY_SPECIFIC_LANGUAGE_REQUIRED } errorMessage = { "We couldn't provide suggestions because the language of your current set is ambiguous (Any Language.)" } / > ) ; } else if ( this . props . suggestionListState . dictionaryEntryState . fetchError . get ( ) === ErrorCode . DICTIONARY__NO_RESULTS ) { return ( < PickerError theme = { this . props . theme } screenLayout = { this . props . screenLayout } errorMessage = { < DefaultText > < DefaultText > { "We couldn't find any dictionary entries for " } < /DefaultText> < DefaultText style = { this . styles . bold } > { this . props . suggestionListState . currentVocabularyTerm } < /DefaultText> < DefaultText > . < /DefaultText> < /DefaultText>}/ > ) ; } else { return ( < PickerError theme = { this . props . theme } screenLayout = { this . props . screenLayout } errorMessage = { < DefaultText > < DefaultText > Oops ! Something went wrong . < /DefaultText> < DefaultText onPress = { this . props . getSuggestions } style = { this . styles . highlighted_text } > { ' ' } Please check internet connection and try again . < /DefaultText> < DefaultText > { ' ' } If the problem still persists , please try again later . < /DefaultText> < /DefaultText>}/ > ) ; } } private renderSuggestions ( ) { const { suggestionListState } = this . props ; const allSuggestionLists = [ suggestionListState . dictionaryEntryState . dictionaryEntry !== null ? { term : suggestionListState . dictionaryEntryState . dictionaryEntry . vocabularyTerm , label : undefined , attributions : suggestionListState . dictionaryEntryState . dictionaryEntry . attributions , suggestions : assertExists ( suggestionListState . suggestionsFromDictionaryEntry ) , } : null , suggestionListState . dictionaryEntryState . traditionalEntry !== null ? { term : suggestionListState . dictionaryEntryState . traditionalEntry . vocabularyTerm , label : 'traditional' , attributions : suggestionListState . dictionaryEntryState . traditionalEntry . attributions , suggestions : assertExists ( suggestionListState . suggestionsFromTraditionalEntry ) , } : null , suggestionListState . dictionaryEntryState . masculineEntry !== null ? { term : suggestionListState . dictionaryEntryState . masculineEntry . vocabularyTerm , label : 'masculine' , attributions : suggestionListState . dictionaryEntryState . masculineEntry . attributions , suggestions : assertExists ( suggestionListState . suggestionsFromMasculineEntry ) , } : null , ] ; return ( < SmartScrollView testID = { VocabularyFormIds . SUGGESTION_LIST } showsVerticalScrollIndicator = { true } style = { this . styles . picker_content } > { _ . every ( allSuggestionLists , _ . isNull ) ? ( < DefaultText style = { this . styles . no_suggestions_text } > `We couldn't for any suggestions for $
            {this.props.suggestionListState.currentVocabularyTerm}.` < /DefaultText>) : (allSuggestionLists . filter ( ( list ) : list is SuggestionListProps => list !== null ) . map ( ( list ) : React . ReactElement < any > => { return ( < SuggestionList key = { list . term + '-' + list . label } theme = { this . props . theme } screenLayout = { this . props . screenLayout } term = { list . term } label = { list . label } attributions = { list . attributions } suggestions = { list . suggestions } showLink = { this . props . showLink } / > ) ; } ) ) } < /SmartScrollView>); } }