suwayomi-material-you-webui/src/App.tsx

/*
 * Copyright (C) Contributors to the Suwayomi project
 *
 * 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 from 'react';
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Redirect,
} from 'react-router-dom';
import { QueryParamProvider } from 'use-query-params';
import { Container } from '@mui/material';
import CssBaseline from '@mui/material/CssBaseline';
import {
    createTheme,
    ThemeProvider,
    Theme,
    StyledEngineProvider,
} from '@mui/material/styles';
import { SWRConfig } from 'swr';
import { fetcher } from 'util/client';
import DefaultNavBar from 'components/navbar/DefaultNavBar';
import DarkTheme from 'components/context/DarkTheme';
import useLocalStorage from 'util/useLocalStorage';
import Settings from 'screens/Settings';
import About from 'screens/settings/About';
import Categories from 'screens/settings/Categories';
import Backup from 'screens/settings/Backup';
import Library from 'screens/Library';
import SourceConfigure from 'screens/SourceConfigure';
import Manga from 'screens/Manga';
import SourceMangas from 'screens/SourceMangas';
import Reader from 'screens/Reader';
import Updates from 'screens/Updates';
import DownloadQueue from 'screens/DownloadQueue';
import Browse from 'screens/Browse';
import Sources from 'screens/Sources';
import Extensions from 'screens/Extensions';
import NavBarContextProvider from 'components/navbar/NavBarContextProvider';
import LibraryOptionsContextProvider from 'components/library/LibraryOptionsProvider';
import SearchAll from 'screens/SearchAll';

declare module '@mui/styles/defaultTheme' {
    // eslint-disable-next-line @typescript-eslint/no-empty-interface
    interface DefaultTheme extends Theme {}
}

export default function App() {
    const [darkTheme, setDarkTheme] = useLocalStorage<boolean>(
        'darkTheme',
        true,
    );

    const darkThemeContext = {
        darkTheme,
        setDarkTheme,
    };

    const theme = React.useMemo(
        () => createTheme({
            palette: {
                mode: darkTheme ? 'dark' : 'light',
            },
            components: {
                MuiCssBaseline: {
                    styleOverrides: `
                        *::-webkit-scrollbar {
                            width: 10px;
                            background: ${darkTheme ? '#222' : '#e1e1e1'};   
                        }
                        
                        *::-webkit-scrollbar-thumb {
                            background: ${darkTheme ? '#111' : '#aaa'};
                            border-radius: 5px;
                        }
                    `,
                },
            },
        }),
        [darkTheme],
    );

    return (
        <SWRConfig value={{ fetcher }}>
            <Router>
                <StyledEngineProvider injectFirst>
                    <ThemeProvider theme={theme}>
                        <QueryParamProvider ReactRouterRoute={Route}>
                            <LibraryOptionsContextProvider>
                                <NavBarContextProvider>
                                    <CssBaseline />
                                    <DefaultNavBar />
                                    <Container
                                        id="appMainContainer"
                                        maxWidth={false}
                                        disableGutters
                                        sx={{
                                            mt: 8,
                                            ml: { sm: 8 },
                                            mb: { xs: 8, sm: 0 },
                                            width: 'auto',
                                            overflow: 'auto',
                                        }}
                                    >
                                        <Switch>
                                            {/* General Routes */}
                                            <Route
                                                exact
                                                path="/"
                                                render={() => (
                                                    <Redirect to="/library" />
                                                )}
                                            />
                                            <Route path="/settings/about">
                                                <About />
                                            </Route>
                                            <Route path="/settings/categories">
                                                <Categories />
                                            </Route>
                                            <Route path="/settings/backup">
                                                <Backup />
                                            </Route>
                                            <Route path="/settings">
                                                <DarkTheme.Provider
                                                    value={darkThemeContext}
                                                >
                                                    <Settings />
                                                </DarkTheme.Provider>
                                            </Route>

                                            {/* Manga Routes */}

                                            <Route path="/sources/:sourceId/popular/">
                                                <SourceMangas popular />
                                            </Route>
                                            <Route path="/sources/:sourceId/latest/">
                                                <SourceMangas popular={false} />
                                            </Route>
                                            <Route path="/sources/:sourceId/configure/">
                                                <SourceConfigure />
                                            </Route>
                                            <Route path="/sources/all/search/">
                                                <SearchAll />
                                            </Route>
                                            <Route path="/downloads">
                                                <DownloadQueue />
                                            </Route>
                                            <Route path="/manga/:mangaId/chapter/:chapterNum">
                                                <></>
                                            </Route>
                                            <Route path="/manga/:id">
                                                <Manga />
                                            </Route>
                                            <Route path="/library">
                                                <Library />
                                            </Route>
                                            <Route path="/updates">
                                                <Updates />
                                            </Route>
                                            <Route path="/sources">
                                                <Sources />
                                            </Route>
                                            <Route path="/extensions">
                                                <Extensions />
                                            </Route>
                                            <Route path="/browse">
                                                <Browse />
                                            </Route>
                                        </Switch>
                                    </Container>
                                    <Switch>
                                        <Route
                                            path="/manga/:mangaId/chapter/:chapterIndex"
                                            // passing a key re-mounts the reader
                                            // when changing chapters
                                            render={(props: any) => (
                                                <Reader
                                                    key={
                                                        props.match.params
                                                            .chapterIndex
                                                    }
                                                />
                                            )}
                                        />
                                    </Switch>
                                </NavBarContextProvider>
                            </LibraryOptionsContextProvider>
                        </QueryParamProvider>
                    </ThemeProvider>
                </StyledEngineProvider>
            </Router>
        </SWRConfig>
    );
}