99 lines
2.5 KiB
JavaScript
99 lines
2.5 KiB
JavaScript
import React, { useEffect, useState } from 'react'
|
|
import { Layout, Col, Row } from 'antd'
|
|
import { useAuth } from "react-oidc-context"
|
|
|
|
import AuthBar from './auth-bar'
|
|
import { myToDoListApi } from './to-do-list-api'
|
|
import ToDoForm from './to-do-form'
|
|
import ToDoTable from './to-do-table'
|
|
|
|
const { Header, Content } = Layout
|
|
|
|
function Home() {
|
|
const [todos, setTodos] = useState([])
|
|
const auth = useAuth()
|
|
const access_token = auth.user.access_token
|
|
|
|
useEffect(() => {
|
|
handleToDos()
|
|
}, [])
|
|
|
|
const handleToDos = async () => {
|
|
try {
|
|
const response = await myToDoListApi.getToDos(access_token)
|
|
setTodos(response.data)
|
|
} catch (error) {
|
|
handleLogError(error)
|
|
}
|
|
}
|
|
|
|
const onFinish = async (addToDoRequest) => {
|
|
try {
|
|
await myToDoListApi.addToDo(addToDoRequest, access_token)
|
|
await handleToDos()
|
|
} catch (error) {
|
|
handleLogError(error)
|
|
}
|
|
}
|
|
|
|
const onComplete = async (key) => {
|
|
try {
|
|
await myToDoListApi.updateToDo(key, true, access_token)
|
|
await handleToDos()
|
|
} catch (error) {
|
|
handleLogError(error)
|
|
}
|
|
}
|
|
|
|
const onDelete = async (key) => {
|
|
try {
|
|
await myToDoListApi.deleteToDo(key, access_token)
|
|
await handleToDos()
|
|
} catch (error) {
|
|
handleLogError(error)
|
|
}
|
|
}
|
|
|
|
const handleLogError = (error) => {
|
|
if (error.response) {
|
|
console.log(error.response.data)
|
|
} else if (error.request) {
|
|
console.log(error.request)
|
|
} else {
|
|
console.log(error.message)
|
|
}
|
|
}
|
|
|
|
const headerStyle = {
|
|
textAlign: 'center',
|
|
color: '#fff',
|
|
backgroundColor: '#333',
|
|
fontSize: '3em'
|
|
}
|
|
|
|
return (
|
|
<Layout>
|
|
<Header style={headerStyle}>MyToDoList</Header>
|
|
<AuthBar />
|
|
<Content>
|
|
<Row justify="space-evenly">
|
|
<Col span={6}>
|
|
<ToDoForm
|
|
onFinish={onFinish}
|
|
/>
|
|
</Col>
|
|
<Col span={17}>
|
|
<ToDoTable
|
|
todos={todos}
|
|
onComplete={onComplete}
|
|
onDelete={onDelete}
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
</Content>
|
|
</Layout>
|
|
)
|
|
}
|
|
|
|
export default Home
|