Skip to content

Commit

Permalink
Merge pull request #251 from TogetherCrew/feat/last-changes-announcement
Browse files Browse the repository at this point in the history 
update announcement feature
  • Loading branch information
@mehdi-torabiv
mehdi-torabiv authored Feb 9, 2024
2 parents 52c2bd8 + 4a9817c commit 1d127f6
Show file tree
Hide file tree
Showing 10 changed files with 249 additions and 139 deletions.
179 changes: 94 additions & 85 deletions src/components/announcements/TcAnnouncementsTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import { useSnackbar } from '../../context/SnackbarContext';
import { MdModeEdit, MdDelete } from 'react-icons/md';
import Loading from '../global/Loading';
import { truncateCenter } from '../../helpers/helper';
import moment from 'moment';

interface Channel {
channelId: string;
Expand Down Expand Up @@ -61,12 +62,14 @@ interface Announcement {
interface AnnouncementsTableProps {
announcements: Announcement[];
isLoading: boolean;
selectedZone: string;
handleRefreshList: () => void;
}

function TcAnnouncementsTable({
announcements,
isLoading,
selectedZone,
handleRefreshList,
}: AnnouncementsTableProps) {
const { deleteAnnouncements } = useAppStore();
Expand All @@ -78,6 +81,13 @@ function TcAnnouncementsTable({
string | null
>(null);

const formatDateBasedOnTimezone = (
date: string | number | Date,
timezone: string
) => {
return moment(date).tz(timezone).format('DD/MM/YYYY, h:mm:ss a');
};

const handleClick = (
event: React.MouseEvent<HTMLButtonElement>,
id: string
Expand Down Expand Up @@ -228,57 +238,60 @@ function TcAnnouncementsTable({
/>
</div>
);
case 'users':
return (
<div className="flex flex-row overflow-hidden whitespace-nowrap">
<TcText
text={announcement.data
.map((item: { options: { users: any } }) => {
const users = item.options.users;
if (users && users.length > 0) {
const displayedUsers = users
.slice(0, 2)
.map((user: { ngu: any }) => `@${user.ngu}`)
.join(', ');
const moreUsersIndicator = users.length > 2 ? '...' : '';
return `${displayedUsers}${moreUsersIndicator}`;
}
return '';
})
.filter((text: string) => text !== '')
.join(', ')}
variant="subtitle2"
/>
</div>
);
case 'roles':
return (
<div className="flex flex-row overflow-hidden whitespace-nowrap">
<TcText
text={announcement.data
.map((item: { options: { roles: any } }) => {
const roles = item.options.roles;
if (roles && roles.length > 0) {
const displayedRoles = roles
.slice(0, 2)
.map((role: { name: any }) => role.name)
.join(', ');
const moreRolesIndicator = roles.length > 2 ? '...' : '';
return `${displayedRoles}${moreRolesIndicator}`;
}
return '';
})
.filter((text: string) => text !== '')
.join(', ')}
variant="subtitle2"
/>
</div>
);
// case 'users':
// return (
// <div className="flex flex-row overflow-hidden whitespace-nowrap">
// <TcText
// text={announcement.data
// .map((item: { options: { users: any } }) => {
// const users = item.options.users;
// if (users && users.length > 0) {
// const displayedUsers = users
// .slice(0, 2)
// .map((user: { ngu: any }) => `@${user.ngu}`)
// .join(', ');
// const moreUsersIndicator = users.length > 2 ? '...' : '';
// return `${displayedUsers}${moreUsersIndicator}`;
// }
// return '';
// })
// .filter((text: string) => text !== '')
// .join(', ')}
// variant="subtitle2"
// />
// </div>
// );
// case 'roles':
// return (
// <div className="flex flex-row overflow-hidden whitespace-nowrap">
// <TcText
// text={announcement.data
// .map((item: { options: { roles: any } }) => {
// const roles = item.options.roles;
// if (roles && roles.length > 0) {
// const displayedRoles = roles
// .slice(0, 2)
// .map((role: { name: any }) => role.name)
// .join(', ');
// const moreRolesIndicator = roles.length > 2 ? '...' : '';
// return `${displayedRoles}${moreRolesIndicator}`;
// }
// return '';
// })
// .filter((text: string) => text !== '')
// .join(', ')}
// variant="subtitle2"
// />
// </div>
// );
case 'scheduledAt':
return (
<div className="flex flex-row overflow-hidden whitespace-nowrap">
<TcText
text={new Date(announcement.scheduledAt).toLocaleString()}
text={formatDateBasedOnTimezone(
announcement.scheduledAt,
selectedZone
)}
variant="subtitle2"
/>
</div>
Expand Down Expand Up @@ -346,39 +359,35 @@ function TcAnnouncementsTable({
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>
))}
{['title', 'channels', '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>
Expand All @@ -394,7 +403,7 @@ function TcAnnouncementsTable({
sx={{ borderBottom: 'none' }}
className="uppercase text-gray-400"
style={{
width: '20%',
width: '60%',
borderBottom: 'none',
whiteSpace: 'nowrap',
padding: '0 1rem',
Expand All @@ -416,7 +425,7 @@ function TcAnnouncementsTable({
>
<TcText text="Channels" variant="body2" />
</TableCell>
<TableCell
{/* <TableCell
sx={{ borderBottom: 'none' }}
className="uppercase text-gray-400"
style={{
Expand All @@ -428,8 +437,8 @@ function TcAnnouncementsTable({
align="left"
>
<TcText text="Handle" variant="body2" />
</TableCell>
<TableCell
</TableCell> */}
{/* <TableCell
sx={{ borderBottom: 'none' }}
className="uppercase text-gray-400"
style={{
Expand All @@ -441,7 +450,7 @@ function TcAnnouncementsTable({
align="left"
>
<TcText text="Role" variant="body2" />
</TableCell>
</TableCell> */}
<TableCell
sx={{ borderBottom: 'none' }}
className="uppercase text-gray-400"
Expand Down
4 changes: 2 additions & 2 deletions src/components/announcements/TcConfirmSchaduledAnnouncementsDialog.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import TcConfirmSchaduledAnnouncementsDialog from './TcConfirmSchaduledAnnouncem
const mockHandleCreateAnnouncements = jest.fn();

const defaultProps = {
buttonLabel: 'Schedule Announcement',
buttonLabel: 'Select Date for Announcement',
selectedChannels: [{ id: '1', label: 'General' }],
schaduledDate: '2024-01-20T12:00:00',
isDisabled: false,
Expand All @@ -17,7 +17,7 @@ test('renders the dialog with button and calls handleCreateAnnouncements when co
<TcConfirmSchaduledAnnouncementsDialog {...defaultProps} />
);

const button = getByText('Schedule Announcement');
const button = getByText('Select Date for Announcement');
expect(button).toBeInTheDocument();

fireEvent.click(button);
Expand Down
14 changes: 2 additions & 12 deletions src/components/announcements/create/publicMessageContainer/TcPublicMessageContainer.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,23 +38,13 @@ describe('TcPublicMessageContainer', () => {
expect(screen.getByText(/Public Message/i)).toBeInTheDocument();
});

it('renders the "Send message to:" text', () => {
expect(screen.getByText(/Send message to:/i)).toBeInTheDocument();
});

it('renders the message about bot delivery', () => {
it('renders the message about bot distribute', () => {
const message =
/Our bot will deliver the announcement across chosen channels with the necessary access to share the specified message\./i;
/Our bot will distribute the announcement through selected channels with the required access to share the designated message./i;
expect(screen.getByText(message)).toBeInTheDocument();
});

it('renders the "Write message here:" text', () => {
expect(screen.getByText(/Write message here:/i)).toBeInTheDocument();
});

it('renders the auto-generated safety message prompt', () => {
const message =
/If you don’t write a custom message then this auto-generated safety message wlll be sent out/i;
expect(screen.getByText(message)).toBeInTheDocument();
});
});
15 changes: 7 additions & 8 deletions src/components/announcements/create/publicMessageContainer/TcPublicMessageContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,9 +67,7 @@ function TcPublicMessageContainer({
setSelectedChannels(flattenChannels(channels));
}, [channels, selectedSubChannels]);

const [message, setMessage] = useState<string>(
`This message was sent to you because you’re part of ${community?.name}. To verify the legitimacy of this message, see the official announcement here ⁠👥together-crew⁠ and verify the bot ID If you don’t want to receive any more private message from ${community?.name}, please adjust your settings here: https://app.togethercrew.com/community-settings/`
);
const [message, setMessage] = useState<string>('');

const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setMessage(event.target.value);
Expand All @@ -94,6 +92,7 @@ function TcPublicMessageContainer({
label: channel.name,
})
);

setSelectedChannels(formattedChannels);
setMessage(publicAnnouncementsData.template);
}
Expand All @@ -103,7 +102,7 @@ function TcPublicMessageContainer({
return (
<div className="space-y-3">
<div className="flex flex-col md:flex-row md:justify-between md:items-center space-y-1 md:space-y-0">
<div className="flex flex-col md:flex-row md:items-center md:space-x-3">
<div className="flex flex-row items-center space-x-3">
<TcIconContainer>
<MdAnnouncement size={20} />
</TcIconContainer>
Expand All @@ -116,14 +115,14 @@ function TcPublicMessageContainer({
/>
</div>
<div className="space-y-1.5">
<div>
{/* <div>
<TcText text="Send message to:" variant="subtitle1" />
<TcText
text="Our bot will deliver the announcement across chosen channels with the necessary access to share the specified message."
variant="caption"
className="text-gray-400"
/>
</div>
</div> */}
<FormControl variant="filled" fullWidth size="medium">
<InputLabel id="select-standard-label">Select Channels</InputLabel>
<TcSelect
Expand All @@ -146,10 +145,10 @@ function TcPublicMessageContainer({
</div>
</TcSelect>
</FormControl>
<div className="flex items-center space-x-1">
<div className="flex flex-col space-x-1">
<TcText text="Write message here:" variant="subtitle1" />
<TcText
text="If you don’t write a custom message then this auto-generated safety message wlll be sent out"
text="Our bot will distribute the announcement through selected channels with the required access to share the designated message."
variant="caption"
className="text-gray-400"
/>
Expand Down
Loading

0 comments on commit 1d127f6

Please sign in to comment.