Small formatting tweaks

ProLoser · Sep 21, 2024 · 6dd66ae · 6dd66ae
1 parent 3a2d925
commit 6dd66ae
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 17 deletions.
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "date-fns": "^4.1.0",
     "firebase": "^10.12.2",
     "firebaseui": "^6.1.0",
     "react": "^17.0.0 || ^18.0.0",

diff --git a/src/Online/Friends/index.css b/src/Online/Friends/index.css
@@ -10,6 +10,22 @@
         list-style: none;
         padding: 0;
     }
+    li {
+        display: flex;
+        align-items: center;
+        margin-bottom: 1em;
+        h3 {
+            margin-bottom: 0;
+        }
+    }
+    img {
+        width: 5em;
+        height: 5em;
+        border-radius: 50%;
+        margin-right: 1em;
+        /* border: 2px solid #AAA; */
+        object-fit: cover;
+    }
     h1 {
         vertical-align: text-top;
         display: flex;

diff --git a/src/Online/Friends/index.tsx b/src/Online/Friends/index.tsx
@@ -9,6 +9,7 @@ import { AuthContext, UserData } from '../Contexts';
 import './index.css'
 import { MultiplayerContext, Match, ModalContext } from '../Contexts';
 import { Avatar } from '../Profile';
+import { formatDistance } from 'date-fns';
 
 type Users = {[key: string]: UserData}
 
@@ -63,13 +64,15 @@ export default function Friends() {
     const renderFriends: ReactNode[] = []
     const friends: string[] = []
 
+    const NOW = new Date()
+
     const row = (user: UserData, match?: Match) => <li key={user.uid} onClick={() => load(user.uid)}>
             <Avatar user={user} />
-            <strong>
-                {user?.name}:
-            </strong>
-            <small style={{ float: 'right' }}>{match?.sort}</small>
-            {match?.lastMessage}
+            <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) => 
@@ -105,13 +108,21 @@ export default function Friends() {
                 Matches
             </span>
             <a onClick={() => firebase.auth().signOut()}>
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="icon icon-tabler icons-tabler-outline icon-tabler-logout">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                     <path d="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2" />
                     <path d="M9 12h12l-3 -3" />
                     <path d="M18 15l3 -3" />
                 </svg>
             </a>
+            <a>
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                    <path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+                    <path d="M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+                    <path d="M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+                </svg>
+            </a>
         </h1>
         <div id="people">
             <input name="search" ref={searchRef} type="search" autoComplete="off" placeholder="Search for Friends" onChange={onSearch} />

diff --git a/src/Online/index.tsx b/src/Online/index.tsx
@@ -2,8 +2,8 @@ import Friends from "./Friends";
 import Chat from "./Chat";
 import Profile from "./Profile";
 import Login from "./Login";
-import { useContext, useEffect, useState, PropsWithChildren, useCallback } from "react";
-import { ModalContext, AuthContext, ChatContext, FriendContext, MatchContext, Match, Game, MultiplayerContext, SnapshotOrNullType, UserData, ModalState, Move } from "./Contexts";
+import { useContext, useEffect, useState, PropsWithChildren, useCallback, useMemo } from "react";
+import { ModalContext, AuthContext, ChatContext, FriendContext, MatchContext, Match, GameType, MultiplayerContext, SnapshotOrNullType, UserData, ModalState, Move } from "./Contexts";
 import firebase from 'firebase/compat/app';
 import 'firebase/compat/database';
 
@@ -36,19 +36,24 @@ export function Provider({ children }: PropsWithChildren) {
     const [chats, setChats] = useState<SnapshotOrNullType>(null);
     const [friend, setFriend] = useState<SnapshotOrNullType>(null);
 
-    const toggle = (newState: ModalState) => {
+    const toggle = useCallback((newState: ModalState) => {
         if (newState === true) {
-            setState(lastState);
+            setState(prevState => {
+                if (prevState) setLastState(prevState);
+                return lastState;
+            });
         } else if (newState === false) {
             setState(prevState => {
-                if (prevState)
-                    setLastState(prevState);
+                if (prevState) setLastState(prevState);
                 return false;
             });
         } else {
-            setState(newState);
+            setState(prevState => {
+                if (prevState) setLastState(prevState);
+                return newState
+            });
         }
-    };
+    }, [lastState]);
 
     const chat = useCallback((message: string) => {
         if (match && user) {
@@ -60,7 +65,7 @@ export function Provider({ children }: PropsWithChildren) {
         }
     }, [match, user]);
 
-    const move = useCallback((game: Game, move: Move["move"]) => {
+    const move = useCallback((game: GameType, move: Move["move"]) => {
         if (match?.game) {
             const time = new Date().toISOString();
             const nextMove: Move = {
@@ -151,10 +156,11 @@ export function Provider({ children }: PropsWithChildren) {
         return () => unregisterAuthObserver();
     }, []);
 
+
     return (
         <AuthContext.Provider value={user}>
-            <ModalContext.Provider value={{ toggle, state }}>
-                <MultiplayerContext.Provider value={{ load, move, chat }}>
+            <ModalContext.Provider value={useMemo(() => ({ toggle, state }), [toggle, state])}>
+                <MultiplayerContext.Provider value={useMemo(() => ({ load, move, chat }), [load, move, chat])}>
                     <FriendContext.Provider value={friend}>
                         <ChatContext.Provider value={chats}>
                             <MatchContext.Provider value={match}>

diff --git a/yarn.lock b/yarn.lock
@@ -3270,6 +3270,11 @@ data-view-byte-offset@^1.0.0:
     es-errors "^1.3.0"
     is-data-view "^1.0.1"
 
+date-fns@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-4.1.0.tgz#64b3d83fff5aa80438f5b1a633c2e83b8a1c2d14"
+  integrity sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==
+
 debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"