+
{ 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 (
+
+
+ );
+}
\ 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 (
-
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 = 
+ } else {
+ picture =
+ }
+
+ 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;
}