Skip to content

Commit 3e423b9

Browse files
SaraVieiraSaraVieira
committed
make elements ts
1 parent eaf131d commit 3e423b9

File tree

3 files changed

+58
-76
lines changed

3 files changed

+58
-76
lines changed

packages/app/src/app/pages/Dashboard/Sidebar/elements.js renamed to packages/app/src/app/pages/Dashboard/Sidebar/elements.ts

File renamed without changes.

‎packages/app/src/app/pages/Dashboard/Sidebar/index.tsx‎

Lines changed: 53 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
import React from 'react';
22
import history from 'app/utils/history';
33
import { useOvermind } from 'app/overmind';
4-
import { Route } from 'react-router-dom';
4+
import { withRouter, Route } from 'react-router-dom';
55
import { Query } from 'react-apollo';
66
import Input from '@codesandbox/common/lib/components/Input';
77
import { Button } from '@codesandbox/common/lib/components/Button';
88
import PeopleIcon from 'react-icons/lib/md/people';
9-
10-
// @ts-ignore
119
import { teamOverviewUrl } from '@codesandbox/common/lib/utils/url-generator';
1210
import DashboardIcon from '-!svg-react-loader!@codesandbox/common/lib/icons/dashboard.svg';
1311

@@ -18,7 +16,7 @@ import { Items, CategoryHeader, SidebarStyled, InputWrapper } from './elements';
1816
import { TEAMS_QUERY } from '../queries';
1917
import { TemplateItem } from './TemplateItem';
2018

21-
const Sidebar = () => {
19+
const SidebarComponent = () => {
2220
const {
2321
state: { dashboard: dashboardState },
2422
actions: { dashboard: dashboardAction },
@@ -59,71 +57,56 @@ const Sidebar = () => {
5957

6058
return (
6159
<>
62-
{({ store: innerStore }) => (
63-
<>
64-
<Items style={{ marginBottom: '1rem' }}>
65-
<Item
66-
Icon={DashboardIcon}
67-
path="/dashboard/recent"
68-
name="Overview"
69-
/>
70-
71-
<SandboxesItem
72-
selectedSandboxes={innerStore.dashboard.selectedSandboxes}
73-
currentPath={path}
74-
currentTeamId={currentTeamId}
75-
openByDefault
76-
/>
77-
78-
<TemplateItem currentPath={path} />
79-
80-
<TrashItem currentPath={path} />
81-
</Items>
82-
83-
<Query query={TEAMS_QUERY}>
84-
{({ loading, data, error }) => {
85-
if (loading) {
86-
return null;
87-
}
88-
89-
if (error || !data.me) {
90-
return null;
91-
}
92-
93-
if (!(data && data.me)) {
94-
return null;
95-
}
96-
97-
const { teams = [] } = data.me;
98-
99-
return teams.map(({ id, name }) => (
100-
<div key={id}>
101-
<Items>
102-
<CategoryHeader>{name}</CategoryHeader>
103-
<Item
104-
Icon={PeopleIcon}
105-
path={teamOverviewUrl(id)}
106-
name="Team Overview"
107-
/>
108-
109-
<SandboxesItem
110-
whatTheFuck
111-
selectedSandboxes={
112-
dashboardState.selectedSandboxes
113-
}
114-
currentPath={path}
115-
currentTeamId={currentTeamId}
116-
teamId={id}
117-
/>
118-
119-
<TemplateItem currentPath={path} teamId={id} />
120-
</Items>
121-
</div>
122-
));
123-
}}
124-
</Query>
125-
</>
126-
)}
60+
<Items style={{ marginBottom: '1rem' }}>
61+
<Item
62+
Icon={DashboardIcon}
63+
path="/dashboard/recent"
64+
name="Overview"
65+
/>
66+
67+
<SandboxesItem
68+
selectedSandboxes={dashboardState.selectedSandboxes}
69+
currentPath={path}
70+
currentTeamId={currentTeamId}
71+
openByDefault
72+
/>
73+
74+
<TemplateItem currentPath={path} />
75+
76+
<TrashItem currentPath={path} />
77+
</Items>
78+
79+
<Query query={TEAMS_QUERY}>
80+
{({ loading, data, error }) => {
81+
if (loading || error || !data.me || !(data && data.me)) {
82+
return null;
83+
}
84+
85+
const { teams = [] } = data.me;
86+
87+
return teams.map(({ id, name }) => (
88+
<div key={id}>
89+
<Items>
90+
<CategoryHeader>{name}</CategoryHeader>
91+
<Item
92+
Icon={PeopleIcon}
93+
path={teamOverviewUrl(id)}
94+
name="Team Overview"
95+
/>
96+
97+
<SandboxesItem
98+
selectedSandboxes={dashboardState.selectedSandboxes}
99+
currentPath={path}
100+
currentTeamId={currentTeamId}
101+
teamId={id}
102+
/>
103+
104+
<TemplateItem currentPath={path} teamId={id} />
105+
</Items>
106+
</div>
107+
));
108+
}}
109+
</Query>
127110
</>
128111
);
129112
}}
@@ -142,5 +125,4 @@ const Sidebar = () => {
142125
</SidebarStyled>
143126
);
144127
};
145-
146-
export default Sidebar;
128+
export const Sidebar = withRouter(SidebarComponent);

‎packages/app/src/app/pages/Dashboard/index.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,12 @@ import { Navigation } from 'app/pages/common/Navigation';
77
import { signInPageUrl } from '@codesandbox/common/lib/utils/url-generator';
88
import { client } from 'app/graphql/client';
99

10-
import SidebarContents from './Sidebar';
10+
import { Sidebar } from './Sidebar';
1111
import Content from './Content';
1212
import {
1313
Container,
1414
Content as ContentContainer,
15-
Sidebar,
15+
Sidebar as SidebarStyled,
1616
ShowSidebarButton,
1717
} from './elements';
1818

@@ -52,16 +52,16 @@ const Dashboard = props => {
5252

5353
const DashboardContent = (
5454
<>
55-
<Sidebar active={showSidebar}>
56-
<SidebarContents />
55+
<SidebarStyled active={showSidebar}>
56+
<Sidebar />
5757
<ShowSidebarButton onClick={toggleSidebar}>
5858
{showSidebar ? (
5959
<LeftIcon style={{ color: 'white' }} />
6060
) : (
6161
<RightIcon style={{ color: 'white' }} />
6262
)}
6363
</ShowSidebarButton>
64-
</Sidebar>
64+
</SidebarStyled>
6565

6666
<ContentContainer>
6767
<Content />

0 commit comments

Comments
 (0)