Update friends stuff

This commit is contained in:
Bill 2022-03-01 11:32:50 -05:00
parent 653329fa6c
commit 300ed763eb
31 changed files with 157 additions and 180 deletions

View File

@ -0,0 +1,32 @@
import { createContext, FC, ProviderProps, useContext } from 'react';
import { MessengerFriend } from './common/MessengerFriend';
import { MessengerRequest } from './common/MessengerRequest';
import { MessengerSettings } from './common/MessengerSettings';
interface IFriendsContext
{
friends: MessengerFriend[];
requests: MessengerRequest[];
settings: MessengerSettings;
canRequestFriend: (userId: number) => boolean;
requestFriend: (userId: number, userName: string) => void;
acceptFriend: (userId: number) => void;
declineFriend: (userId: number, declineAll?: boolean) => void;
}
const FriendsContext = createContext<IFriendsContext>({
friends: null,
requests: null,
settings: null,
canRequestFriend: null,
requestFriend: null,
acceptFriend: null,
declineFriend: null
});
export const FriendsContextProvider: FC<ProviderProps<IFriendsContext>> = props =>
{
return <FriendsContext.Provider value={ props.value }>{ props.children }</FriendsContext.Provider>
}
export const useFriendsContext = () => useContext(FriendsContext);

View File

@ -12,7 +12,7 @@ import { FriendsHelper } from './common/FriendsHelper';
import { MessengerFriend } from './common/MessengerFriend'; import { MessengerFriend } from './common/MessengerFriend';
import { MessengerRequest } from './common/MessengerRequest'; import { MessengerRequest } from './common/MessengerRequest';
import { MessengerSettings } from './common/MessengerSettings'; import { MessengerSettings } from './common/MessengerSettings';
import { FriendsContextProvider } from './context/FriendsContext'; import { FriendsContextProvider } from './FriendsContext';
import { FriendBarView } from './views/friend-bar/FriendBarView'; import { FriendBarView } from './views/friend-bar/FriendBarView';
import { FriendsListView } from './views/friends-list/FriendsListView'; import { FriendsListView } from './views/friends-list/FriendsListView';
import { FriendsMessengerView } from './views/messenger/FriendsMessengerView'; import { FriendsMessengerView } from './views/messenger/FriendsMessengerView';

View File

@ -1,6 +0,0 @@
export class FriendListTabs
{
public static readonly FRIENDS: string = 'friendlist.friends';
public static readonly REQUESTS: string = 'friendlist.requests';
public static readonly SEARCH: string = 'generic.search';
}

View File

@ -1,19 +0,0 @@
import { createContext, FC, useContext } from 'react';
import { FriendsContextProps, IFriendsContext } from './FriendsContext.type';
const FriendsContext = createContext<IFriendsContext>({
friends: null,
requests: null,
settings: null,
canRequestFriend: null,
requestFriend: null,
acceptFriend: null,
declineFriend: null
});
export const FriendsContextProvider: FC<FriendsContextProps> = props =>
{
return <FriendsContext.Provider value={ props.value }>{ props.children }</FriendsContext.Provider>
}
export const useFriendsContext = () => useContext(FriendsContext);

View File

@ -1,20 +0,0 @@
import { ProviderProps } from 'react';
import { MessengerFriend } from '../common/MessengerFriend';
import { MessengerRequest } from '../common/MessengerRequest';
import { MessengerSettings } from '../common/MessengerSettings';
export interface IFriendsContext
{
friends: MessengerFriend[];
requests: MessengerRequest[];
settings: MessengerSettings;
canRequestFriend: (userId: number) => boolean;
requestFriend: (userId: number, userName: string) => void;
acceptFriend: (userId: number) => void;
declineFriend: (userId: number, declineAll?: boolean) => void;
}
export interface FriendsContextProps extends ProviderProps<IFriendsContext>
{
}

View File

@ -1,35 +0,0 @@
.friend-bar-item {
width: 130px;
margin: 0 3px;
z-index: 0;
position: relative;
padding-left:38px;
text-align: left;
&.friend-bar-item-active {
margin-bottom:21px;
}
.friend-bar-item-head {
&.avatar {
top: -30px;
left: -30px;
}
&.group {
top: -5px;
left: -5px;
}
pointer-events: none;
}
&.friend-bar-search {
.friend-bar-item-head {
top: -3px;
left: 5px;
width: 31px;
height: 34px;
background-image: url('../../../../assets/images/toolbar/friend-search.png');
}
}
}

View File

@ -1,6 +0,0 @@
import { MessengerFriend } from '../../common/MessengerFriend';
export interface FriendBarItemViewProps
{
friend: MessengerFriend;
}

View File

@ -5,7 +5,12 @@ import { SendMessageHook } from '../../../../hooks/messages';
import { NitroLayoutBase } from '../../../../layout/base'; import { NitroLayoutBase } from '../../../../layout/base';
import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView'; import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
import { BadgeImageView } from '../../../shared/badge-image/BadgeImageView'; import { BadgeImageView } from '../../../shared/badge-image/BadgeImageView';
import { FriendBarItemViewProps } from './FriendBarItemView.types'; import { MessengerFriend } from '../../common/MessengerFriend';
interface FriendBarItemViewProps
{
friend: MessengerFriend;
}
export const FriendBarItemView: FC<FriendBarItemViewProps> = props => export const FriendBarItemView: FC<FriendBarItemViewProps> = props =>
{ {

View File

@ -1,7 +1,42 @@
.friend-bar { .friend-bar {
.friend-bar-button { .friend-bar-button {
z-index: 2; z-index: 2;
} }
@import '../friend-bar-item/FriendBarItemView.scss'; .friend-bar-item {
width: 130px;
margin: 0 3px;
z-index: 0;
position: relative;
padding-left:38px;
text-align: left;
&.friend-bar-item-active {
margin-bottom:21px;
}
.friend-bar-item-head {
&.avatar {
top: -30px;
left: -30px;
}
&.group {
top: -5px;
left: -5px;
}
pointer-events: none;
}
&.friend-bar-search {
.friend-bar-item-head {
top: -3px;
left: 5px;
width: 31px;
height: 34px;
background-image: url('../../../../assets/images/toolbar/friend-search.png');
}
}
}
} }

View File

@ -2,8 +2,13 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { FC, useMemo, useState } from 'react'; import { FC, useMemo, useState } from 'react';
import { Button } from '../../../../common'; import { Button } from '../../../../common';
import { Flex } from '../../../../common/Flex'; import { Flex } from '../../../../common/Flex';
import { FriendBarItemView } from '../friend-bar-item/FriendBarItemView'; import { MessengerFriend } from '../../common/MessengerFriend';
import { FriendBarViewProps } from './FriendBarView.types'; import { FriendBarItemView } from './FriendBarItemView';
interface FriendBarViewProps
{
onlineFriends: MessengerFriend[];
}
export const FriendBarView: FC<FriendBarViewProps> = props => export const FriendBarView: FC<FriendBarViewProps> = props =>
{ {

View File

@ -1,5 +0,0 @@
import { MessengerFriend } from './../../common/MessengerFriend';
export interface FriendBarViewProps
{
onlineFriends: MessengerFriend[];
}

View File

@ -1,9 +0,0 @@
import { NitroLayoutFlexProps } from '../../../../layout';
import { MessengerFriend } from '../../common/MessengerFriend';
export interface FriendsGroupItemViewProps extends NitroLayoutFlexProps
{
friend: MessengerFriend;
selected?: boolean;
selectFriend: () => void;
}

View File

@ -3,10 +3,16 @@ import classNames from 'classnames';
import { FC, useCallback, useState } from 'react'; import { FC, useCallback, useState } from 'react';
import { LocalizeText, OpenMessengerChat } from '../../../../api'; import { LocalizeText, OpenMessengerChat } from '../../../../api';
import { SendMessageHook } from '../../../../hooks'; import { SendMessageHook } from '../../../../hooks';
import { NitroLayoutFlex, UserProfileIconView } from '../../../../layout'; import { NitroLayoutFlex, NitroLayoutFlexProps, UserProfileIconView } from '../../../../layout';
import { NitroLayoutBase } from '../../../../layout/base'; import { NitroLayoutBase } from '../../../../layout/base';
import { MessengerFriend } from '../../common/MessengerFriend'; import { MessengerFriend } from '../../common/MessengerFriend';
import { FriendsGroupItemViewProps } from './FriendsGroupItemView.types';
interface FriendsGroupItemViewProps extends NitroLayoutFlexProps
{
friend: MessengerFriend;
selected?: boolean;
selectFriend: () => void;
}
export const FriendsGroupItemView: FC<FriendsGroupItemViewProps> = props => export const FriendsGroupItemView: FC<FriendsGroupItemViewProps> = props =>
{ {

View File

@ -1,6 +1,13 @@
import React, { FC } from 'react'; import { FC } from 'react';
import { FriendsGroupItemView } from '../friends-group-item/FriendsGroupItemView'; import { MessengerFriend } from '../../common/MessengerFriend';
import { FriendsGroupViewProps } from './FriendsGroupView.types'; import { FriendsGroupItemView } from './FriendsGroupItemView';
interface FriendsGroupViewProps
{
list: MessengerFriend[];
selectedFriendsIds: number[];
selectFriend: (userId: number) => void;
}
export const FriendsGroupView: FC<FriendsGroupViewProps> = props => export const FriendsGroupView: FC<FriendsGroupViewProps> = props =>
{ {

View File

@ -1,8 +0,0 @@
import { MessengerFriend } from '../../common/MessengerFriend';
export interface FriendsGroupViewProps
{
list: MessengerFriend[];
selectedFriendsIds: number[];
selectFriend: (userId: number) => void;
}

View File

@ -4,12 +4,20 @@ import { LocalizeText } from '../../../../api';
import { SendMessageHook } from '../../../../hooks'; import { SendMessageHook } from '../../../../hooks';
import { NitroCardAccordionSetView, NitroCardAccordionView, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../layout'; import { NitroCardAccordionSetView, NitroCardAccordionView, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../layout';
import { MessengerFriend } from '../../common/MessengerFriend'; import { MessengerFriend } from '../../common/MessengerFriend';
import { MessengerRequest } from '../../common/MessengerRequest';
import { FriendsGroupView } from '../friends-group/FriendsGroupView'; import { FriendsGroupView } from '../friends-group/FriendsGroupView';
import { FriendsRemoveConfirmationView } from '../friends-remove-confirmation/FriendsRemoveConfirmationView'; import { FriendsRemoveConfirmationView } from '../friends-remove-confirmation/FriendsRemoveConfirmationView';
import { FriendsRequestView } from '../friends-request/FriendsRequestView'; import { FriendsRequestView } from '../friends-request/FriendsRequestView';
import { FriendsRoomInviteView } from '../friends-room-invite/FriendsRoomInviteView'; import { FriendsRoomInviteView } from '../friends-room-invite/FriendsRoomInviteView';
import { FriendsSearchView } from '../friends-search/FriendsSearchView'; import { FriendsSearchView } from '../friends-search/FriendsSearchView';
import { FriendsListViewProps } from './FriendsListView.types';
interface FriendsListViewProps
{
onCloseClick: () => void;
onlineFriends: MessengerFriend[];
offlineFriends: MessengerFriend[];
friendRequests: MessengerRequest[];
}
const MODE_FRIENDS: number = 0; const MODE_FRIENDS: number = 0;
const MODE_SEARCH: number = 1; const MODE_SEARCH: number = 1;

View File

@ -1,9 +0,0 @@
import { MessengerFriend } from './../../common/MessengerFriend';
import { MessengerRequest } from './../../common/MessengerRequest';
export interface FriendsListViewProps
{
onCloseClick: () => void;
onlineFriends: MessengerFriend[];
offlineFriends: MessengerFriend[];
friendRequests: MessengerRequest[];
}

View File

@ -1,7 +1,14 @@
import { FC } from 'react'; import { FC } from 'react';
import { LocalizeText } from '../../../../api'; import { LocalizeText } from '../../../../api';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout'; import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
import { FriendsRemoveConfirmationViewProps } from './FriendsRemoveConfirmationView.types';
interface FriendsRemoveConfirmationViewProps
{
selectedFriendsIds: number[];
removeFriendsText: string;
removeSelectedFriends: () => void;
onCloseClick: () => void;
}
export const FriendsRemoveConfirmationView: FC<FriendsRemoveConfirmationViewProps> = props => export const FriendsRemoveConfirmationView: FC<FriendsRemoveConfirmationViewProps> = props =>
{ {

View File

@ -1,7 +0,0 @@
export interface FriendsRemoveConfirmationViewProps
{
selectedFriendsIds: number[];
removeFriendsText: string;
removeSelectedFriends: () => void;
onCloseClick: () => void;
}

View File

@ -1,6 +0,0 @@
import { MessengerRequest } from '../../common/MessengerRequest';
export interface FriendsRequestItemViewProps
{
request: MessengerRequest;
}

View File

@ -1,8 +1,13 @@
import { FC } from 'react'; import { FC } from 'react';
import { NitroCardAccordionItemView, NitroLayoutFlex, UserProfileIconView } from '../../../../layout'; import { NitroCardAccordionItemView, NitroLayoutFlex, UserProfileIconView } from '../../../../layout';
import { NitroLayoutBase } from '../../../../layout/base'; import { NitroLayoutBase } from '../../../../layout/base';
import { useFriendsContext } from '../../context/FriendsContext'; import { MessengerRequest } from '../../common/MessengerRequest';
import { FriendsRequestItemViewProps } from './FriendsRequestItemView.types'; import { useFriendsContext } from '../../FriendsContext';
interface FriendsRequestItemViewProps
{
request: MessengerRequest;
}
export const FriendsRequestItemView: FC<FriendsRequestItemViewProps> = props => export const FriendsRequestItemView: FC<FriendsRequestItemViewProps> = props =>
{ {

View File

@ -1,9 +1,14 @@
import { FC } from 'react'; import { FC } from 'react';
import { LocalizeText } from '../../../../api'; import { LocalizeText } from '../../../../api';
import { NitroCardAccordionSetView, NitroLayoutButton, NitroLayoutFlex } from '../../../../layout'; import { NitroCardAccordionSetView, NitroLayoutButton, NitroLayoutFlex } from '../../../../layout';
import { useFriendsContext } from '../../context/FriendsContext'; import { MessengerRequest } from '../../common/MessengerRequest';
import { FriendsRequestItemView } from '../friends-request-item/FriendsRequestItemView'; import { useFriendsContext } from '../../FriendsContext';
import { FriendsRequestViewProps } from './FriendsRequestView.types'; import { FriendsRequestItemView } from './FriendsRequestItemView';
interface FriendsRequestViewProps
{
requests: MessengerRequest[];
}
export const FriendsRequestView: FC<FriendsRequestViewProps> = props => export const FriendsRequestView: FC<FriendsRequestViewProps> = props =>
{ {

View File

@ -1,6 +0,0 @@
import { MessengerRequest } from '../../common/MessengerRequest';
export interface FriendsRequestViewProps
{
requests: MessengerRequest[];
}

View File

@ -1,7 +1,13 @@
import { FC, useState } from 'react'; import { FC, useState } from 'react';
import { LocalizeText } from '../../../../api'; import { LocalizeText } from '../../../../api';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout'; import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
import { FriendsRoomInviteViewProps } from './FriendsRoomInviteView.types';
interface FriendsRoomInviteViewProps
{
selectedFriendsIds: number[];
onCloseClick: () => void;
sendRoomInvite: (message: string) => void;
}
export const FriendsRoomInviteView: FC<FriendsRoomInviteViewProps> = props => export const FriendsRoomInviteView: FC<FriendsRoomInviteViewProps> = props =>
{ {

View File

@ -1,6 +0,0 @@
export interface FriendsRoomInviteViewProps
{
selectedFriendsIds: number[];
onCloseClick: () => void;
sendRoomInvite: (message: string) => void;
}

View File

@ -4,7 +4,7 @@ import { LocalizeText, OpenMessengerChat } from '../../../../api';
import { BatchUpdates, CreateMessageHook, SendMessageHook } from '../../../../hooks'; import { BatchUpdates, CreateMessageHook, SendMessageHook } from '../../../../hooks';
import { NitroCardAccordionItemView, NitroCardAccordionSetView, NitroCardAccordionView, NitroLayoutFlex, UserProfileIconView } from '../../../../layout'; import { NitroCardAccordionItemView, NitroCardAccordionSetView, NitroCardAccordionView, NitroLayoutFlex, UserProfileIconView } from '../../../../layout';
import { NitroLayoutBase } from '../../../../layout/base'; import { NitroLayoutBase } from '../../../../layout/base';
import { useFriendsContext } from '../../context/FriendsContext'; import { useFriendsContext } from '../../FriendsContext';
export const FriendsSearchView: FC<{}> = props => export const FriendsSearchView: FC<{}> = props =>
{ {

View File

@ -1,8 +0,0 @@
import { MessengerThread } from '../../common/MessengerThread';
import { MessengerThreadChatGroup } from '../../common/MessengerThreadChatGroup';
export interface FriendsMessengerThreadGroupProps
{
thread: MessengerThread;
group: MessengerThreadChatGroup;
}

View File

@ -1,6 +0,0 @@
import { MessengerThread } from '../../common/MessengerThread';
export interface FriendsMessengerThreadViewProps
{
thread: MessengerThread;
}

View File

@ -4,9 +4,16 @@ import { NitroLayoutFlex } from '../../../../layout';
import { NitroLayoutBase } from '../../../../layout/base'; import { NitroLayoutBase } from '../../../../layout/base';
import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView'; import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
import { GroupType } from '../../common/GroupType'; import { GroupType } from '../../common/GroupType';
import { MessengerThread } from '../../common/MessengerThread';
import { MessengerThreadChat } from '../../common/MessengerThreadChat'; import { MessengerThreadChat } from '../../common/MessengerThreadChat';
import { MessengerThreadChatGroup } from '../../common/MessengerThreadChatGroup';
import { getGroupChatData } from '../../common/Utils'; import { getGroupChatData } from '../../common/Utils';
import { FriendsMessengerThreadGroupProps } from './FriendsMessengerThreadGroup.types';
interface FriendsMessengerThreadGroupProps
{
thread: MessengerThread;
group: MessengerThreadChatGroup;
}
export const FriendsMessengerThreadGroup: FC<FriendsMessengerThreadGroupProps> = props => export const FriendsMessengerThreadGroup: FC<FriendsMessengerThreadGroupProps> = props =>
{ {

View File

@ -1,6 +1,11 @@
import { FC } from 'react'; import { FC } from 'react';
import { FriendsMessengerThreadGroup } from '../messenger-thread-group/FriendsMessengerThreadGroup'; import { MessengerThread } from '../../common/MessengerThread';
import { FriendsMessengerThreadViewProps } from './FriendsMessengerThreadView.types'; import { FriendsMessengerThreadGroup } from './FriendsMessengerThreadGroup';
interface FriendsMessengerThreadViewProps
{
thread: MessengerThread;
}
export const FriendsMessengerThreadView: FC<FriendsMessengerThreadViewProps> = props => export const FriendsMessengerThreadView: FC<FriendsMessengerThreadViewProps> = props =>
{ {

View File

@ -11,8 +11,8 @@ import { BadgeImageView } from '../../../shared/badge-image/BadgeImageView';
import { ItemCountView } from '../../../shared/item-count/ItemCountView'; import { ItemCountView } from '../../../shared/item-count/ItemCountView';
import { MessengerThread } from '../../common/MessengerThread'; import { MessengerThread } from '../../common/MessengerThread';
import { MessengerThreadChat } from '../../common/MessengerThreadChat'; import { MessengerThreadChat } from '../../common/MessengerThreadChat';
import { useFriendsContext } from '../../context/FriendsContext'; import { useFriendsContext } from '../../FriendsContext';
import { FriendsMessengerThreadView } from '../messenger-thread/FriendsMessengerThreadView'; import { FriendsMessengerThreadView } from './FriendsMessengerThreadView';
export const FriendsMessengerView: FC<{}> = props => export const FriendsMessengerView: FC<{}> = props =>
{ {