codesandbox#1719 Pick Sandbox is now shown at header when user is a curator (codesandbox#1723)

* codesandbox#1719 Pick Sandbox is now shown at header when user is a curator

* Added null check and refactored code

Author: rabingaire

packages/app/src/app/pages/Sandbox/Editor/Header/index.tsx

@@ -91,6 +91,29 @@ const ForkButton = ({
   </Button>
 );
 
+const PickButton = ({ store, signals, secondary, style }: ButtonProps) => {
+  const { id, title, description } = store.editor.currentSandbox;
+
+  return (
+    <Button
+      onClick={() => {
+        signals.explore.pickSandboxModal({
+          details: {
+            id,
+            title,
+            description,
+          },
+        });
+      }}
+      style={style}
+      secondary={secondary}
+      small
+    >
+      Pick
+    </Button>
+  );
+};
+
 const ShareButton = ({ signals, secondary, style }: ButtonProps) => (
   <Button
     onClick={() => {
@@ -217,12 +240,24 @@ const Header = ({ store, signals, zenMode }: Props) => {
             likeCount={store.editor.currentSandbox.likeCount}
           />
         )}
+
+        {store.user &&
+          store.user.curatorAt && (
+            <PickButton
+              style={{ fontSize: '.75rem' }}
+              secondary={sandbox.owned}
+              signals={signals}
+              store={store}
+            />
+          )}
+
         <ShareButton
           style={{ fontSize: '.75rem', margin: '0 1rem' }}
           signals={signals}
           secondary={!sandbox.owned}
           store={store}
         />
+
         <ForkButton
           secondary={sandbox.owned}
           isForking={store.editor.isForkingSandbox}