nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-23 06:40:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactored state

Browse Source
This commit is contained in:
dank074 2021-10-22 17:37:54 -05:00
parent 6be3567a0f
commit 91e59fce04
8 changed files with 204 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/views/chat-history/ChatHistoryMessageHandler.tsx
View File

@ -1,41 +1,46 @@
import { RoomInfoEvent, RoomSessionChatEvent, RoomSessionEvent } from '@nitrots/nitro-renderer';
import { FC, useCallback, useState } from 'react';
import { GetRoomSession } from '../../api';
import { ChatHistoryEvent } from '../../events/chat-history/ChatHistoryEvent';
import { CreateMessageHook, dispatchUiEvent, useRoomSessionManagerEvent } from '../../hooks';
import { CreateMessageHook, useRoomSessionManagerEvent } from '../../hooks';
import { useChatHistoryContext } from './context/ChatHistoryContext';
import { ChatEntryType, ChatHistoryAction, CHAT_HISTORY_MAX, IChatEntry } from './reducers/ChatHistoryReducer';
import { ChatEntryType, CHAT_HISTORY_MAX, IChatEntry, IRoomHistoryEntry, ROOM_HISTORY_MAX } from './context/ChatHistoryContext.types';
import { currentDate } from './utils/Utilities';
export const ChatHistoryMessageHandler: FC<{}> = props =>
{
const { chatHistoryState = null, dispatchChatHistoryState = null } = useChatHistoryContext();
const { chats = null, roomHistory = null } = chatHistoryState;
const { chatHistoryState = null, roomHistoryState = null } = useChatHistoryContext();
const [needsRoomInsert, setNeedsRoomInsert ] = useState(false);
const addChatEntry = useCallback((entry: IChatEntry) =>
{
const newChats = [...chats];
newChats.push(entry);
entry.id = chatHistoryState.chats.length;
chatHistoryState.chats.push(entry);
//check for overflow
if(newChats.length > CHAT_HISTORY_MAX)
if(chatHistoryState.chats.length > CHAT_HISTORY_MAX)
{
newChats.shift();
chatHistoryState.chats.shift();
}
chatHistoryState.notify();
//dispatchUiEvent(new ChatHistoryEvent(ChatHistoryEvent.CHAT_HISTORY_CHANGED));
}, [chatHistoryState]);
const addRoomHistoryEntry = useCallback((entry: IRoomHistoryEntry) =>
{
roomHistoryState.roomHistory.push(entry);
// check for overflow
if(roomHistoryState.roomHistory.length > ROOM_HISTORY_MAX)
{
roomHistoryState.roomHistory.shift();
}
dispatchChatHistoryState({
type: ChatHistoryAction.SET_CHATS,
payload: {
chats: newChats
}
});
dispatchUiEvent(new ChatHistoryEvent(ChatHistoryEvent.CHAT_HISTORY_CHANGED));
}, [chats, dispatchChatHistoryState]);
roomHistoryState.notify();
}, [roomHistoryState]);
const onChatEvent = useCallback((event: RoomSessionChatEvent) =>
{
@ -49,7 +54,7 @@ export const ChatHistoryMessageHandler: FC<{}> = props =>
const timeString = currentDate();
const entry: IChatEntry = { id: userData.webID, name: userData.name, look: userData.figure, message: event.message, timestamp: timeString, type: ChatEntryType.TYPE_CHAT };
const entry: IChatEntry = { id: -1, entityId: userData.webID, name: userData.name, look: userData.figure, message: event.message, timestamp: timeString, type: ChatEntryType.TYPE_CHAT };
addChatEntry(entry);
}, [addChatEntry]);
@ -84,13 +89,17 @@ export const ChatHistoryMessageHandler: FC<{}> = props =>
if(needsRoomInsert)
{
const chatEntry: IChatEntry = { id: parser.data.roomId, name: parser.data.roomName, timestamp: currentDate(), type: ChatEntryType.TYPE_ROOM_INFO };
const chatEntry: IChatEntry = { id: -1, entityId: parser.data.roomId, name: parser.data.roomName, timestamp: currentDate(), type: ChatEntryType.TYPE_ROOM_INFO };
addChatEntry(chatEntry);
const roomEntry: IRoomHistoryEntry = { id: parser.data.roomId, name: parser.data.roomName };
addRoomHistoryEntry(roomEntry);
setNeedsRoomInsert(false);
}
}, [addChatEntry, needsRoomInsert]);
}, [addChatEntry, addRoomHistoryEntry, needsRoomInsert]);
CreateMessageHook(RoomInfoEvent, onRoomInfoEvent);

22
src/views/chat-history/ChatHistoryView.scss
View File

@ -1,6 +1,6 @@
.nitro-chat-history
{
width: 250px;
width: 300px;
padding: 2px;
background-color: #1C323F;
@ -27,6 +27,26 @@
{
background-color: #1C323F;
min-height: 200px;
.chat-history-list
{
.chathistory-entry
{
.head-container
{
height: 44px;
width: 42px;
}
.friend-bar-item-head {
top: -30px;
left: 15px;
pointer-events: none;
height: 44px;
width: 42px;
}
}
}
}
}
}

69
src/views/chat-history/ChatHistoryView.tsx
View File

@ -1,19 +1,37 @@
import { FC, useCallback, useEffect, useReducer, useRef, useState } from 'react';
import { AutoSizer, CellMeasurer, CellMeasurerCache, List, ListRowProps, ListRowRenderer } from 'react-virtualized';
import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { AutoSizer, CellMeasurer, CellMeasurerCache, List, ListRowProps, ListRowRenderer, Size } from 'react-virtualized';
import { ChatHistoryEvent } from '../../events/chat-history/ChatHistoryEvent';
import { useUiEvent } from '../../hooks';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../layout';
import { ChatHistoryMessageHandler } from './ChatHistoryMessageHandler';
import { ChatHistoryContextProvider } from './context/ChatHistoryContext';
import { ChatEntryType, ChatHistoryReducer, initialChatHistory } from './reducers/ChatHistoryReducer';
import { ChatEntryType } from './context/ChatHistoryContext.types';
import { ChatHistoryState } from './utils/ChatHistoryState';
import { RoomHistoryState } from './utils/RoomHistoryState';
export const ChatHistoryView: FC<{}> = props =>
{
const [ isVisible, setIsVisible ] = useState(false);
const [ chatHistoryState, dispatchChatHistoryState ] = useReducer(ChatHistoryReducer, initialChatHistory);
const { chats = null } = chatHistoryState;
const [ chatHistoryUpdateId, setChatHistoryUpdateId ] = useState(-1);
const [ roomHistoryUpdateId, setRoomHistoryUpdateId ] = useState(-1);
const [ chatHistoryState, setChatHistoryState ] = useState(new ChatHistoryState());
const [ roomHistoryState, setRoomHistoryState ] = useState(new RoomHistoryState());
const elementRef = useRef<List>(null);
useEffect(() =>
{
const chatState = new ChatHistoryState();
const roomState = new RoomHistoryState();
chatState.notifier = () => setChatHistoryUpdateId(prevValue => (prevValue + 1));
roomState.notifier = () => setRoomHistoryUpdateId(prevValue => (prevValue + 1));
setChatHistoryState(chatState);
setRoomHistoryState(roomState);
return () => {chatState.notifier = null; roomState.notifier = null;};
}, []);
const onChatHistoryEvent = useCallback((event: ChatHistoryEvent) =>
{
switch(event.type)
@ -37,15 +55,19 @@ export const ChatHistoryView: FC<{}> = props =>
useUiEvent(ChatHistoryEvent.TOGGLE_CHAT_HISTORY, onChatHistoryEvent);
useUiEvent(ChatHistoryEvent.CHAT_HISTORY_CHANGED, onChatHistoryEvent);
const cache = new CellMeasurerCache({
defaultHeight: 25,
fixedWidth: true
});
const cache = useMemo(() =>
{
return new CellMeasurerCache({
defaultHeight: 25,
fixedWidth: true,
//keyMapper: (index) => chatHistoryState.chats[index].id
});
}, []);
const RowRenderer: ListRowRenderer = (props: ListRowProps) =>
{
const item = chats[props.index];
const item = chatHistoryState.chats[props.index];
console.log(props.index);
return (
<CellMeasurer
cache={cache}
@ -54,7 +76,7 @@ export const ChatHistoryView: FC<{}> = props =>
parent={props.parent}
rowIndex={props.index}
>
<div key={props.key} style={props.style} className="row chatlog-entry justify-content-start">
<div key={props.key} style={props.style} className="row chathistory-entry justify-content-start">
{(item.type === ChatEntryType.TYPE_CHAT) &&
<>
<div className="col-auto text-center">{item.timestamp}</div>
@ -83,38 +105,43 @@ export const ChatHistoryView: FC<{}> = props =>
);
};
const onResize = useCallback((info: Size) =>
{
cache.clearAll();
}, [cache]);
useEffect(() =>
{
if(elementRef && elementRef.current && isVisible)
{
elementRef.current.scrollToRow(chats.length - 1);
//elementRef.current.measureAllRows();
elementRef.current.scrollToRow(chatHistoryState.chats.length - 1);
}
console.log(chats.length);
}, [chats, isVisible])
//console.log(chatHistoryState.chats.length);
}, [chatHistoryState.chats, isVisible, chatHistoryUpdateId])
return (
<ChatHistoryContextProvider value={ { chatHistoryState, dispatchChatHistoryState } }>
<ChatHistoryContextProvider value={ { chatHistoryState, roomHistoryState } }>
<ChatHistoryMessageHandler />
{isVisible &&
<NitroCardView uniqueKey="chat-history" className="nitro-chat-history" simple={ false }>
<NitroCardHeaderView headerText={ 'Chat History' } onCloseClick={ event => setIsVisible(false) } />
<NitroCardContentView className="chat-history-content" style={{ backgroundColor: '#1C323F !important' }}>
<div className="row w-100 h-100 chat-history-container">
<AutoSizer defaultWidth={250} defaultHeight={200}>
<AutoSizer defaultWidth={300} defaultHeight={200} onResize={onResize}>
{({ height, width }) =>
{
cache.clearAll();
return (
<List
ref={elementRef}
width={width}
height={height}
rowCount={chats.length}
rowCount={chatHistoryState.chats.length}
rowHeight={cache.rowHeight}
className={'chat-history-list'}
rowRenderer={RowRenderer}
deferredMeasurementCache={cache} />
deferredMeasurementCache={cache}
/>
)
}
}

2
src/views/chat-history/context/ChatHistoryContext.tsx
View File

@ -3,7 +3,7 @@ import { ChatHistoryContextProps, IChatHistoryContext } from './ChatHistoryConte
const ChatHistoryContext = createContext<IChatHistoryContext>({
chatHistoryState: null,
dispatchChatHistoryState: null
roomHistoryState: null
});
export const ChatHistoryContextProvider: FC<ChatHistoryContextProps> = props =>

41
src/views/chat-history/context/ChatHistoryContext.types.ts
View File

@ -1,12 +1,47 @@
import { Dispatch, ProviderProps } from 'react';
import { IChatHistoryAction, IChatHistoryState } from '../reducers/ChatHistoryReducer';
import { ProviderProps } from 'react';
export interface IChatHistoryContext
{
chatHistoryState: IChatHistoryState;
dispatchChatHistoryState: Dispatch<IChatHistoryAction>;
roomHistoryState: IRoomHistoryState;
}
export interface IChatHistoryState {
chats: IChatEntry[];
notifier: () => void
notify(): void;
}
export interface IRoomHistoryState {
roomHistory: IRoomHistoryEntry[];
notifier: () => void
notify(): void;
}
export interface IChatEntry {
id: number;
entityId: number;
name: string;
look?: string;
message?: string;
timestamp: string;
type: number;
}
export interface IRoomHistoryEntry {
id: number;
name: string;
}
export class ChatEntryType
{
public static TYPE_CHAT = 1;
public static TYPE_ROOM_INFO = 2;
}
export const CHAT_HISTORY_MAX = 1000;
export const ROOM_HISTORY_MAX = 10;
export interface ChatHistoryContextProps extends ProviderProps<IChatHistoryContext>
{

66
src/views/chat-history/reducers/ChatHistoryReducer.tsx
View File

@ -1,66 +0,0 @@
import { Reducer } from 'react';
export interface IChatHistoryState {
chats: IChatEntry[];
roomHistory: IRoomHistoryEntry[];
}
export interface IChatEntry {
id: number;
name: string;
look?: string;
message?: string;
timestamp: string;
type: number;
}
export interface IRoomHistoryEntry {
id: number;
name: string;
}
export class ChatEntryType
{
public static TYPE_CHAT = 1;
public static TYPE_ROOM_INFO = 2;
}
export interface IChatHistoryAction
{
type: string;
payload: {
chats?: IChatEntry[];
roomHistory?: IRoomHistoryEntry[];
}
}
export class ChatHistoryAction
{
public static SET_CHATS: string = 'CHA_SET_CHATS';
public static SET_ROOM_HISTORY: string = 'CHA_SET_ROOM_HISTORY';
}
export const initialChatHistory: IChatHistoryState = {
chats: [],
roomHistory: []
};
export const CHAT_HISTORY_MAX = 1000;
export const ROOM_HISTORY_MAX = 10;
export const ChatHistoryReducer: Reducer<IChatHistoryState, IChatHistoryAction> = (state, action) =>
{
switch(action.type)
{
case ChatHistoryAction.SET_CHATS: {
const chats = (action.payload.chats || state.chats || null);
return { ...state, chats };
}
case ChatHistoryAction.SET_ROOM_HISTORY: {
const roomHistory = (action.payload.roomHistory || state.roomHistory || null);
return { ...state, roomHistory };
}
}
}

32
src/views/chat-history/utils/ChatHistoryState.ts Normal file
View File

@ -0,0 +1,32 @@
import { IChatEntry, IChatHistoryState } from '../context/ChatHistoryContext.types';
export class ChatHistoryState implements IChatHistoryState
{
private _chats: IChatEntry[];
private _notifier: () => void;
constructor()
{
this._chats = [];
}
public get chats(): IChatEntry[]
{
return this._chats;
}
public get notifier(): () => void
{
return this._notifier;
}
public set notifier(notifier: () => void)
{
this._notifier = notifier;
}
notify(): void
{
if(this._notifier) this._notifier();
}
}

32
src/views/chat-history/utils/RoomHistoryState.ts Normal file
View File

@ -0,0 +1,32 @@
import { IRoomHistoryEntry, IRoomHistoryState } from '../context/ChatHistoryContext.types';
export class RoomHistoryState implements IRoomHistoryState
{
private _roomHistory: IRoomHistoryEntry[];
private _notifier: () => void;
constructor()
{
this._roomHistory = [];
}
public get roomHistory(): IRoomHistoryEntry[]
{
return this._roomHistory;
}
public get notifier(): () => void
{
return this._notifier;
}
public set notifier(notifier: () => void)
{
this._notifier = notifier;
}
notify(): void
{
if(this._notifier) this._notifier();
}
}