test

reactProject/package-lock.json

@@ -8523,6 +8523,11 @@
         "symbol-observable": "1.1.0"
       }
     },
+    "redux-async-initial-state": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/redux-async-initial-state/-/redux-async-initial-state-0.2.1.tgz",
+      "integrity": "sha1-7oBzfmxlTvEt1NLipPs6shIdapI="
+    },
     "regenerate": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.3.3.tgz",

reactProject/package.json

@@ -12,7 +12,8 @@
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",
     "react-scripts": "1.0.17",
-    "redux": "^3.7.2"
+    "redux": "^3.7.2",
+    "redux-async-initial-state": "^0.2.1"
   },
   "scripts": {
     "start": "react-scripts start",

reactProject/src/components/AddTestComponent.js

@@ -40,9 +40,9 @@ class AddTestComponent extends Component {
             {
               [...Array(this.state.itemsCount)].map((item,i)=>{
                 return (
-                  <div key={i}>
-                    <AddTestItem questionNumber={++i} takeInfo={this.takeInfo.bind(this)}/>
-                  </div>
+
+                    <AddTestItem  key={i} questionNumber={++i} takeInfo={this.takeInfo.bind(this)}/>
+
                 )
               })
             }
@@ -50,8 +50,8 @@ class AddTestComponent extends Component {
             <div className="submit-form">
               <div className="submit-inner-wrapper">
                 <div className="question-edit-buttons">
-                  <button type="button" onClick={this.addQuestion}>Add question</button>
-                  <button type="button" onClick={this.deleteQuestion}>Delete question</button>
+                  <button onMouseUp={(e)=>{e.target.style.boxShadow = 'none'}} onMouseDown={(e)=>{e.target.style.boxShadow = 'inset 0 0 10px #cacaca'}} type="button" onClick={this.addQuestion}>Add question</button>
+                  <button onMouseUp={(e)=>{e.target.style.boxShadow = 'none'}} onMouseDown={(e)=>{e.target.style.boxShadow = 'inset 0 0 10px #cacaca'}} type="button" onClick={this.deleteQuestion}>Delete question</button>
                 </div>
                 <div className="select-image">
                   <input onInput={this.imageInput} type="text" placeholder="enter the image url.."/>
@@ -61,7 +61,7 @@ class AddTestComponent extends Component {
                 </div>
               </div>
               <div className="send-input">
-                <input ref="submitButton" type="submit" value="Send"/>
+                <input onMouseUp={(e)=>{e.target.style.boxShadow = 'none'}} onMouseDown={(e)=>{e.target.style.boxShadow = 'inset 0 0 10px #cacaca'}} ref="submitButton" type="submit" value="Send"/>
               </div>
             </div>
           </form>

reactProject/src/components/AddTestItem.js

@@ -6,7 +6,7 @@ export default class AddTestItem extends Component {
     super(props);
     this.state = {
       question: '',
-      answerCount: [{value: ''},{value: ''}],
+      answerCount: [{value: '',rating:0},{value: '',rating:0}],
     }
 
   }
@@ -14,21 +14,55 @@ export default class AddTestItem extends Component {
 
     return(
       <div className="add-test-item">
-        <span className="question-counter">{this.props.questionNumber}.</span>
-        <input className ="question-input" value={this.state.question} onInput={this.questionChange} ref="question" type="text" placeholder="enter the question.."/>
-        <FontAwesome name="question" className="question-mark" />
+        <div className="question-input-wrapper">
+          <span className="question-counter">{this.props.questionNumber}.</span>
+          <input className ="question-input" value={this.state.question} onInput={this.questionChange} ref="question" type="text" placeholder="enter the question.."/>
+          <FontAwesome name="question" className="question-mark" />
+        </div>
         {
           this.state.answerCount.map((item,i)=>{
-            return (<div  className="answer-input-wrapper" key={i}><FontAwesome name="circle-o" className="answer-circle"/><input onChange={this.sendData} placeholder="" value={item.value} onInput={(e)=>this.inputChange(i,e)} className ="answer-input" type="text"/><FontAwesome onClick={()=>this.deleteAnswer(i)} name='times' className="icon"/></div>)
+            return (<div  className="answer-input-wrapper" key={i}>
+              <FontAwesome name="circle-o" className="answer-circle"/>
+              <input onChange={this.sendData} placeholder="" value={item.value} onInput={(e)=>this.inputChange(i,e)} className ="answer-input" type="text"/>
+              <div className="question-rating">
+                <div className="question-rating-number">{item.rating}</div>
+                <div className="question-rating-buttons">
+                  <div className="question-rating-button" onClick={()=>this.ratingUp(i)}><FontAwesome name="angle-up" /></div>
+                  <div className="question-rating-button" onClick={()=>this.ratingDown(i)}><FontAwesome name="angle-down" /></div>
+                </div>
+              </div>
+              <FontAwesome onClick={()=>this.deleteAnswer(i)} name='times' className="icon"/>
+            </div>)
           })
         }
-        <button type="button" onClick={this.addAnswer}>Add answer</button>
+        <button onMouseUp={(e)=>{e.target.style.boxShadow = 'none'}} onMouseDown={(e)=>{e.target.style.boxShadow = 'inset 0 0 10px #cacaca'}} type="button" onClick={this.addAnswer}>Add answer</button>
       </div>
     )
   }
   //custom methods
+
+  ratingUp = (i) => {
+    var newAnswerCount = this.state.answerCount;
+    if(newAnswerCount[i].rating != 4){
+      newAnswerCount[i].rating += 1;
+      this.setState({answerCount: newAnswerCount})
+    }
+    setTimeout(()=>{
+        this.props.takeInfo(this.state,this.props.questionNumber);
+    },100)
+  }
+  ratingDown = (i) => {
+    var newAnswerCount = this.state.answerCount;
+    if(newAnswerCount[i].rating != 0){
+      newAnswerCount[i].rating -= 1;
+      this.setState({answerCount: newAnswerCount})
+    }
+    setTimeout(()=>{
+        this.props.takeInfo(this.state,this.props.questionNumber);
+    },100)
+  }
   addAnswer = () => {
-    this.setState((prevState,props)=>({answerCount: prevState.answerCount.concat({value: ''})}));
+    this.setState((prevState,props)=>({answerCount: prevState.answerCount.concat({value: '',rating: 0})}));
   }
   deleteAnswer = (i) => {
     this.setState((prevState)=>({answerCount: prevState.answerCount.filter((item,index)=>(i!=index))}))

reactProject/src/components/MainComponent.js

@@ -25,13 +25,15 @@ export default class MainComponent extends Component {
                 <FontAwesome name="bars" onClick={this.toggleAdaptiveMenu}/>
               </div>
               <div ref="navLinks" className={`nav-links ${this.state.isAdaptiveMenuOpen? 'open-adaptive-menu':''}`}>
-                <li><NavLink exact to="/" activeStyle={{backgroundColor: 'rgb(232,232,232)'}}>Main Page</NavLink></li>
-                <li><NavLink to="/addTest" activeStyle={{backgroundColor: 'rgb(232,232,232)'}}>Add New Test</NavLink></li>
+                <li onClick={this.toggleAdaptiveMenu}><NavLink exact to="/" activeStyle={{backgroundColor: 'rgb(232,232,232)'}}>Main Page</NavLink></li>
+                <li onClick={this.toggleAdaptiveMenu}><NavLink to="/addTest" activeStyle={{backgroundColor: 'rgb(232,232,232)'}}>Add New Test</NavLink></li>
               </div>
             </div>
           </nav>
 
-            <Route exact path="/" component={MainPageComponent}></Route>
+            <Route exact path="/" render={(props)=>(
+            <MainPageComponent {...props} toggleAdaptiveMenu={this.toggleAdaptiveMenu}/>
+            )}></Route>
             <Route path="/addTest" component={AddTestComponent}></Route>
             <Route path="/test/:id" component={TestComponent}></Route>
         </div>

reactProject/src/components/MainPageComponent.js

@@ -12,24 +12,24 @@ class MainPageComponent extends Component {
   }
   render(){
 
-    if(window.once){
-      console.log('fuck')
-      setTimeout(()=>{
-        window.once = false;
-        document.querySelector('li:nth-of-type(1) a').click();
-        setTimeout(()=>{
-          if(!document.querySelector('.main-page-item')){
-            document.querySelector('li:nth-of-type(1) a').click();
-          }
-        },1500)
-      },1000)
-    }
+    // if(window.once){
+    //   console.log('fuck')
+    //   setTimeout(()=>{
+    //     window.once = false;
+    //     document.querySelector('li:nth-of-type(1) a').click();
+    //     setTimeout(()=>{
+    //       if(!document.querySelector('.main-page-item')){
+    //         document.querySelector('li:nth-of-type(1) a').click();
+    //       }
+    //     },1500)
+    //   },1000)
+    // }
     return(
       <div className="main-page container">
         {
           this.props.tests.map((item,i)=>{
             return (
-              <div className="main-page-item" key={i}>
+              <div onClick={()=>{this.props.toggleAdaptiveMenu()}} className="main-page-item" key={i}>
                 <Link to={`/test/${i}`}>
                   <div className="main-page-item-img">
                     <img src={item.imageInputValue}/>
@@ -56,6 +56,8 @@ class MainPageComponent extends Component {
 
 
 const mapStateToProps = (state) => {
+
+
   return {
     tests: state,
   }

reactProject/src/components/TestComponent.js

@@ -13,6 +13,7 @@ class TestComponent extends Component {
       showReadMoreControls: false,
       showResults: false,
       answerArray: [],
+      selectedArray: [],
       answerNumber: '',
       questionNumber: 0,
       zIndex: 1,
@@ -62,8 +63,8 @@ class TestComponent extends Component {
       else{
         return(
           <div className="test-component">
-            <TestComponentItem showResults={this.showResults} questionsLength={this.state.testObject.questions.length} answerArray={this.state.answerArray} answer={this.answer} nextQuestion={this.nextQuestion} questionNumber={this.state.questionNumber2} zIndex={this.state.zIndex2} changeZIndex={this.changeZIndex} info={this.state.testObject.questions[this.state.questionNumber2]} />
-            <TestComponentItem showResults={this.showResults} questionsLength={this.state.testObject.questions.length} answerArray={this.state.answerArray} answer={this.answer} nextQuestion2={this.nextQuestion2} questionNumber={this.state.questionNumber} zIndex={this.state.zIndex} changeZIndex={this.changeZIndex} info={this.state.testObject.questions[this.state.questionNumber]} />
+            <TestComponentItem showResults={this.showResults} questionsLength={this.state.testObject.questions.length} answerArray={this.state.selectedArray} answer={this.answer} nextQuestion={this.nextQuestion} questionNumber={this.state.questionNumber2} zIndex={this.state.zIndex2} changeZIndex={this.changeZIndex} info={this.state.testObject.questions[this.state.questionNumber2]} />
+            <TestComponentItem showResults={this.showResults} questionsLength={this.state.testObject.questions.length} answerArray={this.state.selectedArray} answer={this.answer} nextQuestion2={this.nextQuestion2} questionNumber={this.state.questionNumber} zIndex={this.state.zIndex} changeZIndex={this.changeZIndex} info={this.state.testObject.questions[this.state.questionNumber]} />
           </div>
         )
       }
@@ -95,10 +96,12 @@ class TestComponent extends Component {
       this.setState({zIndex: 1,zIndex2: 0})
     }
   }
-  answer = (questionNumber,i) => {
+  answer = (questionNumber,res,i) => {
     // e.target.previousSibling.className = 'answer-circle answer-circle-active';
     var arr = this.state.answerArray;
-    arr[questionNumber] = i;
+    var arr2 = this.state.selectedArray;
+    arr[questionNumber] = res;
+    arr2[questionNumber] = i;
     this.setState({answerArray: arr});
   }
   resultScore = (i = 0) => {

reactProject/src/components/TestComponentItem.js

@@ -19,7 +19,7 @@ export default class TestComponentItem extends Component {
           <div className="test-component-item-answers">
             {
               this.props.info.answerCount.map((item, i) => {
-                return <div onClick={()=>{this.props.answer(this.props.questionNumber,i)}} key={i}>
+                return <div onClick={()=>{this.props.answer(this.props.questionNumber,item.rating,i)}} key={i}>
                   <FontAwesome name="circle-o" className={`answer-circle ${i == this.props.answerArray[this.props.questionNumber] ? 'answer-circle-active' : ''}`} id="icon"/>
                   <label htmlFor="icon">{item.value}</label>
                 </div>
@@ -28,13 +28,13 @@ export default class TestComponentItem extends Component {
           </div>
           <div className="next-question">
             {
-              this.props.questionsLength != this.props.questionNumber + 1 ? <button onClick={this.nextQuestion} type="button">Next</button>:<button onClick={()=>{this.props.showResults(this.state.canIClick)}} type="button">Show results</button>
+              this.props.questionsLength != this.props.questionNumber + 1 ? <button onMouseUp={(e)=>{e.target.style.boxShadow = 'none'}} onMouseDown={(e)=>{e.target.style.boxShadow = 'inset 0 0 10px #cacaca'}} onClick={this.nextQuestion} type="button">Next</button>:<button onClick={()=>{this.props.showResults(this.state.canIClick)}} type="button">Show results</button>
             }
           </div>
       </div>
     )
   }
-  
+
   //custom functions
 
   nextQuestion = () => {

reactProject/src/css/index.css

@@ -118,20 +118,26 @@ body input[type="text"]::placeholder {
   font-family: 'Lato', sans-serif;
   font-weight: bold;
   letter-spacing: 0.037em;
+  margin-top: 15px;
+}
+.add-test-component span.title-text:nth-of-type(1) {
+  margin-top: 5px;
 }
 .add-test-component span.title-text:nth-of-type(2) {
-  margin-top: 15px;
-  margin-bottom: 0px;
+  margin-bottom: 10px;
 }
 
 .add-test-component .add-test-header {
   text-align: center;
 }
 
+/* .add-test-component .add-test-header input {
+  margin: 0 auto;
+} */
+
 .add-test-component .title-input, .description-input {
   width: 80%;
   height: 34px;
-  margin-left: 10%;
 }
 
 .add-test-component textarea.title-input {
@@ -139,10 +145,8 @@ body input[type="text"]::placeholder {
 }
 
 .add-test-component .description-input {
-  margin-top: 10px;
   margin-bottom: 40px;
   width: 80%;
-  margin-left: 10%;
 }
 
 .add-test-component button {
@@ -158,7 +162,6 @@ body input[type="text"]::placeholder {
   border-radius: 5px;
   color: rgb(142, 142, 142);
   border: 1px solid rgb(232, 232, 232);
-  margin: 10px;
 }
 
 .add-test-component .submit-form {
@@ -172,12 +175,18 @@ body input[type="text"]::placeholder {
   flex-wrap: wrap;
 }
 
+.add-test-component .submit-inner-wrapper input, .add-test-component .submit-inner-wrapper button{
+  margin: 10px;
+  margin-bottom: 5px;
+}
+
 .add-test-component .select-image {
   width: 100%;
 }
 
 .add-test-component .select-image input {
   display: block;
+  margin-bottom: 10px;
   width: 75%;
   background-color: rgb(232,232,232);
   padding-left: 8px;
@@ -208,56 +217,104 @@ body input[type="text"]::placeholder {
 
 
 .add-test-component .submit-form input {
+  margin-top: 10px;
+  margin-right: 10px;
   font-weight: bold;
   font-family: "Lato", sans-serif;
   font-size: 1.05rem;
   box-shadow: inset 1px 1px 4px rgb(220, 220, 220)!important;
 }
 
+.question-rating {
+  display: inline-block;
+  position: relative;
+  right: 31px;
+  top: 10.5px;
+}
+
+.question-rating-number {
+  display: inline-block;
+  position: relative;
+  bottom: 10px;
+  width: 53%;
+  padding: 6.1px 0;
+  padding-left: 3px;
+  border-left: 1px solid rgba(200,200,200,.2);
+  background: linear-gradient(to top, rgb(240,240,240),rgb(243,243,243));
+  box-shadow: inset 0 0 2px rgb(200,200,200);
+  /* border-right: none; */
+  color: rgb(130,130,130);
+}
+
+.question-rating-buttons{
+  display: inline-block;
+  width: 47%;
+  cursor: pointer;
+
+}
+
+.question-rating-button{
+  height: 17px;
+  padding-left: 2px;
+  padding-right: 7px;
+  box-shadow: inset 0 0 1px rgb(200,200,200);
+  border: 1px solid rgba(200, 200, 200,.6);
+  background-color: rgb(227, 227, 227);
+}
+
+.question-rating-button:nth-of-type(1) {
+  border-top-right-radius: 8px;
+}
+
+.question-rating-button:nth-of-type(2) {
+  border-bottom-right-radius: 8px;
+}
+
+.question-rating-button span {
+  font-size: 13px;
+  position: relative;
+  bottom: 3px;
+}
+
 .add-test-item {
   position: relative;
   border-bottom: 1px solid #e8e8e8;
   padding-top: 13px;
 }
 
-.add-test-item:nth-first-of-type,  .add-test-item:nth-last-of-type {
+.add-test-item:nth-of-type(2) {
     border-top: 1px solid #e8e8e8;
 }
 
 .add-test-item span.question-counter {
-  position: absolute;
-  left: 9px;
-  top: 20px;
+  position: relative;
+  top: 4px;
   font-size: 1.9rem;
   font-weight: bold;
   color: rgb(195, 195, 195);
 }
 
 .add-test-item span.question-mark{
-  top: 18px;
-  right: 140px;
-  width: 30px;
-  position: absolute;
+  position: relative;
+  top: 5px;
   text-align: right;
   color: rgb(210,210,210);
   font-size: 37px;
 }
 
 .add-test-item .answer-circle {
-  position: absolute;
-  left: 11%;
-  top: 13%;
+  position: relative;
+  top: 2px;
   font-size: 24px;
   color: rgb(205, 205, 205);
 }
 
 .add-test-item input, .title-input, .description-input{
-  display: block;
+  display: inline-block;
   width: 70%;
   font-size: 1rem;
   padding: 0 10px;
   height: 34px;
-  margin: 10px;
   border-radius: 8px;
   border: 1px solid rgb(232, 232, 232);
   background: linear-gradient(to top, rgb(239,239,239),rgb(242,242,242));
@@ -267,13 +324,14 @@ body input[type="text"]::placeholder {
 }
 
 .answer-input-wrapper {
-  position: relative;
+  padding-left: 80px;
+
 }
 
 .add-test-item span.icon{
-  position: absolute;
-  left: 625px;
-  bottom: -3px;
+  position: relative;
+  top: 1px;
+  right: 22px;
   font-size: 22px;
   height: 30px;
   width: 30px;
@@ -287,9 +345,14 @@ body input[type="text"]::placeholder {
   color: rgb(185, 185, 185);
 }
 
-.add-test-item .question-input {
-  margin-left: 50px;
+.question-input-wrapper{
   margin-bottom: 15px;
+  padding-left: 5px;
+}
+
+.add-test-item .question-input {
+  margin-left: 20px;
+  margin-right: 5px;
 }
 
 .add-test-item .question-input::placeholder {
@@ -297,7 +360,9 @@ body input[type="text"]::placeholder {
 }
 
 .add-test-item .answer-input {
-  margin: 10px auto;
+  display: inline-block;
+  width: 80%;
+  margin-left: 10px;
 }
 
 .add-test-item .answer-input::placeholder {
@@ -312,6 +377,7 @@ body input[type="text"]::placeholder {
   height: 34px;
   border-radius: 5px;
   border: 1px solid rgb(232, 232, 232);
+
 }
 
 /* main-page */
@@ -626,6 +692,8 @@ span.answer-circle-active {
   text-align: center;
 }
 
+
+
 .read-more-text{
   display: block;
   padding: 10px 0 10px;
@@ -682,6 +750,8 @@ span.answer-circle-active {
     overflow: hidden;
   }
 
+
+
   .main-component nav li {
     width: 100%;
   }

reactProject/src/reducers/index.js

@@ -3,12 +3,13 @@ import { config } from '../firebaseConfig';
 import { combineReducers } from 'redux';
 import { refreshState } from '../actions/index';
 import axios from 'axios';
+import store from '../store/index';
 
 var app = firebase.initializeApp(config);
 var database = app.database().ref().child('tests');
 
-var databaseTests = [];
 database.on('value', snap => {
+  var databaseTests = [];
   var retrievedObject = snap.val();
   if(retrievedObject){
     var keys = Object.keys(retrievedObject);
@@ -16,6 +17,8 @@ database.on('value', snap => {
       databaseTests[i] = retrievedObject[keys[i]];
     }
   }
+  setTimeout(()=>{store.dispatch({type: 'REFRESH_STATE', databaseTests})},500)
+
 })
 
 // axios.get('https://react-project-a3c86.firebaseio.com/tests.json').then(function(result){
@@ -28,14 +31,14 @@ database.on('value', snap => {
 //   }
 // })
 
-const addTestReducer = (state = databaseTests, action) => {
+const addTestReducer = (state = [], action) => {
   if( action.type === 'ADD_NEW_TEST'){
     database.push().set(action.testObject);
     return state //.concat(action.testObject);
   }
-  // else if(action.type === 'REFRESH_STATE'){
-  //   return
-  // }
+  else if(action.type === 'REFRESH_STATE'){
+    return action.databaseTests;
+  }
   return state;
 }