➖remove user online status
This commit is contained in:
Anton SHEPILOV
@@ -20,7 +20,6 @@ export type UserPartsType = {
|
||||
type PropsType = {
|
||||
usersIds: string[];
|
||||
keepMyself?: boolean;
|
||||
displayOnline?: boolean;
|
||||
max?: number;
|
||||
size?: number;
|
||||
};
|
||||
@@ -48,7 +47,7 @@ export const getUserParts = (props: PropsType): UserPartsType => {
|
||||
|
||||
if (channelMembers?.length === 1) {
|
||||
const avatarSrc = users[0]?.id ? (
|
||||
<UserIcon user={users[0]} withStatus={props.displayOnline} size={avatarSize} />
|
||||
<UserIcon user={users[0]} size={avatarSize} />
|
||||
) : (
|
||||
UserService.getThumbnail(users[0])
|
||||
);
|
||||
|
||||
@@ -1,30 +0,0 @@
|
||||
.online_user_status {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--grey-dark);
|
||||
border: 1px solid var(--grey-background);
|
||||
|
||||
&.online {
|
||||
background: var(--green);
|
||||
}
|
||||
|
||||
&.offline {
|
||||
background: var(--red);
|
||||
}
|
||||
|
||||
&.small {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
&.medium {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
&.big {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
@@ -1,47 +0,0 @@
|
||||
// eslint-disable-next-line @typescript-eslint/no-use-before-define
|
||||
import React, { Suspense } from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import { UserType } from '@features/users/types/user';
|
||||
import { useOnlineUser } from '@features/users/hooks/use-online-user';
|
||||
|
||||
import './online-user-status.scss';
|
||||
import { useUser } from '@features/users/hooks/use-user';
|
||||
|
||||
type PropsType = {
|
||||
user: UserType;
|
||||
size?: 'small' | 'medium' | 'big';
|
||||
};
|
||||
|
||||
const WrappedUserStatus = ({ user: _user, size = 'medium' }: PropsType): JSX.Element => {
|
||||
const user = useUser(_user.id || '');
|
||||
const userOnlineStatus = useOnlineUser(_user.id as string);
|
||||
//const lastSeen = userOnlineStatus?.lastSeen || user.last_seen;
|
||||
const online =
|
||||
(userOnlineStatus && userOnlineStatus.connected) ||
|
||||
(!userOnlineStatus?.lastSeen &&
|
||||
user?.is_connected &&
|
||||
(user?.last_seen || 0) > Date.now() - 10 * 60 * 1000);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames('online_user_status ' + user?.last_seen + ' ', {
|
||||
online: !!online,
|
||||
offline: !online,
|
||||
small: size === 'small',
|
||||
medium: size === 'medium',
|
||||
big: size === 'big',
|
||||
})}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const UserOnlineStatus = (props: PropsType): JSX.Element => {
|
||||
return (
|
||||
<Suspense fallback={<></>}>
|
||||
<WrappedUserStatus {...props} />
|
||||
</Suspense>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserOnlineStatus;
|
||||
@@ -2,7 +2,6 @@
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import UserService from '@features/users/services/current-user-service';
|
||||
import UserOnlineStatus from '../online-user-status/online-user-status';
|
||||
|
||||
import './user.scss';
|
||||
|
||||
@@ -28,18 +27,6 @@ export default class User extends Component {
|
||||
height: this.props.size,
|
||||
}}
|
||||
>
|
||||
{this.props.withStatus && (
|
||||
<UserOnlineStatus
|
||||
user={user}
|
||||
notifications_disabled={notifications_disabled}
|
||||
size={
|
||||
(this.props.small ? 'small' : undefined) ||
|
||||
(this.props.medium ? 'medium' : undefined) ||
|
||||
(this.props.big ? 'big' : undefined) ||
|
||||
'medium'
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,38 +0,0 @@
|
||||
import { useEffect } from 'react';
|
||||
import { useRecoilCallback, useRecoilValue } from 'recoil';
|
||||
|
||||
import { OnlineUserStateFamily, OnlineUserType } from '../state/atoms/online-users';
|
||||
//TODO refactor it in the notification feature
|
||||
|
||||
// import { OnlineUserRealtimeAPI } from '../api/online-user-realtime-api-client';
|
||||
// import WebSocketFactory from '../../global/services/websocket-factory-service';
|
||||
|
||||
export const useOnlineUser = (id: string): OnlineUserType => {
|
||||
|
||||
// const OnlineAPI = OnlineUserRealtimeAPI(WebSocketFactory.get());
|
||||
|
||||
// const updateUser = useRecoilCallback(
|
||||
// ({ set, snapshot }) =>
|
||||
// (status: { id: string; connected: boolean }) => {
|
||||
// const current = snapshot.getLoadable(OnlineUserStateFamily(status.id)).contents;
|
||||
// set(OnlineUserStateFamily(status.id), {
|
||||
// ...status,
|
||||
// lastSeen: status.connected ? Date.now() : current.lastSeen,
|
||||
// initialized: true,
|
||||
// });
|
||||
// },
|
||||
// [],
|
||||
// );
|
||||
|
||||
const state = useRecoilValue(OnlineUserStateFamily(id));
|
||||
|
||||
useEffect(() => {
|
||||
if (state && !state.initialized) {
|
||||
// OnlineAPI.getUserStatus(id).then(status => {
|
||||
// updateUser({ id: status[0], connected: status[1] });
|
||||
// });
|
||||
}
|
||||
}, [state, id]);
|
||||
|
||||
return state;
|
||||
};
|
||||
@@ -1,65 +0,0 @@
|
||||
/* eslint-disable @typescript-eslint/no-non-null-assertion */
|
||||
import { atom, DefaultValue, selector, selectorFamily } from 'recoil';
|
||||
|
||||
import { UserType } from '@features/users/types/user';
|
||||
import { CurrentUserState } from './current-user';
|
||||
|
||||
export type OnlineUserType = Pick<UserType, 'id' | 'connected'> & {
|
||||
lastSeen: number;
|
||||
initialized: boolean;
|
||||
};
|
||||
|
||||
const CurrentUserStatus = selector<OnlineUserType[]>({
|
||||
key: 'CurrentUserStatus',
|
||||
get: ({ get }) => {
|
||||
const currentUser = get(CurrentUserState);
|
||||
|
||||
return currentUser
|
||||
? [{ id: currentUser.id!, connected: true, lastSeen: Date.now(), initialized: true }]
|
||||
: [];
|
||||
},
|
||||
});
|
||||
|
||||
export const OnlineUsersState = atom<OnlineUserType[]>({
|
||||
key: 'OnlineUsersState',
|
||||
default: CurrentUserStatus,
|
||||
});
|
||||
|
||||
export const CountOnlineUsers = selector<number>({
|
||||
key: 'CountOnlineUsers',
|
||||
get: ({ get }) => get(OnlineUsersState).filter(u => u.connected).length,
|
||||
});
|
||||
|
||||
export const OnlineUserStateFamily = selectorFamily<OnlineUserType, string>({
|
||||
key: 'OnlineUserState',
|
||||
get:
|
||||
userId =>
|
||||
({ get }) => {
|
||||
return (
|
||||
get(OnlineUsersState).find(u => u.id === userId) || {
|
||||
id: userId,
|
||||
connected: false,
|
||||
lastSeen: 0,
|
||||
initialized: false,
|
||||
}
|
||||
);
|
||||
},
|
||||
set:
|
||||
userId =>
|
||||
({ set }, newValue) => {
|
||||
if (!(newValue instanceof DefaultValue)) {
|
||||
const newStatus: OnlineUserType = {
|
||||
...(newValue as unknown as OnlineUserType),
|
||||
...{ id: userId },
|
||||
};
|
||||
|
||||
set(OnlineUsersState, previousStatus => {
|
||||
const index = previousStatus.findIndex(e => e.id === userId);
|
||||
|
||||
return index === -1
|
||||
? [...previousStatus, newStatus]
|
||||
: [...previousStatus.slice(0, index), newStatus, ...previousStatus.slice(index + 1)];
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user