1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
|
import React, { FunctionComponent, useContext, useMemo } from "react";
import { Container, Image, ListGroup } from "react-bootstrap";
import { useReduxStore } from "../@redux/hooks/base";
import { useIsRadarrEnabled, useIsSonarrEnabled } from "../@redux/hooks/site";
import logo from "../@static/logo64.png";
import { SidebarToggleContext } from "../App";
import { useGotoHomepage } from "../utilities/hooks";
import {
BadgesContext,
CollapseItem,
HiddenKeysContext,
LinkItem,
} from "./items";
import { RadarrDisabledKey, SidebarList, SonarrDisabledKey } from "./list";
import "./style.scss";
import { BadgeProvider } from "./types";
interface Props {
open?: boolean;
}
const Sidebar: FunctionComponent<Props> = ({ open }) => {
const toggle = useContext(SidebarToggleContext);
const { movies, episodes, providers, status } = useReduxStore(
(s) => s.site.badges
);
const sonarrEnabled = useIsSonarrEnabled();
const radarrEnabled = useIsRadarrEnabled();
const badges = useMemo<BadgeProvider>(
() => ({
Wanted: {
Series: sonarrEnabled ? episodes : 0,
Movies: radarrEnabled ? movies : 0,
},
System: {
Providers: providers,
Status: status,
},
}),
[movies, episodes, providers, sonarrEnabled, radarrEnabled, status]
);
const hiddenKeys = useMemo<string[]>(() => {
const list = [];
if (!sonarrEnabled) {
list.push(SonarrDisabledKey);
}
if (!radarrEnabled) {
list.push(RadarrDisabledKey);
}
return list;
}, [sonarrEnabled, radarrEnabled]);
const cls = ["sidebar-container"];
const overlay = ["sidebar-overlay"];
if (open === true) {
cls.push("open");
overlay.push("open");
}
const sidebarItems = useMemo(
() =>
SidebarList.map((v) => {
if (hiddenKeys.includes(v.hiddenKey ?? "")) {
return null;
}
if ("children" in v) {
return <CollapseItem key={v.name} {...v}></CollapseItem>;
} else {
return <LinkItem key={v.link} {...v}></LinkItem>;
}
}),
[hiddenKeys]
);
const goHome = useGotoHomepage();
return (
<React.Fragment>
<aside className={cls.join(" ")}>
<Container className="sidebar-title d-flex align-items-center d-md-none">
<Image
alt="brand"
src={logo}
width="32"
height="32"
onClick={goHome}
className="cursor-pointer"
></Image>
</Container>
<HiddenKeysContext.Provider value={hiddenKeys}>
<BadgesContext.Provider value={badges}>
<ListGroup variant="flush">{sidebarItems}</ListGroup>
</BadgesContext.Provider>
</HiddenKeysContext.Provider>
</aside>
<div className={overlay.join(" ")} onClick={toggle}></div>
</React.Fragment>
);
};
export default Sidebar;
|
