network-resurrector/src/features/about/system/SystemVersionComponent.js

import React, { useMemo, useEffect, useState } from "react";
import PropTypes from "prop-types";
import { makeStyles } from "@material-ui/core/styles";
import {
  List,
  ListItem,
  ListItemText,
  ListItemAvatar
} from "@material-ui/core";
import Avatar from "@material-ui/core/Avatar";
import WebAssetIcon from "@material-ui/icons/WebAsset";
import DeveloperBoardIcon from "@material-ui/icons/DeveloperBoard";
import SettingsInputSvideoIcon from "@material-ui/icons/SettingsInputSvideo";
import { useTranslation } from "react-i18next";
import packageData from "../../../../package.json";
import Paper from "@material-ui/core/Paper";

const useStyles = makeStyles(theme => {
  return {
    horizontally: {
      display: "flex",
      flexDirection: "row",
      padding: 0
    },
    vertical: {
      width: "100%"
    },
    value: {
      fontSize: "0.9rem",
      fontWeight: theme.typography.fontWeightMedium
    },
    versionAvatar: {
      backgroundColor: theme.palette.secondary.main
    }
  };
});

const SystemVersionComponent = ({ data }) => {
  const classes = useStyles();
  const [listClass, setListClass] = useState(classes.horizontally);
  const { t } = useTranslation();

  useEffect(() => {
    const mediaQuery = window.matchMedia("(max-width: 800px)");

    function handleMatches(event) {
      const cssClass = event.matches ? classes.vertical : classes.horizontally;
      setListClass(cssClass);
    }

    handleMatches(mediaQuery);
    mediaQuery.addListener(handleMatches);

    return () => {
      mediaQuery.removeListener(handleMatches);
    };
  }, [classes.horizontally, classes.vertical]);

  const lastReleaseDate = useMemo(() => {
    const format = "DD-MM-YYYY HH:mm:ss";
    const server = t("DATE_FORMAT", {
      date: {
        value: data.server.lastReleaseDate,
        format
      }
    });

    const api = t("DATE_FORMAT", {
      date: {
        value: data.api.lastReleaseDate,
        format
      }
    });

    const frontend = t("DATE_FORMAT", {
      date: {
        value: process.env.APP_DATE ?? new Date(),
        format
      }
    });

    return { server, api, frontend };
  }, [data, t]);

  return (
    <Paper variant="outlined">
      <List className={listClass}>
        <ListItem>
          <ListItemAvatar>
            <Avatar className={classes.versionAvatar}>
              <DeveloperBoardIcon />
            </Avatar>
          </ListItemAvatar>
          <ListItemText
            primary={
              <span className={classes.value}>
                {t("About.System.Version.Server", {
                  version: data.server.version
                })}
              </span>
            }
            secondary={t("About.System.Version.LastReleaseDate", {
              date: lastReleaseDate.server
            })}
          />
        </ListItem>
        <ListItem>
          <ListItemAvatar>
            <Avatar className={classes.versionAvatar}>
              <SettingsInputSvideoIcon />
            </Avatar>
          </ListItemAvatar>
          <ListItemText
            primary={
              <span className={classes.value}>
                {t("About.System.Version.Api", {
                  version: data.api.version
                })}
              </span>
            }
            secondary={t("About.System.Version.LastReleaseDate", {
              date: lastReleaseDate.api
            })}
          />
        </ListItem>
        <ListItem>
          <ListItemAvatar>
            <Avatar className={classes.versionAvatar}>
              <WebAssetIcon />
            </Avatar>
          </ListItemAvatar>
          <ListItemText
            primary={
              <span className={classes.value}>
                {t("About.System.Version.Frontend", {
                  version: process.env.APP_VERSION ?? packageData.version
                })}
              </span>
            }
            secondary={t("About.System.Version.LastReleaseDate", {
              date: lastReleaseDate.frontend
            })}
          />
        </ListItem>
      </List>
    </Paper>
  );
};

SystemVersionComponent.propTypes = {
  data: PropTypes.object.isRequired
};

export default SystemVersionComponent;