🔨 Switch Author to use useOvermind (codesandbox#2566)

* 🔨 Switch Author to use useOvermind

* Use subscriptionSince

* Fix types

Author: MichaelDeBoey

packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Author.tsx

@@ -1,15 +1,22 @@
-import React from 'react';
-import { profileUrl } from '@codesandbox/common/lib/utils/url-generator';
 import { UserWithAvatar } from '@codesandbox/common/lib/components/UserWithAvatar';
+import { User } from '@codesandbox/common/lib/types';
+import { profileUrl } from '@codesandbox/common/lib/utils/url-generator';
+import React, { FunctionComponent } from 'react';
+
 import { Item, UserLink } from './elements';
 
-export const Author = ({ author: { username, avatarUrl, subscription } }) => (
+type Props = {
+  author: User;
+};
+export const Author: FunctionComponent<Props> = ({
+  author: { username, avatarUrl, subscriptionSince },
+}) => (
   <Item>
     <UserLink title={username} to={profileUrl(username)}>
       <UserWithAvatar
         username={username}
         avatarUrl={avatarUrl}
-        subscriptionSince={subscription && subscription.since}
+        subscriptionSince={subscriptionSince}
       />
     </UserLink>
   </Item>

packages/common/src/components/PatronStar/index.tsx

@@ -1,26 +1,25 @@
-import React from 'react';
 import { format } from 'date-fns';
+import React, { FunctionComponent } from 'react';
 import StarIcon from 'react-icons/lib/go/star';
+
 import Tooltip from '../Tooltip';
 
 import { Container } from './elements';
 
-interface PatronStarProps {
-  subscriptionSince: number | Date;
+type Props = {
   style?: React.CSSProperties;
-}
+  subscriptionSince: string | number | Date;
+};
 
-export function PatronStar({ subscriptionSince, ...props }: PatronStarProps) {
-  return (
-    <Tooltip
-      content={`Patron since ${format(
-        new Date(subscriptionSince),
-        'MMM yyyy'
-      )}`}
-    >
-      <Container>
-        <StarIcon {...props} />
-      </Container>
-    </Tooltip>
-  );
-}
+export const PatronStar: FunctionComponent<Props> = ({
+  subscriptionSince,
+  ...props
+}) => (
+  <Tooltip
+    content={`Patron since ${format(new Date(subscriptionSince), 'MMM yyyy')}`}
+  >
+    <Container>
+      <StarIcon {...props} />
+    </Container>
+  </Tooltip>
+);

packages/common/src/components/UserWithAvatar/index.tsx

@@ -1,52 +1,54 @@
-import React from 'react';
+import React, { ComponentProps, FunctionComponent } from 'react';
 
 import ContributorHelm from '../ContributorsBadge';
 import { PatronStar } from '../PatronStar';
+
 import { CenteredText, AuthorName, Image, Names, Username } from './elements';
 
-export interface UserWithAvatarProps {
+type Props = ComponentProps<typeof CenteredText> & {
   avatarUrl: string;
   username: string;
   name?: string;
   hideBadge?: boolean;
-  subscriptionSince?: number | Date;
   useBigName?: boolean;
-}
+} & Partial<Pick<ComponentProps<typeof PatronStar>, 'subscriptionSince'>>;
 
-export function UserWithAvatar({
+export const UserWithAvatar: FunctionComponent<Props> = ({
   avatarUrl,
   username,
   name,
   hideBadge,
   subscriptionSince,
   useBigName,
   ...props
-}: UserWithAvatarProps) {
-  return (
-    <CenteredText {...props}>
-      {avatarUrl && <Image src={avatarUrl} alt={username} />}
-      <AuthorName useBigName={useBigName}>
-        <Names>
-          {name && <div>{name}</div>}
-          {username && (
-            <Username hasTwoNames={name && Boolean(username)}>
-              {username}
-            </Username>
-          )}
-        </Names>
-        {subscriptionSince && (
-          <PatronStar
-            style={{ fontSize: '1.125em', marginBottom: '0.1em' }}
-            subscriptionSince={subscriptionSince}
-          />
-        )}
-        {!hideBadge && (
-          <ContributorHelm
-            style={{ margin: '0 .5rem', fontSize: '1.25em' }}
-            username={username}
-          />
+}) => (
+  <CenteredText {...props}>
+    {avatarUrl && <Image src={avatarUrl} alt={username} />}
+
+    <AuthorName useBigName={useBigName}>
+      <Names>
+        {name && <div>{name}</div>}
+
+        {username && (
+          <Username hasTwoNames={Boolean(name && username)}>
+            {username}
+          </Username>
         )}
-      </AuthorName>
-    </CenteredText>
-  );
-}
+      </Names>
+
+      {subscriptionSince && (
+        <PatronStar
+          style={{ fontSize: '1.125em', marginBottom: '0.1em' }}
+          subscriptionSince={subscriptionSince}
+        />
+      )}
+
+      {!hideBadge && (
+        <ContributorHelm
+          style={{ margin: '0 .5rem', fontSize: '1.25em' }}
+          username={username}
+        />
+      )}
+    </AuthorName>
+  </CenteredText>
+);