add progress bar and limit questions

src/components/footer.js

@@ -1,4 +1,3 @@
-import PropTypes from "prop-types"
 import React from "react"
 
 const Footer = () => (
@@ -10,7 +9,7 @@ const Footer = () => (
       textAlign: `center`
     }}
   >
-    © {new Date().getFullYear()}, Built with Love ♥
+    Built with Love ♥
   </footer>
 )
 

src/components/progress-bar.js

@@ -0,0 +1,35 @@
+import PropTypes from "prop-types"
+import React from "react"
+
+import { GetPercentage } from "../utils/style"
+import styles from "./progress-bar.module.css"
+
+const generateCircles = (count, key) => (
+    <>
+        {
+            [...Array(count).keys()].map(value => <div key={`${key}_${value}`} className={styles.quesTrack} />)
+        }
+    </>
+)
+
+const ProgressBar = ({ current, total }) => {
+    const length = GetPercentage(current, total);
+    return (
+        <div className={styles.barWrapper}>
+            <div className={styles.activeBar} style={{ width: `${length}%` }}>{generateCircles(current, 'done')}</div>
+            <div className={styles.bar} style={{ width: `${100 - length}%` }}>{generateCircles(total - current, 'left')}</div>
+        </div>
+    )
+}
+
+ProgressBar.propTypes = {
+    current: PropTypes.number,
+    total: PropTypes.number
+}
+
+ProgressBar.defaultProps = {
+    current: 1,
+    total: 10
+}
+
+export default ProgressBar

src/components/progress-bar.module.css

@@ -0,0 +1,29 @@
+.barWrapper{
+    display: flex;
+    background: #ddd;
+    border-radius: 50px;
+}
+
+.bar{
+    height: 30px;
+    border-radius: 50px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.activeBar{
+    background: #2b8a9d;
+    height: 30px;
+    border-radius: 50px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.quesTrack{
+    border-radius: 50%;
+    height: 10px;
+    width: 10px;
+    background: #fff;
+}

src/constants/config.js

@@ -1,7 +1,9 @@
 const NUMBER_OF_QUESTIONS = 10
 const TIME_FOR_EACH_QUESTION = 15
+const TIME_INTERVAL_BETWEEN_QUESTIONS = 1500
 
 export default {
     NUMBER_OF_QUESTIONS,
-    TIME_FOR_EACH_QUESTION
+    TIME_FOR_EACH_QUESTION,
+    TIME_INTERVAL_BETWEEN_QUESTIONS
 }

src/pages/index.js

@@ -2,11 +2,16 @@ import React, { Component } from "react"
 import { CountdownCircleTimer } from "react-countdown-circle-timer";
 
 import Layout from "../components/layout"
+import ProgressBar from "../components/progress-bar"
 import SEO from "../components/seo"
-import styles from "../styles/index.module.css"
 import Constants from "../constants/config"
-import data from "../jsons/transfer.json"
+import { GetQuizQuestionIndexes } from "../utils/style"
+import list from "../jsons/transfer.json"
 import logo from "../jsons/team-logo.json"
+import styles from "../styles/index.module.css"
+
+const selectedIndex = GetQuizQuestionIndexes(Constants.NUMBER_OF_QUESTIONS, list.length)
+const data = selectedIndex.map(value => list[value])
 
 const renderTime = value => {
   if (value === 0) {
@@ -32,7 +37,7 @@ class Index extends Component {
       <SEO title="Home" />
       <div className={styles.wrapperBox}>
         <div className={styles.progressWrapper}>
-
+          <ProgressBar current={this.state.currentQuestion + 1} total={data.length} />
         </div>
         <div className={styles.contentWrapper}>
           <span className={styles.heading}>Who am I?</span>
@@ -47,13 +52,17 @@ class Index extends Component {
             }
           </div>
           <CountdownCircleTimer
-            isPlaying
+            // isPlaying
             durationSeconds={Constants.TIME_FOR_EACH_QUESTION}
             colors={[["#00AA00", 0.5], ["#A30000"]]}
             renderTime={renderTime}
             strokeWidth={5}
             size={140}
-            onComplete={() => [false, 1000]}
+            onComplete={() => {
+              setTimeout(() => this.goToNextQuestion(), Constants.TIME_INTERVAL_BETWEEN_QUESTIONS)
+              return [false, Constants.TIME_INTERVAL_BETWEEN_QUESTIONS]
+            }}
+            key={this.state.currentQuestion}
           />
           <div className={styles.inputWrapper}>
             I am
@@ -91,8 +100,6 @@ class Index extends Component {
   }
 
   render() {
-    console.log(Constants);
-
     return this.renderPage();
   }
 }

src/styles/index.module.css

@@ -15,9 +15,8 @@
 }
 
 .progressWrapper{
-  height: 100px;
   border-bottom: 1px solid #ddd;
-  padding: 10px 20px;
+  padding: 20px 40px;
 }
 
 .contentWrapper{

src/utils/style.js

@@ -0,0 +1,6 @@
+export const GetPercentage = (current, total) => Math.ceil(((current / total) * 100));
+
+export const GetQuizQuestionIndexes = (length, total) => {
+    const array = [...Array(total).keys()]
+    return array.sort(() => { return .5 - Math.random() }).slice(0, length)
+}