Tela de plays criada

App.js

@@ -1,6 +1,7 @@
 import React from "react";
-import { Text, View, StyleSheet, StatusBar } from "react-native";
+import { Text, View, StyleSheet } from "react-native";
 import { NativeRouter, Route, Routes } from "react-router-native";
+import { StatusBar } from "expo-status-bar";
 import AppLoading from "expo-app-loading";
 import {
   useFonts,
@@ -13,31 +14,46 @@ import HomeCategoria from "./components/HomeCategoria/HomeCategoria";
 import AddCard from "./components/AddCard/AddCard";
 import ConfirmDelete from "./components/ConfirmDelete/ConfirmDelete";
 import AddCategoria from "./components/AddCategoria/AddCategoria";
+import { SafeAreaView } from "react-native-safe-area-context";
+import * as NavigationBar from "expo-navigation-bar";
+import PlayCards from "./components/PlayCards/PlayCards";
 
 export default function App() {
   let [fontsLoaded] = useFonts({
     Epilogue_400Regular,
     Epilogue_500Medium,
     Epilogue_700Bold,
   });
+
+  NavigationBar.setBackgroundColorAsync("#111");
+  NavigationBar.setButtonStyleAsync("light");
+
   if (!fontsLoaded) {
     return <AppLoading />;
   } else {
     return (
-      <NativeRouter>
-        <Routes>
-          <Route exact path="/" element={<Home />} />
-          <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/:id"
-            element={<ConfirmDelete />}
-          />
-        </Routes>
-      </NativeRouter>
+      <SafeAreaView style={styles.container}>
+        <NativeRouter>
+          <Routes>
+            <Route exact path="/" element={<Home />} />
+            <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/:id"
+              element={<ConfirmDelete />}
+            />
+
+            <Route
+              path="/play-cards/:categoriaId/:prevCard"
+              element={<PlayCards />}
+            />
+          </Routes>
+        </NativeRouter>
+        <StatusBar style="light" backgroundColor="#1A1A1A" hidden={false} />
+      </SafeAreaView>
     );
   }
 }

app.json

@@ -28,6 +28,10 @@
     },
     "web": {
       "favicon": "./assets/favicon.png"
+    },
+    "androidStatusBar": {
+      "backgroundColor": "#1a1a1a",
+      "translucent": false
     }
   }
 }

components/BtnCategorias/BtnCategorias.jsx

@@ -2,17 +2,16 @@ import React from 'react';
 import { View, Text, TouchableOpacity } from 'react-native';
 import { styles } from './BtnCategorias.styles';
 //import { BtnCategoriasWrapper } from './BtnCategorias.styles';
-import CategoriasIcon from '../../assets/icons/categorias.svg'
+import BackIcon from '../../assets/icons/chevron-left-solid.svg'
 import { Link } from 'react-router-native'
 
 
 const BtnCategorias = (props) => { 
 
   return (
-    <Link to='/' component={TouchableOpacity} style={styles.button}>
+    <Link to='/' component={TouchableOpacity} style={[styles.button]}>
       <View style={styles.view}> 
-        {/*<CategoriasIcon width={20} height={20} fill={'#1A1A1A'} />*/}
-        <Text style={styles.text}>Voltar</Text>
+        <BackIcon width={30} height={30} fill={'#1a1a1a'} />
       </View>
     </Link>
   );

components/BtnCategorias/BtnCategorias.styles.js

@@ -7,8 +7,6 @@ export const styles = StyleSheet.create({
     display: "flex",
     flexDirection: "row",
     padding: 10,
-    paddingLeft: 20,
-    paddingRight: 20,
     alignItems: "center",
     justifyContent: "center",
     borderRadius: 50,

components/BtnPlay/BtnPlay.jsx

@@ -6,15 +6,15 @@ import Play from '../../assets/icons/play-solid.svg'
 import { Link } from 'react-router-native'
 
 
-const BtnCategorias = (props) => { 
+const BtnPlay = (props) => { 
 
   return (
-    <Link to='/' component={TouchableOpacity} style={styles.button}>
+    <Link to={`/play-cards/${props.categoriaId}/-1`} component={TouchableOpacity} style={styles.button}>
       <View style={styles.view}> 
         <Play width={35} height={35} fill={'#1A1A1A'} />
       </View>
     </Link>
   );
 }
 
-export default BtnCategorias;
+export default BtnPlay;

components/Card/Card.jsx

@@ -7,7 +7,7 @@ import { LinearGradient } from 'expo-linear-gradient';
 import LampIconOn from '../../assets/icons/lamp-on.svg';
 import LampIconOff from '../../assets/icons/lamp-off.svg';
 import StarIcon from '../../assets/icons/star.svg';
-import TurnCardIcon  from '../../assets/icons/arrows-rotate-solid.svg'
+import TurnCardIcon  from '../../assets/icons/repeat-solid.svg'
 import TrashIcon  from '../../assets/icons/trash-solid.svg'
 import CardsDB from '../../services/sqlite/Card'
 import DetalhesDB from '../../services/sqlite/Detalhes'
@@ -19,7 +19,6 @@ class Card extends React.Component {
     detalhes: [],
     id: this.props.id,
     categoriaId: this.props.categoriaId,
-    categoriaNome: this.props.categoriaNome,
     cor: this.props.cor,
     titulo: this.props.titulo,
     resposta: this.props.resposta,
@@ -88,7 +87,7 @@ class Card extends React.Component {
         <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}
+        {(card.detalhes.length > 0) ? <Text style={[verso_styles.cardTitulo, {marginBottom: 10, marginTop: 15}]}>Detalhes</Text> : null}
              <FlatList
                 data={card.detalhes}
                 renderItem={renderDetalhe}
@@ -108,29 +107,4 @@ function getColors(colorStr){
 
 }
 
-function deleteCard(cardId){
-
-  //delete
-  CardsDB.removeCard(cardId)
-  .then( id => {
-      console.log('Card deleted with id: '+ id)
-      deleteDetalhes(cardId)
-  })
-  .catch( err => console.log(err) )
-
-
-}
-
-function deleteDetalhes(cardId){
-
-  //delete
-  DetalhesDB.removeDetalhe(cardId)
-  .then( cardId => {
-      console.log('Detalhes deleted with cardId: '+ cardId)
-  })
-  .catch( err => console.log(err) )
-
-
-}
-
 export default Card;

components/Card/Verso.styles.js

@@ -136,7 +136,7 @@ export const verso_styles = StyleSheet.create({
   },
 
   categoryItem: {
-    marginTop: 10,
+    marginBottom: 10,
     borderRadius: 10,
     width: "100%",
   },

components/CardList/CardList.jsx

@@ -10,16 +10,23 @@ import CardsDB from '../../services/sqlite/Card'
 class CardList extends React.Component {
 
   state = {
-    cards: 0,
+    cards: null,
     categoriaId: this.props.categoriaId,
-    categoriaNome: this.props.categoriaNome,
     cor: this.props.cor,
   }
 
   componentDidMount() {
     this.getCards(this.state.categoriaId);
   }
 
+  componentDidUpdate(prevProps) {
+    if(this.props.categoriaId != prevProps.categoriaId){
+      this.getCards(this.state.categoriaId);
+    }
+
+  }
+
+
   getCards = (categoriaId) => {
     console.log(categoriaId)
     CardsDB.allCardsCategory(categoriaId).then(res => {
@@ -31,12 +38,16 @@ class CardList extends React.Component {
   render(){
     const renderCard = ({item}) => {
       return (
-        <Card titulo={item.titulo} resposta={item.resposta} cor={this.state.cor} id={item.id} categoriaId={item.categoriaId} categoriaNome={this.state.categoriaNome} />
+        <Card titulo={item.titulo} resposta={item.resposta} cor={this.state.cor} id={item.id} categoriaId={item.categoriaId} />
       );
     }
-    if (this.state.cards != 0 && Object.keys(this.state.cards).length <= 0){
+    if (this.state.cards != null && Object.keys(this.state.cards).length <= 0){
       return(
-      <Text style={styles.semCategoriasMensagem}>Crie um novo card.</Text>
+        <View style={styles.msgCriar}>
+      <Text style={styles.semCategoriasMensagem}>Clique no</Text>
+      <Text style={styles.exampleAddBtn}>+</Text>
+      <Text style={styles.semCategoriasMensagem}>para adicionar um card</Text>
+      </View>
       );
     }
 

components/CardList/CardList.styles.js

@@ -7,11 +7,33 @@ export const styles = StyleSheet.create({
     paddingRight: 20 - vw(3),
   },
 
-  semCategoriasMensagem: {
-    marginTop: 10,
-    color: "#f2f2f2",
+  msgCriar: {
+    backgroundColor: "#2b2b2b",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    width: vw(60),
+    marginLeft: vh(10),
+    marginTop: vh(18),
+    borderRadius: 20,
+  },
+
+  exampleAddBtn: {
+    color: "#2b2b2b",
     textAlign: "center",
     fontFamily: "Epilogue_500Medium",
-    fontSize: 20,
+    fontSize: 40,
+    backgroundColor: "#1a1a1a",
+    width: 60,
+    paddingBottom: 10,
+    borderRadius: 50,
+  },
+
+  semCategoriasMensagem: {
+    margin: 10,
+    color: "#1a1a1a",
+    textAlign: "center",
+    fontFamily: "Epilogue_700Bold",
+    fontSize: 25,
   },
 });

components/Categoria/Categoria.jsx

@@ -4,16 +4,25 @@ import { styles } from './Categoria.styles';
 //import { CategoriasWrapper } from './Categorias.styles';
 import CardsIcon from '../../assets/icons/cards.svg'
 import { Link } from 'react-router-native'
+import TrashIcon  from '../../assets/icons/trash-solid.svg'
+import EditIcon  from '../../assets/icons/pen-solid.svg'
 
 const Categoria = (props) => {
   color = "#" + props.cor.split("-")[0]
 
-  let [editMode, setEditMode] = useState(false)
+  const [editMode, setEditMode] = useState(false)
 
   const menuEditMode = () => {
     if (editMode){
       return(
-        <TouchableOpacity><Text style={styles.nome}>Deletar</Text></TouchableOpacity>
+        <View style={styles.edit_buttons}>
+       <Link to={`/`} style={styles.edit_button}>
+       <EditIcon width={20} height={20} fill={'#f2f2f2'} />
+      </Link>
+      <Link to={`/confirm-delete/Categoria/${props.id}/${props.id}`} style={styles.trash_button}>
+        <TrashIcon width={20} height={20} fill={'#f2f2f2'} />
+      </Link>
+     </View>
       )
     } else {
       return(
@@ -26,7 +35,7 @@ const Categoria = (props) => {
   }
 
   return(
-    <Link to={`/home-categoria/${props.id}`} component={TouchableOpacity} onLongPress={() => editMode ? setEditMode(false) : setEditMode(true)}>
+    <Link to={`/home-categoria/${props.id}`} component={TouchableOpacity} underlayColor="#ffffff00" onLongPress={() => editMode ? setEditMode(false) : setEditMode(true)}>
       <View style={[styles.categoria, {borderLeftColor: color}]}>
       <Text style={styles.nome}>{props.nome}</Text>
       {menuEditMode()}

components/Categoria/Categoria.styles.js

@@ -3,11 +3,11 @@ import { vw, vh, vmin, vmax } from "react-native-expo-viewport-units";
 
 export const styles = StyleSheet.create({
   nome: {
-    marginTop: 10,
     color: "#f2f2f2",
-    textAlign: "center",
+    textAlign: "left",
     fontFamily: "Epilogue_500Medium",
-    fontSize: 20,
+    fontSize: 18,
+    width: vw(53),
   },
   categoria: {
     display: "flex",
@@ -21,6 +21,27 @@ export const styles = StyleSheet.create({
     borderLeftWidth: 10,
   },
 
+  edit_buttons: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    borderRadius: 8,
+  },
+
+  trash_button: {
+    backgroundColor: "#c0392b",
+    padding: 10,
+    borderRadius: 50,
+  },
+
+  edit_button: {
+    backgroundColor: "#16a085",
+    padding: 10,
+    marginRight: 15,
+    borderRadius: 50,
+  },
+
   textQuantCards: {
     color: "#f2f2f2",
     fontFamily: "Epilogue_500Medium",