294 lines
10 KiB
JavaScript
294 lines
10 KiB
JavaScript
import Cookies from 'js-cookie';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import React, { useEffect, useState, useRef } from "react";
|
|
import Defaultnavbar from '../Defaultnavbar';
|
|
|
|
export default function MainScreen() {
|
|
|
|
const navigate = useNavigate();
|
|
const [hubs, setHubs] = useState([]);
|
|
const [currentHubName, setCurrentHubName] = useState("")
|
|
const [messages, setMessages] = useState([]);
|
|
const [tempMessage, setTempMessage] = useState("");
|
|
const [channels, setChannels] = useState([]);
|
|
const [currentChannel, setCurrentChannel] = useState([]);
|
|
const [selectedImage, setSelectedImage] = useState(null);
|
|
|
|
const wsRef = useRef(null);
|
|
|
|
let url = `ws://localhost:8000/ws/channel//`; // Updated to include channel
|
|
|
|
|
|
const handleSendMessage = () => {
|
|
|
|
if (tempMessage.trim()) {
|
|
setMessage("");
|
|
}
|
|
};
|
|
|
|
const handleChannelClick = (channel) => {
|
|
// url = `ws://127.0.0.1:8000/ws/channel/1/`; // Updated to include channel
|
|
let tempChannel = currentChannel;
|
|
setCurrentChannel(channel["id"]);
|
|
url = `ws://localhost:8000/ws/channel/${encodeURIComponent(channel["id"])}/`;
|
|
console.log(`Navigated to: ${channel["name"]}`);
|
|
if (tempChannel !== channel["id"]) {
|
|
wsRef.current.close();
|
|
}
|
|
fetchSpecificChannelHub(channel["id"]);
|
|
};
|
|
|
|
function removeHub(inputString) {
|
|
// Split the string by ' '
|
|
const words = inputString.split(' ');
|
|
|
|
// Remove the first word (the 'hub' part)
|
|
words.pop();
|
|
|
|
// Join the remaining words back into a string
|
|
const result = words.join(' ');
|
|
|
|
return result;
|
|
}
|
|
|
|
const sendMessage = async (hId) => {
|
|
console.log("Send message ", currentChannel);
|
|
wsRef.current.send(JSON.stringify({
|
|
"channel": currentChannel,
|
|
"content": tempMessage,
|
|
'image': selectedImage,
|
|
"user": Cookies.get("username"),
|
|
"created_at": "0"
|
|
}))
|
|
setTempMessage("");
|
|
setSelectedImage("");
|
|
|
|
const fileInput = document.querySelector('.image-input');
|
|
if (fileInput) {
|
|
fileInput.value = ''; // Clear the input field
|
|
}
|
|
};
|
|
|
|
const handleKeyDown = (e) => {
|
|
if (e.key === "Enter") {
|
|
sendMessage();
|
|
setTempMessage("");
|
|
}
|
|
};
|
|
|
|
const fetchUserHubs = async () => {
|
|
try {
|
|
const response = await fetch('localhost:8000/gethubs/', { // Replace with your actual API endpoint
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRFToken': Cookies.get("csrftoken"),
|
|
'Authorization': `Token ${Cookies.get("token")}`, // Assuming you store the token in localStorage
|
|
}
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`Error fetching user hubs 1: ${response.statusText}`);
|
|
}
|
|
|
|
const data = await response.json();
|
|
// console.log(data)
|
|
setHubs(data);
|
|
fetchSpecificHub(data[0].hub);
|
|
} catch (error) {
|
|
console.error('Error fetching user hubs:', error);
|
|
}
|
|
};
|
|
|
|
const fetchSpecificHub = async (hId) => {
|
|
try {
|
|
const response = await fetch('http://localhost:8000/getspecifichub/', { // Replace with your actual API endpoint
|
|
method: "POST",
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRFToken': Cookies.get("csrftoken"),
|
|
'Authorization': `Token ${Cookies.get("token")}`, // Assuming you store the token in localStorage
|
|
},
|
|
body: JSON.stringify({ "name": removeHub(hId) })
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`Error fetching user hub 1: ${response.statusText}`);
|
|
}
|
|
|
|
const data = await response.json();
|
|
// console.log(data);
|
|
setCurrentHubName(data.hub["name"]);
|
|
fetchHubChannels(data.hub["name"]);
|
|
// setMessages(data.messages)
|
|
// console.log(messages)
|
|
} catch (error) {
|
|
console.error('Error fetching user hub:', error);
|
|
}
|
|
};
|
|
|
|
const fetchHubChannels = async (hId) => {
|
|
console.log("Channel thing");
|
|
console.log(currentHubName)
|
|
try {
|
|
const response = await fetch('http://localhost:8000/getHubChannels/', { // Replace with your actual API endpoint
|
|
method: "POST",
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRFToken': Cookies.get("csrftoken"),
|
|
'Authorization': `Token ${Cookies.get("token")}`, // Assuming you store the token in localStorage
|
|
},
|
|
body: JSON.stringify({ "hub": hId })
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`Error fetching channel 1: ${response.statusText}`);
|
|
}
|
|
|
|
const data = await response.json();
|
|
setChannels(data);
|
|
setCurrentChannel(data[0].id);
|
|
console.log("My data:", data);
|
|
fetchSpecificChannelHub(data[0].id);
|
|
} catch (error) {
|
|
console.error('Error fetching channel:', error);
|
|
}
|
|
};
|
|
|
|
const fetchSpecificChannelHub = async (hId) => {
|
|
console.log(hId);
|
|
try {
|
|
const response = await fetch('http://localhost:8000/getSpecificChannel/', { // Replace with your actual API endpoint
|
|
method: "POST",
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRFToken': Cookies.get("csrftoken"),
|
|
'Authorization': `Token ${Cookies.get("token")}`, // Assuming you store the token in localStorage
|
|
},
|
|
body: JSON.stringify({ "id": hId })
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`Error fetching specific channel hub 1: ${response.statusText}`);
|
|
}
|
|
|
|
const data = await response.json();
|
|
console.log(data);
|
|
console.log("CURRENT CHANNEL: ", hId)
|
|
setMessages(data.messages);
|
|
} catch (error) {
|
|
console.error('Error fetching specific channel hub:', error);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
console.log("Redone", currentChannel);
|
|
if (currentChannel.length !== 0) {
|
|
console.log("Nice??");
|
|
url = `ws://localhost:8000/ws/channel/${encodeURIComponent(currentChannel)}/`;
|
|
}
|
|
const ws = new WebSocket(url, [], {
|
|
headers: {
|
|
Authorization: `Token ${Cookies.get("token")}}`,
|
|
},
|
|
});
|
|
|
|
console.log(ws);
|
|
|
|
wsRef.current = ws;
|
|
|
|
ws.onmessage = function (e) {
|
|
console.log("NEW CURRENT CHANNEL", currentChannel);
|
|
// url = `ws://127.0.0.1:8000/ws/channel/1/`; // Updated to include channel
|
|
let data = JSON.parse(e.data);
|
|
console.log("Data:", data);
|
|
console.log("Current messages: ", messages);
|
|
setMessages((prevMessages) => [data, ...prevMessages]);
|
|
console.log(messages);
|
|
}
|
|
|
|
ws.onopen = function () {
|
|
console.log("WebSocket connected to channel:", currentChannel);
|
|
};
|
|
|
|
if (Cookies.get("username") === undefined) {
|
|
// console.log("Navigate");
|
|
navigate('/homepage');
|
|
}
|
|
if (currentChannel.length === 0) {
|
|
console.log("Nice??");
|
|
fetchUserHubs();
|
|
}
|
|
|
|
}, [navigate, currentChannel]);
|
|
|
|
const handleImageChange = (e) => {
|
|
const file = e.target.files[0];
|
|
if (file) {
|
|
const reader = new FileReader();
|
|
reader.onloadend = () => {
|
|
setSelectedImage(reader.result); // Set base64-encoded image
|
|
};
|
|
reader.readAsDataURL(file);
|
|
}
|
|
};
|
|
|
|
function ImageOrPDF({url}) {
|
|
if (url.slice(-3).toLowerCase() !== "pdf") {
|
|
return <img src={`http://localhost:8000${url}`} style={{maxWidth: '300px'}}></img>;
|
|
} else {
|
|
return <a href={`http://localhost:8000${url}`} target="_blank">{url}</a>
|
|
}
|
|
}
|
|
|
|
|
|
return (
|
|
<div>
|
|
<Defaultnavbar allChannels={channels} onChannelClick={handleChannelClick} />
|
|
<div className="hub-content">
|
|
<h1>{currentHubName}</h1>
|
|
<div className="hub-messages">
|
|
{messages.map((message) => (
|
|
<div className="message" key={message.id}>
|
|
<p className="message-user">{message.user}</p>
|
|
<p className="message-content">{message.content}</p>
|
|
{(message.image !== null) &&
|
|
<ImageOrPDF url={message.image}/>
|
|
}
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="message-bar">
|
|
<input
|
|
type="text"
|
|
className="message-input"
|
|
placeholder="Type your message here..."
|
|
value={tempMessage}
|
|
onChange={(e) => setTempMessage(e.target.value)}
|
|
onKeyDown={handleKeyDown}
|
|
/>
|
|
<input
|
|
type="file"
|
|
accept="*"
|
|
className="image-input"
|
|
onChange={handleImageChange}
|
|
style={{ marginLeft: '10px' }}
|
|
/>
|
|
<button className="send-button" onClick={sendMessage}>
|
|
Send
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{/* Check if username cookie exists */}
|
|
{Cookies.get("username") !== undefined && (
|
|
<>
|
|
{/* Render hubs if cookie exists */}
|
|
<aside>
|
|
{hubs.map(hub => (
|
|
<p onClick={() => fetchSpecificHub(hub.hub)} key={hub.id}>{hub.hub}</p>
|
|
))}
|
|
</aside>
|
|
</>
|
|
)}
|
|
</div>)
|
|
}
|