From 1d7838bfc854fecd57108b403c9435aa01b826a5 Mon Sep 17 00:00:00 2001
From: Sonia Vidal <svidal@asmws.com>
Date: Mon, 6 Sep 2021 13:50:28 +0200
Subject: [PATCH] ok
---
.gitignore | 1 +
src/application.tsx | 3 ++-
src/config/firebase.ts | 2 ++
src/config/firestore.ts | 7 +++++++
src/index.tsx | 1 +
src/pages/auth/Links.js | 13 +++++++------
src/pages/auth/login.tsx | 2 ++
src/pages/auth/register.tsx | 4 +++-
8 files changed, 25 insertions(+), 8 deletions(-)
create mode 100644 .gitignore
create mode 100644 src/config/firestore.ts
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 00000000..c2658d7d
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+node_modules/
diff --git a/src/application.tsx b/src/application.tsx
index dd087de7..e72e2d6f 100644
--- a/src/application.tsx
+++ b/src/application.tsx
@@ -8,10 +8,11 @@ import routes from './config/routes';
export interface IApplicationProps { }
-//Archivo para definir las rutas
+//Archivo para definir las rutas (Página INICIAL)
const Application: React.FunctionComponent<IApplicationProps> = props => {
const [loading, setLoading] = useState<boolean>(true);
+ //Comprobacion si el usuario pertenece a la base de datos con el auth de firebase:
useEffect(() => {
auth.onAuthStateChanged(user => {
if (user)
diff --git a/src/config/firebase.ts b/src/config/firebase.ts
index 78fcac6c..1a752699 100644
--- a/src/config/firebase.ts
+++ b/src/config/firebase.ts
@@ -18,6 +18,8 @@ export const Providers = {
// en todos nuestros comandos de base de firebase.
export const auth = firebase.auth();
+//export const db = Firebase.firestore();
+
// Por ultimo exportamos el objeto:
export default Firebase;
diff --git a/src/config/firestore.ts b/src/config/firestore.ts
new file mode 100644
index 00000000..7e78550f
--- /dev/null
+++ b/src/config/firestore.ts
@@ -0,0 +1,7 @@
+import fb from './firebase';
+import 'firebase/firestore';
+
+export const db = fb.firestore();
+
+//Exportamos el firestore para guardar colecciones, guardar datos.. etc
+export default db;
diff --git a/src/index.tsx b/src/index.tsx
index 9ae154f3..b37d6a92 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -5,6 +5,7 @@ import Application from './application';
import reportWebVitals from './reportWebVitals';
import 'bootswatch/dist/superhero/bootstrap.min.css';
+//import 'bootswatch/dist/cerulean/bootstrap.min.css';
ReactDOM.render(
<React.StrictMode>
diff --git a/src/pages/auth/Links.js b/src/pages/auth/Links.js
index 078d608b..95fe6b05 100644
--- a/src/pages/auth/Links.js
+++ b/src/pages/auth/Links.js
@@ -1,7 +1,7 @@
import React, { useEffect, useState } from "react";
import LinksForm from "./LinkForm";
-
-import Firebase from "../../config/firebase";
+//Importacion del firestore
+import db from "../../config/firestore";
//Importamos toast para mensajes dinamicos (instalamos librerÃa => npm install --save react-toastify)
import { toast } from "react-toastify";
@@ -14,7 +14,8 @@ const Links = () => {
//Hacemos la consulta para traernos todos los links de firebase. Es de manera asincrona asi que tenemos que usar async.
//Con onSnapshot hacemos que al renderizar aparaezca al instate.
const getLinks = async () => {
- Firebase.firestore.collection("links").onSnapshot((querySnapshot) => {
+
+ db.collection("links").onSnapshot((querySnapshot) => {
const docs = [];
querySnapshot.forEach((doc) => {
docs.push({ ...doc.data(), id: doc.id });
@@ -27,7 +28,7 @@ const Links = () => {
// Y creamos un toast para mandar un mensaje dimamico diciendo que lo hemos borrado
const onDeleteLink = async (id) => {
if (window.confirm("are you sure you want to delete this link?")) {
- await Firebase.firestore.collection("links").doc(id).delete();
+ await db.collection("links").doc(id).delete();
toast("Link Removed Successfully", {
type: "error", // error => color rojo
autoClose: 2000 // El mensaje se autocierra pasado 2 segundos
@@ -46,13 +47,13 @@ const Links = () => {
const addOrEditLink = async (linkObject) => {
try {
if (currentId === "") {
- await Firebase.firestore.collection("links").doc().set(linkObject);
+ await db.collection("links").doc().set(linkObject);
toast("New Link Added", {
type: "success", // success => color verde
autoClose: 2000 // El mensaje se autocierra pasado 2 segundos
});
} else {
- await Firebase.firestore.collection("links").doc(currentId).update(linkObject);
+ await db.collection("links").doc(currentId).update(linkObject);
toast("Link Updated Successfully", {
type: "info", // info => color azul
autoClose: 2000 // El mensaje se autocierra pasado 2 segundos
diff --git a/src/pages/auth/login.tsx b/src/pages/auth/login.tsx
index 5bd22113..6abccbf5 100644
--- a/src/pages/auth/login.tsx
+++ b/src/pages/auth/login.tsx
@@ -67,6 +67,7 @@ const LoginPage: React.FunctionComponent<IPageProps> = props => {
<AuthContainer header="Login">
<FormGroup>
<Input
+ style={{ color: "white" }}
type="email"
name="email"
id="email"
@@ -77,6 +78,7 @@ const LoginPage: React.FunctionComponent<IPageProps> = props => {
</FormGroup>
<FormGroup>
<Input
+ style={{ color: "white" }}
autoComplete="new-password"
type="password"
name="password"
diff --git a/src/pages/auth/register.tsx b/src/pages/auth/register.tsx
index f586f28b..8351e085 100644
--- a/src/pages/auth/register.tsx
+++ b/src/pages/auth/register.tsx
@@ -79,6 +79,7 @@ const RegisterPage: React.FunctionComponent<IPageProps> = props => {
<AuthContainer header="Register">
<FormGroup>
<Input
+ style={{ color: "white" }}
type="email"
name="email"
id="email"
@@ -90,7 +91,7 @@ const RegisterPage: React.FunctionComponent<IPageProps> = props => {
<FormGroup>
{/** El autocompletado es para que coincidan contrseñas*/}
<Input
-
+ style={{ color: "white" }}
autoComplete="new-password"
type="password"
name="password"
@@ -102,6 +103,7 @@ const RegisterPage: React.FunctionComponent<IPageProps> = props => {
</FormGroup>
<FormGroup>
<Input
+ style={{ color: "white" }}
autoComplete="new-password"
type="password"
name="confirm"
--
2.18.1