🔨 Switch Search to use useOvermind (codesandbox#3048)

* 🔨 Switch Search to use useOvermind

* Use RouteComponentProps types

* Export Search as a named export

* Update search.ts


Co-authored-by: Sara Vieira <[email protected]>

Author: MichaelDeBoey

packages/app/src/app/pages/Search/elements.js

@@ -0,0 +1,38 @@
+import Row from '@codesandbox/common/lib/components/flex/Row';
+import styled, { css } from 'styled-components';
+
+import { Title as TitleBase } from 'app/components/Title';
+
+export const Content = styled.div`
+  margin-top: 5%;
+  text-align: left;
+  color: white;
+`;
+
+export const Title = styled(TitleBase)`
+  ${({ theme }) => css`
+    font-family: 'Poppins', sans-serif;
+    font-weight: 600;
+    font-size: 36px;
+    display: flex;
+    color: ${theme.lightText};
+    margin-bottom: 16px;
+  `};
+`;
+
+export const Main = styled(Row)`
+  display: grid;
+  grid-template-columns: 1fr 340px;
+  grid-gap: 24px;
+
+  @media (max-width: 768px) {
+    grid-template-columns: 1fr;
+  }
+`;
+
+export const Container = styled.div`
+  ${({ theme }) => css`
+    background: ${theme.background5};
+    width: 100vw;
+  `};
+`;

packages/app/src/app/pages/Search/elements.ts

@@ -3,46 +3,47 @@ import {
   ALGOLIA_APPLICATION_ID,
   ALGOLIA_DEFAULT_INDEX,
 } from '@codesandbox/common/lib/utils/config';
-import { Helmet } from 'react-helmet';
 import MaxWidth from '@codesandbox/common/lib/components/flex/MaxWidth';
 import Margin from '@codesandbox/common/lib/components/spacing/Margin';
+import { RouteComponentProps } from 'react-router-dom';
 import qs from 'qs';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, {
+  FunctionComponent,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { Helmet } from 'react-helmet';
 import {
+  Configure,
   InstantSearch,
-  SearchBox,
   PoweredBy,
-  Configure,
+  SearchBox,
 } from 'react-instantsearch/dom';
-import { History, Location } from 'history';
 
-import { Navigation } from 'app/pages/common/Navigation';
 import { useOvermind } from 'app/overmind';
+import { Navigation } from 'app/pages/common/Navigation';
 
 import 'instantsearch.css/themes/reset.css';
 
-import { Container, Content, Main, StyledTitle } from './elements';
+import { Container, Content, Main, Title } from './elements';
 import Filters from './Filters';
 import Results from './Results';
 import Styles from './search';
 
-interface ISearchProps {
-  history: History;
-  location: Location;
-}
-
 const updateAfter = 700;
 
 const createURL = state => `?${qs.stringify(state)}`;
 
 const searchStateToUrl = (location, searchState) =>
   searchState ? `${location.pathname}${createURL(searchState)}` : '';
 
-const Search: React.FC<ISearchProps> = ({ history, location }) => {
+type Props = RouteComponentProps;
+export const Search: FunctionComponent<Props> = ({ history, location }) => {
   const {
     actions: { searchMounted },
   } = useOvermind();
-
   const [searchState, setSearchState] = useState(
     qs.parse(location.search.slice(1))
   );
@@ -83,6 +84,7 @@ const Search: React.FC<ISearchProps> = ({ history, location }) => {
       <Helmet>
         <title>Search - CodeSandbox</title>
       </Helmet>
+
       <Styles />
 
       <MaxWidth>
@@ -91,8 +93,8 @@ const Search: React.FC<ISearchProps> = ({ history, location }) => {
 
           <Content>
             <InstantSearch
-              appId={ALGOLIA_APPLICATION_ID}
               apiKey={ALGOLIA_API_KEY}
+              appId={ALGOLIA_APPLICATION_ID}
               createURL={createURL}
               indexName={ALGOLIA_DEFAULT_INDEX}
               onSearchStateChange={onSearchStateChange}
@@ -102,7 +104,7 @@ const Search: React.FC<ISearchProps> = ({ history, location }) => {
 
               <Main alignItems="flex-start">
                 <div>
-                  <StyledTitle>Search</StyledTitle>
+                  <Title>Search</Title>
 
                   <PoweredBy />
 
@@ -123,6 +125,3 @@ const Search: React.FC<ISearchProps> = ({ history, location }) => {
     </Container>
   );
 };
-
-// eslint-disable-next-line import/no-default-export
-export default Search;