import * as React from 'react' ; import { Text , ScrollView , StyleSheet } from 'react-native' ; import { sendEmail } from '../../../components/send-email' ; import { callPhone } from '../../../components/call-phone' ; import { Cell , Section , TableView , SelectableCell , PushButtonCell , } from '@frogpond/tableview' ; import { openUrl } from '@frogpond/open-url' ; import moment from 'moment' ; import * as c from '@frogpond/colors' ; import type { JobType } from './types' ; import glamorous from 'glamorous-native' ; import { ShareButton } from '@frogpond/navigation-buttons' ; import { shareJob , createJobFullUrl } from './lib' ; import { decode } from '@frogpond/html-lib' ; const styles = StyleSheet . create ( { lastUpdated : { paddingBottom : 20 , } , footer : { fontSize : 10 , color : c . iosDisabledText , textAlign : 'center' , } , } ) ; const Title = glamorous . text ( { fontSize : 36 , textAlign : 'center' , marginHorizontal : 18 , marginVertical : 10 , } ) ; function ContactInformation ( { job } ) { let office = job . office ? ( < Cell cellStyle = "LeftDetail" detail = "Office" title = { job . office } / > ) : null ; let name = job . contactName ; let contactName = name ? ( < Cell cellStyle = "LeftDetail" detail = "Contact" title = { name } / > ) : null ; let email = job . contactEmail ; let contactEmail = name ? ( < Cell accessory = { email ? 'DisclosureIndicator' : undefined } cellStyle = "LeftDetail" detail = "Email" onPress = { ( ) => email ? sendEmail ( { to : [ email ] , subject : job . title , body : '' } ) : null } title = { email } / > ) : null ; let contactNumber = job . contactPhone ; let contactPhone = contactNumber ? ( < Cell accessory = { contactNumber ? 'DisclosureIndicator' : undefined } cellStyle = "LeftDetail" detail = "Phone" onPress = { ( ) => ( contactNumber ? callPhone ( contactNumber ) : null ) } title = { contactNumber } / > ) : null ; return ( < Section header = "CONTACT INFORMATION" > { office } { contactName } { contactEmail } { contactPhone } < /Section>); } function JobInformation ( { job } ) { let ending = job . hoursPerWeek === 'Full-time' ? '' : ' hrs/week' ; let hours = job . hoursPerWeek ? ( < Cell cellStyle = "LeftDetail" detail = "Hours" title = { job . hoursPerWeek + ending } / > ) : null ; let amount = job . timeOfHours ? ( < Cell cellStyle = "LeftDetail" detail = "Time of Day" title = { job . timeOfHours } / > ) : null ; let category = job . type ? ( < Cell cellStyle = "LeftDetail" detail = "Category" title = { job . type } / > ) : null ; let openPositions = job . openPositions ? ( < Cell cellStyle = "LeftDetail" detail = "Positions" title = { job . openPositions } / > ) : null ; let year = job . year ? ( < Cell cellStyle = "LeftDetail" detail = "Time Period" title = { job . year } / > ) : null ; return ( < Section header = "JOB INFORMATION" > { hours } { amount } { year } { category } { openPositions } < /Section>); } function Description ( { job } ) { return job . description ? ( < Section header = "DESCRIPTION" > < SelectableCell text = { decode ( job . description ) } /> < /Section>) : null; } function Skills ( { job } ) { return job . skills ? ( < Section header = "SKILLS" > < SelectableCell text = { decode ( job . skills ) } /> < /Section>) : null; } function Comments ( { job } ) { return job . comments ? ( < Section header = "COMMENTS" > < SelectableCell text = { decode ( job . comments ) } /> < /Section>) : null; } function FirstYearAppropriate ( { job } ) { return job . goodForIncomingStudents ? ( < Section header = "APPROPRIATE FOR FIRST-YEAR STUDENTS" > < SelectableCell text = { job . goodForIncomingStudents ? 'Yes' : 'No' } /> < /Section>) : null; } function Timeline ( { job } ) { return job . timeline ? ( < Section header = "TIMELINE" > < SelectableCell text = { decode ( job . timeline ) } /> < /Section>) : null; } function OpenWebpage ( { job } ) { return job . id ? ( < Section header = "" > < PushButtonCell onPress = { ( ) => openUrl ( createJobFullUrl ( job ) ) } title = "Open Posting" / > < /Section>) : null; } function HowToApply ( { job } ) { return job . howToApply ? ( < Section header = "HOW TO APPLY" > < SelectableCell text = { decode ( job . howToApply ) } /> < /Section>) : null; } function LastUpdated ( { when } ) { return when ? ( < Text selectable = { true } style = { [ styles . footer , styles . lastUpdated ] } > Last updated : { moment ( when , 'YYYY/MM/DD' ) . calendar ( ) } { '\n' } Powered by St . Olaf Student Employment job postings < /Text>) : null; } type Props = { navigation : { state : { params : { job : JobType ; } ; } ; } ; } ; export class JobDetailView extends React . PureComponent < Props > { static navigationOptions = ( { navigation } ) => { let { job } = navigation . state . params ; return { title : job . title , headerRight : < ShareButton onPress = { ( ) => shareJob ( job ) } />, } ; } ; render ( ) { let job = this . props . navigation . state . params . job ; return ( < ScrollView > < Title selectable = { true } > { job . title } < /Title> < TableView > < ContactInformation job = { job } /> < JobInformation job = { job } / > < FirstYearAppropriate job = { job } /> < Description job = { job } / > < Skills job = { job } /> < Comments job = { job } / > < HowToApply job = { job } /> < Timeline job = { job } / > < OpenWebpage job = { job } /> < /TableView> < LastUpdated when = { job . lastModified } / > < /ScrollView>); } }