feat: store and show pkgbuild (implements #157)

frontend/src/components/package/ChangesTab.tsx

@@ -17,20 +17,10 @@
  * You should have received a copy of the GNU General Public License
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
-import { Box } from "@mui/material";
-import { useQuery } from "@tanstack/react-query";
-import CopyButton from "components/common/CopyButton";
-import { QueryKeys } from "hooks/QueryKeys";
-import { useClient } from "hooks/useClient";
-import { useThemeMode } from "hooks/useThemeMode";
-import type { Changes } from "models/Changes";
+import CodeBlock from "components/common/CodeBlock";
+import { usePackageChanges } from "hooks/usePackageChanges";
 import type { RepositoryId } from "models/RepositoryId";
 import React from "react";
-import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
-import diff from "react-syntax-highlighter/dist/esm/languages/hljs/diff";
-import { githubGist, vs2015 } from "react-syntax-highlighter/dist/esm/styles/hljs";
-
-SyntaxHighlighter.registerLanguage("diff", diff);
 
 interface ChangesTabProps {
     packageBase: string;
@@ -38,35 +28,7 @@ interface ChangesTabProps {
 }
 
 export default function ChangesTab({ packageBase, repository }: ChangesTabProps): React.JSX.Element {
-    const client = useClient();
-    const { mode } = useThemeMode();
+    const data = usePackageChanges(packageBase, repository);
 
-    const { data } = useQuery<Changes>({
-        queryKey: QueryKeys.changes(packageBase, repository),
-        queryFn: () => client.fetch.fetchPackageChanges(packageBase, repository),
-        enabled: !!packageBase,
-    });
-
-    const changesText = data?.changes ?? "";
-
-    return <Box sx={{ position: "relative", mt: 1 }}>
-        <SyntaxHighlighter
-            language="diff"
-            style={mode === "dark" ? vs2015 : githubGist}
-            customStyle={{
-                padding: "16px",
-                borderRadius: "4px",
-                overflow: "auto",
-                height: 400,
-                fontSize: "0.8rem",
-                fontFamily: "monospace",
-                margin: 0,
-            }}
-        >
-            {changesText}
-        </SyntaxHighlighter>
-        <Box sx={{ position: "absolute", top: 8, right: 8 }}>
-            <CopyButton getText={() => changesText} />
-        </Box>
-    </Box>;
+    return <CodeBlock language="diff" content={data?.changes ?? ""} height={400} />;
 }