Merge pull request #237 from TogetherCrew/fix/announcements-issues

fix issue on announcements
TogetherCrew · Jan 22, 2024 · 5bf5f04 · 5bf5f04
2 parents 9208266 + 1f98317
commit 5bf5f04
Show file tree

Hide file tree

Showing 10 changed files with 105 additions and 76 deletions.
diff --git a/src/components/announcements/TcAnnouncementsTable.tsx b/src/components/announcements/TcAnnouncementsTable.tsx
@@ -143,13 +143,18 @@ function TcAnnouncementsTable({
                     style={{
                       height: '8px',
                       width: '8px',
-                      background: announcement.draft ? '#3A9E2B' : '#FF9022',
+                      background: !announcement.draft ? '#3A9E2B' : '#FF9022',
                       borderRadius: '50%',
                       display: 'inline-block',
                       marginRight: '5px',
                     }}
                   />
-                  {truncateCenter(announcement.data[0].template, 20)}
+                  {announcement &&
+                  announcement.data &&
+                  announcement.data[0] &&
+                  announcement.data[0].template
+                    ? truncateCenter(announcement.data[0]?.template, 20)
+                    : ''}
                 </>
               }
               variant="subtitle2"
@@ -318,55 +323,66 @@ function TcAnnouncementsTable({
   const renderTableBody = () => {
     if (isLoading) {
       return (
-        <TableRow>
-          <TableCell
-            colSpan={6}
-            style={{ textAlign: 'center' }}
-            sx={{ borderBottom: 'none' }}
-            className="min-h-[70vh] pt-[25dvh]"
-            data-testid="loading-indicator"
-          >
-            <Loading />
-          </TableCell>
-        </TableRow>
-      );
-    }
-
-    return announcements.map((announcement, index) => (
-      <TableRow
-        key={announcement.id}
-        className={`my-5 ${index % 2 === 0 ? 'bg-gray-100' : ''}`}
-      >
-        {['title', 'channels', 'users', 'roles', 'scheduledAt', 'actions'].map(
-          (cellType, cellIndex, array) => (
+        <TableBody>
+          <TableRow>
             <TableCell
-              key={cellType}
-              sx={{
-                padding: '14px 16px',
-                borderBottom: index % 2 !== 0 ? '1px solid #f3f4f6' : 'none',
-                borderTop: index % 2 !== 0 ? '1px solid #f3f4f6' : 'none',
-                borderLeft:
-                  cellIndex === 0 && index % 2 !== 0
-                    ? '1px solid #f3f4f6'
-                    : 'none',
-                borderRight:
-                  cellIndex === array.length - 1 && index % 2 !== 0
-                    ? '1px solid #f3f4f6'
-                    : 'none',
-                borderTopLeftRadius: cellIndex === 0 ? '5px' : '0',
-                borderBottomLeftRadius: cellIndex === 0 ? '5px' : '0',
-                borderTopRightRadius:
-                  cellIndex === array.length - 1 ? '5px' : '0',
-                borderBottomRightRadius:
-                  cellIndex === array.length - 1 ? '5px' : '0',
-              }}
+              colSpan={6}
+              style={{ textAlign: 'center' }}
+              sx={{ borderBottom: 'none' }}
+              className="min-h-[70vh] pt-[25dvh]"
+              data-testid="loading-indicator"
             >
-              {renderTableCell(announcement, cellType)}
+              <Loading />
             </TableCell>
-          )
-        )}
-      </TableRow>
-    ));
+          </TableRow>
+        </TableBody>
+      );
+    }
+
+    return (
+      <TableBody>
+        {announcements.map((announcement, index) => (
+          <TableRow
+            key={announcement.id}
+            className={`my-5 ${index % 2 === 0 ? 'bg-gray-100' : ''}`}
+          >
+            {[
+              'title',
+              'channels',
+              'users',
+              'roles',
+              'scheduledAt',
+              'actions',
+            ].map((cellType, cellIndex, array) => (
+              <TableCell
+                key={cellType}
+                sx={{
+                  padding: '14px 16px',
+                  borderBottom: index % 2 !== 0 ? '1px solid #f3f4f6' : 'none',
+                  borderTop: index % 2 !== 0 ? '1px solid #f3f4f6' : 'none',
+                  borderLeft:
+                    cellIndex === 0 && index % 2 !== 0
+                      ? '1px solid #f3f4f6'
+                      : 'none',
+                  borderRight:
+                    cellIndex === array.length - 1 && index % 2 !== 0
+                      ? '1px solid #f3f4f6'
+                      : 'none',
+                  borderTopLeftRadius: cellIndex === 0 ? '5px' : '0',
+                  borderBottomLeftRadius: cellIndex === 0 ? '5px' : '0',
+                  borderTopRightRadius:
+                    cellIndex === array.length - 1 ? '5px' : '0',
+                  borderBottomRightRadius:
+                    cellIndex === array.length - 1 ? '5px' : '0',
+                }}
+              >
+                {renderTableCell(announcement, cellType)}
+              </TableCell>
+            ))}
+          </TableRow>
+        ))}
+      </TableBody>
+    );
   };
 
   return (
@@ -452,7 +468,7 @@ function TcAnnouncementsTable({
             ></TableCell>
           </TableRow>
         </TableHead>
-        <TableBody> {renderTableBody()}</TableBody>
+        {renderTableBody()}
       </Table>
       <TcDialog
         sx={{

diff --git a/src/components/announcements/create/privateMessaageContainer/TcRolesAutoComplete.tsx b/src/components/announcements/create/privateMessaageContainer/TcRolesAutoComplete.tsx
@@ -1,10 +1,10 @@
-import { Chip } from '@mui/material';
 import React, { useEffect, useState } from 'react';
-import TcAutocomplete from '../../../shared/TcAutocomplete';
+import { useToken } from '../../../../context/TokenContext';
 import useAppStore from '../../../../store/useStore';
 import { FetchedData, IRoles } from '../../../../utils/interfaces';
-import { useToken } from '../../../../context/TokenContext';
-import { debounce, hexToRGBA, isDarkColor } from '../../../../helpers/helper';
+import { debounce } from '../../../../helpers/helper';
+import TcAutocomplete from '../../../shared/TcAutocomplete';
+import { Chip } from '@mui/material';
 
 interface ITcRolesAutoCompleteProps {
   isEdit?: boolean;
@@ -29,7 +29,7 @@ function TcRolesAutoComplete({
   const [selectedRoles, setSelectedRoles] = useState<IRoles[]>([]);
 
   const [fetchedRoles, setFetchedRoles] = useState<FetchedData>({
-    limit: 8,
+    limit: 100,
     page: 1,
     results: [],
     totalPages: 0,
@@ -92,16 +92,16 @@ function TcRolesAutoComplete({
     if (inputValue === '') {
       setFilteredRolesByName('');
       setFetchedRoles({
-        limit: 8,
+        limit: 100,
         page: 1,
         results: [],
         totalPages: 0,
         totalResults: 0,
       });
 
-      debouncedFetchDiscordRoles(platformId, 1, 8);
+      debouncedFetchDiscordRoles(platformId, 1, 100);
     } else {
-      debouncedFetchDiscordRoles(platformId, 1, 8, inputValue);
+      debouncedFetchDiscordRoles(platformId, 1, 100, inputValue);
     }
   };
 
@@ -153,7 +153,13 @@ function TcRolesAutoComplete({
       value={selectedRoles}
       onChange={handleChange}
       onInputChange={handleSearchChange}
+      isOptionEqualToValue={(option, value) => option.roleId === value.roleId}
       disableCloseOnSelect
+      renderOption={(props, option) => (
+        <li {...props} key={option.roleId}>
+          {option.name}
+        </li>
+      )}
       renderTags={(value, getTagProps) =>
         value.map((option, index) => (
           <Chip

diff --git a/src/components/announcements/create/privateMessaageContainer/TcUsersAutoComplete.tsx b/src/components/announcements/create/privateMessaageContainer/TcUsersAutoComplete.tsx
@@ -29,13 +29,13 @@ function TcUsersAutoComplete({
   const [selectedUsers, setSelectedUsers] = useState<IUser[]>([]);
 
   const [fetchedUsers, setFetchedUsers] = useState<FetchedData>({
-    limit: 8,
+    limit: 100,
     page: 1,
     results: [],
     totalPages: 0,
     totalResults: 0,
   });
-  const [filteredRolesByName, setFilteredRolesByName] = useState<string>('');
+  const [filteredUsersByName, setFilteredUsersByName] = useState<string>('');
   const [isInitialized, setIsInitialized] = useState<boolean>(false);
 
   const fetchDiscordUsers = async (
@@ -54,7 +54,7 @@ function TcUsersAutoComplete({
       });
 
       if (ngu) {
-        setFilteredRolesByName(ngu);
+        setFilteredUsersByName(ngu);
         setFetchedUsers(fetchedUsers);
       } else {
         setFetchedUsers((prevData: { results: any }) => {
@@ -90,18 +90,18 @@ function TcUsersAutoComplete({
     if (!platformId) return;
 
     if (inputValue === '') {
-      setFilteredRolesByName('');
+      setFilteredUsersByName('');
       setFetchedUsers({
-        limit: 8,
+        limit: 100,
         page: 1,
         results: [],
         totalPages: 0,
         totalResults: 0,
       });
 
-      debouncedFetchDiscordUsers(platformId, 1, 8);
+      debouncedFetchDiscordUsers(platformId, 1, 100);
     } else {
-      debouncedFetchDiscordUsers(platformId, 1, 8, inputValue);
+      debouncedFetchDiscordUsers(platformId, 1, 100, inputValue);
     }
   };
 
@@ -153,7 +153,15 @@ function TcUsersAutoComplete({
       value={selectedUsers}
       onChange={handleChange}
       onInputChange={handleSearchChange}
+      isOptionEqualToValue={(option, value) =>
+        option.discordId === value.discordId
+      }
       disableCloseOnSelect
+      renderOption={(props, option) => (
+        <li {...props} key={option.discordId}>
+          {option.ngu}
+        </li>
+      )}
       renderTags={(value, getTagProps) =>
         value.map((option, index) => (
           <Chip

diff --git a/src/components/announcements/create/scheduleAnnouncement/TcScheduleAnnouncement.tsx b/src/components/announcements/create/scheduleAnnouncement/TcScheduleAnnouncement.tsx
@@ -74,13 +74,14 @@ function TcScheduleAnnouncement({
   }, [selectedDate, selectedTime]);
 
   useEffect(() => {
-    if (isEdit) {
+    if (isEdit && preSelectedTime) {
       const date = moment(preSelectedTime);
+
       setSelectedDate(date.toDate());
       setSelectedTime(date.toDate());
       setDateTimeDisplay(date.format('D MMMM YYYY @ h A'));
     }
-  }, [isEdit]);
+  }, [isEdit, preSelectedTime]);
 
   return (
     <div className="space-y-3">

diff --git a/src/components/pages/pageIndex/HeatmapChart.tsx b/src/components/pages/pageIndex/HeatmapChart.tsx
@@ -58,8 +58,6 @@ const HeatmapChart = () => {
   const fetchData = async () => {
     setLoading(true);
     try {
-      console.log({ selectedSubChannels });
-
       if (platformId) {
         const data = await fetchHeatmapData(
           platformId,

diff --git a/src/pages/announcements/edit-announcements/index.tsx b/src/pages/announcements/edit-announcements/index.tsx
@@ -113,7 +113,6 @@ function Index() {
             (channel) => channel.channelId
           );
         }
-        console.log({ channelIds });
 
         await refreshData(platformId, 'channel', channelIds, undefined, false);
       }
@@ -127,7 +126,9 @@ function Index() {
     if (!id) return;
     const fetchAnnouncement = async () => {
       const data = await retrieveAnnouncementById(id);
+
       setFetchedAnnouncements(data);
+      setScheduledAt(data.scheduledAt);
     };
 
     fetchAnnouncement();
@@ -155,9 +156,10 @@ function Index() {
     try {
       setLoading(true);
       const data = await patchExistingAnnouncement(id, announcementsPayload);
+
       if (data) {
         showMessage('Announcement updated successfully', 'success');
-        router.push('/announcements');
+        location.replace('/announcements');
       }
     } catch (error) {
       showMessage('Failed to create announcement', 'error');

diff --git a/src/store/slices/announcementsSlice.ts b/src/store/slices/announcementsSlice.ts
@@ -10,7 +10,6 @@ const createAnnouncementsSlice: StateCreator<IAnnouncements> = (set, get) => ({
     page,
     limit,
     sortBy,
-    ngu,
     timeZone,
     startDate,
     endDate,
@@ -24,7 +23,6 @@ const createAnnouncementsSlice: StateCreator<IAnnouncements> = (set, get) => ({
         ...(timeZone ? { timeZone } : {}),
         ...(startDate ? { startDate } : {}),
         ...(endDate ? { endDate } : {}),
-        ...(ngu ? { name } : {}),
       };
 
       const { data } = await axiosInstance.get(
@@ -63,8 +61,6 @@ const createAnnouncementsSlice: StateCreator<IAnnouncements> = (set, get) => ({
     announcementPayload: CreateAnnouncementsPayload
   ) => {
     try {
-      console.log({ id });
-
       const { data } = await axiosInstance.patch(
         `/announcements/${id}`,
         announcementPayload

diff --git a/src/store/slices/platformSlice.ts b/src/store/slices/platformSlice.ts
@@ -72,6 +72,7 @@ const createPlatfromSlice: StateCreator<IPlatfrom> = (set, get) => ({
     platformId,
     property = 'channel',
     name,
+    ngu,
     sortBy,
     page,
     limit,
@@ -89,6 +90,8 @@ const createPlatfromSlice: StateCreator<IPlatfrom> = (set, get) => ({
 
       if (name) params.append('name', name);
 
+      if (ngu) params.append('ngu', ngu);
+
       if (page !== undefined) {
         params.append('page', page.toString());
       }

diff --git a/src/store/types/IAnnouncements.ts b/src/store/types/IAnnouncements.ts
@@ -2,7 +2,6 @@ export interface IRetrieveAnnouncementsProps {
   page: number;
   limit: number;
   sortBy?: string;
-  ngu?: string;
   community: string;
   startDate?: string;
   endDate?: string;
@@ -14,7 +13,6 @@ export default interface IAnnouncements {
     page,
     limit,
     sortBy,
-    ngu,
     community,
   }: IRetrieveAnnouncementsProps) => void;
 }
diff --git a/src/store/types/IPlatform.ts b/src/store/types/IPlatform.ts
@@ -13,6 +13,7 @@ export interface IRetrivePlatformRolesOrChannels {
   limit?: number;
   sortBy?: string;
   name?: string;
+  ngu?: string;
   platformId: string;
   property: 'channel' | 'role' | 'guildMember';
 }