Skip to content

Commit 3d68852

Browse files
keerlukeerlu
committed
Formatting changes to App.jsx
1 parent 9332a7a commit 3d68852

File tree

1 file changed

+174
-154
lines changed

1 file changed

+174
-154
lines changed

‎react/remote-work-demo/src/App.jsx

+174-154
Original file line numberDiff line numberDiff line change
@@ -1,165 +1,185 @@
11
import talkJsConfig from "./talkJsConfig";
22
import { useState, useEffect, useRef } from "react";
33
import Talk from "talkjs";
4-
import CategoryCollapse from './components/CategoryCollapse';
5-
import ConversationListItem from './components/ConversationListItem';
6-
import ChatHeader from './components/ChatHeader';
4+
import CategoryCollapse from "./components/CategoryCollapse";
5+
import ConversationListItem from "./components/ConversationListItem";
6+
import ChatHeader from "./components/ChatHeader";
77

88
function App() {
9-
10-
/*
11-
* The three values of the currentConversation object pertain to the UI,
12-
* and they are essential for rendering the contents of the components properly.
13-
*/
14-
const [currentConversation, setCurrentConversation] = useState({
15-
id: '',
16-
subject: '',
17-
avatar: ''
18-
});
19-
20-
const talkjsContainer = useRef(null) //This is used to create a ref for the mounting of the TalkJS UI
21-
const [talkLoaded, setTalkLoaded] = useState(false) // This is used to check whether or not TalkJS has loaded,
22-
23-
const [sessionChatbox, setSessionChatbox] = useState(null); // This is used to store the session chatbox
24-
const [mobileChannelSelected, setMobileChannelSelected] = useState(true); //This is used to control whether or not to display the chatbox or the inbox while on mobile displays
25-
26-
const [unreadMessages, setUnreadMessages] = useState([]); //This is used to create the unread effect in the conversationlist
27-
28-
useEffect(() => {
29-
Talk.ready.then(() => setTalkLoaded(true))
30-
}, [talkLoaded])
31-
32-
useEffect(() => {
33-
if (talkLoaded) {
34-
const me = new Talk.User({
35-
id: talkJsConfig.userId,
36-
name: "Eulalia Van Helgen",
37-
photoUrl: "https://talkjs.com/new-web/avatar-7.jpg",
38-
role: "default"
39-
})
40-
41-
const other = new Talk.User({
42-
id: 'remoteWorkOther',
43-
name: "TalkJS",
44-
photoUrl: "https://talkjs.com/new-web/avatar-talkjs.jpg",
45-
welcomeMessage: "Hi there 👋 \nThis is our chat demo and you can test it out in any way you like. Play with some of the chat features, kick the tyres a little, and experience what you could easily build with TalkJS. Also consider checking out our Docs: https://talkjs.com/docs/",
46-
role: "default"
47-
})
48-
49-
window.talkSession = new Talk.Session({
50-
appId: talkJsConfig.appId,
51-
me: me,
52-
});
53-
54-
const defaultConv = window.talkSession.getOrCreateConversation("remoteWorkDefault")
55-
defaultConv.setParticipant(me)
56-
defaultConv.setParticipant(other)
57-
defaultConv.setAttributes({ subject: "welcome", welcomeMessages: ["Welcome to the TalkJS team chat demo!"] })
58-
59-
const chatbox = window.talkSession.createChatbox({
60-
theme: 'team_chat',
61-
conversation: defaultConv,
62-
showChatHeader: false,
63-
});
64-
65-
setCurrentConversation({
66-
id: "remoteWorkDefault",
67-
subject: "TalkJS",
68-
avatar: "https://talkjs.com/new-web/avatar-talkjs.jpg"
69-
})
70-
setSessionChatbox(chatbox)
71-
chatbox.select(defaultConv);
72-
chatbox.mount(talkjsContainer.current);
73-
74-
window.talkSession.unreads.on("change", function (unreadConversations) {
75-
setUnreadMessages(unreadConversations)
76-
});
77-
}
78-
}, [talkLoaded])
79-
80-
const changeConversation = (conversation) => {
81-
const talkJsConversation = window.talkSession.getOrCreateConversation(conversation.id)
82-
83-
const me = new Talk.User({
84-
id: talkJsConfig.userId,
85-
name: "Eulalia Van Helgen",
86-
photoUrl: "https://talkjs.com/new-web/avatar-7.jpg",
87-
role: "default"
88-
})
89-
90-
talkJsConversation.setParticipant(me)
91-
talkJsConversation.setAttributes(conversation)
92-
setMobileChannelSelected(true)
93-
setCurrentConversation(conversation)
94-
sessionChatbox.select(talkJsConversation)
9+
/*
10+
* The three values of the currentConversation object pertain to the UI,
11+
* and they are essential for rendering the contents of the components properly.
12+
*/
13+
const [currentConversation, setCurrentConversation] = useState({
14+
id: "",
15+
subject: "",
16+
avatar: "",
17+
});
18+
19+
const talkjsContainer = useRef(null); //This is used to create a ref for the mounting of the TalkJS UI
20+
const [talkLoaded, setTalkLoaded] = useState(false); // This is used to check whether or not TalkJS has loaded,
21+
22+
const [sessionChatbox, setSessionChatbox] = useState(null); // This is used to store the session chatbox
23+
const [mobileChannelSelected, setMobileChannelSelected] = useState(true); //This is used to control whether or not to display the chatbox or the inbox while on mobile displays
24+
25+
const [unreadMessages, setUnreadMessages] = useState([]); //This is used to create the unread effect in the conversationlist
26+
27+
useEffect(() => {
28+
Talk.ready.then(() => setTalkLoaded(true));
29+
}, [talkLoaded]);
30+
31+
useEffect(() => {
32+
if (talkLoaded) {
33+
const me = new Talk.User({
34+
id: talkJsConfig.userId,
35+
name: "Eulalia Van Helgen",
36+
photoUrl: "https://talkjs.com/new-web/avatar-7.jpg",
37+
role: "default",
38+
});
39+
40+
const other = new Talk.User({
41+
id: "remoteWorkOther",
42+
name: "TalkJS",
43+
photoUrl: "https://talkjs.com/new-web/avatar-talkjs.jpg",
44+
welcomeMessage:
45+
"Hi there 👋 \nThis is our chat demo and you can test it out in any way you like. Play with some of the chat features, kick the tyres a little, and experience what you could easily build with TalkJS. Also consider checking out our Docs: https://talkjs.com/docs/",
46+
role: "default",
47+
});
48+
49+
window.talkSession = new Talk.Session({
50+
appId: talkJsConfig.appId,
51+
me: me,
52+
});
53+
54+
const defaultConv =
55+
window.talkSession.getOrCreateConversation("remoteWorkDefault");
56+
defaultConv.setParticipant(me);
57+
defaultConv.setParticipant(other);
58+
defaultConv.setAttributes({
59+
subject: "welcome",
60+
welcomeMessages: ["Welcome to the TalkJS team chat demo!"],
61+
});
62+
63+
const chatbox = window.talkSession.createChatbox({
64+
theme: "team_chat",
65+
conversation: defaultConv,
66+
showChatHeader: false,
67+
});
68+
69+
setCurrentConversation({
70+
id: "remoteWorkDefault",
71+
subject: "TalkJS",
72+
avatar: "https://talkjs.com/new-web/avatar-talkjs.jpg",
73+
});
74+
setSessionChatbox(chatbox);
75+
chatbox.select(defaultConv);
76+
chatbox.mount(talkjsContainer.current);
77+
78+
window.talkSession.unreads.on("change", function (unreadConversations) {
79+
setUnreadMessages(unreadConversations);
80+
});
9581
}
82+
}, [talkLoaded]);
9683

97-
return (
98-
<div className="w-full h-screen flex flex-row bg-gray-900 text-white border-none">
99-
<div className={`flex flex-col ${mobileChannelSelected ? 'lg:w-1/3 hidden lg:block' : 'lg:w-1/3 w-full'}`} style={{
100-
borderColor: "#737373",
101-
borderWidth: "0 0 0 0",
102-
borderStyle: "solid",
103-
}}>
104-
<div className='h-20 flex flex-col justify-around rounded-t-xl lg:rounded-none lg:rounded-tl-xl rounded-tl-xl mb-4' style={{
105-
borderColor: "#737373",
106-
borderWidth: "1px 0 1px 1px",
107-
borderStyle: "solid",
108-
backgroundColor: "#404040"
109-
}}>
110-
<h1 className='text-xl text-bold pl-4' style={{
111-
fontSize: "16px"
112-
}}>Channels</h1>
113-
</div>
114-
115-
<CategoryCollapse title={"Channels"}>
116-
{
117-
talkJsConfig.conversations.channels.map((channel, key) => {
118-
return (
119-
<ConversationListItem
120-
conversation={channel}
121-
key={key}
122-
changeConversation={changeConversation}
123-
unreadMessages={unreadMessages}
124-
currentConversation={currentConversation}
125-
/>
126-
)
127-
})
128-
}
129-
</CategoryCollapse>
130-
131-
<CategoryCollapse title={"Direct messages"}>
132-
{
133-
talkJsConfig.conversations.dms.map((dm, key) => {
134-
return (
135-
<ConversationListItem
136-
conversation={dm}
137-
key={key}
138-
changeConversation={changeConversation}
139-
unreadMessages={unreadMessages}
140-
currentConversation={currentConversation}
141-
/>
142-
)
143-
})
144-
}
145-
</CategoryCollapse>
146-
</div>
147-
148-
<div className={`flex flex-col ${mobileChannelSelected ? 'lg:w-2/3 w-full' : 'lg:w-2/3 hidden lg:block'}`}>
149-
<div className='h-20 w-full'>
150-
<ChatHeader
151-
conversation={currentConversation}
152-
mobileChannelSelected={mobileChannelSelected}
153-
setMobileChannelSelected={setMobileChannelSelected}
154-
/>
155-
</div>
156-
157-
<div className='h-full w-full overflow-hidden rounded-b-xl lg:rounded-none lg:rounded-br-xl' ref={talkjsContainer}>
158-
159-
</div>
160-
</div>
161-
</div>
84+
const changeConversation = (conversation) => {
85+
const talkJsConversation = window.talkSession.getOrCreateConversation(
86+
conversation.id
16287
);
88+
89+
const me = new Talk.User({
90+
id: talkJsConfig.userId,
91+
name: "Eulalia Van Helgen",
92+
photoUrl: "https://talkjs.com/new-web/avatar-7.jpg",
93+
role: "default",
94+
});
95+
96+
talkJsConversation.setParticipant(me);
97+
talkJsConversation.setAttributes(conversation);
98+
setMobileChannelSelected(true);
99+
setCurrentConversation(conversation);
100+
sessionChatbox.select(talkJsConversation);
101+
};
102+
103+
return (
104+
<div className="w-full h-screen flex flex-row bg-gray-900 text-white border-none">
105+
<div
106+
className={`flex flex-col ${
107+
mobileChannelSelected ? "lg:w-1/3 hidden lg:block" : "lg:w-1/3 w-full"
108+
}`}
109+
style={{
110+
borderColor: "#737373",
111+
borderWidth: "0 0 0 0",
112+
borderStyle: "solid",
113+
}}
114+
>
115+
<div
116+
className="h-20 flex flex-col justify-around rounded-t-xl lg:rounded-none lg:rounded-tl-xl rounded-tl-xl mb-4"
117+
style={{
118+
borderColor: "#737373",
119+
borderWidth: "1px 0 1px 1px",
120+
borderStyle: "solid",
121+
backgroundColor: "#404040",
122+
}}
123+
>
124+
<h1
125+
className="text-xl text-bold pl-4"
126+
style={{
127+
fontSize: "16px",
128+
}}
129+
>
130+
Channels
131+
</h1>
132+
</div>
133+
134+
<CategoryCollapse title={"Channels"}>
135+
{talkJsConfig.conversations.channels.map((channel, key) => {
136+
return (
137+
<ConversationListItem
138+
conversation={channel}
139+
key={key}
140+
changeConversation={changeConversation}
141+
unreadMessages={unreadMessages}
142+
currentConversation={currentConversation}
143+
/>
144+
);
145+
})}
146+
</CategoryCollapse>
147+
148+
<CategoryCollapse title={"Direct messages"}>
149+
{talkJsConfig.conversations.dms.map((dm, key) => {
150+
return (
151+
<ConversationListItem
152+
conversation={dm}
153+
key={key}
154+
changeConversation={changeConversation}
155+
unreadMessages={unreadMessages}
156+
currentConversation={currentConversation}
157+
/>
158+
);
159+
})}
160+
</CategoryCollapse>
161+
</div>
162+
163+
<div
164+
className={`flex flex-col ${
165+
mobileChannelSelected ? "lg:w-2/3 w-full" : "lg:w-2/3 hidden lg:block"
166+
}`}
167+
>
168+
<div className="h-20 w-full">
169+
<ChatHeader
170+
conversation={currentConversation}
171+
mobileChannelSelected={mobileChannelSelected}
172+
setMobileChannelSelected={setMobileChannelSelected}
173+
/>
174+
</div>
175+
176+
<div
177+
className="h-full w-full overflow-hidden rounded-b-xl lg:rounded-none lg:rounded-br-xl"
178+
ref={talkjsContainer}
179+
></div>
180+
</div>
181+
</div>
182+
);
163183
}
164184

165185
export default App;

0 commit comments

Comments
 (0)