feat: update material-ui@4.x (#123)

* chore: update material-ui@4.x

* test: update test for ActionBar and TestField

* chore: add types

* chore: update types

* test: update test for Author

* chore: fixed bunch of unit test

* chore: remove unused import

* chore: remove comments

* chore: replace shallow my mount

* chore: update git hooks

* chore: fix styles

* chore: update dependencies

* chore: remove types material-ui

src/components/ActionBar/ActionBar.tsx

@@ -49,6 +49,12 @@ class ActionBar extends Component {
     return (
       <DetailContextConsumer>
         {context => {
+          const { packageMeta } = context;
+
+          if (!packageMeta) {
+            return null;
+          }
+
           return this.renderActionBar(context as VersionPageConsumerProps);
         }}
       </DetailContextConsumer>
@@ -65,12 +71,18 @@ class ActionBar extends Component {
 
   private renderActionBar = ({ packageMeta }) => {
     // @ts-ignore
-    const { latest: { bugs: { url: issue } = {}, homepage, dist: { tarball } = {} } = {} } = packageMeta;
+    const { latest } = packageMeta;
+
+    if (!latest) {
+      return null;
+    }
+
+    const { homepage, bugs, dist } = latest;
 
     const actionsMap = {
       homepage,
-      issue,
-      tarball,
+      issue: bugs ? bugs.url : null,
+      tarball: dist ? dist.tarball : null,
     };
 
     const renderList = Object.keys(actionsMap).reduce((component: React.ReactElement[], value, key) => {
@@ -108,7 +120,9 @@ class ActionBar extends Component {
     if (renderList.length > 0) {
       return (
         <List>
-          <ActionListItem alignItems={'flex-start'}>{renderList}</ActionListItem>
+          <ActionListItem alignItems={'flex-start'} button={true}>
+            {renderList}
+          </ActionListItem>
         </List>
       );
     }
@@ -117,4 +131,4 @@ class ActionBar extends Component {
   };
 }
 
-export default ActionBar;
+export { ActionBar };