Update create course and add end of turn

Tutorial.md

@@ -16,11 +16,6 @@
   <img width='60%' src='./image-github/image2.png'>
 </div>
 
-- Step 4: Paste text from clipboard to textarea. There are 2 import cases you need to note as follows:
-
-|   | Case 1 | Case 2 |
-| ---- | :----: | :-----------: |
-| Type question  | <img width='80%' src='./image-github/case1.png'> | <img width='80%' src='./image-github/case2.png'> |
-| Reverse extract | <img width='80%' src='./image-github/scase1.png'> | <img width='80%' src='./image-github/scase2.png'> |
+- Step 4: Paste text from clipboard to textarea.
 
 - Step 5: Click "Create" button and enjoy learning.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "quizlet-learn",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "dependencies": {
     "@nextui-org/react": "^1.0.0-beta.9",

src/components/Create/Create.js

@@ -38,11 +38,13 @@ const Create = () => {
     if (name.length > 0 && content.length > 0) {
       const list = content.split(secondExtract);
       const listObject = list.map((item) => {
-        const [answer, question] = item.split(firstExtract);
+        const [first, second] = item.split(firstExtract);
+        const tFirst = first.trim();
+        const tSecond = second.trim();
         return {
           i: nanoid(6),
-          answer: !isReverse ? answer : question,
-          question: !isReverse ? question : answer,
+          answer: tFirst.length < tSecond.length ? tFirst : tSecond,
+          question: tFirst.length < tSecond.length ? tSecond : tFirst,
           learned: false,
         };
       });
@@ -81,7 +83,7 @@ const Create = () => {
           </Grid>
           <Grid xs={3}>
             <div className={classes.iconQuestion}>
-              <Link href="">
+              <Link href="https://github.com/AdonisGM/quizlet-learn/blob/master/Tutorial.md" target={'_blank'}>
                 <BsFillQuestionCircleFill size={30} color="gray" />
               </Link>
             </div>
@@ -108,7 +110,7 @@ const Create = () => {
           <Spacer />
           <Card.Divider />
           <Spacer />
-          <div className={classes.butonSwitch}>
+          {/* <div className={classes.butonSwitch}>
             <Text css={{ margin: 0 }}>Reverse extract:</Text>
             <Switch
               checked={isReverse}
@@ -117,7 +119,7 @@ const Create = () => {
                 setIsReverse(e.target.checked);
               }}
             />
-          </div>
+          </div> */}
           <Grid.Container>
             <Grid xs={3}>
               <Input

src/components/DetailCourse/DetailCourse.js

@@ -175,7 +175,7 @@ const DetailCourse = () => {
               top: 0,
               left: 0,
             }}
-            squared 
+            squared="true"
             size="sm"
             value={(course.filter((item) => item.learned === true)).length / (course.length === 0 ? 1 : course.length) * 100}
             shadow

src/components/Learn/Learn.js

@@ -1,4 +1,12 @@
-import { Button, Card, Grid, Spacer, Text } from '@nextui-org/react';
+import {
+  Button,
+  Card,
+  Grid,
+  Modal,
+  Spacer,
+  Text,
+  Progress,
+} from '@nextui-org/react';
 import { Fragment, useEffect, useState } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { MdKeyboardBackspace } from 'react-icons/md';
@@ -72,10 +80,13 @@ const Learn = () => {
     JSON.parse(localStorage.getItem(id)).data
   );
   const [listLearning, setListLearning] = useState([]);
+  const [cloneListLearning, setCloneListLearning] = useState([]);
   const [indexSelectQuestion, setIndexSelectQuestion] = useState(0);
   const [listAnswer, setListAnswer] = useState([]);
   const [selectAnswer, setSelectAnswer] = useState(undefined);
   const [isNotCorrect, setIsNotCorrect] = useState(false);
+  const [showResult, setShowResult] = useState(false);
+  const [numberLearning, setNumberLearning] = useState(0);
 
   // get 7 question random from list in first time
   useEffect(() => {
@@ -88,6 +99,7 @@ const Learn = () => {
       navigate('/course/' + id);
     }
     setListLearning(listSeven);
+    setCloneListLearning(listSeven);
     setIndexSelectQuestion(0);
   }, []);
 
@@ -100,6 +112,17 @@ const Learn = () => {
     }
   }, [indexSelectQuestion, listLearning]);
 
+  useEffect(() => {
+    if (cloneListLearning.length > 0) {
+      const countLearn = cloneListLearning.filter((item) => {
+        return item.count === 2;
+      }).length;
+      const totalL = cloneListLearning.length;
+
+      setNumberLearning((countLearn * 100) / totalL);
+    }
+  }, [selectAnswer]);
+
   // function and handler
   const generateAnswer = (answer) => {
     const ran = [...dummyAnswer].sort(() => Math.random() - 0.5);
@@ -124,7 +147,7 @@ const Learn = () => {
     const temp = JSON.parse(localStorage.getItem(id));
     temp.data = listAllQuestion;
     localStorage.setItem(id, JSON.stringify(temp));
-    navigate('/course/' + id);
+    setShowResult(true);
   };
 
   const handleCardAnswerPress = (key) => {
@@ -138,15 +161,7 @@ const Learn = () => {
         if (indexSelectQuestion !== listLearning.length - 1) {
           setIndexSelectQuestion(indexSelectQuestion + 1);
         } else {
-          const t = listLearning.filter((item) => {
-            return item.count <= 1;
-          });
-          if (t.length === 0) {
-            updateListLocalStorage();
-          } else {
-            setListLearning(t);
-            setIndexSelectQuestion(0);
-          }
+          repeatListLearning();
         }
       }, 500);
     } else {
@@ -158,26 +173,98 @@ const Learn = () => {
     if (indexSelectQuestion !== listLearning.length - 1) {
       setIndexSelectQuestion(indexSelectQuestion + 1);
     } else {
-      const t = listLearning.filter((item) => {
-        return item.count <= 1;
-      });
-      if (t.length === 0) {
-        updateListLocalStorage();
-      } else {
-        setListLearning(t);
-        setIndexSelectQuestion(0);
-      }
+      repeatListLearning();
+    }
+  };
+
+  const repeatListLearning = () => {
+    const t = listLearning.filter((item) => {
+      return item.count <= 1;
+    });
+    if (t.length === 0) {
+      updateListLocalStorage();
+    } else {
+      setListLearning(t);
+      setIndexSelectQuestion(0);
+    }
+  };
+
+  const handleCloseModal = () => {
+    setShowResult(false);
+    const listSeven = getSevenFromList(
+      listAllQuestion.filter((item) => {
+        return item.learned === false;
+      })
+    );
+    if (listSeven.length === 0) {
+      navigate('/course/' + id);
     }
+    setListLearning(listSeven);
+    setCloneListLearning(listSeven);
+    setIndexSelectQuestion(0);
   };
 
   return (
-    <div>
+    <div className={classes.main}>
+      <Progress
+        css={{
+          position: 'fixed',
+          top: 0,
+          left: 0,
+        }}
+        squared="true"
+        size="sm"
+        value={numberLearning}
+        shadow
+        color="gradient"
+        status="primary"
+      />
       <Fragment>
+        <Modal
+          onClose={handleCloseModal}
+          closeButton
+          open={showResult}
+          scroll
+          width="900px"
+        >
+          <Modal.Header>
+            <Text id="modal-title" size={18}>
+              Result your learning
+            </Text>
+          </Modal.Header>
+          <Modal.Body>
+            <Grid.Container gap={2}>
+              {cloneListLearning.length > 0 &&
+                cloneListLearning.map((item, index) => (
+                  <Grid key={index} xs={12}>
+                    <Card variant={'bordered'} borderWeight={'normal'}>
+                      <Card.Body>
+                        <Text size={14} css={{ whiteSpace: 'pre-wrap' }}>
+                          {item.question}
+                        </Text>
+                        <Spacer />
+                        <Text size={14}>
+                          <strong>Answer: {item.answer}</strong>
+                        </Text>
+                      </Card.Body>
+                    </Card>
+                  </Grid>
+                ))}
+            </Grid.Container>
+          </Modal.Body>
+        </Modal>
         <Grid.Container>
           <Grid xs={2}>
-            <Button color={'error'} flat icon={<MdKeyboardBackspace />} auto size={'sm'} onPress={() => {
-              navigate('/course/' + id);
-            }}>
+            <Button
+              color={'error'}
+              flat
+              icon={<MdKeyboardBackspace />}
+              auto
+              size={'sm'}
+              onPress={() => {
+                navigate('/course/' + id);
+              }}
+            >
               Quit learn
             </Button>
           </Grid>

src/components/Learn/Learn.module.css

@@ -1,3 +1,7 @@
+.main {
+  margin-top: 20px;
+}
+
 .ans {
   display    : flex;
   align-items: center;