Updated README, fixed a few bugs with user creation, and added docker support to run MongoDB (needs testing)

src/App.jsx

@@ -192,6 +192,12 @@ function App() {
         }
     };
 
+    const getUser = () => {
+        if (userRef.current) {
+            return userRef.current.getUser();
+        }
+    }
+
     const closeTab = (id) => {
         const newTerminals = terminals.filter((t) => t.id !== id);
         setTerminals(newTerminals);
@@ -361,6 +367,7 @@ function App() {
                 />
                 <ProfileModal
                     isHidden={isProfileHidden}
+                    getUser={getUser}
                     handleDeleteUser={handleDeleteUser}
                     handleLogoutUser={handleLogoutUser}
                     setIsProfileHidden={setIsProfileHidden}

src/ProfileModal.jsx

@@ -3,7 +3,7 @@ import { CssVarsProvider } from '@mui/joy/styles';
 import {Modal, Button, DialogTitle, DialogContent, ModalDialog, Stack } from '@mui/joy';
 import theme from './theme';
 
-const ProfileModal = ({ isHidden, handleDeleteUser, handleLogoutUser, setIsProfileHidden }) => {
+const ProfileModal = ({ isHidden, getUser, handleDeleteUser, handleLogoutUser, setIsProfileHidden }) => {
     const handleDelete = () => {
         handleDeleteUser({
             onSuccess: () => {
@@ -20,6 +20,11 @@ const ProfileModal = ({ isHidden, handleDeleteUser, handleLogoutUser, setIsProfi
         });
     }
 
+    const getUserName = () => {
+        const user = getUser();
+        return user ? user.username : '';
+    }
+
     return (
         <CssVarsProvider theme={theme}>
             <Modal open={!isHidden} onClose={() => setIsProfileHidden(true)}>
@@ -42,7 +47,9 @@ const ProfileModal = ({ isHidden, handleDeleteUser, handleLogoutUser, setIsProfi
                         gap: 1,
                     }}
                 >
-                    <DialogTitle sx={{ marginBottom: 1.5 }}>Profile</DialogTitle>
+                    <DialogTitle sx={{ marginBottom: 1.5 }}>
+                        {getUserName()}
+                    </DialogTitle>
                     <DialogContent>
                         <Stack spacing={2} sx={{ width: "100%", maxWidth: "100%", overflow: "hidden", mt: 1.5 }}>
                             <Button
@@ -77,6 +84,7 @@ const ProfileModal = ({ isHidden, handleDeleteUser, handleLogoutUser, setIsProfi
 
 ProfileModal.propTypes = {
     isHidden: PropTypes.bool.isRequired,
+    getUser: PropTypes.func.isRequired,
     handleDeleteUser: PropTypes.func.isRequired,
     handleLogoutUser: PropTypes.func.isRequired,
     setIsProfileHidden: PropTypes.func.isRequired,

src/User.jsx

@@ -2,9 +2,9 @@ import { useRef, forwardRef, useImperativeHandle } from "react";
 import io from "socket.io-client";
 import PropTypes from "prop-types";
 
-let socket;
+let socket = null;
 
-if (!socket) {
+if (socket === null) {
     socket = io(
         window.location.hostname === "localhost"
             ? "http://localhost:8082"
@@ -28,7 +28,6 @@ export const User = forwardRef(({ onLoginSuccess, onCreateSuccess, onDeleteSucce
             });
 
             socketRef.current.once("userCreated", (data) => {
-                console.log("User created", data);
                 currentUser.current = {
                     id: data.user._id,
                     username: data.user.username,
@@ -58,7 +57,6 @@ export const User = forwardRef(({ onLoginSuccess, onCreateSuccess, onDeleteSucce
                 });
 
                 socketRef.current.once("userFound", (data) => {
-                    console.log("User found", data);
                     currentUser.current = {
                         id: data._id,
                         username: data.username,
@@ -91,7 +89,6 @@ export const User = forwardRef(({ onLoginSuccess, onCreateSuccess, onDeleteSucce
             });
 
             socketRef.current.once("userDeleted", (data) => {
-                console.log("User deleted", data);
                 onDeleteSuccess(data);
                 currentUser.current = null;
                 localStorage.removeItem('sessionToken');
@@ -109,11 +106,16 @@ export const User = forwardRef(({ onLoginSuccess, onCreateSuccess, onDeleteSucce
         }
     };
 
+    const getUser = () => {
+        return currentUser.current;
+    }
+
     useImperativeHandle(ref, () => ({
         createUser,
         loginUser,
         logoutUser,
         deleteUser,
+        getUser,
     }));
 
     return <div></div>;

src/main.jsx

@@ -1,10 +1,7 @@
-import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.jsx'
 
 createRoot(document.getElementById('root')).render(
-  <StrictMode>
     <App />
-  </StrictMode>,
 )