Merge pull request #16 from Berlevog/08-leaderboard-page

Добавил первый вариант лидерборда и разметку

.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": ["@babel/preset-env", "@babel/preset-react"]
+  "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"]
 }

enzymeSetup.js

@@ -0,0 +1,4 @@
+import Enzyme from "enzyme";
+import Adapter from "@wojtekmaj/enzyme-adapter-react-17";
+
+Enzyme.configure({ adapter: new Adapter() });

package.json

@@ -27,9 +27,12 @@
   },
   "homepage": "https://github.com/Berlevog/yandex.middlefrontend.mario#readme",
   "dependencies": {
+    "@material-ui/core": "^4.12.3",
+    "@material-ui/icons": "^4.11.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-router-dom": "^5.3.0"
+    "react-router-dom": "^5.3.0",
+    "recharts": "^2.1.2"
   },
   "devDependencies": {
     "@babel/core": "^7.15.5",
@@ -41,15 +44,18 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
+    "@types/enzyme": "^3.10.9",
     "@types/jest": "^26.0.24",
     "@types/react": "^17.0.19",
     "@types/react-dom": "^17.0.9",
     "@types/react-router-dom": "^5.1.8",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
     "@typescript-eslint/eslint-plugin": "^4.31.1",
     "@typescript-eslint/parser": "^4.31.1",
     "autoprefixer": "^10.3.4",
     "babel-loader": "^8.2.2",
     "css-loader": "^6.2.0",
+    "enzyme": "^3.11.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.1.0",
     "eslint-config-standard": "^16.0.3",
@@ -101,6 +107,9 @@
   },
   "jest": {
     "verbose": true,
-    "testEnvironment": "jsdom"
+    "testEnvironment": "jsdom",
+    "setupFilesAfterEnv": [
+      "./enzymeSetup.js"
+    ]
   }
 }

src/App.tsx

@@ -4,7 +4,7 @@
 import { createBrowserHistory } from "history";
 import React from "react";
 import { Route, Router, Switch } from "react-router-dom";
-import { Login, Registration } from "./pages";
+import { Login, Registration, Leaderboard } from "./pages";
 import { Game } from "./pages/Game";
 
 const history = createBrowserHistory();
@@ -19,7 +19,7 @@ function App() {
           <Route exact path="/login" component={Login} />
           <Route exact path="/registration" component={Registration} />
           <Route exact path="/app" component={Game} />
-          <Route exact path="/app/leaders" component={StubComponent} />
+          <Route exact path="/leaderboard" component={Leaderboard} />
           <Route exact path="/forum" component={StubComponent} />
         </Switch>
       </Router>

src/components/Footer/Footer.test.tsx

@@ -0,0 +1,9 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import Footer from "./Footer";
+
+it("renders without crashing", () => {
+  const div = document.createElement("div");
+  ReactDOM.render(<Footer />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});

src/components/Footer/Footer.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import Typography from "@material-ui/core/Typography";
+import Link from "@material-ui/core/Link";
+
+const Footer = () => {
+  return (
+    <Typography variant="body2" color="textSecondary" align="center">
+      {"Berlevog © "}
+      <Link
+        color="primary"
+        href="https://github.com/Berlevog/yandex.middlefrontend.mario"
+        target="_blank"
+        underline="always"
+      >
+        repo
+      </Link>{" "}
+      {new Date().getFullYear()}
+      {"."}
+    </Typography>
+  );
+};
+export default Footer;

src/components/Footer/index.ts

@@ -0,0 +1 @@
+export { default as Footer } from "./Footer";

src/components/Header/Header.test.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { mount } from "enzyme";
+import Header from "./Header";
+
+describe("render header", () => {
+  it("renders without crashing", () => {
+    const div = document.createElement("div");
+
+    ReactDOM.render(<Header open={true} />, div);
+    ReactDOM.unmountComponentAtNode(div);
+  });
+
+  it("props 'open' passed successfully", () => {
+    const header = mount(<Header open={false} />);
+    expect(header.prop("open")).toEqual(false);
+  });
+});

src/components/Header/Header.tsx

@@ -0,0 +1,79 @@
+import React, { FC } from "react";
+import AppBar from "@material-ui/core/AppBar";
+import Toolbar from "@material-ui/core/Toolbar";
+import Typography from "@material-ui/core/Typography";
+import IconButton from "@material-ui/core/IconButton";
+import MenuIcon from "@material-ui/icons/Menu";
+import clsx from "clsx";
+import { makeStyles } from "@material-ui/core/styles";
+import { DRAWER_WIDTH } from "../../config/constants";
+import { ThemeToggler } from "../ThemeToggler";
+
+type Props = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  open: boolean;
+};
+
+const useStyles = makeStyles((theme) => ({
+  toolbar: {
+    paddingRight: 24,
+  },
+  appBar: {
+    zIndex: theme.zIndex.drawer + 1,
+    transition: theme.transitions.create(["width", "margin"], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen,
+    }),
+  },
+  appBarShift: {
+    marginLeft: DRAWER_WIDTH,
+    width: `calc(100% - ${DRAWER_WIDTH}px)`,
+    transition: theme.transitions.create(["width", "margin"], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+  },
+  menuButton: {
+    marginRight: 36,
+  },
+  menuButtonHidden: {
+    display: "none",
+  },
+  title: {
+    flexGrow: 1,
+  },
+}));
+
+const Header: FC<Props> = ({ open, onClick }) => {
+  const classes = useStyles();
+
+  return (
+    <AppBar
+      position="absolute"
+      className={clsx(classes.appBar, open && classes.appBarShift)}
+    >
+      <Toolbar className={classes.toolbar}>
+        <IconButton
+          edge="start"
+          color="inherit"
+          aria-label="open drawer"
+          onClick={onClick}
+          className={clsx(classes.menuButton, open && classes.menuButtonHidden)}
+        >
+          <MenuIcon />
+        </IconButton>
+        <Typography
+          component="h1"
+          variant="h6"
+          color="inherit"
+          noWrap
+          className={classes.title}
+        >
+          Super Mario Pro
+        </Typography>
+        <ThemeToggler />
+      </Toolbar>
+    </AppBar>
+  );
+};
+
+export default Header;

src/components/Header/index.ts

@@ -0,0 +1 @@
+export { default as Header } from "./Header";

src/components/Menu/Menu.test.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { mount } from "enzyme";
+import Menu from "./Menu";
+
+describe("render header", () => {
+  it("renders without crashing", () => {
+    const div = document.createElement("div");
+
+    ReactDOM.render(<Menu open={true} />, div);
+    ReactDOM.unmountComponentAtNode(div);
+  });
+
+  it("props 'open' passed successfully", () => {
+    const menu = mount(<Menu open={false} />);
+    expect(menu.prop("open")).toEqual(false);
+  });
+});

src/components/Menu/Menu.tsx

@@ -0,0 +1,70 @@
+import React, { FC } from "react";
+import clsx from "clsx";
+import { makeStyles } from "@material-ui/core/styles";
+import Drawer from "@material-ui/core/Drawer";
+import List from "@material-ui/core/List";
+import IconButton from "@material-ui/core/IconButton";
+import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
+import Divider from "@material-ui/core/Divider";
+import { mainListItems, secondaryListItems } from "./listItems";
+import { DRAWER_WIDTH } from "../../config/constants";
+
+const useStyles = makeStyles((theme) => ({
+  toolbarIcon: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    padding: "0 8px",
+    ...theme.mixins.toolbar,
+  },
+  drawerPaper: {
+    position: "relative",
+    whiteSpace: "nowrap",
+    width: DRAWER_WIDTH,
+    transition: theme.transitions.create("width", {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+  },
+  drawerPaperClose: {
+    overflowX: "hidden",
+    transition: theme.transitions.create("width", {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen,
+    }),
+    width: theme.spacing(7),
+    [theme.breakpoints.up("sm")]: {
+      width: theme.spacing(9),
+    },
+  },
+}));
+
+type Props = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  open: boolean;
+};
+
+const Menu: FC<Props> = ({ open, onClick }) => {
+  const classes = useStyles();
+
+  return (
+    <Drawer
+      variant="permanent"
+      classes={{
+        paper: clsx(classes.drawerPaper, !open && classes.drawerPaperClose),
+      }}
+      open={open}
+    >
+      <div className={classes.toolbarIcon}>
+        <IconButton onClick={onClick}>
+          <ChevronLeftIcon />
+        </IconButton>
+      </div>
+      <Divider />
+      <List>{mainListItems}</List>
+      <Divider />
+      <List>{secondaryListItems}</List>
+    </Drawer>
+  );
+};
+
+export default Menu;

src/components/Menu/index.ts

@@ -0,0 +1 @@
+export { default as Menu } from "./Menu";

src/components/Menu/listItems.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import ListItemText from "@material-ui/core/ListItemText";
+import ShowChartIcon from "@material-ui/icons/ShowChart";
+import ExitToAppIcon from "@material-ui/icons/ExitToApp";
+import SportsEsportsIcon from "@material-ui/icons/SportsEsports";
+import ForumIcon from "@material-ui/icons/Forum";
+
+export const mainListItems = (
+  <div>
+    <ListItem button>
+      <ListItemIcon>
+        <SportsEsportsIcon />
+      </ListItemIcon>
+      <ListItemText primary="Game" />
+    </ListItem>
+    <ListItem button>
+      <ListItemIcon>
+        <ShowChartIcon />
+      </ListItemIcon>
+      <ListItemText primary="Leaderboard" />
+    </ListItem>
+    <ListItem button>
+      <ListItemIcon>
+        <ForumIcon />
+      </ListItemIcon>
+      <ListItemText primary="Forum" />
+    </ListItem>
+  </div>
+);
+
+export const secondaryListItems = (
+  <div>
+    <ListItem button>
+      <ListItemIcon>
+        <ExitToAppIcon />
+      </ListItemIcon>
+      <ListItemText primary="Logout" />
+    </ListItem>
+  </div>
+);

src/components/ThemeToggler/ThemeToggler.test.tsx

@@ -0,0 +1,9 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import ThemeToggler from "./ThemeToggler";
+
+it("renders without crashing", () => {
+  const div = document.createElement("div");
+  ReactDOM.render(<ThemeToggler />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});

src/components/ThemeToggler/ThemeToggler.tsx

@@ -0,0 +1,16 @@
+import React, { FC } from "react";
+import WbSunnyOutlinedIcon from "@material-ui/icons/WbSunnyOutlined";
+import Brightness2Icon from "@material-ui/icons/Brightness2";
+import Switch from "@material-ui/core/Switch";
+
+const ThemeToggler = () => {
+  return (
+    <>
+      <WbSunnyOutlinedIcon />
+      <Switch color="default" />
+      <Brightness2Icon />
+    </>
+  );
+};
+
+export default ThemeToggler;

src/components/ThemeToggler/index.ts

@@ -0,0 +1 @@
+export { default as ThemeToggler } from "./ThemeToggler";

src/config/constants.ts

@@ -0,0 +1,2 @@
+export const DRAWER_WIDTH = 240;
+export const NO_CONTENT = "No content";