Merge pull request #33 from masterChallenge/develop

Develop

src/api/fetchData.js

@@ -1,11 +1,13 @@
+const API = `https://rrmx-polka.herokuapp.com`
+
 const getAllChallenges = async () => {
-  const response = await fetch(`https://master-challenge.vercel.app/api/challenges`)
+  const response = await fetch(`${API}/challenges`)
   const json = await response.json()
   return json;
 }
 
 const getChallenge = async (id) => {
-  const response = await fetch(`https://master-challenge.vercel.app/api/challenge/${id}`)
+  const response = await fetch(`${API}/challenges/${id}`)
   const json = await response.json()
   return json;
 }

src/components/molecules/ChallengeTips/index.jsx

@@ -16,7 +16,7 @@ const ChallengeTips = ({ hints }) => {
       </div>
       <div className="flex justify-between items-center">
         {currentHint ? (
-          <a href={currentHint.url} className="font-bold">
+          <a href={currentHint.url} className="font-bold" target="_blank">
             Learn more...
           </a>
         ) : (

src/components/molecules/RejectedCard/index.jsx

@@ -1,8 +1,8 @@
-import React, { useContext } from "react";
-import { Link } from "react-router-dom";
-import Button from "../../atoms/Button/";
-import { ReactComponent as Rejected } from "../../../assets/KeepTrying.svg";
-import ModalContext from "../../../context/ModalContext";
+import React, { useContext } from 'react';
+import { Link, useHistory } from 'react-router-dom';
+import Button from '../../atoms/Button/';
+import { ReactComponent as Rejected } from '../../../assets/KeepTrying.svg';
+import ModalContext from '../../../context/ModalContext';
 
 const RejectedCard = () => {
   const { showModal, setShowModal } = useContext(ModalContext);
@@ -11,17 +11,29 @@ const RejectedCard = () => {
     setShowModal(!showModal);
   };
 
+  const history = useHistory();
+
+  const handleReturn = (e) => {
+    e.preventDefault();
+    setShowModal(!showModal);
+    history.push('/home');
+  };
+
   return (
-    <div className="bg-warning flex flex-col items-center text-center rounded-3xl px-20 py-6 shadow-lg text-secondary-darker">
+    <div className='bg-warning flex flex-col items-center text-center rounded-3xl px-20 py-6 shadow-lg text-secondary-darker'>
       <Rejected />
-      <span className="mt-4 mb-10">
-        <h3 className="text-2xl font-bold">Keep trying!</h3>
+      <span className='mt-4 mb-10'>
+        <h3 className='text-2xl font-bold'>Keep trying!</h3>
         <p>Practice makes the master</p>
       </span>
-      <Button color="secondary-dark" onClick={handleClick} type="primary">
+      <Button color='secondary-dark' onClick={handleClick} type='primary'>
         Back to Challenge
       </Button>
-      <Link to="/home" className="mt-4 text-sm font-bold">
+      <Link
+        to='/home'
+        className='mt-4 text-sm font-bold'
+        onClick={handleReturn}
+      >
         Return to dashboard
       </Link>
     </div>

src/pages/Challenge/index.jsx

@@ -1,18 +1,18 @@
-import React, { useEffect, useState, useContext } from "react";
-import ChallengeDescription from "../../components/molecules/ChallengeDescription";
-import Input from "../../components/molecules/Input/";
-import ChallengeTips from "../../components/molecules/ChallengeTips/";
-import Button from "../../components/atoms/Button/";
-import ResultModal from "../../components/organisms/ResultModal/";
-import { useHistory, useParams } from "react-router-dom";
+import React, { useEffect, useState, useContext } from 'react';
+import ChallengeDescription from '../../components/molecules/ChallengeDescription';
+import Input from '../../components/molecules/Input/';
+import ChallengeTips from '../../components/molecules/ChallengeTips/';
+import Button from '../../components/atoms/Button/';
+import ResultModal from '../../components/organisms/ResultModal/';
+import { useHistory, useParams } from 'react-router-dom';
 
-import { validate } from "../../utils/validator";
-import { getChallenge } from "../../api/fetchData";
-import ModalContext from "../../context/ModalContext";
+import { validate } from '../../utils/validator';
+import { getChallenge } from '../../api/fetchData';
+import ModalContext from '../../context/ModalContext';
 
 const Challenge = (challengeData) => {
   let history = useHistory();
-  const [userInput, setUserInput] = useState("Initial Code");
+  const [userInput, setUserInput] = useState('Initial Code');
   const [challenge, setChallenge] = useState(null);
   const [response, setResponse] = useState(null);
   const { showModal, setShowModal } = useContext(ModalContext);
@@ -25,8 +25,8 @@ const Challenge = (challengeData) => {
         const response = await getChallenge(pid);
         setChallenge(response);
       } catch (error) {
-        console.log("El error es: ", error);
-        history.push("/home");
+        console.log('El error es: ', error);
+        history.push('/home');
       }
     }
     fetchData();
@@ -41,13 +41,13 @@ const Challenge = (challengeData) => {
     return <div>Loading...</div>;
   } else {
     return (
-      <main className="grid grid-rows-challenge h-screen w-full">
+      <main className='grid grid-rows-challenge h-screen w-full'>
         <ChallengeDescription {...challenge} />
         <Input {...challenge} state={{ userInput, setUserInput }} />
-        <div className="grid grid-cols-2">
-          <ChallengeTips />
-          <div className="bg-secondary-lighter w-full flex items-center justify-center">
-            <Button color="primary" onClick={handleUserSubmit} type="secondary">
+        <div className='grid grid-cols-2'>
+          <ChallengeTips hints={challenge.hints} />
+          <div className='bg-secondary-lighter w-full flex items-center justify-center'>
+            <Button color='primary' onClick={handleUserSubmit} type='secondary'>
               Submit
             </Button>
           </div>

src/pages/Home/index.jsx

@@ -29,8 +29,8 @@ const Home = () => {
         <div className='mt-10 grid grid-cols-3 gap-8	'>
           {challenges.map((item) => (
             <ChallengeCard
-              key={item.id}
-              challengeId={item.id}
+              key={item._id}
+              challengeId={item.challengeId}
               name={item.name}
               difficulty={item.difficulty}
               image={item.image}