🔧 Fix Dashboard Crash

Cause was a version miss-match for React Router

Additionally cleaned up some prop warning errors

Author: Saeris

packages/app/package.json

@@ -189,7 +189,7 @@
     "react-modal": "^3.6.1",
     "react-motion": "^0.5.0",
     "react-outside-click-handler": "^1.2.3",
-    "react-router-dom": "^4.3.1",
+    "react-router-dom": "^5.1.2",
     "react-show": "^3.0.4",
     "react-split-pane": "^0.1.87",
     "react-spring": "^8.0.25",

packages/app/src/app/pages/Dashboard/Sidebar/Item/elements.js

@@ -0,0 +1,56 @@
+import styled, { css } from 'styled-components';
+import { NavLink } from 'react-router-dom';
+import ChevronRight from 'react-icons/lib/md/chevron-right';
+import { withoutProps } from '@codesandbox/common/lib/utils';
+
+export const AnimatedChevron = styled(ChevronRight)<{ open?: boolean }>`
+  ${({ open = false }) => css`
+    width: 1rem;
+    margin-right: 0.25rem;
+    transform: rotate(${open ? 90 : 0}deg);
+    transition: 0.25s ease transform;
+  `}
+`;
+
+export const Container = styled(
+  withoutProps(`active`, `openByDefault`)(NavLink)
+)<{
+  active?: boolean;
+}>`
+  ${({ active = false, theme }) => css`
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 2.5rem;
+    padding: 0 0.5rem;
+    box-sizing: border-box;
+    background-color: transparent;
+    color: ${theme.placeholder};
+    text-decoration: none;
+    cursor: pointer;
+    user-select: none;
+    transition: 0.3s ease all;
+
+    &:hover {
+      color: white;
+    }
+
+    ${active &&
+      css`
+        background-color: ${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;
+`;

packages/app/src/app/pages/Dashboard/Sidebar/Item/elements.ts

@@ -135,12 +135,7 @@ class Sidebar extends React.Component {
         </Route>
 
         <div style={{ margin: '2rem', fontSize: '.875rem' }}>
-          <Button
-            style={{ display: 'block' }}
-            to="/dashboard/teams/new"
-            small
-            block
-          >
+          <Button to="/dashboard/teams/new" small block>
             Create Team
           </Button>
         </div>

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

@@ -171,7 +171,7 @@ export const buttonStyles = ({
 `;
 
 export const Base = styled(
-  withoutProps(`block`, `secondary`, `danger`, `red`, `large`)(Button)
+  withoutProps(`block`, `secondary`, `danger`, `red`, `small`)(Button)
 )<IBaseProps>`
   ${buttonStyles}
 `;

packages/app/src/app/pages/Dashboard/Sidebar/index.js

@@ -65,7 +65,7 @@
     "react-dom": "^16.9.0",
     "react-helmet": "^5.2.0",
     "react-media": "^1.6.1",
-    "react-router-dom": "^4.2.2",
+    "react-router-dom": "^5.1.2",
     "react-slick": "^0.23.2",
     "react-spring": "^8.0.25",
     "react-text-loop": "^2.0.2",