diff --git a/bfrontend/public/index.html b/bfrontend/public/index.html index 880fb3e..b344dc6 100644 --- a/bfrontend/public/index.html +++ b/bfrontend/public/index.html @@ -6,7 +6,7 @@ Brainlet - +
diff --git a/bfrontend/src/Authenticator.js b/bfrontend/src/Authenticator.js index ce0fcf2..10c7064 100644 --- a/bfrontend/src/Authenticator.js +++ b/bfrontend/src/Authenticator.js @@ -1,4 +1,5 @@ import APIRequest from './APIRequest'; +import gatewayConnection from './Gateway/globalGatewayConnection'; const Authenticator = { getLoggedInUserFromCookie: async function() { @@ -6,6 +7,8 @@ const Authenticator = { if (!isOK && err) throw new Error(err); if (!isOK && !err) return undefined; if (!json || !json.user) return undefined; + // NOTE(hippoz): this function has a stupid side-effect but this will have to do for now... + gatewayConnection.connect(json.user.token); return json.user; } }; diff --git a/bfrontend/src/Components/App.js b/bfrontend/src/Components/App.js index fdc1989..0c80063 100644 --- a/bfrontend/src/Components/App.js +++ b/bfrontend/src/Components/App.js @@ -11,7 +11,7 @@ import { useEffect, useState } from 'react'; import { useDispatch, connect } from 'react-redux' import { BrowserRouter, Switch, Route } from 'react-router-dom'; -function App({ user }) { +function App({ user, gateway }) { const [ notificationText, setNotificationText ] = useState(''); const [ hasError, setHasError ] = useState(false); @@ -20,7 +20,7 @@ function App({ user }) { useEffect(() => { Authenticator.getLoggedInUserFromCookie() .then((res) => { - dispatch({ type: 'authenticator/updatelocaluserobject', user: res }) + dispatch({ type: 'authenticator/updatelocaluserobject', user: res }); }) .catch(() => { setNotificationText(couldNotReach); @@ -28,17 +28,25 @@ function App({ user }) { }); }, [dispatch]); + if (user === null) { + return ( +

+ Loading... +

+ ); + } + if (!hasError) { return (
+ { user && } - @@ -61,6 +69,7 @@ function App({ user }) { const stateToProps = (state) => { return { user: state?.user, + gateway: state?.gateway }; }; diff --git a/bfrontend/src/Components/Categories/CategoryProfile.js b/bfrontend/src/Components/Categories/CategoryProfileLink.js similarity index 86% rename from bfrontend/src/Components/Categories/CategoryProfile.js rename to bfrontend/src/Components/Categories/CategoryProfileLink.js index 796166c..df92aca 100644 --- a/bfrontend/src/Components/Categories/CategoryProfile.js +++ b/bfrontend/src/Components/Categories/CategoryProfileLink.js @@ -16,9 +16,9 @@ export default function CategoryProfile({ category, size }) { } return ( -
+
{ picture } - { category.title } + { category.title }
) } \ No newline at end of file diff --git a/bfrontend/src/Components/Categories/CategoryView.js b/bfrontend/src/Components/Categories/CategoryView.js index 5192290..2504afa 100644 --- a/bfrontend/src/Components/Categories/CategoryView.js +++ b/bfrontend/src/Components/Categories/CategoryView.js @@ -1,5 +1,6 @@ import CategoryViewLoader from './CategoryViewLoader'; -import CategoryProfile from './CategoryProfile'; +import CategoryProfile from './CategoryProfileLink'; +import Message from '../Messages/Message'; import { useParams } from 'react-router-dom'; import { connect } from 'react-redux' @@ -13,6 +14,19 @@ function CategoryView({ categories }) { category = categories.find(x => x._id === id); } + const dummyMessage1 = { + author: { + username: '__SYSTEM', + _id: '5fc69864f15a7c5e504c9a1f' + }, + category: { + title: 'alan', + _id: 'y8fyerghgh' + }, + content: 'yes hello', + _id: 'i8ru354y89ty549ytg' + }; + if (category) { return (
@@ -20,8 +34,7 @@ function CategoryView({ categories }) {
- In terms of development, the first year of a cat’s life is equal to the first 15 years of a human life. After its second year, a cat is 25 in human years. And after that, each year of a cat’s life is equal to about 7 human years. - Cats can rotate their ears 180 degrees. +
The hearing of the average cat is at least five times keener than that of a human adult. diff --git a/bfrontend/src/Components/Messages/Message.js b/bfrontend/src/Components/Messages/Message.js new file mode 100644 index 0000000..f7b4336 --- /dev/null +++ b/bfrontend/src/Components/Messages/Message.js @@ -0,0 +1,10 @@ +import UserProfileLink from '../Users/UserProfileLink'; + +export default function Message({ message }) { + return ( +
+ + { message.content } +
+ ); +} \ No newline at end of file diff --git a/bfrontend/src/Components/Root.js b/bfrontend/src/Components/Root.js index 19e0415..2c77a17 100644 --- a/bfrontend/src/Components/Root.js +++ b/bfrontend/src/Components/Root.js @@ -1,13 +1,10 @@ import { useHistory } from 'react-router-dom'; -import Sidebar from './UI/Sidebar'; export default function Root(props) { const history = useHistory(); if (props.user) { - return ( - - ); + return null; } else { return (
diff --git a/bfrontend/src/Components/Users/UserLink.js b/bfrontend/src/Components/Users/UserLink.js deleted file mode 100644 index af018eb..0000000 --- a/bfrontend/src/Components/Users/UserLink.js +++ /dev/null @@ -1,3 +0,0 @@ -export default function UserLink({ user }) { - return null; // TODO: implement -} \ No newline at end of file diff --git a/bfrontend/src/Components/Users/UserProfileLink.js b/bfrontend/src/Components/Users/UserProfileLink.js new file mode 100644 index 0000000..5d1f5cd --- /dev/null +++ b/bfrontend/src/Components/Users/UserProfileLink.js @@ -0,0 +1,24 @@ +import defaultProfile from '../../Images/defaultprofile_256px-256px.png' + +export default function UserProfileLink({ user, size }) { + let picture; + + if (!size) size = 32; + + // TODO: Make a debug error message for then the size does not exist + const pictureClass = `profile-picture profile-picture-${size}`; + + if (user.picture) { + // Not actually implemented on the server and can be unsafe, this is just futureproofing + picture = Profile + } else { + picture = Profile + } + + return ( +
+ { picture } + { user.username } +
+ ) +} \ No newline at end of file diff --git a/bfrontend/src/Gateway/globalGatewayConnection.js b/bfrontend/src/Gateway/globalGatewayConnection.js index 74ddeee..f63b9bc 100644 --- a/bfrontend/src/Gateway/globalGatewayConnection.js +++ b/bfrontend/src/Gateway/globalGatewayConnection.js @@ -1,6 +1,14 @@ import GatewayConnection from './GatewayConnection'; import config from '../Config'; +import store from '../store'; const globalGatewayConnection = new GatewayConnection(config.gatewayUrl); +globalGatewayConnection.onConnect = function() { + store.dispatch({ type: 'gateway/connectionstatus', gateway: { isConnected: true } }); +}; +globalGatewayConnection.onDisconnect = function() { + store.dispatch({ type: 'gateway/connectionstatus', gateway: { isConnected: false } }); +}; + export default globalGatewayConnection; \ No newline at end of file diff --git a/bfrontend/src/Styles/App.scss b/bfrontend/src/Styles/App.scss index fe1ecc1..efc9772 100644 --- a/bfrontend/src/Styles/App.scss +++ b/bfrontend/src/Styles/App.scss @@ -45,6 +45,7 @@ body { padding: 0px; color: var(--default-text-color); + background-color: var(--background-color); font-family: Noto Sans,-apple-system,BlinkMacSystemFont,sans-serif; } @@ -169,13 +170,24 @@ body { } } -.category-profile { +.profile-link { display: flex; flex-direction: row; align-items: center; justify-content: left; } +.profile-username { + font-weight: bold; +} + +.message { + @include card; + + display: flex; + flex-direction: column; +} + @media only screen and (max-width: 600px) { .button.category-button { min-width: 50px; diff --git a/bfrontend/src/store.js b/bfrontend/src/store.js index e5e33fa..cd56a63 100644 --- a/bfrontend/src/store.js +++ b/bfrontend/src/store.js @@ -1,6 +1,12 @@ import { createStore } from 'redux'; -const reducer = (state, payload) => { +const intitialState = { + user: null, + categories: null, + gateway: { isConnected: false } +}; + +const reducer = (state = intitialState, payload) => { switch (payload.type) { case 'authenticator/updatelocaluserobject': { return { @@ -16,6 +22,15 @@ const reducer = (state, payload) => { } } + case 'gateway/connectionstatus': { + return { + ...state, + gateway: { + isConnected: payload.gateway.isConnected + } + } + } + default: { return state; }