Merge pull request #33 from Eug-VS/contribute

Contribute section support

9 files changed, 226 insertions, 52 deletions

diff --git a/src/components/ContentSection/ContentSection.js b/src/components/ContentSection/ContentSection.js
index d5b9340..99e76aa 100644
--- a/src/components/ContentSection/ContentSection.js
+++ b/src/components/ContentSection/ContentSection.js
@@ -9,8 +9,18 @@ import {
 
 const useStyles = makeStyles(theme => ({
   content: {
-    padding: theme.spacing(2),
-  }
+    padding: theme.spacing(0, 2, 1, 2),
+    marginBottom: theme.spacing(1),
+
+    '& a': {
+      color: theme.palette.secondary.light,
+    },
+    '& .MuiButton-root': {
+      color: theme.palette.background.paper,
+      margin: theme.spacing(1, 2, 2, 0),
+      fontWeight: 'bold',
+    },
+  },
 }));
 
 const ContentSection = ({ sectionName, children }) => {
@@ -20,9 +30,9 @@ const ContentSection = ({ sectionName, children }) => {
     <>
       <Typography variant="h4">{sectionName}</Typography>
       <Divider variant="middle"/>
-      <div className={classes.content}>
+      <Typography component="div" className={classes.content}>
         {children}
-      </div>
+      </Typography>
     </>
   );
 
diff --git a/src/components/SmartList/SmartList.js b/src/components/SmartList/SmartList.js
index 975cbbd..68235a2 100644
--- a/src/components/SmartList/SmartList.js
+++ b/src/components/SmartList/SmartList.js
@@ -3,18 +3,8 @@ import React from 'react';
 import { FixedSizeList } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
 
-import { makeStyles } from '@material-ui/core';
-
-
-const useStyles = makeStyles(theme => ({
-  root: {
-    scrollbarColor: `${theme.palette.primary.dark} ${theme.palette.primary.light}`,
-  }
-}));
-
 
 const SmartList = ({ itemSize, itemCount, renderItem }) => {
-  const classes = useStyles();
 
   return (
     <div style={{ flex: '1 1 auto'}}>
@@ -25,7 +15,6 @@ const SmartList = ({ itemSize, itemCount, renderItem }) => {
             width={width}
             itemSize={itemSize}
             itemCount={itemCount}
-            className={classes.root}
           >
             {renderItem}
           </FixedSizeList>
diff --git a/src/components/Window/WindowSurface/WindowSurface.js b/src/components/Window/WindowSurface/WindowSurface.js
index d1d1510..c4e6b3d 100644
--- a/src/components/Window/WindowSurface/WindowSurface.js
+++ b/src/components/Window/WindowSurface/WindowSurface.js
@@ -9,6 +9,8 @@ const useStyles = makeStyles(theme => ({
     display: 'flex',
     flexDirection: 'column',
     background: theme.palette.background.elevation,
+    overflowY: 'auto',
+    scrollbarColor: `${theme.palette.primary.dark} ${theme.palette.primary.light}`,
   }
 }));
 
diff --git a/src/developers.json b/src/developers.json
new file mode 100644
index 0000000..f3e5357
--- /dev/null
+++ b/src/developers.json
@@ -0,0 +1,10 @@
+[
+  {
+    "username": "eug-vs",
+    "role": "Back-end, front-end, management"
+  },
+  {
+    "username": "asketonim",
+    "role": "Front-end, management"
+  }
+]
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 431e139..0c3d415 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,20 +1,15 @@
 import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
 
-import { Box } from "@material-ui/core";
 import CssBaseline from '@material-ui/core/CssBaseline';
-import { ThemeProvider, makeStyles } from '@material-ui/core/styles';
+import { ThemeProvider } from '@material-ui/core/styles';
+import 'typeface-roboto';
 
 import theme from "./theme";
 import Header from './components/Header/Header';
-import TimerPage from "./components/TimerPage/TimerPage";
-import Scoreboard from "./components/Scoreboard/Scoreboard";
-
-
-const useStyles = makeStyles(theme => ({
-  root: {
-  },
-}));
+import Timer from "./pages/Timer/Timer";
+import Scoreboard from "./pages/Scoreboard/Scoreboard";
+import Contribute from "./pages/Contribute/Contribute";
 
 
 const App = () => {
@@ -22,19 +17,23 @@ const App = () => {
   const [page, setPage] = useState('app');
   const [recentSolutions, setRecentSolutions] = useState([]);
 
-  const classes = useStyles();
-
-  const getPageComponent = page => {
+  const Page = ({ page }) => {
     switch (page) {
       case 'app':
         return (
-          <TimerPage
+          <Timer
             recentSolutions={recentSolutions}
             setRecentSolutions={setRecentSolutions}
+            setPage={setPage}
           />
         );
+
       case 'scoreboard':
-        return (<Scoreboard/>);
+        return (<Scoreboard />);
+
+      case 'contribute':
+        return (<Contribute />);
+
       default:
         return (
           <p>
@@ -49,9 +48,7 @@ const App = () => {
     <ThemeProvider theme={theme}>
       <CssBaseline/>
       <Header page={page} setPage={setPage}/>
-      <Box className={classes.root}>
-        { getPageComponent(page) }
-      </Box>
+      <Page page={page} />
     </ThemeProvider>
   );
 };
diff --git a/src/pages/Contribute/Contribute.js b/src/pages/Contribute/Contribute.js
new file mode 100644
index 0000000..6837f59
--- /dev/null
+++ b/src/pages/Contribute/Contribute.js
@@ -0,0 +1,158 @@
+import React from 'react';
+
+import {
+  Typography,
+  Button,
+  List,
+  ListItem,
+  Link,
+  Avatar,
+  Divider,
+  makeStyles,
+} from "@material-ui/core";
+
+import TrendingUpIcon from '@material-ui/icons/TrendingUp';
+import BugReportIcon from '@material-ui/icons/BugReport';
+import NewReleasesIcon from '@material-ui/icons/NewReleases';
+
+import Window from "../../components/Window/Window";
+import ContentSection from "../../components/ContentSection/ContentSection";
+
+
+const useStyles = makeStyles(theme => ({
+  mono: {
+    padding: theme.spacing(4),
+
+    '& .MuiAvatar-root': {
+      marginRight: theme.spacing(2),
+      width: theme.spacing(6),
+      height: theme.spacing(6),
+    }
+  },
+}));
+
+
+const developers = require('../../developers.json');
+
+
+const Contribute = () => {
+  const classes = useStyles();
+
+  return (
+    <Window type="mono">
+      <div className={classes.mono}>
+        <ContentSection sectionName="Thank You for using ChronoCube!">
+          <p>
+            ChronoCube is an Open-Source application, and we welcome anyone who desires to help our project!
+          </p>
+          <Button
+            variant="contained"
+            color="secondary"
+            startIcon={<TrendingUpIcon />}
+            href="https://github.com/users/Eug-VS/projects/3"
+          >
+            Track our progress
+          </Button>
+        </ContentSection>
+        <ContentSection sectionName="Technology stack">
+          <p> We only use modern and most relevant technologies to achieve the best results! </p>
+          <ul>
+            <li><Link href="https://www.django-rest-framework.org/">
+              Django REST Framework
+            </Link></li>
+            <li><Link href="https://reactjs.org/">
+              React.js
+            </Link></li>
+            <li><Link href="https://material-ui.com/">
+              Material UI components
+            </Link></li>
+          </ul>
+          <p> Special thanks to other Open-Source projects which made ChronoCube possible: </p>
+          <ul>
+            <li><Link href="https://github.com/bvaughn/react-window">
+              react-window
+            </Link></li>
+          </ul>
+        </ContentSection>
+        <ContentSection sectionName="How can I contribute to the project?">
+          <p> Thank You for considering helping our project! </p>
+          <p>
+            All the development process is being tracked on
+            the <Link href="https://github.com/users/Eug-VS/projects/3">KanBan board</Link>.
+            You can always check it to see what is the current state of the project.
+            To contribute your code, fork our repository and then open
+            a <Link href="https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/about-pull-requests">
+            Pull Request</Link>. We will carefully review and, hopefully, accept it!
+            If you are unfamiliar with this kind of workflow, we recommend
+            reading <Link href="https://github.com/features/project-management/">GitHub guidelines</Link>.
+          </p>
+          <p>
+            We always welcome newcomers! If you are unfamiliar with certain technologies or even with the
+            development in general, it is great time to start learning something new!
+            Our community will kindly assist every your step, and with us you can easily become
+            highly-evaluated developer!
+          </p>
+          <Button
+            variant="contained"
+            color="secondary"
+            startIcon={<NewReleasesIcon />}
+            href="https://github.com/Eug-VS/chrono-cube/issues/new"
+          >
+            Suggest feature
+          </Button>
+          <Button
+            variant="contained"
+            color="secondary"
+            startIcon={<BugReportIcon />}
+            href="https://github.com/Eug-VS/chrono-cube/issues/new"
+          >
+            Report a bug
+          </Button>
+        </ContentSection>
+        <ContentSection sectionName="Developers">
+          <List>
+            {
+              developers.map(developer => {
+                const githubUrl = `https://github.com/${developer.username}`;
+
+                return (
+                  <div key={developer.username}>
+                    <ListItem>
+                      <Link href={githubUrl}>
+                        <Avatar alt={developer.username} src={`${githubUrl}.png`} />
+                      </Link>
+                      <div>
+                        <Link href={githubUrl}>
+                          {developer.username}
+                        </Link>
+                        <Typography component="div" color="textSecondary">
+                          {developer.role}
+                        </Typography>
+                      </div>
+                    </ListItem>
+                    <Divider variant="middle" />
+                  </div>
+                )
+              })
+            }
+            <ListItem>
+              <Avatar />
+              You can be here!
+            </ListItem>
+          </List>
+          <Button
+            variant="contained"
+            color="secondary"
+            size="large"
+            href="https://github.com/users/Eug-VS/projects/3"
+          >
+            Join us!
+          </Button>
+        </ContentSection>
+      </div>
+    </Window>
+  );
+};
+
+
+export default Contribute;
diff --git a/src/components/Scoreboard/Scoreboard.js b/src/pages/Scoreboard/Scoreboard.js
index 5c83735..29d26c8 100644
--- a/src/components/Scoreboard/Scoreboard.js
+++ b/src/pages/Scoreboard/Scoreboard.js
@@ -4,10 +4,10 @@ import { makeStyles } from "@material-ui/core/styles";
 
 import { get } from "../../requests";
 
-import SmartList from "../SmartList/SmartList";
-import SolutionCard from "../SolutionCard/SolutionCard";
-import Loading from "../Loading/Loading";
-import Window from "../Window/Window";
+import SmartList from "../../components/SmartList/SmartList";
+import SolutionCard from "../../components/SolutionCard/SolutionCard";
+import Loading from "../../components/Loading/Loading";
+import Window from "../../components/Window/Window";
 
 
 const useStyles = makeStyles(theme => ({
diff --git a/src/components/TimerPage/TimerPage.js b/src/pages/Timer/Timer.js
index 22781bc..d63c661 100644
--- a/src/components/TimerPage/TimerPage.js
+++ b/src/pages/Timer/Timer.js
@@ -2,13 +2,13 @@ import React from 'react';
 
 import { post } from '../../requests';
 
-import Window from "../Window/Window";
-import ContentSection from "../ContentSection/ContentSection";
-import Timer from "./Timer/Timer";
-import SmartList from "../SmartList/SmartList";
-import SolutionCard from "../SolutionCard/SolutionCard";
+import Window from "../../components/Window/Window";
+import ContentSection from "../../components/ContentSection/ContentSection";
+import TimerButton from "./TimerButton/TimerButton";
+import SmartList from "../../components/SmartList/SmartList";
+import SolutionCard from "../../components/SolutionCard/SolutionCard";
 
-import { Typography, makeStyles } from "@material-ui/core";
+import { Typography, Button, makeStyles } from "@material-ui/core";
 
 
 const useStyles = makeStyles(theme => ({
@@ -20,7 +20,7 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-const TimerPage = ({ recentSolutions, setRecentSolutions }) => {
+const Timer = ({ recentSolutions, setRecentSolutions, setPage }) => {
   const classes = useStyles();
 
   const user = {
@@ -35,6 +35,10 @@ const TimerPage = ({ recentSolutions, setRecentSolutions }) => {
     });
   };
 
+  const handleLearnMore = () => {
+    setPage('contribute');
+  };
+
   const removeSolution = (id) => {
     setRecentSolutions(recentSolutions.filter((solution => solution.id !== id)));
   };
@@ -53,12 +57,16 @@ const TimerPage = ({ recentSolutions, setRecentSolutions }) => {
       <Window type="primary">
         <div className={classes.primary}>
           <ContentSection sectionName="Welcome to ChronoCube!">
-            <Typography>
-              Here is some text about how cool this application is, why you should use it
-              and how to make it better!
-            </Typography>
+            <p>
+              ChronoCube is a professional speedcubing timer.
+              Share your results publicly - let everyone see your progress and
+              achievements!
+              Every speedcuber will benefit
+              from using it - both amateur and professional!
+            </p>
+            <Button variant="contained" color="secondary" onClick={handleLearnMore}> Learn more </Button>
           </ContentSection>
-          <Timer registerResult={registerResult} />
+          <TimerButton registerResult={registerResult} />
         </div>
       </Window>
       <Window type="secondary" name="Recent solutions">
@@ -73,4 +81,4 @@ const TimerPage = ({ recentSolutions, setRecentSolutions }) => {
 };
 
 
-export default TimerPage;
+export default Timer;
diff --git a/src/components/TimerPage/Timer/Timer.js b/src/pages/Timer/TimerButton/TimerButton.js
index 92b153d..56d3084 100644
--- a/src/components/TimerPage/Timer/Timer.js
+++ b/src/pages/Timer/TimerButton/TimerButton.js
@@ -12,7 +12,7 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-const Timer = ({ registerResult }) => {
+const TimerButton = ({ registerResult }) => {
   const classes = useStyles();
 
   const SPACE = 32;
@@ -116,4 +116,4 @@ const convertTimeToString = timeDelta => {
 };
 
 
-export default Timer;
+export default TimerButton;