Skip to content

Commit 821a532

Browse files
MichaelDeBoeyMichaelDeBoey
committed
🔨 Switch Navigation to use useOvermind
1 parent 8c60188 commit 821a532

File tree

10 files changed

+229
-148
lines changed

10 files changed

+229
-148
lines changed

‎packages/app/src/app/components/Overlay/Overlay.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,12 @@ interface IOverlayProps {
1313
noHeightAnimation?: boolean;
1414
}
1515

16+
const noop = () => undefined;
1617
export const Overlay: React.FC<IOverlayProps> = ({
1718
event,
1819
isOpen,
19-
onOpen = () => {},
20-
onClose = () => {},
20+
onOpen = noop,
21+
onClose = noop,
2122
children,
2223
content: Content,
2324
noHeightAnimation = true,

‎packages/app/src/app/overmind/namespaces/userNotifications/actions.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,11 @@ import * as internalActions from './internalActions';
55

66
export const internal = internalActions;
77

8-
export const notificationsOpened: AsyncAction = async ({ state, effects }) => {
8+
export const notificationsOpened: AsyncAction = async ({ state }) => {
99
state.userNotifications.notificationsOpened = true;
1010
state.userNotifications.unreadCount = 0;
11-
client.mutate({
11+
12+
await client.mutate({
1213
mutation: gql`
1314
mutation ClearNotificationCount {
1415
clearNotificationCount {

‎packages/app/src/app/pages/common/Navigation/Actions/ExploreAction.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import Tooltip from '@codesandbox/common/lib/components/Tooltip';
2+
import { exploreUrl } from '@codesandbox/common/lib/utils/url-generator';
3+
import React, { FunctionComponent } from 'react';
4+
import FlameIcon from 'react-icons/lib/go/flame';
5+
import { Link } from 'react-router-dom';
6+
7+
import { Action } from '../elements';
8+
9+
export const ExploreAction: FunctionComponent = () => (
10+
<Action>
11+
<Tooltip content="Explore Sandboxes" placement="bottom">
12+
<Link style={{ color: 'white' }} to={exploreUrl()}>
13+
<FlameIcon height={35} />
14+
</Link>
15+
</Tooltip>
16+
</Action>
17+
);

‎packages/app/src/app/pages/common/Navigation/Actions/NewSandboxAction.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import Tooltip from '@codesandbox/common/lib/components/Tooltip';
2+
import React, { FunctionComponent } from 'react';
3+
import PlusIcon from 'react-icons/lib/go/plus';
4+
5+
import { useOvermind } from 'app/overmind';
6+
7+
import { Action } from '../elements';
8+
9+
export const NewSandboxAction: FunctionComponent = () => {
10+
const {
11+
actions: { modalOpened },
12+
} = useOvermind();
13+
14+
return (
15+
<Action
16+
aria-label="New Sandbox"
17+
as="button"
18+
onClick={() => modalOpened({ modal: 'newSandbox' })}
19+
style={{ fontSize: '1.125rem' }}
20+
>
21+
<Tooltip content="New Sandbox" placement="bottom">
22+
<PlusIcon height={35} />
23+
</Tooltip>
24+
</Action>
25+
);
26+
};

‎packages/app/src/app/pages/common/Navigation/Actions/PatronAction.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import Tooltip from '@codesandbox/common/lib/components/Tooltip';
2+
import { patronUrl } from '@codesandbox/common/lib/utils/url-generator';
3+
import React, { FunctionComponent } from 'react';
4+
import { Link } from 'react-router-dom';
5+
6+
// @ts-ignore
7+
import PatronBadge from '-!svg-react-loader!@codesandbox/common/lib/utils/badges/svg/patron-4.svg';
8+
9+
import { Action } from '../elements';
10+
11+
export const PatronAction: FunctionComponent = () => (
12+
<Action>
13+
<Tooltip content="Support CodeSandbox" placement="bottom">
14+
<Link to={patronUrl()}>
15+
<PatronBadge height={40} width={40} />
16+
</Link>
17+
</Tooltip>
18+
</Action>
19+
);

‎packages/app/src/app/pages/common/Navigation/Actions/SearchAction.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import Tooltip from '@codesandbox/common/lib/components/Tooltip';
2+
import { searchUrl } from '@codesandbox/common/lib/utils/url-generator';
3+
import React, { FunctionComponent } from 'react';
4+
import SearchIcon from 'react-icons/lib/go/search';
5+
import Media from 'react-media';
6+
import { Link } from 'react-router-dom';
7+
8+
import { HeaderSearchBar } from 'app/components/HeaderSearchBar';
9+
10+
import { Action } from '../elements';
11+
12+
type Props = {
13+
searchNoInput?: boolean;
14+
};
15+
export const SearchAction: FunctionComponent<Props> = ({ searchNoInput }) => (
16+
<Action>
17+
<Media query="(max-width: 920px)">
18+
{matches =>
19+
matches || searchNoInput ? (
20+
<Tooltip content="Search All Sandboxes" placement="bottom">
21+
<Link
22+
aria-label="Search All Sandboxes"
23+
style={{ color: 'white' }}
24+
to={searchUrl()}
25+
>
26+
<SearchIcon height={35} />
27+
</Link>
28+
</Tooltip>
29+
) : (
30+
<HeaderSearchBar />
31+
)
32+
}
33+
</Media>
34+
</Action>
35+
);

‎packages/app/src/app/pages/common/Navigation/Actions/ShowNotificationsAction.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import Tooltip from '@codesandbox/common/lib/components/Tooltip';
2+
import React, { FunctionComponent, MouseEvent } from 'react';
3+
import BellIcon from 'react-icons/lib/md/notifications';
4+
5+
import { useOvermind } from 'app/overmind';
6+
7+
import { Action, UnreadIcon } from '../elements';
8+
9+
type Props = {
10+
openNotifications: (event: MouseEvent<HTMLDivElement>) => void;
11+
};
12+
export const ShowNotificationsAction: FunctionComponent<Props> = ({
13+
openNotifications,
14+
}) => {
15+
const {
16+
state: {
17+
userNotifications: { unreadCount },
18+
},
19+
} = useOvermind();
20+
21+
return (
22+
<Action
23+
aria-label={unreadCount > 0 ? 'Show Notifications' : 'No Notifications'}
24+
as="button"
25+
onClick={openNotifications}
26+
style={{ fontSize: '1.25rem', position: 'relative' }}
27+
>
28+
<Tooltip
29+
content={unreadCount > 0 ? 'Show Notifications' : 'No Notifications'}
30+
placement="bottom"
31+
>
32+
<BellIcon height={35} />
33+
34+
{unreadCount > 0 && <UnreadIcon />}
35+
</Tooltip>
36+
</Action>
37+
);
38+
};

‎packages/app/src/app/pages/common/Navigation/Actions/index.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export { ExploreAction } from './ExploreAction';
2+
export { NewSandboxAction } from './NewSandboxAction';
3+
export { PatronAction } from './PatronAction';
4+
export { SearchAction } from './SearchAction';
5+
export { ShowNotificationsAction } from './ShowNotificationsAction';

‎packages/app/src/app/pages/common/Navigation/elements.ts‎

Lines changed: 38 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import styled, { css } from 'styled-components';
22
import Logo from '@codesandbox/common/lib/components/Logo';
3-
import Row from '@codesandbox/common/lib/components/flex/Row';
3+
import RowBase from '@codesandbox/common/lib/components/flex/Row';
44

55
export const LogoWithBorder = styled(Logo)`
66
padding-right: 1rem;
@@ -30,20 +30,20 @@ export const Actions = styled.div`
3030
`;
3131

3232
export const Action = styled.div<{ noHover?: boolean }>`
33-
display: flex;
34-
justify-content: center;
35-
align-items: center;
36-
transition: 0.3s ease all;
37-
margin: 0 1rem;
38-
cursor: pointer;
39-
color: white;
40-
opacity: 0.8;
41-
background: transparent;
42-
border: none;
43-
padding: 0;
33+
${({ noHover }) => css`
34+
display: flex;
35+
justify-content: center;
36+
align-items: center;
37+
transition: 0.3s ease all;
38+
margin: 0 1rem;
39+
cursor: pointer;
40+
color: white;
41+
opacity: 0.8;
42+
background: transparent;
43+
border: none;
44+
padding: 0;
4445
45-
${props =>
46-
props.noHover
46+
${noHover
4747
? css`
4848
color: rgba(255, 255, 255, 0.8);
4949
opacity: 1;
@@ -53,25 +53,40 @@ export const Action = styled.div<{ noHover?: boolean }>`
5353
opacity: 1;
5454
}
5555
`};
56+
`};
5657
`;
5758

5859
export const UnreadIcon = styled.div`
59-
position: absolute;
60-
width: 8px;
61-
height: 8px;
62-
border-radius: 50%;
63-
background-color: ${props => props.theme.secondary};
60+
${({ theme }) => css`
61+
position: absolute;
62+
width: 8px;
63+
height: 8px;
64+
border-radius: 50%;
65+
background-color: ${theme.secondary};
66+
67+
top: 4px;
68+
right: 0;
69+
`};
70+
`;
6471

65-
top: 4px;
66-
right: 0;
72+
export const Row = styled(RowBase)<{ float?: boolean }>`
73+
${({ float }) =>
74+
float &&
75+
css`
76+
position: absolute;
77+
left: 0;
78+
top: 0;
79+
right: 0;
80+
padding: 1rem;
81+
`};
6782
`;
6883

69-
export const TitleWrapper = styled(Row)`
84+
export const TitleWrapper = styled(RowBase)`
7085
position: relative;
7186
z-index: 10;
7287
`;
7388

74-
export const Wrapper = styled(Row)`
89+
export const Wrapper = styled(RowBase)`
7590
position: relative;
7691
z-index: 10;
7792
@media (max-width: 768px) {

0 commit comments

Comments
 (0)