Merge branch 'ui'

ykrueng · Dec 31, 2018 · 54dde10 · 54dde10
2 parents 1eee82a + d331153
commit 54dde10
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 19 deletions.
diff --git a/testnet/src/components/LoaderOrError/LoaderOrError.js b/testnet/src/components/LoaderOrError/LoaderOrError.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import { Loader, Header } from 'semantic-ui-react';
+
+const LoaderOrError = ({process, error, errorMsg, text="Loading"}) => {
+  return (
+    <div style={{textAlign: "center"}}>
+      {process && <Loader active inline content={text} />}
+      {error && <Header as="h4">{errorMsg}</Header>}
+    </div>
+  );
+}
+
+export default LoaderOrError;
diff --git a/testnet/src/components/Quiz/UpdateForm.js b/testnet/src/components/Quiz/UpdateForm.js
@@ -1,16 +1,18 @@
 import React, { Component } from "react";
-import { Segment, Header, Form, Button, Divider } from "semantic-ui-react";
+import { Segment, Header, Form, Button, Divider, Confirm } from "semantic-ui-react";
 import { connect } from "react-redux";
 
 import Unauthorized from "../Login/Unauthorized";
+import LoaderOrError from "../LoaderOrError/LoaderOrError";
+import QuestionForm from "./QuestionForm";
 
 import { getQuizz, getQuestions, updateQuizz, deleteQuizz } from "../../store/actions";
-import QuestionForm from "./QuestionForm";
 
 class UpdateForm extends Component {
   state = {
     title: "",
-    topic: ""
+    topic: "",
+    confirmation: false,
   };
 
   componentDidMount() {
@@ -19,13 +21,16 @@ class UpdateForm extends Component {
     getQuestions(match.params.id);
   }
 
-  componentWillReceiveProps({ quiz }) {
+  componentWillReceiveProps({ quiz, quizDeleted }) {
     if (quiz.id === Number(this.props.match.params.id)) {
       this.setState({
         title: quiz.title,
         topic: quiz.topic
       });
     }
+
+    // successfully deleted a quiz
+    quizDeleted && this.props.history.push("/quizzes");
   }
 
   handleChange = ({ target: { name, value } }) => {
@@ -49,14 +54,16 @@ class UpdateForm extends Component {
     const { match, token, history, deleteQuizz } = this.props;
     const id = Number(match.params.id);
     deleteQuizz(id, token);
+    this.setState({confirmation: false})
 
-    history.push("/quizzes");
+    // history.push("/quizzes");
   };
 
   render() {
-    const { title, topic } = this.state;
-    const { history, match, quiz, questions, token, user } = this.props;
-
+    const { title, topic, confirmation } = this.state;
+    const { history, match, quiz, questions, token, user, fetchingQuiz, quizError, updatingQuiz, updateQuizError, deletingQuiz, deleteQuizError } = this.props;
+
+    console.log(deletingQuiz)
     // user not logged in
     if (!token)
       return (
@@ -111,7 +118,13 @@ class UpdateForm extends Component {
           floated="right"
           icon="trash alternate outline"
           content="Delete"
-          onClick={this.handleDelete}
+          onClick={() => this.setState({ confirmation: true })}
+        />
+        <Confirm
+          open={confirmation}
+          content={`Are you sure you want to delete this quiz?`}
+          onCancel={() => this.setState({ confirmation: false })}
+          onConfirm={this.handleDelete}
         />
         <Header as="h2">Update Quiz</Header>
         <Form onSubmit={this.handleUpdate}>
@@ -132,6 +145,9 @@ class UpdateForm extends Component {
             />
           </Form.Group>
         </Form>
+        <LoaderOrError process={fetchingQuiz} error={quizError} errorMsg="Failed to Fetch Quiz" />
+        <LoaderOrError process={updatingQuiz} error={updateQuizError} errorMsg="Failed to Update Quiz" text="Updating" />
+        <LoaderOrError process={deletingQuiz} error={deleteQuizError} errorMsg="Failed to Delete Quiz" text="Deleting" />
         <Divider />
         <Header as="h2" content="Add Question" />
         <QuestionForm add history={history} match={match} />
@@ -154,7 +170,13 @@ export default connect(
     user: loginReducer.user,
     quiz: quizzReducer.quizz,
     questions: quizzReducer.questions,
-    fetchingQuizz: quizzReducer.fetchingQuizz
+    fetchingQuiz: quizzReducer.fetchingQuizz,
+    updatingQuiz: quizzReducer.updatingQuiz,
+    deletingQuiz: quizzReducer.deletingQuiz,
+    quizError: quizzReducer.quizError,
+    updateQuizError: quizzReducer.updateQuizError,
+    deleteQuizError: quizzReducer.deleteQuizError,
+    quizDeleted: quizzReducer.quizDeleted,
   }),
   { getQuizz, updateQuizz, deleteQuizz, getQuestions }
 )(UpdateForm);
diff --git a/testnet/src/store/reducers/quizzReducer.js b/testnet/src/store/reducers/quizzReducer.js
@@ -51,17 +51,22 @@ const initialState = {
   questionPosted: false,
   fetchingQuizzes: false,
   fetchingQuizz: false,
+  updatingQuiz: false,
   checkingAnswer: false,
   checkDone: false,
   fetchingTopics: false,
   fetchingQuestions: false,
   fetchingQuestion: false,
   postingQuestion: false,
   postingResults: false,
-  deletingQuizz: false,
+  deletingQuiz: false,
   deletingQuestion: false,
   error: null,
   quizzesError: null,
+  quizError: null,
+  updateQuizError: null,
+  deleteQuizError: null,
+  quizDeleted: false,
 };
 
 export const quizzReducer = (state = initialState, action) => {
@@ -89,18 +94,22 @@ export const quizzReducer = (state = initialState, action) => {
     case QUIZZ_REQUEST:
       return {
         ...state,
-        fetchingQuizz: true
+        fetchingQuizz: true,
+        quizDeleted: false,
+        quizError: false,
       };
     case QUIZZ_SUCCESS:
       return {
         ...state,
         fetchingQuizz: false,
+        quizError: false,
         quizz: action.payload
       };
     case QUIZZ_FAILURE:
       return {
         ...state,
         fetchingQuizz: false,
+        quizError: true,
         error: action.payload
       };
     case TOPICS_REQUEST:
@@ -140,7 +149,8 @@ export const quizzReducer = (state = initialState, action) => {
     case POST_QUIZZ_REQUEST:
       return {
         ...state,
-        postingQuizz: true
+        postingQuizz: true,
+        quizDeleted: false,
       };
     case POST_QUIZZ_SUCCESS:
       return {
@@ -158,13 +168,15 @@ export const quizzReducer = (state = initialState, action) => {
     case PATCH_QUIZZ_REQUEST:
       return {
         ...state,
-        checkingAnswer: true,
+        updatingQuiz: true,
+        updateQuizError: false,
         checkDone: false
       };
     case PATCH_QUIZZ_SUCCESS:
       return {
         ...state,
-        checkingAnswer: false,
+        updatingQuiz: false,
+        updateQuizError: false,
         checkDone: true,
         quizzes: state.quizzes.map(quiz => {
           if (quiz.id === action.payload.id) {
@@ -177,24 +189,31 @@ export const quizzReducer = (state = initialState, action) => {
     case PATCH_QUIZZ_FAILURE:
       return {
         ...state,
-        checkingAnswer: false,
+        updatingQuiz: false,
+        updateQuizError: true,
         error: action.payload
       };
     case DELETE_QUIZZ_REQUEST:
       return {
         ...state,
-        deletingQuizz: true
+        deletingQuiz: true,
+        quizDeleted: false,
+        deleteQuizError: false,
       };
     case DELETE_QUIZZ_SUCCESS:
       return {
         ...state,
-        deletingQuizz: false,
+        deletingQuiz: false,
+        quizDeleted: true,
+        deleteQuizError: false,
         quizzes: state.quizzes.filter(quiz => quiz.id !== action.payload),
       };
     case DELETE_QUIZZ_FAILURE:
       return {
         ...state,
-        deletingQuizz: false,
+        deletingQuiz: false,
+        quizDeleted: false,
+        deleteQuizError: true,
         error: action.payload
       };
     case POST_QUESTION_REQUEST: