node-modules/app/announcements/page.tsx at cf0338dc28bea0a57858a9dd5f031b895af5d00a · nkss-dev/node-modules · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
import api from '@/utils/api-actions';
import formatDate from '@/utils/format-date';

export const metadata = {
  title: 'Announcements',
  description:
    'A dashboard for all event notifications and academic announcements',
};

const groupAnnouncementsByDate = (announcements: AcademicAnnouncement[]) => {
  const groupedAnnouncements = new Map<string, AcademicAnnouncement[]>();

  for (const announcement of announcements) {
    const date = new Date(announcement.date_of_creation);
    const dateKey = formatDate(date);
    const announcementsForDate = groupedAnnouncements.get(dateKey) ?? [];
    announcementsForDate.push(announcement);
    groupedAnnouncements.set(dateKey, announcementsForDate);
  }

  return groupedAnnouncements;
};

export default async function AnnouncementsPage() {
  const announcements: Array<AcademicAnnouncement> = await api.GET(
    '/announcements'
  );
  const groupedAnnouncements = groupAnnouncementsByDate(announcements);

  return (
    <ul>
      {Array.from(groupedAnnouncements).map(
        ([dateKey, announcementForDate], index) => (
          <li className="mb-6 text-palette-900 dark:text-palette-100" key={index}>
            <h4>
              {dateKey.slice(0, 2)}
              <sup>{dateKey.slice(2, 4)}</sup>
              {dateKey.slice(4)}
            </h4>

            <ul className="text-palette-800 dark:text-palette-300 ml-4 sm:ml-6 md:ml-8">
              {announcementForDate.map((announcement, innerIndex) => (
                <li className="list-disc mt-2" key={`${index}-${innerIndex}`}>
                  {announcement.subtitle ? (
                    <ul>
                      <li>
                        <a
                          className="hover:text-palette-400 dark:hover:text-palette-100"
                          href={announcement.title_link}
                          target="_blank"
                        >
                          {announcement.title}
                        </a>
                      </li>
                      <li>
                        <a
                          className="hover:text-palette-400 dark:hover:text-palette-100"
                          href={announcement.subtitle_link}
                          target="_blank"
                        >
                          {announcement.subtitle}
                        </a>
                      </li>
                    </ul>
                  ) : (
                    <a
                      className="hover:text-palette-400 dark:hover:text-palette-100"
                      href={announcement.title_link}
                      target="_blank"
                    >
                      {announcement.title}
                    </a>
                  )}
                </li>
              ))}
            </ul>
          </li>
        )
      )}
    </ul>
  );
}