Update GamePages /* eslint-disable no-unused-vars */
import { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import api from '../api/api';
import {
  fetchNouns,
  fetchTranslation,
  fetchWord,
  selectIsCorrect,
  selectNouns,
  selectScore,
  selectWord,
  submitAnswer,
} from '../slices/wordSlice';

function GamePages() {
  const dispatch = useDispatch();
  const word = useSelector(selectWord);
  const nouns = useSelector(selectNouns);
  const isCorrect = useSelector(selectIsCorrect);
  const score = useSelector(selectScore);
  const [selected, setSelected] = useState('');
  const [translation, setTranslation] = useState('');

  useEffect(() => {
    dispatch(fetchWord());
    dispatch(fetchNouns());
  }, [dispatch]);

  useEffect(() => {
    const fetchTranslationPromise = async () => {
      const response = await dispatch(fetchTranslation());
      setTranslation(response);
    };
    if (word) {
      fetchTranslationPromise();
    }
  }, [dispatch, word]);

  const handleAnswer = () => {
    dispatch(submitAnswer(selected));
    setSelected('');
  };

  return (
    <div className='container mt-5'>
      <div className='row justify-content-center'>
        <div className='col-md-6'>
          <h1>French Gender Learning Game</h1>
          <h2>Score: {score}</h2>
          <div className='card'>
            <div className='card-body'>
              <h3>
                {word && word.word}
                {translation.length > 0 && (
                  <small className='text-muted ml-2'>({translation})</small>
                )}
              </h3>
              <div className='form-check'>
                <input
                  type='radio'
                  id='un-le'
                  name='article-group'
                  value='UN/LE'
                  className='form-check-input'
                  checked={selected === 'UN/LE'}
                  onChange={(e) => setSelected(e.target.value)}
                />
                <label htmlFor='un-le' className='form-check-label'>
                  {nouns.masculine.length > 0 && nouns.masculine[0].article}
                </label>
              </div>
              <div className='form-check'>
                <input
                  type='radio'
                  id='une-la'
                  name='article-group'
                  value='UNE/LA'
                  className='form-check-input'
                  checked={selected === 'UNE/LA'}
                  onChange={(e) => setSelected(e.target.value)}
                />
                <label htmlFor='une-la' className='form-check-label'>
                  {nouns.feminine.length > 0 && nouns.feminine[0].article}
                </label>
              </div>
              <button
                className='btn btn-primary'
                disabled={!selected}
                onClick={handleAnswer}
              >
                Submit
              </button>
              <p className='mt-2'>
                {isCorrect !== null && (isCorrect ? 'Correct!' : 'Wrong!')}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default GamePages;
so that it can map the response fetched by fetchNouns which looks like [
	{
		"id": 1,
		"ending": "age",
		"__entity": "MasculineEnding"
	},
	{
		"id": 2,
		"ending": "aire",
		"__entity": "MasculineEnding"
	},
	{
		"id": 3,
		"ending": "isme",
		"__entity": "MasculineEnding"
	},
	{
		"id": 4,
		"ending": "ment",
		"__entity": "MasculineEnding"
	},
	{
		"id": 5,
		"ending": "oir",
		"__entity": "MasculineEnding"
	},
	{
		"id": 6,
		"ending": "sme",
		"__entity": "MasculineEnding"
	},
	{
		"id": 7,
		"ending": "é",
		"__entity": "MasculineEnding"
	}
] and [
	{
		"id": 1,
		"ending": "ade",
		"__entity": "FeminineEnding"
	},
	{
		"id": 2,
		"ending": "ance",
		"__entity": "FeminineEnding"
	},
	{
		"id": 3,
		"ending": "ence",
		"__entity": "FeminineEnding"
	},
	{
		"id": 4,
		"ending": "ette",
		"__entity": "FeminineEnding"
	},
	{
		"id": 5,
		"ending": "ie",
		"__entity": "FeminineEnding"
	},
	{
		"id": 6,
		"ending": "ine",
		"__entity": "FeminineEnding"
	},
	{
		"id": 7,
		"ending": "ion",
		"__entity": "FeminineEnding"
	},
	{
		"id": 8,
		"ending": "ique",
		"__entity": "FeminineEnding"
	},
	{
		"id": 9,
		"ending": "isse",
		"__entity": "FeminineEnding"
	},
	{
		"id": 10,
		"ending": "ité",
		"__entity": "FeminineEnding"
	},
	{
		"id": 11,
		"ending": "lle",
		"__entity": "FeminineEnding"
	},
	{
		"id": 12,
		"ending": "ure",
		"__entity": "FeminineEnding"
	}
] map over the array and display ending