itaditya

// App.js
function App() {
  const stateAPIStatus = useLoadFoodData();

  return (
    <div className="food-app">
      <header>
        <h1>Ordux</h1>
      </header>
      <Message status={stateAPIStatus} />

itaditya

import React from 'react';
import { Provider } from 'react-redux';
import { render, screen, waitForElementToBeRemoved } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';

import App from './App';
import { createReduxStore } from './redux';

describe('Test App', () => {
  function renderApp(store = createReduxStore(), props = {}) {

itaditya

test('only show veg food when veg filter is applied', () => {
  // arrange
  render(<App {...props} />);

  // act
  fireEvent.click(screen.getByRole('checkbox', { name: /Veg Only/i }));

  // assert
  expect(screen.queryByText(/Sausage McMuffin/i)).toBe(null);
  expect(screen.getByText(/Mushroom Pizza/i)).toBeInTheDocument();

itaditya

function selectorMenu(state) {
  const { diet, menuIdList, menuById } = state;
  const menuId = menuIdList[diet];
  const menuList = [];

  menuId.forEach((id) => {
    menuList.push(menuById[id]);
  });

  return menuList;

itaditya

import { shallowEqual, useSelector } from 'react-redux';

export default function App() {
  const diet = useSelector((state) => state.diet);
  const menuList = useSelector(selectorMenu, shallowEqual);

  useEffect(() => {
    console.log('SERVER_EVENT: menu list changed');
  }, [menuList]);

itaditya

// redux.js

const enableReduxDevTools = window.__REDUX_DEVTOOLS_EXTENSION__?.();

export function createReduxStore() {
  const store = createStore(foodReducer, enableReduxDevTools);
  return store;
}

itaditya

    case ACTIONS.LOAD_MENU: {
      const { menu } = action.payload;

      const menuById = {};
      menu.forEach((item) => {
        menuById[item.id] = item;
      });
      const allMenuId = menu.map((item) => item.id);
      const vegMenuId = menu
        .filter((item) => item.diet === "veg")

itaditya

function foodReducer(state = initialState, action) {
  switch (action.type) {
    case ACTIONS.CHANGE_DIET: {
      const { diet } = state;
      const newDiet = diet === 'veg' ? 'all' : 'veg';

      return {
        ...state,
        diet: newDiet,
        cartByIds: {},

itaditya

const initialState = {
  diet: 'all',
  menuById: {},
  menuIdList: {
    all: [],
    veg: [],
  },
  cartByIds: {},
}

itaditya

export const ACTIONS = {
  CHANGE_DIET: 'CHANGE_DIET',
  LOAD_MENU: 'LOAD_MENU',
  ADD_TO_CART: 'ADD_TO_CART',
  REMOVE_FROM_CART: 'REMOVE_FROM_CART',
};