@messenger-box/platform-browser 10.0.3-alpha.7 → 10.0.3-alpha.72

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.
Files changed (138) hide show
  1. package/CHANGELOG.md +96 -0
  2. package/lib/components/InboxMessage/InboxDetails/index.d.ts +6 -1
  3. package/lib/components/InboxMessage/InboxDetails/index.d.ts.map +1 -1
  4. package/lib/components/InboxMessage/InboxDetails/index.js +10 -11
  5. package/lib/components/InboxMessage/InboxDetails/index.js.map +1 -1
  6. package/lib/components/InboxMessage/InboxSidebar/index.d.ts.map +1 -1
  7. package/lib/components/InboxMessage/InboxSidebar/index.js +23 -32
  8. package/lib/components/InboxMessage/InboxSidebar/index.js.map +1 -1
  9. package/lib/components/InboxMessage/Messages/index.d.ts.map +1 -1
  10. package/lib/components/InboxMessage/Messages/index.js +42 -81
  11. package/lib/components/InboxMessage/Messages/index.js.map +1 -1
  12. package/lib/components/InboxMessage/MessagesList/index.d.ts.map +1 -1
  13. package/lib/components/InboxMessage/MessagesList/index.js +53 -74
  14. package/lib/components/InboxMessage/MessagesList/index.js.map +1 -1
  15. package/lib/components/InboxMessage/Popover/index.d.ts +5 -1
  16. package/lib/components/InboxMessage/Popover/index.d.ts.map +1 -1
  17. package/lib/components/InboxMessage/Popover/index.js +8 -35
  18. package/lib/components/InboxMessage/Popover/index.js.map +1 -1
  19. package/lib/components/InboxMessage/UserModalContent/index.d.ts.map +1 -1
  20. package/lib/components/InboxMessage/UserModalContent/index.js +50 -47
  21. package/lib/components/InboxMessage/UserModalContent/index.js.map +1 -1
  22. package/lib/components/InboxMessage/index.d.ts.map +1 -1
  23. package/lib/components/InboxMessage/index.js +38 -70
  24. package/lib/components/InboxMessage/index.js.map +1 -1
  25. package/lib/components/dashboard/menu_header.d.ts.map +1 -1
  26. package/lib/components/dashboard/menu_header.js +38 -24
  27. package/lib/components/dashboard/menu_header.js.map +1 -1
  28. package/lib/components/dashboard/modals/direct_modal.d.ts +10 -8
  29. package/lib/components/dashboard/modals/direct_modal.d.ts.map +1 -1
  30. package/lib/components/dashboard/modals/direct_modal.js +59 -39
  31. package/lib/components/dashboard/modals/direct_modal.js.map +1 -1
  32. package/lib/components/dashboard/modals.d.ts +18 -6
  33. package/lib/components/dashboard/modals.d.ts.map +1 -1
  34. package/lib/components/dashboard/modals.js +60 -101
  35. package/lib/components/dashboard/modals.js.map +1 -1
  36. package/lib/components/messenger/avatar/index.d.ts.map +1 -1
  37. package/lib/components/messenger/index.d.ts.map +1 -1
  38. package/lib/components/messenger/index.js +45 -82
  39. package/lib/components/messenger/index.js.map +1 -1
  40. package/lib/components/messenger/messagesList/index.d.ts.map +1 -1
  41. package/lib/components/messenger/messagesList/index.js +174 -454
  42. package/lib/components/messenger/messagesList/index.js.map +1 -1
  43. package/lib/components/messenger/messagesList/messageBox.d.ts +0 -1
  44. package/lib/components/messenger/messagesList/messageBox.d.ts.map +1 -1
  45. package/lib/components/messenger/more_action/index.d.ts.map +1 -1
  46. package/lib/components/messenger/postMessage/postMessage.d.ts +7 -2
  47. package/lib/components/messenger/postMessage/postMessage.d.ts.map +1 -1
  48. package/lib/components/messenger/sidebarThreadList/index.d.ts.map +1 -1
  49. package/lib/components/messenger/threadSidebar/index.d.ts.map +1 -1
  50. package/lib/components/messenger/types/message.d.ts +11 -11
  51. package/lib/components/messenger/types/message.d.ts.map +1 -1
  52. package/lib/components/post/create_post/create_post.d.ts +10 -1
  53. package/lib/components/post/create_post/create_post.d.ts.map +1 -1
  54. package/lib/components/post/index.d.ts +5 -3
  55. package/lib/components/post/index.d.ts.map +1 -1
  56. package/lib/components/post/index.js +63 -97
  57. package/lib/components/post/index.js.map +1 -1
  58. package/lib/components/post/post_header/post_header_custom_status.d.ts.map +1 -1
  59. package/lib/compute.d.ts.map +1 -1
  60. package/lib/compute.js +1 -1
  61. package/lib/compute.js.map +1 -1
  62. package/lib/containers/Dashboard.d.ts.map +1 -1
  63. package/lib/containers/Dashboard.js +110 -124
  64. package/lib/containers/Dashboard.js.map +1 -1
  65. package/lib/containers/DashboardWithLoader.d.ts.map +1 -1
  66. package/lib/containers/DashboardWithLoader.js +10 -3
  67. package/lib/containers/DashboardWithLoader.js.map +1 -1
  68. package/package.json +5 -5
  69. package/src/components/InboxMessage/InboxDetails/index.tsx +13 -15
  70. package/src/components/InboxMessage/InboxSidebar/index.tsx +23 -33
  71. package/src/components/InboxMessage/Messages/index.tsx +58 -97
  72. package/src/components/InboxMessage/MessagesList/index.tsx +71 -82
  73. package/src/components/InboxMessage/Popover/index.tsx +14 -38
  74. package/src/components/InboxMessage/UserModalContent/index.tsx +41 -44
  75. package/src/components/InboxMessage/index.tsx +53 -68
  76. package/src/components/dashboard/menu_header.tsx +52 -45
  77. package/src/components/dashboard/modals/direct_modal.tsx +73 -40
  78. package/src/components/dashboard/modals.tsx +114 -105
  79. package/src/components/messenger/avatar/index.tsx +27 -13
  80. package/src/components/messenger/index.tsx +126 -161
  81. package/src/components/messenger/messagesList/index.tsx +288 -572
  82. package/src/components/messenger/messagesList/messageBox.tsx +45 -34
  83. package/src/components/messenger/more_action/index.tsx +16 -10
  84. package/src/components/messenger/postMessage/postMessage.tsx +28 -16
  85. package/src/components/messenger/sidebarThreadList/index.tsx +52 -178
  86. package/src/components/messenger/threadSidebar/index.tsx +88 -75
  87. package/src/components/messenger/types/message.ts +12 -11
  88. package/src/components/post/channel_view/channel_view.tsx +2 -2
  89. package/src/components/post/create_post/create_post.tsx +104 -195
  90. package/src/components/post/index.tsx +78 -99
  91. package/src/components/post/post_header/post_header_custom_status.tsx +7 -6
  92. package/src/components/post/post_header/style.ts +51 -51
  93. package/src/compute.ts +8 -8
  94. package/src/containers/Dashboard.tsx +170 -213
  95. package/src/containers/DashboardWithLoader.tsx +13 -5
  96. package/lib/components/InboxMessage/InboxDetails/style.d.ts +0 -2
  97. package/lib/components/InboxMessage/InboxDetails/style.d.ts.map +0 -1
  98. package/lib/components/InboxMessage/InboxDetails/style.js +0 -27
  99. package/lib/components/InboxMessage/InboxDetails/style.js.map +0 -1
  100. package/lib/components/InboxMessage/InboxSidebar/styles.d.ts +0 -2
  101. package/lib/components/InboxMessage/InboxSidebar/styles.d.ts.map +0 -1
  102. package/lib/components/InboxMessage/InboxSidebar/styles.js +0 -57
  103. package/lib/components/InboxMessage/InboxSidebar/styles.js.map +0 -1
  104. package/lib/components/InboxMessage/Messages/styles.d.ts +0 -81
  105. package/lib/components/InboxMessage/Messages/styles.d.ts.map +0 -1
  106. package/lib/components/InboxMessage/Messages/styles.js +0 -85
  107. package/lib/components/InboxMessage/Messages/styles.js.map +0 -1
  108. package/lib/components/InboxMessage/Popover/style.d.ts +0 -28
  109. package/lib/components/InboxMessage/Popover/style.d.ts.map +0 -1
  110. package/lib/components/InboxMessage/Popover/style.js +0 -27
  111. package/lib/components/InboxMessage/Popover/style.js.map +0 -1
  112. package/lib/components/InboxMessage/UserModalContent/style.d.ts +0 -2
  113. package/lib/components/InboxMessage/UserModalContent/style.d.ts.map +0 -1
  114. package/lib/components/InboxMessage/UserModalContent/style.js +0 -98
  115. package/lib/components/InboxMessage/UserModalContent/style.js.map +0 -1
  116. package/lib/components/InboxMessage/style.js +0 -189
  117. package/lib/components/InboxMessage/style.js.map +0 -1
  118. package/lib/components/messenger/avatar/style.d.ts +0 -2
  119. package/lib/components/messenger/avatar/style.d.ts.map +0 -1
  120. package/lib/components/messenger/messagesList/style.js +0 -446
  121. package/lib/components/messenger/messagesList/style.js.map +0 -1
  122. package/lib/components/messenger/more_action/index.js +0 -48
  123. package/lib/components/messenger/more_action/index.js.map +0 -1
  124. package/lib/components/messenger/more_action/style.d.ts +0 -2
  125. package/lib/components/messenger/more_action/style.d.ts.map +0 -1
  126. package/lib/components/messenger/more_action/style.js +0 -45
  127. package/lib/components/messenger/more_action/style.js.map +0 -1
  128. package/lib/components/post/style.js +0 -20101
  129. package/lib/components/post/style.js.map +0 -1
  130. package/lib/style.js +0 -400
  131. package/lib/style.js.map +0 -1
  132. package/src/components/InboxMessage/InboxDetails/style.ts +0 -27
  133. package/src/components/InboxMessage/InboxSidebar/styles.ts +0 -57
  134. package/src/components/InboxMessage/Messages/styles.ts +0 -85
  135. package/src/components/InboxMessage/Popover/style.ts +0 -27
  136. package/src/components/InboxMessage/UserModalContent/style.ts +0 -98
  137. package/src/components/messenger/avatar/style.ts +0 -86
  138. 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/lib/generated/generated.js';
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 { css } from '@emotion/css';
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 [currentUser, setCurrentUser] = useState<any>();
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 [classes, setClasses] = useState({
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: currentUserRes.data.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: currentUserRes.data.currentUser,
104
+ currentUser: currentUser,
116
105
  },
117
106
  },
118
107
  );
119
108
  },
120
109
  });
121
110
 
122
- useEffect(() => {
123
- if (!currentUserRes.loading) {
124
- setCurrentUser(currentUserRes.data.currentUser);
125
- }
126
- }, [currentUserRes.data, currentUserRes.loading]);
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
- const handleJoin = (channelId) => {
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
- content: t('messenger_box_browser.username_joined_the_channel', { username: currentUser.username }),
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
- // refetch().then((value => {
147
- // setChannels(value.data.channelsByUser)
148
- // setChannelInput({})
149
- // }))
150
- // allChannels.refetch()
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 style={{ cursor: 'pointer' }}>
195
- <Comment
196
- className="cmt_cls"
197
- author={'@' + usr.username}
198
- avatar={
199
- <Avatar
200
- style={{
201
- backgroundColor: `#${Math.floor(Math.random() * 16777215).toString(16)}`,
202
- }}
203
- >
204
- {usr.username
205
- .match(/\b(\w)/g)
206
- .join('')
207
- .toUpperCase()}
208
- </Avatar>
209
- }
210
- content={usr.email}
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
- const oldClasses = classes;
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={css(styleSheet.customStyle)}>
341
- <div className={classes.root_div}>
329
+ <div className="min-h-screen bg-gray-50">
330
+ <div className={`flex h-screen ${isDrawerOpen ? 'drawer-open' : ''}`}>
342
331
  <DirectModal
343
- handleClose={handleClose}
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="dashboard_window"
348
+ className="flex-1 flex overflow-hidden"
360
349
  onClick={() => {
361
- if (classes.root_div.split(' ').length > 1) {
350
+ if (isDrawerOpen) {
362
351
  handleClass();
363
352
  }
364
353
  }}
365
354
  >
366
- <div className={classes.left_bar}>
367
- <div className="nav-pills__container">
368
- <ul>
369
- <li id="li1" className="sidebar-section__header">
370
- <h4>
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
- <button
374
- className="add-channel-btn"
375
- onClick={() => handleShow('publicChannel', 'Public Channel')}
376
- >
377
- <span>+</span>
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
- state={{ channel: chl, currentUser: currentUserRes.data.currentUser }}
390
- >
391
- <li className="">
392
- <a className="sidebar-item" onClick={() => handleChannelClick(chl)}>
393
- <span className="icon icon__globe">
394
- <BsGlobe2 />
395
- </span>
396
- <span className="sidebar-item__name">
397
- <span>{chl.title}</span>
398
- </span>
399
- </a>
400
- </li>
401
- </Link>
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
- id="sidebarPublicChannelsMore"
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
- <span>{t('messenger_box_browser.more')}</span>
402
+ {t('messenger_box_browser.more')}
416
403
  </button>
417
- </li>
418
- </ul>
419
- <ul>
420
- <li className="sidebar-section__header">
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
- <button className="add-channel-btn">
425
- <span>+</span>
426
- </button>
427
- </li>
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
- <button className="add-channel-btn" onClick={() => handleShow('directChannel')}>
435
- <span>+</span>
436
- </button>
437
- </li>
438
- {directChannels.map((cnl) => {
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] !== currentUser.id
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
- state={{
451
- channel: cnl,
452
- currentUser: currentUserRes.data.currentUser,
453
- }}
454
- >
455
- {/*{cnl.displayName === 'surveybot' ?*/}
456
- {/* <li className="active">*/}
457
- {/* <a className="sidebar-item has-close"*/}
458
- {/* onClick={() => handleChannelClick(cnl)}>*/}
459
- {/* <span className="icon icon__globe"><FaRobot/></span>*/}
460
- {/* <span*/}
461
- {/* className="sidebar-item__name"><span>surveybot</span></span>*/}
462
- {/* </a>*/}
463
- {/* </li> :*/}
464
- <li className="active">
465
- <a
466
- className="sidebar-item has-close"
467
- onClick={() => handleChannelClick(cnl)}
468
- >
469
- {cnl.displayName.split(',').length > 1 ? (
470
- <span className="num_style">
471
- {cnl.displayName.split(',').length}
472
- </span>
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
- <span className="sidebar-item__name">
479
- {/*<span>*/}
480
- {cnl.displayName.split('_').length === 2
481
- ? cnl.displayName.split('_')[0].split('-')[0] !==
482
- currentUser.id
483
- ? cnl.displayName.split('_')[0].split('-')[1]
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="route_view">
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} children={<route.component />} />
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/lib/generated/generated.js';
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 fallback={<Spinner></Spinner>}>
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={<Alert>Error loading Dashboard page!</Alert>}
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,2 +0,0 @@
1
- export declare const styleSheet: any;
2
- //# sourceMappingURL=style.d.ts.map
@@ -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,2 +0,0 @@
1
- export declare const styleSheet: any;
2
- //# sourceMappingURL=styles.d.ts.map
@@ -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"}