Refactor file structure and update dependencies

ProLoser · Oct 5, 2024 · 3e60564 · 3e60564
1 parent 3d40746
commit 3e60564
Show file tree

Hide file tree

Showing 49 changed files with 562 additions and 693 deletions.
diff --git a/index.html b/index.html
@@ -18,7 +18,7 @@
 
 <body>
   <div id="root"></div>
-  <script type="module" src="/src/main.tsx"></script>
+  <script type="module" src="/src/index.tsx"></script>
 </body>
 
 </html>
diff --git a/src/App.tsx b/src/App.tsx
diff --git a/src/Game/Game.css → src/Board.css b/src/Game/Game.css → src/Board.css
diff --git a/src/Online/Chat/index.css → src/Chat.css b/src/Online/Chat/index.css → src/Chat.css
diff --git a/src/Online/Chat/index.tsx → src/Chat.tsx b/src/Online/Chat/index.tsx → src/Chat.tsx
@@ -1,20 +1,28 @@
-import { useContext, useState } from 'react';
+import { useState, useCallback } from 'react';
 import firebase from 'firebase/compat/app';
 import 'firebase/compat/database';
-import { AuthContext } from '../Contexts';
-import './index.css';
+import './Chat.css';
 
-export default function() {
-    const user = useContext(AuthContext);
-    const [chats, setChats] = useState<firebase.database.DataSnapshot>([]);
+export default function ({ chats, user }) {
+    // TODO: Implement Chat form
     const [selectedChat, setSelectedChat] = useState<firebase.database.DataSnapshot | null>(null);
 
     const handleChatClick = (chat: firebase.database.DataSnapshot) => {
         setSelectedChat(chat);
     };
 
+    const chat = useCallback((chatId: string, message: string) => {
+        if (chatId && user) {
+            firebase.database().ref(`chats/${chatId}`).push({
+                message,
+                author: user.key,
+                time: new Date().toISOString()
+            })
+        }
+    }, [user]);
+
     return (
-        <div id="chat" className='modal'>
+        <div id="chat">
             <h1>Chat List</h1>
             <ul>
                 {chats.map((chat: firebase.database.DataSnapshot) => (

diff --git a/src/Game/Dice.css → src/Dice.css b/src/Game/Dice.css → src/Dice.css
diff --git a/src/Game/Dice.tsx → src/Dice.tsx b/src/Game/Dice.tsx → src/Dice.tsx
diff --git a/src/Online/Friends/index.css → src/Friends.css b/src/Online/Friends/index.css → src/Friends.css
@@ -1,14 +1,16 @@
 #friends {
-    background: rgba(255,255,255,.4);
-    padding: 0 2em;
+    padding: 0 1em;
+
     input {
         display: block;
         width: 100%;
         padding: 5px;
     }
+
     #people ul {
         list-style: none;
         padding: 0;
+
         li {
             display: flex;
             align-items: center;
@@ -28,18 +30,22 @@
             object-fit: cover;
         }
     }
+
     h1 {
         vertical-align: text-top;
         display: flex;
         justify-content: space-between;
+
         span {
             display: flex;
             overflow: hidden;
+
             span {
                 margin-right: .2em;
             }
         }
     }
+
     [aria-haspopup="menu"] {
         float: right;
     }

diff --git a/src/Online/Friends/index.tsx → src/Friends.tsx b/src/Online/Friends/index.tsx → src/Friends.tsx
@@ -1,40 +1,22 @@
 // Import FirebaseAuth and firebase.
-import { useState, useCallback, useRef, useContext, ReactNode, useEffect } from 'react';
+import { useState, useCallback, useRef, ReactNode, useEffect } from 'react';
 import type { ChangeEventHandler } from 'react';
-
+import { formatDistance } from 'date-fns';
 import firebase from 'firebase/compat/app';
 import 'firebase/compat/auth';
 import 'firebase/compat/database';
-import { AuthContext, UserData } from '../Contexts';
-import './index.css'
-import { MultiplayerContext, Match, ModalContext } from '../Contexts';
-import { Avatar } from '../Profile';
-import { formatDistance } from 'date-fns';
+import { UserData, Match } from './Types';
+import { Avatar } from './Profile';
+import './Friends.css'
+import ToggleFullscreen from './ToggleFullscreen';
+type Users = { [key: string]: UserData }
 
-const toggleFullscreen = () => 
-    document.fullscreenElement
-        ? document.exitFullscreen()
-        : document.documentElement.requestFullscreen()
-type Users = {[key: string]: UserData}
-
-export default function Friends() {
+export default function Friends({ authUser, toggle, load, reset }) {
     const searchRef = useRef<HTMLInputElement>(null);
-    const authUser = useContext(AuthContext); // Local signed-in state.
     const [users, setUsers] = useState<Users>({});
     const [isExpanded, setIsExpanded] = useState(false);
-    const { load, reset } = useContext(MultiplayerContext);
-    const { toggle } = useContext(ModalContext);
     const [matches, setMatches] = useState<firebase.database.DataSnapshot>([]);
     const [searchResults, setSearchResults] = useState<firebase.database.DataSnapshot>([]);
-   const [fullscreen, setFullscreen] = useState(!!document.fullscreenElement);
-
-    // Synchronize Fullscreen Icon
-    useEffect(() => {
-        const fullscreenchange = () => setFullscreen(!!document.fullscreenElement);
-        document.addEventListener('fullscreenchange', fullscreenchange);
-        return () => document.removeEventListener('fullscreenchange', fullscreenchange);
-    }, [])
-
 
     // Synchronize Matches
     useEffect(() => {
@@ -58,8 +40,8 @@ export default function Friends() {
             queryMatches.off('value', subscriber);
         }
     }, [authUser]);
-    
-    const onSearch: ChangeEventHandler<HTMLInputElement> = useCallback(async() => {
+
+    const onSearch: ChangeEventHandler<HTMLInputElement> = useCallback(async () => {
         if (searchRef.current?.value) {
             const search = searchRef.current.value
             const searchSnapshot = await firebase.database().ref('users').orderByChild('name').startAt(search).get();
@@ -81,17 +63,17 @@ export default function Friends() {
     const NOW = new Date()
 
     const row = (user: UserData, match?: Match) => <li key={user.uid} onClick={() => load(user.uid)}>
-            <Avatar user={user} />
-            <div>
-                <h3>{user.name}</h3>
-                <time>{match?.sort && formatDistance(new Date(match.sort), NOW, { addSuffix: true })}</time>
-                {match?.lastMessage}
-            </div>
-        </li>
+        <Avatar user={user} />
+        <div>
+            <h3>{user.name}</h3>
+            <time>{match?.sort && formatDistance(new Date(match.sort), NOW, { addSuffix: true })}</time>
+            {match?.lastMessage}
+        </div>
+    </li>
 
-    const searchReject = (user: UserData) => 
-        searchRef.current?.value 
-        && !(new RegExp(searchRef.current?.value, 'i')).test(user.name) 
+    const searchReject = (user: UserData) =>
+        searchRef.current?.value
+        && !(new RegExp(searchRef.current?.value, 'i')).test(user.name)
         && !(new RegExp(searchRef.current?.value, 'i')).test(user.uid)
 
     matches?.forEach(match => {
@@ -121,60 +103,59 @@ export default function Friends() {
         }
     }
 
-    return <div id="friends" className='modal'>
-        <button
-            aria-haspopup="menu"
-            aria-expanded={isExpanded}
-            onClick={() => setIsExpanded(!isExpanded)}
-            className="material-icons"
-        >
-            settings
-        </button>
-        <menu>
-            <li>
-                <a onClick={invite}>
-                    <span className="material-icons">person_add_alt_1</span>
-                    Invite Friend
-                </a>
-            </li>
-            {document.fullscreenEnabled ?
+    return <section id="friends">
+        <header>
+            <button
+                aria-haspopup="menu"
+                aria-expanded={isExpanded}
+                onClick={() => setIsExpanded(!isExpanded)}
+                className="material-icons"
+            >
+                settings
+            </button>
+            <menu>
+                <li>
+                    <a onClick={invite}>
+                        <span className="material-icons">person_add_alt_1</span>
+                        Invite Friend
+                    </a>
+                </li>
+                {document.fullscreenEnabled ?
+                    <li>
+                        <ToggleFullscreen />
+                    </li>
+                    : null}
+                <li>
+                    <a onClick={() => toggle('profile')}>
+                        <span className="material-icons">manage_accounts</span>
+                        Edit Profile
+                    </a>
+                </li>
+                <li>
+                    <a onClick={reset}>
+                        <span className="material-icons">restart_alt</span>
+                        Reset Match
+                    </a>
+                </li>
                 <li>
-                    <a onClick={toggleFullscreen}>
-                        <span className="material-icons">{fullscreen ? 'fullscreen_exit' : 'fullscreen'}</span>
-                        Fullscreen
+                    <a onClick={() => firebase.auth().signOut()}>
+                        <span className="material-icons">logout</span>
+                        Logout
                     </a>
                 </li>
-            : null}
-            <li>
-                <a onClick={() => toggle('profile')}>
-                    <span className="material-icons">manage_accounts</span>
-                    Edit Profile
-                </a>
-            </li>
-            <li>
-                <a onClick={reset}>
-                    <span className="material-icons">restart_alt</span>
-                    Reset Match
-                </a>
-            </li>
-            <li>
-                <a onClick={() => firebase.auth().signOut()}>
-                    <span className="material-icons">logout</span>
-                    Logout
-                </a>
-            </li>
-        </menu>
-        <h1>
-            <span>
-                <span>{authUser.val().name}'s</span>
-                Matches
-            </span>
-        </h1>
+            </menu>
+            <h1>
+                <span>
+                    <span>{authUser.val().name}'s</span>
+                    Matches
+                </span>
+            </h1>
+        </header>
         <div id="people">
             <input name="search" ref={searchRef} type="search" autoComplete="off" placeholder="Search for Friends" onChange={onSearch} />
             <ul>
                 {renderFriends}
             </ul>
         </div>
-    </div>
+    </section>
 }
diff --git a/src/Game/index.tsx b/src/Game/index.tsx