SandboxCard: refactor and remove observing (codesandbox#3181)

Author: christianalfoni

…pp/pages/Curator/SandboxCard/elements.js …pp/pages/Curator/SandboxCard/elements.tspackages/app/src/app/pages/Curator/SandboxCard/elements.js renamed to packages/app/src/app/pages/Curator/SandboxCard/elements.ts packages/app/src/app/pages/Curator/SandboxCard/elements.js renamed to packages/app/src/app/pages/Curator/SandboxCard/elements.ts

@@ -1,36 +1,40 @@
 import getTemplate from '@codesandbox/common/lib/templates';
+import { GitInfo, User } from '@codesandbox/common/lib/types';
 import {
-  sandboxUrl,
   profileUrl,
+  sandboxUrl,
 } from '@codesandbox/common/lib/utils/url-generator';
-import { observer } from 'app/componentConnectors';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import EyeIcon from 'react-icons/lib/fa/eye';
 import GithubIcon from 'react-icons/lib/fa/github';
 
 import {
-  Container,
-  SandboxImageContainer,
-  SandboxImage,
-  SandboxInfo,
-  ImageMessage,
-  SandboxTitle,
   Avatar,
+  Container,
   Details,
   FlexCenter,
+  ImageMessage,
   Pick,
+  SandboxImage,
+  SandboxImageContainer,
+  SandboxInfo,
+  SandboxTitle,
 } from './elements';
 
-type Props = {
-  author: object,
-  description: string,
-  git: object,
-  id: string,
-  title: string,
-  viewCount: number,
-};
-
-const SandboxCard = ({
+interface Props {
+  author: User;
+  description: string;
+  git: GitInfo;
+  id: string;
+  title: string;
+  viewCount: number;
+  picks: any[];
+  pickSandbox: (id: string, title: string, description: string) => void;
+  screenshotUrl: string;
+  template: any;
+}
+
+export const SandboxCard: React.FC<Props> = ({
   author,
   description,
   git,
@@ -41,7 +45,7 @@ const SandboxCard = ({
   template,
   title,
   viewCount,
-}: Props) => {
+}) => {
   const [screenShotURL, setScreenShotURL] = useState(screenshotUrl);
   const screenShotTimeout = useRef(null);
 
@@ -67,7 +71,7 @@ const SandboxCard = ({
   }, [checkScreenShot]);
 
   const openSandbox = useCallback(() => {
-    const url = sandboxUrl({ id });
+    const url = sandboxUrl({ id, alias: null });
 
     window.open(url, '_blank');
   }, [id]);
@@ -168,5 +172,3 @@ const SandboxCard = ({
     </div>
   );
 };
-
-export default observer(SandboxCard);

…c/app/pages/Curator/SandboxCard/index.js …/app/pages/Curator/SandboxCard/index.tsxpackages/app/src/app/pages/Curator/SandboxCard/index.js renamed to packages/app/src/app/pages/Curator/SandboxCard/index.tsx packages/app/src/app/pages/Curator/SandboxCard/index.js renamed to packages/app/src/app/pages/Curator/SandboxCard/index.tsx

@@ -1,6 +1,11 @@
+import 'react-day-picker/lib/style.css';
+
 import { Button } from '@codesandbox/common/lib/components/Button';
 import MaxWidth from '@codesandbox/common/lib/components/flex/MaxWidth';
 import Margin from '@codesandbox/common/lib/components/spacing/Margin';
+import { SubTitle } from 'app/components/SubTitle';
+import { useOvermind } from 'app/overmind';
+import { Navigation } from 'app/pages/common/Navigation';
 import { format, getTime, subMonths, subWeeks } from 'date-fns';
 import React, {
   FunctionComponent,
@@ -9,20 +14,15 @@ import React, {
   useState,
 } from 'react';
 import DayPicker from 'react-day-picker';
-import 'react-day-picker/lib/style.css';
-
-import { useOvermind } from 'app/overmind';
-import { SubTitle } from 'app/components/SubTitle';
-import { Navigation } from 'app/pages/common/Navigation';
 
 import {
-  Container,
   Buttons,
+  Container,
   DelayedAnimation,
   Heading,
   PickerWrapper,
 } from './elements';
-import SandboxCard from './SandboxCard';
+import { SandboxCard } from './SandboxCard';
 
 export const Curator: FunctionComponent = () => {
   const {

packages/app/src/app/pages/Curator/index.tsx

@@ -255,6 +255,7 @@ export type MiniSandbox = {
   description: string;
   git: GitInfo;
   author: User;
+  screenshotUrl: string;
 };
 
 export type GitCommit = {