move QuizList state to store for persistency between page

testnet/src/components/Quiz/QuizList.js

@@ -1,35 +1,45 @@
 import React from "react";
 import { Segment, Header, Button, Grid, Icon, Loader } from "semantic-ui-react";
+import { connect } from "react-redux";
+
+import { toggleActiveQuizzes, updateSelectedTopics, updateSorting } from "../../store/actions";
+
 import ToolBar from "./ToolBar";
 
 class QuizList extends React.Component {
   state = {
-    activeOnly: false,
     filterText: "",
-    sort: "",
     field: "title",
-    selectedTopics: []
-  };
-
-  handleFilterChange = ({ target: { name, value } }) => {
-    this.setState({ [name]: value });
   };
 
-  handleSliderChange = () => {
-    this.setState(state => ({ activeOnly: !state.activeOnly }));
-  }
-
   componentDidMount() {
     this.props.clearQuiz();
   }
 
+  handleFilterChange = ({ target: { name, value } }) => {
+    this.setState({ [name]: value });
+  };
+
   handleDropdownChange = (e, data) => {
     this.setState({ [data.name]: data.value });
   };
 
   render() {
-    const { quizzes, topics, history, user, loggedIn, fetchingQuizzes } = this.props;
-    const { filterText, field, sort, selectedTopics, activeOnly } = this.state;
+    const {
+      quizzes,
+      topics,
+      history,
+      user,
+      loggedIn,
+      fetchingQuizzes,
+      activeOnly,
+      selectedTopics,
+      toggleActiveQuizzes,
+      updateSelectedTopics,
+      updateSorting,
+      sortingMethod,
+    } = this.props;
+    const { filterText, field } = this.state;
 
     let filteredQuizzes = quizzes.filter(quiz => {
       if (field === "all") {
@@ -48,13 +58,13 @@ class QuizList extends React.Component {
     });
 
     if (activeOnly) {
-      filteredQuizzes = filteredQuizzes.filter(quiz => quiz.question_count > 0)
+      filteredQuizzes = filteredQuizzes.filter(quiz => quiz.question_count > 0);
     }
 
-    sort &&
+    sortingMethod &&
       filteredQuizzes.sort((quizA, quizB) => {
-        const field = sort.includes('votes') ? "votes" : "question_count";
-        if (sort.includes("descending")) {
+        const field = sortingMethod.includes("votes") ? "votes" : "question_count";
+        if (sortingMethod.includes("descending")) {
           if (quizA[field] < quizB[field]) return 1;
           if (quizA[field] === quizB[field]) return 0;
           return -1;
@@ -76,12 +86,19 @@ class QuizList extends React.Component {
             selectedTopics={selectedTopics}
             handleDropdownChange={this.handleDropdownChange}
             handleFilterChange={this.handleFilterChange}
-            handleSliderChange={this.handleSliderChange}
+            handleSliderChange={toggleActiveQuizzes}
+            updateSelectedTopics={updateSelectedTopics}
+            activeOnly={activeOnly}
+            updateSorting={updateSorting}
+            sortingMethod={sortingMethod}
           />
         </Grid.Row>
         <Grid.Row>
-          {fetchingQuizzes && <Loader active inline>Loading</Loader>
-          }
+          {fetchingQuizzes && (
+            <Loader active inline>
+              Loading
+            </Loader>
+          )}
         </Grid.Row>
         {filteredQuizzes.map(quiz => (
           <Grid.Column
@@ -148,4 +165,11 @@ class QuizList extends React.Component {
   }
 }
 
-export default QuizList;
+export default connect(
+  state => ({
+    activeOnly: state.toolReducer.activeOnly,
+    selectedTopics: state.toolReducer.selectedTopics,
+    sortingMethod: state.toolReducer.sortingMethod,
+  }),
+  { toggleActiveQuizzes, updateSelectedTopics, updateSorting }
+)(QuizList);

testnet/src/components/Quiz/ToolBar.js

@@ -13,7 +13,11 @@ const ToolBar = ({
   selectedTopics,
   handleDropdownChange,
   handleFilterChange,
-  handleSliderChange
+  handleSliderChange,
+  updateSelectedTopics,
+  activeOnly,
+  updateSorting,
+  sortingMethod,
 }) => {
   const searchValues = ["all", "title", "topic", "author"];
   const searchOptions = searchValues.map(value => ({
@@ -42,10 +46,11 @@ const ToolBar = ({
         style={{ width: "10rem", marginRight: "1rem" }}
         placeholder="Sort by..."
         clearable
+        value={sortingMethod}
         selection
         name="sort"
         options={sortOptions}
-        onChange={handleDropdownChange}
+        onChange={(e, data) => updateSorting(data.value)}
       />
       <Input
         name="filterText"
@@ -72,6 +77,7 @@ const ToolBar = ({
         <Checkbox slider
           style={{ marginLeft: "1rem" }}
           label="Show active quiz only"
+          checked={activeOnly}
           onChange={handleSliderChange}
         />
       </span>
@@ -85,7 +91,7 @@ const ToolBar = ({
         name="selectedTopics"
         value={selectedTopics}
         options={topicOptions}
-        onChange={handleDropdownChange}
+        onChange={(e, data) => updateSelectedTopics(data.value)}
       />
 
       <div
@@ -121,6 +127,10 @@ ToolBar.propTypes = {
   handleDropdownChange: PropTypes.func.isRequired,
   handleFilterChange: PropTypes.func.isRequired,
   handleSliderChange: PropTypes.func.isRequired,
+  updateSelectedTopics: PropTypes.func.isRequired,
+  activeOnly: PropTypes.bool.isRequired,
+  updateSorting: PropTypes.func.isRequired,
+  sortingMethod: PropTypes.string.isRequired,
 };
 
 export default ToolBar;

testnet/src/store/actions/index.js

@@ -121,3 +121,12 @@ export {
   updateComment,
   deleteComment
 } from "./postActions";
+
+export {
+  TOGGLE_ACTIVE_QUIZZES,
+  UPDATE_SELECTED_TOPICS,
+  UPDATE_SORTING,
+  toggleActiveQuizzes,
+  updateSelectedTopics,
+  updateSorting,
+} from "./toolActions"

testnet/src/store/actions/toolActions.js

@@ -0,0 +1,17 @@
+export const TOGGLE_ACTIVE_QUIZZES = "TOGGLE_ACTIVE_QUIZZES";
+export const UPDATE_SELECTED_TOPICS = "UPDATE_SELECTED_TOPICS";
+export const UPDATE_SORTING = "UPDATE_SORTING";
+
+export const toggleActiveQuizzes = () => ({
+  type: TOGGLE_ACTIVE_QUIZZES,
+})
+
+export const updateSelectedTopics = (topics) => ({
+  type: UPDATE_SELECTED_TOPICS,
+  payload: topics,
+})
+
+export const updateSorting = (method) => ({
+  type: UPDATE_SORTING,
+  payload: method
+})

testnet/src/store/reducers/index.js

@@ -1,11 +1,13 @@
 import { combineReducers } from 'redux';
 
 import { loginReducer } from './loginReducer';
+import { toolReducer } from './toolReducer';
 import { quizzReducer } from './quizzReducer';
 import { postReducer } from './postReducer';
 
 export default combineReducers({
   loginReducer,
+  toolReducer,
   quizzReducer,
   postReducer,
 });

testnet/src/store/reducers/toolReducer.js

@@ -0,0 +1,33 @@
+import {
+  UPDATE_SELECTED_TOPICS,
+  TOGGLE_ACTIVE_QUIZZES,
+  UPDATE_SORTING
+} from "../actions";
+
+const initialState = {
+  activeOnly: false,
+  selectedTopics: [],
+  sortingMethod: ""
+};
+
+export const toolReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case UPDATE_SELECTED_TOPICS:
+      return {
+        ...state,
+        selectedTopics: action.payload
+      };
+    case TOGGLE_ACTIVE_QUIZZES:
+      return {
+        ...state,
+        activeOnly: !state.activeOnly
+      };
+    case UPDATE_SORTING:
+      return {
+        ...state,
+        sortingMethod: action.payload
+      };
+    default:
+      return state;
+  }
+};