Criação dos componentes (Update & Exclude buttons)

Vamos agora criar os botões de atualizar e excluir, pois quando o hábito estiver criado e ele for clicado, nós iremos exibir esses botões, e não o botão de criar.
Vamos então criar a pasta da mesma forma que criamos as anteriores. “Components → HabitPage → UpdateExcludeButtons → index.jsx”

Agora vamos fazer a estrutura, que vai receber via props 2 informações do hábito e um handle, que será ainda criado.

import React from "react";
import {
  View,
} from "react-native";

export default function UpdateExcludeButtons({
  habitInput,
  handleUpdate,
  habitArea,
}) {
  return (
    <View style={styles.container}>
      
    </View>
  );
}

Agora vamos criar os botões, que vão ter confirmação. Ou seja, antes de ter de fato o handle chamado, ele vai perguntar se é isso mesmo que o usuário quer, muito importante quando estamos tratando com modificações grandes.

import React from "react";
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  Image,
  Alert,
} from "react-native";

export default function UpdateExcludeButtons({
  habitInput,
  handleUpdate,
  habitArea,
}) {
  return (
    <View style={styles.container}>
      <TouchableOpacity
        style={styles.updateButton}
        activeOpacity={0.8}
        onPress={() => {
          Alert.alert(
            "Ao prosseguir você vai atualizar o hábito, tem certeza?",
            "Ao fazer isso você pode mudar o hábito, frequência e notificação.",
            [
              {
                text: "Cancelar",
              },
              {
                text: "Atualizar",
                onPress: handleUpdate,
              },
            ]
          );
        }}
      >
        <Text style={styles.updateButtonText}>Atualizar</Text>
      </TouchableOpacity>
      <TouchableOpacity
        style={styles.trashButton}
        activeOpacity={0.8}
        onPress={() => {
          Alert.alert(
            `Você tem certeza que quer excluir o hábito?`,
            "Ao fazer isso perderá todo o progresso ou falha do hábito.",
            [
              {
                text: "Cancelar",
                onPress: () => {
                  Alert.alert("Exclusão cancelada com sucesso!");
                },
              },
              {
                text: "Excluir",
                onPress: handleDeleteHabit,
              },
            ]
          );
        }}
      >
        <Image
          source={require("../../../assets/icons/trash.png")}
          style={styles.trashIcon}
        />
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    marginBottom: 20,
  },
  updateButton: {
    borderWidth: 1,
    borderColor: "white",
    width: 150,
    height: 50,
    marginRight: 10,
    alignItems: "center",
    justifyContent: "center",
    borderRadius: 10,
  },
  updateButtonText: {
    color: "white",
    fontWeight: "bold",
    fontSize: 18,
  },
  trashButton: {
    borderWidth: 1,
    borderColor: "#FF0044",
    borderRadius: 10,
    justifyContent: "center",
    alignItems: "center",
    width: 90,
  },
  trashIcon: {
    width: 25,
    height: 25,
  },
});

Temos agora eles já visualmente criados, podemos agora criar o restante, que são as funções que vão ficar ativando eles. Por enquanto não temos o nosso SQLite, por isso não temos como deixar funcionando, mas deixaremos criados.

import React from "react";
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  Image,
  Alert,
} from "react-native";

import { useNavigation } from "@react-navigation/native";

export default function UpdateExcludeButtons({
  habitInput,
  handleUpdate,
  habitArea,
}) {
	const navigation = useNavigation();

  function handleDeleteHabit() {
    navigation.navigate("Home", {
	    excludeArea: `${habitArea}`,
    });
  }

  return (
    <View style={styles.container}>
      <TouchableOpacity
        style={styles.updateButton}
        activeOpacity={0.8}
        onPress={() => {
          Alert.alert(
            "Ao prosseguir você vai atualizar o hábito, tem certeza?",
            "Ao fazer isso você pode mudar o hábito, frequência e notificação.",
            [
              {
                text: "Cancelar",
              },
              {
                text: "Atualizar",
                onPress: handleUpdate,
              },
            ]
          );
        }}
      >
        <Text style={styles.updateButtonText}>Atualizar</Text>
      </TouchableOpacity>
      <TouchableOpacity
        style={styles.trashButton}
        activeOpacity={0.8}
        onPress={() => {
          Alert.alert(
            `Você tem certeza que quer excluir o hábito?`,
            "Ao fazer isso perderá todo o progresso ou falha do hábito.",
            [
              {
                text: "Cancelar",
                onPress: () => {
                  Alert.alert("Exclusão cancelada com sucesso!");
                },
              },
              {
                text: "Excluir",
                onPress: handleDeleteHabit,
              },
            ]
          );
        }}
      >
        <Image
          source={require("../../../assets/icons/trash.png")}
          style={styles.trashIcon}
        />
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    marginBottom: 20,
  },
  updateButton: {
    borderWidth: 1,
    borderColor: "white",
    width: 150,
    height: 50,
    marginRight: 10,
    alignItems: "center",
    justifyContent: "center",
    borderRadius: 10,
  },
  updateButtonText: {
    color: "white",
    fontWeight: "bold",
    fontSize: 18,
  },
  trashButton: {
    borderWidth: 1,
    borderColor: "#FF0044",
    borderRadius: 10,
    justifyContent: "center",
    alignItems: "center",
    width: 90,
  },
  trashIcon: {
    width: 25,
    height: 25,
  },
});

Com isso feito, nós podemos ir na “HabitPage” para poder criar o handle de criação de hábito e também o de atualizar hábito. “Pages → HabitPage → index.jsx”


import React, { useEffect, useRef, useState } from "react";
import { useNavigation } from "@react-navigation/native";

import SelectHabit from "../../Components/HabitPage/SelectHabit";
import SelectFrequency from "../../Components/HabitPage/SelectFrequency";
import Notification from "../../Components/HabitPage/Notification";
import TimeDatePicker from "../../Components/HabitPage/TimeDataPicker";

import {
  View,
  Text,
  StyleSheet,
  Image,
  TouchableOpacity,
  ScrollView,
  Alert,
} from "react-native";

export default function HabitPage({ route }) {
	const navigation = useNavigation();
	const [habitInput, setHabitInput] = useState();
  const [frequencyInput, setFrequencyInput] = useState();
  const [notificationToggle, setNotificationToggle] = useState();
  const [dayNotification, setDayNotification] = useState();
  const [timeNotification, setTimeNotification] = useState();

	const { create, habit } = route.params;

		function handleCreateHabit() {
    if (
      habitInput === undefined ||
      frequencyInput === undefined
    ) {
      Alert.alert(
        "Você precisa selecionar um hábito e frequência para continuar"
      );
    } else if (
      notificationToggle === true &&
      frequencyInput === "Diário" &&
      timeNotification === undefined
    ) {
      Alert.alert("Você precisa dizer o horário da notificação!");
    } else if (
      notificationToggle === true &&
      frequencyInput === "Diário" &&
      dayNotification === undefined &&
      timeNotification === undefined
    ) {
      Alert.alert(
        "Você precisa dizer a frequência e o horário da notificação!"
      );
    } else {
	     navigation.navigate("Home", {
         createdHabit: `Created in ${habit?.habitArea}`,
       });
    }
  }

  function handleUpdateHabit() {
    if (notificationToggle === true && !dayNotification && !timeNotification) {
      Alert.alert("Você precisa colocar a frequência e horário da notificação");
    } else {
      navigation.navigate("Home", {
        updatedHabit: `Updated in ${habit?.habitArea}`,
      });
    }
  }

  return (
    <View style={styles.container}>
      <ScrollView>
        <View>
          <TouchableOpacity
            style={styles.bakcPageBtn}
            onPress={() => navigation.goBack()}
          >
            <Image
              source={require("../../assets/icons/arrowBack.png")}
              style={styles.arrowBack}
            />
          </TouchableOpacity>
          <View style={styles.mainContent}>
            <Text style={styles.title}>Configurações {"\\n"} de hábito</Text>
            <Text style={styles.inputText}>Área</Text>
            <View style={styles.inputContainer}>
              <Text style={styles.area}>{habitArea}</Text>
            </View>

            <Text style={styles.inputText}>Hábito</Text>
            <SelectHabit habit={habit} habitInput={setHabitInput} />

            <Text style={styles.inputText}>Frequência</Text>
            <SelectFrequency
              habitFrequency={habit?.habitFrequency}
              frequencyInput={setFrequencyInput}
            />

            {frequencyInput === "Mensal" ? null : (
              <Notification
                notificationToggle={notificationToggle}
                setNotificationToggle={setNotificationToggle}
              />
            )}

            {notificationToggle ? (
              frequencyInput === "Mensal" ? null : (
                <TimeDatePicker
                  frequency={frequencyInput}
                  dayNotification={dayNotification}
                  timeNotification={timeNotification}
                  setDayNotification={setDayNotification}
                  setTimeNotification={setTimeNotification}
                />
              )
            ) : null}
          </View>
        </View>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "rgba(21, 21, 21, 0.98)",
  },
  bakcPageBtn: {
    width: 40,
    height: 40,
    margin: 25,
  },
  arrowBack: {
    width: 40,
    height: 40,
  },
  mainContent: {
    width: 250,
    alignSelf: "center",
  },configButton: {
    alignItems: "center",
  },
  title: {
    fontWeight: "bold",
    textAlign: "center",
    color: "white",
    fontSize: 30,
  },
  inputText: {
    color: "white",
    fontSize: 16,
    marginTop: 35,
    marginBottom: 10,
    marginLeft: 5,
  },
  inputContainer: {
    borderWidth: 1,
    borderColor: "#FFFFFF",
    borderRadius: 10,
    paddingHorizontal: 20,
    paddingVertical: 15,
  },
  area: {
    color: "#BBBBBB",
    fontSize: 15,
  },
});

Dentro das funções nós temos verificações, que são para sabermos se está tudo corretamente preenchido, pois se não estiver, vai dar erro e a pessoa não conseguirá criar/atualizar o hábito.

Agora, falta os botões, que é o de criar o hábito e os que criamos, para excluir e atualizar.

import React, { useEffect, useRef, useState } from "react";
import {
  View,
  Text,
  StyleSheet,
  Image,
  TouchableOpacity,
  Alert,
  ScrollView,
} from "react-native";

import { useNavigation } from "@react-navigation/native";

import SelectHabit from "../../Components/HabitPage/SelectHabit";
import SelectFrequency from "../../Components/HabitPage/SelectFrequency";
import Notification from "../../Components/HabitPage/Notification";
import TimeDatePicker from "../../Components/HabitPage/TimeDatePicker";
import UpdateExcludeButtons from "../../Components/HabitPage/UpdateExcludeButtons";
import DefaultButton from "../../Components/Common/DefaultButton";

export default function HabitPage({ route }) {
	const navigation = useNavigation();
	const [habitInput, setHabitInput] = useState();
  const [frequencyInput, setFrequencyInput] = useState();
  const [notificationToggle, setNotificationToggle] = useState();
  const [dayNotification, setDayNotification] = useState();
  const [timeNotification, setTimeNotification] = useState();

	const { create, habit } = route.params;

	function handleCreateHabit() {
    if (habitInput === undefined || frequencyInput === undefined) {
      Alert.alert(
        "Você precisa selecionar um hábito e frequência para continuar"
      );
    } else if (
      notificationToggle === true &&
      frequencyInput === "Diário" &&
      timeNotification === undefined
    ) {
      Alert.alert("Você precisa dizer o horário da notificação!");
    } else if (
      notificationToggle === true &&
      frequencyInput === "Diário" &&
      dayNotification === undefined &&
      timeNotification === undefined
    ) {
      Alert.alert(
        "Você precisa dizer a frequência e o horário da notificação!"
      );
    } else {
	     navigation.navigate("Home", {
         createdHabit: `Created in ${habitArea}`,
       });
    }
  }

  function handleUpdateHabit() {
    if (notificationToggle === true && !dayNotification && !timeNotification) {
      Alert.alert("Você precisa colocar a frequência e horário da notificação");
    } else {
      navigation.navigate("Home", {
        updatedHabit: `Updated in ${habitArea}`,
      });
    }
  }

  return (
    <View style={styles.container}>
      <ScrollView>
        <View>
          <TouchableOpacity
            style={styles.bakcPageBtn}
            onPress={() => navigation.goBack()}
          >
            <Image
              source={require("../../assets/icons/arrowBack.png")}
              style={styles.arrowBack}
            />
          </TouchableOpacity>
          <View style={styles.mainContent}>
            <Text style={styles.title}>Configurações {"\\n"} de hábito</Text>
            <Text style={styles.inputText}>Área</Text>
            <View style={styles.inputContainer}>
              <Text style={styles.area}>{habitArea}</Text>
            </View>

            <Text style={styles.inputText}>Hábito</Text>
            <SelectHabit
              area={habitArea}
              currentHabit={habitName}
              habitInput={setHabitInput}
            />

            <Text style={styles.inputText}>Frequência</Text>
            <SelectFrequency
              currentFrequency={habitFrequency}
              frequencyInput={setFrequencyInput}
            />

            <Notification
              habitName={habitInput}
              notificationToggle={notificationToggle}
              setNotificationToggle={setNotificationToggle}
            />

            {notificationToggle ? (
              <TimeDatePicker
                frequency={frequencyInput}
                dayNotification={dayNotification}
                timeNotification={timeNotification}
                setDayNotification={setDayNotification}
                setTimeNotification={setTimeNotification}
              />
            ) : null}

            {create === false ? (
              <UpdateExcludeButtons
                handleUpdate={handleUpdateHabit}
                habitArea={habitArea}
                habitInput={habitInput}
              />
            ) : (
              <View style={styles.configButton}>
                <DefaultButton
                  buttonText={"Criar"}
                  handlePress={handleCreateHabit}
                  width={250}
                  height={50}
                />
              </View>
            )}
          </View>
        </View>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "rgba(21, 21, 21, 0.98)",
  },
  bakcPageBtn: {
    width: 40,
    height: 40,
    margin: 25,
  },
  arrowBack: {
    width: 40,
    height: 40,
  },
  mainContent: {
    width: 250,
    alignSelf: "center",
  },configButton: {
    alignItems: "center",
  },
  title: {
    fontWeight: "bold",
    textAlign: "center",
    color: "white",
    fontSize: 30,
  },
  inputText: {
    color: "white",
    fontSize: 16,
    marginTop: 35,
    marginBottom: 10,
    marginLeft: 5,
  },
  inputContainer: {
    borderWidth: 1,
    borderColor: "#FFFFFF",
    borderRadius: 10,
    paddingHorizontal: 20,
    paddingVertical: 15,
  },
  area: {
    color: "#BBBBBB",
    fontSize: 15,
  },
});

Você pode notar que ao fazermos a navegação para a home, temos parâmetros sendo passados. Isso é por que nós vamos atualizar a página ao navegarmos para a home.
Por enquanto não mexeremos na home, pois isso ficará a cargo da criação do hábito.