cleanup events UI

Author: devksingh4

src/ui/pages/events/ViewEvents.page.tsx

@@ -1,4 +1,15 @@
-import { Text, Button, Table, Modal, Group, Transition, ButtonGroup, Title } from '@mantine/core';
+import {
+  Text,
+  Button,
+  Table,
+  Modal,
+  Group,
+  Transition,
+  ButtonGroup,
+  Title,
+  Badge,
+  Anchor,
+} from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { notifications } from '@mantine/notifications';
 import { IconPlus, IconTrash } from '@tabler/icons-react';
@@ -65,13 +76,21 @@ export const ViewEventsPage: React.FC = () => {
             style={{ ...styles, display: shouldShow ? 'table-row' : 'none' }}
             key={`${event.id}-tr`}
           >
-            <Table.Td>{event.title}</Table.Td>
+            <Table.Td>
+              {event.title} {event.featured ? <Badge color="green">Featured</Badge> : null}
+            </Table.Td>
             <Table.Td>{dayjs(event.start).format('MMM D YYYY hh:mm')}</Table.Td>
             <Table.Td>{event.end ? dayjs(event.end).format('MMM D YYYY hh:mm') : 'N/A'}</Table.Td>
-            <Table.Td>{event.location}</Table.Td>
-            <Table.Td>{event.description}</Table.Td>
+            <Table.Td>
+              {event.locationLink ? (
+                <Anchor target="_blank" size="sm" href={event.locationLink}>
+                  {event.location}
+                </Anchor>
+              ) : (
+                event.location
+              )}
+            </Table.Td>
             <Table.Td>{event.host}</Table.Td>
-            <Table.Td>{event.featured ? 'Yes' : 'No'}</Table.Td>
             <Table.Td>{capitalizeFirstLetter(event.repeats || 'Never')}</Table.Td>
             <Table.Td>
               <ButtonGroup>
@@ -98,7 +117,7 @@ export const ViewEventsPage: React.FC = () => {
   useEffect(() => {
     const getEvents = async () => {
       const response = await api.get('/api/v1/events');
-      const upcomingEvents = await api.get('/api/v1/events?upcomingOnly=true');
+      const upcomingEvents = await api.get(`/api/v1/events?upcomingOnly=true&ts=${Date.now()}`);
       const upcomingEventsSet = new Set(upcomingEvents.data.map((x: EventGetResponse) => x.id));
       const events = response.data;
       events.sort((a: EventGetResponse, b: EventGetResponse) => {
@@ -188,9 +207,7 @@ export const ViewEventsPage: React.FC = () => {
             <Table.Th>Start</Table.Th>
             <Table.Th>End</Table.Th>
             <Table.Th>Location</Table.Th>
-            <Table.Th>Description</Table.Th>
             <Table.Th>Host</Table.Th>
-            <Table.Th>Featured</Table.Th>
             <Table.Th>Repeats</Table.Th>
             <Table.Th>Actions</Table.Th>
           </Table.Tr>