Refactor SystemVersionComponent and add dtos to types

frontend/src/features/about/system/SystemVersionComponent.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo, useEffect, useState } from "react";
 import PropTypes from "prop-types";
-import { List, ListItem, ListItemText, ListItemAvatar } from "@mui/material";
+import { List, ListItem, ListItemText, ListItemAvatar, Theme } from "@mui/material";
 import Avatar from "@mui/material/Avatar";
 import WebAssetIcon from "@mui/icons-material/WebAsset";
 import DeveloperBoardIcon from "@mui/icons-material/DeveloperBoard";
@@ -9,8 +9,9 @@ import { useTranslation } from "react-i18next";
 import packageData from "../../../../package.json";
 import Paper from "@mui/material/Paper";
 import { useTheme } from "@mui/material/styles";
+import { dtos } from "types";
 
-const getStyles = theme => ({
+const getStyles = (theme: Theme) => ({
   horizontally: {
     display: "flex",
     flexDirection: "row",
@@ -28,25 +29,31 @@ const getStyles = theme => ({
   }
 });
 
-const SystemVersionComponent = ({ data }) => {
+type Props = {
+  data: dtos.SystemVersion;
+};
+
+const SystemVersionComponent: React.FC<Props> = ({ data }) => {
   const { t } = useTranslation();
   const theme = useTheme();
-  const styles = getStyles(theme);
+  const styles = useMemo(() => getStyles(theme), [theme]);
   const [listClass, setListClass] = useState(styles.horizontally);
 
   useEffect(() => {
     const mediaQuery = window.matchMedia("(max-width: 800px)");
 
-    function handleMatches(event) {
-      const cssClass = event.matches ? styles.vertical : styles.horizontally;
+    const handleMatches = (event: MediaQueryListEvent) => {
+      const cssClass: any = event.matches ? styles.vertical : styles.horizontally;
       setListClass(cssClass);
-    }
+    };
 
-    handleMatches(mediaQuery);
-    mediaQuery.addListener(handleMatches);
+    mediaQuery.addEventListener("change", handleMatches);
+
+    // Initial check
+    handleMatches(mediaQuery as unknown as MediaQueryListEvent);
 
     return () => {
-      mediaQuery.removeListener(handleMatches);
+      mediaQuery.removeEventListener("change", handleMatches);
     };
   }, [styles.horizontally, styles.vertical]);
 
@@ -141,8 +148,4 @@ const SystemVersionComponent = ({ data }) => {
   );
 };
 
-SystemVersionComponent.propTypes = {
-  data: PropTypes.object.isRequired
-};
-
 export default SystemVersionComponent;