From 1b425dc27431292277f111e57498ea785bc69aa8 Mon Sep 17 00:00:00 2001 From: hippoz Date: Thu, 11 Feb 2021 19:07:47 +0200 Subject: [PATCH] fix bug where it sometimes wouldnt subscribe to the channels, and add some functionality --- .../src/Components/Categories/CategoryList.js | 15 +++++++++++---- .../Components/Categories/CategoryProfileLink.js | 5 +++-- bfrontend/src/Components/Messages/Message.js | 2 +- bfrontend/src/Components/UI/ProfileLink.js | 9 +++++---- bfrontend/src/Components/Users/UserProfileLink.js | 5 +++-- bfrontend/src/Styles/App.scss | 5 +++-- 6 files changed, 26 insertions(+), 15 deletions(-) diff --git a/bfrontend/src/Components/Categories/CategoryList.js b/bfrontend/src/Components/Categories/CategoryList.js index 9a20500..75f523a 100644 --- a/bfrontend/src/Components/Categories/CategoryList.js +++ b/bfrontend/src/Components/Categories/CategoryList.js @@ -10,7 +10,7 @@ import gatewayConnection from '../../Gateway/globalGatewayConnection'; const { log: loaderLog } = Logger([ 'CategoryList', 'Loader' ]); -function CategoryList({ selectedCategoryId }) { +function CategoryList({ selectedCategoryId, gatewayStatus }) { const [ categoryList, setCategoryList ] = useState(); const [ error, setError ] = useState(); @@ -26,14 +26,20 @@ function CategoryList({ selectedCategoryId }) { setCategoryList(json.categories || []); dispatch({ type: 'categories/updatecategorylist', categories: json.categories }); loaderLog('Subscribing to all categories...'); - // TODO: IMPORTANT: Subscribing to a lot of channels puts strain on the server - gatewayConnection.subscribeToCategoryChats(json.categories.map(category => category._id)); }) .catch(() => { setError(true); }); }, [dispatch]); + useEffect(() => { + if (!categoryList) return; + if (!gatewayStatus.isConnected) return; + + // TODO: IMPORTANT: Subscribing to a lot of channels puts strain on the server + gatewayConnection.subscribeToCategoryChats(categoryList.map(category => category._id)); + }, [gatewayStatus, categoryList]); + if (!categoryList) { if (error) { return ( @@ -61,7 +67,8 @@ function CategoryList({ selectedCategoryId }) { const stateToProps = (state) => { return { - selectedCategoryId: state?.selectedCategoryId + selectedCategoryId: state?.selectedCategoryId, + gatewayStatus: state?.gateway, }; }; diff --git a/bfrontend/src/Components/Categories/CategoryProfileLink.js b/bfrontend/src/Components/Categories/CategoryProfileLink.js index 463347e..245d064 100644 --- a/bfrontend/src/Components/Categories/CategoryProfileLink.js +++ b/bfrontend/src/Components/Categories/CategoryProfileLink.js @@ -1,7 +1,8 @@ import ProfileLink from '../UI/ProfileLink' -export default function CategoryProfile({ category, size }) { +// TODO: Stop using this component and just use the ProfileLink component +export default function CategoryProfile({ category, size, offset=false }) { return ( - + ); } \ No newline at end of file diff --git a/bfrontend/src/Components/Messages/Message.js b/bfrontend/src/Components/Messages/Message.js index dfd7d5f..a2a1f98 100644 --- a/bfrontend/src/Components/Messages/Message.js +++ b/bfrontend/src/Components/Messages/Message.js @@ -3,7 +3,7 @@ import UserProfileLink from '../Users/UserProfileLink'; export default function Message({ message }) { return (
- +

a

 { message.content }
); diff --git a/bfrontend/src/Components/UI/ProfileLink.js b/bfrontend/src/Components/UI/ProfileLink.js index 7d9d529..1f0e90a 100644 --- a/bfrontend/src/Components/UI/ProfileLink.js +++ b/bfrontend/src/Components/UI/ProfileLink.js @@ -1,9 +1,8 @@ import defaultProfile from '../../Images/defaultprofile_256px-256px.png' -export default function ProfileLink({ object, size, type }) { +export default function ProfileLink({ object, size=32, type, offset=true, children=null }) { let picture; - if (!size) size = 32; if (size !== 0) { // TODO: Make a debug error message for then the size does not exist const pictureClass = `profile-picture profile-picture-${size}`; @@ -18,13 +17,15 @@ export default function ProfileLink({ object, size, type }) { picture = null; } - const classes = type === 'user' ? 'profile-link user-profile-link' : 'profile-link'; + const classes = offset ? 'profile-link profile-link-offset-text' : 'profile-link'; const title = type === 'category' ? object.title : object.username; + const bottomInfo = offset ? children : null; return (
{ picture } { title } + { bottomInfo }
- ) + ); } \ No newline at end of file diff --git a/bfrontend/src/Components/Users/UserProfileLink.js b/bfrontend/src/Components/Users/UserProfileLink.js index be0f908..64a78ac 100644 --- a/bfrontend/src/Components/Users/UserProfileLink.js +++ b/bfrontend/src/Components/Users/UserProfileLink.js @@ -1,7 +1,8 @@ import ProfileLink from '../UI/ProfileLink' -export default function CategoryProfile({ user, size }) { +// TODO: Stop using this component and just use the ProfileLink component +export default function CategoryProfile({ user, size, offset=false }) { return ( - + ); } \ No newline at end of file diff --git a/bfrontend/src/Styles/App.scss b/bfrontend/src/Styles/App.scss index c4d9c09..68f12c1 100644 --- a/bfrontend/src/Styles/App.scss +++ b/bfrontend/src/Styles/App.scss @@ -50,6 +50,7 @@ $nord15: #B48EAD; --default-button-border-radius: 0px; --category-message-border-radius: 0px; --bar-cards-border-radius: 0px; + --category-button-border-radius: 4px; } ::-webkit-scrollbar { @@ -168,7 +169,7 @@ body { max-height: 100px; margin: 4px; - border-radius: 4px; + border-radius: var(--category-button-border-radius); } &.pressed { @@ -233,7 +234,7 @@ body { align-items: center; justify-content: left; - &.user-profile-link { + &.profile-link-offset-text { align-items: unset; text-align: start; }