mirror of
				https://github.com/hydralauncher/hydra.git
				synced 2025-03-09 15:40:26 +00:00 
			
		
		
		
	fix: improve theme import modal flow and navigation
This commit is contained in:
		
							parent
							
								
									75a44bed3f
								
							
						
					
					
						commit
						0724a40cb7
					
				
					 1 changed files with 18 additions and 3 deletions
				
			
		| 
						 | 
				
			
			@ -4,6 +4,7 @@ import { ThemeActions, ThemeCard, ThemePlaceholder } from "./index";
 | 
			
		|||
import type { Theme } from "@types";
 | 
			
		||||
import { ImportThemeModal } from "./modals/import-theme-modal";
 | 
			
		||||
import { settingsContext } from "@renderer/context";
 | 
			
		||||
import { useNavigate } from "react-router-dom";
 | 
			
		||||
 | 
			
		||||
interface SettingsAppearanceProps {
 | 
			
		||||
  appearance: {
 | 
			
		||||
| 
						 | 
				
			
			@ -24,8 +25,10 @@ export function SettingsAppearance({
 | 
			
		|||
    authorId: string;
 | 
			
		||||
    authorName: string;
 | 
			
		||||
  } | null>(null);
 | 
			
		||||
  const [hasShownModal, setHasShownModal] = useState(false);
 | 
			
		||||
 | 
			
		||||
  const { clearTheme } = useContext(settingsContext);
 | 
			
		||||
  const navigate = useNavigate();
 | 
			
		||||
 | 
			
		||||
  const loadThemes = useCallback(async () => {
 | 
			
		||||
    const themesList = await window.electron.getAllCustomThemes();
 | 
			
		||||
| 
						 | 
				
			
			@ -45,20 +48,32 @@ export function SettingsAppearance({
 | 
			
		|||
  }, [loadThemes]);
 | 
			
		||||
 | 
			
		||||
  useEffect(() => {
 | 
			
		||||
    if (appearance.theme && appearance.authorId && appearance.authorName) {
 | 
			
		||||
    if (appearance.theme && appearance.authorId && appearance.authorName && !hasShownModal) {
 | 
			
		||||
      setIsImportThemeModalVisible(true);
 | 
			
		||||
      setImportTheme({
 | 
			
		||||
        theme: appearance.theme,
 | 
			
		||||
        authorId: appearance.authorId,
 | 
			
		||||
        authorName: appearance.authorName,
 | 
			
		||||
      });
 | 
			
		||||
      setHasShownModal(true);
 | 
			
		||||
 | 
			
		||||
      navigate("/settings", { replace: true });
 | 
			
		||||
      clearTheme();
 | 
			
		||||
    }
 | 
			
		||||
  }, [appearance.theme, appearance.authorId, appearance.authorName]);
 | 
			
		||||
  }, [
 | 
			
		||||
    appearance.theme,
 | 
			
		||||
    appearance.authorId,
 | 
			
		||||
    appearance.authorName,
 | 
			
		||||
    navigate,
 | 
			
		||||
    hasShownModal,
 | 
			
		||||
    clearTheme,
 | 
			
		||||
  ]);
 | 
			
		||||
 | 
			
		||||
  const onThemeImported = useCallback(() => {
 | 
			
		||||
    setIsImportThemeModalVisible(false);
 | 
			
		||||
    setImportTheme(null);
 | 
			
		||||
    loadThemes();
 | 
			
		||||
  }, [clearTheme, loadThemes]);
 | 
			
		||||
  }, [loadThemes]);
 | 
			
		||||
 | 
			
		||||
  return (
 | 
			
		||||
    <div className="settings-appearance">
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue