62 lines
2.1 kB
1
import { useStateFromStores } from "@moonlight-mod/wp/discord/packages/flux";
2
import { MoonbaseSettingsStore } from "@moonlight-mod/wp/moonbase_stores";
3
import * as Components from "@moonlight-mod/wp/discord/components/common/index";
4
import React from "@moonlight-mod/wp/react";
5
import { UpdateState } from "../../types";
6
import HelpMessage from "./HelpMessage";
7
8
const { ThemeDarkIcon, Button } = Components;
9
10
const logger = moonlight.getLogger("moonbase/ui/update");
11
12
const strings: Record<UpdateState, string> = {
13
[UpdateState.Ready]: "A new version of moonlight is available.",
14
[UpdateState.Working]: "Updating moonlight...",
15
[UpdateState.Installed]: "Updated. Restart Discord to apply changes.",
16
[UpdateState.Failed]: "Failed to update moonlight. Please use the installer instead."
17
};
18
19
export default function Update() {
20
const [state, setState] = React.useState(UpdateState.Ready);
21
const newVersion = useStateFromStores([MoonbaseSettingsStore], () => MoonbaseSettingsStore.newVersion);
22
23
if (newVersion == null) return null;
24
25
return (
26
<HelpMessage text={strings[state]} className="moonbase-update-section" icon={ThemeDarkIcon}>
27
<div className="moonbase-help-message-buttons">
28
{state === UpdateState.Installed && (
29
<Button
30
look={Button.Looks.OUTLINED}
31
color={Button.Colors.CUSTOM}
32
size={Button.Sizes.TINY}
33
onClick={() => {
34
MoonbaseSettingsStore.restartDiscord();
35
}}
36
>
37
Restart Discord
38
</Button>
39
)}
40
41
<Button
42
look={Button.Looks.OUTLINED}
43
color={Button.Colors.CUSTOM}
44
size={Button.Sizes.TINY}
45
disabled={state !== UpdateState.Ready}
46
onClick={() => {
47
setState(UpdateState.Working);
48
49
MoonbaseSettingsStore.updateMoonlight()
50
.then(() => setState(UpdateState.Installed))
51
.catch((e) => {
52
logger.error(e);
53
setState(UpdateState.Failed);
54
});
55
}}
56
>
57
Update
58
</Button>
59
</div>
60
</HelpMessage>
61
);
62
}
63