generated from Real-Dev-Squad/website-template
/
index.tsx
65 lines (57 loc) · 1.83 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
import { FC, useState, useEffect } from 'react';
import Head from '@/components/head';
import Layout from '@/components/Layout';
import Card from '@/components/tasks/card';
import useFetch from '@/hooks/useFetch';
import classNames from '@/styles/tasks.module.scss';
import { task } from '@/components/constants/types';
import Accordion from '@/components/Accordion';
const TASKS_URL = `${process.env.NEXT_PUBLIC_BASE_URL}/tasks`;
function renderCardList(tasks: task[]) {
return tasks.map((item: task) => <Card content={item} key={item.id} />);
}
const Index: FC = () => {
let tasks: task[] = [];
const [filteredTask, setFilteredTask] = useState<any>([]);
const { response, error, isLoading } = useFetch(TASKS_URL);
useEffect(() => {
if ('tasks' in response) {
tasks = response.tasks;
const taskMap: any = [];
tasks.forEach((item) => {
if (item.status in taskMap) {
taskMap[item.status] = [...taskMap[item.status], item];
} else {
taskMap[item.status] = [item];
}
});
setFilteredTask(taskMap);
}
}, [isLoading, response]);
return (
<Layout>
<Head title="Tasks" />
<div className={classNames.container}>
{!!error && <p>Something went wrong, please contact admin!</p>}
{
isLoading
? (
<p>Loading...</p>
) : (
<>
{
Object.keys(filteredTask).length > 0
? Object.keys(filteredTask).map((key) => (
<Accordion open title={key} key={key}>
{renderCardList(filteredTask[key])}
</Accordion>
)) : (!error && 'No Tasks Found')
}
</>
)
}
</div>
</Layout>
);
};
export default Index;