From e00c226b9a9529093a7c080a784f70c5299792ec Mon Sep 17 00:00:00 2001
From: sebseb7 <sebgreenbus@gmail.com>
Date: Wed, 12 Nov 2025 06:01:01 +0100
Subject: [PATCH] feat(i18n): update product filtering on language change

- Enhance Content and ProductFilters components to re-filter products when the language changes or the translation function updates.
- Implement logic in componentDidUpdate to regenerate availability values and filter products accordingly, improving internationalization support.
---
 src/components/Content.js        |  8 ++++++++
 src/components/ProductFilters.js | 12 ++++++++++++
 2 files changed, 20 insertions(+)

diff --git a/src/components/Content.js b/src/components/Content.js
index 07fdda1..d9989e9 100644
--- a/src/components/Content.js
+++ b/src/components/Content.js
@@ -224,6 +224,14 @@ class Content extends Component {
         this.fetchSearchData(this.props.searchParams?.get('q'));
       })
     }
+    
+    // Re-filter products when language changes to update translated filter names
+    const languageChanged = this.props.i18n && prevProps.i18n && this.props.i18n.language !== prevProps.i18n.language;
+    const tFunctionChanged = this.props.t !== prevProps.t;
+    
+    if(languageChanged || tFunctionChanged) {
+      this.filterProducts();
+    }
   }
 
   processData(response) {
diff --git a/src/components/ProductFilters.js b/src/components/ProductFilters.js
index 659be5c..ab10948 100644
--- a/src/components/ProductFilters.js
+++ b/src/components/ProductFilters.js
@@ -47,6 +47,18 @@ class ProductFilters extends Component {
     window.addEventListener('resize', this.adjustPaperHeight);
   }
 
+  componentDidUpdate(prevProps) {
+    // Regenerate availability values when language changes
+    // Check both i18n.language and the t function itself
+    const languageChanged = this.props.i18n && prevProps.i18n && this.props.i18n.language !== prevProps.i18n.language;
+    const tFunctionChanged = this.props.t !== prevProps.t;
+    
+    if(languageChanged || tFunctionChanged) {
+      const availabilityValues = this._getAvailabilityValues(this.props.products);
+      this.setState({availabilityValues});
+    }
+  }
+
   componentWillUnmount() {
     // Remove event listener when component unmounts
     window.removeEventListener('resize', this.adjustPaperHeight);