lori/drip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Chore/make function components 4

Browse Source
This commit is contained in:
Sofiya Tepikin
2022-09-11 14:01:23 +00:00
parent cec2c5bc2e
commit cd43271bbd
5 changed files with 185 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/settings/common/confirm-with-password.js
+28 -39
View File
@@ -1,4 +1,4 @@
import React, { Component } from 'react'
import React, { useState, useEffect } from 'react'
import PropTypes from 'prop-types'
import { Alert, StyleSheet, View } from 'react-native'
import nodejs from 'nodejs-mobile-react-native'
@@ -11,78 +11,65 @@ import { Containers } from '../../../styles'
import settings from '../../../i18n/en/settings'
import { shared } from '../../../i18n/en/labels'
export default class ConfirmWithPassword extends Component {
constructor() {
super()
const ConfirmWithPassword = ({ onSuccess, onCancel }) => {
const [password, setPassword] = useState(null)
this.state = { password: null }
nodejs.channel.addListener('password-check', this.checkPassword, this)
const checkPassword = async (hash) => {
try {
await openDb(hash)
onSuccess()
} catch (err) {
onIncorrectPassword()
}
}
componentWillUnmount() {
nodejs.channel.removeListener('password-check', this.checkPassword)
useEffect(() => {
nodejs.channel.addListener('password-check', checkPassword, this)
return () => {
nodejs.channel.removeListener('password-check', checkPassword)
}
}, [])
resetPasswordInput = () => {
this.setState({ password: null })
}
onIncorrectPassword = () => {
const onIncorrectPassword = () => {
Alert.alert(shared.incorrectPassword, shared.incorrectPasswordMessage, [
{
text: shared.cancel,
onPress: this.props.onCancel,
onPress: onCancel,
},
{
text: shared.tryAgain,
onPress: this.resetPasswordInput,
onPress: () => setPassword(null),
},
])
}
checkPassword = async (hash) => {
try {
await openDb(hash)
this.props.onSuccess()
} catch (err) {
this.onIncorrectPassword()
}
const initPasswordCheck = () => {
requestHash('password-check', password)
}
handlePasswordInput = (password) => {
this.setState({ password })
}
initPasswordCheck = () => {
requestHash('password-check', this.state.password)
}
render() {
const { password } = this.state
const labels = settings.passwordSettings
const isPassword = password !== null
return (
<React.Fragment>
<>
<AppTextInput
onChangeText={this.handlePasswordInput}
onChangeText={setPassword}
placeholder={labels.enterCurrent}
value={password}
secureTextEntry={true}
secureTextEntry
/>
<View style={styles.container}>
<Button onPress={this.props.onCancel}>{shared.cancel}</Button>
<Button onPress={onCancel}>{shared.cancel}</Button>
<Button
disabled={!isPassword}
isCTA={isPassword}
onPress={this.initPasswordCheck}
onPress={initPasswordCheck}
>
{shared.confirmToProceed}
</Button>
</View>
</React.Fragment>
</>
)
}
}
ConfirmWithPassword.propTypes = {
@@ -95,3 +82,5 @@ const styles = StyleSheet.create({
...Containers.rowContainer,
},
})
export default ConfirmWithPassword
components/settings/data-management/delete-data.js
+24 -32
View File
@@ -1,4 +1,4 @@
import React, { Component } from 'react'
import React, { useState } from 'react'
import RNFS from 'react-native-fs'
import { Alert } from 'react-native'
import PropTypes from 'prop-types'
@@ -17,26 +17,21 @@ import { EXPORT_FILE_NAME } from './constants'
const exportedFilePath = `${RNFS.DocumentDirectoryPath}/${EXPORT_FILE_NAME}`
export default class DeleteData extends Component {
constructor() {
super()
const DeleteData = ({ onStartDeletion, isDeletingData }) => {
const isPasswordSet = hasEncryptionObservable.value
const [isConfirmingWithPassword, setIsConfirmingWithPassword] =
useState(false)
this.state = {
isPasswordSet: hasEncryptionObservable.value,
isConfirmingWithPassword: false,
}
}
onAlertConfirmation = () => {
this.props.onStartDeletion()
if (this.state.isPasswordSet) {
this.setState({ isConfirmingWithPassword: true })
const onAlertConfirmation = () => {
onStartDeletion()
if (isPasswordSet) {
setIsConfirmingWithPassword(true)
} else {
this.deleteAppData()
deleteAppData()
}
}
alertBeforeDeletion = async () => {
const alertBeforeDeletion = async () => {
const { question, message, confirmation, errors } = settings.deleteSegment
if (isDbEmpty() && !(await RNFS.exists(exportedFilePath))) {
alertError(errors.noData)
@@ -44,64 +39,61 @@ export default class DeleteData extends Component {
Alert.alert(question, message, [
{
text: confirmation,
onPress: this.onAlertConfirmation,
onPress: onAlertConfirmation,
},
{
text: sharedLabels.cancel,
style: 'cancel',
onPress: this.cancelConfirmationWithPassword,
onPress: cancelConfirmationWithPassword,
},
])
}
}
deleteExportedFile = async () => {
const deleteExportedFile = async () => {
if (await RNFS.exists(exportedFilePath)) {
await RNFS.unlink(exportedFilePath)
}
}
deleteAppData = async () => {
const deleteAppData = async () => {
const { errors, success } = settings.deleteSegment
try {
if (!isDbEmpty()) {
clearDb()
}
await this.deleteExportedFile()
await deleteExportedFile()
showToast(success.message)
} catch (err) {
alertError(errors.couldNotDeleteFile)
}
this.cancelConfirmationWithPassword()
cancelConfirmationWithPassword()
}
cancelConfirmationWithPassword = () => {
this.setState({ isConfirmingWithPassword: false })
const cancelConfirmationWithPassword = () => {
setIsConfirmingWithPassword(false)
}
render() {
const { isConfirmingWithPassword } = this.state
const { isDeletingData } = this.props
if (isConfirmingWithPassword && isDeletingData) {
return (
<ConfirmWithPassword
onSuccess={this.deleteAppData}
onCancel={this.cancelConfirmationWithPassword}
onSuccess={deleteAppData}
onCancel={cancelConfirmationWithPassword}
/>
)
}
return (
<Button isCTA onPress={this.alertBeforeDeletion}>
<Button isCTA onPress={alertBeforeDeletion}>
{settings.deleteSegment.title}
</Button>
)
}
}
DeleteData.propTypes = {
isDeletingData: PropTypes.bool,
onStartDeletion: PropTypes.func.isRequired,
}
export default DeleteData
components/settings/data-management/index.js
+18 -40
View File
@@ -1,4 +1,4 @@
import React, { Component } from 'react'
import React, { useState } from 'react'
import AppLoadingView from '../../common/app-loading'
import AppPage from '../../common/app-page'
@@ -13,65 +13,44 @@ import DeleteData from './delete-data'
import labels from '../../../i18n/en/settings'
import { ACTION_DELETE, ACTION_EXPORT, ACTION_IMPORT } from '../../../config'
export default class DataManagement extends Component {
constructor(props) {
super(props)
const DataManagement = () => {
const [isLoading, setIsLoading] = useState(false)
const [currentAction, setCurrentAction] = useState(null)
this.state = {
isLoading: false,
currentAction: null,
}
}
startLoading = () => {
this.setState({ isLoading: true })
}
endLoading = () => {
this.setState({ isLoading: false })
}
startImportFlow = async (shouldDeleteExistingData) => {
this.startLoading()
const startImportFlow = async (shouldDeleteExistingData) => {
setIsLoading(true)
const fileContent = await getFileContent()
if (fileContent) {
await importData(shouldDeleteExistingData, fileContent)
}
this.endLoading()
setIsLoading(false)
}
startExport = () => {
this.setCurrentAction(ACTION_EXPORT)
const startExport = () => {
setCurrentAction(ACTION_EXPORT)
openShareDialogAndExport()
}
startImport = () => {
this.setCurrentAction(ACTION_IMPORT)
openImportDialog(this.startImportFlow)
const startImport = () => {
setCurrentAction(ACTION_IMPORT)
openImportDialog(startImportFlow)
}
setCurrentAction = (action) => {
this.setState({ currentAction: action })
}
if (isLoading) return <AppLoadingView />
render() {
const { currentAction, isLoading } = this.state
const isDeletingData = currentAction === ACTION_DELETE
return (
<React.Fragment>
{isLoading && <AppLoadingView />}
{!isLoading && (
<AppPage>
<Segment title={labels.export.button}>
<AppText>{labels.export.segmentExplainer}</AppText>
<Button isCTA onPress={this.startExport}>
<Button isCTA onPress={startExport}>
{labels.export.button}
</Button>
</Segment>
<Segment title={labels.import.button}>
<AppText>{labels.import.segmentExplainer}</AppText>
<Button isCTA onPress={this.startImport}>
<Button isCTA onPress={startImport}>
{labels.import.button}
</Button>
</Segment>
@@ -79,12 +58,11 @@ export default class DataManagement extends Component {
<AppText>{labels.deleteSegment.explainer}</AppText>
<DeleteData
isDeletingData={isDeletingData}
onStartDeletion={() => this.setCurrentAction(ACTION_DELETE)}
onStartDeletion={() => setCurrentAction(ACTION_DELETE)}
/>
</Segment>
</AppPage>
)}
</React.Fragment>
)
}
}
export default DataManagement
components/settings/nfp-settings/index.js
+10 -15
View File
@@ -1,4 +1,4 @@
import React, { Component } from 'react'
import React, { useState } from 'react'
import { Platform, StyleSheet, View } from 'react-native'
import AppIcon from '../../common/app-icon'
@@ -12,22 +12,16 @@ import { useCervixObservable, saveUseCervix } from '../../../local-storage'
import { Colors, Spacing, Typography } from '../../../styles'
import labels from '../../../i18n/en/settings'
export default class Settings extends Component {
constructor(props) {
super(props)
const Settings = () => {
const [shouldUseCervix, setShouldUseCervix] = useState(
useCervixObservable.value
)
this.state = {
shouldUseCervix: useCervixObservable.value,
}
}
onCervixToggle = (value) => {
this.setState({ shouldUseCervix: value })
const onCervixToggle = (value) => {
setShouldUseCervix(value)
saveUseCervix(value)
}
render() {
const { shouldUseCervix } = this.state
const cervixText = shouldUseCervix
? labels.useCervix.cervixModeOn
: labels.useCervix.cervixModeOff
@@ -36,7 +30,7 @@ export default class Settings extends Component {
<AppPage>
<Segment title={labels.useCervix.title}>
<AppSwitch
onToggle={this.onCervixToggle}
onToggle={onCervixToggle}
text={cervixText}
value={shouldUseCervix}
/>
@@ -61,9 +55,10 @@ export default class Settings extends Component {
</Segment>
</AppPage>
)
}
}
export default Settings
const styles = StyleSheet.create({
icon: {
marginRight: Spacing.base,
components/settings/nfp-settings/temperature-slider.js
+12 -20
View File
@@ -1,4 +1,4 @@
import React, { Component } from 'react'
import React, { useState } from 'react'
import { StyleSheet, View } from 'react-native'
import Slider from '@ptomasroos/react-native-multi-slider'
@@ -10,30 +10,21 @@ import { Colors, Sizes } from '../../../styles'
import labels from '../../../i18n/en/settings'
import { TEMP_MIN, TEMP_MAX, TEMP_SLIDER_STEP } from '../../../config'
export default class TemperatureSlider extends Component {
constructor(props) {
super(props)
const { min, max } = scaleObservable.value
this.state = { minTemperature: min, maxTemperature: max }
}
onTemperatureSliderChange = (values) => {
this.setState({
minTemperature: values[0],
maxTemperature: values[1],
})
const TemperatureSlider = () => {
const savedValue = scaleObservable.value
const [minTemperature, setMinTemperature] = useState(savedValue.min)
const [maxTemperature, setMaxTemperature] = useState(savedValue.max)
const onTemperatureSliderChange = ([min, max]) => {
setMinTemperature(min)
setMaxTemperature(max)
try {
saveTempScale({ min: values[0], max: values[1] })
saveTempScale({ min, max })
} catch (err) {
alertError(labels.tempScale.saveError)
}
}
render() {
const { minTemperature, maxTemperature } = this.state
return (
<View style={styles.container}>
<Slider
@@ -43,7 +34,7 @@ export default class TemperatureSlider extends Component {
markerOffsetY={Sizes.tiny}
max={TEMP_MAX}
min={TEMP_MIN}
onValuesChange={this.onTemperatureSliderChange}
onValuesChange={onTemperatureSliderChange}
selectedStyle={styles.sliderAccentBackground}
step={TEMP_SLIDER_STEP}
trackStyle={styles.slider}
@@ -52,9 +43,10 @@ export default class TemperatureSlider extends Component {
/>
</View>
)
}
}
export default TemperatureSlider
const styles = StyleSheet.create({
container: {
alignItems: 'center',