add crawl data

Author: FPT-NMTung

package.json

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

src/components/CrawlData/CrawlData.js

@@ -0,0 +1,93 @@
+import { Modal, Text, Spacer, Button, Input } from '@nextui-org/react';
+import { useState, Fragment, useRef } from 'react';
+import { nanoid } from 'nanoid';
+
+const CrawlData = ({ open, setClose, onSuccess }) => {
+  const [isGettingData, setIsGettingData] = useState(false);
+  const [isFailed, setIsFailed] = useState(false);
+
+  const urlRef = useRef();
+
+  const handleCrawl = () => {
+    setIsGettingData(true);
+    setIsFailed(false);
+    fetch('https://short-link-adonisgm.azurewebsites.net/api/quizlet/crawl-data', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        url: urlRef.current.value.trim(),
+      }),
+    })
+      .then((res) => res.json())
+      .then((res) => {
+        let data = res.data.course;
+        data = data.map((item) => {
+          return {
+            ...item,
+            i: nanoid(6),
+            learned: false,
+          };
+        });
+        const course = {
+          name: res.data.title,
+          data,
+          createdAt: new Date(),
+          learnedAt: null,
+        };
+        localStorage.setItem(nanoid(15), JSON.stringify(course));
+        onSuccess();
+      })
+      .catch(() => {
+        setIsFailed(true);
+        setIsGettingData(false);
+      });
+  };
+
+  return (
+    <Modal
+      open={open}
+      blur
+      closeButton
+      onClose={() => {
+        setClose(false);
+      }}
+    >
+      <Modal.Body>
+        <Fragment>
+          <Text
+            p
+            b
+            size={14}
+            css={{
+              textAlign: 'center',
+            }}
+          >
+            Crawl data from URL
+          </Text>
+          <Spacer y={0.5} />
+          <Input
+            placeholder="https://quizlet.com/vn/652631/demo-crawl-data"
+            ref={urlRef}
+          />
+          <Button
+            auto
+            css={{
+              margin: '0 auto',
+            }}
+            onClick={() => {
+              handleCrawl();
+            }}
+            disabled={isGettingData}
+            color={isFailed ? 'error' : 'primary'}
+          >
+            Import
+          </Button>
+        </Fragment>
+      </Modal.Body>
+    </Modal>
+  );
+};
+
+export default CrawlData;

src/components/CrawlData/CrawlData.module.css

@@ -6,17 +6,21 @@ import {
   Button,
   Modal,
   Input,
+  Dropdown,
 } from '@nextui-org/react';
 import { useEffect, useState, useRef, Fragment } from 'react';
 import { useNavigate } from 'react-router-dom';
 import classes from './Home.module.css';
 import { nanoid } from 'nanoid';
+import CrawlData from '../CrawlData/CrawlData';
+import { FcDownload, FcFile, FcMultipleInputs } from 'react-icons/fc';
 
 const Home = () => {
   const [listCourse, setListCourse] = useState([]);
   const [showImport, setShowImport] = useState(false);
   const [isGettingData, setIsGettingData] = useState(false);
   const [isFailed, setIsFailed] = useState(false);
+  const [showModalCrawl, setShowModalCrawl] = useState(false);
 
   const codeRef = useRef();
   const navigate = useNavigate();
@@ -76,6 +80,10 @@ const Home = () => {
 
   return (
     <div>
+      <CrawlData open={showModalCrawl} setClose={setShowModalCrawl} onSuccess={() => {
+        setShowModalCrawl(false);
+        getData();
+      }}/>
       <Modal
         open={showImport}
         blur
@@ -123,20 +131,61 @@ const Home = () => {
             columnGap: '1rem',
           }}
         >
-          <Button flat auto onPress={handleCreate}>
-            Create from Quizlet
-          </Button>
-          <Button
-            flat
-            auto
-            color={'gradient'}
-            onPress={() => {
-              setShowImport(true);
-              setIsFailed(false);
-            }}
-          >
-            Import by share code
-          </Button>
+          <Dropdown disableAnimation>
+            <Dropdown.Button flat color="secondary">
+              Create new course
+            </Dropdown.Button>
+            <Dropdown.Menu
+              color="secondary"
+              aria-label="Actions"
+              css={{ $$dropdownMenuWidth: '280px' }}
+              onAction={(e) => {
+                switch (e) {
+                  case 'quizlet':
+                    handleCreate();
+                    break;
+                  case 'import':
+                    setShowImport(true);
+                    setIsFailed(false);
+                    break;
+                  case 'crawl':
+                    setShowModalCrawl(true);
+                    break;
+                  default:
+                    break;
+                }
+              }}
+            >
+              <Dropdown.Section title="Automatic">
+                <Dropdown.Item
+                  key="crawl"
+                  description="Crawl data from Quizlet"
+                  color="success"
+                  icon={<FcMultipleInputs />}
+                >
+                  Crawl data <b>{'(recommended)'}</b>
+                </Dropdown.Item>
+              </Dropdown.Section>
+              <Dropdown.Section title="Manual">
+                <Dropdown.Item
+                  key="quizlet"
+                  description="Create new course by export Quizlet"
+                  color="primary"
+                  icon={<FcFile />}
+                >
+                  Quizlet
+                </Dropdown.Item>
+                <Dropdown.Item
+                  key="import"
+                  description="Import course by share code"
+                  color="warning"
+                  icon={<FcDownload />}
+                >
+                  Import code
+                </Dropdown.Item>
+              </Dropdown.Section>
+            </Dropdown.Menu>
+          </Dropdown>
         </div>
       </div>
       <Spacer y={1.4} />