titaned-frontend-library 1.0.1

package/src/components/common/Header/MainHeader.tsx

@@ -0,0 +1,701 @@
+import React, { useState, useEffect, useRef } from 'react';
+import {
+  Navbar,
+  Nav,
+  NavDropdown,
+  Button,
+  SearchField,
+  Icon,
+  IconButton,
+  Dropdown,
+  IconButtonWithTooltip,
+} from '@openedx/paragon';
+import useIsMobileSize from '../../../hooks/useIsMobileSize';
+import { MainHeaderProps, MeiliSearchResult } from '../../../interfaces/components';
+import { useSidebar } from '../../../hooks/useSidebar';
+import {
+  ExitToApp, HelpCenter, Notifications, Sync, MenuIcon, Search, MoreVert,
+} from '@openedx/paragon/icons';
+import UserMenu from '../UserMenu/UserMenu';
+import Cookies from 'universal-cookie';
+import { createMeiliSearchService } from '../../../services/meiliSearchService';
+import SearchResultItem from '../SearchResultItem';
+import './MainHeader.scss';
+
+const cookies = new Cookies();
+
+const MainHeader: React.FC<MainHeaderProps> = ({
+  logoUrl,
+  menuList,
+  loginSignupButtons,
+  authenticatedUser = null,
+  userMenuItems,
+  menuAlignment,
+  onLanguageChange,
+  getBaseUrl,
+  meiliSearchConfig,
+  headerButtons,
+  languageSelectorList,
+}) => {
+  const isMobile = useIsMobileSize();
+  const { toggleSidebar, setSidebarCollapsed } = useSidebar();
+  const [selectedLanguage, setSelectedLanguage] = useState(() => {
+    // Try to get from cookie first, fallback to localStorage, then default to 'en'
+    return cookies.get('openedx-language-preference') || 'en';
+  });
+  const [showSearchModal, setShowSearchModal] = useState(false);
+  const [showMoreMenu, setShowMoreMenu] = useState(false);
+  const [showNoResults, setShowNoResults] = useState(false);
+  const [searchKeywords, setSearchKeywords] = useState('');
+  const [searchResults, setSearchResults] = useState<MeiliSearchResult[]>([]);
+  const [isSearching, setIsSearching] = useState(false);
+  const [searchError, setSearchError] = useState<string | null>(null);
+  const [totalHits, setTotalHits] = useState(0);
+  const [showSearchResults, setShowSearchResults] = useState(false);
+  const [visibleResultsCount, setVisibleResultsCount] = useState(5);
+  const moreMenuRef = useRef<HTMLDivElement>(null);
+  const searchTimeoutRef = useRef<number | null>(null);
+  const searchService = useRef(meiliSearchConfig ? createMeiliSearchService(meiliSearchConfig) : null);
+
+  console.log('languageSelectorList', languageSelectorList);
+  
+  
+  // Update headers from MeiliSearch client if provided
+  useEffect(() => {
+    if (meiliSearchConfig?.client && searchService.current) {
+      searchService.current.updateHeadersFromClient(meiliSearchConfig.client);
+    }
+  }, [meiliSearchConfig?.client]);
+
+  // Cleanup timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (searchTimeoutRef.current) {
+        clearTimeout(searchTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    document.body.dir = selectedLanguage === 'ar' ? 'rtl' : 'ltr';
+  }, [selectedLanguage]);
+
+  useEffect(() => {
+    if (isMobile) {
+      setSidebarCollapsed(true);
+    }
+  }, [isMobile, setSidebarCollapsed]);
+
+  useEffect(() => {
+    if (!showMoreMenu) return;
+
+    function handleClickOutside(event: MouseEvent) {
+      if (moreMenuRef.current && !moreMenuRef.current.contains(event.target as Node)) {
+        setShowMoreMenu(false);
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [showMoreMenu]);
+
+  const handleLanguageChange = (lang: string) => {
+    setSelectedLanguage(lang);
+    // Update cookie
+    cookies.set('openedx-language-preference', lang, {
+      path: getBaseUrl ? getBaseUrl() : '/',
+      // secure: process.env.NODE_ENV === 'production',
+      // sameSite: 'strict'
+    });
+    // window.location.reload();
+    // Also update localStorage for backward compatibility
+    // localStorage.setItem('selectedLanguage', lang);
+    // Notify parent app if callback is provided
+    if (onLanguageChange) {
+      onLanguageChange();
+    }
+  };
+
+  const alignmentMap: { [key: string]: string } = {
+    left: 'justify-content-start',
+    center: 'justify-content-center',
+    right: 'justify-content-end',
+  };
+
+  const alignmentClass = menuAlignment
+    ? alignmentMap[menuAlignment.toLowerCase()] || 'justify-content-start'
+    : 'justify-content-start';
+
+  const performSearch = async (query: string) => {
+    
+    if (!query.trim() || !meiliSearchConfig || !searchService.current) {
+      setSearchResults([]);
+      setTotalHits(0);
+      setShowNoResults(false);
+      setShowSearchResults(false);
+      return;
+    }
+
+    setIsSearching(true);
+    setSearchError(null);
+    setShowNoResults(false);
+    setVisibleResultsCount(5);
+
+    try {
+      const result = await searchService.current.simpleSearch(query, {
+        limit: 20,
+        offset: 0
+      });
+
+
+      setSearchResults(result.hits);
+      setTotalHits(result.totalHits);
+      setShowNoResults(result.totalHits === 0);
+      setShowSearchResults(true);
+
+    } catch (error) {
+      setSearchError(error instanceof Error ? error.message : 'Search failed');
+      setShowNoResults(true);
+      setSearchResults([]);
+      setTotalHits(0);
+    } finally {
+      setIsSearching(false);
+    }
+  };
+
+  const handleSearch = (value: string) => {
+    setSearchKeywords(value);
+    performSearch(value);
+    
+    // Close search modal on mobile after search
+    if (isMobile && showSearchModal) {
+      setShowSearchModal(false);
+    }
+  };
+
+  const handleSearchChange = (value: string) => {
+    
+    // Update the search keywords immediately
+    setSearchKeywords(value);
+    
+    // Clear no results message when user starts typing
+    if (showNoResults && value.trim() === '') {
+      setShowNoResults(false);
+      setShowSearchResults(false);
+    }
+    
+    // Clear previous timeout
+    if (searchTimeoutRef.current) {
+      clearTimeout(searchTimeoutRef.current);
+    }
+    
+    // Perform search as user types (with debounce) - only if there's content
+    if (value.trim().length > 0) {
+      searchTimeoutRef.current = setTimeout(() => {
+        performSearch(value);
+      }, 500); // Increased to 500ms for better UX
+    } else {
+      // Clear results if input is empty
+      setSearchResults([]);
+      setTotalHits(0);
+      setShowNoResults(false);
+      setShowSearchResults(false);
+    }
+  };
+
+  const handleSearchClear = () => {
+    
+    // Clear timeout if exists
+    if (searchTimeoutRef.current) {
+      clearTimeout(searchTimeoutRef.current);
+      searchTimeoutRef.current = null;
+    }
+    
+    setSearchKeywords('');
+    setSearchResults([]);
+    setTotalHits(0);
+    setShowNoResults(false);
+    setShowSearchResults(false);
+    setSearchError(null);
+    setIsSearching(false);
+  };
+
+  const resetSearchState = () => {
+    setSearchKeywords('');
+    setSearchResults([]);
+    setTotalHits(0);
+    setShowNoResults(false);
+    setShowSearchResults(false);
+    setSearchError(null);
+    setIsSearching(false);
+    setVisibleResultsCount(5);
+    
+    // Clear timeout if exists
+    if (searchTimeoutRef.current) {
+      clearTimeout(searchTimeoutRef.current);
+      searchTimeoutRef.current = null;
+    }
+  };
+
+  const showMoreResults = () => {
+    setVisibleResultsCount(prev => Math.min(prev + 10, searchResults.length));
+  };
+
+  // Helper function to get language name from language code
+  const getLanguageName = (langCode: string) => {
+    if (languageSelectorList && languageSelectorList.length > 0) {
+      const langObj = languageSelectorList.find(item => item[langCode]);
+      if (langObj) {
+        return langObj[langCode];
+      }
+    }
+    
+    // Fallback to default language names
+    const defaultLanguages: Record<string, string> = {
+      'en': 'English',
+      'ar': 'Arabic',
+      'hi': 'Hindi'
+    };
+    
+    return defaultLanguages[langCode] || langCode.toUpperCase();
+  };
+
+  // Helper function to render language options
+  const renderLanguageOptions = () => {
+    console.log('renderLanguageOptions - languageSelectorList:', languageSelectorList);
+    console.log('renderLanguageOptions - length:', languageSelectorList?.length);
+    
+    // Only use custom languageSelectorList if it's provided and has items
+    if (languageSelectorList && languageSelectorList.length > 0) {
+      console.log('Using custom languageSelectorList');
+      return languageSelectorList.map((langObj, index) => {
+        const [langCode, langName] = Object.entries(langObj)[0];
+        return (
+          <Dropdown.Item key={`lang-${langCode}-${index}`} onClick={() => handleLanguageChange(langCode)}>
+            {langName}
+          </Dropdown.Item>
+        );
+      });
+    }
+    
+    // Fallback to default languages ONLY if no languageSelectorList provided
+    console.log('Using fallback languages');
+    return (
+      <>
+        <Dropdown.Item onClick={() => handleLanguageChange('en')}>English</Dropdown.Item>
+        <Dropdown.Item onClick={() => handleLanguageChange('ar')}>Arabic</Dropdown.Item>
+        <Dropdown.Item onClick={() => handleLanguageChange('hi')}>Hindi</Dropdown.Item>
+      </>
+    );
+  };
+
+  return (
+    <Navbar expand="lg" className="navbarContainer py-1">
+      <div className="d-flex align-items-center">
+        <div className="toggle-sidebar-icon">
+          <IconButton
+            src={MenuIcon}
+            iconAs={Icon}
+            alt="Toggle Sidebar"
+            onClick={toggleSidebar}
+            className="ms-2 ml-2"
+            onMouseDown={(e) => e.stopPropagation()}
+          />
+        </div>
+        <Navbar.Brand href="/" className="navbar-brand">
+          <img
+            src={logoUrl}
+            alt="Logo"
+          />
+        </Navbar.Brand>
+      </div>
+
+      {authenticatedUser !== null && (
+        <>
+          {isMobile ? (
+            <div className="d-flex justify-content-between align-items-center ml-auto">
+              <div className="d-flex align-items-center navbar-buttons">
+                {meiliSearchConfig && (
+                  <IconButton
+                    src={Search}
+                    iconAs={Icon}
+                    alt="Search"
+                    onClick={() => setShowSearchModal(true)}
+                  />
+                )}
+                <div className="ml-2 usermenu-dropdown-mobile">
+                  <UserMenu
+                    username={authenticatedUser?.username}
+                    authenticatedUserAvatar={authenticatedUser?.avatar}
+                    isMobile={isMobile}
+                    isAdmin={authenticatedUser?.administrator}
+                    menuItems={userMenuItems}
+                  />
+                </div>
+                <IconButton
+                  src={MoreVert}
+                  iconAs={Icon}
+                  alt="More"
+                  onMouseDown={e => e.stopPropagation()}
+                  onClick={() => setShowMoreMenu(prev => !prev)}
+                />
+                {showMoreMenu && (
+                  <div className="more-menu-dropdown" ref={moreMenuRef}>
+                    <div className="more-menu-icons-row">
+                      {headerButtons?.reSync && (
+                        <div className="icon-curved-square">
+                          <IconButtonWithTooltip src={Sync} iconAs={Icon} alt="Sync" tooltipPlacement="bottom" tooltipContent="Re-Sync" />
+                        </div>
+                      )}
+                      {headerButtons?.contextSwitcher && (
+                        <div className="icon-curved-square">
+                          <IconButtonWithTooltip src={ExitToApp} iconAs={Icon} alt="Sync" tooltipPlacement="bottom" tooltipContent="Switch to User Mode" />
+                        </div>
+                      )}
+                      {headerButtons?.help && (
+                        <div className="icon-curved-square">
+                          <IconButtonWithTooltip src={HelpCenter} iconAs={Icon} alt="Help" tooltipPlacement="bottom" tooltipContent="Help" />
+                        </div>
+                      )}
+                      {headerButtons?.notification && (
+                        <div className="icon-curved-square">
+                          <IconButtonWithTooltip src={Notifications} iconAs={Icon} alt="Notifications" tooltipPlacement="bottom" tooltipContent="Notifications" />
+                        </div>
+                      )}
+                    </div>
+                    {
+                      headerButtons?.translation && (
+                        <Dropdown className="language-dropdown">
+                          <Dropdown.Toggle variant="tertiary" id="language-dropdown">
+                            {getLanguageName(selectedLanguage)}
+                          </Dropdown.Toggle>
+                          <Dropdown.Menu>
+                            {renderLanguageOptions()}
+                          </Dropdown.Menu>
+                        </Dropdown>
+                      )
+                    }
+                    
+                  </div>
+                )}
+              </div>
+            </div>
+          ) : (
+            <>
+              {meiliSearchConfig && (
+                <div className="d-flex align-items-center justify-content-start flex-grow-1 ml-4">
+                  <div style={{ width: '30rem', position: 'relative' }}>
+                  {/* Temporary native input replacement for debugging */}
+                  <div style={{ 
+                    display: 'flex', 
+                    alignItems: 'center', 
+                    border: '2px solid #ccc', 
+                    borderRadius: '25px',
+                    padding: '8px 16px',
+                    background: '#fff',
+                    position: 'relative'
+                  }}>
+                    <input
+                      type="text"
+                      value={searchKeywords}
+                      onChange={(e) => {
+                        handleSearchChange(e.target.value);
+                      }}
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter') {
+                          handleSearch(searchKeywords);
+                        }
+                      }}
+                      placeholder="Search"
+                      style={{
+                        flex: 1,
+                        border: 'none',
+                        outline: 'none',
+                        fontSize: '16px',
+                        background: 'transparent',
+                        padding: '4px'
+                      }}
+                      autoComplete="off"
+                    />
+                    {searchKeywords && (
+                      <button
+                        type="button"
+                        onClick={() => {
+                          handleSearchClear();
+                        }}
+                        style={{
+                          background: 'none',
+                          border: 'none',
+                          cursor: 'pointer',
+                          padding: '4px',
+                          marginRight: '8px'
+                        }}
+                      >
+                        ✕
+                      </button>
+                    )}
+                  </div>
+                  {isSearching && (
+                    <div className="search-loading-spinner-container">
+                      <div className="search-loading-spinner"></div>
+                      <span>Searching...</span>
+                    </div>
+                  )}
+                  {showNoResults && !isSearching && (
+                    <div className="no-results-message-desktop">
+                      <p>We didn't find anything matching your search</p>
+                    </div>
+                  )}
+                  {searchError && (
+                    <div className="search-error-message-desktop">
+                      <p>Search error: {searchError}</p>
+                    </div>
+                  )}
+                  {showSearchResults && searchResults.length > 0 && (
+                    <div className="search-results-dropdown">
+                      <div className="search-results-header">
+                        <span>{totalHits} result{totalHits !== 1 ? 's' : ''} found</span>
+                      </div>
+                      <div className="search-results-list">
+                        {searchResults.slice(0, visibleResultsCount).map((result, index) => (
+                          <SearchResultItem
+                            key={result.id || index}
+                            result={result}
+                            onNavigate={(url) => {
+                              resetSearchState(); // Reset search state after navigation
+                              window.location.href = url;
+                            }}
+                            baseUrl={getBaseUrl ? getBaseUrl() : undefined}
+                          />
+                        ))}
+                        {visibleResultsCount < searchResults.length && (
+                          <div className="search-results-more">
+                            <button 
+                              onClick={showMoreResults}
+                              style={{
+                                background: 'none',
+                                border: 'none',
+                                color: '#007bff',
+                                cursor: 'pointer',
+                                padding: '8px 16px',
+                                width: '100%',
+                                textAlign: 'center',
+                                fontSize: '14px'
+                              }}
+                            >
+                              Show {Math.min(10, searchResults.length - visibleResultsCount)} more results
+                            </button>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  )}
+                  </div>
+                </div>
+              )}
+              <div className="d-flex align-items-center gap-2 ms-auto order-lg-3">
+                {headerButtons?.reSync && (
+                  <div className="icon-curved-square">
+                    <IconButtonWithTooltip src={Sync} iconAs={Icon} alt="Sync" tooltipPlacement="bottom" tooltipContent="Re-Sync" />
+                  </div>
+                )}
+                {headerButtons?.contextSwitcher && (
+                  <div className="icon-curved-square">
+                    <IconButtonWithTooltip src={ExitToApp} iconAs={Icon} alt="Sync" tooltipPlacement="bottom" tooltipContent="Switch to User Mode" />
+                  </div>
+                )}
+                {headerButtons?.help && (
+                  <div className="icon-curved-square">
+                    <IconButtonWithTooltip src={HelpCenter} iconAs={Icon} alt="Help" tooltipPlacement="bottom" tooltipContent="Help" />
+                  </div>
+                )}
+                {headerButtons?.notification && (
+                  <div className="icon-curved-square">
+                    <IconButtonWithTooltip src={Notifications} iconAs={Icon} alt="Notifications" tooltipPlacement="bottom" tooltipContent="Notifications" />
+                  </div>
+                )}
+                  {
+                    headerButtons?.translation && (
+                      <Dropdown className="language-dropdown">
+                        <Dropdown.Toggle variant="tertiary" id="language-dropdown">
+                          {getLanguageName(selectedLanguage)}
+                        </Dropdown.Toggle>
+                        <Dropdown.Menu>
+                          {renderLanguageOptions()}
+                        </Dropdown.Menu>
+                      </Dropdown>
+                    )
+                  }
+                <div className="usermenu-dropdown">
+                  <UserMenu
+                    username={authenticatedUser?.username}
+                    authenticatedUserAvatar={authenticatedUser?.avatar}
+                    isMobile={isMobile}
+                    isAdmin={authenticatedUser?.administrator}
+                    menuItems={userMenuItems}
+                  />
+                </div>
+              </div>
+            </>
+          )}
+        </>
+      )}
+
+      {authenticatedUser === null && (
+        <>
+          <Navbar.Toggle aria-controls="main-navbar-nav" />
+          <div className="d-flex align-items-center gap-2 ms-auto order-lg-3">
+            {loginSignupButtons && (
+              <>
+                <Button variant="primary">Log In</Button>
+                <Button variant="outline-primary">Sign Up</Button>
+              </>
+            )}
+          </div>
+        </>
+      )}
+
+      <Navbar.Collapse id="main-navbar-nav" className="justify-content-between">
+        <Nav className={`nav-gap gap-3 flex-grow-1 ${alignmentClass}`}>
+          {authenticatedUser === null
+            && menuList.map((menu) => (menu.subMenu ? (
+              <NavDropdown title={menu.label} key={`menu-${menu.label}`} id={`nav-dropdown-${menu.label}`}>
+                {menu.subMenu.map((sub) => (
+                  <NavDropdown.Item key={`sub-${sub.label}`} onClick={() => console.log('Selected submenu:', sub.label)}>
+                    {sub.label}
+                  </NavDropdown.Item>
+                ))}
+              </NavDropdown>
+            ) : (
+              <Nav.Link key={`menu-${menu.label}`} as="span" className="text-uppercase fw-semibold">
+                {menu.label}
+              </Nav.Link>
+            )))}
+        </Nav>
+      </Navbar.Collapse>
+
+      {/* Fixed search bar overlay */}
+      {meiliSearchConfig && showSearchModal && (
+        <div className="fixed-search-bar">
+          <div className="fixed-search-bar-inner">
+            {/* Temporary native input replacement for mobile debugging */}
+            <div style={{ 
+              display: 'flex', 
+              alignItems: 'center', 
+              border: '2px solid #ccc', 
+              borderRadius: '25px',
+              padding: '12px 16px',
+              background: '#fff',
+              position: 'relative',
+              width: '100%'
+            }}>
+              <input
+                type="text"
+                value={searchKeywords}
+                onChange={(e) => {
+                  handleSearchChange(e.target.value);
+                }}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') {
+                    handleSearch(searchKeywords);
+                  }
+                }}
+                placeholder="Search"
+                style={{
+                  flex: 1,
+                  border: 'none',
+                  outline: 'none',
+                  fontSize: '18px',
+                  background: 'transparent',
+                  padding: '4px'
+                }}
+                autoComplete="off"
+                autoFocus
+              />
+              {searchKeywords && (
+                <button
+                  type="button"
+                  onClick={() => {
+                    handleSearchClear();
+                  }}
+                  style={{
+                    background: 'none',
+                    border: 'none',
+                    cursor: 'pointer',
+                    padding: '4px',
+                    marginRight: '8px',
+                    fontSize: '18px'
+                  }}
+                >
+                  ✕
+                </button>
+              )}
+            </div>
+            <button className="close-search-bar" type="button" onClick={() => setShowSearchModal(false)} aria-label="Close Search">
+              &times;
+            </button>
+          </div>
+          {isSearching && (
+            <div className="search-loading-spinner-container">
+              <div className="search-loading-spinner"></div>
+              <span>Searching...</span>
+            </div>
+          )}
+          {showNoResults && !isSearching && (
+            <div className="no-results-message">
+              <p>We didn't find anything matching your search</p>
+            </div>
+          )}
+          {searchError && (
+            <div className="search-error-message">
+              <p>Search error: {searchError}</p>
+            </div>
+          )}
+          {showSearchResults && searchResults.length > 0 && (
+            <div className="search-results-mobile">
+              <div className="search-results-header">
+                <span>{totalHits} result{totalHits !== 1 ? 's' : ''} found</span>
+              </div>
+              <div className="search-results-list">
+                {searchResults.slice(0, visibleResultsCount).map((result, index) => (
+                  <SearchResultItem
+                    key={result.id || index}
+                    result={result}
+                    onNavigate={(url) => {
+                      resetSearchState(); // Reset search state after navigation
+                      window.location.href = url;
+                    }}
+                    baseUrl={getBaseUrl ? getBaseUrl() : undefined}
+                  />
+                ))}
+                {visibleResultsCount < searchResults.length && (
+                  <div className="search-results-more">
+                    <button 
+                      onClick={showMoreResults}
+                      style={{
+                        background: 'none',
+                        border: 'none',
+                        color: '#007bff',
+                        cursor: 'pointer',
+                        padding: '12px 16px',
+                        width: '100%',
+                        textAlign: 'center',
+                        fontSize: '16px'
+                      }}
+                    >
+                      Show {Math.min(10, searchResults.length - visibleResultsCount)} more results
+                    </button>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </Navbar>
+  );
+};
+
+export default MainHeader;