From 8e860361548d783d22f1b8fd3d131280b2434356 Mon Sep 17 00:00:00 2001
From: Janik Piepenhagen <janik.piepenhagen@web.de>
Date: Sat, 17 Aug 2024 19:39:31 +0200
Subject: [PATCH] fixed more styling issues and added dotenv for production

---
 .env                                          |  3 +-
 package-lock.json                             | 50 +++++++++++++++++++
 package.json                                  |  2 +
 src/lib/env.ts                                |  1 +
 src/main/index.ts                             | 14 +++---
 .../components/output/OutputDataTable.tsx     |  5 +-
 .../components/output/OutputDataTableCore.tsx |  6 +--
 .../components/output/OutputLineChart.tsx     |  4 +-
 .../components/output/OutputTabView.tsx       | 13 ++---
 .../components/output/OutputTextArea.tsx      |  8 +--
 .../components/output/TransmitDataTable.tsx   | 14 ++----
 src/renderer/resources/styles/app.scss        |  6 +++
 webpack.plugins.ts                            |  2 +
 13 files changed, 91 insertions(+), 37 deletions(-)

diff --git a/.env b/.env
index 8ecc517..035755b 100644
--- a/.env
+++ b/.env
@@ -1,2 +1,3 @@
 REACT_APP_ALLOW_CONTEXT_MENU=false
-UPDATE_PORT_LIST_INTERVAL=5000
\ No newline at end of file
+UPDATE_PORT_LIST_INTERVAL=5000
+DEBUG_PROD=false
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index b71d722..3ccf58a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -40,6 +40,7 @@
         "@electron/fuses": "^1.8.0",
         "@testing-library/jest-dom": "^6.4.5",
         "@testing-library/react": "^15.0.7",
+        "@types/dotenv-webpack": "^7.0.7",
         "@types/jest": "^29.5.12",
         "@types/react": "^18.3.2",
         "@types/react-dom": "^18.3.0",
@@ -47,6 +48,7 @@
         "@typescript-eslint/parser": "^8.0.1",
         "@vercel/webpack-asset-relocator-loader": "1.7.3",
         "css-loader": "^6.0.0",
+        "dotenv-webpack": "^8.1.0",
         "electron": "^31.3.1",
         "eslint": "^8.0.1",
         "eslint-import-resolver-typescript": "^3.6.1",
@@ -2547,6 +2549,18 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/dotenv-webpack": {
+      "version": "7.0.7",
+      "resolved": "https://registry.npmjs.org/@types/dotenv-webpack/-/dotenv-webpack-7.0.7.tgz",
+      "integrity": "sha512-tltVokFUeYuSjNmHc6N892Asu/JIQcnH2iUF5A29/VKqv9opq6KlrmnKd/Lt/bBikV/z0YN2K0kguTwWirYCMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*",
+        "tapable": "^2.2.0",
+        "webpack": "^5"
+      }
+    },
     "node_modules/@types/eslint": {
       "version": "8.56.10",
       "dev": true,
@@ -5459,6 +5473,42 @@
         "url": "https://dotenvx.com"
       }
     },
+    "node_modules/dotenv-defaults": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/dotenv-defaults/-/dotenv-defaults-2.0.2.tgz",
+      "integrity": "sha512-iOIzovWfsUHU91L5i8bJce3NYK5JXeAwH50Jh6+ARUdLiiGlYWfGw6UkzsYqaXZH/hjE/eCd/PlfM/qqyK0AMg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dotenv": "^8.2.0"
+      }
+    },
+    "node_modules/dotenv-defaults/node_modules/dotenv": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz",
+      "integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/dotenv-webpack": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/dotenv-webpack/-/dotenv-webpack-8.1.0.tgz",
+      "integrity": "sha512-owK1JcsPkIobeqjVrk6h7jPED/W6ZpdFsMPR+5ursB7/SdgDyO+VzAU+szK8C8u3qUhtENyYnj8eyXMR5kkGag==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dotenv-defaults": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "webpack": "^4 || ^5"
+      }
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "dev": true,
diff --git a/package.json b/package.json
index fdf83bb..930d89a 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "@electron/fuses": "^1.8.0",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^15.0.7",
+    "@types/dotenv-webpack": "^7.0.7",
     "@types/jest": "^29.5.12",
     "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
@@ -31,6 +32,7 @@
     "@typescript-eslint/parser": "^8.0.1",
     "@vercel/webpack-asset-relocator-loader": "1.7.3",
     "css-loader": "^6.0.0",
+    "dotenv-webpack": "^8.1.0",
     "electron": "^31.3.1",
     "eslint": "^8.0.1",
     "eslint-import-resolver-typescript": "^3.6.1",
diff --git a/src/lib/env.ts b/src/lib/env.ts
index 252481a..8858baa 100644
--- a/src/lib/env.ts
+++ b/src/lib/env.ts
@@ -3,6 +3,7 @@ import z from "zod";
 const environmentVariables = z.object({
   REACT_APP_ALLOW_CONTEXT_MENU: z.string().default("true"),
   UPDATE_PORT_LIST_INTERVAL: z.coerce.number().default(5000),
+  DEBUG_PROD: z.string().optional()
 });
 
 const parsedResults = environmentVariables.safeParse(process.env);
diff --git a/src/main/index.ts b/src/main/index.ts
index 1824d58..fe91a24 100644
--- a/src/main/index.ts
+++ b/src/main/index.ts
@@ -5,9 +5,15 @@ import Store from "electron-store";
 import defaults from "./defaultSettings";
 import log from "electron-log";
 import MenuBuilder from "./menu";
-import SerialPortListener from '@/main/serialportListener';
+import SerialPortListener from "@/main/serialportListener";
+
+// Before doing anything, make sure logger is assigned to track everything in the ongoing initialization
+Object.assign(console, log.functions);
+log.initialize({ spyRendererConsole: true });
+
 import "dotenv/config";
-import "@/lib/env"
+import "@/lib/env";
+
 // This allows TypeScript to pick up the magic constants that's auto-generated by Forge's Webpack
 // plugin that tells the Electron app where to look for the Webpack-bundled app code (depending on
 // whether you're running in development or production).
@@ -166,10 +172,6 @@ ipcMain.on(IPCChannelType.IS_DEVELOPMENT, async (event) => {
   event.returnValue = isDevelopment;
 });
 
-ipcMain.on(IPCChannelType.GET_ENV, async (event, arg) => {
-  event.returnValue = process.env[arg];
-});
-
 ipcMain.on(IPCChannelType.CHANGE_THEME, async (event, args) => {
   nativeTheme.themeSource = args[0];
 });
diff --git a/src/renderer/components/output/OutputDataTable.tsx b/src/renderer/components/output/OutputDataTable.tsx
index 3fb382d..98ba33a 100644
--- a/src/renderer/components/output/OutputDataTable.tsx
+++ b/src/renderer/components/output/OutputDataTable.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { useContext } from '@/renderer/context';
 import { IDefaultProps, IPCChannelType } from '@minterm/types';
 import OutputDataTableCore from './OutputDataTableCore';
+import clsx from 'clsx';
 
 interface IOutputDataTableProps extends IDefaultProps {
   selectedCells: Array<any>;
@@ -39,9 +40,9 @@ const OutputDataTable: React.FC<IOutputDataTableProps> = ({
   }, []);
 
   return (
-    <div id={`${id}:container`} className={`${className} h-full`}>
+    <div id={`${id}:container`} className={clsx(className, "h-full")}>
       <OutputDataTableCore
-        id={`${id}:outputTable`}
+        id={`${id}:outputTableCore`}
         data={receivedData}
         setData={setReceivedData}
         clearButtonToolTip={t('CLEAR_RECEIVED')}
diff --git a/src/renderer/components/output/OutputDataTableCore.tsx b/src/renderer/components/output/OutputDataTableCore.tsx
index db93e20..4443faa 100644
--- a/src/renderer/components/output/OutputDataTableCore.tsx
+++ b/src/renderer/components/output/OutputDataTableCore.tsx
@@ -5,6 +5,7 @@ import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useResizeDetector } from 'react-resize-detector';
 import { ConversionType, DataPointType } from '@minterm/types';
 import ActionBar, { ActionBarProps } from './ActionBar';
+import clsx from 'clsx';
 
 interface IOutputDataTableCoreProps extends ActionBarProps {
   data: Array<DataPointType>;
@@ -213,8 +214,7 @@ const OutputDataTableCore: React.FC<IOutputDataTableCoreProps> = ({
     <div
       id={`${id}:container`}
       ref={ref}
-      className={`${className} h-full`}
-      style={{ paddingBottom: '50px' }}
+      className={clsx(className, "flex-column")}
     >
       <ActionBar
         id={`${id}:outputActionBar`}
@@ -231,7 +231,7 @@ const OutputDataTableCore: React.FC<IOutputDataTableCoreProps> = ({
       />
       <div className="h-full datatable">
         <DataTable
-          id={id}
+          id={`${id}:dataTable`}
           value={tableData}
           responsiveLayout="scroll"
           scrollable
diff --git a/src/renderer/components/output/OutputLineChart.tsx b/src/renderer/components/output/OutputLineChart.tsx
index 4158d17..7bb2f31 100644
--- a/src/renderer/components/output/OutputLineChart.tsx
+++ b/src/renderer/components/output/OutputLineChart.tsx
@@ -234,7 +234,7 @@ const OutputLineChart: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
     const opacity = isDataNumeric ? "1" : "0.5";
     return (
       <Chart
-        id={id}
+        id={id + ":chart"}
         ref={chartRef}
         type="line"
         className="w-full"
@@ -246,7 +246,7 @@ const OutputLineChart: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
   };
 
   return (
-    <div id={id + ":container"} className={clsx(className, " h-full flex flex-column")}>
+    <div id={id + ":container"} className={clsx(className, "flex-column")}>
       <ActionBar
         id={id + ":outputActionBar"}
         data={receivedData}
diff --git a/src/renderer/components/output/OutputTabView.tsx b/src/renderer/components/output/OutputTabView.tsx
index e1096de..227d313 100644
--- a/src/renderer/components/output/OutputTabView.tsx
+++ b/src/renderer/components/output/OutputTabView.tsx
@@ -2,7 +2,7 @@ import { TabPanel, TabView } from 'primereact/tabview';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useContext } from '@/renderer/context';
-import { IDefaultProps, IPCChannelType } from '@minterm/types';
+import { IDefaultProps } from '@minterm/types';
 import ContextMenuOutput from './ContextMenuOutput';
 import OutputDataTable from './OutputDataTable';
 import OutputTextArea from './OutputTextArea';
@@ -18,11 +18,7 @@ const OutputTabView: React.FC<IDefaultProps> = ({ id, className }) => {
   );
 
   const isContextEnabled = () => {
-    const env = window.electron?.ipcRenderer.fetch(
-      IPCChannelType.GET_ENV,
-      'REACT_APP_ALLOW_CONTEXT_MENU'
-    );
-    return env !== 'false';
+    return process.env.REACT_APP_ALLOW_CONTEXT_MENU !== 'false';
   };
 
   return (
@@ -45,7 +41,7 @@ const OutputTabView: React.FC<IDefaultProps> = ({ id, className }) => {
           className="h-full"
         >
           <OutputDataTable
-            id="outDataTable"
+            id="outputDataTable"
             selectedCells={selectedCellsInTable}
             setSelectedCells={setSelectedCellsInTable}
           />
@@ -56,8 +52,7 @@ const OutputTabView: React.FC<IDefaultProps> = ({ id, className }) => {
           className="h-full"
         >
           <OutputTextArea
-            id="lineChart"
-            className="pb-5"
+            id={`${id}:outputTextArea`}
             data={receivedData.map((i) => i.value).join('')}
             setData={setReceivedData}
           />
diff --git a/src/renderer/components/output/OutputTextArea.tsx b/src/renderer/components/output/OutputTextArea.tsx
index c7ab7bb..a881202 100644
--- a/src/renderer/components/output/OutputTextArea.tsx
+++ b/src/renderer/components/output/OutputTextArea.tsx
@@ -72,8 +72,8 @@ const OutputTextArea: React.FC<IOutputTextAreaProps> = ({
 
 
   return (
-    <div id={`${id}:container`} className={clsx(className, "card h-full")}>
-      <div hidden={actionBarHidden}>
+    <div id={`${id}:container`} className={clsx(className, "flex-column")}>
+      <div id={`${id}:outputActionBarWrapper`} hidden={actionBarHidden}>
         <ActionBar
           id={`${id}:outputActionBar`}
           data={data}
@@ -84,7 +84,7 @@ const OutputTextArea: React.FC<IOutputTextAreaProps> = ({
           clearButtonToolTip={t('CLEAR_RECEIVED')}
         />
       </div>
-      <div className="h-full">
+      <div id={`${id}:outputTextWrapper`} className="h-full">
       <Button
           onClick={goDown}
           visible={downScrollable}
@@ -92,7 +92,7 @@ const OutputTextArea: React.FC<IOutputTextAreaProps> = ({
           icon="pi pi-angle-down"
         />
         <InputTextarea
-          id={id}
+          id={`${id}:outputText`}
           value={data}
           readOnly
           ref={ref}
diff --git a/src/renderer/components/output/TransmitDataTable.tsx b/src/renderer/components/output/TransmitDataTable.tsx
index 4958059..9d0e03c 100644
--- a/src/renderer/components/output/TransmitDataTable.tsx
+++ b/src/renderer/components/output/TransmitDataTable.tsx
@@ -14,15 +14,11 @@ const TransmitDataTable: React.FC<IDefaultProps> = ({ id, className }) => {
   const [selectedCells, setSelectedCells] = useState<Array<any>>([]);
 
   const isContextEnabled = () => {
-    const env = window.electron?.ipcRenderer.fetch(
-      IPCChannelType.GET_ENV,
-      'REACT_APP_ALLOW_CONTEXT_MENU'
-    );
-    return env !== 'false';
+    return process.env.REACT_APP_ALLOW_CONTEXT_MENU !== 'false';
   };
 
   return (
-    <div id={`${id}:container`} className={clsx(className, 'w-full h-full')}>
+    <div id={`${id}:container`} className={clsx(className, 'flex-column w-full pt-2')} style={{padding: "1.25rem"}}>
       {isContextEnabled() && (
         <ContextMenuOutput
           data={transmittedData}
@@ -30,18 +26,16 @@ const TransmitDataTable: React.FC<IDefaultProps> = ({ id, className }) => {
           onContextMenu={contextEvent}
         />
       )}
-      <SequenceInput id="sequenceInput" className="w-full mt-2 pr-3" />
+      <SequenceInput id={`${id}:sequenceInput`} className='mb-2' />
       <div
         className="h-full"
-        style={{ padding: '0.5rem 1rem 3rem' }}
         onContextMenu={setContextEvent}
       >
         <OutputDataTableCore
-          id="outputTable"
+          id={`${id}:outputDataTableCore`}
           data={transmittedData}
           setData={setTransmittedData}
           clearButtonToolTip={t('CLEAR_TRANSMITTED')}
-          className="pb-3"
           dataCountLabel="Tx"
           selectedCells={selectedCells}
           setSelectedCells={setSelectedCells}
diff --git a/src/renderer/resources/styles/app.scss b/src/renderer/resources/styles/app.scss
index dbce791..7d6fc0d 100644
--- a/src/renderer/resources/styles/app.scss
+++ b/src/renderer/resources/styles/app.scss
@@ -31,6 +31,12 @@ body {
   margin: 0;
 }
 
+.flex-column {
+  display: flex;
+  flex-direction: column;
+  height: 100%; /* Optional: Kann verwendet werden, um den Container auf die volle Höhe zu strecken */
+}
+
 .pi {
   font-size: 1rem !important;
 }
diff --git a/webpack.plugins.ts b/webpack.plugins.ts
index 846aa24..56ad596 100644
--- a/webpack.plugins.ts
+++ b/webpack.plugins.ts
@@ -1,4 +1,5 @@
 import type IForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
+import Dotenv from 'dotenv-webpack';
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const ForkTsCheckerWebpackPlugin: typeof IForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
@@ -7,4 +8,5 @@ export const plugins = [
   new ForkTsCheckerWebpackPlugin({
     logger: 'webpack-infrastructure',
   }),
+  new Dotenv()
 ];