on master help sign in
order future events by earliest event
b8987feJosh Lehman
components/EventPreview.js+37
@@ -4,6 +4,7 @@ import {
4 ShowOrHide,
4 ShowOrHide,
5 ReadableList,
5 ReadableList,
6 Person,
6 Person,
7+ Name,
7 DateRange,
8 DateRange,
8} from "../components/Snippets";
9} from "../components/Snippets";
9import {
10import {
@@ -14,6 +15,42 @@ import {
14 formatTimeZone,
15 formatTimeZone,
15} from "../lib/lib";
16} from "../lib/lib";
16
17
18+// JAL(2021.9.13) Couldn't quite get this to work properly. There's a trailing
19+// "and"
20+//
21+// function GuestList({ guests, textClass }) {
22+
23+// const renderGuests = guests?.length > 2 ? guests?.slice(0,2) : guests;
24+// const noRenderGuestsCount = guests?.slice(2).length;
25+
26+// return (
27+// <p className={textClass + " type-sub"}>
28+// <b>
29+// {renderGuests?.length > 1 ? "With guests " : "With guest "}
30+// </b>
31+// <ReadableList>
32+// {renderGuests?.map((guest, index) => (
33+// <>
34+// <Person
35+// key={`${guest.name}-${guest.patp}`}
36+// nameClassNames={textClass}
37+// patpClassNames={textClass}
38+// name={guest.name}
39+// patp={guest.patp}
40+// />
41+// {renderGuests?.length > 1 ? <span>, </span> : <></>}
42+// </>
43+// ))}
44+// {noRenderGuestsCount > 1 ?
45+// <Name>{noRenderGuestsCount} more </Name>
46+// :
47+// <></>
48+// }
49+// </ReadableList>
50+// </p>
51+// );
52+// }
53+
17export default function EventPreview({ event, className, big }) {
54export default function EventPreview({ event, className, big }) {
18 // Event tiles have a 'dark mode' used when their background images are dark and white text is needed for legibility.
55 // Event tiles have a 'dark mode' used when their background images are dark and white text is needed for legibility.
19 const grayText = event?.dark ? "text-washedWhite" : "text-wall-400";
56 const grayText = event?.dark ? "text-washedWhite" : "text-wall-400";
pages/events.js+17−4
@@ -34,10 +34,23 @@ export default function Events({ events, search }) {
34 return ends < now;
34 return ends < now;
35 });
35 });
36
36
37− const futureEvents = events.filter((event) => {
37+ const futureEvents = events
38+ .filter((event) => {
38− const starts = generateRealtimeDate(event.starts);
39+ const starts = generateRealtimeDate(event.starts);
39− return starts > now;
40+ return starts > now;
40− });
41+ })
42+ .sort((a, b) => {
43+ const aStarts = generateRealtimeDate(a.starts).ts;
44+ const bStarts = generateRealtimeDate(b.starts).ts;
45+ if (aStarts > bStarts) {
46+ return 1;
47+ } else if (aStarts === bStarts) {
48+ return 0;
49+ }
50+ return -1;
51+ });
52+
53+ console.log(futureEvents);
41
54
42 const happeningNow = events.filter((event) => {
55 const happeningNow = events.filter((event) => {
43 const starts = generateRealtimeDate(event.starts);
56 const starts = generateRealtimeDate(event.starts);
pages/index.js+19−1
@@ -1,6 +1,7 @@
1import Head from "next/head";
1import Head from "next/head";
2import Link from "next/link";
2import Link from "next/link";
3import React, { useState, useEffect } from "react";
3import React, { useState, useEffect } from "react";
4+import { DateTime } from "luxon";
4
5
5import Container from "../components/Container";
6import Container from "../components/Container";
6import Section from "../components/Section";
7import Section from "../components/Section";
@@ -18,6 +19,7 @@ import {
18 getAllEvents,
19 getAllEvents,
19 formatDate,
20 formatDate,
20 getOpenGrantsCount,
21 getOpenGrantsCount,
22+ generateRealtimeDate,
21} from "../lib/lib";
23} from "../lib/lib";
22import { contact, eventKeys } from "../lib/constants";
24import { contact, eventKeys } from "../lib/constants";
23import { useLocalStorage } from "../lib/hooks";
25import { useLocalStorage } from "../lib/hooks";
@@ -299,7 +301,23 @@ export async function getStaticProps() {
299 "blog"
301 "blog"
300 );
302 );
301
303
304+ const now = DateTime.now();
305+
302− const events = getAllEvents(eventKeys, "events");
306+ const events = getAllEvents(eventKeys, "events")
307+ .filter((event) => {
308+ const starts = generateRealtimeDate(event.starts);
309+ return starts > now;
310+ })
311+ .sort((a, b) => {
312+ const aStarts = generateRealtimeDate(a.starts).ts;
313+ const bStarts = generateRealtimeDate(b.starts).ts;
314+ if (aStarts > bStarts) {
315+ return 1;
316+ } else if (aStarts === bStarts) {
317+ return 0;
318+ }
319+ return -1;
320+ });
303
321
304 return {
322 return {
305 props: { posts, events, openGrantsCount },
323 props: { posts, events, openGrantsCount },