Merge pull request #1 from codeMonkeyMasters/diego-codeMirrorComponent

Diego code mirror component

package.json

@@ -8,8 +8,10 @@
     "@testing-library/user-event": "^7.1.2",
     "axios": "^0.19.2",
     "bootstrap": "^4.4.1",
+    "codemirror": "^5.57.0",
     "react": "^16.13.0",
     "react-bootstrap": "^1.0.0-beta.17",
+    "react-codemirror2": "^7.2.1",
     "react-dom": "^16.13.0",
     "react-redux": "^7.2.0",
     "react-router-dom": "^5.1.2",

src/components/CodeMirror/index.js

@@ -0,0 +1,71 @@
+import React, { useState, useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { selectCorrectAnswer } from "../../store/exercise/selectors";
+import { getExerciseById } from "../../store/exercise/actions";
+
+import { Controlled as CodeMirror } from "react-codemirror2";
+import "codemirror/lib/codemirror.css";
+import "codemirror/mode/javascript/javascript";
+import "codemirror/theme/material.css";
+
+export default function CodeMirrorComponent() {
+  const dispatch = useDispatch();
+  const correctAnswer = useSelector(selectCorrectAnswer);
+  const [code, setCode] = useState("");
+  const [message, setMessage] = useState("");
+
+  //this is something we should do in the parent component I think
+  useEffect(() => {
+    dispatch(getExerciseById(1));
+  }, []);
+
+  const codeMirrorOptions = {
+    theme: "material",
+    lineNumbers: true,
+    scrollbarStyle: null,
+    lineWrapping: true,
+  };
+
+  function equal(a, b) {
+    const condition2 = typeof a === "string" && typeof b === "string";
+    if (condition2) return a === b;
+  }
+
+  function submitAnswer() {
+    const result = equal(correctAnswer, code);
+    if (!result) {
+      setMessage({
+        backgroundColor: "red",
+        text: "oeh-oeh-ahh-ahh monkey want banana? - This answer is incorrect!",
+      });
+    }
+    if (result) {
+      setMessage({
+        backgroundColor: "green",
+        text: "Long live the master! - This answer is correct!",
+      });
+    }
+  }
+
+  return (
+    <div style={{ backgroundColor: "grey" }}>
+      <CodeMirror
+        value={code}
+        options={{ mode: "javascript", ...codeMirrorOptions }}
+        onBeforeChange={(editor, data, js) => {
+          setCode(js);
+        }}
+      />
+
+      {message && (
+        <p
+          style={{ backgroundColor: message.backgroundColor, color: "yellow" }}
+        >
+          {message.text}
+        </p>
+      )}
+
+      <button onClick={() => submitAnswer()}>Submit</button>
+    </div>
+  );
+}

src/store/exercise/actions.js

@@ -0,0 +1,41 @@
+import { apiUrl } from "../../config/constants";
+import axios from "axios";
+import { appLoading, appDoneLoading, setMessage } from "../appState/actions";
+import { selectToken } from "../user/selectors";
+
+export const GET_EXERCISE_SUCCESS = "GET_EXERCISE_SUCCESS";
+
+const getExerciseSuccess = (exercise) => {
+  return {
+    type: GET_EXERCISE_SUCCESS,
+    payload: exercise,
+  };
+};
+
+export const getExerciseById = (id) => {
+  console.log("what is id in actions", id);
+  return async (dispatch, getState) => {
+    const token = selectToken(getState());
+    if (token === null) return;
+
+    dispatch(appLoading());
+    try {
+      const response = axios.get(`${apiUrl}/exercises/${id}/quiz`, {
+        headers: { Authorization: `Bearer ${token}` },
+      });
+
+      dispatch(getExerciseSuccess(response.data));
+
+      dispatch(appDoneLoading());
+    } catch (error) {
+      if (error.response) {
+        console.log(error.response.data.message);
+        dispatch(setMessage("danger", true, error.response.data.message));
+      } else {
+        console.log(error.message);
+        dispatch(setMessage("danger", true, error.message));
+      }
+      dispatch(appDoneLoading());
+    }
+  };
+};

src/store/exercise/reducer.js

@@ -0,0 +1,16 @@
+import { GET_EXERCISE_SUCCESS } from "./actions";
+
+const initialState = {
+  name: "",
+  content: "",
+  correctAnswer: "",
+};
+
+export default (state = initialState, action) => {
+  switch (action.type) {
+    case GET_EXERCISE_SUCCESS:
+      return { ...state, ...action.payload };
+    default:
+      return state;
+  }
+};

src/store/exercise/selectors.js

@@ -0,0 +1 @@
+export const selectCorrectAnswer = (state) => state.exercise.correctAnswer;

src/store/rootReducer.js

@@ -1,8 +1,10 @@
 import { combineReducers } from "redux";
 import appState from "./appState/reducer";
 import user from "./user/reducer";
+import exercise from "./exercise/reducer";
 
 export default combineReducers({
   appState,
-  user
+  user,
+  exercise,
 });