change search to new cards

Author: SaraVieira

package.json

@@ -15,6 +15,7 @@
     "start:fast": "lerna run start --scope app --stream",
     "start:vscode": "VSCODE=1 yarn start:fast & cd standalone-packages/monaco-editor && yarn simpleserver & cd standalone-packages/vscode && yarn watch",
     "start:dynamic": "lerna run dev --scope dynamic-pages --stream",
+    "start:common": "lerna run start --scope common --stream",
     "start:home": "lerna run start --scope homepage --stream",
     "start:test": "lerna run start:test --scope app --stream",
     "start:dev_api": "lerna run start:dev_api --scope app --stream",

packages/app/src/app/pages/Search/ResultInfo/index.js

@@ -6,7 +6,11 @@ import { ClearAllContainer } from './elements';
 function ResultInfo() {
   return (
     <div style={{ marginBottom: '1rem', fontSize: '.875rem' }}>
-      <Stats />
+      <Stats
+        translations={{
+          stats: nbHits => `${nbHits.toLocaleString()} results found`,
+        }}
+      />
       <ClearAllContainer>
         <ClearRefinements />
       </ClearAllContainer>

packages/app/src/app/pages/Search/Results/index.js

@@ -2,17 +2,30 @@ import React from 'react';
 
 import { Hits, Pagination } from 'react-instantsearch/dom';
 import Centered from '@codesandbox/common/lib/components/flex/Centered';
+import WideSandbox from '@codesandbox/common/lib/components/WideSandbox';
+import { sandboxUrl } from '@codesandbox/common/lib/utils/url-generator';
 
 import ResultInfo from '../ResultInfo';
-import SandboxCard from '../SandboxCard';
-
 import { Container } from './elements';
 
 function Results() {
   return (
     <Container>
       <ResultInfo />
-      <Hits hitComponent={SandboxCard} />
+      <Hits
+        hitComponent={({ hit }) => (
+          <WideSandbox
+            selectSandbox={() =>
+              window.open(sandboxUrl({ id: hit.objectID, git: hit.git }))
+            }
+            sandbox={{
+              ...hit,
+              title: hit.title || hit.objectID,
+              id: hit.objectID,
+            }}
+          />
+        )}
+      />
       <Centered horizontal>
         <Pagination />
       </Centered>

packages/app/src/app/pages/Search/SandboxCard/SandboxInfo/Stat/elements.js

@@ -350,3 +350,16 @@
   appearance: none;
   border: 1px solid rgba(0, 0, 0, 0.1);
 }
+
+.ais-Hits .ais-Hits-list {
+  display: grid;
+  grid-gap: 2rem;
+  grid-template-columns: 400px 1fr;
+  margin-top: 2rem;
+}
+
+@media screen and (max-width: 1100px) {
+  .ais-Hits-list {
+    grid-template-columns: 1fr;
+  }
+}

packages/app/src/app/pages/Search/SandboxCard/SandboxInfo/Stat/index.js

@@ -34,7 +34,7 @@ export type Props = {
   small?: boolean;
   defaultHeight?: number;
   noMargin?: boolean;
-  pickSandbox: (
+  selectSandbox: (
     params: {
       id: string;
       title: string;
@@ -66,7 +66,7 @@ export default class WideSandbox extends React.PureComponent<Props> {
   };
 
   toggleOpen = () => {
-    this.props.pickSandbox({
+    this.props.selectSandbox({
       id: this.props.sandbox.id,
       title: this.getTitle(),
       description: this.getDescription(),

packages/app/src/app/pages/Search/search.css

@@ -55,7 +55,7 @@ const Profile = ({ profile, liked, showcased }) =>
                 noMargin
                 small
                 key={sandbox.id}
-                pickSandbox={({ id }) => openSandbox(id)}
+                selectSandbox={({ id }) => openSandbox(id)}
                 sandbox={sandbox}
               />
             ))}
@@ -86,7 +86,7 @@ const Profile = ({ profile, liked, showcased }) =>
                   defaultHeight={170}
                   small
                   key={sandbox.id}
-                  pickSandbox={({ id }) => openSandbox(id)}
+                  selectSandbox={({ id }) => openSandbox(id)}
                   sandbox={sandbox}
                 />
               ))}

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

@@ -105,7 +105,7 @@ const Sandboxes = ({ data, fetchUrl, profile, currentTab }) => {
               <WideSandbox
                 small
                 key={sandbox.id}
-                pickSandbox={({ id }) => openSandbox(id)}
+                selectSandbox={({ id }) => openSandbox(id)}
                 sandbox={sandbox}
               />
             ))}

packages/dynamic-pages/pages/profile/index.js

@@ -242,7 +242,7 @@ export default class Explore extends React.PureComponent {
                       // We force i here so we reuse the existing components
                       // eslint-disable-next-line react/no-array-index-key,no-console
                       key={i}
-                      pickSandbox={this.selectSandbox}
+                      selectSandbox={this.selectSandbox}
                       sandbox={sandbox}
                     />
                   ))