Skip to content

Commit

Permalink
Channel add/remove functionality
Browse files Browse the repository at this point in the history
  • Loading branch information
@bubner
bubner committed Aug 14, 2023
1 parent b8bfa8d commit 92cdcc6
Show file tree
Hide file tree
Showing 19 changed files with 277 additions and 258 deletions.
12 changes: 6 additions & 6 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@
import "./css/App.css";

// Firebase imports and configuration
import {useEffect, useState} from "react";
import {useAuthState} from "react-firebase-hooks/auth";
import {auth, db, useAuthStateChanged} from "./Firebase";
import {onValue, ref} from "firebase/database";
import { useEffect, useState } from "react";
import { useAuthState } from "react-firebase-hooks/auth";
import { auth, db, useAuthStateChanged } from "./Firebase";
import { onValue, ref } from "firebase/database";

// Import application login and chatroom windows
import Chat from "./chat/Chat";
Expand Down Expand Up @@ -54,7 +54,7 @@ function App() {
}, [online]);

return online ? (
<div className="App">{user ? <Chat/> : <Login/>}</div>
<div className="App">{user ? <Chat /> : <Login />}</div>
) : (
<>
<div className="offline">
Expand All @@ -63,7 +63,7 @@ function App() {
</div>
{longConnect && (
<p className="disc">
This seems to be taking a while. <br/> Please check your internet connection.
This seems to be taking a while. <br /> Please check your internet connection.
</p>
)}
</>
Expand Down
27 changes: 16 additions & 11 deletions src/Firebase.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@
*/

// https://firebase.google.com/docs/web/setup#available-libraries
import {useEffect} from "react";
import {getApp, initializeApp} from "firebase/app";
import {getAuth, GoogleAuthProvider, onAuthStateChanged, signInWithPopup} from "firebase/auth";
import { useEffect } from "react";
import { getApp, initializeApp } from "firebase/app";
import { getAuth, GoogleAuthProvider, onAuthStateChanged, signInWithPopup } from "firebase/auth";
import {
child,
get,
Expand All @@ -21,8 +21,8 @@ import {
set,
update,
} from "firebase/database";
import {deleteObject, getStorage, listAll, ref as sref} from "firebase/storage";
import {getFileURL} from "./chat/Message";
import { deleteObject, getStorage, listAll, ref as sref } from "firebase/storage";
import { getFileURL } from "./chat/Message";

let app;

Expand All @@ -38,7 +38,7 @@ try {
databaseURL: "https://bunyipbellower-default-rtdb.asia-southeast1.firebasedatabase.app",
storageBucket: "bunyipbellower.appspot.com",
messagingSenderId: "1021407241018",
appId: "1:1021407241018:web:381d79b51804b683166603"
appId: "1:1021407241018:web:381d79b51804b683166603",
};
app = initializeApp(firebaseConfig);
}
Expand All @@ -50,10 +50,15 @@ const db = getDatabase(app);

// Store what channel the user is currently in
export let currentChannel = "main";

export function setCurrentChannel(channel: string): void {
currentChannel = channel;
}

export async function removeChannel(channel: string): Promise<void> {
return await remove(ref(db, `messages/${channel}`));
}

// Define structure of user data from Firebase
export interface UserData {
email: string; // Primary key
Expand All @@ -63,8 +68,8 @@ export interface UserData {
online:
| boolean
| {
lastseen: number;
};
lastseen: number;
};
uid: string | undefined;
name: string | undefined;
pfp: string | undefined;
Expand Down Expand Up @@ -97,8 +102,8 @@ function errorHandler(err: any): void {
} else {
alert(
"Sorry! An error occurred attempting to perform the operation you were requesting. Error message:\n\n" +
err +
"\n\nYour window will be reloaded in 5 seconds."
err +
"\n\nYour window will be reloaded in 5 seconds."
);
}

Expand Down Expand Up @@ -362,4 +367,4 @@ export async function clearDatabases(): Promise<void> {
});
}

export {auth, db, storage};
export { auth, db, storage };
33 changes: 17 additions & 16 deletions src/chat/Chat.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@
* @author Lachlan Paul, 2023
*/

import {auth, db, getData, MessageData, toCommas, currentChannel} from "../Firebase";
import {createRef, useEffect, useRef, useState} from "react";
import {onValue, ref} from "firebase/database";
import { auth, db, getData, MessageData, toCommas, currentChannel } from "../Firebase";
import { createRef, useEffect, useRef, useState } from "react";
import { onValue, ref } from "firebase/database";
import Message from "./Message";
import Navbar from "../layout/Navbar";
import MessageBar from "./MessageBar";
import Channels from "../layout/Channels"
import Channels from "../layout/Channels";
import "../css/Chat.css";

function Chat() {
Expand All @@ -26,7 +26,7 @@ function Chat() {

function updatePagination() {
setPaginationIndex((prev) => prev + 1);
pdummy.current?.scrollIntoView({behavior: "auto"});
pdummy.current?.scrollIntoView({ behavior: "auto" });
}

useEffect(() => {
Expand Down Expand Up @@ -91,7 +91,7 @@ function Chat() {
const lastMessageTimestamp = lastMessageObject.createdAt;
// Check if the last message has not been seen yet
if (lastMessage.current !== lastMessageTimestamp) {
dummy.current.scrollIntoView({behavior: "auto"});
dummy.current.scrollIntoView({ behavior: "auto" });
if (lastMessageTimestamp > lastSeenTimestampRef.current) {
// Enable notifications if they are not on the page
setNewMessage(true);
Expand Down Expand Up @@ -154,21 +154,22 @@ function Chat() {
{authorised && (
<>
{/* Navbar element with profile information */}
<Navbar/>
<Navbar />
<div className="chat">
{/* Menu element for changing channels */}
<Channels/>
{/* Menu element for changing channels */}
<Channels />
{/* Allow space for Navbar to fit */}
<br/> <br/> <br/> <br/> <br/>
<br /> <br /> <br /> <br /> <br />
{/* Load more button to support pagination */}
{messages && Object.keys(messages).length > paginationIndex * PAGINATION_LIMIT ? (
<button className="moreitems" onClick={() => updatePagination()}/>
<button className="moreitems" onClick={() => updatePagination()} />
) : (
<>
<p className="top">
Welcome to the Bunyip Bellower! <br/> This is the start of the <b>{channel}</b> channel.
Welcome to the Bunyip Bellower! <br /> This is the start of the <b>{channel}</b>{" "}
channel.
</p>
<hr/>
<hr />
</>
)}
{/* Leading dummy for pagination support */}
Expand All @@ -178,12 +179,12 @@ function Chat() {
Object.keys(messages).length > 0 &&
Object.entries(messages)
.slice(paginationIndex * -PAGINATION_LIMIT)
.map(([muid, msg]) => <Message message={msg} key={muid}/>)}
.map(([muid, msg]) => <Message message={msg} key={muid} />)}
{/* Dummy element for fluid interface */}
<div id="dummy" ref={dummy}></div>
<br/> <br/> <br/>
<br /> <br /> <br />
{/* Message bar with end-user options to add files and message */}
<MessageBar/>
<MessageBar />
</div>
</>
)}
Expand Down
20 changes: 10 additions & 10 deletions src/chat/FileUploads.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@
* @author Lucas Bubner, 2023
*/

import {ChangeEventHandler, ClipboardEvent, useCallback, useEffect, useRef, useState} from "react";
import {storage, uploadFileMsg} from "../Firebase";
import {getDownloadURL, ref, uploadBytesResumable, UploadTask, UploadTaskSnapshot} from "firebase/storage";
import { ChangeEventHandler, ClipboardEvent, useCallback, useEffect, useRef, useState } from "react";
import { storage, uploadFileMsg } from "../Firebase";
import { getDownloadURL, ref, uploadBytesResumable, UploadTask, UploadTaskSnapshot } from "firebase/storage";
import Popup from "reactjs-popup";
import {PopupActions} from "reactjs-popup/dist/types";
import { PopupActions } from "reactjs-popup/dist/types";
import "../css/FileUploads.css";
import "../css/CommonPopup.css";

Expand Down Expand Up @@ -152,7 +152,7 @@ function FileUploads() {
const tclose = () => tref.current?.close();

return (
<Popup ref={tref} trigger={<span className="popupbutton"/>} onClose={resetElement}>
<Popup ref={tref} trigger={<span className="popupbutton" />} onClose={resetElement}>
<div className="uploadWindow outer">
<div className="innerUploadWindow inner">
<span className="close" onClick={tclose}>
Expand All @@ -162,18 +162,18 @@ function FileUploads() {
{isFileUploaded ? (
<div className="ftext">File uploaded.</div>
) : !isClipboard ? (
<input type="file" name="file" onChange={changeHandler} className="fileInput"/>
<input type="file" name="file" onChange={changeHandler} className="fileInput" />
) : (
<div className="ftext">
<i>File supplied by message box clipboard paste.</i>
</div>
)}
{isFilePicked && selectedFile != null && !isFileUploaded && (
<div className="fileinfo">
<br/>
<br />
<p>
<i>File name:</i> {selectedFile.name} <br/>
<i>Filetype:</i> {selectedFile.type || "unknown"} <br/>
<i>File name:</i> {selectedFile.name} <br />
<i>Filetype:</i> {selectedFile.type || "unknown"} <br />
<i>Size in bytes:</i> {formatBytes(selectedFile.size)}
</p>
<p>
Expand All @@ -186,7 +186,7 @@ function FileUploads() {
</div>
</div>
)}
<br/>
<br />
{isFileUploading && !isFileUploaded && (
<div className="barload">
<div className="outerload">
Expand Down
20 changes: 10 additions & 10 deletions src/chat/Login.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* @author Lachlan Paul, 2023
*/

import {signInWithGoogle} from "../Firebase";
import { signInWithGoogle } from "../Firebase";
import "../css/Login.css";

function Login() {
Expand All @@ -24,27 +24,27 @@ function Login() {
<li></li>
<li></li>
</ul>
<img style={{borderRadius: "15px"}} src="/anim.svg" alt="Background animation"/>
<img style={{ borderRadius: "15px" }} src="/anim.svg" alt="Background animation" />
</div>
<img className="clubimg" src="/clubimgblur.png" alt="Murray Bridge Bunyip club"/>
<img className="clubimg" src="/clubimgblur.png" alt="Murray Bridge Bunyip club" />
<div className="login center">
<div className="login-inner">
<h4>Welcome to the</h4>
<h2>Bunyip Bellower</h2>
<b className="small">DEVELOPER-ONLY RESTRICTED</b>
<br/> <br/>
<br /> <br />
<button onClick={signInWithGoogle} className="googlebtn">
Sign in with Google
</button>
<br/> <br/>
<br /> <br />
<h6>
<b>Application developed by</b> <br/>
Lucas Bubner <a href="https://github.com/hololb/"> @hololb</a> <br/>
Lachlan Paul <a href="https://github.com/BanjoTheBot/"> @BanjoTheBot</a> <br/>
<b>Application developed by</b> <br />
Lucas Bubner <a href="https://github.com/hololb/"> @hololb</a> <br />
Lachlan Paul <a href="https://github.com/BanjoTheBot/"> @BanjoTheBot</a> <br />
</h6>
<br/>
<br />
<footer>
Copyright (c) Lucas Bubner, Lachlan Paul, 2023 <br/>
Copyright (c) Lucas Bubner, Lachlan Paul, 2023 <br />
<a href="https://github.com/Murray-Bridge-Bunyips/BunyipBellower">Source code</a>
</footer>
</div>
Expand Down
12 changes: 6 additions & 6 deletions src/chat/Message.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
* @author Lachlan Paul, 2023
*/

import {useMemo, useState} from "react";
import {auth, MessageData} from "../Firebase";
import { useMemo, useState } from "react";
import { auth, MessageData } from "../Firebase";
import Msgman from "./Msgman";
import "../css/App.css";
import "../css/Message.css";
Expand All @@ -22,10 +22,10 @@ export const getFileURL = (fileURL: string) => {
return fileURL.slice(fileURL.indexOf(":") + 1);
};

const filter = new Filter({placeHolder: "♥"});
const filter = new Filter({ placeHolder: "♥" });

function Message(props: { message: MessageData; key: string }) {
const {message} = props;
const { message } = props;
const [isHovering, setIsHovering] = useState(false);
const handleMouseOver = () => setIsHovering(true);
const handleMouseOut = () => setIsHovering(false);
Expand Down Expand Up @@ -74,7 +74,7 @@ function Message(props: { message: MessageData; key: string }) {

{/* Display the proper formatted date and time metadata with each message */}
{message.photoURL !== "sys" && (
<p className="date">{timestamp.toLocaleString("en-AU", {hour12: true})}</p>
<p className="date">{timestamp.toLocaleString("en-AU", { hour12: true })}</p>
)}
</div>

Expand Down Expand Up @@ -137,7 +137,7 @@ function Message(props: { message: MessageData; key: string }) {
<i>&lt;message deleted&gt;</i>
</p>
)}
{message.photoURL !== "sys" && <Msgman id={message.id} isActive={isHovering}/>}
{message.photoURL !== "sys" && <Msgman id={message.id} isActive={isHovering} />}
</div>
);
}
Expand Down
12 changes: 5 additions & 7 deletions src/chat/MessageBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@
*/

import "../css/MessageBar.css";
import {ChangeEvent, FormEvent, useEffect, useState} from "react";
import { ChangeEvent, FormEvent, useEffect, useState } from "react";
import FileUploads from "./FileUploads";
import Scroll from "../layout/Scroll";
import {auth, getData, isMessageOverLimit, toCommas, uploadMsg, UserData} from "../Firebase";
import { auth, getData, isMessageOverLimit, toCommas, uploadMsg, UserData } from "../Firebase";

function MessageBar() {
const [formVal, setFormVal] = useState("");
Expand Down Expand Up @@ -61,7 +61,7 @@ function MessageBar() {
<div className="input-group">
{writePerms ? (
<>
<FileUploads/>
<FileUploads />
<input
type="text"
onChange={(e) => handleMessageChange(e)}
Expand All @@ -77,14 +77,12 @@ function MessageBar() {
</>
) : (
<div className="msginput nomsg">
<p>
You do not have permission to send any messages.
</p>
<p>You do not have permission to send any messages.</p>
</div>
)}
</div>
</form>
<Scroll/>
<Scroll />
</div>
);
}
Expand Down
Loading

0 comments on commit 92cdcc6

Please sign in to comment.