Feature: add events page

[zebateira]

closes #362
partially addresses #90

TODO:

• Refactor events card to use <Card /> component
• Check Google APIs rate limits (can we fetch the data on all builds?)
• Display "Coming soon" events on the homepage
• Option to display a few vs all past events on events page
• Production data
• Add upcoming v past approved events counts to build tool log
• Exclude personal data from transfer to events.json
• Use "Yes" and "No" values on the approved column
• New event structure updates (name splitting etc)
• Add documentation and instructions for the new scripts added
• Schedule build process to update the website with the new data on travis (settings -> cron jobs)

[zebateira]

Check Google APIs rate limits (can we fetch the data on all builds?)

It doesn't seem to be a problem: https://developers.google.com/sheets/api/limits

Google Sheets API has a limit of 500 requests per 100 seconds per project, and 100 requests per 100 seconds per user. Limits for reads and writes are tracked separately. There is no daily usage limit.

[zebateira]

There are other limits tho: https://support.google.com/drive/answer/37603?hl=en

Up to 5 million cells or 18,278 columns (column ZZZ) for spreadsheets that are created in or converted to Google Sheets.

Since we have 24 columns, then our maximum number of events will be around 208.
Taking this into consideration, I don't think this is a long term solution, so we should look for a way around this limitation or look for another alternative - maybe in the next quarter we can look into this. What do you think @terichadbourne ?

[terichadbourne]

I've refactored to create an events util file for access from multiple pages/components. pastEvents and futureEvents take an optional maxLength that caps the list to the X most recent or X soonest upcoming.

On the events page, I capped display by default at 4 past events and added an option to expand to the full list if more exist:

While in the full list, there's an option to reduce to the most recent if would indeed be a shorter list:

(If full list is less than or equal to the max 4, header stays showing All and no option appears to expand/contract.)

This seemed to make the most sense at the bottom list, but let me know if you disagree. Suggestions or commits for improved hover color, etc. to emphasize the option are also welcome, as I need to call it quits for the evening.

I also added a "Coming Soon" section on the homepage which only appears if there are upcoming events and show a max of the 4 coming up soonest:

Note that the approved events in Google Sheets are all now real - 1 future and 7 past.

[terichadbourne]

@zebateira I've removed the option to shorten the past events list as we discussed and made the text you click to view them all focusable and noticeable on hover.

I believe these are the only fields from the spreadsheet that we'll actually need to save to events.json and push to GitHub. Some of the remaining items are genuinely confidential (organizer emails, etc.) and some just superfluous because it's either metadata or only needed for mailing list purposes. Are you able to remove the remaining fields in the script before copying things over to the JSON doc that will become public?

{
    "id": 2,
    "city": "Toronto",
    "country": "Canada",
    "startTime": "2020-05-15T12:30:00",
    "endTime": "2020-05-15T14:00:00",
    "duration": 90,
    "tutorials": ["0003", "0005"],
    "cocUrl": "https://some.event/coc",
    "url": "https://some.event",
    "type": "meetup",
    "hostedByName": "IPFS Boston",
    "hostedByUrl": "https://meetup.com",
    "hostedAtName": "AwesomeConf",
    "hostedAtUrl": "https://conference.com"
  },

[zebateira]

@terichadbourne yes sounds good 👌

[zebateira]

@terichadbourne added a whitelist of properties to only keep the properties you listed 👌

[terichadbourne]

@zebateira I've deleted all the old test data from our spreadsheet so we only have real past and future events there now. We're no longer using columns L (end time) or M (how is this workshop being presented) in the form, so those will always be blank. Can you confirm I won't mess up your data fetching functionality if I delete them from the spreadsheet? Also, your data fetching code is creating start time, end time, and duration fields, but we now only have start times. Mind updating your code accordingly?

[terichadbourne]

@mikeal @olizilla @autonome Any chance you'd have time to load this up (npm run serve) and read through the Events, Host, and Chapter pages (now hidden in the nav but linked from those two pages and at localhost://#/chapters) to make sure the phrasing is comprehensible to you?

[zebateira]

We're no longer using columns L (end time) or M (how is this workshop being presented) in the form, so those will always be blank. Can you confirm I won't mess up your data fetching functionality if I delete them from the spreadsheet? Also, your data fetching code is creating start time, end time, and duration fields, but we now only have start times. Mind updating your code accordingly?

Deleting or reordering columns will break the code yeah. I'll update the code and delete the columns as well :)

[zebateira]

@terichadbourne done!
Let me know if everything is ok.

[zebateira]

@terichadbourne cron job setup 🕐