mirrors/Tachidesk
1
0
Fork 0
mirror of https://github.com/Suwayomi/Tachidesk.git synced 2025-12-23 21:12:37 +01:00
Code Issues Projects Releases Wiki Activity

add page title

Browse Source
This commit is contained in:
Aria Moradi
2021-01-22 17:00:33 +03:30
parent 9a61f58043
commit 6401b946b6
13 changed files with 133 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
webUI/react/src/App.tsx
View File

@@ -1,4 +1,4 @@
import React from 'react';
import React, { useState } from 'react';
import {
BrowserRouter as Router, Route, Switch,
} from 'react-router-dom';
@@ -10,38 +10,44 @@ import MangaList from './screens/MangaList';
import Manga from './screens/Manga';
import Reader from './screens/Reader';
import Search from './screens/Search';
import NavBarTitle from './context/NavbarTitle';
export default function App() {
const [title, setTitle] = useState<string>('Tachidesk');
const contextValue = { title, setTitle };
return (
<Router>
<NavBar />
<NavBarTitle.Provider value={contextValue}>
<NavBar />
<Switch>
<Route path="/search">
<Search />
</Route>
<Route path="/extensions">
<Extensions />
</Route>
<Route path="/sources/:sourceId/popular/">
<MangaList popular />
</Route>
<Route path="/sources/:sourceId/latest/">
<MangaList popular={false} />
</Route>
<Route path="/sources">
<Sources />
</Route>
<Route path="/manga/:mangaId/chapter/:chapterId">
<Reader />
</Route>
<Route path="/manga/:id">
<Manga />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
<Switch>
<Route path="/search">
<Search />
</Route>
<Route path="/extensions">
<Extensions />
</Route>
<Route path="/sources/:sourceId/popular/">
<MangaList popular />
</Route>
<Route path="/sources/:sourceId/latest/">
<MangaList popular={false} />
</Route>
<Route path="/sources">
<Sources />
</Route>
<Route path="/manga/:mangaId/chapter/:chapterId">
<Reader />
</Route>
<Route path="/manga/:id">
<Manga />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</NavBarTitle.Provider>
</Router>
);
}

6
webUI/react/src/components/NavBar.tsx
View File

@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { useContext, useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
@@ -6,6 +6,7 @@ import Typography from '@material-ui/core/Typography';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import TemporaryDrawer from './TemporaryDrawer';
import NavBarTitle from '../context/NavbarTitle';
const useStyles = makeStyles((theme) => ({
root: {
@@ -22,6 +23,7 @@ const useStyles = makeStyles((theme) => ({
export default function NavBar() {
const classes = useStyles();
const [drawerOpen, setDrawerOpen] = useState(false);
const { title } = useContext(NavBarTitle);
return (
<div className={classes.root}>
@@ -38,7 +40,7 @@ export default function NavBar() {
<MenuIcon />
</IconButton>
<Typography variant="h6" className={classes.title}>
Tachidesk
{title}
</Typography>
</Toolbar>
</AppBar>

13
webUI/react/src/context/NavbarTitle.tsx Normal file
View File

@@ -0,0 +1,13 @@
import React from 'react';
type ContextType = {
title: string
setTitle: React.Dispatch<React.SetStateAction<string>>
};
const NavBarTitle = React.createContext<ContextType>({
title: 'Tachidesk',
setTitle: ():void => {},
});
export default NavBarTitle;

7
webUI/react/src/screens/Extensions.tsx
View File

@@ -1,9 +1,12 @@
import React, { useEffect, useState } from 'react';
import React, { useContext, useEffect, useState } from 'react';
import ExtensionCard from '../components/ExtensionCard';
import NavBarTitle from '../context/NavbarTitle';
export default function Extensions() {
let mapped;
const { setTitle } = useContext(NavBarTitle);
setTitle('Extensions');
const [extensions, setExtensions] = useState<IExtension[]>([]);
let mapped;
useEffect(() => {
fetch('http://127.0.0.1:4567/api/v1/extension/list')

9
webUI/react/src/screens/Manga.tsx
View File

@@ -1,10 +1,12 @@
import React, { useEffect, useState } from 'react';
import React, { useEffect, useState, useContext } from 'react';
import { useParams } from 'react-router-dom';
import ChapterCard from '../components/ChapterCard';
import MangaDetails from '../components/MangaDetails';
import NavBarTitle from '../context/NavbarTitle';
export default function Manga() {
const { id } = useParams<{id: string}>();
const { setTitle } = useContext(NavBarTitle);
const [manga, setManga] = useState<IManga>();
const [chapters, setChapters] = useState<IChapter[]>([]);
@@ -12,7 +14,10 @@ export default function Manga() {
useEffect(() => {
fetch(`http://127.0.0.1:4567/api/v1/manga/${id}/`)
.then((response) => response.json())
.then((data) => setManga(data));
.then((data: IManga) => {
setManga(data);
setTitle(data.title);
});
}, []);
useEffect(() => {

10
webUI/react/src/screens/MangaList.tsx
View File

@@ -1,12 +1,20 @@
import React, { useEffect, useState } from 'react';
import React, { useContext, useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import MangaGrid from '../components/MangaGrid';
import NavBarTitle from '../context/NavbarTitle';
export default function MangaList(props: { popular: boolean }) {
const { sourceId } = useParams<{sourceId: string}>();
const { setTitle } = useContext(NavBarTitle);
const [mangas, setMangas] = useState<IManga[]>([]);
const [lastPageNum] = useState<number>(1);
useEffect(() => {
fetch(`http://127.0.0.1:4567/api/v1/source/${sourceId}`)
.then((response) => response.json())
.then((data: { name: string }) => setTitle(data.name));
}, []);
useEffect(() => {
const sourceType = props.popular ? 'popular' : 'latest';
fetch(`http://127.0.0.1:4567/api/v1/source/${sourceId}/${sourceType}/${lastPageNum}`)

15
webUI/react/src/screens/Reader.tsx
View File

@@ -1,5 +1,6 @@
import React, { useEffect, useState } from 'react';
import React, { useContext, useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import NavBarTitle from '../context/NavbarTitle';
const style = {
display: 'flex',
@@ -14,14 +15,24 @@ interface IPage {
imageUrl: string
}
interface IData {
first: IChapter
second: IPage[]
}
export default function Reader() {
const { setTitle } = useContext(NavBarTitle);
const [pages, setPages] = useState<IPage[]>([]);
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) => setPages(data));
.then((data:IData) => {
setTitle(data.first.name);
setPages(data.second);
});
}, []);
pages.sort((a, b) => (a.index - b.index));

5
webUI/react/src/screens/Search.tsx
View File

@@ -1,8 +1,9 @@
import React, { useState } from 'react';
import React, { useContext, useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
import MangaGrid from '../components/MangaGrid';
import NavBarTitle from '../context/NavbarTitle';
const useStyles = makeStyles((theme) => ({
root: {
@@ -14,6 +15,8 @@ const useStyles = makeStyles((theme) => ({
}));
export default function Search() {
const { setTitle } = useContext(NavBarTitle);
setTitle('Search');
const classes = useStyles();
const [error, setError] = useState<boolean>(false);
const [mangas, setMangas] = useState<IManga[]>([]);

7
webUI/react/src/screens/Sources.tsx
View File

@@ -1,9 +1,12 @@
import React, { useEffect, useState } from 'react';
import React, { useContext, useEffect, useState } from 'react';
import SourceCard from '../components/SourceCard';
import NavBarTitle from '../context/NavbarTitle';
export default function Sources() {
let mapped;
const { setTitle } = useContext(NavBarTitle);
setTitle('Sources');
const [sources, setSources] = useState<ISource[]>([]);
let mapped;
useEffect(() => {
fetch('http://127.0.0.1:4567/api/v1/source/list')