Fix up bug with channel creation, clean up some LPCSS

Murray-Bridge-Bunyips · Aug 17, 2023 · 074a6fa · 074a6fa
1 parent 346e8a4
commit 074a6fa
Show file tree

Hide file tree

Showing 10 changed files with 108 additions and 87 deletions.
diff --git a/src/Firebase.ts b/src/Firebase.ts
@@ -52,6 +52,10 @@ const db = getDatabase(app);
 export let currentChannel = "main";
 
 export function setCurrentChannel(channel: string): void {
+    const invalidChars = /[$#\[\]/.]/;
+    if (!channel || invalidChars.test(channel)) {
+        throw new Error("Invalid channel name!");
+    }
     currentChannel = channel;
 }
 

diff --git a/src/chat/Chat.tsx b/src/chat/Chat.tsx
@@ -157,38 +157,38 @@ function Chat() {
                     <Navbar />
                     <div className="chat">
                         <div className="menu">
-                        {/* Menu element for changing channels */}
-                        <Channels />
+                            {/* Menu element for changing channels */}
+                            <Channels />
                         </div>
                         <div className="messages">
-                        {/* Allow space for Navbar to fit */}
-                        <br /> <br /> <br /> <br /> <br />
-                        {/* Load more button to support pagination */}
-                        {messages && Object.keys(messages).length > paginationIndex * PAGINATION_LIMIT ? (
-                            <button className="moreitems" onClick={() => updatePagination()} />
-                        ) : (
-                            <>
-                                <p className="top">
-                                    Welcome to the Bunyip Bellower! <br /> This is the start of the <b>{channel}</b>{" "}
-                                    channel.
-                                </p>
-                                <hr />
-                            </>
-                        )}
-                        {/* Leading dummy for pagination support */}
-                        <div id="paginationdummy" ref={pdummy}></div>
-                        {/* Display all messages currently in Firebase */}
-                        {messages &&
-                            Object.keys(messages).length > 0 &&
-                            Object.entries(messages)
-                                .slice(paginationIndex * -PAGINATION_LIMIT)
-                                .map(([muid, msg]) => <Message message={msg} key={muid} />)}
-                        {/* Dummy element for fluid interface */}
-                        <div id="dummy" ref={dummy}></div>
-                        <br /> <br /> <br />
-                        {/* Message bar with end-user options to add files and message */}
-                        <MessageBar />
-                    </div>
+                            {/* Allow space for Navbar to fit */}
+                            <br /> <br /> <br /> <br /> <br />
+                            {/* Load more button to support pagination */}
+                            {messages && Object.keys(messages).length > paginationIndex * PAGINATION_LIMIT ? (
+                                <button className="moreitems" onClick={() => updatePagination()} />
+                            ) : (
+                                <>
+                                    <p className="top">
+                                        Welcome to the Bunyip Bellower! <br /> This is the start of the <b>{channel}</b>{" "}
+                                        channel.
+                                    </p>
+                                    <hr />
+                                </>
+                            )}
+                            {/* Leading dummy for pagination support */}
+                            <div id="paginationdummy" ref={pdummy}></div>
+                            {/* Display all messages currently in Firebase */}
+                            {messages &&
+                                Object.keys(messages).length > 0 &&
+                                Object.entries(messages)
+                                    .slice(paginationIndex * -PAGINATION_LIMIT)
+                                    .map(([muid, msg]) => <Message message={msg} key={muid} />)}
+                            {/* Dummy element for fluid interface */}
+                            <div id="dummy" ref={dummy}></div>
+                            <br /> <br /> <br />
+                            {/* Message bar with end-user options to add files and message */}
+                            <MessageBar />
+                        </div>
                     </div>
                 </>
             )}

diff --git a/src/chat/Message.tsx b/src/chat/Message.tsx
@@ -63,6 +63,9 @@ function Message(props: { message: MessageData; key: string }) {
                 <img
                     className="pfp"
                     src={message.photoURL}
+                    onError={() => {
+                        (document.getElementsByClassName("pfp")[0] as HTMLImageElement).src = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjg4IiBoZWlnaHQ9IjI4OCIgdmlld0JveD0iMCAwIDI4OCAyODgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyODgiIGhlaWdodD0iMjg4IiBmaWxsPSIjRTlFOUU5Ii8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjIyIDEwOUMyMjIgMTM5LjM2NiAyMDQuNjQ3IDE2NS42OCAxNzkuMzE3IDE3OC41NjVDMjIzLjk4MSAxODcuNzE4IDI2Mi40NDMgMjEzLjg4NiAyODcuNjMzIDI1MEgyODhWMjg4SDBWMjUwSDAuMzY3MTg4QzI1LjU1NzQgMjEzLjg4NiA2NC4wMTkzIDE4Ny43MTggMTA4LjY4MyAxNzguNTY1QzgzLjM1MjggMTY1LjY4IDY2IDEzOS4zNjYgNjYgMTA5QzY2IDY1LjkyMTkgMTAwLjkyMiAzMSAxNDQgMzFDMTg3LjA3OCAzMSAyMjIgNjUuOTIxOSAyMjIgMTA5WiIgZmlsbD0iIzAwMDAwMCIvPgo8L3N2Zz4K";
+                    }}
                     alt={`Profile of ${message.displayName}`}
                     referrerPolicy="no-referrer"
                 />

diff --git a/src/css/Channels.css b/src/css/Channels.css
@@ -3,31 +3,6 @@
  *    Author: Lachlan Paul, 2023
  */
 
-.chat {  
-    display: grid;
-    grid-template-columns: 30% 70%;
-    grid-template-rows: 100%;
-    grid-auto-columns: 1fr;
-    gap: 0px 0px;
-    grid-auto-flow: row;
-    grid-template-areas:
-      "menu messages";
-}
-
-.messages {
-    grid-area: messages; 
-}
-
-.menu {
-    grid-area: menu;
-    position: fixed;
-    background: rgb(0, 52, 14);
-    height: 100%;
-    width: 20%;
-    z-index: 1;
-    overflow: auto;
-}
-
 .buttons {
     height: 50px;
     width: 90%;

diff --git a/src/css/Chat.css b/src/css/Chat.css
@@ -3,27 +3,51 @@
  *    Author: Lucas Bubner, 2023
  */
 
-.chat {  
+.chat {
     display: grid;
-    grid-template-columns: 30% 70%;
+    grid-template-columns: 22% 70%;
     grid-template-rows: 100%;
     grid-auto-columns: 1fr;
     gap: 0px 0px;
     grid-auto-flow: row;
-    grid-template-areas:
-      "menu messages";
-  }
-
-.menu { 
+    grid-template-areas: "menu messages";
+}
+
+.menu {
     grid-area: menu;
-  }
-
-.messages { 
-    grid-area: messages; 
+    position: fixed;
+    background: rgb(0, 52, 14);
+    height: calc(100% - 132px);
+    border-radius: 12px;
+    width: 20%;
+    top: 120px;
+    left: 15px;
+    z-index: 1;
+    overflow: auto;
+}
+
+@media screen and (max-width: 950px) {
+    .menu {
+        display: none;
+    }
+    .chat {
+        grid-template-columns: 100%;
+        grid-template-rows: 100%;
+        grid-template-areas: "messages";
+    }
+    .msginput {
+        width: calc(100vw - 28px);
+    }
+    .message {
+        width: 100%;
+    }
+}
+
+.messages {
+    grid-area: messages;
     position: relative;
-    right: 13%;
 }
-  
+
 .moreitems {
     transition: background-color 0.5s;
     color: inherit;

diff --git a/src/css/Message.css b/src/css/Message.css
@@ -12,7 +12,10 @@
 .message {
     animation: gen 0.5s;
     border-radius: 15px;
+
+    /* what on earth is this */
     width: 111%;
+
     transition: background-color 0.3s;
     display: grid;
     margin: 0;

diff --git a/src/css/MessageBar.css b/src/css/MessageBar.css
@@ -8,7 +8,6 @@
     display: flex;
     position: fixed;
     bottom: 0;
-    width: 100%;
 }
 
 .msginput {
@@ -17,7 +16,7 @@
     background-color: rgb(0, 90, 31);
     height: auto;
     flex: 1;
-    width: calc(71vw - 28px);
+    width: 70vw;
     border: 0;
     outline: none;
 }

diff --git a/src/css/Navbar.css b/src/css/Navbar.css
@@ -12,7 +12,6 @@
     grid-template-areas:
         "img"
         "name";
-
     position: fixed;
     margin: 8px;
     width: calc(100vw - 20px);
@@ -21,6 +20,7 @@
     height: 100px;
     border-radius: 12px;
     z-index: 2;
+    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
 }
 
 .navbar-brand {

diff --git a/src/layout/Channels.tsx b/src/layout/Channels.tsx
@@ -23,25 +23,35 @@ function Channels() {
 
     return (
         <div className="menu">
-            <li></li>
-            <li></li>
-            <li></li>
-            <li></li>
-            <li></li>
             <center>
-                <form onSubmit={(e) => { e.preventDefault(); setCurrentChannel((document.getElementById("channelName") as HTMLInputElement).value); (document.getElementById("channelName") as HTMLInputElement).value = ""; }}>
+                <form onSubmit={(e) => {
+                    e.preventDefault();
+                    try {
+                        setCurrentChannel((document.getElementById("channelName") as HTMLInputElement).value);
+                    } catch (e) {
+                        alert(e);
+                    }
+                    (document.getElementById("channelName") as HTMLInputElement).value = "";
+                }}>
                     <input type="text" id="channelName" placeholder="Enter a channel name" />
                 </form>
-                {channels.map((channel) => (
-                    <Fragment key={channel}>
-                        <button className="buttons" onClick={() => setCurrentChannel(channel)}>
-                            {channel}
-                        </button>
-                        <button onClick={() => { if (window.confirm(`Confirm removal of ${channel}?`)) removeChannel(channel);}} className="oblbutton">
-                            obliterate {channel}
-                        </button>
-                    </Fragment>
-                ))}
+                <button className="buttons" onClick={() => setCurrentChannel("main")}>
+                    main
+                </button>
+                <hr />
+                {channels.map((channel) => { 
+                    if (channel === "main") return;
+                    return (
+                        <Fragment key={channel}>
+                            <button className="buttons" onClick={() => setCurrentChannel(channel)}>
+                                {channel}
+                            </button>
+                            <button onClick={() => { if (window.confirm(`Confirm removal of ${channel}?`)) removeChannel(channel);}} className="oblbutton">
+                                obliterate {channel}
+                            </button>
+                        </Fragment>
+                    );
+                })}
             </center>
         </div>
     );

diff --git a/src/layout/Navbar.tsx b/src/layout/Navbar.tsx
@@ -77,6 +77,9 @@ function Navbar() {
                 <img
                     className="navbar-brand"
                     src={auth.currentUser?.photoURL?.toString()}
+                    onError={() => {
+                        (document.getElementsByClassName("pfp")[0] as HTMLImageElement).src = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjg4IiBoZWlnaHQ9IjI4OCIgdmlld0JveD0iMCAwIDI4OCAyODgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyODgiIGhlaWdodD0iMjg4IiBmaWxsPSIjRTlFOUU5Ii8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjIyIDEwOUMyMjIgMTM5LjM2NiAyMDQuNjQ3IDE2NS42OCAxNzkuMzE3IDE3OC41NjVDMjIzLjk4MSAxODcuNzE4IDI2Mi40NDMgMjEzLjg4NiAyODcuNjMzIDI1MEgyODhWMjg4SDBWMjUwSDAuMzY3MTg4QzI1LjU1NzQgMjEzLjg4NiA2NC4wMTkzIDE4Ny43MTggMTA4LjY4MyAxNzguNTY1QzgzLjM1MjggMTY1LjY4IDY2IDEzOS4zNjYgNjYgMTA5QzY2IDY1LjkyMTkgMTAwLjkyMiAzMSAxNDQgMzFDMTg3LjA3OCAzMSAyMjIgNjUuOTIxOSAyMjIgMTA5WiIgZmlsbD0iIzAwMDAwMCIvPgo8L3N2Zz4K";
+                    }}
                     referrerPolicy="no-referrer"
                     alt={`Profile of ${auth.currentUser?.displayName}`}
                 />