Skip to content

Commit 9c87e7d

Browse files
MichaelDeBoeyMichaelDeBoey
authored
🔨 Switch SortOptions to use useOvermind (codesandbox#3281)
1 parent b801a3d commit 9c87e7d

File tree

9 files changed

+180
-161
lines changed

9 files changed

+180
-161
lines changed

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

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,7 @@ export const dragChanged: Action<{ isDragging: boolean }> = (
2323
state.dashboard.isDragging = isDragging;
2424
};
2525

26-
export const orderByChanged: Action<{ orderBy: OrderBy }> = (
27-
{ state },
28-
{ orderBy }
29-
) => {
26+
export const orderByChanged: Action<OrderBy> = ({ state }, orderBy) => {
3027
state.dashboard.orderBy = orderBy;
3128
};
3229

‎packages/app/src/app/overmind/namespaces/dashboard/state.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import { Sandbox } from '@codesandbox/common/lib/types';
2-
import { Derive } from 'app/overmind';
32
import { sortBy } from 'lodash-es';
43

4+
import { Derive } from 'app/overmind';
5+
56
export type OrderBy = {
6-
order: 'desc' | 'asc';
77
field: string;
8+
order: 'desc' | 'asc';
89
};
910

1011
type State = {

‎packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/FieldToName.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export const FIELD_TO_NAME = {
2+
insertedAt: 'Last Created',
3+
updatedAt: 'Last Modified',
4+
title: 'Name',
5+
};

‎packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/Overlay/Option/elements.ts‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import styled, { css } from 'styled-components';
2+
3+
export const Container = styled.a<{
4+
selected: boolean;
5+
}>`
6+
${({ selected, theme }) => css`
7+
transition: 0.3s ease color;
8+
display: flex;
9+
vertical-align: middle;
10+
align-items: center;
11+
margin-bottom: 0.5rem;
12+
color: ${theme.light ? 'rgba(0, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.7)'};
13+
text-decoration: none;
14+
cursor: pointer;
15+
font-weight: 600;
16+
17+
&:last-child {
18+
margin-bottom: 0;
19+
}
20+
21+
&:hover {
22+
color: white;
23+
}
24+
25+
${selected &&
26+
css`
27+
color: white;
28+
`};
29+
`};
30+
`;
31+
32+
export const IconContainer = styled.div`
33+
width: 1rem;
34+
margin-right: 0.5rem;
35+
`;

packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/Option.tsx renamed to packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/Overlay/Option/index.tsx

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,25 @@
1-
import React from 'react';
1+
import React, { FunctionComponent } from 'react';
22
import Check from 'react-icons/lib/md/check';
33

4-
import { IconContainer, OptionContainer } from './elements';
4+
import { Container, IconContainer } from './elements';
55

6-
interface Props {
7-
name: string;
8-
field: string;
6+
type Props = {
97
currentField: string;
8+
field: string;
9+
name: string;
1010
setField: (field: string) => void;
11-
}
12-
13-
export const Option: React.FC<Props> = ({
14-
name,
15-
field,
11+
};
12+
export const Option: FunctionComponent<Props> = ({
1613
currentField,
14+
field,
15+
name,
1716
setField,
1817
}) => {
1918
const selected = field === currentField;
2019

2120
return (
22-
<OptionContainer onClick={() => setField(field)} selected={selected}>
21+
<Container onClick={() => setField(field)} selected={selected}>
2322
<IconContainer>{selected && <Check />}</IconContainer> {name}
24-
</OptionContainer>
23+
</Container>
2524
);
2625
};

‎packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/Overlay/elements.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import styled, { css } from 'styled-components';
2+
3+
export const Container = styled.div`
4+
${({ theme }) => css`
5+
overflow: hidden;
6+
box-sizing: border-box;
7+
right: 0;
8+
text-align: left;
9+
line-height: 1.6;
10+
width: 200px;
11+
padding: 1rem;
12+
z-index: 10;
13+
color: rgba(255, 255, 255, 0.8);
14+
font-size: 0.875rem;
15+
16+
border-radius: 2px;
17+
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
18+
19+
background-color: ${theme.background};
20+
`};
21+
`;

‎packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/Overlay/index.tsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import React, { FunctionComponent } from 'react';
2+
3+
import { useOvermind } from 'app/overmind';
4+
5+
import { FIELD_TO_NAME } from '../FieldToName';
6+
7+
import { Container } from './elements';
8+
import { Option } from './Option';
9+
10+
export const Overlay: FunctionComponent = () => {
11+
const {
12+
actions: {
13+
dashboard: { orderByChanged },
14+
},
15+
state: {
16+
dashboard: {
17+
orderBy: { field: currentField, order },
18+
},
19+
},
20+
} = useOvermind();
21+
22+
const setField = (field: string) => orderByChanged({ field, order });
23+
24+
return (
25+
<Container>
26+
<Option
27+
currentField={currentField}
28+
field="title"
29+
name={FIELD_TO_NAME.title}
30+
setField={setField}
31+
/>
32+
33+
<Option
34+
currentField={currentField}
35+
field="insertedAt"
36+
name={FIELD_TO_NAME.insertedAt}
37+
setField={setField}
38+
/>
39+
40+
<Option
41+
currentField={currentField}
42+
field="updatedAt"
43+
name={FIELD_TO_NAME.updatedAt}
44+
setField={setField}
45+
/>
46+
</Container>
47+
);
48+
};

‎packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/elements.ts‎

Lines changed: 26 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,94 +1,47 @@
11
import ArrowDown from 'react-icons/lib/md/arrow-downward';
22
import styled, { css } from 'styled-components';
33

4-
export const OptionContainer = styled.a<{
5-
selected: boolean;
6-
}>`
7-
transition: 0.3s ease color;
8-
display: flex;
9-
vertical-align: middle;
10-
align-items: center;
11-
margin-bottom: 0.5rem;
12-
color: ${props =>
13-
props.theme.light ? 'rgba(0, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.7)'};
14-
text-decoration: none;
15-
cursor: pointer;
16-
font-weight: 600;
17-
18-
&:last-child {
19-
margin-bottom: 0;
20-
}
21-
22-
&:hover {
23-
color: white;
24-
}
25-
26-
${props =>
27-
props.selected &&
28-
css`
29-
color: white;
30-
`};
31-
`;
32-
33-
export const IconContainer = styled.div`
34-
width: 1rem;
35-
margin-right: 0.5rem;
36-
`;
4+
import { OrderBy } from 'app/overmind/namespaces/dashboard/state';
375

386
export const Container = styled.div<{
397
hideOrder: boolean;
408
}>`
41-
transition: 0.3s ease opacity;
42-
color: rgba(255, 255, 255, 0.6);
43-
font-size: 0.875rem;
44-
width: 175px;
45-
text-align: right;
46-
47-
${props =>
48-
props.hideOrder &&
49-
css`
50-
opacity: 0.5;
51-
pointer-events: none;
52-
`};
53-
`;
54-
55-
export const OverlayContainer = styled.div`
56-
overflow: hidden;
57-
box-sizing: border-box;
58-
right: 0;
59-
text-align: left;
60-
line-height: 1.6;
61-
width: 200px;
62-
padding: 1rem;
63-
z-index: 10;
64-
color: rgba(255, 255, 255, 0.8);
65-
font-size: 0.875rem;
66-
67-
border-radius: 2px;
68-
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
69-
70-
background-color: ${props => props.theme.background};
9+
${({ hideOrder }) => css`
10+
transition: 0.3s ease opacity;
11+
color: rgba(255, 255, 255, 0.6);
12+
font-size: 0.875rem;
13+
width: 175px;
14+
text-align: right;
15+
16+
${hideOrder &&
17+
css`
18+
opacity: 0.5;
19+
pointer-events: none;
20+
`};
21+
`};
7122
`;
7223

7324
export const OrderName = styled.span`
7425
transition: 0.3s ease color;
7526
color: rgba(255, 255, 255, 0.8);
76-
7727
cursor: pointer;
7828
7929
&:hover {
8030
color: white;
8131
}
8232
`;
8333

84-
export const Arrow = styled(ArrowDown)`
85-
transition: 0.3s ease all;
34+
export const Arrow = styled(ArrowDown)<{ order: OrderBy['order'] }>`
35+
${({ order }) => css`
36+
transition: 0.3s ease all;
37+
cursor: pointer;
38+
font-size: 0.875rem;
39+
margin-bottom: 2px;
40+
margin-left: 4px;
41+
transform: rotate(${order === 'asc' ? -180 : 0}deg);
8642
87-
cursor: pointer;
88-
89-
font-size: 1rem;
90-
91-
&:hover {
92-
color: white;
93-
}
43+
&:hover {
44+
color: white;
45+
}
46+
`};
9447
`;

0 commit comments

Comments
 (0)