Merge pull request #307 from summit-webapp/bug-fixes

Added Utility function to handle multilingual data and components list

Author: karan1633

hooks/GeneralHooks/useInitializeStoreWithComponentsList.tsx

@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { ComponentsTypes } from '../../interfaces/meta-data-interface';
+import { componentsListFromReduxStore, createComponentsList } from '../../store/slices/general_slices/components-slice';
+
+const useInitializeStoreWithComponentsList = (componentsListData: ComponentsTypes[]) => {
+  const dispatch = useDispatch();
+  const { componentsList }: any = useSelector(componentsListFromReduxStore);
+
+  useEffect(() => {
+    if (componentsList?.length === 0) {
+      dispatch(createComponentsList(componentsListData));
+    }
+  }, []);
+
+  return {};
+};
+
+export default useInitializeStoreWithComponentsList;

hooks/GeneralHooks/useInitializeStoreWithMultiLingualData.ts

@@ -0,0 +1,34 @@
+import { useEffect, useState } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { multiLanguageDataFromStore, setMultiLingualData } from '../../store/slices/general_slices/multilang-slice';
+import { SelectedFilterLangDataFromStore, SelectedLangData } from '../../store/slices/general_slices/selected-multilanguage-slice';
+
+const useInitializeStoreWithMultiLingualData = (multiLingualData: any) => {
+  const dispatch = useDispatch();
+  const { languageData } = useSelector(multiLanguageDataFromStore);
+  const [selectedLang, setSelectedLang] = useState<any>('en');
+
+  useEffect(() => {
+    dispatch(setMultiLingualData(multiLingualData));
+    // Retrieve the selected language from localStorage on component mount
+    const storedLang = localStorage.getItem('selectedLanguage');
+    if (storedLang) {
+      setSelectedLang(storedLang);
+    } else {
+      // If no language is stored in localStorage, set the default language to English
+      setSelectedLang('en');
+    }
+  }, []);
+
+  useEffect(() => {
+    const params = {
+      multilanguageData: languageData,
+      selectedLanguage: selectedLang,
+    };
+    dispatch(SelectedLangData(params) as any);
+  }, [selectedLang, languageData, dispatch]);
+
+  return {};
+};
+
+export default useInitializeStoreWithMultiLingualData;

hooks/LanguageHook/Multilanguages-hook.ts

@@ -9,6 +9,17 @@ const useMultilangHook = () => {
   const [multiLanguagesData, SetMultiLanguagesData] = useState<any>([]);
   const [selectedLang, setSelectedLang] = useState<any>('en');
 
+  const handleLanguageChange = (lang: any) => {
+    if (lang === 'ar') {
+      document.documentElement.dir = 'rtl';
+    } else {
+      document.documentElement.dir = 'ltr';
+    }
+    setSelectedLang(lang);
+
+    localStorage.setItem('selectedLanguage', lang);
+  };
+
   useEffect(() => {
     // Retrieve the selected language from localStorage on component mount
     const storedLang = localStorage.getItem('selectedLanguage');
@@ -26,17 +37,6 @@ const useMultilangHook = () => {
     }
   }, [MultiLanguageFromStore]);
 
-  const handleLanguageChange = (lang: any) => {
-    if (lang === 'ar') {
-      document.documentElement.dir = 'rtl';
-    } else {
-      document.documentElement.dir = 'ltr';
-    }
-    setSelectedLang(lang);
-
-    localStorage.setItem('selectedLanguage', lang);
-  };
-
   useEffect(() => {
     const params = {
       multilanguageData: MultiLanguageFromStore?.languageData,

hooks/ProductImageGalleryHandler/useImageGallery.ts

@@ -0,0 +1,23 @@
+import { useState } from 'react';
+import { CONSTANTS } from '../../services/config/app-config';
+
+const useImageGallery = ({ slideShowImages }: any) => {
+  const [enlargeImg, setEnlargeImg] = useState<string>(slideShowImages?.[0] || ''); // Track the enlarged image
+  const [activeImgIndex, setActiveImgIndex] = useState<number>(0); // Track the active thumbnail index
+
+  const handleSelectedImage = (imageLink: string, imgIndex: number) => {
+    setEnlargeImg(imageLink);
+    setActiveImgIndex(imgIndex); // Update the active index
+  };
+
+  // Create srcSet for different screen resolutions
+  const generateSrcSet = (image: string) => {
+    return `${CONSTANTS.API_BASE_URL}/${image} 600w,
+            ${CONSTANTS.API_BASE_URL}/${image} 1200w,
+            ${CONSTANTS.API_BASE_URL}/${image} 1800w`;
+  };
+
+  return { enlargeImg, activeImgIndex, handleSelectedImage, generateSrcSet };
+};
+
+export default useImageGallery;

interfaces/components-types.ts

@@ -0,0 +1,11 @@
+export interface ComponentTypes {
+  name: string; // The name of the page section
+  component: string; // The type of component used
+  page_name: string; // The name of the page (e.g., 'home-page')
+  section_name: string; // The section within the page (e.g., 'BannerSection')
+  image: string | null; // The image URL, which can be null if not provided
+}
+
+export interface ComponentsListTypes {
+  componentsList: ComponentTypes[]; // An array of `PageData` objects
+}

interfaces/meta-data-interface.ts

@@ -1,10 +1,22 @@
+export interface ComponentsTypes {
+  name: string; // The name of the page section
+  component: string; // The type of component used
+  page_name: string; // The name of the page (e.g., 'home-page')
+  section_name: string; // The section within the page (e.g., 'BannerSection')
+  image: string | null; // The image URL, which can be null if not provided
+}
+
 export interface PageMetaDataTypes {
   page_name: string;
   meta_title: string;
   robots: string;
   description: string;
 }
-
-export interface MetaDataTypes {
+interface PageData {
   metaData: PageMetaDataTypes;
+  multiLingualListTranslationTextList: any[];
+  componentsList: ComponentsTypes[];
+}
+export interface ServerDataTypes {
+  serverDataForPages: PageData;
 }

interfaces/product-slideshow-images.ts

@@ -0,0 +1,3 @@
+export interface ProductSlideshowImages {
+  slideShowImages: string[];
+}