Skip to content

Commit

Permalink
Routers ajustados para receber somente o Id
Browse files Browse the repository at this point in the history
  • Loading branch information
@AuroraDark
AuroraDark committed Apr 21, 2022
1 parent 3eae97a commit 35f8b9b
Show file tree
Hide file tree
Showing 12 changed files with 273 additions and 161 deletions.
12 changes: 3 additions & 9 deletions App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,19 +27,13 @@ export default function App() {
<NativeRouter>
<Routes>
<Route exact path="/" element={<Home />} />
<Route
path="/home-categoria/:id/:cor/:nome"
element={<HomeCategoria />}
/>
<Route
path="/add-card/:categoriaId/:cor/:nome"
element={<AddCard />}
/>
<Route path="/home-categoria/:id" element={<HomeCategoria />} />
<Route path="/add-card/:categoriaId" element={<AddCard />} />

<Route path="/add-categoria" element={<AddCategoria />} />

<Route
path="/confirm-delete/:who/:categoriaId/:categoriaNome/:cor/:nome/:id/"
path="/confirm-delete/:who/:categoriaId/:id"
element={<ConfirmDelete />}
/>
</Routes>
Expand Down
1 change: 1 addition & 0 deletions assets/icons/pen-solid.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
229 changes: 128 additions & 101 deletions components/AddCard/AddCard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,26 +6,45 @@ import { LinearGradient } from 'expo-linear-gradient';
import CategoriasIcon from '../../assets/icons/categorias.svg'
import { Link } from 'react-router-native';
import { vw, vh, vmin, vmax } from "react-native-expo-viewport-units";
import CardsDB from '../../services/sqlite/Card'
import DetalhesDB from '../../services/sqlite/Detalhes'
import CardsDB from '../../services/sqlite/Card';
import DetalhesDB from '../../services/sqlite/Detalhes';
import CategoriaDB from '../../services/sqlite/Categoria';

const AddCard = () => {
// Recebe os parametros vindos do router
const { categoriaId, cor, nome } = useParams()
function withParams(Component) {
return props => <Component {...props} params={useParams()} />;
}

// Cria os states para atualizar enquanto o usuário modifica
const [titulo, setTitulo] = useState('')
const [resposta, setResposta] = useState('')
const [tituloDetalhe, setTituloDetalhe] = useState('')
const [respostaDetalhe, setRespostaDetalhe] = useState('')
const [detalheVisibility, setDetalheVisibility] = useState(false)
const [adicionarVisibility, setAdicionarVisibility] = useState(true)
const [idDetalhe, setIdDetalhe] = useState(0)
const [detalhes, setDetalhes] = useState([])
const [detalheSelected, setDetalheSelected] = useState(-1)

// Pega as cores para formar o fundo gradiente
const gradientColors = getColors(cor)
class AddCard extends React.Component {

state = {
titulo: '',
resposta: '',
tituloDetalhe: '',
respostaDetalhe: '',
detalheVisibility: false,
adicionarVisibility: true,
idDetalhe: 0,
detalhes: [],
detalheSelected: -1,
categoria: {},
categoriaId: this.props.params.categoriaId
}

componentDidMount() {
this.getCategoria(this.state.categoriaId);
}

getCategoria = (idCategoria) => {
CategoriaDB.findCategoria(idCategoria).then(res => {
this.setState({
categoria: res,
});
}).catch(err=>err);
}

render (){

const { titulo, resposta, tituloDetalhe, respostaDetalhe, detalheVisibility, adicionarVisibility,idDetalhe, detalhes, detalheSelected, categoria, categoriaId } = this.state

const geraFlatList = () => {
console.log(detalhes.length)
Expand All @@ -45,7 +64,7 @@ const AddCard = () => {
}
}

function setaDetalhes(){
const setaDetalhes = () => {
if (detalheVisibility){
return(
<View style={styles.detalhe} >
Expand All @@ -54,7 +73,7 @@ const AddCard = () => {
placeholder="Título do detalhe..."
placeholderTextColor="#f2f2f2"
multiline={true}
onChangeText={novoTitulo => setTituloDetalhe(novoTitulo)}
onChangeText={novoTitulo => this.setState({tituloDetalhe: novoTitulo})}
/>
<TouchableOpacity style={styles.close_detalhe} onPress={() => escondeDetalhe()}>
<Text style={[styles.btn_card_text_x]}>x</Text>
Expand All @@ -66,14 +85,14 @@ const AddCard = () => {
textAlignVertical="top"
multiline={true}
numberOfLines={3}
onChangeText={novaResposta => setRespostaDetalhe(novaResposta)}
onChangeText={novaResposta => this.setState({respostaDetalhe: novaResposta})}
/>
</View>
)
}
}

function setaButtonAdicionar(){
const setaButtonAdicionar = () => {
if(adicionarVisibility && detalheSelected == -1 && !detalheVisibility){
return(
<TouchableOpacity style={[styles.btn_card, {backgroundColor: "#f2f2f2"}]} title="Adicionar Detalhe" onPress={() => exibeDetalhe()}>
Expand All @@ -83,7 +102,7 @@ const AddCard = () => {
}
}

function exibeSalvarDetalhe(){
const exibeSalvarDetalhe = () =>{
if (detalheVisibility){
return (
<TouchableOpacity style={[styles.btn_card, {backgroundColor: "#16a085"}]} title="Salvar Detalhe" onPress={() => salvarDetalhe()}>
Expand All @@ -94,44 +113,44 @@ const AddCard = () => {

}

function exibeDetalhe(){
setAdicionarVisibility(false)
setDetalheVisibility(true)
const exibeDetalhe = () =>{
this.setState({adicionarVisibility: false})
this.setState({detalheVisibility: true})
}

function escondeDetalhe(){
setAdicionarVisibility(true)
setDetalheVisibility(false)
setTituloDetalhe('')
setRespostaDetalhe('')
const escondeDetalhe = () =>{
this.setState({adicionarVisibility: true})
this.setState({detalheVisibility: false})
this.setState({tituloDetalhe: ''})
this.setState({respostaDetalhe: ''})
}

function salvarDetalhe() {
const salvarDetalhe = () => {
var novo_detalhe = {
id: idDetalhe,
titulo: tituloDetalhe,
resposta: respostaDetalhe
}
setDetalhes(detalhes.concat([novo_detalhe]))
setIdDetalhe(novo_detalhe.id + 1)
setTituloDetalhe('')
setRespostaDetalhe('')
setAdicionarVisibility(true)
setDetalheVisibility(false)
this.setState({detalhes: detalhes.concat([novo_detalhe])})
this.setState({idDetalhe: novo_detalhe.id + 1})
this.setState({tituloDetalhe: ''})
this.setState({respostaDetalhe: ''})
this.setState({adicionarVisibility: true})
this.setState({detalheVisibility: false})
}

function deletarDetalhe(){
const deletarDetalhe = () => {
var indexDetalhe = detalhes.findIndex(detalhe => detalhe.id == detalheSelected);
setDetalhes(detalhes.filter((_, i) => i !== indexDetalhe));
setDetalheSelected(-1)
this.setState({detalhes: detalhes.filter((_, i) => i !== indexDetalhe)})
this.setState({detalheSelected: -1})
}

function showMenuDetalhe(){
const showMenuDetalhe = () => {
if (detalheSelected != -1){
return (
<TouchableOpacity style={[styles.btn_card, {backgroundColor: "#c0392b"}]} onPress={() => deletarDetalhe()}>
<Text style={[styles.btn_card_text]}>Deletar</Text>
</TouchableOpacity>
<TouchableOpacity style={[styles.btn_card, {backgroundColor: "#c0392b"}]} onPress={() => deletarDetalhe()}>
<Text style={[styles.btn_card_text]}>Deletar</Text>
</TouchableOpacity>
);
}
}
Expand All @@ -144,11 +163,11 @@ const AddCard = () => {
isSelected = true
}

function selecionaDetalhe(){
const selecionaDetalhe = () => {
if (detalheSelected == item.id){
setDetalheSelected(-1)
this.setState({detalheSelected: -1})
}else{
setDetalheSelected(item.id)
this.setState({detalheSelected: item.id})
}
}
return (
Expand All @@ -159,60 +178,68 @@ const AddCard = () => {
);
}

return (
if (categoria.id != undefined) {
return (
// Constrói a visualização do card
<View style={styles.container}>
<View style={styles.header}>
<Text style={styles.titulo}>Novo Card</Text>
<View style={styles.categoria}>
<CategoriasIcon width={20} height={20} fill={'#f2f2f2'} />
<Text style={styles.categoryText}>{categoria.nome}</Text>
</View>
</View>

<View style={[styles.cardBody, styles.elevation]}>
<LinearGradient
// Background Linear Gradient
colors={getColors(categoria.cor)}
style={[styles.cardBody]}
>
<ScrollView style={styles.scrollView}>
<TextInput style={styles.cardTitulo}
placeholder="Título da questão..."
placeholderTextColor="#f2f2f2"
multiline={true}
onChangeText={novoTitulo => this.setState({titulo:novoTitulo})}
/>
<TextInput style={styles.cardResposta}
placeholder="Resposta..."
placeholderTextColor="#f2f2f2"
textAlignVertical="top"
multiline={true}
numberOfLines={3}
onChangeText={novaResposta => this.setState({resposta:novaResposta})}
/>

{geraFlatList()}
{setaDetalhes()}

</ScrollView>

{exibeSalvarDetalhe()}
{setaButtonAdicionar()}
{showMenuDetalhe()}
</LinearGradient>
</View>
<View style={styles.menu_footer}>
<Link to={`/home-categoria/${categoriaId}`} component={TouchableOpacity} style={[styles.btn_layout, styles.btn_right]} onPress={() => insertCard(titulo, resposta, categoriaId, detalhes)}>
<Text style={styles.btn_text}>Salvar</Text>
</Link>
<Link to={`/home-categoria/${categoriaId}`} component={TouchableOpacity} style={[styles.btn_layout, styles.btn_left]}>
<Text style={styles.btn_text}>Cancelar</Text>
</Link>
</View>
</View>
)
}else{
return(
<View style={styles.container}/>
)
}

// Constrói a visualização do card
<View style={styles.container}>
<View style={styles.header}>
<Text style={styles.titulo}>Novo Card</Text>
<View style={styles.categoria}>
<CategoriasIcon width={20} height={20} fill={'#f2f2f2'} />
<Text style={styles.categoryText}>{nome}</Text>
</View>
</View>

<View style={[styles.cardBody, styles.elevation]}>
<LinearGradient
// Background Linear Gradient
colors={gradientColors}
style={[styles.cardBody]}
>
<ScrollView style={styles.scrollView}>
<TextInput style={styles.cardTitulo}
placeholder="Título da questão..."
placeholderTextColor="#f2f2f2"
multiline={true}
onChangeText={novoTitulo => setTitulo(novoTitulo)}
/>
<TextInput style={styles.cardResposta}
placeholder="Resposta..."
placeholderTextColor="#f2f2f2"
textAlignVertical="top"
multiline={true}
numberOfLines={3}
onChangeText={novaResposta => setResposta(novaResposta)}
/>

{geraFlatList()}
{setaDetalhes()}
}

</ScrollView>

{exibeSalvarDetalhe()}
{setaButtonAdicionar()}
{showMenuDetalhe()}
</LinearGradient>
</View>
<View style={styles.menu_footer}>
<Link to={`/home-categoria/${categoriaId}/${cor}/${nome}`} component={TouchableOpacity} style={[styles.btn_layout, styles.btn_right]} onPress={() => insertCard(titulo, resposta, categoriaId, detalhes)}>
<Text style={styles.btn_text}>Salvar</Text>
</Link>
<Link to={`/home-categoria/${categoriaId}/${cor}/${nome}`} component={TouchableOpacity} style={[styles.btn_layout, styles.btn_left]}>
<Text style={styles.btn_text}>Cancelar</Text>
</Link>
</View>
</View>
)
}

/** Transforma as cores em HEXADECIMAL para construir o gradiente */
Expand Down Expand Up @@ -259,4 +286,4 @@ function insertDetalhes(detalhes, cardId){
}
}

export default AddCard
export default withParams(AddCard)
2 changes: 1 addition & 1 deletion components/BtnAdd/BtnAddCard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { Link } from 'react-router-native';
const BtnAddCard = (props) => {

return (
<Link to={`/add-card/${props.categoriaId}/${props.cor}/${props.nome}`} component={TouchableOpacity} style={styles.button}>
<Link to={`/add-card/${props.categoriaId}`} component={TouchableOpacity} style={styles.button}>
<Text style={styles.plus}>+</Text>
</Link >
);
Expand Down
11 changes: 5 additions & 6 deletions components/Card/Card.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,8 +58,7 @@ class Card extends React.Component {
>

{this.state.isTurned ? verso(this.state): frente(this.state)}
{console.log(`/confirm-delete/Card/${this.state.categoriaId}/${this.state.categoriaNome}/${this.state.cor}/${this.state.titulo}/${this.state.id}`)}
<Link to={`/confirm-delete/Card/${this.state.categoriaId}/${this.state.categoriaNome}/${this.state.cor}/${this.state.titulo}/${this.state.id}`} style={verso_styles.trash_button}>
<Link to={`/confirm-delete/Card/${this.state.categoriaId}/${this.state.id}`} style={verso_styles.trash_button}>
<TrashIcon width={20} height={20} fill={'#f2f2f2'} />
</Link>

Expand All @@ -76,17 +75,17 @@ class Card extends React.Component {
function frente(card){
return(
<View style={styles.scrollView}>
<ScrollView>
<View>
<Text style={styles.cardTitulo}>{card.titulo}</Text>
</ScrollView>
</View>
</View>
)
}

function verso(card){
return(
// Constrói a visualização do card
<ScrollView style={verso_styles.scrollView}>
<View style={verso_styles.scrollView}>
<Text style={verso_styles.cardTitulo}>{card.titulo}</Text>
<Text style={verso_styles.cardResposta}>{card.resposta}</Text>
{(card.detalhes.length > 0) ? <Text style={verso_styles.cardTitulo}>Detalhes</Text> : null}
Expand All @@ -96,7 +95,7 @@ class Card extends React.Component {
keyExtractor={item => item.id}
contentContainerStyle={styles.cardList}>
</FlatList>
</ScrollView>
</View>
);
}
}
Expand Down
Loading

0 comments on commit 35f8b9b

Please sign in to comment.