Reuse google calendar react component

[goanpeca]

Description

This PR is changing the iframe google calendar by a styled react component from
https://github.com/ericz1803/react-google-calendar

To better suit the theme.

Before

After

Demo

See

ericz1803/react-google-calendar#68

[netlify]

✅ Deploy Preview for conda-dot-org ready!

Name	Link
🔨 Latest commit	066603f
🔍 Latest deploy log	https://app.netlify.com/sites/conda-dot-org/deploys/65def550ad4c8f00083eb243
😎 Deploy Preview	https://deploy-preview-176--conda-dot-org.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[goanpeca]

Ok so it seems that we need a newer version of react, but that might not work with the current version of docusaurus (2.3.1) used in this project. Is there a reason for using 2.3.1 still, latest version is 3.1.1 it seems

After updating to 3.1.1 the following errors still remain

[WARNING] {"moduleIdentifier":"/Users/gpenacastellanos/Desktop/develop/conda-forge/conda-dot-org/node_modules/@ericz1803/react-google-calendar/dist/react-google-calendar.es.js","moduleName":"./node_modules/@ericz1803/react-google-calendar/dist/react-google-calendar.es.js","loc":"2699:33-51","message":"Module not found: Error: Can't resolve './locale' in '/Users/gpenacastellanos/Desktop/develop/conda-forge/conda-dot-org/node_modules/@ericz1803/react-google-calendar/dist'","compilerPath":"client"}
[WARNING] {"moduleIdentifier":"/Users/gpenacastellanos/Desktop/develop/conda-forge/conda-dot-org/node_modules/@ericz1803/react-google-calendar/dist/react-google-calendar.es.js","moduleName":"./node_modules/@ericz1803/react-google-calendar/dist/react-google-calendar.es.js","loc":"2699:33-51","message":"Module not found: Error: Can't resolve './locale' in '/Users/gpenacastellanos/Desktop/develop/conda-forge/conda-dot-org/node_modules/@ericz1803/react-google-calendar/dist'","compilerPath":"server"}

[jaimergp]

@goanpeca: I think this fixed the rendering, but we still have that moment.js locale problem.

[goanpeca]

@jaimergp I fixed the code to get the API key, but locally and on netlify I now get the following error:

Error: Docusaurus server-side rendering could not render static page with path /community/calendar because of error: Cannot read properties of null (reading "registered")

I am not sure if it is related to the warnings or if it is something different from the calendar react component :-|

[goanpeca]

It is working now as expected 🚀

Got this reply from the docusaurus folks:

Your lib does not support server-side rendering, so you need to tell Docusaurus to not attempt to server-render it.

This means bypassing static html generation of that particular calendar component, and displaying some kind of loading placeholder instead, because that component can't be run inside Node.js.

Read docs:
docusaurus.io/docs/docusaurus-core#browseronly
docusaurus.io/docs/advanced/ssg#browseronly

If you want to have a good experience without spinners and layout shifts, it's preferable to use libraries that support SSR/SSG (running in Node.js)

[jaimergp]

Awesome, I fixed one issue with the overflow-y of the events (I got a tiny scrollbar with each event item).

Unfortunately, I think the library has a bug: conda-forge events show up at 7pm, while conda-community ones show up at 6pm. Yet both happen at the same time every other Wednesday. I think one of the events is set to UTC as the base timezone, while the other is tied to a given timezone with daylight savings. The iframe does show the correct times, but this React component does not...

[jaimergp]

Maybe it'd be fixed if we ever get rid of the locale warning?

[goanpeca]

Maybe it'd be fixed if we ever get rid of the locale warning?

Maybe 🤷🏼

Could you locally change this line inside the following file and check if affects anything locally for you (calendar correctly shows the 2 events at the same time)

../conda-dot-org/node_modules/@ericz1803/react-google-calendar/dist/react-google-calendar.es.js
Line 2699
A = SM._abbr, z = require, z("moment/locale/" + b), Eb(A);

[jaimergp]

Nop, the warning is gone but the 6/7pm issue persists:

[goanpeca]

Hmmm. What time zone are you in? I changed mi computer to Berlin, Germany and now events appear as 5:00 pm both 🤔

[jaimergp]

🤷 This is Chrome Version 117.0.5938.149 (Official Build) (arm64)

[jezdez]

I wonder what else is needed to move this ahead?

[jaimergp]

We couldn't fix that 6pm/7pm locale issue so we are currently blocked until that gets fixed.

[netlify]

✅ Deploy Preview for conda-dot-org ready!

Name	Link
🔨 Latest commit	85619d7
🔍 Latest deploy log	https://app.netlify.com/sites/conda-dot-org/deploys/66c5ad09f9f74a0008b28a84
😎 Deploy Preview	https://deploy-preview-176--conda-dot-org.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[jaimergp]

Superseded by #221