Merge pull request #130 from creativecolab/feedback-provider

Completed workflow for feedback provider without PDF integration

package.json

@@ -8,6 +8,7 @@
     "@types/node": "^12.11.7",
     "@types/react": "^16.9.11",
     "@types/react-dom": "^16.9.3",
+    "@types/react-pdf": "^4.0.3",
     "antd": "^3.24.3",
     "babel-plugin-import": "^1.12.2",
     "babel-polyfill": "^6.26.0",
@@ -27,6 +28,7 @@
     "react-hook-form": "^3.26.4",
     "react-intersection-observer": "^8.25.1",
     "react-mailchimp-form": "^1.0.2",
+    "react-pdf": "^4.1.0",
     "react-redux": "^7.1.3",
     "react-reveal": "^1.2.2",
     "react-router": "^5.1.2",

public/index.html

@@ -18,7 +18,7 @@
     -->
     <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800,900&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Rubik&display=swap" rel="stylesheet">
     <!--Bootstrap-->
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

src/components/layouts/feedback-provider-layout/index.tsx

@@ -0,0 +1,55 @@
+import React from 'react'
+import { render } from 'react-dom'
+import {Row, Col, Form, Input, Button} from '@d4sd/components'
+import ProviderInformation from './provider-information'
+import QuestionList from './question-list'
+import SubmissionPreview from './submission-preview';
+import Header from '../../Header/index';
+
+const FeedbackProviderLayout = (props: any) => {
+
+  const onSubmit = (data: any) => {
+    console.log(data);
+    //Write to firebase
+  }
+
+  return(
+    <div>
+      <div className="header">
+      <Row type="flex" justify="center" className="subtxt">
+        <Col span={18}>
+          <h1>Provide Feedback</h1>
+          <p> Welcome and thank you for agreeing to provide feedback! 
+          Start by saying a little bit about yourself.  Then please 
+          review the team’s concept below on the left and provide 
+          feedback on the right. Feedback makes the most impact 
+          when it is positive, constructive, well-justified, and actionable.</p>
+        </Col>
+
+      </Row>
+      </div>
+      <ProviderInformation />
+
+      <Row className="provideInput"> 
+        <h1>Review and Provide Input</h1>
+      </Row>
+
+      <Row type="flex" justify="center">
+        <Col xs={{span: 20}} md={{span: 10}}>
+          <SubmissionPreview />
+        </Col>
+        <Col xs={{span: 20}} md={{span: 10}}>
+          <QuestionList />
+        </Col>
+      </Row>
+
+      <Row type= "flex" justify="center" className="submit-btn-feedback">
+        <Col>
+        <Button htmlType="submit" type="primary">SUBMIT</Button>
+        </Col>
+      </Row>
+    </div> 
+  );
+}
+
+export default FeedbackProviderLayout;

src/components/layouts/feedback-provider-layout/provider-information.tsx

@@ -0,0 +1,94 @@
+import React, { useEffect, Provider } from 'react'
+import {render} from 'react-dom'
+import {Row, Col, Form, Icon, Input, Button} from '@d4sd/components'
+import useForm from 'react-hook-form'
+import { withRouter } from 'react-router'
+
+const ProviderInformation = (props: any) => {
+  const {register, handleSubmit, setValue} = useForm();
+
+  //get values from local storage
+  const name= localStorage.getItem("name") || '';
+  const email= localStorage.getItem("email") || '';
+  const institution = localStorage.getItem("institution") || '';
+  const expertise = localStorage.getItem("expertise") || '';
+
+
+  const onSubmit = (data: any) => {
+    console.log(data)
+    //store information to Firebase
+  }
+
+  //store to state
+  const handleChange = (e: any) => {
+    setValue(e.target.name, e.target.value);
+    localStorage.setItem(e.target.name, e.target.value)
+    console.log(e.target.value);
+  }
+
+  useEffect(()=>{
+    register({name: 'name'});
+    register({name: 'email'});
+    register({name: 'institution'});
+    register({name: 'expertise'});
+  }, []);
+
+  return (
+    <div className="AboutYou">
+      <h1>Information About You</h1>
+      <Row type="flex" justify="center">
+        <Col xs={{span: 10}} sm={{span: 6}}>
+        <p>First tell us a little bit about yourself</p>
+        </Col>
+      </Row>
+
+      <Form onSubmit={handleSubmit(onSubmit)}>
+        <Input.Group>
+        <Row type="flex" justify="center">
+          <Col xs={{span: 10}} sm={{span: 6}}>
+            <h5>1. Your full name</h5>
+          </Col>
+          <Col xs={{span: 20}} sm={{span: 12}} lg={{span: 8}}>
+            <Input onChange={handleChange} name="name" defaultValue={name}/>
+          </Col>
+        </Row>
+
+        <Row type="flex" justify="center">
+          <Col xs={{span: 10}} sm={{span: 6}}>
+            <h5>2. Your email</h5>
+          </Col>
+          <Col xs={{span: 20}} sm={{span: 12}} lg={{span: 8}}>
+            <Input onChange={handleChange} name="email" defaultValue={email}/>
+          </Col>
+        </Row>
+
+        <Row type="flex" justify="center">
+          <Col xs={{span: 10}} sm={{span: 6}}>
+            <h5>3. Your institution and title</h5>
+          </Col>
+          <Col xs={{span: 20}} sm={{span: 12}} lg={{span: 8}}>
+            <Input onChange={handleChange} name="institution" defaultValue={institution}/>
+          </Col>
+        </Row>
+
+        <Row type="flex" justify="center">
+          <Col xs={{span: 10}} sm={{span: 6}}>
+            <h5>4. Your area of expertise</h5>
+          </Col>
+          <Col xs={{span: 20}} sm={{span: 12}} lg={{span: 8}}>
+            <Input onChange={handleChange} name="expertise" defaultValue={expertise}/>
+          </Col>
+        </Row>
+
+
+
+        </Input.Group>
+
+      </Form>
+
+    </div>
+  )
+
+}
+
+export default ProviderInformation

src/components/layouts/feedback-provider-layout/question-list.tsx

@@ -0,0 +1,82 @@
+import React, { useEffect, useState } from 'react'
+import useForm from 'react-hook-form'
+import { render } from 'react-dom';
+import { Row, Input } from 'antd';
+import TextArea from 'antd/lib/input/TextArea';
+import './styles.less'
+
+const QuestionList = (props: any) => {
+  const {register, handleSubmit, setValue} = useForm();
+
+  //Need to get these questions from Firebase
+  const question1= "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+  const question2= "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+  const question3= "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+
+
+  //get the three answers from local storage
+  const answer1= localStorage.getItem('question1') || '';
+  const answer2= localStorage.getItem('question2') || '';
+  const answer3= localStorage.getItem('question3') || '';
+  const comments= localStorage.getItem('comments') || '';
+
+
+  //Set the three questions from firebase
+
+  const handleChange = (e:any) => {
+    setValue(e.target.name, e.target.value);
+    localStorage.setItem(e.target.name, e.target.value);
+  }
+
+  useEffect(()=>{
+    register({name: 'question1'});
+    register({name: 'question2'});
+    register({name: 'question3'});
+    register({name: 'comments'});
+  }, []);
+
+  return(
+    <div>
+      <h4>Question List</h4>
+      <p><b>Please answer the questions below</b></p>
+
+      <Input.Group className="inputs">
+
+        <Row>       
+        <p><b>Question 1: </b> {question1}</p>
+        <TextArea autoSize={{minRows: 3, maxRows: 5}} 
+            onChange={handleChange}
+            name="question1" defaultValue={answer1} />
+        </Row>
+
+        <Row>       
+        <p><b>Question 2: </b> {question2}</p>
+        <TextArea autoSize={{minRows: 3, maxRows: 5}}  
+            onChange={handleChange}
+            name="question2"
+            defaultValue={answer2}/>
+        </Row>
+
+        <Row>       
+        <p><b>Question 3: </b> {question3}</p>
+        <TextArea autoSize={{minRows: 3, maxRows: 5}} 
+            onChange={handleChange}
+            name="question3"
+            defaultValue={answer3}/>
+        </Row>
+
+        <Row>       
+        <p><b>Other Comments: </b></p>
+        <TextArea autoSize={{minRows: 3, maxRows: 5}} 
+            onChange={handleChange}
+            name="comments"/>
+        </Row>
+
+
+      </Input.Group>
+
+    </div>
+  );
+}
+
+export default QuestionList;

src/components/layouts/feedback-provider-layout/solution-view.tsx

@@ -0,0 +1,44 @@
+import React, { Component, useState } from 'react';
+
+class DisplaySolution extends Component {
+//   state = {
+//     numPages: null,
+//     pageNumber: 1,
+//   }
+
+//   onDocumentLoadSuccess = ({ numPages }) => {
+//     this.setState({ numPages });
+//   }
+
+//   render() {
+//     const { pageNumber, numPages } = this.state;
+
+//     return (
+//       <div>
+//         <Document
+//           file="random.pdf"
+//           onLoadSuccess={this.onDocumentLoadSuccess}
+//         >
+//           <Page pageNumber={pageNumber} />
+//         </Document>
+//         <p>Page {pageNumber} of {numPages}</p>
+//       </div>
+//     );
+//   }
+// }
+
+// const DisplaySolution = (props: any) => {
+//   const [numPages, set]
+// }
+
+  render(){
+    return(
+      <div>
+        Display PDF Here
+      </div>
+    );
+  }
+
+}
+
+export default DisplaySolution;

src/components/layouts/feedback-provider-layout/styles.less

@@ -0,0 +1,46 @@
+@import "../../../styles/vars.less";
+.inputs{
+  p{
+    margin-top: @margin-base-1/2;
+  }
+}
+.header{
+  background-color: #E4F2FF;
+  height: @header-height;
+
+  .subtxt{
+    padding-top: @margin-base-2;
+  }
+
+
+}
+
+.provideInput{
+  margin-top: @margin-base-1;
+}
+
+.AboutYou{
+  margin-top: @margin-base-1;
+
+  .p{
+    margin-top: @margin-base-1/2;
+  }
+
+  Form{
+    margin-top: @margin-base-1/2;
+  }
+}
+
+.probStatement{
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  padding: @margin-base-1/2;
+}
+
+.submit-btn-feedback{
+  margin-top: @margin-base-2;
+  margin-bottom: @margin-base-2;
+}
+
+.proposed-concept{
+  margin-top: @margin-base-1;
+}