From 1b490dcc5a059cf38983bb168e65c6bf19bb0ec9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Thu, 13 Feb 2020 22:46:51 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A8=20Switch=20Dashboard/Sidebar=20to?= =?UTF-8?q?=20use=20useOvermind?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/app/package.json | 4 +- .../Sidebar/Item/Container/elements.ts | 34 +++++ .../Sidebar/Item/Container/index.tsx | 25 ++++ .../pages/Dashboard/Sidebar/Item/elements.js | 52 -------- .../pages/Dashboard/Sidebar/Item/elements.ts | 34 +++++ .../app/pages/Dashboard/Sidebar/Item/index.js | 116 ------------------ .../pages/Dashboard/Sidebar/Item/index.tsx | 94 ++++++++++++++ .../SandboxesItem/FolderEntry/elements.ts | 50 ++++---- .../{elements.js => elements.ts} | 0 .../pages/Dashboard/Sidebar/TemplateItem.tsx | 86 +++++++++++++ .../Dashboard/Sidebar/TemplateItem/index.tsx | 80 ------------ .../app/pages/Dashboard/Sidebar/TrashItem.tsx | 77 ++++++++++++ .../Dashboard/Sidebar/TrashItem/index.tsx | 73 ----------- .../app/pages/Dashboard/Sidebar/elements.ts | 5 +- .../src/app/pages/Dashboard/Sidebar/index.tsx | 9 +- yarn.lock | 8 +- 16 files changed, 390 insertions(+), 357 deletions(-) create mode 100644 packages/app/src/app/pages/Dashboard/Sidebar/Item/Container/elements.ts create mode 100644 packages/app/src/app/pages/Dashboard/Sidebar/Item/Container/index.tsx delete mode 100644 packages/app/src/app/pages/Dashboard/Sidebar/Item/elements.js create mode 100644 packages/app/src/app/pages/Dashboard/Sidebar/Item/elements.ts delete mode 100644 packages/app/src/app/pages/Dashboard/Sidebar/Item/index.js create mode 100644 packages/app/src/app/pages/Dashboard/Sidebar/Item/index.tsx rename packages/app/src/app/pages/Dashboard/Sidebar/SandboxesItem/{elements.js => elements.ts} (100%) create mode 100644 packages/app/src/app/pages/Dashboard/Sidebar/TemplateItem.tsx delete mode 100644 packages/app/src/app/pages/Dashboard/Sidebar/TemplateItem/index.tsx create mode 100644 packages/app/src/app/pages/Dashboard/Sidebar/TrashItem.tsx delete mode 100644 packages/app/src/app/pages/Dashboard/Sidebar/TrashItem/index.tsx diff --git a/packages/app/package.json b/packages/app/package.json index c3f6e2bd7b0..185f220d27b 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -204,7 +204,7 @@ "react-motion": "^0.5.0", "react-outside-click-handler": "^1.2.3", "react-refresh": "^0.7.2", - "react-router-dom": "^5.0.1", + "react-router-dom": "^5.1.2", "react-show": "^3.0.4", "react-split-pane": "^0.1.87", "react-spring": "^8.0.25", @@ -270,7 +270,7 @@ "@types/react-helmet": "^5.0.11", "@types/react-icons": "2.2.7", "@types/react-instantsearch": "^5.2.3", - "@types/react-router-dom": "^5.0.1", + "@types/react-router-dom": "^5.1.3", "@types/react-stripe-elements": "^1.3.2", "@types/resolve": "^0.0.8", "@types/semver": "6.2.0", diff --git a/packages/app/src/app/pages/Dashboard/Sidebar/Item/Container/elements.ts b/packages/app/src/app/pages/Dashboard/Sidebar/Item/Container/elements.ts new file mode 100644 index 00000000000..267a50a4752 --- /dev/null +++ b/packages/app/src/app/pages/Dashboard/Sidebar/Item/Container/elements.ts @@ -0,0 +1,34 @@ +import { NavLink } from 'react-router-dom'; +import styled, { css } from 'styled-components'; + +export const Container = styled(NavLink)<{ active: boolean }>` + ${({ active, theme }) => css` + transition: 0.3s ease all; + display: flex; + width: 100%; + height: 2.5rem; + user-select: none; + + align-items: center; + + padding: 0 0.5rem; + box-sizing: border-box; + + color: ${theme.placeholder}; + text-decoration: none; + background-color: transparent; + + cursor: pointer; + position: relative; + + &:hover { + color: white; + } + + ${active && + css` + background-color: ${theme.secondary}; + color: white; + `}; + `}; +`; diff --git a/packages/app/src/app/pages/Dashboard/Sidebar/Item/Container/index.tsx b/packages/app/src/app/pages/Dashboard/Sidebar/Item/Container/index.tsx new file mode 100644 index 00000000000..306746f5dc7 --- /dev/null +++ b/packages/app/src/app/pages/Dashboard/Sidebar/Item/Container/index.tsx @@ -0,0 +1,25 @@ +import React, { ComponentProps, FunctionComponent } from 'react'; + +import { ContextMenu } from 'app/components/ContextMenu'; + +import { Container as ContainerBase } from './elements'; + +type ContainerBaseProps = ComponentProps; +type Props = { + contextItems?: ComponentProps['items']; +} & Partial> & + Pick; +export const Container: FunctionComponent = ({ + contextItems, + ...props +}) => { + if (!contextItems) { + return ; + } + + return ( + + + + ); +}; diff --git a/packages/app/src/app/pages/Dashboard/Sidebar/Item/elements.js b/packages/app/src/app/pages/Dashboard/Sidebar/Item/elements.js deleted file mode 100644 index c6e71e811eb..00000000000 --- a/packages/app/src/app/pages/Dashboard/Sidebar/Item/elements.js +++ /dev/null @@ -1,52 +0,0 @@ -import styled, { css } from 'styled-components'; -import { NavLink } from 'react-router-dom'; -import ChevronRight from 'react-icons/lib/md/chevron-right'; - -export const AnimatedChevron = styled(ChevronRight)` - transition: 0.25s ease transform; - transform: rotate(${props => (props.open ? 90 : 0)}deg); - margin-right: 0.25rem; - width: 1rem; -`; - -export const Container = styled(NavLink)` - transition: 0.3s ease all; - display: flex; - width: 100%; - height: 2.5rem; - user-select: none; - - align-items: center; - - padding: 0 0.5rem; - box-sizing: border-box; - - color: ${props => props.theme.placeholder}; - text-decoration: none; - background-color: transparent; - - cursor: pointer; - position: relative; - - &:hover { - color: white; - } - - ${props => - props.active && - css` - background-color: ${props.theme.secondary}; - color: white; - `}; -`; - -export const IconContainer = styled.div` - display: flex; - align-items: center; - width: 2rem; - font-size: 1.25rem; -`; - -export const ItemName = styled.div` - font-size: 0.875rem; -`; diff --git a/packages/app/src/app/pages/Dashboard/Sidebar/Item/elements.ts b/packages/app/src/app/pages/Dashboard/Sidebar/Item/elements.ts new file mode 100644 index 00000000000..b4b6ddf2b6d --- /dev/null +++ b/packages/app/src/app/pages/Dashboard/Sidebar/Item/elements.ts @@ -0,0 +1,34 @@ +import ChevronRight from 'react-icons/lib/md/chevron-right'; +import { Animate as AnimateBase } from 'react-show'; +import styled, { css } from 'styled-components'; + +export const Animate = styled(AnimateBase)` + height: auto; + overflow: hidden; +`; + +export const AnimatedChevron = styled(ChevronRight)<{ open: boolean }>` + ${({ open }) => css` + transition: 0.25s ease transform; + transform: rotate(${open ? 90 : 0}deg); + margin-right: 0.25rem; + width: 1rem; + `}; +`; + +export const ChevronPlaceholder = styled.div` + width: 16px; + height: 16px; + margin-right: 0.25rem; +`; + +export const IconContainer = styled.div` + display: flex; + align-items: center; + width: 2rem; + font-size: 1.25rem; +`; + +export const ItemName = styled.div` + font-size: 0.875rem; +`; diff --git a/packages/app/src/app/pages/Dashboard/Sidebar/Item/index.js b/packages/app/src/app/pages/Dashboard/Sidebar/Item/index.js deleted file mode 100644 index 0bb20171f5a..00000000000 --- a/packages/app/src/app/pages/Dashboard/Sidebar/Item/index.js +++ /dev/null @@ -1,116 +0,0 @@ -import React from 'react'; -import { Route } from 'react-router-dom'; -import { Animate } from 'react-show'; -import { ContextMenu } from 'app/components/ContextMenu'; -import { - AnimatedChevron, - Container, - IconContainer, - ItemName, -} from './elements'; - -const getContainer = contextItems => { - if (contextItems) { - return props => ( - - {React.createElement(Container, props)} - - ); - } - - return Container; -}; - -export class Item extends React.Component { - state = { - open: this.props.openByDefault, - }; - - toggleOpen = e => { - e.preventDefault(); - this.setState(state => ({ open: !state.open })); - }; - - UNSAFE_componentWillReceiveProps(nextProps) { - if (nextProps.openByDefault === true && !this.props.openByDefault) { - this.setState({ open: true }); - } - } - - render() { - const { - name, - contextItems, - Icon, - path, - children, - style, - active, - noActive, - ...props - } = this.props; - - const UsedContainer = getContainer(contextItems); - - return ( - - {res => { - const isActive = - (!noActive && res.match && res.match.isExact) || active; - const isOpen = - this.state.open === undefined ? isActive : this.state.open; - - if ( - (res.match || isActive) && - this.state.open === undefined && - children - ) { - this.setState({ open: true }); - } - return ( - <> - - {children ? ( - - ) : ( -
- )} - - - - {name} - - - {children && ( - - {children} - - )} - - ); - }} - - ); - } -} diff --git a/packages/app/src/app/pages/Dashboard/Sidebar/Item/index.tsx b/packages/app/src/app/pages/Dashboard/Sidebar/Item/index.tsx new file mode 100644 index 00000000000..5cc05c87c1f --- /dev/null +++ b/packages/app/src/app/pages/Dashboard/Sidebar/Item/index.tsx @@ -0,0 +1,94 @@ +import React, { + ComponentProps, + ComponentType, + FunctionComponent, + useEffect, + useState, +} from 'react'; +import { useRouteMatch } from 'react-router-dom'; + +import { Container } from './Container'; +import { + Animate, + AnimatedChevron, + ChevronPlaceholder, + IconContainer, + ItemName, +} from './elements'; + +type ContainerProps = ComponentProps; +type Props = { + active?: boolean; + Icon: ComponentType; + name: string; + openByDefault?: boolean; + path: ContainerProps['to']; +} & Omit< + ComponentProps, + 'active' | 'children' | 'exact' | 'to' +>; +export const Item: FunctionComponent = ({ + active = false, + children, + Icon, + name, + openByDefault, + path, + ...props +}) => { + const match = useRouteMatch(path); + const [open, setOpen] = useState(openByDefault); + const isActive = match?.isExact || active; + const isOpen = open || isActive; + + useEffect(() => { + if (openByDefault) { + setOpen(true); + } + }, [openByDefault]); + + useEffect(() => { + if ((match || isActive) && open === undefined && children) { + setOpen(true); + } + }, [children, isActive, match, open]); + + const toggleOpen = event => { + event.preventDefault(); + + setOpen(show => !show); + }; + + return ( + <> + + {children ? ( + + ) : ( + + )} + + + + + + {name} + + + {children && ( + + {children} + + )} + + ); +}; diff --git a/packages/app/src/app/pages/Dashboard/Sidebar/SandboxesItem/FolderEntry/elements.ts b/packages/app/src/app/pages/Dashboard/Sidebar/SandboxesItem/FolderEntry/elements.ts index 14b6125e086..476874acf4d 100644 --- a/packages/app/src/app/pages/Dashboard/Sidebar/SandboxesItem/FolderEntry/elements.ts +++ b/packages/app/src/app/pages/Dashboard/Sidebar/SandboxesItem/FolderEntry/elements.ts @@ -1,34 +1,36 @@ -import styled from 'styled-components'; -import { NavLink } from 'react-router-dom'; import ChevronRight from 'react-icons/lib/md/chevron-right'; +import { NavLink } from 'react-router-dom'; +import styled, { css } from 'styled-components'; export const Container = styled(NavLink)<{ depth?: number; }>` - transition: 0.25s ease all; - display: flex; - align-items: center; - height: 2rem; + ${({ depth, theme }) => css` + transition: 0.25s ease all; + display: flex; + align-items: center; + height: 2rem; - color: rgba(255, 255, 255, 0.6); - text-decoration: none; + color: rgba(255, 255, 255, 0.6); + text-decoration: none; - border-left: 2px solid transparent; - padding-left: ${props => 1 + (props.depth || 0) * 0.75}rem; + border-left: 2px solid transparent; + padding-left: ${1 + (depth || 0) * 0.75}rem; - user-select: none; + user-select: none; - cursor: pointer; + cursor: pointer; - &:hover { - color: rgba(255, 255, 255, 0.8); - } + &:hover { + color: rgba(255, 255, 255, 0.8); + } - &:focus { - outline: none; - border-color: ${props => props.theme.secondary.clearer(0.5)}; - color: rgba(255, 255, 255, 0.8); - } + &:focus { + outline: none; + border-color: ${theme.secondary.clearer(0.5)}; + color: rgba(255, 255, 255, 0.8); + } + `}; `; export const CreateDirectoryContainer = Container.withComponent('div'); @@ -41,7 +43,9 @@ export const IconContainer = styled.div` `; export const AnimatedChevron = styled(ChevronRight)<{ open?: boolean }>` - transition: 0.25s ease transform; - transform: rotate(${props => (props.open ? 90 : 0)}deg); - margin-right: 0.25rem; + ${({ open }) => css` + transition: 0.25s ease transform; + transform: rotate(${open ? 90 : 0}deg); + margin-right: 0.25rem; + `}; `; diff --git a/packages/app/src/app/pages/Dashboard/Sidebar/SandboxesItem/elements.js b/packages/app/src/app/pages/Dashboard/Sidebar/SandboxesItem/elements.ts similarity index 100% rename from packages/app/src/app/pages/Dashboard/Sidebar/SandboxesItem/elements.js rename to packages/app/src/app/pages/Dashboard/Sidebar/SandboxesItem/elements.ts diff --git a/packages/app/src/app/pages/Dashboard/Sidebar/TemplateItem.tsx b/packages/app/src/app/pages/Dashboard/Sidebar/TemplateItem.tsx new file mode 100644 index 00000000000..9cdde2f87ff --- /dev/null +++ b/packages/app/src/app/pages/Dashboard/Sidebar/TemplateItem.tsx @@ -0,0 +1,86 @@ +import React, { FunctionComponent } from 'react'; +import { + DropTarget, + DropTargetCollector, + DropTargetConnector, + DropTargetMonitor, + DropTargetSpec, +} from 'react-dnd'; + +import { MAKE_TEMPLATE_DROP_KEY } from '../Content/SandboxCard'; + +import { Item } from './Item'; + +import TemplateIcon from '-!svg-react-loader!@codesandbox/common/lib/icons/template.svg'; + +type OwnProps = { + currentPath: string; + teamId?: string; +}; +type Props = OwnProps & CollectedProps; +const TemplateItemComponent: FunctionComponent = ({ + canDrop, + connectDropTarget, + currentPath, + isOver, + teamId, +}) => { + const url = teamId + ? `/dashboard/teams/${teamId}/templates` + : `/dashboard/templates`; + + return connectDropTarget( +
+ +
+ ); +}; + +const entryTarget: DropTargetSpec = { + canDrop: (_props, monitor) => monitor.getItem() !== null, + drop: ({ teamId }, monitor) => { + // Check if only child is selected: + if (!monitor.isOver({ shallow: true })) { + return {}; + } + + // Used in SandboxCard + return { + [MAKE_TEMPLATE_DROP_KEY]: true, + teamId, + }; + }, +}; + +const collectTarget: DropTargetCollector = ( + connect, + monitor +) => ({ + canDrop: monitor.canDrop(), + // Call this function inside render() + // to let React DnD handle the drag events: + connectDropTarget: connect.dropTarget(), + // You can ask the monitor about the current drag state: + isOver: monitor.isOver({ shallow: true }), +}); + +type CollectedProps = { + canDrop: ReturnType; + connectDropTarget: ReturnType; + isOver: ReturnType; +}; +export const TemplateItem = DropTarget( + ['SANDBOX'], + entryTarget, + collectTarget +)(TemplateItemComponent); diff --git a/packages/app/src/app/pages/Dashboard/Sidebar/TemplateItem/index.tsx b/packages/app/src/app/pages/Dashboard/Sidebar/TemplateItem/index.tsx deleted file mode 100644 index 56a24f32dff..00000000000 --- a/packages/app/src/app/pages/Dashboard/Sidebar/TemplateItem/index.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import React from 'react'; -import { DropTarget } from 'react-dnd'; -import { withRouter, RouteComponentProps } from 'react-router-dom'; -// @ts-ignore -import TemplateIcon from '-!svg-react-loader!@codesandbox/common/lib/icons/template.svg'; -import { Item } from '../Item'; -import { MAKE_TEMPLATE_DROP_KEY } from '../../Content/SandboxCard'; - -interface ITemplateItemProps { - currentPath: string; - teamId?: string; - canDrop?: boolean; - isOver?: boolean; - connectDropTarget?: any; -} - -const TemplateItemComponent: React.FC = ({ - currentPath, - isOver, - canDrop, - connectDropTarget, - teamId, -}) => { - const url = teamId - ? `/dashboard/teams/${teamId}/templates` - : `/dashboard/templates`; - - return connectDropTarget( -
- -
- ); -}; - -export const entryTarget = { - drop: (props, monitor) => { - if (monitor == null) return {}; - - // Check if only child is selected: - if (!monitor.isOver({ shallow: true })) return {}; - - // Used in SandboxCard - return { [MAKE_TEMPLATE_DROP_KEY]: true, teamId: props.teamId }; - }, - - canDrop: (props, monitor) => { - if (monitor == null) return false; - const source = monitor.getItem(); - if (source == null) return false; - - return !props.removedAt; - }, -}; - -export function collectTarget(connectMonitor, monitor) { - return { - // Call this function inside render() - // to let React DnD handle the drag events: - connectDropTarget: connectMonitor.dropTarget(), - // You can ask the monitor about the current drag state: - isOver: monitor.isOver({ shallow: true }), - canDrop: monitor.canDrop(), - itemType: monitor.getItemType(), - }; -} - -export const TemplateItem = DropTarget( - ['SANDBOX'], - entryTarget, - collectTarget -)(withRouter(TemplateItemComponent)); diff --git a/packages/app/src/app/pages/Dashboard/Sidebar/TrashItem.tsx b/packages/app/src/app/pages/Dashboard/Sidebar/TrashItem.tsx new file mode 100644 index 00000000000..2644bb62611 --- /dev/null +++ b/packages/app/src/app/pages/Dashboard/Sidebar/TrashItem.tsx @@ -0,0 +1,77 @@ +import React, { FunctionComponent } from 'react'; +import { + DropTarget, + DropTargetCollector, + DropTargetConnector, + DropTargetMonitor, + DropTargetSpec, +} from 'react-dnd'; +import TrashIcon from 'react-icons/lib/md/delete'; + +import { DELETE_SANDBOX_DROP_KEY } from '../Content/SandboxCard'; + +import { Item } from './Item'; + +type OwnProps = { + currentPath: string; +}; +type Props = OwnProps & CollectedProps; +const TrashItemComponent: FunctionComponent = ({ + canDrop, + connectDropTarget, + currentPath, + isOver, +}) => + connectDropTarget( +
+ +
+ ); + +const entryTarget: DropTargetSpec = { + canDrop: (_props, monitor) => monitor.getItem() !== null, + drop: (_props, monitor) => { + // Check if only child is selected: + if (!monitor.isOver({ shallow: true })) { + return {}; + } + + // Used in SandboxCard + return { + [DELETE_SANDBOX_DROP_KEY]: true, + }; + }, +}; + +const collectTarget: DropTargetCollector = ( + connect, + monitor +) => ({ + canDrop: monitor.canDrop(), + // Call this function inside render() + // to let React DnD handle the drag events: + connectDropTarget: connect.dropTarget(), + // You can ask the monitor about the current drag state: + isOver: monitor.isOver({ shallow: true }), +}); + +type CollectedProps = { + canDrop: ReturnType; + connectDropTarget: ReturnType; + isOver: ReturnType; +}; +export const TrashItem = DropTarget( + ['SANDBOX'], + entryTarget, + collectTarget +)(TrashItemComponent); diff --git a/packages/app/src/app/pages/Dashboard/Sidebar/TrashItem/index.tsx b/packages/app/src/app/pages/Dashboard/Sidebar/TrashItem/index.tsx deleted file mode 100644 index df4b054b534..00000000000 --- a/packages/app/src/app/pages/Dashboard/Sidebar/TrashItem/index.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import React from 'react'; -import { DropTarget } from 'react-dnd'; -import TrashIcon from 'react-icons/lib/md/delete'; - -import { withRouter, RouteComponentProps } from 'react-router-dom'; - -import { Item } from '../Item'; -import { DELETE_SANDBOX_DROP_KEY } from '../../Content/SandboxCard'; - -interface Props { - currentPath: string; - isOver: boolean; - canDrop: boolean; - connectDropTarget: (target: React.ReactElement) => React.ReactElement; -} - -const TrashItemComponent: React.FC = ({ - currentPath, - isOver, - canDrop, - connectDropTarget, -}) => - connectDropTarget( -
- -
- ); - -export const entryTarget = { - drop: (_, monitor) => { - if (monitor == null) return {}; - - // Check if only child is selected: - if (!monitor.isOver({ shallow: true })) return {}; - - // Used in SandboxCard - return { [DELETE_SANDBOX_DROP_KEY]: true }; - }, - - canDrop: (props, monitor) => { - if (monitor == null) return false; - const source = monitor.getItem(); - if (source == null) return false; - - return !props.removedAt; - }, -}; - -export function collectTarget(connectMonitor, monitor) { - return { - // Call this function inside render() - // to let React DnD handle the drag events: - connectDropTarget: connectMonitor.dropTarget(), - // You can ask the monitor about the current drag state: - isOver: monitor.isOver({ shallow: true }), - canDrop: monitor.canDrop(), - itemType: monitor.getItemType(), - }; -} - -export const TrashItem = DropTarget( - ['SANDBOX'], - entryTarget, - collectTarget -)(withRouter(TrashItemComponent)); diff --git a/packages/app/src/app/pages/Dashboard/Sidebar/elements.ts b/packages/app/src/app/pages/Dashboard/Sidebar/elements.ts index 80b826fd9ca..ea60f06406d 100644 --- a/packages/app/src/app/pages/Dashboard/Sidebar/elements.ts +++ b/packages/app/src/app/pages/Dashboard/Sidebar/elements.ts @@ -19,12 +19,11 @@ export const CategoryHeader = styled.div` font-weight: 600; `; -export const SidebarStyled = styled.aside` +export const Container = styled.aside` width: 275px; overflow-y: auto; `; export const InputWrapper = styled.div` - margin: 0 1rem; - margin-bottom: 1.5rem; + margin: 0 1rem 1.5rem; `; diff --git a/packages/app/src/app/pages/Dashboard/Sidebar/index.tsx b/packages/app/src/app/pages/Dashboard/Sidebar/index.tsx index 7bdce854ed3..e087f37883c 100644 --- a/packages/app/src/app/pages/Dashboard/Sidebar/index.tsx +++ b/packages/app/src/app/pages/Dashboard/Sidebar/index.tsx @@ -12,14 +12,14 @@ import DashboardIcon from '-!svg-react-loader!@codesandbox/common/lib/icons/dash import { Item } from './Item'; import { SandboxesItem } from './SandboxesItem'; import { TrashItem } from './TrashItem'; -import { Items, CategoryHeader, SidebarStyled, InputWrapper } from './elements'; +import { CategoryHeader, Container, InputWrapper, Items } from './elements'; import { TEAMS_QUERY } from '../queries'; import { TemplateItem } from './TemplateItem'; const SidebarComponent = () => { const { - state: { dashboard: dashboardState }, actions: { dashboard: dashboardAction }, + state: { dashboard: dashboardState }, } = useOvermind(); const handleSearchFocus = () => { @@ -31,7 +31,7 @@ const SidebarComponent = () => { }; return ( - + {
{name} + { Create Team
- + ); }; export const Sidebar = withRouter(SidebarComponent); diff --git a/yarn.lock b/yarn.lock index b5f85fc5da0..8235b5b9067 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4727,10 +4727,10 @@ "@types/prop-types" "*" "@types/react" "*" -"@types/react-router-dom@^5.0.1": - version "5.1.5" - resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.1.5.tgz#7c334a2ea785dbad2b2dcdd83d2cf3d9973da090" - integrity sha512-ArBM4B1g3BWLGbaGvwBGO75GNFbLDUthrDojV2vHLih/Tq8M+tgvY1DSwkuNrPSwdp/GUL93WSEpTZs8nVyJLw== +"@types/react-router-dom@^5.1.3": + version "5.1.3" + resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.1.3.tgz#b5d28e7850bd274d944c0fbbe5d57e6b30d71196" + integrity sha512-pCq7AkOvjE65jkGS5fQwQhvUp4+4PVD9g39gXLZViP2UqFiFzsEpB3PKf0O6mdbKsewSK8N14/eegisa/0CwnA== dependencies: "@types/history" "*" "@types/react" "*"