Move MFP to separate site

* Add blacklists for events for FP and MFP * Display DayDescriptions before events have been loaded * Separate schemas for DayDescription for FP and MFP * Add sorting of DayDescriptions in Sanity
webkom · Aug 9, 2023 · a7dd6b5 · a7dd6b5
1 parent 7f0fea5
commit a7dd6b5
Show file tree

Hide file tree

Showing 8 changed files with 266 additions and 86 deletions.
diff --git a/components/EventsListView/index.tsx b/components/EventsListView/index.tsx
@@ -14,25 +14,46 @@ import { DayDescription } from "@/pages/events";
 type EventsListViewProps = {
   events: Event[];
   dayDescriptions: DayDescription[];
+  isLoadingEvents: boolean;
+  expandDayDescriptionsByDefault?: boolean;
 };
 
 type Day = {
   title: string;
   events: Event[];
-  descriptions?: DayDescription[];
+  description?: DayDescription;
 };
 
 const EventsListView: React.FC<EventsListViewProps> = ({
   events,
   dayDescriptions,
+  isLoadingEvents,
+  expandDayDescriptionsByDefault,
 }) => {
   const days = useMemo<Day[]>(() => {
-    const dayCount = numberOfDaysBetweenDates(
-      events[0].startTime,
-      events[events.length - 1].startTime
-    );
+    if (events.length === 0 && dayDescriptions.length === 0) return [];
+    let firstDate: Date;
+    let lastDate: Date;
+    if (events.length === 0) {
+      firstDate = new Date(dayDescriptions[0].date);
+      lastDate = new Date(dayDescriptions[dayDescriptions.length - 1].date);
+    } else if (dayDescriptions.length === 0) {
+      firstDate = events[0].startTime;
+      lastDate = events[events.length - 1].startTime;
+    } else {
+      firstDate =
+        new Date(dayDescriptions[0].date) < events[0].startTime
+          ? new Date(dayDescriptions[0].date)
+          : events[0].startTime;
+      lastDate =
+        new Date(dayDescriptions[dayDescriptions.length - 1].date) >
+        events[events.length - 1].startTime
+          ? new Date(dayDescriptions[dayDescriptions.length - 1].date)
+          : events[events.length - 1].startTime;
+    }
+    const dayCount = numberOfDaysBetweenDates(firstDate, lastDate);
     // Initialize a date object to represent the current date in the loop
-    let currentDate = new Date(events[0].startTime);
+    let currentDate = new Date(firstDate);
     currentDate.setDate(currentDate.getDate() - 1);
 
     // Iterate over all the days
@@ -43,18 +64,12 @@ const EventsListView: React.FC<EventsListViewProps> = ({
         events: events.filter((event) =>
           isSameCalendarDate(event.startTime, currentDate)
         ),
-        descriptions: dayDescriptions
-          .filter((d) => {
-            return (
-              isSameCalendarDate(new Date(d.date), currentDate) &&
-              d.content.length
-            );
-          })
-          .sort((d1, d2) => {
-            if (!d2.fpGroup) return -1;
-            if (!d1.fpGroup) return 0;
-            return -d1.fpGroup.localeCompare(d2.fpGroup);
-          }),
+        description: dayDescriptions.find((d) => {
+          return (
+            isSameCalendarDate(new Date(d.date), currentDate) &&
+            d.content.length
+          );
+        }),
       };
     });
   }, [events, dayDescriptions]);
@@ -64,20 +79,23 @@ const EventsListView: React.FC<EventsListViewProps> = ({
       {days.map((day) => (
         <div key={day.title}>
           <p className={styles.dayTitle}>{day.title}</p>
-          {day.descriptions?.length
-            ? day.descriptions.map((dd) => (
-                <CollapsibleItem key={dd.fpGroup} title="" minHeight="60px">
-                  <div className={styles.description}>
-                    <PortableText value={dd.content} />
-                  </div>
-                </CollapsibleItem>
-              ))
-            : null}
-          {day.events.length > 0 ? (
+          {day.description && (
+            <CollapsibleItem
+              title=""
+              minHeight={expandDayDescriptionsByDefault ? undefined : "80px"}
+              initiallyOpen={expandDayDescriptionsByDefault}
+            >
+              <div className={styles.description}>
+                <PortableText value={day.description.content} />
+              </div>
+            </CollapsibleItem>
+          )}
+          {isLoadingEvents && <p>Laster inn arrangementer fra abakus.no...</p>}
+          {day.events &&
             day.events.map((event) => (
               <EventItem key={event.id} event={event} />
-            ))
-          ) : (
+            ))}
+          {!day.description && day.events.length === 0 && (
             <p>Ingen Fadderperiode-arrangementer</p>
           )}
         </div>

diff --git a/components/Navbar/index.tsx b/components/Navbar/index.tsx
@@ -8,6 +8,7 @@ const Navbar = () => {
         <div className={styles.navLinksWrapper}>
           <Link href={"/"}>Startside</Link>
           <Link href={"/events"}>Fadderperioden</Link>
+          <Link href={"/masterfadderperioden"}>Masterfadderperioden</Link>
           <Link href={"/faq"}>FAQ</Link>
         </div>
         <div className={styles.logoWrapper}>

diff --git a/components/Navbar/styles.module.css b/components/Navbar/styles.module.css
@@ -27,15 +27,17 @@
     gap: 1.5rem;
   }
 
-  .navLinksWrapper, .logoWrapper {
+  .navLinksWrapper,
+  .logoWrapper {
     justify-content: center;
   }
 }
 
 .navLinksWrapper {
   display: flex;
+  flex-wrap: wrap;
   flex-grow: 1;
-  gap: 2em;
+  gap: 1em 2em;
 }
 
 .logoWrapper {

diff --git a/pages/events.tsx b/pages/events.tsx
@@ -29,7 +29,7 @@ export const Events: NextPage<EventsProps> = ({ dayDescriptions }) => {
   useEffect(() => {
     (async () => {
       try {
-        const apiEvents = await fetchEvents();
+        const apiEvents = await fetchEvents("fp");
         setApiEvents(apiEvents);
       } catch (error) {
         console.error(error);
@@ -43,6 +43,11 @@ export const Events: NextPage<EventsProps> = ({ dayDescriptions }) => {
     <>
       <InfoSectionWrapper contentClassName={styles.fpInfo}>
         <h2 className={styles.title}>Fadderperioden</h2>
+        <p>
+          Fadderperioden er for alle som begynner på{" "}
+          <b>5-årig integrert master</b>. Begynner du på 2-årig master? Gå til{" "}
+          <Link href={"/masterfadderperioden"}>Masterfadderperioden</Link>.
+        </p>
         <p>
           NB! Dette er en plan fra linjeforeningen din, Abakus, som ikke
           inkluderer alle detaljer om det obligatoriske opplegget fra
@@ -57,30 +62,19 @@ export const Events: NextPage<EventsProps> = ({ dayDescriptions }) => {
             5-årig: Datateknologi (Data)
           </a>
           <br />
-          <a href="https://www.ntnu.no/studier/mstcnns">
-            2-årig: Digital Infrastructure and Cyber Security (Komtek)
-          </a>{" "}
-          <br />
-          <a href="https://www.ntnu.no/studier/midt">
-            2-årig: Datateknologi (Data)
-          </a>
         </p>
         <p>
           Fadderperioden for Datateknologi og Kommunikasjonsteknologi er
           arrangert av Abakus.
         </p>
+        <br />
         <p>
           For å bli med må du møte opp på immatrikuleringen, hvor du blir
           plassert i en faddergruppe og får mer informasjon. Hvis du ikke får
           møtt opp, send en epost til{" "}
           <a href="mailto:fadderperioden@abakus.no">fadderperioden@abakus.no</a>{" "}
-          (5-årig integrert master) eller{" "}
-          <a href="mailto:masterfadderperioden@abakus.no">
-            masterfadderperioden@abakus.no
-          </a>{" "}
-          (2-årig master) for å få en faddergruppe.
+          for å få en faddergruppe.
         </p>
-        <h3 className={styles.subTitle}>5-årig integrert master</h3>
         <p>
           Oppmøte for Datateknologi: Mandag 14. August 12:00 på{" "}
           <Link href={"https://link.mazemap.com/gqncrU4T"}>Kjel 5</Link>
@@ -99,19 +93,6 @@ export const Events: NextPage<EventsProps> = ({ dayDescriptions }) => {
           </Link>
           .
         </p>
-        <h3 className={styles.subTitle}>2-årig master</h3>
-        <p>Oppmøte for Datateknologi: TBD</p>
-        <p>Oppmøte for Digital Infrastructure and Cyber Security: TBD</p>
-        <p>
-          Facebook-gruppe for nye abakuler på 2-årig master{" "}
-          <Link
-            href={"https://www.facebook.com/groups/175376555487442/"}
-            target={"_blank"}
-          >
-            finner du her
-          </Link>
-          .
-        </p>
       </InfoSectionWrapper>
       {/* <InfoSectionWrapper>
         <FullscreenImage
@@ -123,17 +104,26 @@ export const Events: NextPage<EventsProps> = ({ dayDescriptions }) => {
         />
       </InfoSectionWrapper> */}
       <InfoSectionWrapper>
-        {isLoading ? (
-          <p>Laster inn Fadderperiode-arrangementer ...</p>
-        ) : events.length ? (
-          <EventsListView events={events} dayDescriptions={dayDescriptions} />
-        ) : (
+        {!isLoading && events.length == 0 && dayDescriptions.length !== 0 && (
           <p>
-            Klarte ikke hente arrangementene. Hvis problemet vedvarer, sjekk{" "}
+            Klarte ikke hente arrangementer fra abakus.no. Du kan fortsatt finne
+            alle arrangementene på{" "}
+            <Link href={"https://abakus.no"}>abakus.no</Link>.<br />
+            <br />
+          </p>
+        )}
+        {!isLoading && events.length === 0 && dayDescriptions.length === 0 && (
+          <p>
+            Klarte ikke hente arrangementer. Hvis problemet vedvarer, sjekk{" "}
             <Link href={"https://abakus.no"}>abakus.no</Link> eller
             facebook-gruppa for nye studenter.
           </p>
         )}
+        <EventsListView
+          isLoadingEvents={isLoading}
+          events={events}
+          dayDescriptions={dayDescriptions}
+        />
       </InfoSectionWrapper>
     </>
   );
@@ -153,7 +143,9 @@ const client = createClient({
 export async function getStaticProps() {
   let dayDescriptions: DayDescription[] = [];
   try {
-    dayDescriptions = await client.fetch(groq`*[_type == "dayDescription"]`);
+    dayDescriptions = await client.fetch(
+      groq`*[_type == "fpDayDescription"] | order(date asc)`
+    );
   } catch (e) {}
   return {
     props: {