codesandbox · CompuIves · Jul 21, 2017 · Jul 6, 2017 · Jul 6, 2017 · Jul 7, 2017
diff --git a/package.json b/package.json
@@ -106,6 +106,7 @@
     "react-dnd-html5-backend": "^2.4.1",
     "react-dom": "^15.6.1",
     "react-icons": "^2.2.5",
+    "react-instantsearch": "^4.0.6",
     "react-loadable": "^3.3.1",
     "react-modal": "^2.2.1",
     "react-motion": "^0.5.0",

diff --git a/src/app/pages/Profile/MaxWidth.js → src/app/components/flex/MaxWidth.js b/src/app/pages/Profile/MaxWidth.js → src/app/components/flex/MaxWidth.js
diff --git a/src/app/components/sandbox/DeleteSandboxButton.js b/src/app/components/sandbox/DeleteSandboxButton.js
@@ -4,13 +4,13 @@ import styled from 'styled-components';
 import DeleteIcon from 'react-icons/lib/md/delete';
 import Tooltip from 'app/components/Tooltip';
 
-const DeleteSandboxButton = styled((props) => (
+const DeleteSandboxButton = styled(props =>
   <Tooltip title="Delete Sandbox">
     <button {...props}>
       <DeleteIcon />
     </button>
-  </Tooltip>
-))`
+  </Tooltip>,
+)`
   font-size: 1.2em;
   background-color: inherit;
   border: none;
@@ -23,20 +23,18 @@ const DeleteSandboxButton = styled((props) => (
 `;
 
 type Props = {
-  onDelete: Function;
-  id: string;
+  onDelete: Function,
+  id: string,
 };
 
 export default class DeleteSandboxButtonContainer extends React.PureComponent {
   props: Props;
 
   deleteSandbox = () => {
     this.props.onDelete(this.props.id);
-  }
+  };
 
   render() {
-    return (
-      <DeleteSandboxButton {...this.props} onClick={this.deleteSandbox} />
-    )
+    return <DeleteSandboxButton {...this.props} onClick={this.deleteSandbox} />;
   }
 }
diff --git a/src/app/components/sandbox/SandboxList.js b/src/app/components/sandbox/SandboxList.js
@@ -66,39 +66,58 @@ const SandboxRow = styled.tr`
 `;
 
 type Props = {
-  isCurrentUser: boolean;
-  sandboxes: Array<SmallSandbox>;
-  onDelete: Function;
+  isCurrentUser: boolean,
+  sandboxes: Array<SmallSandbox>,
+  onDelete: Function,
 };
 
-export default ({ sandboxes, isCurrentUser, onDelete }: Props) => (
+export default ({ sandboxes, isCurrentUser, onDelete }: Props) =>
   <Table>
     <thead>
       <tr style={{ height: '3rem' }}>
         <HeaderTitle>Title</HeaderTitle>
         <HeaderTitle>Created</HeaderTitle>
         <HeaderTitle>Updated</HeaderTitle>
-        <StatTitle><FullHeartIcon /></StatTitle>
-        <StatTitle><EyeIcon /></StatTitle>
-        <StatTitle><ForkIcon /></StatTitle>
+        <StatTitle>
+          <FullHeartIcon />
+        </StatTitle>
+        <StatTitle>
+          <EyeIcon />
+        </StatTitle>
+        <StatTitle>
+          <ForkIcon />
+        </StatTitle>
         {isCurrentUser && <HeaderTitle />}
       </tr>
     </thead>
     <Body>
-      {sandboxes.map((s, i) => (
+      {sandboxes.map((s, i) =>
         <SandboxRow index={i} key={s.id}>
-          <td><Link to={sandboxUrl(s)}>{s.title || s.id}</Link></td>
-          <td>{moment(s.insertedAt).format('ll')}</td>
-          <td>{moment(s.updatedAt).format('ll')}</td>
-          <StatBody>{s.likeCount}</StatBody>
-          <StatBody>{s.viewCount}</StatBody>
-          <StatBody>{s.forkCount}</StatBody>
+          <td>
+            <Link to={sandboxUrl(s)}>
+              {s.title || s.id}
+            </Link>
+          </td>
+          <td>
+            {moment(s.insertedAt).format('ll')}
+          </td>
+          <td>
+            {moment(s.updatedAt).format('ll')}
+          </td>
+          <StatBody>
+            {s.likeCount}
+          </StatBody>
+          <StatBody>
+            {s.viewCount}
+          </StatBody>
+          <StatBody>
+            {s.forkCount}
+          </StatBody>
           {isCurrentUser &&
-            <StatBody style={{padding: '0.55rem 0.5rem', cursor: 'pointer'}}>
+            <StatBody style={{ padding: '0.55rem 0.5rem', cursor: 'pointer' }}>
               <DeleteSandboxButton id={s.id} onDelete={onDelete} />
             </StatBody>}
-        </SandboxRow>
-      ))}
+        </SandboxRow>,
+      )}
     </Body>
-  </Table>
-);
+  </Table>;
diff --git a/src/app/components/user/UserWithAvatar.js b/src/app/components/user/UserWithAvatar.js
@@ -26,8 +26,8 @@ type Props = {
   username: string,
 };
 
-export default ({ avatarUrl, username }: Props) =>
-  <CenteredText>
+export default ({ avatarUrl, username, ...props }: Props) =>
+  <CenteredText {...props}>
     <Image src={avatarUrl} alt={username} />
     <AuthorName>
       {username}

diff --git a/src/app/containers/Navigation/index.js b/src/app/containers/Navigation/index.js
@@ -7,6 +7,7 @@ import type { CurrentUser } from 'common/types';
 import { Link } from 'react-router-dom';
 
 import GithubIcon from 'react-icons/lib/go/mark-github';
+import SearchIcon from 'react-icons/lib/md/search';
 
 import Button from 'app/components/buttons/Button';
 import Logo from 'app/components/Logo';
@@ -16,7 +17,7 @@ import userActionCreators from 'app/store/user/actions';
 import Tooltip from 'app/components/Tooltip';
 
 import User from './User';
-import { newSandboxUrl } from '../../utils/url-generator';
+import { newSandboxUrl, searchUrl } from '../../utils/url-generator';
 
 const LogoWithBorder = styled(Logo)`
   padding-right: 1rem;
@@ -36,9 +37,16 @@ const Title = styled.h1`
   font-weight: 300;
 `;
 
+const Actions = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0 1rem;
+`;
+
 const Action = styled.div`
   transition: 0.3s ease all;
-  margin: 0 2rem;
+  margin: 0 1rem;
   cursor: pointer;
   color: white;
 
@@ -47,6 +55,13 @@ const Action = styled.div`
   }
 `;
 
+const Icon = styled(Link)`
+  color: inherit;
+  text-decoration: none;
+  font-size: 1.25rem;
+  font-weight: 300;
+`;
+
 const PlusIcon = styled(Link)`
   color: inherit;
   text-decoration: none;
@@ -85,11 +100,20 @@ class Navigation extends React.PureComponent {
           </Title>
         </Row>
         <Row>
-          <Action>
-            <Tooltip title="New Sandbox">
-              <PlusIcon to={newSandboxUrl()}>+</PlusIcon>
-            </Tooltip>
-          </Action>
+          <Actions>
+            <Action>
+              <Tooltip title="Search">
+                <Icon to={searchUrl()}>
+                  <SearchIcon />
+                </Icon>
+              </Tooltip>
+            </Action>
+            <Action>
+              <Tooltip title="New Sandbox">
+                <PlusIcon to={newSandboxUrl()}>+</PlusIcon>
+              </Tooltip>
+            </Action>
+          </Actions>
           {hasLogin
             ? <User signOut={userActions.signOut} user={user} />
             : <Button small onClick={userActions.signIn}>

diff --git a/src/app/pages/Profile/Header/index.js b/src/app/pages/Profile/Header/index.js
@@ -3,16 +3,16 @@ import styled from 'styled-components';
 import Navigation from 'app/containers/Navigation';
 import Padding from 'app/components/spacing/Padding';
 import Margin from 'app/components/spacing/Margin';
+import MaxWidth from 'app/components/flex/MaxWidth';
 
 import type { User } from 'common/types';
 
 import UserInfo from './UserInfo';
-import MaxWidth from '../MaxWidth';
 
 const Top = styled.div`
   display: flex;
-  background-image: linear-gradient(-180deg, #121415 0%, #1F2224 100%);
-  box-shadow: inset 0 -3px 4px 0 rgba(0,0,0,0.50);
+  background-image: linear-gradient(-180deg, #121415 0%, #1f2224 100%);
+  box-shadow: inset 0 -3px 4px 0 rgba(0, 0, 0, 0.50);
 
   width: 100%;
   justify-content: center;

diff --git a/src/app/pages/Profile/Sandboxes/index.js b/src/app/pages/Profile/Sandboxes/index.js
@@ -29,7 +29,7 @@ type Props = {
   fetchSandboxes: Function,
   sandboxes: PaginatedSandboxes,
   sandboxActions: typeof sandboxActionCreators,
-  isCurrentUser: boolean;
+  isCurrentUser: boolean,
 };
 
 class Sandboxes extends React.PureComponent {
@@ -110,7 +110,4 @@ const mapDispatchToProps = dispatch => ({
   sandboxActions: bindActionCreators(sandboxActionCreators, dispatch),
 });
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(Sandboxes);
+export default connect(mapStateToProps, mapDispatchToProps)(Sandboxes);
diff --git a/src/app/pages/Profile/index.js b/src/app/pages/Profile/index.js
@@ -6,6 +6,7 @@ import { bindActionCreators } from 'redux';
 import { createSelector } from 'reselect';
 import styled from 'styled-components';
 
+import MaxWidth from 'app/components/flex/MaxWidth';
 import Fullscreen from 'app/components/flex/Fullscreen';
 import userActionCreators from 'app/store/entities/users/actions';
 import { currentUserSelector } from 'app/store/user/selectors';
@@ -16,7 +17,6 @@ import { profileSandboxesUrl, profileLikesUrl } from 'app/utils/url-generator';
 
 import NotFound from 'app/pages/NotFound';
 
-import MaxWidth from './MaxWidth';
 import Header from './Header';
 import Navigation from './Navigation';
 import Showcase from './Showcase';

diff --git a/src/app/pages/Sandbox/Editor/Content/Header/index.js b/src/app/pages/Sandbox/Editor/Content/Header/index.js
@@ -10,12 +10,17 @@ import ChevronLeft from 'react-icons/lib/md/chevron-left';
 import HeartIcon from 'react-icons/lib/fa/heart-o';
 import FullHeartIcon from 'react-icons/lib/fa/heart';
 import TwitterIcon from 'react-icons/lib/fa/twitter';
+import SearchIcon from 'react-icons/lib/go/search';
 import { Tooltip } from 'react-tippy';
 
 import type { Sandbox, CurrentUser } from 'common/types';
 import sandboxActionCreators from 'app/store/entities/sandboxes/actions';
 import userActionCreators from 'app/store/user/actions';
-import { newSandboxUrl, importFromGitHubUrl } from 'app/utils/url-generator';
+import {
+  searchUrl,
+  newSandboxUrl,
+  importFromGitHubUrl,
+} from 'app/utils/url-generator';
 import ModeIcons from 'app/components/sandbox/ModeIcons';
 
 import User from 'app/containers/Navigation/User';
@@ -206,6 +211,7 @@ export default class Header extends React.PureComponent {
             tooltip="Import from GitHub"
             Icon={GithubIcon}
           />
+          <Action href={searchUrl()} tooltip="Search" Icon={SearchIcon} />
           <Action
             href={newSandboxUrl()}
             tooltip="New Sandbox"

diff --git a/src/app/pages/Sandbox/Editor/Workspace/Tags/Tag.js b/src/app/pages/Sandbox/Editor/Workspace/Tags/Tag.js
@@ -0,0 +1,53 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+
+import CrossIcon from 'react-icons/lib/md/clear';
+
+const Container = styled.span`
+  position: relative;
+  color: white;
+  font-size: .875rem;
+  background-color: ${props => props.theme.secondary};
+  padding: .3em .5em;
+  border-radius: 4px;
+  font-weight: 400;
+
+  ${props => props.canRemove && css`padding-right: 1.5rem;`};
+`;
+
+const DeleteIcon = styled(CrossIcon)`
+  transition: 0.3s ease all;
+  position: absolute;
+  right: .3rem;
+  top: 0;
+  bottom: 0;
+
+  margin: auto;
+  cursor: pointer;
+  color: rgba(255, 255, 255, 0.5);
+
+  &:hover {
+    color: white;
+  }
+`;
+
+export default class Tag extends React.PureComponent {
+  props: {
+    tag: string,
+    removeTag: (tag: string) => void,
+  };
+
+  removeTag = () => {
+    this.props.removeTag(this.props.tag);
+  };
+
+  render() {
+    const { tag, removeTag } = this.props;
+    return (
+      <Container canRemove={removeTag}>
+        {tag}
+        {removeTag && <DeleteIcon onClick={this.removeTag} />}
+      </Container>
+    );
+  }
+}