import * as React from "react" ; import { URLStr } from "polar-shared/src/util/Strings" ; import { BusinessOccupationProfile , FormData } from "./ProfileConfigurator" ; import { arrayStream } from "polar-shared/src/util/ArrayStreams" ; import { Percentages } from "polar-shared/src/util/Percentages" ; import { BusinessOccupation , Occupation } from "polar-shared/src/util/Occupations" ; import Input from "@material-ui/core/Input" ; interface IProps { readonly occupation : Occupation ; readonly form : FormData < BusinessOccupationProfile > ; readonly onForm : ( form : FormData < BusinessOccupationProfile > ) => void ; } export const BusinessProfileConfigurator = ( props ) => { const onForm = ( newProfile ) => { const occupation = props . occupation as BusinessOccupation ; const profile = { occupation , ... props . form . profile , ... newProfile } ; const computeProgress = ( ) => { const tasks = [ props . occupation , ] ; const score = arrayStream ( tasks ) . filter ( current => current !== undefined ) . collect ( ) . length ; return Percentages . calculate ( score , tasks . length ) ; } ; const progress = computeProgress ( ) ; props . onForm ( { ... props . form , profile , progress } ) ; } ; const onURL = ( url ) => { try { const parsedURL = new URL ( url ) ; onForm ( { } ) ; } catch ( e ) { onForm ( { } ) ; } } ; return ( < div className = "mb-1 mt-2" > < div className = "mb-1 font-weight-bold" > What 's the URL for your company? < /div> < div className = "mt-1" > < Input type = "url" autoFocus = { true } onChange = { event => onURL ( event . currentTarget . value ) } /> < /div> < /div>); } ;