responsive SystemVersionComponent; eslint-plugin-react-hooks; @flare/react-hooks; hooks warnings fix

.npmrc

@@ -0,0 +1 @@
+@flare:registry=https://toodle.ddns.net/public-node-registry

Dockerfile

@@ -2,8 +2,11 @@
 FROM node:14-slim as builder
 WORKDIR /app
 
+ARG OWN_NPM_TOKEN
+COPY .npmrc .npmrc
 COPY package*.json ./
 RUN npm install
+RUN rm -f .npmrc
 
 COPY . ./
 #RUN ls
@@ -11,9 +14,9 @@ RUN npm run build
 
 # production environment
 FROM node:14-slim
-ARG APP_SUBFOLDER=reverse-proxy
+ARG APP_SUBFOLDER=""
 
-COPY --from=builder /app/build ./application/${APP_SUBFOLDER}
+COPY --from=builder /app/build ./application${APP_SUBFOLDER}
 COPY --from=builder /app/build/index.html ./application/
 
 #install static server
@@ -22,9 +25,7 @@ RUN npm install -g serve
 # environment variables
 ENV Author="Tudor Stanciu"
 ARG APP_VERSION=0.0.0
-ARG APP_DATE=1900-01-01
 ENV APP_VERSION=${APP_VERSION}
-ENV APP_DATE=${REACT_APP_DATE}
 
 #set workdir to root
 WORKDIR /

buildx.sh

@@ -3,16 +3,18 @@ echo "Welcome!"
 
 version="1.4.1"
 platform="linux/amd64,linux/arm64,linux/arm/v7"
-#version="1.3.2-arm64"
-#platform="linux/arm64"
+appSubfolder="/reverse-proxy"
 localRegistryPass="***REMOVED***"
+npmToken="***REMOVED***"
 
 echo "Login to alpine-nexus registry."
 docker login --username=admin --password=$localRegistryPass alpine-nexus:8500
 
 echo "Create docker image with version $version for platform $platform"
 docker buildx build \
+	--build-arg APP_SUBFOLDER=$appSubfolder \
 	--build-arg APP_VERSION=$version \
+	--build-arg OWN_NPM_TOKEN=$npmToken \
 	--platform $platform \
 	--output=type=image,push=true,registry.insecure=true \
 	--push \

package.json

@@ -16,11 +16,13 @@
     "build": "webpack --config webpack.config.prod.js"
   },
   "dependencies": {
+    "@flare/react-hooks": "^1.0.0",
     "@material-ui/core": "^4.9.13",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.53",
     "axios": "^0.27.2",
     "bootstrap": "4.3.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "i18next": "^19.4.4",
     "i18next-browser-languagedetector": "^4.1.1",
     "i18next-http-backend": "^1.0.10",
@@ -84,7 +86,8 @@
       "eslint:recommended",
       "plugin:react/recommended",
       "plugin:import/errors",
-      "plugin:import/warnings"
+      "plugin:import/warnings",
+      "plugin:react-hooks/recommended"
     ],
     "parser": "babel-eslint",
     "parserOptions": {

src/components/App.js

@@ -17,7 +17,7 @@ import ForwardContainer from "../features/forwards/core/components/ForwardContai
 function App({ actions }) {
   useEffect(() => {
     actions.loadFrontendSession();
-  }, []);
+  }, [actions]);
 
   const contentStyle = {
     paddingLeft: "30px",

src/components/layout/ApplicationBar.js

@@ -75,10 +75,7 @@ const ApplicationBar = () => {
     setAnchorEl(null);
   };
 
-  const routePrefix = useMemo(() => process.env.PUBLIC_URL ?? "", [
-    process.env.PUBLIC_URL
-  ]);
-
+  const routePrefix = process.env.PUBLIC_URL ?? "";
   const flagsPath = useMemo(() => `${routePrefix}/public/flags`, [routePrefix]);
 
   return (

src/features/charts/server/components/ServerChartsContainer.js

@@ -8,7 +8,7 @@ import { loadSessionsRunningTime } from "../actionCreators";
 const ServerChartsContainer = ({ actions, sessionRunningTime }) => {
   useEffect(() => {
     actions.loadSessionsRunningTime();
-  }, []);
+  }, [actions]);
 
   return (
     <>

src/features/chatbot/components/BotsManager.js

@@ -34,7 +34,7 @@ const BotsManager = ({ bot, actions }) => {
 
     if (bot.type == botType.none) return;
     actions.loadBotSession(bots.Zirhan, userKey.unknown, bot.type);
-  }, [bot.type]);
+  }, [actions, bot.type]);
 
   const dismissBot = () => {
     actions.closeChat();

src/features/forwards/options/components/simple/ForwardOptionsContainer.js

@@ -8,7 +8,7 @@ import ForwardOptionsComponent from "./ForwardOptionsComponent";
 const ForwardOptionsContainer = ({ actions, forward, options }) => {
   useEffect(() => {
     actions.loadForwardOptions(forward.optionId);
-  }, []);
+  }, [actions, forward.optionId]);
 
   const forwardOptions = options[forward.optionId];
 

src/features/forwards/options/components/simple/ForwardOptionsDialog.js

@@ -17,7 +17,7 @@ const ForwardOptionsDialog = ({ open, forward, handleClose }) => {
 
   const handleAdvancedClick = useCallback(
     () => history.push(`/forwards/${forward.sessionId}/${forward.forwardId}`),
-    [forward]
+    [forward, history]
   );
 
   return (

src/features/releaseNotes/components/ReleaseNotesContainer.js

@@ -10,9 +10,9 @@ const ReleaseNotesContainer = ({ actions, releaseNotes }) => {
 
   useEffect(() => {
     actions.loadReleaseNotes();
-  }, []);
+  }, [actions]);
 
-  const handleToggle = (version) => (_, expanded) => {
+  const handleToggle = version => (_, expanded) => {
     setNotesFlags({
       ...notesFlags,
       [version]: expanded

src/features/server/components/ActiveSessionContainer.js

@@ -15,7 +15,7 @@ const ActiveSessionContainer = ({ actions, session, forwards, domain }) => {
 
   useEffect(() => {
     actions.loadActiveSession();
-  }, []);
+  }, [actions]);
 
   const handleExpandClick = () => {
     const expand = !expanded;

src/features/server/components/ServerContainer.js

@@ -10,7 +10,7 @@ import { summonWizard } from "../../chatbot/actionCreators";
 const ServerContainer = ({ actions, data, serverHost, history }) => {
   useEffect(() => {
     actions.loadServerData();
-  }, []);
+  }, [actions]);
 
   const openAbout = event => {
     history.push("/about");

src/features/session/components/SessionContainer.js

@@ -12,7 +12,7 @@ const SessionContainer = ({ actions, sessions, forwards }) => {
 
   useEffect(() => {
     actions.loadServerSessions();
-  }, []);
+  }, [actions]);
 
   const handleToggle = sessionId => (_, expanded) => {
     if (expanded) actions.loadSessionForwards(sessionId);

src/features/system/components/SystemContainer.js

@@ -9,7 +9,7 @@ import { withRouter } from "react-router-dom";
 const SystemContainer = ({ actions, data, history }) => {
   useEffect(() => {
     actions.loadSystemData();
-  }, []);
+  }, [actions]);
 
   const handleRedirect = (route, callback) => event => {
     history.push(route);

src/features/system/components/version/SystemVersionComponent.js

@@ -13,14 +13,19 @@ import WebAssetIcon from "@material-ui/icons/WebAsset";
 import DnsRoundedIcon from "@material-ui/icons/DnsRounded";
 import SettingsInputSvideoIcon from "@material-ui/icons/SettingsInputSvideo";
 import { useTranslation } from "react-i18next";
+import { useWindowSize } from "@flare/react-hooks";
 
 const useStyles = makeStyles(theme => {
   return {
-    root: {
+    horizontally: {
       display: "flex",
       flexDirection: "row",
       padding: 0
     },
+    vertical: {
+      width: "100%",
+      maxWidth: 360
+    },
     value: {
       fontSize: "0.9rem",
       fontWeight: theme.typography.fontWeightMedium
@@ -31,6 +36,12 @@ const useStyles = makeStyles(theme => {
 const SystemVersionComponent = ({ data }) => {
   const classes = useStyles();
   const { t } = useTranslation();
+  const { isMobile } = useWindowSize();
+
+  const listClassName = useMemo(
+    () => (isMobile ? classes.vertical : classes.horizontally),
+    [isMobile, classes.vertical, classes.horizontally]
+  );
 
   const lastUpdateDate = useMemo(() => {
     const format = "DD-MM-YYYY HH:mm:ss";
@@ -63,7 +74,7 @@ const SystemVersionComponent = ({ data }) => {
       <Typography variant="subtitle1" color="textSecondary">
         {t("System.Versions.Title")}
       </Typography>
-      <List className={classes.root}>
+      <List className={listClassName}>
         <ListItem>
           <ListItemAvatar>
             <Avatar>

src/features/system/components/version/SystemVersionContainer.js

@@ -8,7 +8,7 @@ import SystemVersionComponent from "./SystemVersionComponent";
 const SystemVersionContainer = ({ actions, data }) => {
   useEffect(() => {
     actions.loadSystemVersion();
-  }, []);
+  }, [actions]);
 
   return <>{data.loaded && <SystemVersionComponent data={data} />}</>;
 };