paigen11

import React from 'react';
import { screen } from '@testing-library/dom';
import { render } from '@testing-library/react';
import { act } from 'react-dom/test-utils';
import App from './App';

describe('Product Browser App', () => {
  it('renders a welcome message', () => {
    act(() => {
      render(<App />);

paigen11

import React, { useContext } from 'react';
import { orderItems } from '../../../../services/orderService';
import CheckoutDrawerContext from '../../../../context/CheckoutDrawerContext';

export const CheckoutSummaryDetails = props => {
  const { summaryDetails, userInfo, items } = props;
  const checkoutDrawer = useContext(CheckoutDrawerContext);

  const placeOrder = async () => {
    const executionResponse = await orderItems(userInfo, items);

paigen11

  const [showDrawer, setShowDrawer] = useState(false);

  const toggleCheckoutDrawer = () => {
    setShowDrawer(!showDrawer);
  };

paigen11

    <CheckoutDrawerContext.Provider value={{ showDrawer, toggleCheckoutDrawer }}>
      <section className="cart-checkout">
        <CartDrawer selectedCartItems={selectedCartItems} />
      </section>
    </CheckoutDrawerContext.Provider>

paigen11

import { createContext } from 'react';

const CheckoutDrawerContext = createContext({
  showDrawer: false,
  toggleCheckoutDrawer: () => {},
});

export default CheckoutDrawerContext;

paigen11

const Sidebar = () => {
  const [expandedLinks, setExpandedLinks] = useState(false);

  const toggleLinks = () => () => {
    setExpandedLinks(!expandedLinks);
  };

  return (
    <>
      <ul className="sidebar-top">

paigen11

const Header = () => {
  return (
    <nav className="navbar-wrapper">
      <Breakpoint medium up>
        <ul className="navbar-links">
          <li className="navbar-link-logo">
            <NavLink to="/">
              <img src={TmdbIcon} alt="logo" />
            </NavLink>
          </li>

paigen11

  .genre-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 1200px;
    grid-gap: 15px;
    justify-items: center;
    margin: auto;
    h3 {
      margin: 200px auto;
    }

paigen11

    return (
      <div className="genres-page">
        <h1>Choose a Genre</h1>
        {(error || loading) && <h3 className="genre-info">{info}</h3>}
        <Breakpoint large up>
          <div className="genre-list">
            {this.renderRedirect()}
            {genreInfo}
          </div>
        </Breakpoint>

paigen11

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { BreakpointProvider } from 'react-socks';
import NowPlaying from './containers/NowPlaying/NowPlaying';
import Dashboard from './containers/Dashboard/Dashboard';
import Upcoming from './containers/Upcoming/Upcoming';
import MovieSearch from './containers/MovieSearch/MovieSearch';
import Genres from './containers/Genres/Genres';
import Header from './containers/Header/Header';
import './App.css';