LogalDeveloper/owncast
0
Fork 0
Code Activity

Refactor app state to be a state machine with access selectors

Browse Source
This commit is contained in:
Gabe Kangas
2022-05-25 20:38:40 -07:00
parent dde9878a46
commit 7b1667bf6a
21 changed files with 421 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
web/components/ui/Sidebar/Sidebar.tsx
View File

@@ -3,26 +3,17 @@ import { useRecoilValue } from 'recoil';
import { ChatMessage } from '../../../interfaces/chat-message.model';
import { ChatContainer, ChatTextField } from '../../chat';
import s from './Sidebar.module.scss';
import {
chatMessagesAtom,
chatVisibilityAtom,
chatStateAtom,
} from '../../stores/ClientConfigStore';
import { ChatState, ChatVisibilityState } from '../../../interfaces/application-state';
import { chatMessagesAtom, appStateAtom } from '../../stores/ClientConfigStore';
import { AppStateOptions } from '../../stores/application-state';
export default function Sidebar() {
const messages = useRecoilValue<ChatMessage[]>(chatMessagesAtom);
const chatVisibility = useRecoilValue<ChatVisibilityState>(chatVisibilityAtom);
const chatState = useRecoilValue<ChatState>(chatStateAtom);
const appState = useRecoilValue<AppStateOptions>(appStateAtom);
return (
<Sider
className={s.root}
collapsed={chatVisibility === ChatVisibilityState.Hidden}
collapsedWidth={0}
width={320}
>
<ChatContainer messages={messages} state={chatState} />
<Sider className={s.root} collapsedWidth={0} width={320}>
<ChatContainer messages={messages} loading={appState.chatLoading} />
<ChatTextField />
</Sider>
);