diff --git a/libs/@guardian/react-crossword/src/components/AnagramHelper.tsx b/libs/@guardian/react-crossword/src/components/AnagramHelper.tsx index f1054c1d4..d1c4f3677 100644 --- 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([]); 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 index ca4d3d57a..4f290a51d 100644 --- 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 ( diff --git a/libs/@guardian/react-crossword/src/context/ContextProvider.tsx b/libs/@guardian/react-crossword/src/context/ContextProvider.tsx index 0ec9b553a..1ea08748e 100644 --- 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 ( - + - + ); }; diff --git a/libs/@guardian/react-crossword/src/context/UI.tsx b/libs/@guardian/react-crossword/src/context/ShowAnagramHelper.tsx similarity index 58% rename from libs/@guardian/react-crossword/src/context/UI.tsx rename to libs/@guardian/react-crossword/src/context/ShowAnagramHelper.tsx index 14c8ad49f..6a5bd9f25 100644 --- a/libs/@guardian/react-crossword/src/context/UI.tsx +++ b/libs/@guardian/react-crossword/src/context/ShowAnagramHelper.tsx @@ -13,9 +13,13 @@ type Context = { toggleAnagramHelper: () => void; }; -const UIStateContext = createContext(undefined); +const ShowAnagramHelperContext = createContext(undefined); -export const UIStateProvider = ({ children }: { children: ReactNode }) => { +export const ShowAnagramHelperProvider = ({ + children, +}: { + children: ReactNode; +}) => { const [showAnagramHelper, setShowAnagramHelper] = useState(false); const toggleAnagramHelper = useCallback(() => { @@ -23,20 +27,20 @@ export const UIStateProvider = ({ children }: { children: ReactNode }) => { }, [setShowAnagramHelper]); return ( - {children} - + ); }; -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 index 356d38392..d0821337f 100644 --- 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);