SHARE
TWEET

Untitled

a guest Mar 26th, 2020 78 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import * as React from 'react'
  2. import {
  3.   Platform,
  4.   StyleSheet,
  5.   Text,
  6.   View,
  7.   KeyboardAvoidingView,
  8.   Picker,
  9. } from 'react-native'
  10. // import ActionSheet from 'react-native-actionsheet'
  11. import {Input } from 'react-native-elements'
  12. import theme from './../theme/theme'
  13. import Popup from 'reactjs-popup'
  14.  
  15. import provincias from '../config/provincias'
  16. import config from '../config/config'
  17. import { ReCaptcha } from 'react-recaptcha-v3'
  18. import classNames from 'classnames'
  19.  
  20. const CheckBox = ({ title, checked, onPress }) => {
  21.  
  22.   return (
  23.     <button onClick={onPress} className={classNames({checkbox: true, checked})}>
  24.       {title}
  25.     </button>
  26.   )
  27. }
  28.  
  29. export default class Form extends React.Component {
  30.   constructor(props) {
  31.     super(props)
  32.     this.state = {
  33.       // location,
  34.       age: '',
  35.       dni: '',
  36.       email: '',
  37.       phone: '',
  38.       address: '',
  39.       localidad: '',
  40.       provincia: '',
  41.       location: {
  42.         located: false,
  43.         latitude: '',
  44.         longitude: '',
  45.       },
  46.  
  47.       //symptoms
  48.       bodyTemperature: 37,
  49.       soreThroat: false,
  50.       difficultyBreathing: false, //validado
  51.  
  52.       //condition
  53.       isPregnant: false,
  54.       isOver60yearsOld: false,
  55.  
  56.       //comorbidity
  57.       cancer: false,
  58.       diabetes: false,
  59.       hepatic: false,
  60.       kidneyDisease: false,
  61.       respiratoryDisease: false,
  62.       cardiologicDisease: false,
  63.       recaptchaToken: ""
  64.     }
  65.   }
  66.  
  67.   componentDidMount() {
  68.     this.setState({ provincia: provincias[0].id })
  69.     navigator.geolocation.getCurrentPosition(this.locationTaken, this.locationError)
  70.   }
  71.  
  72.   sendForm = async (formPayload) => {
  73.     // let locationPayload = {
  74.     //   located: false,
  75.     //   latitude: '',
  76.     //   longitude: '',
  77.     // }
  78.  
  79.     const payload = {
  80.       ...formPayload,
  81.       location: { ...this.state.location },
  82.       // location: locationPayload,
  83.     }
  84.  
  85.     await fetch(config.BACKEND_ENDPOINT + '/people', {
  86.       method: 'POST',
  87.       headers: {
  88.         Accept: 'application/json',
  89.         'Content-Type': 'application/json',
  90.       },
  91.       body: JSON.stringify(payload),
  92.     })
  93.   }
  94.  
  95.   handleSaveTest = () => {
  96.     const {
  97.       age,
  98.       dni,
  99.       email,
  100.       phone,
  101.       address,
  102.       localidad,
  103.       provincia,
  104.  
  105.       //symptoms
  106.       bodyTemperature,
  107.       soreThroat,
  108.       difficultyBreathing, //validado
  109.  
  110.       //condition
  111.       isPregnant,
  112.       isOver60yearsOld,
  113.  
  114.       //comorbidity
  115.       cancer,
  116.       diabetes,
  117.       hepatic,
  118.       kidneyDisease,
  119.       respiratoryDisease,
  120.       cardiologicDisease,
  121.  
  122.       recaptchaToken
  123.     } = this.state
  124.  
  125.     this.sendForm({
  126.       age,
  127.       dni,
  128.       email,
  129.       phone,
  130.       address,
  131.       localidad,
  132.       provincia,
  133.       bodyTemperature,
  134.       soreThroat,
  135.       difficultyBreathing,
  136.       isPregnant,
  137.       isOver60yearsOld,
  138.       cancer,
  139.       diabetes,
  140.       hepatic,
  141.       kidneyDisease,
  142.       respiratoryDisease,
  143.       cardiologicDisease,
  144.       recaptchaToken
  145.     })
  146.   }
  147.  
  148.   handleClick = () => {
  149.     alert('You tapped the button!')
  150.   }
  151.  
  152.   showActionSheet = () => {
  153.     // this.ActionSheet.show()
  154.   }
  155.  
  156.   locationTaken = (location) => {
  157.     let loc = {
  158.       located: true,
  159.       latitude: location.coords.latitude,
  160.       longitude: location.coords.longitude,
  161.       // accuracy: location.coords.accuracy
  162.     }
  163.     this.setState( { location: loc } )
  164.   }
  165.  
  166.   locationError = (err) => {
  167.     console.warn(`Geo ERROR(${err.code}): ${err.message}`);
  168.   }
  169.  
  170.   render() {
  171.     const { history } = this.props
  172.     const {
  173.       age,
  174.       dni,
  175.       email,
  176.       phone,
  177.       address,
  178.       localidad,
  179.       provincia,
  180.  
  181.       //symptoms
  182.       bodyTemperature,
  183.       soreThroat,
  184.       difficultyBreathing, //validado
  185.  
  186.       //condition
  187.       isPregnant,
  188.       isOver60yearsOld,
  189.  
  190.       //comorbidity
  191.       cancer,
  192.       diabetes,
  193.       hepatic,
  194.       kidneyDisease,
  195.       respiratoryDisease,
  196.       cardiologicDisease,
  197.      
  198.       recaptchaToken
  199.     } = this.state
  200.  
  201.     const validEmail = /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,6})+$/.test(email.trim())
  202.     const allowSend = !phone || !dni || !validEmail || !recaptchaToken
  203.    
  204.     return (
  205.       <KeyboardAvoidingView
  206.         style={{ flex: 1, flexDirection: 'column', justifyContent: 'center' }}
  207.         behavior="padding"
  208.         enabled
  209.         keyboardVerticalOffset={100}
  210.       >
  211.         <View style={styles.container}>
  212.           <View style={styles.tituloContainer}>
  213.             <Text style={styles.tituloText}> ¿Cuál es su temperatura corporal?</Text>
  214.           </View>
  215.  
  216.           <Input
  217.           style={{ marginVertical: 40}}
  218.           inputContainerStyle={{ backgroundColor: '#ededed', paddingHorizontal: 5, marginHorizontal: 20, marginVertical: 10 }}
  219.           keyboardType="numeric"
  220.           value={bodyTemperature.toString()}
  221.           min={34}
  222.           max={42}
  223.           step={0.1}
  224.           onChangeText={(value) => this.setState({ bodyTemperature: value })}
  225.         />
  226.  
  227.           <View style={styles.tituloContainer}>
  228.             <Text style={styles.tituloText}> ¿Tenés tos o dolor de garganta? </Text>
  229.           </View>
  230.  
  231.           <View style={styles.checkboxGrid}>
  232.             <CheckBox title="SI" checked={soreThroat} onPress={() => this.setState({ soreThroat: true })} />
  233.             <CheckBox title="NO" checked={!soreThroat} onPress={() => this.setState({ soreThroat: false })} />
  234.           </View>
  235.  
  236.           <View style={styles.tituloContainer}>
  237.             <Text style={styles.tituloText}> ¿Tenés dificultad respiratoria o falta de aire? </Text>
  238.           </View>
  239.  
  240.           <View style={styles.checkboxGrid}>
  241.             <CheckBox
  242.               title="SI"
  243.               checked={difficultyBreathing}
  244.               onPress={() => this.setState({ difficultyBreathing: true })}
  245.             />
  246.             <CheckBox
  247.               title="NO"
  248.               checked={!difficultyBreathing}
  249.               onPress={() => this.setState({ difficultyBreathing: false })}
  250.             />
  251.           </View>
  252.  
  253.           <View style={styles.tituloContainer}>
  254.             <Text style={styles.tituloText}>Situación de salud</Text>
  255.           </View>
  256.  
  257.           <View style={styles.checkboxGrid}>
  258.             <CheckBox
  259.               textStyle={styles.checkbox}
  260.               title="Mayor de 60 años"
  261.               checked={isOver60yearsOld}
  262.               onPress={() => this.setState({ isOver60yearsOld: !isOver60yearsOld })}
  263.             />
  264.             <CheckBox
  265.               title="Estoy embarazada"
  266.               checked={isPregnant}
  267.               onPress={() => this.setState({ isPregnant: !isPregnant })}
  268.             />
  269.           </View>
  270.           <View style={styles.checkboxGrid}>
  271.             <CheckBox title="Cáncer" checked={cancer} onPress={() => this.setState({ cancer: !cancer })} />
  272.             <CheckBox title="Diabetes" checked={diabetes} onPress={() => this.setState({ diabetes: !diabetes })} />
  273.           </View>
  274.           <View style={styles.checkboxGrid}>
  275.             <CheckBox
  276.               style={styles.checkbox}
  277.               title="Enfermedad Hepática"
  278.               checked={hepatic}
  279.               onPress={() => this.setState({ hepatic: !hepatic })}
  280.             />
  281.             <CheckBox
  282.               title="Enfermedad renal crónica"
  283.               checked={kidneyDisease}
  284.               onPress={() => this.setState({ kidneyDisease: !kidneyDisease })}
  285.             />
  286.           </View>
  287.           <View style={styles.checkboxGrid}>
  288.             <CheckBox
  289.               title="Enfermedad respiratoria"
  290.               checked={respiratoryDisease}
  291.               onPress={() => this.setState({ respiratoryDisease: !respiratoryDisease })}
  292.             />
  293.             <CheckBox
  294.               title="Enfermedad Cardiológica"
  295.               checked={cardiologicDisease}
  296.               onPress={() => this.setState({ cardiologicDisease: !cardiologicDisease })}
  297.             />
  298.           </View>
  299.  
  300.           <View style={styles.titulosPreguntas}>
  301.  
  302.           <View style={styles.preguntasCampos}>
  303.             <Input
  304.               style={{ marginVertical: 40 }}
  305.               inputContainerStyle={{ backgroundColor: '#ededed', paddingHorizontal: 5, marginVertical: 0, marginTop: 20 }}
  306.               placeholder="Edad"
  307.               keyboardType="numeric"
  308.               value={age}
  309.               onChangeText={(value) => this.setState({ age: value })}
  310.             />
  311.             <Input
  312.               style={{ marginVertical: 50 }}
  313.               inputContainerStyle={{ backgroundColor: '#ededed', paddingHorizontal: 5, marginVertical: 0, marginTop: 20 }}
  314.               placeholder="DNI o Número de pasaporte"
  315.               keyboardType="numeric"
  316.               value={this.state.dni}
  317.               errorStyle={{ color: 'red' }}
  318.               onChangeText={(value) => this.setState({ dni: value })}
  319.               errorMessage={!dni ? 'Campo requerido' : ''}
  320.             />
  321.  
  322.             <Input
  323.               style={{ marginVertical: 40 }}
  324.               inputContainerStyle={{ backgroundColor: '#ededed', paddingHorizontal: 5, marginVertical: 0, marginTop: 20 }}
  325.               placeholder="Correo Electrónico"
  326.               value={this.state.email}
  327.               onChangeText={(value) => this.setState({ email: value.trim() })}
  328.               errorStyle={{ color: 'red' }}
  329.               errorMessage={validEmail ? '' : 'Campo requerido'}
  330.             />
  331.  
  332.             <Input
  333.               style={{ marginVertical: 40 }}
  334.               inputContainerStyle={{ backgroundColor: '#ededed', paddingHorizontal: 5, marginVertical: 0, marginTop: 20 }}
  335.               placeholder="Teléfono"
  336.               keyboardType="numeric"
  337.               value={this.state.phone}
  338.               onChangeText={(value) => this.setState({ phone: value })}
  339.               errorStyle={{ color: 'red' }}
  340.               errorMessage={!phone ? 'Campo requerido' : ''}
  341.             />
  342.  
  343.             <Input
  344.               style={{ marginVertical: 40 }}
  345.               inputContainerStyle={{ backgroundColor: '#ededed', paddingHorizontal: 5, marginVertical: 0, marginTop: 20 }}
  346.               placeholder="Dirección"
  347.               value={address}
  348.               onChangeText={(value) => this.setState({ address: value })}
  349.             />
  350.  
  351.             <Input
  352.               style={{ marginVertical: 40 }}
  353.               inputContainerStyle={{ backgroundColor: '#ededed', paddingHorizontal: 5, marginVertical: 0, marginTop: 20 }}
  354.               placeholder="Localidad"
  355.               value={localidad}
  356.               onChangeText={(value) => this.setState({ localidad: value })}
  357.             />
  358. {/*
  359.             <ActionSheet
  360.               ref={(o) => (this.ActionSheet = o)}
  361.               title={'Elige tu provincia'}
  362.               options={['Cancelar', ...provincias.map((p) => p.provincia)]}
  363.               cancelButtonIndex={0}
  364.               destructiveButtonIndex={1}
  365.               onPress={(i) => {
  366.                 if (i !== 0) {
  367.                   this.setState({ provincia: i - 1 })
  368.                 }
  369.               }}
  370.             /> */}
  371.  
  372.             <Picker
  373.               selectedValue={this.state.provincia}
  374.               onValueChange={(provincia) => this.setState({ provincia })}
  375.               style={{
  376.                 marginVertical: 20,
  377.                 backgroundColor: '#ededed',
  378.                 minHeight: 40,
  379.                 borderWidth: 0,
  380.                 borderColor: 'rgb(134, 147, 158)',
  381.                 borderBottomWidth: 1,
  382.                 marginHorizontal: 10,
  383.                 paddingHorizontal: 5,
  384.               }}
  385.               mode="dropdown"
  386.             >
  387.               {provincias.map((p, index) => (
  388.                 <Picker.Item key={index} label={p.provincia} value={p.id} />
  389.               ))}
  390.             </Picker>
  391.             <ReCaptcha
  392.               sitekey={config.recaptchaKey}
  393.               action='form_submit'
  394.               verifyCallback={(recaptchaToken=>{this.setState({recaptchaToken})})}/>
  395.             <Text style={{color: "red", fontSize: 12, display: recaptchaToken === null?"block":"none"}}>ReCaptcha invalido. Por favor intentelo nuevamente</Text>
  396.           </View>
  397.             <View style={{ marginTop: 20 }}>
  398.                 <Popup disabled={allowSend} trigger={<button style={{margin: "20px 0"}} className={classNames({disabled: allowSend})}>CONFIRMAR</button>} modal>
  399.                 {close => (
  400.                   <View style={{padding: 20}}>
  401.                     <Text style={{marginBottom: 20}}>Ministerio de Salud de la Nación</Text>
  402.                     <Text style={{marginBottom: 20}}>Este formulario tiene caracter de declaración jurada, hacer una falsa declaración puede considerarse una contravención grave.</Text>
  403.                     <Text style={{marginBottom: 20}}>Al confirmar acepto los <a target="_blank" rel="noopener noreferrer" href={process.env.PUBLIC_URL + "/terminos.html"}>Términos y Condiciones</a> de la Aplicación Covid-19 Ministerio de Salud así como a la Política de Privacidad establecida en el punto 5 de los <a target="_blank" rel="noopener noreferrer" href={process.env.PUBLIC_URL + "/terminos.html"}>Términos y Condiciones</a>.</Text>
  404.                   <button style={{marginBottom: 20, backgroundColor:'#A9A9A9', color: '#ffffff'}} onClick={close}>Cancelar</button>
  405.                   <button style={{}}
  406.                     onClick={() => {
  407.                           this.handleSaveTest()
  408.                           if (
  409.                                 // bodyTemperature >= 38 plus other condition
  410.                                 // is required.
  411.                                 bodyTemperature >= 38 &&
  412.                                 (difficultyBreathing ||
  413.                                 diabetes || cancer ||
  414.                                 isPregnant || isOver60yearsOld ||
  415.                                 hepatic || kidneyDisease||
  416.                                 respiratoryDisease)
  417.                           ) {
  418.                             history.replace(`/diagnostico/${provincia}`)
  419.                           } else if (bodyTemperature >= 38) {
  420.                             history.replace('/cuarentena/')
  421.                           } else { // no fever, negative diagnostic
  422.                             history.push('/diagnostico_bueno/')
  423.                           }
  424.                         }
  425.                       }> OK, Enviar </button>
  426.                     </View>
  427.                     )}
  428.               </Popup>
  429.             </View>
  430.           </View>
  431.         </View>
  432.       </KeyboardAvoidingView>
  433.     )
  434.   }
  435. }
  436.  
  437. const styles = StyleSheet.create({
  438.   container: {
  439.     flex: 1,
  440.     backgroundColor: '#fff',
  441.   },
  442.   developmentModeText: {
  443.     marginBottom: 20,
  444.     color: 'rgba(0,0,0,0.4)',
  445.     fontSize: 14,
  446.     lineHeight: 19,
  447.     textAlign: 'center',
  448.   },
  449.   contentContainer: {
  450.     paddingTop: 30,
  451.   },
  452.   welcomeContainer: {
  453.     alignItems: 'center',
  454.     marginTop: 10,
  455.     marginBottom: 20,
  456.   },
  457.   welcomeImage: {
  458.     width: 100,
  459.     height: 80,
  460.     resizeMode: 'contain',
  461.     marginTop: 3,
  462.     marginLeft: -10,
  463.   },
  464.   getStartedContainer: {
  465.     alignItems: 'center',
  466.     marginHorizontal: 50,
  467.   },
  468.  
  469.   titulosPreguntas: {
  470.     marginHorizontal: 25,
  471.     paddingVertical: 10,
  472.   },
  473.  
  474.   homeScreenFilename: {
  475.     marginVertical: 7,
  476.   },
  477.   codeHighlightText: {
  478.     color: 'rgba(96,100,109, 0.8)',
  479.   },
  480.   codeHighlightContainer: {
  481.     backgroundColor: 'rgba(0,0,0,0.05)',
  482.     borderRadius: 3,
  483.     paddingHorizontal: 4,
  484.   },
  485.   getStartedText: {
  486.     fontSize: 17,
  487.     color: 'rgba(96,100,109, 1)',
  488.     lineHeight: 24,
  489.     textAlign: 'center',
  490.   },
  491.   tabBarInfoContainer: {
  492.     position: 'absolute',
  493.     bottom: 0,
  494.     left: 0,
  495.     right: 0,
  496.     ...Platform.select({
  497.       ios: {
  498.         shadowColor: 'black',
  499.         shadowOffset: { width: 0, height: -3 },
  500.         shadowOpacity: 0.1,
  501.         shadowRadius: 3,
  502.       },
  503.       android: {
  504.         elevation: 20,
  505.       },
  506.     }),
  507.     alignItems: 'center',
  508.     backgroundColor: '#fbfbfb',
  509.     paddingVertical: 20,
  510.   },
  511.   tabBarInfoText: {
  512.     fontSize: 17,
  513.     color: 'rgba(96,100,109, 1)',
  514.     textAlign: 'center',
  515.   },
  516.   navigationFilename: {
  517.     marginTop: 5,
  518.   },
  519.   helpContainer: {
  520.     marginTop: 15,
  521.     alignItems: 'center',
  522.   },
  523.   helpLink: {
  524.     paddingVertical: 15,
  525.   },
  526.  
  527.   loginScreenButton: {
  528.     marginRight: 40,
  529.     marginLeft: 40,
  530.     marginTop: 10,
  531.     paddingTop: 10,
  532.     paddingBottom: 10,
  533.     backgroundColor: '#1E6738',
  534.     borderRadius: 10,
  535.     borderWidth: 1,
  536.     borderColor: '#fff',
  537.   },
  538.   loginText: {
  539.     color: '#fff',
  540.     textAlign: 'center',
  541.     paddingLeft: 10,
  542.     paddingRight: 10,
  543.   },
  544.   helpLinkText: {
  545.     fontSize: 14,
  546.     color: '#2e78b7',
  547.   },
  548.   checkboxText: {
  549.     fontFamily: 'Encode Sans:700',
  550.     fontSize: 14,
  551.     textAlign: 'center',
  552.   },
  553.   checkbox: {
  554.     textAlign: 'center',
  555.   },
  556.   checkboxContainer: {
  557.     backgroundColor: theme.palette.grey[20],
  558.     padding: 10,
  559.     borderRadius: 10,
  560.     width: '100%',
  561.     height: 65,
  562.     flex: 0.5,
  563.     flexDirection: 'row',
  564.     justifyContent: 'center',
  565.     alignItems: 'center',
  566.     margin: 5,
  567.   },
  568.   checkboxContainerChecked: {
  569.     backgroundColor: theme.palette.secondary.main,
  570.   },
  571.   checkboxGrid: {
  572.     justifyContent: 'center',
  573.     alignItems: 'center',
  574.     flexDirection: 'row',
  575.     flex: 1,
  576.     marginLeft: 20,
  577.     marginRight: 20,
  578.   },
  579.  
  580.   tituloContainer: {
  581.     padding: 30,
  582.   },
  583.   tituloText: {
  584.     fontFamily: 'Encode Sans:500',
  585.     fontSize: 17,
  586.   },
  587. })
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top