fix bug where it sometimes wouldnt subscribe to the channels, and add some functionality

This commit is contained in:
hippoz 2021-02-11 19:07:47 +02:00
parent d35198e88e
commit 1b425dc274
Signed by: hippoz
GPG key ID: 7C52899193467641
6 changed files with 26 additions and 15 deletions

View file

@ -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,
};
};

View file

@ -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 (
<ProfileLink object={ category } size={ size } type="category" />
<ProfileLink object={ category } size={ size } type="category" offset={ offset } />
);
}

View file

@ -3,7 +3,7 @@ import UserProfileLink from '../Users/UserProfileLink';
export default function Message({ message }) {
return (
<div className="message">
<UserProfileLink size="40" user={ message.author } />
<UserProfileLink size="40" user={ message.author } offset="true"><p>a</p></UserProfileLink>
<span>{ message.content }</span>
</div>
);

View file

@ -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 (
<div className={ classes }>
{ picture }
<span className="profile-username">{ title }</span>
{ bottomInfo }
</div>
)
);
}

View file

@ -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 (
<ProfileLink object={ user } size={ size } type="user" />
<ProfileLink object={ user } size={ size } type="user" offset={ offset } />
);
}

View file

@ -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;
}