Compare commits

...

2 commits

Author SHA1 Message Date
hippoz
68b8568174
text box, you can send messages! woohoo! 2021-01-12 00:24:45 +02:00
hippoz
f2ef7c5c77
listen for the message event from the gateway and display message 2021-01-08 22:48:16 +02:00
6 changed files with 97 additions and 40 deletions

View file

@ -46,9 +46,7 @@ function App({ user, gateway }) {
<Route path="/login"> <Route path="/login">
<Login /> <Login />
</Route> </Route>
<Route path="/categories/:id"> <Route path="/categories/:id" component={ CategoryView } />
<CategoryView />
</Route>
<Route path="/"> <Route path="/">
<Root user={user} /> <Root user={user} />
</Route> </Route>

View file

@ -1,12 +1,20 @@
// import CategoryProfile from './CategoryProfile'; // import CategoryProfile from './CategoryProfile';
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import gatewayConnection from '../../Gateway/globalGatewayConnection';
export default function CategoryButton({ category }) { export default function CategoryButton({ category }) {
const history = useHistory(); const history = useHistory();
const handleClick = () => {
if (gatewayConnection.isConnected) {
gatewayConnection.subscribeToCategoryChat(category._id);
history.push(`/categories/${category._id}`);
}
};
return ( return (
<button className="button category-button" onClick={ () => history.push(`/categories/${category._id}`) }> <button className="button category-button" onClick={ handleClick }>
{/* {/*
maybe enable someday... maybe enable someday...
<CategoryProfile category={ category } size="32" /> <CategoryProfile category={ category } size="32" />
@ -14,5 +22,5 @@ export default function CategoryButton({ category }) {
{ category.title } { category.title }
</button> </button>
) );
} }

View file

@ -1,12 +1,16 @@
import CategoryViewLoader from './CategoryViewLoader'; import CategoryViewLoader from './CategoryViewLoader';
import CategoryProfile from './CategoryProfileLink'; import CategoryProfile from './CategoryProfileLink';
import Message from '../Messages/Message'; import Message from '../Messages/Message';
import gatewayConnection from '../../Gateway/globalGatewayConnection';
import { useParams } from 'react-router-dom'; import { useParams } from 'react-router-dom';
import { connect } from 'react-redux' import { connect } from 'react-redux';
import { useState, useRef } from 'react';
function CategoryView({ categories }) { function CategoryView({ categories, messages }) {
const { id } = useParams(); const { id } = useParams();
const [ textInput, setTextInput ] = useState('');
const textInputRef = useRef(null);
let category; let category;
@ -14,18 +18,14 @@ function CategoryView({ categories }) {
category = categories.find(x => x._id === id); category = categories.find(x => x._id === id);
} }
const dummyMessage1 = { const handleTextboxKeydown = (e) => {
author: { if (e.key === 'Enter') {
username: '__SYSTEM', // Send message written in textbox
_id: '5fc69864f15a7c5e504c9a1f'
}, gatewayConnection.sendMessage(id, textInput);
category: { textInputRef.current.value = '';
title: 'alan', }
_id: 'y8fyerghgh' }
},
content: 'yes hello',
_id: 'i8ru354y89ty549ytg'
};
if (category) { if (category) {
return ( return (
@ -34,11 +34,10 @@ function CategoryView({ categories }) {
<CategoryProfile category={ category } /> <CategoryProfile category={ category } />
</div> </div>
<div className="card message-list-card"> <div className="card message-list-card">
<Message message={ dummyMessage1 } /> { messages.map(m => <Message key={ m._id } message={ m } />) }
</div> </div>
<div className="card bar-card-bottom"> <div className="card bar-card-bottom">
The hearing of the average cat is at least five times keener than that of a human adult. <input className="text-input" type="text" placeholder="Go on, type something interesting!" ref={ textInputRef } onKeyDown={ handleTextboxKeydown } onChange={ ({ target }) => setTextInput(target.value) }></input>
In the largest cat breed, the average male weighs approximately 20 pounds.
</div> </div>
</div> </div>
) )
@ -60,9 +59,12 @@ function CategoryView({ categories }) {
} }
const stateToProps = (state) => { const stateToProps = (state, ownProps) => {
const categoryId = ownProps.match.params.id; // NOTE(hippoz): kind of a hack, but it works and idk if theres any other solution
return { return {
categories: state?.categories categories: state?.categories,
messages: state?.messages[categoryId] || []
}; };
}; };

View file

@ -6,6 +6,9 @@ const globalGatewayConnection = new GatewayConnection(config.gatewayUrl);
globalGatewayConnection.onConnect = function() { globalGatewayConnection.onConnect = function() {
store.dispatch({ type: 'gateway/connectionstatus', gateway: { isConnected: true } }); store.dispatch({ type: 'gateway/connectionstatus', gateway: { isConnected: true } });
globalGatewayConnection.socket.on('message', (message) => {
store.dispatch({ type: 'messagestore/addmessage', message });
});
}; };
globalGatewayConnection.onDisconnect = function() { globalGatewayConnection.onDisconnect = function() {
store.dispatch({ type: 'gateway/connectionstatus', gateway: { isConnected: false } }); store.dispatch({ type: 'gateway/connectionstatus', gateway: { isConnected: false } });

View file

@ -3,13 +3,23 @@
:root { :root {
--background-color: #{$nord0}; --background-color: #{$nord0};
--default-main-card-color: #{$nord1}; --default-main-card-color: var(--background-color);
--card-box-shadow-color:rgba(0, 0, 0, 0.25); --card-box-shadow-color:rgba(0, 0, 0, 0.27);
--default-text-color: #{$nord5}; --default-text-color: #{$nord5};
--accent-color-dark: #{$nord2}; --accent-color-dark: #{$nord1};
--accent-color-light: #{$nord3}; --accent-color-light: #{$nord2};
--category-top-bar-color: var(--accent-color-light);
--category-bottom-text-bar-color: var(--accent-color-light);
--category-list-background-color: var(--background-color);
--category-message-list-background-color: var(--background-color);
--category-message-color: var(--accent-color-dark);
--button-color: var(--accent-color-dark);
--button-hover-color: var(--accent-color-light);
--default-transition-duration: 200ms; --default-transition-duration: 200ms;
--default-border-radius: 0px; --default-border-radius: 0px;
@ -63,8 +73,9 @@ body {
@include card; @include card;
&.bar-card { &.bar-card {
background-color: var(--accent-color-dark); background-color: var(--category-top-bar-color);
min-height: 40px; min-height: 50px;
padding: 5px;
border-radius: var(--default-button-border-radius) var(--default-button-border-radius) 0px 0px; border-radius: var(--default-button-border-radius) var(--default-button-border-radius) 0px 0px;
display: flex; display: flex;
@ -72,27 +83,35 @@ body {
justify-content: left; justify-content: left;
font-size: large; font-size: large;
z-index: 99;
} }
&.bar-card-bottom { &.bar-card-bottom {
background-color: var(--accent-color-dark); background-color: var(--category-bottom-text-bar-color);
min-height: 30px; box-shadow: 0px -3px 5px var(--card-box-shadow-color);
min-height: 40px;
border-radius: 0px 0px var(--default-button-border-radius) var(--default-button-border-radius); border-radius: 0px 0px var(--default-button-border-radius) var(--default-button-border-radius);
display: flex;
z-index: 100;
} }
&.message-list-card { &.message-list-card {
@include fancy-scrollbar-firefox;
border-radius: 0px; border-radius: 0px;
flex-grow: 1; flex-grow: 1;
box-shadow: none; box-shadow: none;
overflow: auto;
background-color: var(--category-message-list-background-color);
} }
} }
.main-card { .main-card {
@include card; @include card;
margin: 12px;
&.main-content-card { &.main-content-card {
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
@ -106,7 +125,7 @@ body {
padding: 5px; padding: 5px;
margin: 5px; margin: 5px;
border: 0px; border: 0px;
background-color: var(--accent-color-dark); background-color: var(--button-color);
color: var(--default-text-color); color: var(--default-text-color);
cursor: pointer; cursor: pointer;
transition: background-color, var(--default-transition-duration); transition: background-color, var(--default-transition-duration);
@ -141,6 +160,8 @@ body {
min-width: 110px; min-width: 110px;
max-width: 110px; max-width: 110px;
background-color: var(--category-list-background-color);
} }
.profile-picture { .profile-picture {
@ -186,6 +207,21 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-top: 15px;
margin-left: 5px;
margin-right: 5px;
padding: 5px;
background-color: var(--category-message-color);
}
.text-input {
@include card;
margin: 5px;
padding: 5px;
border: none;
color: var(--default-text-color);
flex-grow: 1;
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
@ -198,8 +234,4 @@ body {
min-width: 60px; min-width: 60px;
max-width: 60px; max-width: 60px;
} }
.main-card {
margin: 6px;
}
} }

View file

@ -3,7 +3,8 @@ import { createStore } from 'redux';
const intitialState = { const intitialState = {
user: null, user: null,
categories: null, categories: null,
gateway: { isConnected: false } gateway: { isConnected: false },
messages: {}
}; };
const reducer = (state = intitialState, payload) => { const reducer = (state = intitialState, payload) => {
@ -31,6 +32,19 @@ const reducer = (state = intitialState, payload) => {
} }
} }
case 'messagestore/addmessage': {
return {
...state,
messages: {
...state.messages,
[payload.message.category._id]: [
...state.messages[payload.message.category._id] || [],
payload.message
]
}
}
}
default: { default: {
return state; return state;
} }