Working
This commit is contained in:
parent
ae0c829453
commit
42cf50ee75
@ -4,8 +4,9 @@
|
|||||||
|
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
|
/* Legend CSS from https://codesandbox.io/s/how-to-add-a-legend-to-the-map-using-react-leaflet-6yqs5 */
|
||||||
.leaflet-container {
|
.leaflet-container {
|
||||||
height: 100%;
|
height: 90vh;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -36,3 +37,83 @@
|
|||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* CSS from https://github.com/USUFSLC/sochat ( I made it :) ) */
|
||||||
|
body {
|
||||||
|
font-family: Consolas, monaco, monospace;
|
||||||
|
color: #fbf1c7;
|
||||||
|
margin: 0;
|
||||||
|
background-color: #3c3836;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 900px;
|
||||||
|
width: 80%;
|
||||||
|
|
||||||
|
border: 1px solid #b16286;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin: 0;
|
||||||
|
padding: 24px;
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
-moz-transform: translateX(-50%) translateY(-50%);
|
||||||
|
-webkit-transform: translateX(-50%) translateY(-50%);
|
||||||
|
transform: translateX(-50%) translateY(-50%);
|
||||||
|
background-color: #282828;
|
||||||
|
|
||||||
|
box-shadow: rgb( 0, 0, 0, 0.6) 6px 45px 45px -12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat {
|
||||||
|
border-bottom: 1px solid #d65d0e;
|
||||||
|
height: 200px;
|
||||||
|
overflow-y: scroll;
|
||||||
|
padding-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
scrollbar-width: thin;
|
||||||
|
scrollbar-color: #d5c4a1 rgba(0,0,0,0);
|
||||||
|
}
|
||||||
|
|
||||||
|
*::-webkit-scrollbar {
|
||||||
|
width: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
*::-webkit-scrollbar-track {
|
||||||
|
background: rgba(0,0,0,0);
|
||||||
|
}
|
||||||
|
|
||||||
|
*::-webkit-scrollbar-thumb {
|
||||||
|
background-color: #d5c4a1;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input {
|
||||||
|
font-size: 16px;
|
||||||
|
font-size: max(16px, 1em);
|
||||||
|
font-family: inherit;
|
||||||
|
padding: 0.25em 0.5em;
|
||||||
|
background-color: rgba(0,0,0,0);
|
||||||
|
border: none;
|
||||||
|
border-bottom: 1px solid #83a598;
|
||||||
|
color: #d5c4a1;
|
||||||
|
margin-top: 12px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
padding: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
border: 1px solid #8ec07c;
|
||||||
|
color: #8ec07c;
|
||||||
|
border-radius: 8px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
86
client/components/chatroom/_chat_room.jsx
Normal file
86
client/components/chatroom/_chat_room.jsx
Normal file
@ -0,0 +1,86 @@
|
|||||||
|
import { useEffect, useState, useContext } from 'react';
|
||||||
|
import { ApiContext } from '../../utils/api_context';
|
||||||
|
import { useMessages } from '../../utils/use_messages';
|
||||||
|
import { Link, useParams } from 'react-router-dom';
|
||||||
|
import { generateGruvboxFromString } from '../../utils/generate_gruvbox';
|
||||||
|
|
||||||
|
/*
|
||||||
|
A lot of this is stolen from my Docker presentation :).
|
||||||
|
https://github.com/USUFSLC/sochat
|
||||||
|
*/
|
||||||
|
export const ChatRoom = () => {
|
||||||
|
const { id } = useParams();
|
||||||
|
const [chatRoom, setChatRoom] = useState('');
|
||||||
|
const [messages, sendMessage] = useMessages(chatRoom);
|
||||||
|
const [message, setMessage] = useState('');
|
||||||
|
const [color, setColor] = useState(generateGruvboxFromString('placeholder'));
|
||||||
|
const [user, setUser] = useState({});
|
||||||
|
const api = useContext(ApiContext);
|
||||||
|
|
||||||
|
const fetchUser = async () => {
|
||||||
|
const res = await api.get('/users/me');
|
||||||
|
if (res.user) {
|
||||||
|
setUser(res.user);
|
||||||
|
setColor(generateGruvboxFromString(`${res.user.firstName} ${res.user.lastName}`));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const fetchChatRoom = async (id) => {
|
||||||
|
const room = await api.get(`/chat_rooms/${id}`);
|
||||||
|
if (room) {
|
||||||
|
setChatRoom(room);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const scrollToBottomOfChat = () => {
|
||||||
|
const objDiv = document.getElementById('chat');
|
||||||
|
objDiv.scrollTop = objDiv.scrollHeight;
|
||||||
|
};
|
||||||
|
|
||||||
|
const sendThisMessage = () => {
|
||||||
|
sendMessage(message);
|
||||||
|
setMessage('');
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchUser();
|
||||||
|
fetchChatRoom(id);
|
||||||
|
}, [id]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
scrollToBottomOfChat();
|
||||||
|
}, [messages]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="container" style={{ border: `1px solid ${color}` }}>
|
||||||
|
<div style={{ textAlign: 'center' }}>
|
||||||
|
<h2>{chatRoom?.name || `Chat Room ${chatRoom?.id}`}</h2>
|
||||||
|
</div>
|
||||||
|
<div id="chat" className="chat">
|
||||||
|
<p>Welcome!</p>
|
||||||
|
{messages.map((message) => (
|
||||||
|
<div key={message.id} style={{ lineBreak: 'normal' }}>
|
||||||
|
<span style={{ color: generateGruvboxFromString(message.userName) }}>{message.userName}: </span>
|
||||||
|
<span>{message.content}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<textarea
|
||||||
|
placeholder={'Message'}
|
||||||
|
className="input"
|
||||||
|
onChange={(e) => setMessage(e.target.value)}
|
||||||
|
value={message}
|
||||||
|
rows={1}
|
||||||
|
cols={30}
|
||||||
|
></textarea>
|
||||||
|
<div className="button" onClick={sendThisMessage}>
|
||||||
|
Send
|
||||||
|
</div>
|
||||||
|
<div className="button">
|
||||||
|
<Link to="/">Back to map</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
@ -1,3 +1,3 @@
|
|||||||
export const Input = (props) => {
|
export const Input = (props) => {
|
||||||
return <input className="border-2 rounded-lg p-1" {...props} />;
|
return <input className="border-2 rounded-lg p-1 input" {...props} />;
|
||||||
};
|
};
|
||||||
|
@ -5,13 +5,11 @@ import { AuthContext } from '../../utils/auth_context';
|
|||||||
import { RolesContext } from '../../utils/roles_context';
|
import { RolesContext } from '../../utils/roles_context';
|
||||||
import { Button } from '../common/button';
|
import { Button } from '../common/button';
|
||||||
import { Map } from '../map/_map';
|
import { Map } from '../map/_map';
|
||||||
import { Ping } from './ping';
|
|
||||||
|
|
||||||
export const Home = () => {
|
export const Home = () => {
|
||||||
const [, setAuthToken] = useContext(AuthContext);
|
const [, setAuthToken] = useContext(AuthContext);
|
||||||
const api = useContext(ApiContext);
|
const api = useContext(ApiContext);
|
||||||
const roles = useContext(RolesContext);
|
const roles = useContext(RolesContext);
|
||||||
|
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
@ -29,6 +27,13 @@ export const Home = () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const joinRoom = async (id, userPosition) => {
|
||||||
|
const res = await api.get(`/chat_rooms/${id}/joinable?lat=${userPosition.lat}&lng=${userPosition.lng}`);
|
||||||
|
if (res) {
|
||||||
|
navigate(`/rooms/${id}`);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return <div>Loading...</div>;
|
return <div>Loading...</div>;
|
||||||
}
|
}
|
||||||
@ -46,7 +51,7 @@ export const Home = () => {
|
|||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<Map user={user} />
|
<Map user={user} joinRoom={joinRoom} />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -1,84 +0,0 @@
|
|||||||
import { useState, useEffect, useRef, useContext } from 'react';
|
|
||||||
import { Button } from '../common/button';
|
|
||||||
import { io } from 'socket.io-client';
|
|
||||||
import { AuthContext } from '../../utils/auth_context';
|
|
||||||
|
|
||||||
export const Ping = () => {
|
|
||||||
const [pings, setPings] = useState([]);
|
|
||||||
const [key, setKey] = useState('defaultkey');
|
|
||||||
const [currentRoom, setCurrentRoom] = useState(null);
|
|
||||||
const [authToken] = useContext(AuthContext);
|
|
||||||
const [socket, setSocket] = useState(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
// instantiates a socket object and initiates the connection...
|
|
||||||
// you probably want to make sure you are only doing this in one component at a time.
|
|
||||||
const socket = io({
|
|
||||||
auth: { token: authToken },
|
|
||||||
query: { message: 'I am the query ' },
|
|
||||||
});
|
|
||||||
|
|
||||||
// adds an event listener to the connection event
|
|
||||||
socket.on('connect', () => {
|
|
||||||
setSocket(socket);
|
|
||||||
});
|
|
||||||
|
|
||||||
// adds event listener to the disconnection event
|
|
||||||
socket.on('disconnect', () => {
|
|
||||||
console.log('Disconnected');
|
|
||||||
});
|
|
||||||
|
|
||||||
// recieved a pong event from the server
|
|
||||||
socket.on('pong', (data) => {
|
|
||||||
console.log('Recieved pong', data);
|
|
||||||
});
|
|
||||||
|
|
||||||
// IMPORTANT! Unregister from all events when the component unmounts and disconnect.
|
|
||||||
return () => {
|
|
||||||
socket.off('connect');
|
|
||||||
socket.off('disconnect');
|
|
||||||
socket.off('pong');
|
|
||||||
socket.disconnect();
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
// if our token changes we need to tell the socket also
|
|
||||||
if (socket) {
|
|
||||||
// this is a little weird because we are modifying this object in memory
|
|
||||||
// i dunno a better way to do this though...
|
|
||||||
socket.auth.token = authToken;
|
|
||||||
}
|
|
||||||
}, [authToken]);
|
|
||||||
|
|
||||||
if (!socket) return 'Loading...';
|
|
||||||
|
|
||||||
const sendPing = () => {
|
|
||||||
// sends a ping to the server to be broadcast to everybody in the room
|
|
||||||
currentRoom && socket.emit('ping', { currentRoom });
|
|
||||||
};
|
|
||||||
|
|
||||||
const joinRoom = () => {
|
|
||||||
// tells the server to remove the current client from the current room and add them to the new room
|
|
||||||
socket.emit('join-room', { currentRoom, newRoom: key }, (response) => {
|
|
||||||
console.log(response);
|
|
||||||
setCurrentRoom(response.room);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<header>Ping: {currentRoom || '(No room joined)'}</header>
|
|
||||||
<section>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
className="border-2 border-gray-700 p-2 rounded"
|
|
||||||
value={key}
|
|
||||||
onChange={(e) => setKey(e.target.value)}
|
|
||||||
/>
|
|
||||||
<Button onClick={joinRoom}>Connect To Room</Button>
|
|
||||||
<Button onClick={sendPing}>Send Ping</Button>
|
|
||||||
</section>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
@ -6,7 +6,7 @@ import { useEffect, useState } from 'react';
|
|||||||
import toast from 'react-hot-toast';
|
import toast from 'react-hot-toast';
|
||||||
import { Legend } from './legend';
|
import { Legend } from './legend';
|
||||||
|
|
||||||
export const Map = ({ user, zoom }) => {
|
export const Map = ({ user, zoom, joinRoom }) => {
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
const [position, setPosition] = useState({});
|
const [position, setPosition] = useState({});
|
||||||
const [positionWatcher, setPositionWatcher] = useState();
|
const [positionWatcher, setPositionWatcher] = useState();
|
||||||
@ -39,7 +39,7 @@ export const Map = ({ user, zoom }) => {
|
|||||||
maxZoom={19}
|
maxZoom={19}
|
||||||
/>
|
/>
|
||||||
<Legend />
|
<Legend />
|
||||||
<Geoman joinRoom={console.log} userPos={position} user={user} />
|
<Geoman joinRoom={joinRoom} userPos={position} user={user} />
|
||||||
</MapContainer>
|
</MapContainer>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -1,16 +1,15 @@
|
|||||||
import { useLeafletContext } from '@react-leaflet/core';
|
import { useLeafletContext } from '@react-leaflet/core';
|
||||||
import L from 'leaflet';
|
import L from 'leaflet';
|
||||||
import markerIconPng from 'leaflet/dist/images/marker-icon.png';
|
import markerIconPng from 'leaflet/dist/images/marker-icon.png';
|
||||||
import { useEffect, useContext } from 'react';
|
import { useEffect, useContext, useState } from 'react';
|
||||||
import { ApiContext } from '../../utils/api_context';
|
import { ApiContext } from '../../utils/api_context';
|
||||||
|
|
||||||
const userPositionBubble = {
|
const userPositionBubble = {
|
||||||
color: 'black',
|
color: 'black',
|
||||||
fillColor: 'black',
|
fillColor: 'black',
|
||||||
fillOpacity: 0.6,
|
fillOpacity: 0.4,
|
||||||
weight: 5,
|
weight: 1,
|
||||||
pmIgnore: true,
|
pmIgnore: true,
|
||||||
radius: 5,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const joinable = {
|
const joinable = {
|
||||||
@ -31,7 +30,7 @@ const editable = {
|
|||||||
pmIgnore: false,
|
pmIgnore: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
const icon = new L.Icon({ iconUrl: markerIconPng, iconSize: [25, 41], iconAnchor: [12, 41] });
|
const icon = new L.Icon({ iconUrl: markerIconPng, iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [0, -30] });
|
||||||
|
|
||||||
const haversine = (p1, p2) => {
|
const haversine = (p1, p2) => {
|
||||||
const degreesToRadians = (degrees) => degrees * (Math.PI / 180);
|
const degreesToRadians = (degrees) => degrees * (Math.PI / 180);
|
||||||
@ -51,6 +50,7 @@ const haversine = (p1, p2) => {
|
|||||||
export const Geoman = ({ user, userPos, joinRoom }) => {
|
export const Geoman = ({ user, userPos, joinRoom }) => {
|
||||||
const context = useLeafletContext();
|
const context = useLeafletContext();
|
||||||
const api = useContext(ApiContext);
|
const api = useContext(ApiContext);
|
||||||
|
let dontRedirect = true;
|
||||||
const circleAndMarkerFromChatroom = (chatRoom) => {
|
const circleAndMarkerFromChatroom = (chatRoom) => {
|
||||||
const circle = new L.Circle(chatRoom.center, chatRoom.radius);
|
const circle = new L.Circle(chatRoom.center, chatRoom.radius);
|
||||||
const marker = new L.Marker(chatRoom.center, { pmIgnore: !chatRoom.isEditable, icon });
|
const marker = new L.Marker(chatRoom.center, { pmIgnore: !chatRoom.isEditable, icon });
|
||||||
@ -62,10 +62,15 @@ export const Geoman = ({ user, userPos, joinRoom }) => {
|
|||||||
: unjoinable,
|
: unjoinable,
|
||||||
);
|
);
|
||||||
marker.addEventListener('click', () => {
|
marker.addEventListener('click', () => {
|
||||||
console.log(chatRoom.id);
|
setTimeout(() => {
|
||||||
console.log(haversine(userPos, { lat: chatRoom.latitude, lng: chatRoom.longitude }), chatRoom.radius, userPos);
|
if (dontRedirect) {
|
||||||
|
joinRoom(chatRoom.id, userPos);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
dontRedirect = false;
|
||||||
|
}, 500);
|
||||||
});
|
});
|
||||||
if (!!chatRoom.isEditable) {
|
if (chatRoom.isEditable) {
|
||||||
[circle, marker].map((x) => {
|
[circle, marker].map((x) => {
|
||||||
x.on('pm:edit', (e) => {
|
x.on('pm:edit', (e) => {
|
||||||
const coords = e.target.getLatLng();
|
const coords = e.target.getLatLng();
|
||||||
@ -78,6 +83,7 @@ export const Geoman = ({ user, userPos, joinRoom }) => {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
x.on('pm:remove', (e) => {
|
x.on('pm:remove', (e) => {
|
||||||
|
dontRedirect = true;
|
||||||
context.map.removeLayer(marker);
|
context.map.removeLayer(marker);
|
||||||
context.map.removeLayer(circle);
|
context.map.removeLayer(circle);
|
||||||
|
|
||||||
@ -87,9 +93,17 @@ export const Geoman = ({ user, userPos, joinRoom }) => {
|
|||||||
circle.on('pm:drag', (e) => {
|
circle.on('pm:drag', (e) => {
|
||||||
marker.setLatLng(e.target.getLatLng());
|
marker.setLatLng(e.target.getLatLng());
|
||||||
});
|
});
|
||||||
|
marker.bindPopup(chatRoom.name || `Chat Room ${chatRoom.id}`);
|
||||||
|
marker.on('mouseover', (e) => {
|
||||||
|
console.log(chatRoom);
|
||||||
|
e.target.openPopup();
|
||||||
|
});
|
||||||
marker.on('pm:drag', (e) => {
|
marker.on('pm:drag', (e) => {
|
||||||
circle.setLatLng(e.target.getLatLng());
|
circle.setLatLng(e.target.getLatLng());
|
||||||
});
|
});
|
||||||
|
marker.on('pm:dragstart', (e) => {
|
||||||
|
dontRedirect = true;
|
||||||
|
});
|
||||||
}
|
}
|
||||||
[circle, marker].map((x) => x.addTo(context.map));
|
[circle, marker].map((x) => x.addTo(context.map));
|
||||||
return [circle, marker];
|
return [circle, marker];
|
||||||
@ -149,19 +163,16 @@ export const Geoman = ({ user, userPos, joinRoom }) => {
|
|||||||
|
|
||||||
const { lat: latitude, lng: longitude } = shape.layer.getLatLng();
|
const { lat: latitude, lng: longitude } = shape.layer.getLatLng();
|
||||||
const chatRoom = await api.post('/chat_rooms', {
|
const chatRoom = await api.post('/chat_rooms', {
|
||||||
|
name: prompt("What's the name of the chat room?"),
|
||||||
latitude,
|
latitude,
|
||||||
longitude,
|
longitude,
|
||||||
radius: shape.layer.getRadius(),
|
radius: shape.layer.getRadius(),
|
||||||
});
|
});
|
||||||
|
console.log(chatRoom);
|
||||||
reRender();
|
reRender();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
leafletContainer.on('pm:remove', (e) => {
|
|
||||||
console.log('object removed');
|
|
||||||
// console.log(leafletContainer.pm.getGeomanLayers(true).toGeoJSON());
|
|
||||||
});
|
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
leafletContainer.pm.removeControls();
|
leafletContainer.pm.removeControls();
|
||||||
leafletContainer.pm.setGlobalOptions({ pmIgnore: true });
|
leafletContainer.pm.setGlobalOptions({ pmIgnore: true });
|
||||||
|
@ -2,6 +2,7 @@ import L from 'leaflet';
|
|||||||
import { useEffect } from 'react';
|
import { useEffect } from 'react';
|
||||||
import { useLeafletContext } from '@react-leaflet/core';
|
import { useLeafletContext } from '@react-leaflet/core';
|
||||||
|
|
||||||
|
/* Legend adapted from https://codesandbox.io/s/how-to-add-a-legend-to-the-map-using-react-leaflet-6yqs5 */
|
||||||
export const Legend = () => {
|
export const Legend = () => {
|
||||||
const context = useLeafletContext();
|
const context = useLeafletContext();
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@ -14,7 +15,7 @@ export const Legend = () => {
|
|||||||
labels.push('<i style="background:black"></i><span>Current position</span>');
|
labels.push('<i style="background:black"></i><span>Current position</span>');
|
||||||
labels.push('<i style="background:red"></i><span>Unjoinable</span>');
|
labels.push('<i style="background:red"></i><span>Unjoinable</span>');
|
||||||
labels.push('<i style="background:green"></i><span>Joinable</span>');
|
labels.push('<i style="background:green"></i><span>Joinable</span>');
|
||||||
labels.push('<i style="background:blue"></i><span>Editable</span>');
|
labels.push('<i style="background:blue"></i><span>Editable & Joinable</span>');
|
||||||
|
|
||||||
div.innerHTML = labels.join('<br>');
|
div.innerHTML = labels.join('<br>');
|
||||||
return div;
|
return div;
|
||||||
|
@ -5,6 +5,7 @@ import { AuthContext } from '../utils/auth_context';
|
|||||||
import { SignIn } from './sign_in/_sign_in';
|
import { SignIn } from './sign_in/_sign_in';
|
||||||
import { SignUp } from './sign_up/_sign_up';
|
import { SignUp } from './sign_up/_sign_up';
|
||||||
import { Admin } from './admin/_admin';
|
import { Admin } from './admin/_admin';
|
||||||
|
import { ChatRoom } from './chatroom/_chat_room';
|
||||||
|
|
||||||
export const Router = () => {
|
export const Router = () => {
|
||||||
const [authToken] = useContext(AuthContext);
|
const [authToken] = useContext(AuthContext);
|
||||||
@ -18,6 +19,7 @@ export const Router = () => {
|
|||||||
<Route path="admin" element={<Admin />} />
|
<Route path="admin" element={<Admin />} />
|
||||||
<Route path="signin" element={<SignIn />} />
|
<Route path="signin" element={<SignIn />} />
|
||||||
<Route path="signup" element={<SignUp />} />
|
<Route path="signup" element={<SignUp />} />
|
||||||
|
<Route path="rooms/:id" element={<ChatRoom />} />
|
||||||
</Routes>
|
</Routes>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
19
client/utils/generate_gruvbox.js
Normal file
19
client/utils/generate_gruvbox.js
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
// This is also from https://github.com/USUFSLC/sochat
|
||||||
|
const gruvboxColors = [
|
||||||
|
'#b8bb26',
|
||||||
|
'#fabd2f',
|
||||||
|
'#83a598',
|
||||||
|
'#d3869b',
|
||||||
|
'#8ec07c',
|
||||||
|
'#458588',
|
||||||
|
'#cc241d',
|
||||||
|
'#d65d0e',
|
||||||
|
'#bdae93',
|
||||||
|
];
|
||||||
|
|
||||||
|
export const generateGruvboxFromString = (string) =>
|
||||||
|
gruvboxColors[
|
||||||
|
Array.from(string)
|
||||||
|
.map((x) => x.charCodeAt(0))
|
||||||
|
.reduce((a, x) => a + x, 0) % gruvboxColors.length
|
||||||
|
];
|
42
client/utils/use_messages.js
Normal file
42
client/utils/use_messages.js
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
import { useState, useContext, useEffect, useRef } from 'react';
|
||||||
|
import { AuthContext } from './auth_context';
|
||||||
|
import { io } from 'socket.io-client';
|
||||||
|
|
||||||
|
export const useMessages = (chatRoom) => {
|
||||||
|
const [messages, setMessages] = useState([]);
|
||||||
|
const messageRef = useRef([]);
|
||||||
|
const [socket, setSocket] = useState({});
|
||||||
|
const [authToken] = useContext(AuthContext);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (chatRoom?.id) {
|
||||||
|
const socket = io({
|
||||||
|
query: {
|
||||||
|
chatRoomId: chatRoom.id,
|
||||||
|
},
|
||||||
|
auth: {
|
||||||
|
token: authToken,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
socket.on('connect', () => {
|
||||||
|
setSocket(socket);
|
||||||
|
});
|
||||||
|
socket.on('new-message', (message) => {
|
||||||
|
messageRef.current.push(message);
|
||||||
|
setMessages([...messageRef.current]);
|
||||||
|
});
|
||||||
|
return () => {
|
||||||
|
socket.off('new-message');
|
||||||
|
socket.close();
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}, [chatRoom]);
|
||||||
|
|
||||||
|
const sendMessage = (message) => {
|
||||||
|
if (socket?.emit) {
|
||||||
|
socket.emit('message', message);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return [messages, sendMessage];
|
||||||
|
};
|
@ -5,7 +5,7 @@ import { AppController } from './app.controller';
|
|||||||
import { config } from './database/config';
|
import { config } from './database/config';
|
||||||
import { ChatRoomModule } from './modules/chat_room.module';
|
import { ChatRoomModule } from './modules/chat_room.module';
|
||||||
import { UsersModule } from './modules/users.module';
|
import { UsersModule } from './modules/users.module';
|
||||||
import { PingGateway } from './providers/gateways/ping.gateway';
|
import { ChatRoomGateway } from './providers/gateways/chat_room.gateway';
|
||||||
import { AuthGuard } from './providers/guards/auth.guard';
|
import { AuthGuard } from './providers/guards/auth.guard';
|
||||||
import { RolesGuard } from './providers/guards/roles.guard';
|
import { RolesGuard } from './providers/guards/roles.guard';
|
||||||
import { ChatRoomService } from './providers/services/chat_room.service';
|
import { ChatRoomService } from './providers/services/chat_room.service';
|
||||||
@ -18,7 +18,7 @@ import { GuardUtil } from './providers/util/guard.util';
|
|||||||
imports: [TypeOrmModule.forRoot(config), UsersModule, ChatRoomModule],
|
imports: [TypeOrmModule.forRoot(config), UsersModule, ChatRoomModule],
|
||||||
controllers: [AppController],
|
controllers: [AppController],
|
||||||
providers: [
|
providers: [
|
||||||
PingGateway,
|
ChatRoomGateway,
|
||||||
UsersService,
|
UsersService,
|
||||||
RolesService,
|
RolesService,
|
||||||
JwtService,
|
JwtService,
|
||||||
|
@ -4,20 +4,43 @@ import { JwtBodyDto } from 'server/dto/jwt_body.dto';
|
|||||||
import { ChatRoomService } from 'server/providers/services/chat_room.service';
|
import { ChatRoomService } from 'server/providers/services/chat_room.service';
|
||||||
import { UsersService } from 'server/providers/services/users.service';
|
import { UsersService } from 'server/providers/services/users.service';
|
||||||
|
|
||||||
|
const haversine = (p1, p2) => {
|
||||||
|
const degreesToRadians = (degrees) => degrees * (Math.PI / 180);
|
||||||
|
const delta = { lat: degreesToRadians(p2.lat - p1.lat), lng: degreesToRadians(p2.lng - p1.lng) };
|
||||||
|
const a =
|
||||||
|
Math.sin(delta.lat / 2) * Math.sin(delta.lat / 2) +
|
||||||
|
Math.cos(degreesToRadians(p1.lat)) *
|
||||||
|
Math.cos(degreesToRadians(p2.lat)) *
|
||||||
|
Math.sin(delta.lng / 2) *
|
||||||
|
Math.sin(delta.lng / 2);
|
||||||
|
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
|
||||||
|
const r = 6371 * 1000;
|
||||||
|
return r * c;
|
||||||
|
};
|
||||||
@Controller()
|
@Controller()
|
||||||
export class ChatRoomController {
|
export class ChatRoomController {
|
||||||
constructor(private chatRoomService: ChatRoomService, private usersService: UsersService) {}
|
constructor(private chatRoomService: ChatRoomService, private usersService: UsersService) {}
|
||||||
|
|
||||||
@Get('/chat_rooms')
|
@Get('/chat_rooms')
|
||||||
async get(@Query() query: any) {
|
async get(@JwtBody() jwtBody: JwtBodyDto, @Query() query: any) {
|
||||||
console.log(query);
|
return await this.chatRoomService.nearOrUserOwns({ ...query, userId: jwtBody.userId });
|
||||||
return await this.chatRoomService.near(query);
|
}
|
||||||
|
|
||||||
|
@Get('/chat_rooms/:id')
|
||||||
|
async getId(@Param('id') id: number) {
|
||||||
|
return await this.chatRoomService.findById(id);
|
||||||
|
}
|
||||||
|
|
||||||
|
@Get('/chat_rooms/:id/joinable')
|
||||||
|
async joinable(@JwtBody() jwtBody, @Param('id') id: number, @Query() query: any) {
|
||||||
|
return !!(await this.chatRoomService.nearOrUserOwns({ ...query, userId: jwtBody.userId })).find(
|
||||||
|
(cr) => cr.id == id && haversine({ lat: cr.latitude, lng: cr.longitude }, query) < cr.radius,
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@Post('/chat_rooms')
|
@Post('/chat_rooms')
|
||||||
async create(@JwtBody() jwtBody: JwtBodyDto, @Body() chatRoom: any) {
|
async create(@JwtBody() jwtBody: JwtBodyDto, @Body() chatRoom: any) {
|
||||||
chatRoom.user = await this.usersService.find(jwtBody.userId);
|
chatRoom.user = await this.usersService.find(jwtBody.userId);
|
||||||
console.log(jwtBody);
|
|
||||||
return await this.chatRoomService.create(chatRoom);
|
return await this.chatRoomService.create(chatRoom);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -32,6 +32,11 @@ export class AddChatRoom1648605030863 implements MigrationInterface {
|
|||||||
type: 'float',
|
type: 'float',
|
||||||
isNullable: false,
|
isNullable: false,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: 'name',
|
||||||
|
type: 'varchar',
|
||||||
|
isNullable: true,
|
||||||
|
},
|
||||||
],
|
],
|
||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
|
@ -15,6 +15,9 @@ export class ChatRoom {
|
|||||||
@Column()
|
@Column()
|
||||||
radius: number;
|
radius: number;
|
||||||
|
|
||||||
|
@Column()
|
||||||
|
name: string;
|
||||||
|
|
||||||
@ManyToOne(() => User, (user) => user.chatRooms)
|
@ManyToOne(() => User, (user) => user.chatRooms)
|
||||||
user: User;
|
user: User;
|
||||||
}
|
}
|
||||||
|
@ -1,27 +1,29 @@
|
|||||||
import { UseGuards } from '@nestjs/common';
|
import { UseGuards } from '@nestjs/common';
|
||||||
import { ConnectedSocket, MessageBody, OnGatewayConnection, OnGatewayDisconnect, OnGatewayInit, SubscribeMessage, WebSocketGateway, WebSocketServer, WsException } from '@nestjs/websockets';
|
import {
|
||||||
|
ConnectedSocket,
|
||||||
|
MessageBody,
|
||||||
|
OnGatewayConnection,
|
||||||
|
OnGatewayDisconnect,
|
||||||
|
OnGatewayInit,
|
||||||
|
SubscribeMessage,
|
||||||
|
WebSocketGateway,
|
||||||
|
WebSocketServer,
|
||||||
|
WsException,
|
||||||
|
} from '@nestjs/websockets';
|
||||||
import { GatewayJwtBody } from 'server/decorators/gateway_jwt_body.decorator';
|
import { GatewayJwtBody } from 'server/decorators/gateway_jwt_body.decorator';
|
||||||
import { JwtBodyDto } from 'server/dto/jwt_body.dto';
|
import { JwtBodyDto } from 'server/dto/jwt_body.dto';
|
||||||
import { Server, Socket } from 'socket.io';
|
import { Server, Socket } from 'socket.io';
|
||||||
import { GatewayAuthGuard } from '../guards/gatewayauth.guard';
|
import { GatewayAuthGuard } from '../guards/gatewayauth.guard';
|
||||||
import { JwtService } from '../services/jwt.service';
|
import { JwtService } from '../services/jwt.service';
|
||||||
|
import { UsersService } from '../services/users.service';
|
||||||
class JoinPayload {
|
|
||||||
currentRoom?: string;
|
|
||||||
newRoom: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
class PingPayload {
|
|
||||||
currentRoom: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
@WebSocketGateway()
|
@WebSocketGateway()
|
||||||
@UseGuards(GatewayAuthGuard)
|
@UseGuards(GatewayAuthGuard)
|
||||||
export class PingGateway implements OnGatewayInit, OnGatewayConnection, OnGatewayDisconnect {
|
export class ChatRoomGateway implements OnGatewayInit, OnGatewayConnection, OnGatewayDisconnect {
|
||||||
@WebSocketServer()
|
@WebSocketServer()
|
||||||
server: Server;
|
server: Server;
|
||||||
|
|
||||||
constructor(private jwtService: JwtService) {}
|
constructor(private jwtService: JwtService, private userService: UsersService) {}
|
||||||
|
|
||||||
afterInit(server: Server) {
|
afterInit(server: Server) {
|
||||||
console.log('Sockets initialized');
|
console.log('Sockets initialized');
|
||||||
@ -36,8 +38,9 @@ export class PingGateway implements OnGatewayInit, OnGatewayConnection, OnGatewa
|
|||||||
try {
|
try {
|
||||||
const jwt = client.handshake.auth.token;
|
const jwt = client.handshake.auth.token;
|
||||||
const jwtBody = this.jwtService.parseToken(jwt);
|
const jwtBody = this.jwtService.parseToken(jwt);
|
||||||
console.log(client.handshake.query);
|
const chatRoomId = client.handshake.query.chatRoomId;
|
||||||
console.log('Client Connected: ', jwtBody.userId);
|
console.log('Client Connected: ', jwtBody.userId);
|
||||||
|
client.join(chatRoomId);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
throw new WsException('Invalid token');
|
throw new WsException('Invalid token');
|
||||||
}
|
}
|
||||||
@ -47,21 +50,18 @@ export class PingGateway implements OnGatewayInit, OnGatewayConnection, OnGatewa
|
|||||||
console.log('Client Disconnected');
|
console.log('Client Disconnected');
|
||||||
}
|
}
|
||||||
|
|
||||||
@SubscribeMessage('ping')
|
@SubscribeMessage('message')
|
||||||
public handlePing(
|
public async handleMessage(
|
||||||
@ConnectedSocket() client: Socket,
|
@ConnectedSocket() client: Socket,
|
||||||
@MessageBody() payload: PingPayload,
|
@MessageBody() data: string,
|
||||||
@GatewayJwtBody() jwtBody: JwtBodyDto,
|
@GatewayJwtBody() jwtBody: JwtBodyDto,
|
||||||
) {
|
) {
|
||||||
this.server.to(payload.currentRoom).emit('pong', { message: { userId: jwtBody.userId } });
|
const user = await this.userService.find(jwtBody.userId);
|
||||||
console.log(client.rooms);
|
this.server.to(client.handshake.query.chatRoomId).emit('new-message', {
|
||||||
}
|
id: user.id * Math.random() * 2048 * Date.now(),
|
||||||
|
content: data,
|
||||||
@SubscribeMessage('join-room')
|
userName: `${user.firstName} ${user.lastName}`,
|
||||||
public async joinRoom(client: Socket, payload: JoinPayload) {
|
userId: user.id,
|
||||||
console.log(payload);
|
});
|
||||||
payload.currentRoom && (await client.leave(payload.currentRoom));
|
|
||||||
await client.join(payload.newRoom);
|
|
||||||
return { msg: 'Joined room', room: payload.newRoom };
|
|
||||||
}
|
}
|
||||||
}
|
}
|
@ -18,9 +18,10 @@ export class ChatRoomService {
|
|||||||
return this.chatRoomRepository.find();
|
return this.chatRoomRepository.find();
|
||||||
}
|
}
|
||||||
|
|
||||||
near({ lat, lng }: { lat: number; lng: number }) {
|
nearOrUserOwns({ lat, lng, userId }: { lat: number; lng: number; userId: number }) {
|
||||||
|
// SQL injection maybe?
|
||||||
return this.chatRoomRepository.query(
|
return this.chatRoomRepository.query(
|
||||||
`SELECT * FROM chat_room WHERE calculate_distance(latitude, longitude, ${lat}, ${lng}, 'M') < 5`,
|
`SELECT * FROM chat_room WHERE calculate_distance(latitude, longitude, ${lat}, ${lng}, 'M') < 5 OR "userId" = ${userId}`,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user