Revert "refactor: Update webpack configuration to improve git commit hash retrieval and enhance lazy loading of components for better performance"

This reverts commit 52c9888a6a.
2026-03-28 18:04:55 +01:00
parent 52c9888a6a
commit 2540d00c8e
11 changed files with 128 additions and 129 deletions
--- a/src/App.js
+++ b/src/App.js
@@ -32,10 +32,11 @@ import i18n from './i18n/index.js';

 import Header from "./components/Header.js";
 import Footer from "./components/Footer.js";
-const IdleMainPagesSlideshow = lazy(() => import(/* webpackChunkName: "idle-slideshow" */ "./components/IdleMainPagesSlideshow.js"));
-const MainPageLayout = lazy(() => import(/* webpackChunkName: "main-page-layout" */ "./components/MainPageLayout.js"));
-const Content = lazy(() => import(/* webpackChunkName: "content" */ "./components/Content.js"));
-const ProductDetail = lazy(() => import(/* webpackChunkName: "product-detail" */ "./components/ProductDetail.js"));
+import MainPageLayout from "./components/MainPageLayout.js";
+import IdleMainPagesSlideshow from "./components/IdleMainPagesSlideshow.js";
+
+import Content from "./components/Content.js";
+import ProductDetail from "./components/ProductDetail.js";

 // Lazy load rarely-accessed pages
 const ProfilePage = lazy(() => import(/* webpackChunkName: "profile" */ "./pages/ProfilePage.js"));
--- a/src/PrerenderHome.js
+++ b/src/PrerenderHome.js
@@ -7,8 +7,6 @@ import {
 } from '@mui/material';
 import Footer from './components/Footer.js';
 import { Logo, CategoryList } from './components/header/index.js';
-import MainPageLayout from './components/MainPageLayout.js';
-import { CarouselProvider } from './contexts/CarouselContext.js';


 class PrerenderHome extends React.Component {
@@ -124,18 +122,9 @@ class PrerenderHome extends React.Component {
        ),
        React.createElement(CategoryList, { categoryId: 209, activeCategoryId: null })
      ),
-      React.createElement(
-        Box,
-        { component: 'main', sx: { flexGrow: 1 } },
-        React.createElement(
-          CarouselProvider,
-          null,
-          React.createElement(MainPageLayout)
-        )
-      ),
      React.createElement(Footer)
    );
  }
 }

-export default PrerenderHome; 
+export default PrerenderHome; 
--- a/src/components/ChatAssistant.js
+++ b/src/components/ChatAssistant.js
@@ -18,7 +18,7 @@ import { Link } from 'react-router-dom';
 import MuiLink from '@mui/material/Link';
 import { alpha } from '@mui/material/styles';
 import TelegramIcon from '@mui/icons-material/Telegram';
-import { isUserLoggedIn } from '../utils/authSession.js';
+import { isUserLoggedIn } from './LoginComponent.js';
 import { withTranslation } from '../i18n/withTranslation.js';

 const TELEGRAM_ASSISTANT_URL = 'https://t.me/Growheads_de_Bot';
--- a/src/components/LanguageSwitcher.js
+++ b/src/components/LanguageSwitcher.js
@@ -6,37 +6,13 @@ import MenuItem from '@mui/material/MenuItem';
 import Typography from '@mui/material/Typography';
 import { withI18n } from '../i18n/withTranslation.js';

-const LANGUAGE_FLAG_EMOJIS = {
-  ar: '🇪🇬',
-  bg: '🇧🇬',
-  cs: '🇨🇿',
-  de: '🇩🇪',
-  el: '🇬🇷',
-  en: '🇺🇸',
-  es: '🇪🇸',
-  fr: '🇫🇷',
-  hr: '🇭🇷',
-  hu: '🇭🇺',
-  it: '🇮🇹',
-  pl: '🇵🇱',
-  ro: '🇷🇴',
-  ru: '🇷🇺',
-  sk: '🇸🇰',
-  sl: '🇸🇮',
-  sq: '🇦🇱',
-  sr: '🇷🇸',
-  sv: '🇸🇪',
-  tr: '🇹🇷',
-  uk: '🇺🇦',
-  zh: '🇨🇳'
-};
-
 class LanguageSwitcher extends Component {
  constructor(props) {
    super(props);
-
+    
    this.state = {
-      anchorEl: null
+      anchorEl: null,
+      loadedFlags: {}
    };
  }

@@ -60,7 +36,72 @@ class LanguageSwitcher extends Component {
    this.handleClose();
  };

+  // Lazy load flag components
+  loadFlagComponent = async (lang) => {
+    if (this.state.loadedFlags[lang]) {
+      return this.state.loadedFlags[lang];
+    }
+
+    try {
+      const flagMap = {
+        'ar': () => import('country-flag-icons/react/3x2').then(m => m.EG),
+        'bg': () => import('country-flag-icons/react/3x2').then(m => m.BG),
+        'cs': () => import('country-flag-icons/react/3x2').then(m => m.CZ),
+        'de': () => import('country-flag-icons/react/3x2').then(m => m.DE),
+        'el': () => import('country-flag-icons/react/3x2').then(m => m.GR),
+        'en': () => import('country-flag-icons/react/3x2').then(m => m.US),
+        'es': () => import('country-flag-icons/react/3x2').then(m => m.ES),
+        'fr': () => import('country-flag-icons/react/3x2').then(m => m.FR),
+        'hr': () => import('country-flag-icons/react/3x2').then(m => m.HR),
+        'hu': () => import('country-flag-icons/react/3x2').then(m => m.HU),
+        'it': () => import('country-flag-icons/react/3x2').then(m => m.IT),
+        'pl': () => import('country-flag-icons/react/3x2').then(m => m.PL),
+        'ro': () => import('country-flag-icons/react/3x2').then(m => m.RO),
+        'ru': () => import('country-flag-icons/react/3x2').then(m => m.RU),
+        'sk': () => import('country-flag-icons/react/3x2').then(m => m.SK),
+        'sl': () => import('country-flag-icons/react/3x2').then(m => m.SI),
+        'sq': () => import('country-flag-icons/react/3x2').then(m => m.AL),
+        'sr': () => import('country-flag-icons/react/3x2').then(m => m.RS),
+        'sv': () => import('country-flag-icons/react/3x2').then(m => m.SE),
+        'tr': () => import('country-flag-icons/react/3x2').then(m => m.TR),
+        'uk': () => import('country-flag-icons/react/3x2').then(m => m.UA),
+        'zh': () => import('country-flag-icons/react/3x2').then(m => m.CN)
+      };
+
+      const flagLoader = flagMap[lang];
+      if (flagLoader) {
+        const FlagComponent = await flagLoader();
+        this.setState(prevState => ({
+          loadedFlags: {
+            ...prevState.loadedFlags,
+            [lang]: FlagComponent
+          }
+        }));
+        return FlagComponent;
+      }
+    } catch (error) {
+      console.warn(`Failed to load flag for language: ${lang}`, error);
+    }
+    return null;
+  };
+
  getLanguageFlag = (lang) => {
+    const FlagComponent = this.state.loadedFlags[lang];
+    
+    if (FlagComponent) {
+      return (
+        <FlagComponent 
+          style={{ 
+            width: '20px', 
+            height: '14px',
+            borderRadius: '2px',
+            border: '1px solid #ddd'
+          }} 
+        />
+      );
+    }
+    
+    // Loading placeholder or fallback
    return (
      <Box
        component="span"
@@ -70,17 +111,35 @@ class LanguageSwitcher extends Component {
          justifyContent: 'center',
          minWidth: '20px',
          height: '14px',
-          fontSize: '14px',
-          lineHeight: 1,
+          backgroundColor: '#f5f5f5',
+          color: '#666',
+          fontSize: '8px',
+          fontWeight: 'bold',
          borderRadius: '2px',
-          overflow: 'hidden'
+          fontFamily: 'monospace',
+          border: '1px solid #ddd'
        }}
      >
-        {LANGUAGE_FLAG_EMOJIS[lang] || this.getLanguageLabel(lang)}
+        {this.getLanguageLabel(lang)}
      </Box>
    );
  };

+  // Load flags when menu opens
+  componentDidUpdate(prevProps, prevState) {
+    const { anchorEl } = this.state;
+    const { languageContext } = this.props;
+    
+    if (anchorEl && !prevState.anchorEl && languageContext) {
+      // Menu just opened, lazy load flags for all languages (not just available ones)
+      languageContext.allLanguages.forEach(lang => {
+        if (!this.state.loadedFlags[lang]) {
+          this.loadFlagComponent(lang);
+        }
+      });
+    }
+  }
+
  getLanguageLabel = (lang) => {
    const labels = {
      'ar': 'EG',
@@ -216,4 +275,4 @@ class LanguageSwitcher extends Component {
  }
 }

-export default withI18n()(LanguageSwitcher); 
+export default withI18n()(LanguageSwitcher); 
--- a/src/components/LoginComponent.js
+++ b/src/components/LoginComponent.js
@@ -21,7 +21,6 @@ import { withRouter } from './withRouter.js';
 import GoogleLoginButton from './GoogleLoginButton.js';
 import CartSyncDialog from './CartSyncDialog.js';
 import { localAndArchiveServer, mergeCarts } from '../utils/cartUtils.js';
-import { isUserLoggedIn } from '../utils/authSession.js';
 import config from '../config.js';
 import { withI18n } from '../i18n/withTranslation.js';
 import {
@@ -54,6 +53,24 @@ const persistSessionAuth = (response) => {
  }
 };

+// Function to check if user is logged in
+export const isUserLoggedIn = () => {
+  const storedUser = sessionStorage.getItem('user');
+  if (storedUser) {
+    try {
+      const parsedUser = JSON.parse(storedUser);
+      console.log('Parsed User:', parsedUser);
+      return { isLoggedIn: true, user: parsedUser, isAdmin: !!parsedUser.admin };
+
+    } catch (error) {
+      console.error('Error parsing user from sessionStorage:', error);
+      sessionStorage.removeItem('user');
+    }
+  }
+  console.log('isUserLoggedIn', false);
+  return { isLoggedIn: false, user: null, isAdmin: false };
+};
+
 // Hilfsfunktion zum Vergleich zweier Cart-Arrays
 function cartsAreIdentical(cartA, cartB) {
  console.log('Vergleiche Carts:', {cartA, cartB});
@@ -792,4 +809,4 @@ export class LoginComponent extends Component {
  }
 }

-export default withRouter(withI18n()(LoginComponent)); 
+export default withRouter(withI18n()(LoginComponent)); 
--- a/src/components/MainPageLayout.js
+++ b/src/components/MainPageLayout.js
@@ -275,15 +275,7 @@ const ContentBox = ({ box, index, pageType, starHovered, setStarHovered, opacity
      >
        <Box sx={{ height: "100%", bgcolor: box.bgcolor, position: "relative", display: "flex", alignItems: "center", justifyContent: "center" }}>
          {opacity === 1 && (
-            <img
-              src={box.image}
-              alt={box.title}
-              loading={pageType === "home" && index === 1 ? "eager" : undefined}
-              fetchPriority={pageType === "home" && index === 1 ? "high" : undefined}
-              width={pageType === "home" && index === 1 ? 768 : undefined}
-              height={pageType === "home" && index === 1 ? 650 : undefined}
-              style={{ maxWidth: "100%", maxHeight: "100%", objectFit: "contain", position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)" }}
-            />
+            <img src={box.image} alt={box.title} style={{ maxWidth: "100%", maxHeight: "100%", objectFit: "contain", position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)" }} />
          )}
          <Box sx={{ position: "absolute", bottom: 0, left: 0, right: 0, bgcolor: "rgba(27, 94, 32, 0.8)", p: 1 }}>
            <Typography sx={{ fontSize: "1.6rem", color: "white", fontFamily: "SwashingtonCP" }}>{box.title}</Typography>
--- a/src/components/header/ButtonGroup.js
+++ b/src/components/header/ButtonGroup.js
@@ -18,8 +18,8 @@ const LoginComponent = lazy(() => import(/* webpackChunkName: "login" */ "../Log

 import CartDropdown from '../CartDropdown.js';
 import LanguageSwitcher from '../LanguageSwitcher.js';
+import { isUserLoggedIn } from '../LoginComponent.js';
 import { withI18n } from '../../i18n/withTranslation.js';
-import { isUserLoggedIn } from '../../utils/authSession.js';

 function getBadgeNumber() {
  let count = 0;
@@ -196,4 +196,4 @@ const ButtonGroupWithRouter = (props) => {
  return <ButtonGroupWithTranslation {...props} navigate={navigate} />;
 };

-export default ButtonGroupWithRouter; 
+export default ButtonGroupWithRouter; 
--- a/src/components/profile/OrderProcessingService.js
+++ b/src/components/profile/OrderProcessingService.js
@@ -1,4 +1,4 @@
-import { isUserLoggedIn } from "../../utils/authSession.js";
+import { isUserLoggedIn } from "../LoginComponent.js";

 class OrderProcessingService {
  constructor(getContext, setState) {
@@ -369,4 +369,4 @@ class OrderProcessingService {
  }
 }

-export default OrderProcessingService; 
+export default OrderProcessingService; 
--- a/src/utils/authSession.js
+++ b/src/utils/authSession.js
@@ -1,16 +0,0 @@
-export const isUserLoggedIn = () => {
-  const storedUser = sessionStorage.getItem('user');
-  if (storedUser) {
-    try {
-      const parsedUser = JSON.parse(storedUser);
-      console.log('Parsed User:', parsedUser);
-      return { isLoggedIn: true, user: parsedUser, isAdmin: !!parsedUser.admin };
-    } catch (error) {
-      console.error('Error parsing user from sessionStorage:', error);
-      sessionStorage.removeItem('user');
-    }
-  }
-
-  console.log('isUserLoggedIn', false);
-  return { isLoggedIn: false, user: null, isAdmin: false };
-};