Feature/component contests list tabs

package.json

@@ -7,12 +7,13 @@
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "react-markdown": "^4.0.8",
+    "react-markdown": "^4.1.0",
     "react-router": "^5.0.0",
     "react-router-dom": "^5.0.0",
     "react-scripts": "3.0.1",
-    "react-syntax-highlighter": "^11.0.1",
     "react-slick": "^0.24.0",
+    "react-swipeable-views": "^0.13.3",
+    "react-syntax-highlighter": "^11.0.1",
     "redux": "^4.0.1",
     "slick-carousel": "^1.8.1",
     "tslint": "^5.17.0"

src/molecules/ContestTabs.js

@@ -0,0 +1,45 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+// タブ
+import Tab from "@material-ui/core/Tab";
+import Tabs from "@material-ui/core/Tabs";
+// テーブル
+import ProblemsTable from "./ProblemsTable";
+import SubmitStatusTable from "./SubmitStatusTable";
+import RankingTable from "./RankingTable";
+// コンテストトップ
+import TopContents from "./ContestTopContents";
+
+const useStyles = makeStyles(() => ({
+  root: {
+    width: "100%",
+    height: "100%",
+  },
+  // タブの設定
+  tabs: {
+    borderBottom: "0.8px solid #cfd8dc",
+  },
+}));
+
+export default function ContestsListTabs() {
+  const classes = useStyles();
+  const [value, setValue] = React.useState(0);
+
+  function handleChange(event, newValue) {
+    setValue(newValue);
+  }
+  return (
+    <div className={classes.root}>
+      <Tabs value={value} onChange={handleChange} indicatorColor="primary" className={classes.tabs}>
+        <Tab label="トップ" />
+        <Tab label="問題一覧" />
+        <Tab label="提出状況" />
+        <Tab label="ランキング" />
+      </Tabs>
+      {value === 0 && <TopContents />}
+      {value === 1 && <ProblemsTable />}
+      {value === 2 && <SubmitStatusTable />}
+      {value === 3 && <RankingTable />}
+    </div>
+  );
+}

src/molecules/ContestTopContents.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import Paper from "@material-ui/core/Paper";
+import ReactMarkdown from "react-markdown";
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    padding: theme.spacing(3, 2),
+    height: "100%",
+    minHeight: 250,
+  },
+}));
+
+export default function ContestTopContents() {
+  const classes = useStyles();
+  const input = "# This is a header\n\nAnd this is a paragraph"; // markdown
+
+  return (
+    <Paper className={classes.root}>
+      {/* markdownを表示する */}
+      <ReactMarkdown source={input} />
+    </Paper>
+  );
+}

src/molecules/ContestsListTabs.js

@@ -0,0 +1,39 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+// タブ
+import Tab from "@material-ui/core/Tab";
+import Tabs from "@material-ui/core/Tabs";
+// テーブル
+import ContestsTable from "./ContestsTable";
+
+const useStyles = makeStyles(() => ({
+  root: {
+    width: "100%",
+  },
+  // タブの設定
+  tabs: {
+    borderBottom: "0.8px solid #cfd8dc",
+    height: "100%",
+  },
+}));
+
+export default function ContestsListTabs() {
+  const classes = useStyles();
+  const [value, setValue] = React.useState(0);
+
+  function handleChange(event, newValue) {
+    setValue(newValue);
+  }
+  return (
+    <div className={classes.root}>
+      <Tabs value={value} onChange={handleChange} indicatorColor="primary" className={classes.tabs}>
+        <Tab label="開催中" />
+        <Tab label="開催予定" />
+        <Tab label="終了" />
+      </Tabs>
+      {value === 0 && <ContestsTable />}
+      {value === 1 && <ContestsTable />}
+      {value === 2 && <ContestsTable />}
+    </div>
+  );
+}

src/molecules/ContestsTable.js

@@ -0,0 +1,61 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import Table from "@material-ui/core/Table";
+import TableBody from "@material-ui/core/TableBody";
+import TableCell from "@material-ui/core/TableCell";
+import TableHead from "@material-ui/core/TableHead";
+import TableRow from "@material-ui/core/TableRow";
+import Paper from "@material-ui/core/Paper";
+
+const useStyles = makeStyles(() => ({
+  root: {
+    width: "100%",
+    height: "100%",
+  },
+  table: {
+    minWidth: 650,
+    height: "100%",
+  },
+}));
+
+// 仮データ用
+function createData(contestName, contestDate, contestTime, problemNumber) {
+  return { contestName, contestDate, contestTime, problemNumber };
+}
+
+const rows = [
+  createData("てすと", "2019-01-01", "00:00-11:11", 5),
+  createData("test", "2019-01-01", "00:00-11:11", 3),
+  createData("test", "2019-01-01", "00:00-11:11", 7),
+];
+
+export default function DataTable() {
+  const classes = useStyles();
+
+  return (
+    <Paper className={classes.root} elevation={0}>
+      <Table className={classes.table}>
+        <TableHead>
+          <TableRow>
+            <TableCell>コンテスト名</TableCell>
+            <TableCell align="center">開催日</TableCell>
+            <TableCell align="center">開催時間</TableCell>
+            <TableCell align="center">問題数</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.map(row => (
+            <TableRow key={row.contestName}>
+              <TableCell component="th" scope="row">
+                {row.contestName}
+              </TableCell>
+              <TableCell align="center">{row.contestDate}</TableCell>
+              <TableCell align="center">{row.contestTime}</TableCell>
+              <TableCell align="center">{row.problemNumber}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </Paper>
+  );
+}