From 04074f434ef1e83490dab490cf0152c217523b30 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Fri, 29 Jul 2022 20:59:09 +0300
Subject: [PATCH] Change flatMap -> map with fragments in event list

---
 TODO.md                       |   2 +
 app/routes/calendar/index.tsx | 145 +++++++++++++++++-----------------
 2 files changed, 73 insertions(+), 74 deletions(-)

diff --git a/TODO.md b/TODO.md
index 161e5db88..daeb92346 100644
--- a/TODO.md
+++ b/TODO.md
@@ -20,6 +20,8 @@ Calendar
 
 ## Other
 
+- [ ] Avatar (?) can have class attribute in DOM without value
+- [x] flatMap -> React.fragment
 - [ ] Event page layout shift with time not taking space before mount (only if one day)
 - [x] WeekLinks make opaque blocks not take space on mobile
 - [x] Type problem with Avatar
diff --git a/app/routes/calendar/index.tsx b/app/routes/calendar/index.tsx
index 3ba2e7025..904ee9f18 100644
--- a/app/routes/calendar/index.tsx
+++ b/app/routes/calendar/index.tsx
@@ -269,84 +269,81 @@ function EventsList() {
                 </div>
               </div>
               <div className="stack md">
-                {events.flatMap((calendarEvent, i) => {
-                  return [
-                    <section
-                      key={calendarEvent.eventId}
-                      className="calendar__event main stack md"
-                    >
-                      <div className="stack sm">
-                        <div
-                          className={clsx(
-                            "calendar__event__top-info-container",
-                            {
-                              "mt-4": i === 0,
-                            }
-                          )}
-                        >
-                          <time
-                            dateTime={databaseTimestampToDate(
-                              calendarEvent.startTime
-                            ).toISOString()}
-                            className="calendar__event__time"
+                {events.map((calendarEvent, i) => {
+                  return (
+                    <React.Fragment key={calendarEvent.eventId}>
+                      <section className="calendar__event main stack md">
+                        <div className="stack sm">
+                          <div
+                            className={clsx(
+                              "calendar__event__top-info-container",
+                              {
+                                "mt-4": i === 0,
+                              }
+                            )}
                           >
-                            {databaseTimestampToDate(
-                              calendarEvent.startTime
-                            ).toLocaleTimeString(i18n.language, {
-                              hour: "numeric",
-                              minute: "numeric",
-                            })}
-                          </time>
-                          <div className="calendar__event__author">
-                            From {discordFullName(calendarEvent)}
+                            <time
+                              dateTime={databaseTimestampToDate(
+                                calendarEvent.startTime
+                              ).toISOString()}
+                              className="calendar__event__time"
+                            >
+                              {databaseTimestampToDate(
+                                calendarEvent.startTime
+                              ).toLocaleTimeString(i18n.language, {
+                                hour: "numeric",
+                                minute: "numeric",
+                              })}
+                            </time>
+                            <div className="calendar__event__author">
+                              From {discordFullName(calendarEvent)}
+                            </div>
+                          </div>
+                          <div className="stack xs">
+                            <Link to={String(calendarEvent.eventId)}>
+                              <h2 className="calendar__event__title">
+                                {calendarEvent.name}{" "}
+                                {calendarEvent.nthAppearance > 1 ? (
+                                  <span className="calendar__event__day">
+                                    Day {calendarEvent.nthAppearance}
+                                  </span>
+                                ) : null}
+                              </h2>
+                            </Link>
+                            <Tags tags={calendarEvent.tags} />
                           </div>
                         </div>
-                        <div className="stack xs">
-                          <Link to={String(calendarEvent.eventId)}>
-                            <h2 className="calendar__event__title">
-                              {calendarEvent.name}{" "}
-                              {calendarEvent.nthAppearance > 1 ? (
-                                <span className="calendar__event__day">
-                                  Day {calendarEvent.nthAppearance}
-                                </span>
-                              ) : null}
-                            </h2>
-                          </Link>
-                          <Tags tags={calendarEvent.tags} />
-                        </div>
-                      </div>
-                      {calendarEvent.discordUrl || calendarEvent.bracketUrl ? (
-                        <div className="calendar__event__bottom-info-container">
-                          {calendarEvent.discordUrl ? (
-                            <LinkButton
-                              to={calendarEvent.discordUrl}
-                              variant="outlined"
-                              tiny
-                              isExternal
-                            >
-                              Discord
-                            </LinkButton>
-                          ) : null}
-                          {calendarEvent.bracketUrl ? (
-                            <LinkButton
-                              to={calendarEvent.bracketUrl}
-                              variant="outlined"
-                              tiny
-                              isExternal
-                            >
-                              {resolveBaseUrl(calendarEvent.bracketUrl)}
-                            </LinkButton>
-                          ) : null}
-                        </div>
+                        {calendarEvent.discordUrl ||
+                        calendarEvent.bracketUrl ? (
+                          <div className="calendar__event__bottom-info-container">
+                            {calendarEvent.discordUrl ? (
+                              <LinkButton
+                                to={calendarEvent.discordUrl}
+                                variant="outlined"
+                                tiny
+                                isExternal
+                              >
+                                Discord
+                              </LinkButton>
+                            ) : null}
+                            {calendarEvent.bracketUrl ? (
+                              <LinkButton
+                                to={calendarEvent.bracketUrl}
+                                variant="outlined"
+                                tiny
+                                isExternal
+                              >
+                                {resolveBaseUrl(calendarEvent.bracketUrl)}
+                              </LinkButton>
+                            ) : null}
+                          </div>
+                        ) : null}
+                      </section>
+                      {i < events.length - 1 ? (
+                        <hr className="calendar__event__divider" />
                       ) : null}
-                    </section>,
-                    i < events.length - 1 ? (
-                      <hr
-                        key={`${calendarEvent.eventId}-line`}
-                        className="calendar__event__divider"
-                      />
-                    ) : null,
-                  ];
+                    </React.Fragment>
+                  );
                 })}
               </div>
             </React.Fragment>