Merge branch 'main' of https://github.com/Koltheguy/Battleship108

package.json

@@ -17,6 +17,7 @@
 		"react-dom": "^18.2.0",
 		"react-scripts": "5.0.1",
 		"reactfire": "^4.2.3",
+		"unique-names-generator": "^4.7.1",
 		"web-vitals": "^2.1.4"
 	},
 	"scripts": {

src/App.jsx

@@ -1,8 +1,8 @@
 import React from "react";
 import LoginForm from "./LoginForm/LoginForm";
 import Lobby from "./Lobby/Lobby";
-//import ReactFireProvider from "./ReactFireProvider";
 import { useSigninCheck } from "reactfire";
+import ReactFireProvider from "./ReactFireProvider";
 
 export default function App() {
 	const { status, data: signInCheckResult } = useSigninCheck();
@@ -14,7 +14,11 @@ export default function App() {
 	console.log(signInCheckResult);
 
 	if (signInCheckResult.signedIn === true) {
-		return <Lobby />;
+		return (
+			<ReactFireProvider>
+				<Lobby />
+			</ReactFireProvider>
+		);
 	} else {
 		return <LoginForm />;
 	}

src/Lobby/Lobby.jsx

@@ -5,32 +5,36 @@ import { faGoogle } from "@fortawesome/free-brands-svg-icons";
 import styles from "./Lobby.module.css";
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { useUser } from "reactfire";
-//import { ReactFireStoreContext } from "../ReactFireProvider";
+import { ReactFireStoreContext } from "../ReactFireProvider";
 
 const Lobby = () => {
 	const auth = getAuth();
 	const handleSignout = (event) => {
 		signOut(auth);
 	};
 
-	// const { displayName, uid, changeUserName } = useContext(
-	// 	ReactFireStoreContext
-	// );
+	const { displayName, uid, changeUserName } = useContext(
+		ReactFireStoreContext
+	);
+
+	const [username, setUsername] = useState(displayName);
 
-	// const [username, setUsername] = useState(displayName);
-	const [username, setUsername] = useState("");
+	useEffect(() => {
+		setUsername(displayName);
+	}, [displayName]);
 
 	// debounce username change
 	useEffect(() => {
 		const debounceUsernameChange = setTimeout(() => {
-			// changeUserName(username);
+			changeUserName(username);
 		}, 1500);
 
 		return () => clearTimeout(debounceUsernameChange);
-	}, [username]);
+	}, [username, changeUserName]);
 
 	const handleUsernameChange = async (event) => {
-		await setUsername(event.target.value);
+		// allows only alphanumeric inputs
+		await setUsername(event.target.value.replace(/[^0-9a-zA-Z]+/gi, ""));
 	};
 
 	// Example data for the table
@@ -43,6 +47,8 @@ const Lobby = () => {
 	return (
 		<div>
 			<h1>Battleship</h1>
+			username:{username}
+			<br />
 			<input
 				type="text"
 				id="username"

src/ReactFireProvider.jsx

@@ -1,6 +1,13 @@
-import React from "react";
+import React, { useState } from "react";
+import { collection, query } from "firebase/firestore";
 import { getAuth, updateProfile } from "firebase/auth";
 import { useFirestore, useFirestoreCollectionData, useUser } from "reactfire";
+import {
+	uniqueNamesGenerator,
+	adjectives,
+	colors,
+	animals,
+} from "unique-names-generator";
 
 import {
 	TextCensor,
@@ -18,27 +25,43 @@ const censor = new TextCensor().setStrategy(xStrategy);
 
 export const ReactFireStoreContext = React.createContext();
 
-const auth = getAuth();
-
 export default function ReactFireStoreProvider(props) {
-	const {
-		status,
-		data: { displayName, uid },
-	} = useUser();
-	const UserCollection = useFirestore().collection("User");
-	const User = useFirestoreCollectionData(UserCollection);
-	const GameCollection = useFirestore().collection("Game");
+	const auth = getAuth();
+	const { status, data } = useUser();
+	let displayName, uid;
+	if (status !== "loading") {
+		({ displayName, uid } = data);
+	}
+
+	const [refresh, setRefresh] = useState(true);
+
+	const firestore = useFirestore();
+	const UserCollection = collection(firestore, "User");
+	const UserQuery = query(UserCollection);
+	const { data: User } = useFirestoreCollectionData(UserQuery);
+	const GameCollection = collection(firestore, "Game");
 	const Game = useFirestoreCollectionData(GameCollection);
-	const ChatCollection = useFirestore().collection("Chat");
+	const ChatCollection = collection(firestore, "Chat");
 	const Chat = useFirestoreCollectionData(ChatCollection);
 
 	const changeUserName = async (name) => {
 		const matches = obscenityMatcher.getAllMatches(name);
-		const censored = censor.applyTo(name, matches);
-		console.log(censored);
+		let censored = censor.applyTo(name, matches);
+
+		if (censored.length < 3) {
+			censored = uniqueNamesGenerator({
+				dictionaries: [adjectives, colors, animals],
+				separator: "",
+				style: "capital",
+				seed: Date.now(),
+			});
+		}
+		console.log("change", censored);
 
 		await updateProfile(auth.currentUser, {
-			displayName: name,
+			displayName: censored,
+		}).then(() => {
+			setRefresh(!refresh);
 		});
 	};
 	const joinGame = async () => {};

src/index.js

@@ -1,13 +1,13 @@
-//import firebase from "firebase/compat/app";
+import firebase from "firebase/compat/app";
 import { getAuth } from "firebase/auth";
-import { getDatabase } from "firebase/database";
+import { getFirestore } from "firebase/firestore";
 import React from "react";
 import { createRoot } from "react-dom/client";
 import {
+	useFirebaseApp,
 	FirebaseAppProvider,
-	DatabaseProvider,
+	FirestoreProvider,
 	AuthProvider,
-	useFirebaseApp,
 	SuspenseWithPerf,
 } from "reactfire";
 
@@ -40,13 +40,14 @@ function FirebaseWrapper() {
 
 function FirebaseComponents({ children }) {
 	const app = useFirebaseApp();
-	const database = getDatabase(app);
 	const auth = getAuth(app);
+	const db = getFirestore(app);
+
 	return (
 		<AuthProvider sdk={auth}>
-			<DatabaseProvider sdk={database}>
+			<FirestoreProvider sdk={db}>
 				<App />
-			</DatabaseProvider>
+			</FirestoreProvider>
 		</AuthProvider>
 	);
 }