Merge pull request #20 from syeikhanritzmy/develop

Develop
syeikhanritzmy · Sep 28, 2022 · 871ec5e · 871ec5e
2 parents 70229c5 + 2ed465f
commit 871ec5e
Show file tree

Hide file tree

Showing 22 changed files with 1,056 additions and 332 deletions.
diff --git a/components/Card.jsx b/components/Card.jsx
@@ -18,7 +18,7 @@ export default function Cards() {
  <Card.Text className="text-black d-flex">
  <span>
  Some quick example text to build on the card title and make
- up the bulk of the card's content.
+ up the bulk of the card`s content.
  </span>
  </Card.Text>
  <Link href="/games">
@@ -37,7 +37,7 @@ export default function Cards() {
  <Card.Title>Multiplayer Game</Card.Title>
  <Card.Text className="text-black d-flex">
  <span>
- the bulk of the card's content. Some quick example text to
+ the bulk of the card`s content. Some quick example text to
  build on the card title and make up
  </span>
  </Card.Text>
@@ -56,7 +56,7 @@ export default function Cards() {
  <Card.Text className="text-black d-flex">
  <span>
  Some quick example text to build on the card title and make
- up the bulk of the card's content.
+ up the bulk of the card`s content.
  </span>
  </Card.Text>
  <Button variant="primary">See more</Button>

diff --git a/components/carousel.jsx b/components/carousel.jsx
@@ -32,7 +32,7 @@ export default function Carousels() {
  <Carousel.Caption>
  {/* <h3>Second slide label</h3> */}
  <span className="d-flex justify-content-center">
- There's something really cool is coming ! Stay tuned{" "}
+ There`s something really cool is coming ! Stay tuned{" "}
  </span>
  </Carousel.Caption>
  </Carousel.Item>
@@ -47,7 +47,7 @@ export default function Carousels() {
  {/* <h3>Third slide label</h3> */}
 
  <span className="d-flex justify-content-center">
- There's something really cool is coming ! Stay tuned{" "}
+ There`s something really cool is coming ! Stay tuned{" "}
  </span>
  </Carousel.Caption>
  </Carousel.Item>

diff --git a/components/navibar.jsx b/components/navibar.jsx
@@ -1,29 +1,38 @@
-import React from "react";
-import { useState, useEffect } from "react";
-import { useRouter } from 'next/router'
-import { getAuth, signOut } from "../firebase/clientApp";
-import { Nav, Navbar, Container } from "react-bootstrap";
-import Link from "next/link";
-import Image from "next/image";
-// import { Link, useNavigate } from "react-router-dom";
+import React from 'react';
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/router';
+import { getAuth, signOut } from '../firebase/clientApp';
+import { Nav, Navbar, Container } from 'react-bootstrap';
+import Link from 'next/link';
+import Image from 'next/image';
+import { useSelector, useDispatch } from 'react-redux'
+import { login as _login, logout } from '../store/loginSlice';
 
 export default function Navibar() {
  const [user, setUser] = useState(null);
  const auth = getAuth();
- const router = useRouter()
+ const router = useRouter();
+ const dispatch = useDispatch();
+
+ const login = useSelector(state => {
+ return state.login.login;
+ });
+
  useEffect(() => {
  auth.onAuthStateChanged((user) => {
  if (user) {
  setUser(user);
+ dispatch(_login());
  }
- })
+ });
  }, []);
 
  const handleSignOut = async () => {
  try {
- console.log("signing out");
+ console.log('signing out');
  await signOut(auth);
  setUser(null);
+ dispatch(logout());
  router.push('/login');
  } catch (error) {
  alert(error.message);
@@ -41,7 +50,7 @@ export default function Navibar() {
  width="30"
  height="30"
  className="d-inline-block align-top Image-rounded "
- />{" "}
+ />{' '}
  </Navbar.Brand>
  </Link>
  <Nav className="me-auto ">
@@ -57,24 +66,24 @@ export default function Navibar() {
  <Link href="/rank" passHref>
  <Nav.Link>Top Scores</Nav.Link>
  </Link>
- </Nav>{
- user ? (
- <Nav className="justify-content-end">
- <Link href="/profile" passHref>
- <Nav.Link>Profile</Nav.Link>
- </Link>
- <Nav.Link onClick={handleSignOut}>Sign Out</Nav.Link>
- </Nav>
- ) : (
- <Nav className="justify-content-end">
- <Link href="/login" passHref>
- <Nav.Link>Login</Nav.Link>
- </Link>
- <Link href="/register" passHref>
- <Nav.Link>Sign Up</Nav.Link>
- </Link>
  </Nav>
- )}
+ {user && login ? (
+ <Nav className="justify-content-end">
+ <Link href={"/players/" + user.uid } passHref>
+ <Nav.Link>Profile</Nav.Link>
+ </Link>
+ <Nav.Link onClick={handleSignOut}>Sign Out</Nav.Link>
+ </Nav>
+ ) : (
+ <Nav className="justify-content-end">
+ <Link href="/login" passHref>
+ <Nav.Link>Sign In</Nav.Link>
+ </Link>
+ <Link href="/register" passHref>
+ <Nav.Link>Sign Up</Nav.Link>
+ </Link>
+ </Nav>
+ )}
  </Container>
  </Navbar>
  </div>

diff --git a/firebase/clientApp.ts b/firebase/clientApp.ts
@@ -1,24 +1,38 @@
 // Import the functions you need from the SDKs you need
-import firebase from 'firebase/app'
-import { getApp as _getApp, getApps, initializeApp } from "firebase/app";
-import { getAuth as _getAuth, onAuthStateChanged as _onAuthStateChanged , signOut as _signOut } from "firebase/auth";
-import {signInWithEmailAndPassword as _signInWithEmailAndPassword } from "firebase/auth";
-import { getDatabase as _getDatabase, ref as _ref, onValue as _onValue, update as _update } from "firebase/database";
+import firebase from 'firebase/app';
+import { getApp as _getApp, getApps, initializeApp } from 'firebase/app';
+import {
+ getAuth as _getAuth,
+ onAuthStateChanged as _onAuthStateChanged,
+ signOut as _signOut,
+} from 'firebase/auth';
+import {
+ signInWithEmailAndPassword as _signInWithEmailAndPassword,
+ createUserWithEmailAndPassword as _createUserWithEmailAndPassword,
+} from 'firebase/auth';
+import {
+ getDatabase as _getDatabase,
+ ref as _ref,
+ onValue as _onValue,
+ update as _update,
+ set as _set,
+} from 'firebase/database';
 // import { getAnalytics } from "firebase/analytics";
 // TODO: Add SDKs for Firebase products that you want to use
 // https://firebase.google.com/docs/web/setup#available-libraries
 
 // Your web app's Firebase configuration
 // For Firebase JS SDK v7.20.0 and later, measurementId is optional
 const firebaseConfig = {
- apiKey: "AIzaSyDT04MwsliZA6PQgltRPA9v4Hr8T4IucMY",
- authDomain: "game-asik-f1a97.firebaseapp.com",
- databaseURL: "https://game-asik-f1a97-default-rtdb.asia-southeast1.firebasedatabase.app",
- projectId: "game-asik-f1a97",
- storageBucket: "game-asik-f1a97.appspot.com",
- messagingSenderId: "706326430588",
- appId: "1:706326430588:web:14a00623a4ec770f8b9af9",
- measurementId: "G-53F4G4YLMK"
+ apiKey: 'AIzaSyDT04MwsliZA6PQgltRPA9v4Hr8T4IucMY',
+ authDomain: 'game-asik-f1a97.firebaseapp.com',
+ databaseURL:
+ 'https://game-asik-f1a97-default-rtdb.asia-southeast1.firebasedatabase.app',
+ projectId: 'game-asik-f1a97',
+ storageBucket: 'game-asik-f1a97.appspot.com',
+ messagingSenderId: '706326430588',
+ appId: '1:706326430588:web:14a00623a4ec770f8b9af9',
+ measurementId: 'G-53F4G4YLMK',
 };
 
 // Initialize Firebase
@@ -29,7 +43,7 @@ const firebaseConfig = {
 // initializeApp(firebaseConfig);
 // }
 
-const firebaseIsRunning = () => !!(getApps().length);
+const firebaseIsRunning = () => !!getApps().length;
 
 export function getApp() {
  if (!firebaseIsRunning()) initializeApp(firebaseConfig);
@@ -39,40 +53,49 @@ export function getApp() {
 
 export function getAuth() {
  if (!firebaseIsRunning()) getApp();
-  return _getAuth();
+ return _getAuth();
 }
 
 export function onAuthStateChanged(auth, callback) {
  if (!firebaseIsRunning()) getApp();
- return _onAuthStateChanged(auth, callback);
+ return _onAuthStateChanged(auth, callback);
+}
+export function createUserWithEmailAndPassword(auth, email, password) {
+ if (!firebaseIsRunning()) getApp();
+ return _createUserWithEmailAndPassword(auth, email, password);
 }
 
 export function signInWithEmailAndPassword(auth, email, password) {
  if (!firebaseIsRunning()) getApp();
-  return _signInWithEmailAndPassword(auth, email, password);
+ return _signInWithEmailAndPassword(auth, email, password);
 }
 
 export function signOut(auth) {
  if (!firebaseIsRunning()) getApp();
-  return _signOut(auth);
+ return _signOut(auth);
 }
 
 export function getDatabase() {
  if (!firebaseIsRunning()) getApp();
- return _getDatabase();
+ return _getDatabase();
+}
+
+export function ref(db, path, ...data) {
+ if (!firebaseIsRunning()) getApp();
+ return _ref(db, path);
 }
 
-export function ref(db, path) {
+export function set(ref, data) {
  if (!firebaseIsRunning()) getApp();
-  return _ref(db, path);
+ return _set(ref, data);
 }
 
 export function onValue(ref, callback) {
  if (!firebaseIsRunning()) getApp();
-  return _onValue(ref, callback);
+ return _onValue(ref, callback);
 }
 
 export function update(ref, value) {
  if (!firebaseIsRunning()) getApp();
-  return _update(ref, value);
-}
+ return _update(ref, value);
+}