🔨 Switch UserMenu to use useOvermind (codesandbox#2532)

* 🔨 Switch UserMenu to use useOvermind

* Fix types

* Fix types

Author: MichaelDeBoey

packages/app/src/app/overmind/namespaces/files/actions.ts

@@ -217,9 +217,10 @@ export const directoryRenamed: AsyncAction<{
   }
 );
 
-export const gotUploadedFiles: AsyncAction<{
-  message: string;
-}> = async ({ state, effects }, { message }) => {
+export const gotUploadedFiles: AsyncAction<string> = async (
+  { state, effects },
+  message
+) => {
   const modal = 'storageManagement';
   effects.analytics.track('Open Modal', { modal });
   state.currentModalMessage = message;

packages/app/src/app/pages/common/UserMenu/Menu/index.tsx

@@ -23,15 +23,11 @@ import { FeedbackIcon } from './FeedbackIcon';
 
 interface Props {
   username: string;
-  curator: boolean;
-  openPreferences: (
-    event: React.MouseEvent<HTMLDivElement, MouseEvent>
-  ) => void;
-  openStorageManagement: (
-    event: React.MouseEvent<HTMLDivElement, MouseEvent>
-  ) => void;
-  openFeedback: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-  signOut: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+  curator: string;
+  openPreferences: () => void;
+  openStorageManagement: () => void;
+  openFeedback: () => void;
+  signOut: () => void;
 }
 
 export const Menu = ({

packages/app/src/app/pages/common/UserMenu/index.tsx

@@ -1,44 +1,47 @@
-import * as React from 'react';
 import Relative from '@codesandbox/common/lib/components/Relative';
-import { inject, hooksObserver } from 'app/componentConnectors';
+import React, { FunctionComponent } from 'react';
+
 import { HoverMenu } from 'app/components/HoverMenu';
-import { Menu } from './Menu';
+import { useOvermind } from 'app/overmind';
+
 import { ClickableContainer, ProfileImage } from './elements';
+import { Menu } from './Menu';
+
+export const UserMenu: FunctionComponent = () => {
+  const {
+    actions: {
+      userMenuClosed,
+      modalOpened,
+      signOutClicked,
+      userMenuOpened,
+      files: { gotUploadedFiles },
+    },
+    state: { user, userMenuOpen },
+  } = useOvermind();
+
+  return (
+    <Relative>
+      <ClickableContainer onClick={userMenuOpened}>
+        <ProfileImage
+          alt={user.username}
+          width={30}
+          height={30}
+          src={user.avatarUrl}
+        />
+      </ClickableContainer>
 
-export const UserMenu = inject('store', 'signals')(
-  hooksObserver(
-    ({
-      store: { user, userMenuOpen },
-      signals: {
-        userMenuClosed,
-        modalOpened,
-        signOutClicked,
-        userMenuOpened,
-        files,
-      },
-    }) => (
-      <Relative>
-        <ClickableContainer onClick={userMenuOpened}>
-          <ProfileImage
-            alt={user.username}
-            width={30}
-            height={30}
-            src={user.avatarUrl}
+      {userMenuOpen && (
+        <HoverMenu onClose={() => userMenuClosed()}>
+          <Menu
+            openPreferences={() => modalOpened({ modal: 'preferences' })}
+            openStorageManagement={() => gotUploadedFiles(null)}
+            signOut={() => signOutClicked()}
+            username={user.username}
+            curator={user.curatorAt}
+            openFeedback={() => modalOpened({ modal: 'feedback' })}
           />
-        </ClickableContainer>
-        {userMenuOpen && (
-          <HoverMenu onClose={() => userMenuClosed()}>
-            <Menu
-              openPreferences={() => modalOpened({ modal: 'preferences' })}
-              openStorageManagement={files.gotUploadedFiles}
-              signOut={signOutClicked}
-              username={user.username}
-              curator={user.curatorAt}
-              openFeedback={() => modalOpened({ modal: 'feedback' })}
-            />
-          </HoverMenu>
-        )}
-      </Relative>
-    )
-  )
-);
+        </HoverMenu>
+      )}
+    </Relative>
+  );
+};