managed the state through redux to render the question page and creat…

…ed selectors for fetching the data from the state

src/plays/quizeo/src/Quizeo.jsx

@@ -5,7 +5,7 @@ import { useEffect } from 'react';
 import { setScore, setQuestionNo } from "./redux/questions/questions-action";
 import Directory from "./components/directory/directory.component";
 import Header from "./components/header/header.component";
-import { Provider } from 'react-redux';
+import { Provider} from 'react-redux';
 import { PersistGate } from 'redux-persist/integration/react';
 import './quizeo.css'
 
@@ -18,6 +18,7 @@ function Quizeo(props) {
 
  // Your Code Start below.
 
+
  useEffect(() =>{
  store.dispatch(setScore());
  store.dispatch(setQuestionNo());
@@ -32,7 +33,7 @@ function Quizeo(props) {
  <PersistGate persistor={persistor}>
  <Header/>
  <Directory/>
- </PersistGate>
+  </PersistGate>
  </Provider>
  {/* Your Code Ends Here */}
 

src/plays/quizeo/src/components/directory/directory.component.jsx

@@ -1,20 +1,29 @@
 import React from "react";
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
 import { selectDirectorySection } from "../../redux/directory/directory-selectors";
+import MoviePage from "../../pages/moviePage/moviePage.component";
+import { useSelector} from 'react-redux';
 import MenuItem from "../menu-item/menuItem.component";
+import { selectQuestionIndex, selectClickedAction} from "../../redux/movie/movieSelector";
+
 import './directory.styles.css';
-const Directory = ({sections}) => {
- return ( 
- <div className="directoryMenu">
- {sections.map(({id, ...otherSectionComponent}) => (
- <MenuItem key={id} {...otherSectionComponent}/>
- ))}
- </div> 
+const Directory = () => { 
+
+ let questionIndex = useSelector(selectQuestionIndex);
+ let isClick = useSelector(selectClickedAction);
+ const sections = useSelector(selectDirectorySection);
+
+ return (
+ <div>
+ {
+ isClick ? <MoviePage categoryId={questionIndex}/> : 
+ <div className="directoryMenu">
+ {sections.map(({id, ...otherSectionComponent}) => (
+ <MenuItem key={id} {...otherSectionComponent}/>
+ ))}
+ </div>
+ }
+ </div>
  );
 }
-
-const mapStateToProps = createStructuredSelector({
- sections: selectDirectorySection
-})
-export default connect(mapStateToProps)(Directory);
+
+export default Directory;

src/plays/quizeo/src/components/directory/directory.styles.css

@@ -1,5 +1,4 @@
 .directoryMenu{
- display: flex; 
  margin: 3rem; 
  display: flex; 
  flex-direction: row; 

src/plays/quizeo/src/components/header/header.component.js

@@ -1,14 +1,13 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
 import './header.styles.css';
+import { isClicked } from '../../redux/questions/questions-action';
 
 const Header = () => {
-
+ let dispatch = useDispatch();
  return ( 
  <div>
- <Link to="/plays/quizeo">
- <h1 className="header">Quizeo</h1>
- </Link>
+ <h1 className="header" onClick={() => dispatch(isClicked())}>Quizeo</h1>
  </div>
  );
 }

src/plays/quizeo/src/components/header/header.styles.css

@@ -1,4 +1,5 @@
 .header{
+ cursor: pointer;
  margin-top: 1.5rem; 
  margin-bottom: 3.5rem; 
  font-size: 3rem;

src/plays/quizeo/src/components/menu-item/menuItem.component.js

@@ -1,29 +1,19 @@
-import React, { useState } from "react";
-import MoviePage from "../../pages/moviePage/moviePage.component";
+import React from "react";
+import { useDispatch} from "react-redux"
+import { displayQuestionComponent, isClicked } from "../../redux/questions/questions-action";
 
 import './menu-item.styles.css'
 
 const MenuItem = ({title, imageUrl, linkUrl}) => {
- const [isClicked, setIsClicked] = useState(false);
-
- const handleClick = () =>{
- setIsClicked(true);
- }
-
- const handleLocation = () => {
- if(window.location.pathname === '/plays/quizeo/movie'){ 
- return <MoviePage categoryId={linkUrl}/>
- }
- }
-
+ const dispatch = useDispatch();
+
  return ( 
  <div className="menu-item">
  <div className="image-container" style={{backgroundImage:`url(${imageUrl})`}}/>
  <div className="image-content"
- onClick={handleClick}>
- {isClicked ? handleLocation(): null}
+ onClick={() => {dispatch(displayQuestionComponent(linkUrl)); dispatch(isClicked())}}>
  <h1>{title}</h1>
- </div> 
+ </div>
  </div>
  );
 }

src/plays/quizeo/src/components/questions/questions.component.js

@@ -3,12 +3,13 @@ import { useSelector, useDispatch } from "react-redux";
 import { ScoreModel } from "../../pages/score-page/score.component";
 import { addScore,showModel } from "../../redux/questions/questions-action";
 import { increaseQuestionNo } from "../../redux/questions/questions-action";
+import { selectQuestionNo, selectHiddenState } from "../../redux/movie/movieSelector";
 
 import './questions.styles.css';
 
 const Questions = (collection) => {
- const counter = useSelector((state) => state.movie.questionNo);
- const hidden = useSelector((state) => state.movie.hidden);
+ const counter = useSelector(selectQuestionNo);
+ const hidden = useSelector(selectHiddenState);
  const dispatch = useDispatch();
  let obj;
  return ( 

src/plays/quizeo/src/components/questions/questions.styles.css

@@ -15,7 +15,7 @@
 
 .question-model{
  margin-top:-4%;
- width: 75%; 
+ width: 50%; 
 }
 
 .category-title{

src/plays/quizeo/src/pages/moviePage/moviePage.component.js

@@ -2,15 +2,14 @@ import React from "react";
 import { useSelector } from 'react-redux'
 import { selectMovieDataSection } from "../../redux/movie/movieSelector";
 import Questions from "../../components/questions/questions.component";
-import Header from "../../components/header/header.component";
 
 import '../../quizeo.css'
+
 const MoviePage = ({categoryId}) => {
  console.log(categoryId);
  const collection = useSelector(selectMovieDataSection(categoryId))
  return ( 
  <div>
- <Header/>
  <Questions collection={collection} />
  </div>
  );

src/plays/quizeo/src/pages/score-page/score.component.js

@@ -1,12 +1,11 @@
 import React from "react"
 import { useSelector, useDispatch} from "react-redux"
-import { showModel,setScore, setQuestionNo } from "../../redux/questions/questions-action";
-import { useNavigate } from "react-router-dom";
+import { showModel,setScore, setQuestionNo, isClicked } from "../../redux/questions/questions-action";
+import { selectScore } from "../../redux/movie/movieSelector";
 import './score.styles.css';
 
 export const ScoreModel = () => {
- var score = useSelector((state) => state.movie.score)
- const navigate = useNavigate();
+ var score = useSelector(selectScore);
  const dispatch = useDispatch();
  return(
  <div className="score-container">
@@ -16,8 +15,8 @@ export const ScoreModel = () => {
  <button className="play-button"
  onClick={() => {
  dispatch(showModel());
- navigate('/plays/quizeo')
  dispatch(setScore());
+ dispatch(isClicked());
  dispatch(setQuestionNo());
  }}>Play again</button>
  </div>

src/plays/quizeo/src/redux/movie/movie-reducer.js

@@ -1,11 +1,14 @@
 import movie_data from "../../data/movie.data";
 import { QuestionTypes } from "../questions/question-types";
 import { calculateScore } from "../questions/question.utils";
+
 const INITIAL_STATE = {
  collection:movie_data,
  hidden: true,
  questionNo : 0,
- score:0
+ score:0,
+ questionIndex : '',
+ setClicked: false
 }
 
 const movieReducer = (state = INITIAL_STATE,action) =>{
@@ -35,6 +38,16 @@ const movieReducer = (state = INITIAL_STATE,action) =>{
  ...state,
  questionNo: 0
  }
+ case QuestionTypes.DISPLAY_QUESTION_COMPONENT:
+ return{
+ ...state,
+ questionIndex: action.payload
+ }
+ case QuestionTypes.IS_CLICKED:
+ return{
+ ...state,
+ setClicked: !state.setClicked
+ }
  default:
  return {...state}
  }

src/plays/quizeo/src/redux/movie/movieSelector.js

@@ -3,6 +3,31 @@ import memoize from 'lodash.memoize';
 
 const selectMovie = (state) => state.movie;
 
+export const selectQuestionIndex = createSelector(
+ [selectMovie],
+ movie => movie.questionIndex
+)
+
+export const selectQuestionNo = createSelector(
+ [selectMovie],
+ movie => movie.questionNo
+)
+
+export const selectHiddenState = createSelector(
+ [selectMovie],
+ movie => movie.hidden
+)
+
+export const selectScore = createSelector(
+ [selectMovie],
+ movie => movie.score
+)
+
+export const selectClickedAction = createSelector(
+ [selectMovie],
+ movie => movie.setClicked
+)
+
 export const selectMovieData = createSelector(
  [selectMovie],
  movie => movie.collection

src/plays/quizeo/src/redux/questions/question-types.js

@@ -3,5 +3,7 @@ export const QuestionTypes = {
  ADD_SCORE : 'ADD_SCORE',
  SHOW_MODEL : 'SHOW_MODEL',
  SET_SCORE : 'SET_SCORE',
- SET_QUESTION_NO: 'SET_QUESTION_NO'
+ SET_QUESTION_NO: 'SET_QUESTION_NO',
+ DISPLAY_QUESTION_COMPONENT : 'DISPLAY_QUESTION_COMPONENT',
+ IS_CLICKED: 'IS_CLICKED'
 }

src/plays/quizeo/src/redux/questions/question.utils.js

@@ -1,6 +1,5 @@
 
 export const calculateScore = (score, answer) =>{
- // eslint-disable-next-line eqeqeq
  if(answer.answer){
  if(answer.answer === answer.correct){
  score = score + 1

src/plays/quizeo/src/redux/questions/questions-action.js

@@ -19,4 +19,13 @@ export const setScore = () => ({
 
 export const setQuestionNo = () => ({
  type:QuestionTypes.SET_QUESTION_NO
+})
+
+export const displayQuestionComponent = (linkUrl) =>({
+ type: QuestionTypes.DISPLAY_QUESTION_COMPONENT,
+ payload: linkUrl
+})
+
+export const isClicked = () => ({
+ type:QuestionTypes.IS_CLICKED
 })

src/plays/quizeo/src/redux/store.js

@@ -1,9 +1,12 @@
-import { createStore } from "redux";
+import { createStore,applyMiddleware } from "redux";
 import { persistStore } from "redux-persist";
 
+import logger from "redux-logger";
 import rootReducer from './root-reducer';
 
-const store = createStore(rootReducer);
+const middleware = [logger];
+
+const store = createStore(rootReducer, applyMiddleware(...middleware));
 const persistor = persistStore(store);
 
 export {store, persistor};