@messenger-box/platform-browser 10.0.3-alpha.7 → 10.0.3-alpha.74
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +100 -0
- package/lib/components/InboxMessage/InboxDetails/index.d.ts +6 -1
- package/lib/components/InboxMessage/InboxDetails/index.d.ts.map +1 -1
- package/lib/components/InboxMessage/InboxDetails/index.js +10 -11
- package/lib/components/InboxMessage/InboxDetails/index.js.map +1 -1
- package/lib/components/InboxMessage/InboxSidebar/index.d.ts.map +1 -1
- package/lib/components/InboxMessage/InboxSidebar/index.js +23 -32
- package/lib/components/InboxMessage/InboxSidebar/index.js.map +1 -1
- package/lib/components/InboxMessage/Messages/index.d.ts.map +1 -1
- package/lib/components/InboxMessage/Messages/index.js +42 -81
- package/lib/components/InboxMessage/Messages/index.js.map +1 -1
- package/lib/components/InboxMessage/MessagesList/index.d.ts.map +1 -1
- package/lib/components/InboxMessage/MessagesList/index.js +53 -74
- package/lib/components/InboxMessage/MessagesList/index.js.map +1 -1
- package/lib/components/InboxMessage/Popover/index.d.ts +5 -1
- package/lib/components/InboxMessage/Popover/index.d.ts.map +1 -1
- package/lib/components/InboxMessage/Popover/index.js +8 -35
- package/lib/components/InboxMessage/Popover/index.js.map +1 -1
- package/lib/components/InboxMessage/UserModalContent/index.d.ts.map +1 -1
- package/lib/components/InboxMessage/UserModalContent/index.js +50 -47
- package/lib/components/InboxMessage/UserModalContent/index.js.map +1 -1
- package/lib/components/InboxMessage/index.d.ts.map +1 -1
- package/lib/components/InboxMessage/index.js +38 -70
- package/lib/components/InboxMessage/index.js.map +1 -1
- package/lib/components/dashboard/menu_header.d.ts.map +1 -1
- package/lib/components/dashboard/menu_header.js +38 -24
- package/lib/components/dashboard/menu_header.js.map +1 -1
- package/lib/components/dashboard/modals/direct_modal.d.ts +10 -8
- package/lib/components/dashboard/modals/direct_modal.d.ts.map +1 -1
- package/lib/components/dashboard/modals/direct_modal.js +59 -39
- package/lib/components/dashboard/modals/direct_modal.js.map +1 -1
- package/lib/components/dashboard/modals.d.ts +18 -6
- package/lib/components/dashboard/modals.d.ts.map +1 -1
- package/lib/components/dashboard/modals.js +60 -101
- package/lib/components/dashboard/modals.js.map +1 -1
- package/lib/components/messenger/avatar/index.d.ts.map +1 -1
- package/lib/components/messenger/index.d.ts.map +1 -1
- package/lib/components/messenger/index.js +45 -82
- package/lib/components/messenger/index.js.map +1 -1
- package/lib/components/messenger/messagesList/index.d.ts.map +1 -1
- package/lib/components/messenger/messagesList/index.js +174 -454
- package/lib/components/messenger/messagesList/index.js.map +1 -1
- package/lib/components/messenger/messagesList/messageBox.d.ts +0 -1
- package/lib/components/messenger/messagesList/messageBox.d.ts.map +1 -1
- package/lib/components/messenger/more_action/index.d.ts.map +1 -1
- package/lib/components/messenger/postMessage/postMessage.d.ts +7 -2
- package/lib/components/messenger/postMessage/postMessage.d.ts.map +1 -1
- package/lib/components/messenger/sidebarThreadList/index.d.ts.map +1 -1
- package/lib/components/messenger/threadSidebar/index.d.ts.map +1 -1
- package/lib/components/messenger/types/message.d.ts +11 -11
- package/lib/components/messenger/types/message.d.ts.map +1 -1
- package/lib/components/post/create_post/create_post.d.ts +10 -1
- package/lib/components/post/create_post/create_post.d.ts.map +1 -1
- package/lib/components/post/index.d.ts +5 -3
- package/lib/components/post/index.d.ts.map +1 -1
- package/lib/components/post/index.js +63 -97
- package/lib/components/post/index.js.map +1 -1
- package/lib/components/post/post_header/post_header_custom_status.d.ts.map +1 -1
- package/lib/compute.d.ts.map +1 -1
- package/lib/compute.js +1 -1
- package/lib/compute.js.map +1 -1
- package/lib/containers/Dashboard.d.ts.map +1 -1
- package/lib/containers/Dashboard.js +110 -124
- package/lib/containers/Dashboard.js.map +1 -1
- package/lib/containers/DashboardWithLoader.d.ts.map +1 -1
- package/lib/containers/DashboardWithLoader.js +10 -3
- package/lib/containers/DashboardWithLoader.js.map +1 -1
- package/package.json +5 -5
- package/src/components/InboxMessage/InboxDetails/index.tsx +13 -15
- package/src/components/InboxMessage/InboxSidebar/index.tsx +23 -33
- package/src/components/InboxMessage/Messages/index.tsx +58 -97
- package/src/components/InboxMessage/MessagesList/index.tsx +71 -82
- package/src/components/InboxMessage/Popover/index.tsx +14 -38
- package/src/components/InboxMessage/UserModalContent/index.tsx +41 -44
- package/src/components/InboxMessage/index.tsx +53 -68
- package/src/components/dashboard/menu_header.tsx +52 -45
- package/src/components/dashboard/modals/direct_modal.tsx +73 -40
- package/src/components/dashboard/modals.tsx +114 -105
- package/src/components/messenger/avatar/index.tsx +27 -13
- package/src/components/messenger/index.tsx +126 -161
- package/src/components/messenger/messagesList/index.tsx +288 -572
- package/src/components/messenger/messagesList/messageBox.tsx +45 -34
- package/src/components/messenger/more_action/index.tsx +16 -10
- package/src/components/messenger/postMessage/postMessage.tsx +28 -16
- package/src/components/messenger/sidebarThreadList/index.tsx +52 -178
- package/src/components/messenger/threadSidebar/index.tsx +88 -75
- package/src/components/messenger/types/message.ts +12 -11
- package/src/components/post/channel_view/channel_view.tsx +2 -2
- package/src/components/post/create_post/create_post.tsx +104 -195
- package/src/components/post/index.tsx +78 -99
- package/src/components/post/post_header/post_header_custom_status.tsx +7 -6
- package/src/components/post/post_header/style.ts +51 -51
- package/src/compute.ts +8 -8
- package/src/containers/Dashboard.tsx +170 -213
- package/src/containers/DashboardWithLoader.tsx +13 -5
- package/lib/components/InboxMessage/InboxDetails/style.d.ts +0 -2
- package/lib/components/InboxMessage/InboxDetails/style.d.ts.map +0 -1
- package/lib/components/InboxMessage/InboxDetails/style.js +0 -27
- package/lib/components/InboxMessage/InboxDetails/style.js.map +0 -1
- package/lib/components/InboxMessage/InboxSidebar/styles.d.ts +0 -2
- package/lib/components/InboxMessage/InboxSidebar/styles.d.ts.map +0 -1
- package/lib/components/InboxMessage/InboxSidebar/styles.js +0 -57
- package/lib/components/InboxMessage/InboxSidebar/styles.js.map +0 -1
- package/lib/components/InboxMessage/Messages/styles.d.ts +0 -81
- package/lib/components/InboxMessage/Messages/styles.d.ts.map +0 -1
- package/lib/components/InboxMessage/Messages/styles.js +0 -85
- package/lib/components/InboxMessage/Messages/styles.js.map +0 -1
- package/lib/components/InboxMessage/Popover/style.d.ts +0 -28
- package/lib/components/InboxMessage/Popover/style.d.ts.map +0 -1
- package/lib/components/InboxMessage/Popover/style.js +0 -27
- package/lib/components/InboxMessage/Popover/style.js.map +0 -1
- package/lib/components/InboxMessage/UserModalContent/style.d.ts +0 -2
- package/lib/components/InboxMessage/UserModalContent/style.d.ts.map +0 -1
- package/lib/components/InboxMessage/UserModalContent/style.js +0 -98
- package/lib/components/InboxMessage/UserModalContent/style.js.map +0 -1
- package/lib/components/InboxMessage/style.js +0 -189
- package/lib/components/InboxMessage/style.js.map +0 -1
- package/lib/components/messenger/avatar/style.d.ts +0 -2
- package/lib/components/messenger/avatar/style.d.ts.map +0 -1
- package/lib/components/messenger/messagesList/style.js +0 -446
- package/lib/components/messenger/messagesList/style.js.map +0 -1
- package/lib/components/messenger/more_action/index.js +0 -48
- package/lib/components/messenger/more_action/index.js.map +0 -1
- package/lib/components/messenger/more_action/style.d.ts +0 -2
- package/lib/components/messenger/more_action/style.d.ts.map +0 -1
- package/lib/components/messenger/more_action/style.js +0 -45
- package/lib/components/messenger/more_action/style.js.map +0 -1
- package/lib/components/post/style.js +0 -20101
- package/lib/components/post/style.js.map +0 -1
- package/lib/style.js +0 -400
- package/lib/style.js.map +0 -1
- package/src/components/InboxMessage/InboxDetails/style.ts +0 -27
- package/src/components/InboxMessage/InboxSidebar/styles.ts +0 -57
- package/src/components/InboxMessage/Messages/styles.ts +0 -85
- package/src/components/InboxMessage/Popover/style.ts +0 -27
- package/src/components/InboxMessage/UserModalContent/style.ts +0 -98
- package/src/components/messenger/avatar/style.ts +0 -86
- package/src/components/messenger/more_action/style.ts +0 -45
|
@@ -1,24 +1,21 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { styleSheet } from '../style';
|
|
3
2
|
import { IntlProvider } from 'react-intl';
|
|
4
3
|
import {
|
|
5
4
|
useAddChannelMutation,
|
|
6
5
|
useAddDirectChannelMutation,
|
|
7
6
|
useAddMemberToChannelMutation,
|
|
8
7
|
useSendMessagesMutation,
|
|
9
|
-
} from 'common/
|
|
8
|
+
} from 'common/graphql';
|
|
10
9
|
import { MenuHeader } from '../components/dashboard/menu_header';
|
|
11
10
|
import { Modals } from '../components/dashboard/modals';
|
|
12
11
|
import { DirectModal } from '../components/dashboard/modals/direct_modal';
|
|
13
|
-
import {
|
|
14
|
-
import { BsGlobe2 } from 'react-icons/bs';
|
|
12
|
+
import { GoGlobe } from '@react-icons/all-files/go/GoGlobe';
|
|
15
13
|
import { useTranslation } from 'react-i18next';
|
|
16
|
-
import { RiAdminFill } from 'react-icons/ri';
|
|
14
|
+
import { RiAdminFill } from '@react-icons/all-files/ri/RiAdminFill';
|
|
17
15
|
import { useEffect, useState } from 'react';
|
|
18
|
-
import { Avatar } from 'antd';
|
|
19
|
-
import { Comment } from '@ant-design/compatible';
|
|
20
16
|
import { indexOf } from 'lodash-es';
|
|
21
17
|
import { useSelector } from 'react-redux';
|
|
18
|
+
import { userSelector } from '@adminide-stack/user-auth0-client';
|
|
22
19
|
import { Routes, Route, Link, useNavigate, useLocation } from '@remix-run/react';
|
|
23
20
|
import { dashboardRoutes } from '../compute';
|
|
24
21
|
|
|
@@ -27,20 +24,16 @@ const Messenger = React.lazy(() => import('./Messenger'));
|
|
|
27
24
|
const Dashboard: React.FC = (props: any) => {
|
|
28
25
|
const [allUsers, usersToChat, currentUserRes, allChannels, getChannel] = props?.data;
|
|
29
26
|
const [channelInput, setChannelInput] = useState<any>({});
|
|
30
|
-
// const [channels, setChannels] = useState([]);
|
|
31
27
|
const [publicChannels, setPublicChannels] = useState([]);
|
|
32
28
|
const [directChannels, setDirectChannels] = useState([]);
|
|
33
29
|
const [clickedChannel, setClickedChannel] = useState<any>({});
|
|
34
|
-
const
|
|
30
|
+
const currentUser: any = useSelector(userSelector);
|
|
35
31
|
const [options, setOptions] = useState([]);
|
|
36
32
|
const [showDirectChl, setShowDirectChl] = useState(false);
|
|
37
33
|
const [selectedValues, setSelectedValues] = useState<any>([]);
|
|
38
34
|
const [directMoreModal, setDirectMoreModal] = useState<any>({ showDirectMore: false, modalPublicChannels: [] });
|
|
39
35
|
const [publicChlModal, setPublicChlModal] = useState<any>({ show: false });
|
|
40
|
-
const [
|
|
41
|
-
left_bar: 'left_bar',
|
|
42
|
-
root_div: 'root_div',
|
|
43
|
-
});
|
|
36
|
+
const [isDrawerOpen, setIsDrawerOpen] = useState(false);
|
|
44
37
|
|
|
45
38
|
const currentUserAuth0Id = useSelector((state: any) => state.user.authUserId);
|
|
46
39
|
|
|
@@ -48,11 +41,7 @@ const Dashboard: React.FC = (props: any) => {
|
|
|
48
41
|
const location = useLocation();
|
|
49
42
|
const { t } = useTranslation();
|
|
50
43
|
|
|
51
|
-
// const allUsers = useGetAllUsersQuery()
|
|
52
|
-
// const usersToChat = useUsersToChatQuery({ variables: { auth0Id: currentUserAuth0Id } })
|
|
53
|
-
// const currentUserRes = useCurrentUserQuery({ variables: { auth0Id: currentUserAuth0Id } })
|
|
54
44
|
const { data, loading, error, refetch } = getChannel;
|
|
55
|
-
// const allChannels = useGetAllChannelQuery()
|
|
56
45
|
const [addMemberToChannelMutationInput, addMemberToChannelMutationResponse] = useAddMemberToChannelMutation({
|
|
57
46
|
update: (cache, mutationResult) => {
|
|
58
47
|
cache.modify({
|
|
@@ -91,7 +80,7 @@ const Dashboard: React.FC = (props: any) => {
|
|
|
91
80
|
{
|
|
92
81
|
state: {
|
|
93
82
|
channel: mutationResult.data.createDirectChannel,
|
|
94
|
-
currentUser:
|
|
83
|
+
currentUser: currentUser,
|
|
95
84
|
},
|
|
96
85
|
},
|
|
97
86
|
);
|
|
@@ -112,46 +101,54 @@ const Dashboard: React.FC = (props: any) => {
|
|
|
112
101
|
{
|
|
113
102
|
state: {
|
|
114
103
|
channel: mutationResult.data.createChannel,
|
|
115
|
-
currentUser:
|
|
104
|
+
currentUser: currentUser,
|
|
116
105
|
},
|
|
117
106
|
},
|
|
118
107
|
);
|
|
119
108
|
},
|
|
120
109
|
});
|
|
121
110
|
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
111
|
+
const handleJoin = React.useCallback(
|
|
112
|
+
(channelId) => {
|
|
113
|
+
if (!currentUser) {
|
|
114
|
+
console.error('Current user is not loaded yet');
|
|
115
|
+
return;
|
|
116
|
+
}
|
|
127
117
|
|
|
128
|
-
|
|
129
|
-
addMemberToChannelMutationInput({
|
|
130
|
-
variables: {
|
|
131
|
-
channelId: channelId,
|
|
132
|
-
memberId: currentUser.id,
|
|
133
|
-
},
|
|
134
|
-
}).then((response) => {
|
|
135
|
-
setClickedChannel(response.data.addMemberToChannel);
|
|
136
|
-
// setShowDirectMore(false)
|
|
137
|
-
setDirectMoreModal({ ...directMoreModal, showDirectMore: false });
|
|
138
|
-
sendMessagesMutationInput({
|
|
118
|
+
addMemberToChannelMutationInput({
|
|
139
119
|
variables: {
|
|
140
120
|
channelId: channelId,
|
|
141
|
-
|
|
142
|
-
files: [],
|
|
121
|
+
memberId: currentUser.id,
|
|
143
122
|
},
|
|
123
|
+
}).then((response) => {
|
|
124
|
+
// Use currentUser from Redux selector
|
|
125
|
+
if (!currentUser) {
|
|
126
|
+
console.error('Current user is not available');
|
|
127
|
+
return;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
setClickedChannel(response.data.addMemberToChannel);
|
|
131
|
+
setDirectMoreModal({ ...directMoreModal, showDirectMore: false });
|
|
132
|
+
sendMessagesMutationInput({
|
|
133
|
+
variables: {
|
|
134
|
+
channelId: channelId,
|
|
135
|
+
content: t('messenger_box_browser.username_joined_the_channel', {
|
|
136
|
+
username: currentUser.username,
|
|
137
|
+
}),
|
|
138
|
+
files: [],
|
|
139
|
+
},
|
|
140
|
+
});
|
|
144
141
|
});
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
142
|
+
},
|
|
143
|
+
[currentUser, addMemberToChannelMutationInput, sendMessagesMutationInput, directMoreModal],
|
|
144
|
+
);
|
|
145
|
+
|
|
146
|
+
const handleGo = React.useCallback(() => {
|
|
147
|
+
if (!currentUser) {
|
|
148
|
+
console.error('Current user is not loaded yet');
|
|
149
|
+
return;
|
|
150
|
+
}
|
|
152
151
|
|
|
153
|
-
const handleGo = () => {
|
|
154
|
-
// console.log('------directModal------', directModal)
|
|
155
152
|
if (selectedValues) {
|
|
156
153
|
let uids = [];
|
|
157
154
|
let dName = currentUser.username + ',';
|
|
@@ -175,7 +172,7 @@ const Dashboard: React.FC = (props: any) => {
|
|
|
175
172
|
});
|
|
176
173
|
handleClose('directChannel');
|
|
177
174
|
}
|
|
178
|
-
};
|
|
175
|
+
}, [currentUser, selectedValues, createDirectChannel]);
|
|
179
176
|
|
|
180
177
|
useEffect(() => {
|
|
181
178
|
if (!addedDirectChannel.loading && addedDirectChannel.data) {
|
|
@@ -191,24 +188,23 @@ const Dashboard: React.FC = (props: any) => {
|
|
|
191
188
|
tempOpt.push({
|
|
192
189
|
value: { username: `${usr.username}`, uid: `${usr.id}` },
|
|
193
190
|
label: (
|
|
194
|
-
<div
|
|
195
|
-
<
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
}
|
|
210
|
-
|
|
211
|
-
/>
|
|
191
|
+
<div className="flex items-center space-x-4 p-2 hover:bg-gray-50 cursor-pointer">
|
|
192
|
+
<div className="flex-shrink-0">
|
|
193
|
+
<div
|
|
194
|
+
className={`w-10 h-10 rounded-full flex items-center justify-center text-white bg-[#${Math.floor(
|
|
195
|
+
Math.random() * 16777215,
|
|
196
|
+
).toString(16)}]`}
|
|
197
|
+
>
|
|
198
|
+
{usr.username
|
|
199
|
+
.match(/\b(\w)/g)
|
|
200
|
+
.join('')
|
|
201
|
+
.toUpperCase()}
|
|
202
|
+
</div>
|
|
203
|
+
</div>
|
|
204
|
+
<div className="flex-1 min-w-0">
|
|
205
|
+
<p className="text-sm font-medium text-gray-900">@{usr.username}</p>
|
|
206
|
+
<p className="text-sm text-gray-500 truncate">{usr.email}</p>
|
|
207
|
+
</div>
|
|
212
208
|
</div>
|
|
213
209
|
),
|
|
214
210
|
});
|
|
@@ -217,12 +213,10 @@ const Dashboard: React.FC = (props: any) => {
|
|
|
217
213
|
}
|
|
218
214
|
}, [usersToChat.data, usersToChat.loading]);
|
|
219
215
|
|
|
220
|
-
const refetchCall = () => {
|
|
221
|
-
// setClickedChannel({})
|
|
222
|
-
};
|
|
216
|
+
const refetchCall = () => {};
|
|
223
217
|
|
|
224
218
|
useEffect(() => {
|
|
225
|
-
if (!loading) {
|
|
219
|
+
if (!loading && currentUser) {
|
|
226
220
|
let diChal = [];
|
|
227
221
|
let fChannel = [];
|
|
228
222
|
let joinedChannel = [];
|
|
@@ -258,9 +252,7 @@ const Dashboard: React.FC = (props: any) => {
|
|
|
258
252
|
}
|
|
259
253
|
});
|
|
260
254
|
}
|
|
261
|
-
// setChannels([...data.channelsByUser, ...fChannel])
|
|
262
255
|
setPublicChannels(joinedChannel);
|
|
263
|
-
// setModalPublicChannels(modelChannel)
|
|
264
256
|
setDirectMoreModal({ ...directMoreModal, modalPublicChannels: modelChannel });
|
|
265
257
|
setDirectChannels([
|
|
266
258
|
...data.channelsByUser.filter((chl) => chl.type === 'DIRECT'),
|
|
@@ -317,15 +309,7 @@ const Dashboard: React.FC = (props: any) => {
|
|
|
317
309
|
}, [addedDirectChannel.loading, addedDirectChannel.data]);
|
|
318
310
|
|
|
319
311
|
const handleClass = () => {
|
|
320
|
-
|
|
321
|
-
if (!oldClasses.left_bar.split(' ').includes('drawer_style')) {
|
|
322
|
-
setClasses({
|
|
323
|
-
left_bar: `${oldClasses.left_bar} drawer_style`,
|
|
324
|
-
root_div: `${oldClasses.root_div} clicked_class`,
|
|
325
|
-
});
|
|
326
|
-
} else {
|
|
327
|
-
setClasses({ left_bar: 'left_bar', root_div: 'root_div' });
|
|
328
|
-
}
|
|
312
|
+
setIsDrawerOpen(!isDrawerOpen);
|
|
329
313
|
};
|
|
330
314
|
|
|
331
315
|
const handleSelect = (selectedOption) => {
|
|
@@ -336,15 +320,20 @@ const Dashboard: React.FC = (props: any) => {
|
|
|
336
320
|
setDirectMoreModal({ ...directMoreModal, ...{ handleJoin: handleJoin, handleShow: handleShow } });
|
|
337
321
|
}, []);
|
|
338
322
|
|
|
323
|
+
// Defensive check to prevent rendering when user data is not available
|
|
324
|
+
if (!currentUser) {
|
|
325
|
+
return <div>Loading...</div>;
|
|
326
|
+
}
|
|
327
|
+
|
|
339
328
|
return (
|
|
340
|
-
<div className=
|
|
341
|
-
<div className={
|
|
329
|
+
<div className="min-h-screen bg-gray-50">
|
|
330
|
+
<div className={`flex h-screen ${isDrawerOpen ? 'drawer-open' : ''}`}>
|
|
342
331
|
<DirectModal
|
|
343
|
-
|
|
332
|
+
show={showDirectChl}
|
|
333
|
+
onHide={() => handleClose('directChannel')}
|
|
344
334
|
handleGo={handleGo}
|
|
345
335
|
handleSelect={handleSelect}
|
|
346
336
|
selectedValues={selectedValues}
|
|
347
|
-
showDirectChl={showDirectChl}
|
|
348
337
|
options={options}
|
|
349
338
|
/>
|
|
350
339
|
<Modals
|
|
@@ -356,55 +345,53 @@ const Dashboard: React.FC = (props: any) => {
|
|
|
356
345
|
/>
|
|
357
346
|
<MenuHeader clickedChannel={clickedChannel} handleClass={handleClass} />
|
|
358
347
|
<div
|
|
359
|
-
className="
|
|
348
|
+
className="flex-1 flex overflow-hidden"
|
|
360
349
|
onClick={() => {
|
|
361
|
-
if (
|
|
350
|
+
if (isDrawerOpen) {
|
|
362
351
|
handleClass();
|
|
363
352
|
}
|
|
364
353
|
}}
|
|
365
354
|
>
|
|
366
|
-
<div
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
355
|
+
<div
|
|
356
|
+
className={`w-64 flex-shrink-0 bg-gray-800 overflow-y-auto transition-transform duration-300 ease-in-out ${
|
|
357
|
+
isDrawerOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'
|
|
358
|
+
}`}
|
|
359
|
+
>
|
|
360
|
+
<div className="flex flex-col h-full">
|
|
361
|
+
<div className="space-y-4 py-4">
|
|
362
|
+
<div className="px-4">
|
|
363
|
+
<h4 className="text-gray-400 uppercase text-sm font-semibold flex justify-between items-center">
|
|
371
364
|
<span>{t('messenger_box_browser.PUBLIC_CHANNELS')}</span>
|
|
365
|
+
<button
|
|
366
|
+
className="text-gray-400 hover:text-white w-6 h-6 rounded flex items-center justify-center hover:bg-gray-700"
|
|
367
|
+
onClick={() => handleShow('publicChannel', 'Public Channel')}
|
|
368
|
+
>
|
|
369
|
+
<span>+</span>
|
|
370
|
+
</button>
|
|
372
371
|
</h4>
|
|
373
|
-
<
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
</button>
|
|
379
|
-
</li>
|
|
380
|
-
{/*{publicChannels.filter((item, index) => index < 3).map((chl, index) => {*/}
|
|
381
|
-
{publicChannels.map((chl, index) => {
|
|
382
|
-
return (
|
|
383
|
-
<Link
|
|
384
|
-
to={{
|
|
385
|
-
pathname: `/o/${location.pathname.split('/')[2]}/dashboard/channel/${
|
|
372
|
+
<ul className="mt-2 space-y-1">
|
|
373
|
+
{publicChannels.map((chl, index) => (
|
|
374
|
+
<Link
|
|
375
|
+
key={chl.id}
|
|
376
|
+
to={`/o/${location.pathname.split('/')[2]}/dashboard/channel/${
|
|
386
377
|
chl.title
|
|
387
|
-
}
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
);
|
|
403
|
-
})}
|
|
404
|
-
<li>
|
|
378
|
+
}`}
|
|
379
|
+
state={{ channel: chl, currentUser: currentUser }}
|
|
380
|
+
>
|
|
381
|
+
<li className="group">
|
|
382
|
+
<a
|
|
383
|
+
className="flex items-center px-2 py-2 text-gray-300 rounded-md hover:bg-gray-700 hover:text-white group-hover:bg-gray-700"
|
|
384
|
+
onClick={() => handleChannelClick(chl)}
|
|
385
|
+
>
|
|
386
|
+
<GoGlobe className="mr-2 h-5 w-5" />
|
|
387
|
+
<span className="truncate">{chl.title}</span>
|
|
388
|
+
</a>
|
|
389
|
+
</li>
|
|
390
|
+
</Link>
|
|
391
|
+
))}
|
|
392
|
+
</ul>
|
|
405
393
|
<button
|
|
406
|
-
|
|
407
|
-
className="nav-more"
|
|
394
|
+
className="mt-2 text-sm text-gray-400 hover:text-white w-full text-left px-2 py-1"
|
|
408
395
|
onClick={() =>
|
|
409
396
|
setDirectMoreModal({
|
|
410
397
|
...directMoreModal,
|
|
@@ -412,112 +399,82 @@ const Dashboard: React.FC = (props: any) => {
|
|
|
412
399
|
})
|
|
413
400
|
}
|
|
414
401
|
>
|
|
415
|
-
|
|
402
|
+
{t('messenger_box_browser.more')}
|
|
416
403
|
</button>
|
|
417
|
-
</
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
<h4>
|
|
404
|
+
</div>
|
|
405
|
+
|
|
406
|
+
<div className="px-4">
|
|
407
|
+
<h4 className="text-gray-400 uppercase text-sm font-semibold flex justify-between items-center">
|
|
422
408
|
<span>{t('messenger_box_browser.PRIVATE_CHANNELS')}</span>
|
|
409
|
+
<button className="text-gray-400 hover:text-white w-6 h-6 rounded flex items-center justify-center hover:bg-gray-700">
|
|
410
|
+
<span>+</span>
|
|
411
|
+
</button>
|
|
423
412
|
</h4>
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
</ul>
|
|
429
|
-
<ul>
|
|
430
|
-
<li className="sidebar-section__header">
|
|
431
|
-
<h4>
|
|
413
|
+
</div>
|
|
414
|
+
|
|
415
|
+
<div className="px-4">
|
|
416
|
+
<h4 className="text-gray-400 uppercase text-sm font-semibold flex justify-between items-center">
|
|
432
417
|
<span>{t('messenger_box_browser.DIRECT_MESSAGES')}</span>
|
|
418
|
+
<button
|
|
419
|
+
className="text-gray-400 hover:text-white w-6 h-6 rounded flex items-center justify-center hover:bg-gray-700"
|
|
420
|
+
onClick={() => handleShow('directChannel')}
|
|
421
|
+
>
|
|
422
|
+
<span>+</span>
|
|
423
|
+
</button>
|
|
433
424
|
</h4>
|
|
434
|
-
<
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
return (
|
|
440
|
-
<Link
|
|
441
|
-
to={{
|
|
442
|
-
pathname: `/o/${location.pathname.split('/')[2]}/dashboard/message/${
|
|
425
|
+
<ul className="mt-2 space-y-1">
|
|
426
|
+
{directChannels.map((cnl) => (
|
|
427
|
+
<Link
|
|
428
|
+
key={cnl.id}
|
|
429
|
+
to={`/o/${location.pathname.split('/')[2]}/dashboard/message/${
|
|
443
430
|
cnl.displayName.split('_').length === 2
|
|
444
|
-
? cnl.displayName.split('_')[0].split('-')[0] !==
|
|
431
|
+
? cnl.displayName.split('_')[0].split('-')[0] !==
|
|
432
|
+
currentUser?.id
|
|
445
433
|
? cnl.displayName.split('_')[0].split('-')[1]
|
|
446
434
|
: cnl.displayName.split('_')[1].split('-')[1]
|
|
447
435
|
: cnl.title
|
|
448
|
-
}
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
) : (
|
|
474
|
-
<span className="icon icon__globe" color="white">
|
|
475
|
-
<RiAdminFill />
|
|
436
|
+
}`}
|
|
437
|
+
state={{
|
|
438
|
+
channel: cnl,
|
|
439
|
+
currentUser: currentUser,
|
|
440
|
+
}}
|
|
441
|
+
>
|
|
442
|
+
<li className="group">
|
|
443
|
+
<a
|
|
444
|
+
className="flex items-center px-2 py-2 text-gray-300 rounded-md hover:bg-gray-700 hover:text-white group-hover:bg-gray-700"
|
|
445
|
+
onClick={() => handleChannelClick(cnl)}
|
|
446
|
+
>
|
|
447
|
+
{cnl.displayName.split(',').length > 1 ? (
|
|
448
|
+
<span className="w-5 h-5 flex items-center justify-center bg-gray-600 rounded-full text-xs mr-2">
|
|
449
|
+
{cnl.displayName.split(',').length}
|
|
450
|
+
</span>
|
|
451
|
+
) : (
|
|
452
|
+
<RiAdminFill className="mr-2 h-5 w-5" />
|
|
453
|
+
)}
|
|
454
|
+
<span className="truncate">
|
|
455
|
+
{cnl.displayName.split('_').length === 2
|
|
456
|
+
? cnl.displayName.split('_')[0].split('-')[0] !==
|
|
457
|
+
currentUser?.id
|
|
458
|
+
? cnl.displayName.split('_')[0].split('-')[1]
|
|
459
|
+
: cnl.displayName.split('_')[1].split('-')[1]
|
|
460
|
+
: cnl.displayName}
|
|
476
461
|
</span>
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
: cnl.displayName.split('_')[1].split('-')[1]
|
|
485
|
-
: cnl.displayName}
|
|
486
|
-
{/*</span>*/}
|
|
487
|
-
</span>
|
|
488
|
-
</a>
|
|
489
|
-
</li>
|
|
490
|
-
|
|
491
|
-
{/*}*/}
|
|
492
|
-
</Link>
|
|
493
|
-
);
|
|
494
|
-
})}
|
|
495
|
-
</ul>
|
|
462
|
+
</a>
|
|
463
|
+
</li>
|
|
464
|
+
</Link>
|
|
465
|
+
))}
|
|
466
|
+
</ul>
|
|
467
|
+
</div>
|
|
468
|
+
</div>
|
|
496
469
|
</div>
|
|
497
470
|
</div>
|
|
498
|
-
<div className="
|
|
471
|
+
<div className="flex-1 overflow-auto bg-white">
|
|
499
472
|
<Routes>
|
|
500
473
|
{dashboardRoutes.map((route, index) => (
|
|
501
|
-
<Route key={index} path={route.path}
|
|
474
|
+
<Route key={index} path={route.path} element={<route.component />} />
|
|
502
475
|
))}
|
|
503
476
|
</Routes>
|
|
504
477
|
</div>
|
|
505
|
-
{/*Add channel Modal*/}
|
|
506
|
-
|
|
507
|
-
{/*{clickedChannel.id ? <div className="main_wraper">*/}
|
|
508
|
-
{/* <IntlProvider locale="en">*/}
|
|
509
|
-
{/* <div className='chat_head_mid'>*/}
|
|
510
|
-
{/* <PostViewPage channel={clickedChannel}*/}
|
|
511
|
-
{/* currentUsrId={currentUser.id}/>*/}
|
|
512
|
-
{/* </div>*/}
|
|
513
|
-
{/* <Messenger channel={clickedChannel} isRefetch={isRefetch}*/}
|
|
514
|
-
{/* currentUsrId={currentUser.id}/>*/}
|
|
515
|
-
{/* </IntlProvider>*/}
|
|
516
|
-
{/* </div>*/}
|
|
517
|
-
{/* : <h2 style={{display: 'flex', alignItems: 'center', margin: '0 auto', color: 'gray'}}>*/}
|
|
518
|
-
{/* Please select any channel*/}
|
|
519
|
-
{/* </h2>*/}
|
|
520
|
-
{/*}*/}
|
|
521
478
|
</div>
|
|
522
479
|
</div>
|
|
523
480
|
</div>
|
|
@@ -1,14 +1,12 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { Await } from '@remix-run/react';
|
|
3
|
-
import { Spinner } from '@admin-layout/chakra-ui';
|
|
4
|
-
import { Alert } from '@chakra-ui/react';
|
|
5
3
|
import {
|
|
6
4
|
useGetChannelsByUserQuery,
|
|
7
5
|
useGetAllChannelQuery,
|
|
8
6
|
useUsersToChatQuery,
|
|
9
7
|
useCurrentUserQuery,
|
|
10
8
|
useGetAllUsersQuery,
|
|
11
|
-
} from 'common/
|
|
9
|
+
} from 'common/graphql';
|
|
12
10
|
import { useSelector } from 'react-redux';
|
|
13
11
|
import Dashboard from './Dashboard';
|
|
14
12
|
|
|
@@ -25,10 +23,20 @@ const DashboardWithLoader = (props) => {
|
|
|
25
23
|
const allChannels = useGetAllChannelQuery({ variables: {}, fetchPolicy: 'cache-only' });
|
|
26
24
|
|
|
27
25
|
return (
|
|
28
|
-
<React.Suspense
|
|
26
|
+
<React.Suspense
|
|
27
|
+
fallback={
|
|
28
|
+
<div className="flex items-center justify-center w-full h-full">
|
|
29
|
+
<div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500"></div>
|
|
30
|
+
</div>
|
|
31
|
+
}
|
|
32
|
+
>
|
|
29
33
|
<Await
|
|
30
34
|
resolve={Promise.all([allUsers, usersToChat, currentUserRes, allChannels, getChannel])}
|
|
31
|
-
errorElement={
|
|
35
|
+
errorElement={
|
|
36
|
+
<div className="p-4 mb-4 text-sm text-red-700 bg-red-100 rounded-lg" role="alert">
|
|
37
|
+
Error loading Dashboard page!
|
|
38
|
+
</div>
|
|
39
|
+
}
|
|
32
40
|
>
|
|
33
41
|
<Dashboard data={[allUsers, usersToChat, currentUserRes, allChannels, getChannel]} {...props} />
|
|
34
42
|
</Await>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../../src/components/InboxMessage/InboxDetails/style.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,EA0BlB,GAAG,CAAC"}
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
const styleSheet = {
|
|
2
|
-
detailDrawerStyles: {
|
|
3
|
-
width: '100%',
|
|
4
|
-
'& .details': {
|
|
5
|
-
borderBottom: '1px solid #eaeaea',
|
|
6
|
-
height: '55px',
|
|
7
|
-
display: 'flex',
|
|
8
|
-
alignItems: 'center',
|
|
9
|
-
paddingLeft: '10px',
|
|
10
|
-
justifyContent: 'space-between',
|
|
11
|
-
'& h4': {
|
|
12
|
-
color: 'black',
|
|
13
|
-
fontSize: '1em',
|
|
14
|
-
fontWeight: 'bold'
|
|
15
|
-
},
|
|
16
|
-
'& .close-btn ': {
|
|
17
|
-
marginTop: '0',
|
|
18
|
-
'& svg': {
|
|
19
|
-
color: 'black'
|
|
20
|
-
}
|
|
21
|
-
},
|
|
22
|
-
'& .close-btn:hover ': {
|
|
23
|
-
background: '#eaeaea'
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
};export{styleSheet};//# sourceMappingURL=style.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/InboxMessage/InboxDetails/style.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAa,MAAA,UAAU,GAAG;AACtB,EAAA,kBAAA,EAAkB;AACd,IAAA,KAAA,EAAA,MAAa;AACb,IAAA,YAAA,EAAA;AACI,MAAA,YAAA,EAAA,mBAAiC;AACjC,MAAA,MAAA,EAAA,MAAQ;AACR,MAAA,OAAA,EAAA,MAAS;AACT,MAAA,UAAA,EAAA,QAAoB;AACpB,MAAA,WAAA,EAAA,MAAa;AACb,MAAA,cAAA,EAAA,eAA+B;AAC/B,MAAA,MAAA,EAAA;AACI,QAAA,KAAA,EAAA;AACA,QAAA,QAAA,EAAA,KAAA;AACA,QAAA,UAAA,EAAA;AACH,OAAA;AACD,MAAA,eAAA,EAAA;AACI,QAAA,SAAA,EAAA,GAAA;AACA,QAAA,OAAA,EAAA;AACI,UAAA,KAAA,EAAA;AACH;AACJ,OAAA;AACD,MAAA,qBAAA,EAAA;AACI,QAAA,UAAA,EAAA;AACH;AACJ;AACJ;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/InboxMessage/InboxSidebar/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,EAwDlB,GAAG,CAAC"}
|