import React, { Component } from 'react' import { View, Button, Text, ScrollView } from 'react-native' import Share from 'react-native-share' import { Base64 } from 'js-base64' import objectPath from 'object-path' import { getColumnNamesForCsv, cycleDaysSortedByDate } from '../db' import styles from '../styles/index' export default class Settings extends Component { constructor(props) { super(props) this.state = { pickerVisible: false } } render() { return ( <ScrollView> <Text style={styles.welcome}>{this.state.welcomeText}</Text> <View style={styles.homeButtons}> <View style={styles.homeButton}> <Button onPress={async () => { // TODO show warning that there is nothing to export if (!cycleDaysSortedByDate.length) return const data = makeDataURI(cycleDaysSortedByDate) try { await Share.open({ title: 'My Drip data export', url: data, subject: 'My Drip data export', type: 'text/csv', showAppsToView: true }) } catch (err) { // TODO handle error console.log(err) } }} title="Edit symptoms for today"> </Button> </View> </View> </ScrollView> ) } } function makeDataURI(cycleDays) { const csv = transformToCsv(cycleDays) const encoded = Base64.encodeURI(csv) return `data:text/csv;base64,${encoded}` } function transformToCsv(cycleDays) { const columnNames = getColumnNamesForCsv() const rows = cycleDays .map(day => { return columnNames.map(column => { const val = objectPath.get(day, column, '') return typeof val === 'string' ? csvify(val) : val }) }) .map(row => row.join(',')) rows.unshift(columnNames.join(',')) return rows.join('\n') } function csvify (val) { // escape double quotes val = val.replace(/"/g, '""') val = val.toLowerCase() const hasSpecialChars = ( val.includes('\n') || val.includes('\t') || val.includes(',') || val.includes(';') || val.includes('.') || val.includes('\'') ) return hasSpecialChars ? `"${val}"` : val }