Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Notas sem cores

As notas que são mostradas no app não estão aparecendo as cores de cada categoria.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

O codigo do nota.js está assim:

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

export function Nota({item}) {
  const categorias = {Pessoal: "#FF924F", Outros: "#00911F", Trabalho: "#2F71EB"}
  const estilos = styleFunction(categorias[item.categoria]) //vai ser recebido pelo banco de dados

  return (
    <View style={estilos.cartao}>
      <Text style={estilos.titulo}>{item.titulo} </Text>
      <Text style={estilos.categoria}>{item.categoria} </Text>
      <Text style={estilos.texto} numberOfLines={5}>{item.texto}</Text>
    </View>
  )
}

notaEditor.js:

import React, { useState } from "react"
import { Modal, View, Text, TextInput, TouchableOpacity, StyleSheet, ScrollView } from "react-native"
import {Picker} from "@react-native-picker/picker"
import { adicionaNota } from "../servicos/Notas"

export default function NotaEditor({mostraNotas}) {

  const [titulo, setTitulo] = useState("")
  const [categoria, setCategoria] = useState("Pessoal") //Pessoal | Trabalho | Outros  esse valor sera um picker/selecionavel
  const [texto, setTexto] = useState("")
  const [modalVisivel, setModalVisivel] = useState(false)

  async function salvaNota() {
    const umaNota = {
      titulo: titulo,
      catagoria: categoria,
      texto: texto,
    }
    await adicionaNota(umaNota)
    mostraNotas()
  }

  return(
    <>
      <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisivel}
        onRequestClose={() => {setModalVisivel(false)}}
      >
        <View style={estilos.centralizaModal}>
          <ScrollView showsVerticalScrollIndicator={false}>
            <View style={estilos.modal}>
              <Text style={estilos.modalTitulo}>Criar nota</Text>
              <Text style={estilos.modalSubTitulo}>Título da nota</Text>
              <TextInput 
                style={estilos.modalInput}
                onChangeText={novoTitulo => setTitulo(novoTitulo)}
                placeholder="Digite um título"
                value={titulo}/>
              <Text style={estilos.modalSubTitulo}>Categoria</Text>
              <View style={estilos.modalPicker}>
                <Picker
                  selectedValue={categoria}
                  onValueChange={novaCategoria => setCategoria(novaCategoria)}>
                    <Picker.Item label="Pessoal" value="Pessoal"/>
                    <Picker.Item label="Trabalho" value="Trabalho"/>
                    <Picker.Item label="Outros" value="Outros"/>
                </Picker>
              </View>

              <Text style={estilos.modalSubTitulo}>Conteúdo da nota</Text>
              <TextInput 
                style={estilos.modalInput}
                multiline={true}
                numberOfLines={3}
                onChangeText={novoTexto => setTexto(novoTexto)}
                placeholder="Digite aqui seu lembrete"
                value={texto}/>
              <View style={estilos.modalBotoes}>
                <TouchableOpacity style={estilos.modalBotaoSalvar} onPress={() => {salvaNota()}}>
                  <Text style={estilos.modalBotaoTexto}>Salvar</Text>
                </TouchableOpacity>
                <TouchableOpacity style={estilos.modalBotaoCancelar} onPress={() => {setModalVisivel(false)}}>
                  <Text style={estilos.modalBotaoTexto}>Cancelar</Text>
                </TouchableOpacity>
              </View>
            </View>
          </ScrollView>
        </View>
      </Modal>
      <TouchableOpacity onPress={() => {setModalVisivel(true)}} style={estilos.adicionarMemo}>
        <Text style={estilos.adicionarMemoTexto}>+</Text>
      </TouchableOpacity>
    </>
  )
}

Notas.js

import { db } from "./SQLite"
export function criaTabela() {
  db.transaction((transaction) => {
    transaction.executeSql("CREATE TABLE IF NOT EXISTS " +
      "Notas " +
      "(id INTEGER PRIMARY KEY AUTOINCREMENT, titulo TEXT, categoria TEXT, texto TEXT);")
  })
}
export async function adicionaNota(nota) {
  return new Promise((resolve) => {
    db.transaction((transaction) => {
      transaction.executeSql("INSERT INTO Notas (titulo, categoria, texto) VALUES (?, ?, ?);", [nota.titulo, nota.categoria, nota.texto], () => {
        resolve("Nota adicionada com sucesso!")
      })
    })
  })
}
export async function buscaNotas() {
  return new Promise((resolve) => {
    db.transaction((transaction) => {
      transaction.executeSql("SELECT * FROM Notas;", [], (transaction, resultado) => {
        resolve(resultado.rows._array)
      })
    })
  })
}
4 respostas

Olhai no console .log do notaEditor e categoria está sendo passado como null, mas não sei o porquê

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Olá Gustavo, tudo bem?

Obrigado por compartilhar a sua pergunta no fórum. Gostaríamos de ajudar a encontrar uma solução para o problema que você está enfrentando. Se possível, poderia compartilhar o link do seu projeto conosco? Assim, poderemos testá-lo e verificar os erros que você está enfrentando. Muito obrigado pelo seu tempo e colaboração. Estamos à disposição para ajudar da melhor maneira possível.

Oi André. o projeto está nesse repositório do GitHub.

solução!

Ei Gustavo, desculpa a demora...

Vamos lá, o que está acontecendo é um detalhe muito pequeno que acaba passando despercebido mesmo, é comum acontecer. No seu arquivo NotaEditor.js, nas funções salvaNota() e modificaNota() você escreveu: catagoria: categoria, por isso que na hora de salvar no banco de dados ele ficava null. Ele tentava achar "categoria", mas só tinha o campo "catagoria". Modificando essas duas linhas a sua aplicação funciona! Pra facilitar, vou deixar o código das duas funções corrigidas abaixo:

  async function salvaNota() {
    const umaNota = {
      titulo: titulo,
      categoria: categoria,
      texto: texto,
    }
    await adicionaNota(umaNota)
    mostraNotas()
    limpaModal()
  }

  async function modificaNota() {
    const umaNota = {
      titulo: titulo,
      categoria: categoria,
      texto: texto,
      id: notaSelecionada.id
    }
    await atualizaNota(umaNota)
    mostraNotas()
    setModalVisivel(false)
  }
Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software