Components questions

src/components/Container/Container.scss

@@ -1,7 +1,11 @@
 .container {
   position: relative;
+  top: 55px;
   width: 100%;
   max-width: 1120px;
-  height: 100vh;
+  height: calc(100vh - 110px);
   margin: 0 auto;
+  &--small {
+    max-width: 845px;
+  }
 }

src/components/Container/index.js

@@ -3,13 +3,17 @@ import propTypes from 'prop-types';
 
 import styles from './Container.scss';
 
-const Container = ({ children }) => (
-  <div className={styles.container}>
+const Container = ({ children, className }) => (
+  <div className={`${styles.container} ${className}`}>
     {children}
   </div>
 );
 
 Container.propTypes = {
   children: propTypes.node.isRequired,
+  className: propTypes.string,
+};
+Container.defaultProps = {
+  className: '',
 };
 export default Container;

src/components/CreateNewProjectWithTokens/index.js

@@ -149,7 +149,7 @@ class CreateNewProjectWithTokens extends Component {
   render() {
     const { steps } = this;
     const { currentStep, indicatorStep } = this.state;
-    if (currentStep === steps.uploading) return <Redirect to="/uploadWithExistingTokens" />;
+    if (currentStep === steps.uploading) return <Redirect to="/uploadProject" />;
     return (
       <Container>
         <div className={styles.form}>

src/components/CreateNewProjectWithoutTokens/index.js

@@ -181,7 +181,7 @@ class CreateNewProjectWithoutTokens extends Component {
 
   render() {
     const { currentStep, indicatorStep } = this.state;
-    if (currentStep === 'uploading') return <Redirect to="/uploadWithNewTokens" />;
+    if (currentStep === 'uploading') return <Redirect to="/uploadProject" />;
     return (
       <Container>
         <div className={styles.form}>

src/components/DropdownOption/index.js

@@ -27,10 +27,11 @@ DropdownOption.propTypes = {
   value: propTypes.string.isRequired,
   label: propTypes.string.isRequired,
   select: propTypes.func.isRequired,
-  subOption: propTypes.string.isRequired,
+  subOption: propTypes.string,
 };
 
 DropdownOption.defaultProps = {
+  subOption: '',
 };
 
 export default DropdownOption;

src/components/Footer/Footer.scss

@@ -0,0 +1,34 @@
+@import '../../assets/styles/partials/variables';
+
+.footer {
+  padding: 15px 0;
+  a {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    justify-content: center;
+    color: $border;
+    font-size: 11px;
+    text-align: center;
+    svg {
+      path {
+        transition: .2s;
+      }
+    }
+    span {
+      margin-left: 10px;
+      transition: .2s;
+    }
+    &:hover{ 
+      svg {
+        path {
+          opacity: 1;
+          fill: $primary;
+        }
+      }
+      span {
+        color: $primary;
+      }
+    }
+  }
+}

src/components/Footer/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { GithubIcon } from '../Icons';
+
+import styles from './Footer.scss';
+
+const Footer = () => (
+  <footer className={styles.footer}>
+    <a href="/">
+      <GithubIcon />
+      <span>GitHub</span>
+    </a>
+  </footer>
+);
+
+export default Footer;

src/components/Header/Header.scss

@@ -1,7 +1,7 @@
 @import '../../assets/styles/partials/variables';
 
 .header {
-  position: absolute;
+  position: relative;
   top: 30px;
   left: 50%;
   z-index: 2;

src/components/Icons/entities/StartIcon.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const StartIcon = () => (
+  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g opacity="0.7">
+      <path d="M16.0002 29.3332C23.364 29.3332 29.3335 23.3636 29.3335 15.9998C29.3335 8.63604 23.364 2.6665 16.0002 2.6665C8.63637 2.6665 2.66683 8.63604 2.66683 15.9998C2.66683 23.3636 8.63637 29.3332 16.0002 29.3332Z" stroke="black" strokeLinecap="round" strokeLinejoin="round" />
+      <path d="M13.3332 10.6665L21.3332 15.9998L13.3332 21.3332V10.6665Z" stroke="black" strokeLinecap="round" strokeLinejoin="round" />
+    </g>
+  </svg>
+);
+
+export default StartIcon;

src/components/Icons/index.js

@@ -22,6 +22,8 @@ import TokenName from './entities/TokenNameIcon';
 import TxHashIcon from './entities/TxHashIcon';
 import TxRecieptIcon from './entities/TxRecieptIcon';
 import VerifyIcon from './entities/VerifyIcon';
+import StartIcon from './entities/StartIcon';
+import GithubIcon from './entities/GithubIcon';
 
 export {
   AddIcon,
@@ -48,4 +50,6 @@ export {
   TxHashIcon,
   TxRecieptIcon,
   VerifyIcon,
+  StartIcon,
+  GithubIcon,
 };

src/components/ProjectList/index.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import propTypes from 'prop-types';
-import { NavLink } from 'react-router-dom';
+import { NavLink, Redirect } from 'react-router-dom';
 import { inject, observer } from 'mobx-react';
 import { withTranslation } from 'react-i18next';
 import Button from '../Button/Button';
@@ -17,24 +17,53 @@ import styles from '../Login/Login.scss';
 class ProjectList extends Component {
   constructor(props) {
     super(props);
-    this.state = {};
+    this.state = {
+      redirectToProject: false,
+      redirectToUploading: false,
+    };
   }
 
   componentDidMount() {
     const { appStore } = this.props;
     appStore.readProjectList();
   }
 
+  gotoProject = (address) => {
+    const { appStore } = this.props;
+    appStore.gotoProject(address);
+    this.setState({ redirectToProject: true });
+  }
+
+  startUploading = (address) => {
+    const { appStore } = this.props;
+    appStore.setProjectAddress(address);
+    this.setState({ redirectToUploading: true });
+  }
+
+  checkProject = async (address) => {
+    const { appStore } = this.props;
+    const isQuestionsUploaded = await appStore.checkIsQuestionsUploaded(address);
+    // eslint-disable-next-line no-unused-expressions
+    isQuestionsUploaded
+      ? this.gotoProject(address)
+      : this.startUploading(address);
+  }
+
   render() {
     const { appStore: { projectList }, t } = this.props;
+    const { redirectToProject, redirectToUploading } = this.state;
     const projects = projectList.map((project, index) => (
       <Button
         theme="project"
         key={`Button-${index + 1}`}
+        onClick={() => { this.checkProject(project.address); }}
       >
         {project.name.replace(/([!@#$%^&*()_+\-=])+/g, ' ')}
       </Button>
     ));
+
+    if (redirectToProject) return <Redirect to="/questions" />;
+    if (redirectToUploading) return <Redirect to="/uploadQuestions" />;
     return (
       <Container>
         <div className={`${styles.form} ${styles['form--wide']}`}>
@@ -62,6 +91,9 @@ ProjectList.propTypes = {
   appStore: propTypes.shape({
     readProjectList: propTypes.func.isRequired,
     projectList: propTypes.arrayOf(propTypes.object).isRequired,
+    checkIsQuestionsUploaded: propTypes.func.isRequired,
+    gotoProject: propTypes.func.isRequired,
+    setProjectAddress: propTypes.func.isRequired,
   }).isRequired,
   t: propTypes.func.isRequired,
 };

src/components/ProjectUploading/index.js

@@ -37,11 +37,34 @@ class ProjectUploading extends Component {
   componentDidMount() {
     const { steps } = this;
     const {
-      appStore, appStore: { deployArgs, name }, userStore: { password }, t,
+      appStore, appStore: { deployArgs, projectAddress }, userStore: { password }, type,
     } = this.props;
-    this.setState({
-      step: steps.sending,
-    });
+
+    switch (type) {
+      case ('project'):
+        this.setState({
+          step: steps.sending,
+        });
+        this.deployProject(deployArgs, password);
+        break;
+      case ('question'):
+        this.setState({
+          step: steps.questions,
+        });
+        appStore.deployQuestions(projectAddress).then(() => {
+          this.setState({
+            uploading: false,
+          });
+        });
+        break;
+      default:
+        break;
+    }
+  }
+
+  deployProject(deployArgs, password) {
+    const { steps } = this;
+    const { appStore, appStore: { name }, t } = this.props;
 
     appStore.deployContract('project', deployArgs, password)
       .then((txHash) => {
@@ -55,6 +78,7 @@ class ProjectUploading extends Component {
           this.setState({
             step: steps.questions,
           });
+          appStore.setProjectAddress(receipt.contractAddress);
           appStore.addProjectToList({ name, address: receipt.contractAddress });
           appStore.deployQuestions(receipt.contractAddress).then(() => {
             this.setState({
@@ -126,9 +150,11 @@ const AlertBlock = withTranslation()(({ t }) => (
         {t('headings:projectCreated.subheading.1')}
       </span>
     </Heading>
-    <Button theme="black" width="310" icon={<Login />} type="submit">
-      {t('buttons:toCreatedProject')}
-    </Button>
+    <NavLink to="/questions">
+      <Button theme="black" width="310" icon={<Login />} type="submit">
+        {t('buttons:toCreatedProject')}
+      </Button>
+    </NavLink>
     <NavLink to="/projects">
       <Button theme="link" type="submit">
         {t('buttons:otherProject')}
@@ -147,11 +173,14 @@ ProjectUploading.propTypes = {
     addProjectToList: propTypes.func.isRequired,
     deployQuestions: propTypes.func.isRequired,
     displayAlert: propTypes.func.isRequired,
+    projectAddress: propTypes.func.isRequired,
+    setProjectAddress: propTypes.func.isRequired,
   }).isRequired,
   userStore: propTypes.shape({
     password: propTypes.string.isRequired,
   }).isRequired,
   t: propTypes.func.isRequired,
+  type: propTypes.string.isRequired,
 };
 
 Progress.propTypes = {

src/components/Questions/FullQuestion/index.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { useHistory, useParams } from 'react-router-dom';
+import Container from '../../Container';
+import Question from '../Question';
+import Button from '../../Button/Button';
+
+import styles from '../Questions.scss';
+
+
+const FullQuestion = () => {
+  const { id } = useParams();
+  const { goBack } = useHistory();
+  return (
+    <Container className="container--small">
+      <div className={styles.questions}>
+        <div className={styles.questions__head}>
+          <div className={styles['questions__head-create']}>
+            <Button theme="white" onClick={goBack}>
+              Назад
+            </Button>
+          </div>
+        </div>
+        <div className={styles.questions__wrapper}>
+          <Question id={id} extended />
+        </div>
+      </div>
+    </Container>
+  );
+};
+
+export default FullQuestion;