basic-counter/App.tsx at master · iamtoled/basic-counter · 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
import { Slider } from "@miblanchard/react-native-slider";
import { StatusBar } from "expo-status-bar";
import React, { useEffect, useState } from "react";
import { SafeAreaView, StyleSheet, Text, View } from "react-native";
import BasicButton from "./src/components/BasicButton";
import MagicComponent from "./src/components/MagicComponent";
import { colors } from "./src/utils/style-const";

export default function App() {
  const [counter, setCounter] = useState(0);
  const [visualCounter, setVisualCounter] = useState(counter);

  const [sliderValue, setSliderValue] = useState(3);

  const [showMagicComponent, setShowMagicComponent] = useState(false);

  useEffect(() => {
    setShowMagicComponent(false);

    if (counter % 5 === 0) {
      setVisualCounter(0);
    } else {
      setVisualCounter(counter);
    }

    if (counter !== 0 && counter % 7 === 0) {
      setShowMagicComponent(true);
    }
  }, [counter]);

  return (
    <SafeAreaView style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <View style={{ flex: 0.5, justifyContent: "space-evenly", alignItems: "center" }}>
        <Text style={{ fontSize: 40, fontWeight: "bold" }}>{visualCounter} </Text>
        {showMagicComponent && <MagicComponent setVisualCounter={setVisualCounter} />}
      </View>

      <View
        style={{
          flex: 0.5,
          width: "100%",
        }}
      >
        <View
          style={{
            flex: 0.5,
            flexDirection: "row",
            alignItems: "flex-start",
            justifyContent: "space-between",
            width: "100%",
            paddingHorizontal: 20,
          }}
        >
          <BasicButton
            onPress={() => {
              setCounter((old) => old - 1);
            }}
          >
            -1
          </BasicButton>
          <BasicButton
            onPress={() => {
              setCounter(0);
            }}
          >
            Réinitialiser
          </BasicButton>
          <BasicButton
            onPress={() => {
              setCounter((old) => old + 1);
            }}
          >
            +1
          </BasicButton>
        </View>
        <View style={{ flexDirection: "row", alignItems: "center", paddingHorizontal: 20, marginBottom: 20 }}>
          <Slider
            maximumValue={10}
            minimumValue={0}
            value={sliderValue}
            onValueChange={(val) => {
              Array.isArray(val) && setSliderValue(val[0]);
            }}
            step={1}
            containerStyle={{ flex: 0.8 }}
            thumbStyle={{ backgroundColor: colors.primary }}
            minimumTrackTintColor={colors.primary}
          ></Slider>
          <Text style={{ fontSize: 24, flex: 0.2, textAlign: "center" }}>{sliderValue}</Text>
        </View>
        <View
          style={{ flexDirection: "row", alignItems: "center", paddingHorizontal: 20, justifyContent: "space-evenly" }}
        >
          <BasicButton
            onPress={() => {
              setCounter((old) => old - sliderValue);
            }}
          >
            Soustraire
          </BasicButton>
          <BasicButton
            onPress={() => {
              setCounter((old) => old + sliderValue);
            }}
          >
            Additioner
          </BasicButton>
        </View>
      </View>
    </SafeAreaView>
  );
}