Revize 1865a0be
Přidáno uživatelem Pavel Fidransky před více než 4 roky(ů)
| client/src/YourRequests.js | ||
|---|---|---|
| 1 | 1 |
import React, { useEffect } from 'react';
|
| 2 | 2 |
import './App.css'; |
| 3 | 3 |
import moment from 'moment'; |
| 4 |
import * as api_fetch from './api'
|
|
| 5 |
import convertVacationType from './convertVacationType' |
|
| 4 |
import * as api from './api';
|
|
| 5 |
import convertVacationType from './convertVacationType';
|
|
| 6 | 6 |
|
| 7 |
function YourRequests(props) {
|
|
| 7 |
export default function YourRequests(props) {
|
|
| 8 | 8 |
|
| 9 | 9 |
useEffect( () => {
|
| 10 |
if (props.currentUser !== undefined) {
|
|
| 11 |
getData();
|
|
| 10 |
if (props.currentUser === undefined) {
|
|
| 11 |
return;
|
|
| 12 | 12 |
} |
| 13 |
}, [props.currentUser]); |
|
| 14 | 13 |
|
| 15 |
// get requests from server |
|
| 16 |
const getData = async () => {
|
|
| 17 |
|
|
| 18 |
api_fetch.loadYourRequests(props.currentUser).then((data) => {
|
|
| 14 |
getData(); |
|
| 15 |
}, [props.currentUser]); // eslint-disable-line |
|
| 19 | 16 |
|
| 17 |
// get requests from server |
|
| 18 |
async function getData() {
|
|
| 19 |
api.loadYourRequests(props.currentUser).then((data) => {
|
|
| 20 | 20 |
props.setUser(data.map(request => {
|
| 21 |
const convertedDate = request.date.split("/").join("-");
|
|
| 21 |
const convertedDate = request.date.split('/').join('-');
|
|
| 22 | 22 |
|
| 23 |
return ( |
|
| 24 |
{
|
|
| 23 |
return ({
|
|
| 25 | 24 |
title: props.currentUser.name, |
| 26 | 25 |
id: request.id, |
| 27 |
start: moment(convertedDate).format("D.M.YYYY"),
|
|
| 28 |
status: request.status = request.status.toLowerCase(), |
|
| 29 |
type: convertVacationType(request.type) |
|
| 30 |
} |
|
| 31 |
) |
|
| 32 |
})) |
|
| 26 |
start: moment(convertedDate).format('D.M.YYYY'),
|
|
| 27 |
status: request.status.toLowerCase(), |
|
| 28 |
type: convertVacationType(request.type), |
|
| 29 |
}); |
|
| 30 |
})); |
|
| 33 | 31 |
}).catch(reason => {
|
| 34 |
alert(reason) |
|
| 32 |
alert(reason);
|
|
| 35 | 33 |
}); |
| 36 |
} |
|
| 34 |
}
|
|
| 37 | 35 |
|
| 38 | 36 |
return ( |
| 39 | 37 |
<div className="offs-request column"> |
| ... | ... | |
| 42 | 40 |
<div className="offs-items column"> |
| 43 | 41 |
<div className="offs-item row"> |
| 44 | 42 |
<table> |
| 45 |
{props.user.length > 0 ?
|
|
| 46 |
|
|
| 47 |
<tbody>
|
|
| 48 |
<tr>
|
|
| 49 |
<th>Name</th>
|
|
| 50 |
<th>Type</th>
|
|
| 51 |
<th>Date</th>
|
|
| 52 |
<th>Status</th>
|
|
| 53 |
</tr>
|
|
| 54 |
{props.user.map(user => (
|
|
| 55 |
<tr key={user.id}>
|
|
| 56 |
<td>{user.title}</td>
|
|
| 57 |
<td>{user.type}</td>
|
|
| 58 |
<td>{user.end ? user.start + " - " + user.end : user.start}</td>
|
|
| 59 |
<td>{user.status}</td>
|
|
| 60 |
</tr>
|
|
| 61 |
))}
|
|
| 62 |
</tbody>
|
|
| 63 |
:
|
|
| 64 |
<tbody>
|
|
| 65 |
<div>No requests</div>
|
|
| 66 |
</tbody>}
|
|
| 43 |
{props.user.length > 0 ? (
|
|
| 44 |
<tbody> |
|
| 45 |
<tr>
|
|
| 46 |
<th>Name</th>
|
|
| 47 |
<th>Type</th>
|
|
| 48 |
<th>Date</th>
|
|
| 49 |
<th>Status</th>
|
|
| 50 |
</tr>
|
|
| 51 |
{props.user.map(user => (
|
|
| 52 |
<tr key={user.id}>
|
|
| 53 |
<td>{user.title}</td>
|
|
| 54 |
<td>{user.type}</td>
|
|
| 55 |
<td>{user.end ? user.start + ' - ' + user.end : user.start}</td>
|
|
| 56 |
<td>{user.status}</td>
|
|
| 57 |
</tr>
|
|
| 58 |
))}
|
|
| 59 |
</tbody>
|
|
| 60 |
) : (
|
|
| 61 |
<tbody>
|
|
| 62 |
<div>No requests</div>
|
|
| 63 |
</tbody>
|
|
| 64 |
)}
|
|
| 67 | 65 |
</table> |
| 68 | 66 |
</div> |
| 69 | 67 |
</div> |
| 70 | 68 |
</div> |
| 71 |
) |
|
| 69 |
);
|
|
| 72 | 70 |
} |
| 73 |
|
|
| 74 |
|
|
| 75 |
export default YourRequests; |
|
Také k dispozici: Unified diff
re #58 massive code formatting