Aria Moradi
53 lines
1.6 KiB
TypeScript
53 lines
1.6 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 React, { useContext, useEffect, useState } from 'react';
|
|
import { useParams } from 'react-router-dom';
|
|
import NavBarTitle from '../context/NavbarTitle';
|
|
|
|
const style = {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
justifyContent: 'center',
|
|
margin: '0 auto',
|
|
backgroundColor: '#343a40',
|
|
} as React.CSSProperties;
|
|
|
|
const range = (n:number) => Array.from({ length: n }, (value, key) => key);
|
|
|
|
export default function Reader() {
|
|
const { setTitle } = useContext(NavBarTitle);
|
|
|
|
const [pageCount, setPageCount] = useState<number>(-1);
|
|
const { chapterId, mangaId } = useParams<{chapterId: string, mangaId: string}>();
|
|
|
|
useEffect(() => {
|
|
fetch(`http://127.0.0.1:4567/api/v1/manga/${mangaId}/chapter/${chapterId}`)
|
|
.then((response) => response.json())
|
|
.then((data:IChapter) => {
|
|
setTitle(data.name);
|
|
setPageCount(data.pageCount);
|
|
});
|
|
}, []);
|
|
|
|
if (pageCount === -1) {
|
|
return (
|
|
<div style={style}>
|
|
<h3>wait</h3>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const mapped = range(pageCount).map((index) => (
|
|
<div style={{ margin: '0 auto' }}>
|
|
<img src={`http://127.0.0.1:4567/api/v1/manga/${mangaId}/chapter/${chapterId}/page/${index}`} alt="f" style={{ maxWidth: '100%' }} />
|
|
</div>
|
|
));
|
|
return (
|
|
<div style={style}>
|
|
{mapped}
|
|
</div>
|
|
);
|
|
}
|