this repo has no description
notnite.com
1import {
2 ExtensionLoadSource,
3 ExtensionTag,
4 WebpackRequireType
5} from "@moonlight-mod/types";
6import { ExtensionState } from "../../types";
7import filterBar, { Filter, defaultFilter } from "./filterBar";
8import card from "./card";
9
10export default (require: WebpackRequireType) => {
11 const React = require("common_react");
12 const spacepack = require("spacepack_spacepack").spacepack;
13 const Flux = require("common_flux");
14
15 const { MoonbaseSettingsStore } =
16 require("moonbase_stores") as typeof import("../../webpackModules/stores");
17
18 const ExtensionCard = card(require);
19 const FilterBar = React.lazy(() =>
20 filterBar(require).then((c) => ({ default: c }))
21 );
22
23 const Margins = spacepack.findByCode("marginCenterHorz:")[0].exports;
24 const SearchBar = spacepack.findByCode("Messages.SEARCH", "hideSearchIcon")[0]
25 .exports.default;
26
27 return function ExtensionsPage() {
28 const { extensions, savedFilter } = Flux.useStateFromStoresObject(
29 [MoonbaseSettingsStore],
30 () => {
31 return {
32 extensions: MoonbaseSettingsStore.extensions,
33 savedFilter: MoonbaseSettingsStore.getExtensionConfig(
34 "moonbase",
35 "filter"
36 )
37 };
38 }
39 );
40
41 const [query, setQuery] = React.useState("");
42
43 let filter: Filter, setFilter: (filter: Filter) => void;
44 if (moonlight.getConfigOption<boolean>("moonbase", "saveFilter")) {
45 filter = savedFilter ?? defaultFilter;
46 setFilter = (filter) =>
47 MoonbaseSettingsStore.setExtensionConfig("moonbase", "filter", filter);
48 } else {
49 const state = React.useState(defaultFilter);
50 filter = state[0];
51 setFilter = state[1];
52 }
53 const [selectedTags, setSelectedTags] = React.useState(new Set<string>());
54 const sorted = Object.values(extensions).sort((a, b) => {
55 const aName = a.manifest.meta?.name ?? a.id;
56 const bName = b.manifest.meta?.name ?? b.id;
57 return aName.localeCompare(bName);
58 });
59
60 const filtered = sorted.filter(
61 (ext) =>
62 (ext.manifest.meta?.name?.toLowerCase().includes(query) ||
63 ext.manifest.meta?.tagline?.toLowerCase().includes(query) ||
64 ext.manifest.meta?.description?.toLowerCase().includes(query)) &&
65 [...selectedTags.values()].every(
66 (tag) => ext.manifest.meta?.tags?.includes(tag as ExtensionTag)
67 ) &&
68 // This seems very bad, sorry
69 !(
70 (!(filter & Filter.Core) &&
71 ext.source.type === ExtensionLoadSource.Core) ||
72 (!(filter & Filter.Normal) &&
73 ext.source.type === ExtensionLoadSource.Normal) ||
74 (!(filter & Filter.Developer) &&
75 ext.source.type === ExtensionLoadSource.Developer) ||
76 (!(filter & Filter.Enabled) &&
77 MoonbaseSettingsStore.getExtensionEnabled(ext.id)) ||
78 (!(filter & Filter.Disabled) &&
79 !MoonbaseSettingsStore.getExtensionEnabled(ext.id)) ||
80 (!(filter & Filter.Installed) &&
81 ext.state !== ExtensionState.NotDownloaded) ||
82 (!(filter & Filter.Repository) &&
83 ext.state === ExtensionState.NotDownloaded)
84 )
85 );
86
87 return (
88 <>
89 <SearchBar
90 size={SearchBar.Sizes.MEDIUM}
91 query={query}
92 onChange={(v: string) => setQuery(v.toLowerCase())}
93 onClear={() => setQuery("")}
94 autoFocus={true}
95 autoComplete="off"
96 inputProps={{
97 autoCapitalize: "none",
98 autoCorrect: "off",
99 spellCheck: "false"
100 }}
101 />
102 <React.Suspense
103 fallback={<div className={Margins.marginBottom20}></div>}
104 >
105 <FilterBar
106 filter={filter}
107 setFilter={setFilter}
108 selectedTags={selectedTags}
109 setSelectedTags={setSelectedTags}
110 />
111 </React.Suspense>
112 {filtered.map((ext) => (
113 <ExtensionCard id={ext.id} key={ext.id} />
114 ))}
115 </>
116 );
117 };
118};