As a new user, you're automatically added to BookClub
.
Let's say you enter Bookclub
while testing Alexandria.
-
You'll see a list of
Channels
on theSidebar
navigation, aHeader
, and theChatbox
. TheChatBox
contains the messages from Room Members, as well asMeeting Logs
(messages exchanged during a meeting) -
Channels
are a way of modularising conversation, keeping separate topics of collaboration in a room workspace. -
This concept is similar to that of the Teams App, wherein each Team maintained conversation and workspace associated to it's designated purpose.
-
For eg: A college maintains a Room for each of their courses. Now each Room will have different Channels for different purposes. Say there is a channel "Exams" for exam-related conversation, another channel "Class" where students exchange classwork-associated doubts.
-
As
BookClub
is a pre-existing room, some users are already here, and you can see their messages and channels created. (I have been testing Alexandria out with my friends and assigned Engage Mentor as well 😄) -
You can see each message sender's
profile picture
,name
, and alsotimestamp
of each message. Feel free to check the other channels out, create a new channel, and send some messages to test functionalities. -
You can also start a meeting from a room. The Meeting Logs will come up here after the conclusion of a meeting.
-
You can sign-out from here too, and be redirected to Login UI.
-
Made Custom React Components for aesthetic UI, for eg: the Chat Message UI. I have made good use of
@material-ui
andmui-treasury
packages for building these. -
Flex has been applied on these React components to render
SideBar
,ChatBox
,Header
andChatInput
- and facilitate scrolling in bothMeeting Logs
box as well as theChatBox
-
Redux
slice has been used to maintain state between Channels, and to enforceDRY
principle of Agile Development.//appSlice.js import { createSlice } from '@reduxjs/toolkit'; export const appSlice = createSlice({ name: 'app', initialState: { channelId: "general", channelName: "general", }, reducers: { setChannelInfo: (state, action) => { state.channelId = action.payload.channelId; state.channelName = action.payload.channelName; }, }, }); export const { setChannelInfo } = appSlice.actions; export const selectChannelId = (state) => state.app.channelId; export const selectChannelName = (state) => state.app.channelName; export default appSlice.reducer;
-
All messages of a particular Channel are stored as documents under collection
rooms\<roomID>\channels\<channelID>\messages\
.
- If
Call Logs
do not show up after a meeting conclusion, please try again.