Untitled

// TrainingSession.tsx

function TrainingSession() {
  const { deckId } = useParams();

  const {
    flip,
    currentCard,
    currentCardIndex,
    mostDifficultCardsFromDeck,
    hardClicks,
    updatedDifficulties,
    lastCardDone,
  } = useSelector((state) => state.trainingSession);
      
      
  const handleCardClick = () => {
    dispatch(setFlip(!flip));
  };
  
  const handleNextCard = () => {
    if (currentCardIndex < cards.length - 1) {
      dispatch(setCurrentCardIndex(currentCardIndex + 1));
      dispatch(setFlip(false));
    } else {
      dispatch(setLastCardDone(true));
    }
  };
  
  const handleCurrentDifficultyClick = (event) => {
    const newCard = { ...card, currentDifficulty: parseInt(event.target.value, 10) };
    const newCardsTest = cards.map((card) => (card.id === newCard.id ? newCard : card));
    dispatch(setUpdatedDifficulties({
      ...updatedDifficulties,
      [card.id]: newCard.currentDifficulty,
    }));
    handleNextCard();
  };
  
  useEffect(() => {
    dispatch(getAllTrainingCards(deckId));
  }, []);
  
  const handleEndSession = async () => {
    await dispatch(updateCardDifficulties({ deckId, updatedDifficulties }));
    navigate("/");
  };
  
  return (
    <section>
      <h1>Training Session</h1>
  
      <div className={`flip-card ${flip && "flip"}`} onClick={handleCardClick}>
        <div className="flip-card-inner">
          <div className="flip-card-front">
            <p>{currentCard.front}</p>
          </div>
          <div className="flip-card-back">
            <p>{currentCard.back}</p>
          </div>
        </div>
      </div>
  
      {flip && (
        <div>
          <button onClick={() => handleDifficultyClick("easy")}>Easy</button>
          <button onClick={() => handleDifficultyClick("medium")}>
              Medium
          </button>
          <button onClick={() => handleDifficultyClick("hard")}>Hard</button>
        </div>
      )}
  
      {lastCardDone && (
        <button onClick={() => handleEndSession()}>End the session</button>
      )}
    </section>
  );
}
  
const dispatch = useAppDispatch();

// Actions
export const setFlip = createAction('trainingSession/setFlip');
export const setCurrentCard = createAction('trainingSession/setCurrentCard');
export const setCurrentCardIndex = createAction('trainingSession/setCurrentCardIndex');
export const setMostDifficultCardsFromDeck = createAction('trainingSession/setMostDifficultCardsFromDeck');
export const setHardClicks = createAction('trainingSession/setHardClicks');
export const setUpdatedDifficulties = createAction('trainingSession/setUpdatedDifficulties');
export const setLastCardDone = createAction('trainingSession/setLastCardDone');

// Initial state
const initialState = {
  flip: false,
  currentCard: {},
  currentCardIndex: 0,
  mostDifficultCardsFromDeck: [],
  hardClicks: {},
  updatedDifficulties: {},
  lastCardDone: false,
};


// reducer

addCase(setFlip, (state, action) => {
  state.flip = action.payload;
})
  .addCase(setCurrentCard, (state, action) => {
    state.currentCard = action.payload;
  })
  .addCase(setCurrentCardIndex, (state, action) => {
    state.currentCardIndex = action.payload;
  })
  .addCase(setMostDifficultCardsFromDeck, (state, action) => {
    state.mostDifficultCardsFromDeck = action.payload;
  })
  .addCase(setHardClicks, (state, action) => {
    state.hardClicks = action.payload;
  })
  .addCase(setUpdatedDifficulties, (state, action) => {
    state.updatedDifficulties = action.payload;
  })
  .addCase(setLastCardDone, (state, action) => {
    state.lastCardDone = action.payload;
  });