Material Library Migration

[rivernews]

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]

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')

• Looks like especially happens when react dev server reloads page

[rivernews]

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]

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.