🔨 Switch Profile/Navigation to use useOvermind (codesandbox#3408)

Author: MichaelDeBoey

packages/app/src/app/pages/Profile/Navigation/elements.js

@@ -0,0 +1,38 @@
+import Row from '@codesandbox/common/lib/components/flex/Row';
+import delayEffect from '@codesandbox/common/lib/utils/animation/delay-effect';
+import { NavLink } from 'react-router-dom';
+import styled, { css } from 'styled-components';
+
+export const NavigationLink = styled(NavLink).attrs({
+  activeStyle: {
+    color: 'white',
+  },
+})<{ isLast?: boolean }>`
+  ${({ isLast = false }) => css`
+    transition: 0.3s ease all;
+
+    display: block;
+    color: white;
+    padding: 0 4rem;
+    margin: 1.5rem 0;
+    font-size: 1.25rem;
+    font-weight: 300;
+    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
+    color: rgba(255, 255, 255, 0.5);
+    text-decoration: none;
+
+    ${!isLast &&
+      css`
+        border-right: 1px solid rgba(255, 255, 255, 0.2);
+      `};
+
+    ${delayEffect(0.2)};
+    &:hover {
+      color: white;
+    }
+  `};
+`;
+
+export const CenteredRow = styled(Row)`
+  width: 100%;
+`;

packages/app/src/app/pages/Profile/Navigation/elements.ts

@@ -0,0 +1,31 @@
+import React, { FunctionComponent } from 'react';
+
+import { useOvermind } from 'app/overmind';
+
+import { NavigationLink, CenteredRow } from './elements';
+
+export const Navigation: FunctionComponent = () => {
+  const {
+    state: {
+      profile: {
+        current: { givenLikeCount, sandboxCount, username },
+      },
+    },
+  } = useOvermind();
+
+  return (
+    <CenteredRow alignItems="center" justifyContent="center">
+      <NavigationLink exact to={`/u/${username}`}>
+        SHOWCASE
+      </NavigationLink>
+
+      <NavigationLink to={`/u/${username}/sandboxes`}>
+        SANDBOXES ({sandboxCount})
+      </NavigationLink>
+
+      <NavigationLink isLast to={`/u/${username}/likes`}>
+        LIKES ({givenLikeCount})
+      </NavigationLink>
+    </CenteredRow>
+  );
+};

packages/app/src/app/pages/Profile/Navigation/index.js

@@ -12,7 +12,7 @@ import { NotFound } from 'app/pages/common/NotFound';
 
 import { Container, Content, Margin } from './elements';
 import Header from './Header';
-import Navigation from './Navigation';
+import { Navigation } from './Navigation';
 import { Sandboxes } from './Sandboxes';
 import { Showcase } from './Showcase';
 
@@ -54,11 +54,7 @@ export const Profile: FunctionComponent<Props> = ({
 
       <Content>
         <MaxWidth>
-          <Navigation
-            likeCount={user.givenLikeCount}
-            sandboxCount={user.sandboxCount}
-            username={user.username}
-          />
+          <Navigation />
         </MaxWidth>
       </Content>