Aria Moradi
51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
/* This Source Code Form is subject to the terms of the Mozilla Public
|
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */
|
|
|
|
import { Button } from '@material-ui/core';
|
|
import React, { useState } from 'react';
|
|
|
|
interface IProps{
|
|
manga: IManga
|
|
}
|
|
|
|
export default function MangaDetails(props: IProps) {
|
|
const { manga } = props;
|
|
const [inLibrary, setInLibrary] = useState<string>(
|
|
manga.inLibrary ? 'In Library' : 'Not In Library',
|
|
);
|
|
|
|
function addToLibrary() {
|
|
setInLibrary('adding');
|
|
fetch(`http://127.0.0.1:4567/api/v1/manga/${manga.id}/library/`).then(() => {
|
|
setInLibrary('In Library');
|
|
});
|
|
}
|
|
|
|
function removeFromLibrary() {
|
|
setInLibrary('removing');
|
|
fetch(`http://127.0.0.1:4567/api/v1/manga/${manga.id}/library/`, { method: 'DELETE', mode: 'cors' }).then(() => {
|
|
setInLibrary('Not In Library');
|
|
});
|
|
}
|
|
|
|
function handleButtonClick() {
|
|
if (inLibrary === 'Not In Library') {
|
|
addToLibrary();
|
|
} else {
|
|
removeFromLibrary();
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<h1>
|
|
{manga && manga.title}
|
|
</h1>
|
|
<div style={{ display: 'flex', flexDirection: 'row-reverse' }}>
|
|
<Button variant="outlined" onClick={() => handleButtonClick()}>{inLibrary}</Button>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|