summaryrefslogtreecommitdiff
path: root/src/index.tsx
blob: be40c3a46f52c35272ef5a27a15ebb6789f0525c (plain)
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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
import { useEffect, useState } from "react";
import { FaClipboardList } from "react-icons/fa";
import remarkHtml from "remark-html";
import remarkParse from "remark-parse";
import remarkGfm from "remark-gfm";
import { unified } from "unified";
import { patchPartnerEventStore } from "./PartnerEventStorePatch";
import {
  staticClasses,
  PanelSection,
  PanelSectionRow,
  ButtonItem,
  Field,
  SteamSpinner,
} from "@decky/ui";
import { definePlugin } from "@decky/api";
import { fetchReleases } from "./FetchReleases";

function Content() {
  const [changelogHtml, setChangelogHtml] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [isRefreshing, setIsRefreshing] = useState<boolean>(false);

  const fetchChangelog = async (signal?: AbortSignal) => {
    try {
      const generator = fetchReleases(signal);
      const iterator = await generator.next();

      if (!iterator || iterator.done) {
        setError("An unknown error occurred while fetching the changelog.");
        return;
      }

      const html = await unified()
        .use(remarkParse)
        .use(remarkGfm)
        .use(remarkHtml)
        .process(iterator.value.body);

      setChangelogHtml(html.value as string);
      setError(null);
    } catch (err) {
      if (err instanceof DOMException && err.name === "AbortError") return;
      const errorMessage =
        err instanceof Error
          ? err.message
          : "An unknown error occurred while fetching the changelog.";
      setError(errorMessage);
    }
  };

  useEffect(() => {
    const controller = new AbortController();
    fetchChangelog(controller.signal);

    return () => {
      controller.abort();
    };
  }, []);

  const refreshChangelog = async () => {
    setIsRefreshing(true);
    setChangelogHtml(null);
    setError(null);

    try {
      await fetchChangelog();
    } finally {
      setIsRefreshing(false);
    }
  };

  return (
    <PanelSection title="Bazzite Release Notes">
      <PanelSectionRow>
        <ButtonItem
          layout="below"
          onClick={() =>
            window.open(
              "https://github.com/ublue-os/bazzite/releases",
              "_blank"
            )
          }
        >
          View All Release Notes
        </ButtonItem>
      </PanelSectionRow>
      <PanelSectionRow>
        <ButtonItem
          layout="below"
          disabled={isRefreshing}
          onClick={refreshChangelog}
        >
          {isRefreshing ? "Refreshing..." : "Refresh"}
        </ButtonItem>
      </PanelSectionRow>
      <PanelSectionRow>
        {error ? (
          <Field label="Error">{error}</Field>
        ) : changelogHtml ? (
          <Field>
            <div
              dangerouslySetInnerHTML={{
                __html: changelogHtml,
              }}
            />
          </Field>
        ) : (
          <SteamSpinner />
        )}
      </PanelSectionRow>
    </PanelSection>
  );
}

// noinspection JSUnusedGlobalSymbols
export default definePlugin(() => {
  const patches = patchPartnerEventStore();

  return {
    name: "Bazzite Changelog Viewer",
    title: <div className={staticClasses.Title}>Bazzite Buddy</div>,
    icon: <FaClipboardList/>,
    content: <Content/>,
    onDismount() {
      patches.forEach(patch => {
        patch.unpatch();
      });
    },
  };
});