PomodoroApp/App.js at master · Nocelli/PomodoroApp · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, TouchableOpacity, Switch } from 'react-native';
import Icon from './assets/Icon'
import { vibrate } from './utils'

export default function App() {
  const [durations, setDurations] = useState({})
  const [count, setCount] = useState(1500)
  const [isPaused, setIsPaused] = useState(false)
  const [isWorkTime, setIsWorkTime] = useState(true)

  useEffect(() => {
    setDurations({ 'work': 1500, 'break': 300 })
  }, [])

  useEffect(() => {
    let current = setInterval(() => {
      dencrement()
    }, 1000)

    return () => clearInterval(current);
  }, [count, isPaused, isWorkTime])


  const dencrement = () => {
    if (isPaused)
      return
    if (count - 1 < 1) {
      vibrate()
      setCount(!isWorkTime ? durations.work : durations.break)
      setIsWorkTime(!isWorkTime)
    } else {
      setCount(count - 1)
    }
  }

  const sToTime = duration => {
    let seconds = parseInt((duration) % 60)
      , minutes = parseInt((duration / 60) % 60)

    seconds = (seconds < 10) ? "0" + seconds : seconds;

    return minutes + "m " + seconds + "s";
  }

  const toggleWork = () => {
    setIsWorkTime(!isWorkTime)
    setCount(!isWorkTime ? durations.work : durations.break)
  }

  return (
    <View style={styles.container}>
      <Icon/>
      <Text style={styles.text}>{sToTime(count)}</Text>
      <View style={styles.buttonsContainer}>
        <TouchableOpacity style={styles.button} onPress={() => { setCount(isWorkTime ? durations.work : durations.break) }}>
          <Text style={styles.buttonText}>Resetar</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.button} onPress={() => { setIsPaused(!isPaused) }}>
          <Text style={styles.buttonText}>{isPaused ? 'Continuar' : 'Pausar'}</Text>
        </TouchableOpacity>
      </View>
      <View style={styles.switch}>
        <Switch
          style={styles.switchToggle}
          trackColor={{ false: "#767577", true: "#ff6658" }}
          thumbColor={isWorkTime ? "#f0f0f5" : "#f4f3f4"}
          onValueChange={toggleWork}
          value={isWorkTime} />
        <Text style={styles.switchText}>{isWorkTime ? 'Trabalho' : 'Intervalo'}</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ededed',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 72,
    color: '#1d1d1f'
  },
  buttonText: {
    fontSize: 24,
    color: '#fff',
    textTransform: 'uppercase',
  },
  buttonsContainer: {
    flexDirection: 'row'
  },
  button: {
    padding: 20,
    margin: 10,
    backgroundColor: '#ff6658',
    borderRadius: 16,
  },
  switch: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 10,
  },
  switchText: {
    padding: 10,
    fontSize: 24,
    fontWeight: "bold",
    color: '#444',
    textTransform: 'uppercase',
  },
  switchToggle: {
    marginRight: 10,
    transform: [{ scaleX: 1.5 }, { scaleY: 1.5 }]
  },
});