refactor UI context to ShowAnagramHelper (#1868)

guardian · Dec 20, 2024 · f98e690 · f98e690
1 parent 1170d95
commit f98e690
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 16 deletions.
diff --git a/libs/@guardian/react-crossword/src/components/AnagramHelper.tsx b/libs/@guardian/react-crossword/src/components/AnagramHelper.tsx
@@ -5,8 +5,8 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useCurrentClue } from '../context/CurrentClue';
 import { useData } from '../context/Data';
 import { useProgress } from '../context/Progress';
+import { useShowAnagramHelper } from '../context/ShowAnagramHelper';
 import { useTheme } from '../context/Theme';
-import { useUIState } from '../context/UI';
 import { biasedShuffle } from '../utils/biasedShuffle';
 import { getCellsWithProgressForGroup } from '../utils/getCellsWithProgressForGroup';
 import { Clue } from './Clue';
@@ -21,7 +21,7 @@ export const AnagramHelper = () => {
 	const [solving, setSolving] = useState(false);
 	const [shuffledLetters, setShuffledLetters] = useState<string[]>([]);
 	const theme = useTheme();
-	const { setShowAnagramHelper } = useUIState();
+	const { setShowAnagramHelper } = useShowAnagramHelper();
 	const { entries, cells } = useData();
 	const { currentEntryId } = useCurrentClue();
 	const { progress } = useProgress();

diff --git a/libs/@guardian/react-crossword/src/components/Controls.tsx b/libs/@guardian/react-crossword/src/components/Controls.tsx
@@ -8,8 +8,8 @@ import type { EntryID } from '../@types/Entry';
 import { useCurrentClue } from '../context/CurrentClue';
 import { useData } from '../context/Data';
 import { useProgress } from '../context/Progress';
+import { useShowAnagramHelper } from '../context/ShowAnagramHelper';
 import { useTheme } from '../context/Theme';
-import { useUIState } from '../context/UI';
 import { useValidAnswers } from '../context/ValidAnswers';
 import { useClearUserInput } from '../hooks/useClearUserInput';
 import { useUpdateCell } from '../hooks/useUpdateCell';
@@ -142,7 +142,7 @@ const RevealClue = (props: ButtonProps) => {
 };
 
 const AnagramHelper = (props: ButtonProps) => {
-	const { toggleAnagramHelper } = useUIState();
+	const { toggleAnagramHelper } = useShowAnagramHelper();
 
 	return (
 		<ClueButton onClick={toggleAnagramHelper} {...props}>

diff --git a/libs/@guardian/react-crossword/src/context/ContextProvider.tsx b/libs/@guardian/react-crossword/src/context/ContextProvider.tsx
@@ -26,8 +26,8 @@ import { CurrentCellProvider } from './CurrentCell';
 import { CurrentClueProvider } from './CurrentClue';
 import { DataProvider } from './Data';
 import { ProgressProvider } from './Progress';
+import { ShowAnagramHelperProvider } from './ShowAnagramHelper';
 import { ThemeProvider } from './Theme';
-import { UIStateProvider } from './UI';
 import { ValidAnswersProvider } from './ValidAnswers';
 
 export const ContextProvider = ({
@@ -47,7 +47,7 @@ export const ContextProvider = ({
 
 	return (
 		<ThemeProvider theme={theme}>
-			<UIStateProvider>
+			<ShowAnagramHelperProvider>
 				<DataProvider
 					entries={entries}
 					solutionAvailable={solutionAvailable}
@@ -66,7 +66,7 @@ export const ContextProvider = ({
 						</CurrentCellProvider>
 					</ProgressProvider>
 				</DataProvider>
-			</UIStateProvider>
+			</ShowAnagramHelperProvider>
 		</ThemeProvider>
 	);
 };
diff --git a/...ardian/react-crossword/src/context/UI.tsx → ...ossword/src/context/ShowAnagramHelper.tsx b/...ardian/react-crossword/src/context/UI.tsx → ...ossword/src/context/ShowAnagramHelper.tsx
@@ -13,30 +13,34 @@ type Context = {
 	toggleAnagramHelper: () => void;
 };
 
-const UIStateContext = createContext<Context | undefined>(undefined);
+const ShowAnagramHelperContext = createContext<Context | undefined>(undefined);
 
-export const UIStateProvider = ({ children }: { children: ReactNode }) => {
+export const ShowAnagramHelperProvider = ({
+	children,
+}: {
+	children: ReactNode;
+}) => {
 	const [showAnagramHelper, setShowAnagramHelper] = useState(false);
 
 	const toggleAnagramHelper = useCallback(() => {
 		setShowAnagramHelper((prev) => !prev);
 	}, [setShowAnagramHelper]);
 
 	return (
-		<UIStateContext.Provider
+		<ShowAnagramHelperContext.Provider
 			value={{ showAnagramHelper, setShowAnagramHelper, toggleAnagramHelper }}
 		>
 			{children}
-		</UIStateContext.Provider>
+		</ShowAnagramHelperContext.Provider>
 	);
 };
 
-export const useUIState = () => {
-	const context = useContext(UIStateContext);
+export const useShowAnagramHelper = () => {
+	const context = useContext(ShowAnagramHelperContext);
 
 	if (!context) {
 		throw new Error(
-			'UIStateContext does not exist. Have you used a Crossword subcomponent outside a Crossword component?',
+			'ShowAnagramHelperContext does not exist. Have you used a Crossword subcomponent outside a Crossword component?',
 		);
 	}
 

diff --git a/libs/@guardian/react-crossword/src/layouts/ScreenLayout.tsx b/libs/@guardian/react-crossword/src/layouts/ScreenLayout.tsx
@@ -4,8 +4,8 @@ import { textSans12, textSans14 } from '@guardian/source/foundations';
 import type { ReactNode } from 'react';
 import { memo } from 'react';
 import type { LayoutProps } from '../@types/Layout';
+import { useShowAnagramHelper } from '../context/ShowAnagramHelper';
 import { useTheme } from '../context/Theme';
-import { useUIState } from '../context/UI';
 
 const CluesHeader = memo(({ children }: { children: ReactNode }) => {
 	const theme = useTheme();
@@ -36,7 +36,7 @@ const Layout = ({
 }: LayoutProps) => {
 	const { textColor, clueMinWidth, clueMaxWidth } = useTheme();
 
-	const { showAnagramHelper } = useUIState();
+	const { showAnagramHelper } = useShowAnagramHelper();
 	const theme = useTheme();
 
 	const gridWidth = Math.max(actualGridWidth, 300);