Files
frontend-app-authn/src/progressive-profiling/components/ProgressiveProfilingContext.tsx
Adolfo R. Brandes cb3ad5c53a feat: migrate from Redux to React Query and React Context
Replace Redux + Redux-Saga with React Query (useMutation/useQuery) for
server state and React Context for UI/form state across all modules:
login, registration, forgot-password, reset-password, progressive-
profiling, and common-components.

Port of master commits 0d709d15 and 93bd0f24, adapted for
@openedx/frontend-base:
- getSiteConfig() instead of getConfig()
- useAppConfig() for per-app configuration
- @tanstack/react-query as peerDependency (shell provides QueryClient)
- CurrentAppProvider instead of AppProvider

Also fixes EnvironmentTypes circular dependency in site.config.test.tsx
by using string literal instead of enum import.

Co-Authored-By: Jesus Balderrama <jesus.balderrama.wgu@gmail.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-13 16:36:34 -03:00

81 lines
2.0 KiB
TypeScript

import { createContext, FC, ReactNode, useContext, useMemo, useState, useCallback } from 'react';
import {
DEFAULT_STATE,
} from '../../data/constants';
interface ProgressiveProfilingContextType {
isLoading: boolean,
showError: boolean,
success: boolean,
submitState?: string,
setLoading: (loading: boolean) => void,
setShowError: (showError: boolean) => void,
setSuccess: (success: boolean) => void,
setSubmitState: (state: string) => void,
clearState: () => void,
}
const ProgressiveProfilingContext = createContext<ProgressiveProfilingContextType | undefined>(undefined);
interface ProgressiveProfilingProviderProps {
children: ReactNode,
}
export const ProgressiveProfilingProvider: FC<ProgressiveProfilingProviderProps> = ({ children }) => {
const [isLoading, setIsLoading] = useState(false);
const [showError, setShowError] = useState(false);
const [success, setSuccess] = useState(false);
const [submitState, setSubmitState] = useState<string>(DEFAULT_STATE);
const setLoading = useCallback((loading: boolean) => {
setIsLoading(loading);
if (loading) {
setShowError(false);
setSuccess(false);
}
}, []);
const clearState = useCallback(() => {
setIsLoading(false);
setShowError(false);
setSuccess(false);
}, []);
const value = useMemo(() => ({
isLoading,
showError,
success,
setLoading,
setShowError,
setSuccess,
clearState,
submitState,
setSubmitState,
}), [
isLoading,
showError,
success,
setLoading,
setShowError,
setSuccess,
clearState,
submitState,
setSubmitState,
]);
return (
<ProgressiveProfilingContext.Provider value={value}>
{children}
</ProgressiveProfilingContext.Provider>
);
};
export const useProgressiveProfilingContext = (): ProgressiveProfilingContextType => {
const context = useContext(ProgressiveProfilingContext);
if (context === undefined) {
throw new Error('useProgressiveProfilingContext must be used within a ProgressiveProfilingProvider');
}
return context;
};