added toggle aside method

dailyjs/shared/components/Aside/PeopleAside.js

@@ -98,7 +98,7 @@ export const PeopleAside = () => {
   const { showAside, setShowAside } = useUIState();
   const { allParticipants, isOwner } = useParticipants();
 
-  if (!showAside && showAside !== PEOPLE_ASIDE) {
+  if (!showAside || showAside !== PEOPLE_ASIDE) {
     return null;
   }
 

dailyjs/shared/components/Tray/BasicTray.js

@@ -14,8 +14,7 @@ import { Tray, TrayButton } from './Tray';
 
 export const BasicTray = () => {
   const { callObject, leave } = useCallState();
-  const { customTrayComponent, setShowDeviceModal, setShowAside } =
+  const { customTrayComponent, setShowDeviceModal, toggleAside } = useUIState();
-    useUIState();
   const { isCamMuted, isMicMuted } = useMediaDevices();
 
   const toggleCamera = (newState) => {
@@ -48,10 +47,7 @@ export const BasicTray = () => {
         <IconSettings />
       </TrayButton>
 
-      <TrayButton
+      <TrayButton label="People" onClick={() => toggleAside(PEOPLE_ASIDE)}>
-        label="People"
-        onClick={() => setShowAside((p) => (p ? null : PEOPLE_ASIDE))}
-      >
         <IconPeople />
       </TrayButton>
 

dailyjs/shared/contexts/UIStateProvider.js

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useState } from 'react';
+import React, { useCallback, createContext, useContext, useState } from 'react';
 import PropTypes from 'prop-types';
 
 export const UIStateContext = createContext();
@@ -7,6 +7,10 @@ export const UIStateProvider = ({ asides, customTrayComponent, children }) => {
   const [showDeviceModal, setShowDeviceModal] = useState(false);
   const [showAside, setShowAside] = useState();
 
+  const toggleAside = useCallback((newAside) => {
+    setShowAside((p) => (p === newAside ? null : newAside));
+  }, []);
+
   return (
     <UIStateContext.Provider
       value={{
@@ -14,6 +18,7 @@ export const UIStateProvider = ({ asides, customTrayComponent, children }) => {
         customTrayComponent,
         showDeviceModal,
         setShowDeviceModal,
+        toggleAside,
         showAside,
         setShowAside,
       }}

dailyjs/text-chat/components/ChatAside/ChatAside.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import Aside from '@dailyjs/shared/components/Aside';
+import { useUIState } from '@dailyjs/shared/contexts/UIStateProvider';
+
+export const CHAT_ASIDE = 'chat';
+
+export const ChatAside = () => {
+  const { showAside, setShowAside } = useUIState();
+
+  if (!showAside || showAside !== CHAT_ASIDE) {
+    return null;
+  }
+
+  return (
+    <Aside onClose={() => setShowAside(false)}>Hello I am teh chat aside</Aside>
+  );
+};
+
+export default ChatAside;

dailyjs/text-chat/components/ChatAside/index.js

@@ -0,0 +1 @@
+export { ChatAside as default } from './ChatAside';

dailyjs/text-chat/components/Tray/Tray.js

@@ -1,14 +1,20 @@
 import React from 'react';
 
 import { TrayButton } from '@dailyjs/shared/components/Tray';
+import { useUIState } from '@dailyjs/shared/contexts/UIStateProvider';
 import { ReactComponent as IconChat } from '@dailyjs/shared/icons/chat-md.svg';
+import { CHAT_ASIDE } from '../ChatAside/ChatAside';
 
-export const Tray = () => (
+export const Tray = () => {
-  <>
+  const { toggleAside } = useUIState();
-    <TrayButton label="Chat">
+
-      <IconChat />
+  return (
-    </TrayButton>
+    <>
-  </>
+      <TrayButton label="Chat" onClick={() => toggleAside(CHAT_ASIDE)}>
-);
+        <IconChat />
+      </TrayButton>
+    </>
+  );
+};
 
 export default Tray;

dailyjs/text-chat/pages/_app.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import App from '@dailyjs/basic-call/pages/_app';
 
+import ChatAside from '../components/ChatAside/ChatAside';
 import Tray from '../components/Tray';
 
-App.asides = [];
+App.asides = [ChatAside];
 App.customTrayComponent = <Tray />;
 
 export default App;