Merge branch 'master' into 'main'

Master

See merge request !1

src/pages/Dashboard.tsx

+import {
+  collection,
+  onSnapshot,
+  query,
+  QuerySnapshot,
+  where,
+} from "firebase/firestore";
+import React, { useEffect, useState } from "react";
+import { useAuthState } from "react-firebase-hooks/auth";
+import { useHistory } from "react-router";
+import { auth, db, logout } from "../config/firebase-config";
+
+function Dashboard() {
+  const [user, loading, error] = useAuthState(auth);
+  const [name, setName] = useState("");
+  const history = useHistory();
+
+  const fetchUserName = async () => {
+    try {
+      const q = await query(
+        collection(db, "users"),
+        where("uid", "==", user?.uid)
+      );
+      const unsubscribe = onSnapshot(q, (querySnapshot: QuerySnapshot) => {
+        querySnapshot.forEach((doc) => {
+          setName(doc.data().name);
+        });
+      });
+    } catch (err) {
+      console.error(err);
+      alert("An error occured while fetching user data");
+    }
+  };
+
+  useEffect(() => {
+    if (loading) return;
+    if (!user) return history.replace("/");
+    fetchUserName();
+  }, [user, loading]);
+
+  return (
+    <div className="dashboard">
+      <div className="dashboard__container">
+        Logged in as
+        <div>{name}</div>
+        <div>{user?.email}</div>
+        <button className="dashboard__btn" onClick={logout}>
+          Logout
+        </button>
+      </div>
+    </div>
+  );
+}
+export default Dashboard;

src/pages/Home.tsx

+import React from "react";
+import { Link } from "react-router-dom";
+
+const Home = () => {
+  return (
+    <div>
+      <Link to="/login">
+        <button>Login</button>
+      </Link>
+      <Link to="/register">
+        <button>Register</button>
+      </Link>
+    </div>
+  );
+};
+
+export default Home;

src/pages/Login.tsx

+import React, { useEffect, useState } from "react";
+import { Link, useHistory } from "react-router-dom";
+import { auth, signWithEmailAndPassword } from "../config/firebase-config";
+import { useAuthState } from "react-firebase-hooks/auth";
+function Login() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [user, loading, error] = useAuthState(auth);
+  const history = useHistory();
+  useEffect(() => {
+    if (loading) {
+      // maybe trigger a loading screen
+      return;
+    }
+    if (user) history.replace("/dashboard");
+  }, [user, loading]);
+
+  if (loading) return <div>Loading....</div>;
+  return (
+    <div className="login">
+      <div className="login__container">
+        <input
+          type="text"
+          className="login__textBox"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          placeholder="E-mail Address"
+        />
+        <input
+          type="password"
+          className="login__textBox"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          placeholder="Password"
+        />
+        <button
+          className="login__btn"
+          onClick={() => signWithEmailAndPassword(email, password)}
+        >
+          Login
+        </button>
+      </div>
+    </div>
+  );
+}
+export default Login;

src/pages/Register.tsx

+import React, { useEffect, useState } from "react";
+import { useAuthState } from "react-firebase-hooks/auth";
+import { Link, useHistory } from "react-router-dom";
+import { auth, registerWithEmailAndPassword } from "../config/firebase-config";
+
+function Register() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [name, setName] = useState("");
+  const [user, loading, error] = useAuthState(auth);
+  const history = useHistory();
+  const register = () => {
+    if (!name) alert("Please enter name");
+    registerWithEmailAndPassword(name, email, password);
+  };
+  useEffect(() => {
+    if (loading) return;
+    if (user) history.replace("/dashboard");
+  }, [user, loading]);
+  return (
+    <div className="register">
+      <div className="register__container">
+        <input
+          type="text"
+          className="register__textBox"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          placeholder="Full Name"
+        />
+        <input
+          type="text"
+          className="register__textBox"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          placeholder="E-mail Address"
+        />
+        <input
+          type="password"
+          className="register__textBox"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          placeholder="Password"
+        />
+        <button className="register__btn" onClick={register}>
+          Register
+        </button>
+        <div>
+          Already have an account? <Link to="/">Login</Link> now.
+        </div>
+      </div>
+    </div>
+  );
+}
+export default Register;

src/react-app-env.d.ts

+/// <reference types="react-scripts" />

tsconfig.json

+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ]
+}