diff --git a/client/src/templates/Challenges/classic/show.tsx b/client/src/templates/Challenges/classic/show.tsx index e8729155a28..fcdf572616e 100644 --- a/client/src/templates/Challenges/classic/show.tsx +++ b/client/src/templates/Challenges/classic/show.tsx @@ -6,7 +6,6 @@ import { connect } from 'react-redux'; import { HandlerProps } from 'react-reflex'; import { useMediaQuery } from 'react-responsive'; import { bindActionCreators, Dispatch } from 'redux'; -import { createStructuredSelector } from 'reselect'; import store from 'store'; import { editor } from 'monaco-editor'; import type { FitAddon } from 'xterm-addon-fit'; @@ -22,6 +21,7 @@ import { ChallengeNode, CompletedChallenge, ResizeProps, + SavedChallenge, SavedChallengeFiles, Test } from '../../../redux/prop-types'; @@ -72,11 +72,11 @@ import { mergeChallengeFiles } from './saved-challenges'; import './classic.css'; import '../components/test-frame.css'; -const mapStateToProps = createStructuredSelector({ - challengeFiles: challengeFilesSelector, - output: consoleOutputSelector, - isChallengeCompleted: isChallengeCompletedSelector, - savedChallenges: savedChallengesSelector +const mapStateToProps = (state: unknown) => ({ + challengeFiles: challengeFilesSelector(state) as ChallengeFiles, + output: consoleOutputSelector(state) as string[], + isChallengeCompleted: isChallengeCompletedSelector(state) as boolean, + savedChallenges: savedChallengesSelector(state) as SavedChallenge[] }); const mapDispatchToProps = (dispatch: Dispatch) => @@ -120,7 +120,7 @@ interface ShowClassicProps extends Pick { openModal: (modal: string) => void; setEditorFocusability: (canFocus: boolean) => void; setIsAdvancing: (arg: boolean) => void; - savedChallenges: CompletedChallenge[]; + savedChallenges: SavedChallenge[]; } interface ReflexLayout { diff --git a/client/src/templates/Challenges/redux/selectors.js b/client/src/templates/Challenges/redux/selectors.js index 745151ca5ce..586ef43e057 100644 --- a/client/src/templates/Challenges/redux/selectors.js +++ b/client/src/templates/Challenges/redux/selectors.js @@ -20,11 +20,10 @@ export const completedChallengesIdsSelector = createSelector( completedChallengesSelector, completedChallenges => completedChallenges.map(node => node.id) ); -export const isChallengeCompletedSelector = state => { - const completedChallenges = completedChallengesSelector(state); - const { id: currentChallengeId } = challengeMetaSelector(state); - return completedChallenges.some(({ id }) => id === currentChallengeId); -}; +export const isChallengeCompletedSelector = createSelector( + [completedChallengesIdsSelector, challengeMetaSelector], + (ids, meta) => ids.includes(meta.id) +); export const isCodeLockedSelector = state => state[ns].isCodeLocked; export const isCompletionModalOpenSelector = state => state[ns].modal.completion;