Codecademy export

Board.js

import React from 'react';
import { CardRow } from './cardRow/CardRow.js';
// Add import statements below
import {useSelector} from 'react-redux';
import {selectBoard} from './boardSlice.js';

export const Board = () => {
  // Add selected data variable and implement below
  const currentBoard = useSelector(selectBoard);

  const numberOfCards = currentBoard.length;
  const columns = 3;
  const rows = Math.floor(numberOfCards / columns);

  const getRowCards = (row) => {
    const rowCards = [];
    for (let j = 0; j < columns; j++) {
      const cardIndex = row * columns + j;
      // Implement selected data below
      rowCards.push(currentBoard[cardIndex]);
    }
    return rowCards;
  };

  let content = [];
  for (let row = 0; row < rows; row++) {
    const rowCards = getRowCards(row);
    content.push(
      <CardRow 
        key={row} 
        cards={rowCards} 
      />
    );
  }
  return <div className="cards-container">{content}</div>;
};

boardSlice.js

const initialState = [
  {id: 0, contents: 'Provider', visible: true, matched: true}, 
  {id: 1, contents: 'Provider', visible: true, matched: true}, 
  {id: 2, contents: 'selector', visible: true, matched: true}, 
  {id: 3, contents: 'selector', visible: true, matched: true}, 
  {id: 4, contents: 'useSelector()', visible: true, matched: true}, 
  {id: 5, contents: 'useSelector()', visible: true, matched: true}, 
  {id: 6, contents: 'useDispatch()', visible: true, matched: true}, 
  {id: 7, contents: 'useDispatch()', visible: true, matched: true}, 
  {id: 8, contents: 'Pure Function', visible: true, matched: true}, 
  {id: 9, contents: 'Pure Function', visible: true, matched: true}, 
  {id: 10, contents: 'react-redux', visible: true, matched: true}, 
  {id: 11, contents: 'react-redux', visible: true, matched: true}, 
];

export const boardReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'board/setBoard':
      let setState = [];
      action.payload.forEach((element, index) => 
        setState.push({id: index, 
                      contents: element, 
                      visible: false, 
                      matched: false})
      );
      return setState;
    case 'board/flipCard':
      let flipState = [...state];
      const cardID = action.payload;
      flipState[cardID] = {...state[cardID], visible:true}
      
      const [index1, index2] = flipState
        .filter(card => card.visible)
        .map(card => card.id);
      if (index2 !== undefined){
        const card1 = flipState[index1];
        const card2 = flipState[index2];
        if (card1.contents === card2.contents) {
          flipState[index1] = {...card1, visible: false, matched: true}
          flipState[index2] = {...card2, visible: false, matched: true}
        }
      } 

      return flipState;
    case 'board/resetCards':
      return state.map(card => ({...card, visible: false}));
    default:
      return state;
  }
}

const wordPairs = [
  'Provider', 'Provider', 
  'selector', 'selector', 
  'useSelector()', 'useSelector()', 
  'useDispatch()', 'useDispatch()',
  'Pure Function', 'Pure Function',
  'react-redux', 'react-redux',
]

const randomWords = () => {
  let words = []
  let newWordPairs = [...wordPairs]
  const reps = newWordPairs.length
  for (let i=0; i<reps; i++) {
    const wordIndex = Math.floor(Math.random()*newWordPairs.length);
    words.push(newWordPairs[wordIndex])
    newWordPairs.splice(wordIndex, 1)
  }

  return words;
} 

// action creators
export const setBoard = () => {
  const words = randomWords()
  return {
    type: 'board/setBoard',
    payload: words
  }
}

export const flipCard = (id) => {
  return {
    type: 'board/flipCard',
    payload: id
  }
}

export const resetCards = (indices) => {
  return {
    type: 'board/resetCards'
  }
}

// Add selector export statments below
export const selectBoard = (state) => {
  return state.board.map(card => ({id:card.id, contents:card.contents}));
}

export const selectVisibleIDs = (state) => {
  return state.board.filter(card => card.visible).map(card => card.id);
}

Card.js

import React from 'react';
// Add import statements below
import {useSelector} from 'react-redux';
import {selectVisibleIDs} from '../../boardSlice.js'


let cardLogo = "https://static-assets.codecademy.com/Courses/Learn-Redux/matching-game/codecademy_logo.png";

export const Card = ({ id, contents }) => {
  // Add selected data and dispatch variables below
  const visibleIDs = useSelector(selectVisibleIDs);
  
  
  // flip card action
  const flipHandler = (id) => {
    // Add action dispatch below
    
  };

  let cardStyle = 'resting'
  let click = () => flipHandler(id);
  
  let cardText = (
    <img src={cardLogo} className="logo-placeholder" alt="Card option" />
  );

  // 1st if statement
  // implement card id array membership check
  if (visibleIDs.includes(id)) {
    cardText = contents;
    click = () => {};
  }

  // 2nd if statement
  // implement card id array membership check
  if (false) {
    cardStyle = 'matched';
  }

  // 3rd if statement
  // implement number of flipped cards check
  if (false) {
    click = () => {};
  }

  return (
    <button onClick={click} className={`card ${cardStyle}`}>
      {cardText}
    </button>
  );
};

CardRow.js

import React from 'react';
import { Card } from './card/Card.js';

export const CardRow = ({ cards }) => {
  const content = cards.map(card => 
    <Card 
      key={card.id} 
      id={card.id} 
      contents={card.contents} 
  />)

  return <>{content}</>;
};

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

import { store } from './app/store.js';
import {Provider} from 'react-redux';


ReactDOM.render(
  // Implement Provider component with store below
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

Score.js

import React from 'react';
// Add import statement below


export const Score = () => {
  // Add selected data variable below
  

  return (
    // implement selected data inside <div>
    <div className="score-container">Matched: 0</div>
  );
};