Skip to content
This repository was archived by the owner on Dec 25, 2022. It is now read-only.

Commit 23f372c

Browse files
FPT-NMTungFPT-NMTung
committed
Update home page
1 parent cf8d8c0 commit 23f372c

File tree

3 files changed

+192
-37
lines changed

3 files changed

+192
-37
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "quizlet-learn",
3-
"version": "1.0.11",
3+
"version": "1.0.12",
44
"private": true,
55
"dependencies": {
66
"@nextui-org/react": "^1.0.0-beta.9",

‎src/components/CrawlData/CrawlData.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Modal, Text, Spacer, Button, Input } from '@nextui-org/react';
1+
import { Modal, Text, Spacer, Button, Input, Loading } from '@nextui-org/react';
22
import { useState, Fragment, useRef } from 'react';
33
import { nanoid } from 'nanoid';
44

@@ -38,6 +38,7 @@ const CrawlData = ({ open, setClose, onSuccess }) => {
3838
};
3939
localStorage.setItem(nanoid(15), JSON.stringify(course));
4040
onSuccess();
41+
setIsGettingData(false);
4142
})
4243
.catch(() => {
4344
setIsFailed(true);
@@ -75,14 +76,15 @@ const CrawlData = ({ open, setClose, onSuccess }) => {
7576
auto
7677
css={{
7778
margin: '0 auto',
79+
width: '150px',
7880
}}
7981
onClick={() => {
8082
handleCrawl();
8183
}}
8284
disabled={isGettingData}
8385
color={isFailed ? 'error' : 'primary'}
8486
>
85-
Import
87+
{isGettingData ? <Loading color={'secondary'} size={'sm'}/> : 'Crawl data'}
8688
</Button>
8789
</Fragment>
8890
</Modal.Body>

‎src/components/Home/Home.js

Lines changed: 187 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,31 @@ import {
77
Modal,
88
Input,
99
Dropdown,
10+
Table,
11+
Tooltip,
12+
Progress,
1013
} from '@nextui-org/react';
1114
import { useEffect, useState, useRef, Fragment } from 'react';
1215
import { useNavigate } from 'react-router-dom';
1316
import classes from './Home.module.css';
1417
import { nanoid } from 'nanoid';
1518
import CrawlData from '../CrawlData/CrawlData';
16-
import { FcDownload, FcFile, FcMultipleInputs } from 'react-icons/fc';
19+
import {
20+
FcDeleteDatabase,
21+
FcDownload,
22+
FcFile,
23+
FcMultipleInputs,
24+
} from 'react-icons/fc';
25+
import { HiOutlineEye } from 'react-icons/hi';
1726

1827
const Home = () => {
1928
const [listCourse, setListCourse] = useState([]);
2029
const [showImport, setShowImport] = useState(false);
2130
const [isGettingData, setIsGettingData] = useState(false);
2231
const [isFailed, setIsFailed] = useState(false);
2332
const [showModalCrawl, setShowModalCrawl] = useState(false);
33+
const [selection, setSelection] = useState([]);
34+
const [isDeleteMode, setIsDeleteMode] = useState(false);
2435

2536
const codeRef = useRef();
2637
const navigate = useNavigate();
@@ -45,6 +56,28 @@ const Home = () => {
4556
navigate('/create');
4657
};
4758

59+
const handleChangeSelect = (e) => {
60+
console.log(e);
61+
setSelection([...e]);
62+
};
63+
64+
const handleDelete = () => {
65+
console.log(selection);
66+
selection.forEach((item) => {
67+
localStorage.removeItem(item);
68+
});
69+
getData();
70+
setSelection([]);
71+
setIsDeleteMode(false);
72+
};
73+
74+
useEffect(() => {
75+
const interval = setInterval(() => {
76+
getData();
77+
}, 2000);
78+
return () => clearInterval(interval);
79+
}, []);
80+
4881
const handleImport = () => {
4982
const code = codeRef.current.value.trim();
5083

@@ -80,10 +113,14 @@ const Home = () => {
80113

81114
return (
82115
<div>
83-
<CrawlData open={showModalCrawl} setClose={setShowModalCrawl} onSuccess={() => {
84-
setShowModalCrawl(false);
85-
getData();
86-
}}/>
116+
<CrawlData
117+
open={showModalCrawl}
118+
setClose={setShowModalCrawl}
119+
onSuccess={() => {
120+
setShowModalCrawl(false);
121+
getData();
122+
}}
123+
/>
87124
<Modal
88125
open={showImport}
89126
blur
@@ -133,7 +170,7 @@ const Home = () => {
133170
>
134171
<Dropdown disableAnimation>
135172
<Dropdown.Button flat color="secondary">
136-
Create new course
173+
Menu
137174
</Dropdown.Button>
138175
<Dropdown.Menu
139176
color="secondary"
@@ -151,6 +188,9 @@ const Home = () => {
151188
case 'crawl':
152189
setShowModalCrawl(true);
153190
break;
191+
case 'delete':
192+
setIsDeleteMode(!isDeleteMode);
193+
setSelection([]);
154194
default:
155195
break;
156196
}
@@ -184,41 +224,154 @@ const Home = () => {
184224
Import code
185225
</Dropdown.Item>
186226
</Dropdown.Section>
227+
<Dropdown.Section title="Danger">
228+
<Dropdown.Item
229+
key="delete"
230+
description="Delete selected course"
231+
color="error"
232+
icon={<FcDeleteDatabase />}
233+
>
234+
{isDeleteMode ? 'Cancel delete mode' : 'Delete mode'}
235+
</Dropdown.Item>
236+
</Dropdown.Section>
187237
</Dropdown.Menu>
188238
</Dropdown>
189239
</div>
190240
</div>
191241
<Spacer y={1.4} />
192-
<Text h2>List courses:</Text>
242+
<Text
243+
p
244+
b
245+
size={16}
246+
css={{
247+
width: '100%',
248+
textAlign: 'center',
249+
}}
250+
>
251+
List courses
252+
</Text>
193253
<Spacer />
194-
<Grid.Container gap={3}>
195-
{listCourse.length > 0 &&
196-
listCourse.map((item) => (
197-
<Grid xs={4} key={item.id}>
198-
<Card css={{ cursor: 'pointer' }}>
199-
<Card.Body
200-
onClick={() => {
201-
navigate(`/course/${item.id}`);
202-
}}
203-
>
204-
<Text size={10}>
205-
Id: <strong>{item.id}</strong>
206-
</Text>
207-
<Spacer y={1} />
208-
<Text>
209-
Name: <strong>{item.data.name}</strong>
210-
</Text>
211-
<Text>
212-
Create at:{' '}
213-
<strong>
254+
{listCourse.length > 0 && (
255+
<Table
256+
selectionMode={isDeleteMode ? 'multiple' : 'none'}
257+
onSelectionChange={handleChangeSelect}
258+
color={isDeleteMode ? 'error' : 'primary'}
259+
selectedKeys={selection}
260+
>
261+
<Table.Header>
262+
<Table.Column width={200}>ID</Table.Column>
263+
<Table.Column>name</Table.Column>
264+
<Table.Column>quantity</Table.Column>
265+
<Table.Column>Progress</Table.Column>
266+
<Table.Column width={190}>Create at</Table.Column>
267+
<Table.Column width={40} align={'end'}></Table.Column>
268+
</Table.Header>
269+
<Table.Pagination
270+
shadow
271+
noMargin
272+
align="center"
273+
rowsPerPage={10}
274+
color={isDeleteMode ? 'error' : 'primary'}
275+
/>
276+
<Table.Body>
277+
{listCourse
278+
.sort((a, b) => {
279+
return new Date(b.data.createdAt) - new Date(a.data.createdAt);
280+
})
281+
.map((item) => {
282+
const progress =
283+
(
284+
item.data.data.filter((item) => {
285+
return item.learned;
286+
}).length / item.data.data.length
287+
).toFixed(2) * 100;
288+
return (
289+
<Table.Row key={item.id}>
290+
<Table.Cell>{item.id}</Table.Cell>
291+
<Table.Cell>{item.data.name}</Table.Cell>
292+
<Table.Cell>{item.data.data.length}</Table.Cell>
293+
<Table.Cell>
294+
<Text
295+
p
296+
b
297+
color={
298+
progress >= 90
299+
? 'success'
300+
: progress > 0
301+
? 'warning'
302+
: 'error'
303+
}
304+
>
305+
{progress} %
306+
</Text>
307+
<Progress
308+
size={'xs'}
309+
value={progress}
310+
color={
311+
progress >= 90
312+
? 'success'
313+
: progress > 0
314+
? 'warning'
315+
: 'error'
316+
}
317+
/>
318+
</Table.Cell>
319+
<Table.Cell>
214320
{new Date(item.data.createdAt).toLocaleString()}
215-
</strong>
216-
</Text>
217-
</Card.Body>
218-
</Card>
219-
</Grid>
220-
))}
221-
</Grid.Container>
321+
</Table.Cell>
322+
<Table.Cell
323+
style={{
324+
display: 'flex',
325+
justifyContent: 'flex-end',
326+
}}
327+
>
328+
{!isDeleteMode && (
329+
<Tooltip content={'View detail'}>
330+
<HiOutlineEye
331+
size={20}
332+
color="#005FCC"
333+
style={{
334+
cursor: 'pointer',
335+
}}
336+
onClick={() => {
337+
navigate(`/course/${item.id}`);
338+
}}
339+
/>
340+
</Tooltip>
341+
)}
342+
</Table.Cell>
343+
</Table.Row>
344+
);
345+
})}
346+
</Table.Body>
347+
</Table>
348+
)}
349+
{selection.length > 0 && (
350+
<Fragment>
351+
<Spacer y={1} />
352+
<Button
353+
auto
354+
color="error"
355+
onClick={() => {
356+
handleDelete();
357+
}}
358+
css={{
359+
margin: '0 auto',
360+
}}
361+
>
362+
<Text color="#fff">Delete selected</Text>
363+
</Button>
364+
<Text
365+
css={{
366+
textAlign: 'center',
367+
}}
368+
size={12}
369+
color="error"
370+
>
371+
Careful, <b>this action cannot be undone.</b> Gods help you.
372+
</Text>
373+
</Fragment>
374+
)}
222375
</div>
223376
);
224377
};

0 commit comments

Comments
 (0)