search

rivernews / appl-tracky-spa

An Application Tracking System to help job finders ease their out-of-control spreadsheet use tracking every job application record.
https://appl-tracky.shaungc.com
1 stars 0 forks source link

Material Library Migration #81

Closed rivernews closed 3 years ago

rivernews commented 3 years ago

The official React mdc implementation (by Google) is deprecated, which is surprising and disappointing. However, there're couple few React material community libraries that are promising. Anyway, we'll have to migrate to one of these libraries.

We can start from one or two single places using a new library while trying which library best fit our needs.

We'll target material-ui first since it's the most popular one.

rivernews commented 3 years ago

Will need to consider migrate to material UI on other parts of the app since it's making the app crash - Seems issue is in company detail page, the hasRipple. Sometimes it will crash when using safari:

TypeError: null is not an object (evaluating 't.getBoundingClientRect')
rivernews commented 3 years ago

The issue starts occurring in Chrome as well.

TypeError: Cannot read property 'getBoundingClientRect' of null
computeBoundingRect
/packages/ripple/index.tsx:224
  221 |   window.removeEventListener('resize', handler),
  222 | updateCssVariable: this.updateCssVariable,
  223 | computeBoundingRect: () => {
> 224 |   if (!this.isComponentMounted) {
      | ^  225 |     // need to return object since foundation expects it
  226 |     // new DOMRect is not IE11 compatible
  227 |     const defaultDOMRect = {
rivernews commented 3 years ago

Since the MDC is deprecated, we should migrate to new UI library. Looks like new library will not have this issue. If we got an error crash similar to this, we should try to switch the component to use the one provide by new UI library, in the future.