101 lines
2.9 KiB
TypeScript
101 lines
2.9 KiB
TypeScript
import React, { ReactElement, useState } from "react";
|
|
import { useSelector } from "react-redux";
|
|
import Dashboard from "./Dashboard/Dashboard";
|
|
|
|
import Import from "./Import";
|
|
import { ComicDetail } from "./ComicDetail";
|
|
import LibraryContainer from "./Library/LibraryContainer";
|
|
import LibraryGrid from "./Library/LibraryGrid";
|
|
import Search from "./Search";
|
|
import Settings from "./Settings";
|
|
import VolumeDetail from "./VolumeDetail/VolumeDetail";
|
|
import PullList from "./PullList/PullList";
|
|
|
|
import { Routes, Route } from "react-router-dom";
|
|
import Navbar from "./Navbar";
|
|
import "../assets/scss/App.scss";
|
|
import Notifications from "react-notification-system-redux";
|
|
import { AirDCPPSocketContext } from "../context/AirDCPPSocket";
|
|
|
|
//Optional styling
|
|
const style = {
|
|
Containers: {
|
|
DefaultStyle: {
|
|
fontFamily: "inherit",
|
|
position: "fixed",
|
|
padding: "0 10px 10px 10px",
|
|
zIndex: 9998,
|
|
WebkitBoxSizing: "border-box",
|
|
MozBoxSizing: "border-box",
|
|
boxSizing: "border-box",
|
|
height: "auto",
|
|
},
|
|
tr: {
|
|
top: "40px",
|
|
right: "10px",
|
|
},
|
|
},
|
|
Title: {
|
|
DefaultStyle: {
|
|
fontSize: "14px",
|
|
margin: "0 0 5px 0",
|
|
padding: 0,
|
|
fontWeight: "bold",
|
|
},
|
|
|
|
success: {
|
|
color: "hsl(141, 71%, 48%)",
|
|
},
|
|
},
|
|
NotificationItem: {
|
|
// Override the notification item
|
|
success: {
|
|
// Applied to every notification, regardless of the notification level
|
|
borderTop: "none",
|
|
backgroundColor: "#FFF",
|
|
borderRadius: "0.4rem",
|
|
WebkitBoxShadow: "-7px 11px 25px -9px rgba(0, 0, 0, 0.3)",
|
|
MozBoxShadow: "-7px 11px 25px -9px rgba(0, 0, 0, 0.3)",
|
|
boxShadow: "-7px 11px 25px -9px rgba(0, 0, 0, 0.3)",
|
|
},
|
|
},
|
|
};
|
|
|
|
export const App = (): ReactElement => {
|
|
const notifications = useSelector((state: RootState) => state.notifications);
|
|
const [ADCPPSocket, setADCPPSocket] = useState({});
|
|
|
|
return (
|
|
<AirDCPPSocketContext.Provider value={{ ADCPPSocket, setADCPPSocket }}>
|
|
<div>
|
|
<Navbar />
|
|
<Notifications
|
|
notifications={notifications}
|
|
style={style}
|
|
newOnTop={true}
|
|
allowHTML={true}
|
|
/>
|
|
<Routes>
|
|
<Route path="/" element={<Dashboard />} />
|
|
<Route path="/import" element={<Import path={"./comics"} />} />
|
|
<Route path="/library" element={<LibraryContainer />} />
|
|
<Route path="/library-grid" element={<LibraryGrid />} />
|
|
<Route path="/search" element={<Search />} />
|
|
<Route
|
|
path={"/comic/details/:comicObjectId"}
|
|
element={<ComicDetail />}
|
|
/>
|
|
<Route
|
|
path={"/volume/details/:comicObjectId"}
|
|
element={<VolumeDetail />}
|
|
/>
|
|
<Route path="/settings" element={<Settings />} />
|
|
<Route path="/pull-list/all" element={<PullList />} />
|
|
</Routes>
|
|
</div>
|
|
</AirDCPPSocketContext.Provider>
|
|
);
|
|
};
|
|
|
|
export default App;
|