# switch to starter branch to get new starter code
git checkout starter

# download new starter code
git pull

# switch back to main branch for coding
git checkout main

# merge in new starter code (use default msg)
git merge starter --no-edit

# code and enjoy!

[
  {
    "ImagePath": "img/AirFX.jpg",
    "Manufacturer": "ICE Games",
    "GameName": "Air FX Hockey Table",
    "GameDescription": "High Falutin' Air Hockey. Fancy colors, Fancy paddles",
    "ManufacturerSite": "https://www.icegame.com/"
  },
  {
    "ImagePath": "img/CruisnBlast.jpg",
    "Manufacturer": "Raw Thrills",
    "GameName": "Cruis'n Blast",
    "GameDescription": "The only place where speeding is encouraged ...",
    "ManufacturerSite": "https://rawthrills.com/games/cruisn-blast/"
  },
  {
    "ImagePath": "img/HaloFireTeamRaven.jpg",
    "Manufacturer": "Raw Thrills",
    "GameName": "Halo FireTeam Raven",
    "GameDescription": "Suit up, Spartan! There’s no respawn in the arcade ...",
    "ManufacturerSite": "https://rawthrills.com/games/halo-fireteam-raven/"

  },
  {
    "ImagePath": "img/HungryHippos.jpg",
    "Manufacturer": "Adrenaline Arcade",
    "GameName": "Hungry, Hungry Hippos",
    "GameDescription": "Bigger than the board game! Feed those hungry hippos ...",
    "ManufacturerSite": "https://adrenalinearcade.com/hungry-hungry-hippos-v2/"

  }
  ]

function MyButton() {
  //A function that will be called when clicked 
  //The name is conventional, but arbitrary.
  //The callback will be passed the DOM event as usual
  const handleClick = function(event) {
    console.log("clicky clicky");
  }

  //make a button with an `onClick` attribute!
  //this "registers" the listener and sets the callback
  return <button onClick={handleClick}>Click me!</button>;
}

function MyButton(props) {
  //A function that will be called when clicked 
  //The name is conventional, but arbitrary.
  //The callback will be passed the DOM event as usual
  const handleClick = (event) => {
    console.log("clicky clicky");
  }

  //make a button with an `onClick` attribute!
  //this "registers" the listener and sets the callback
  return <button onClick={handleClick}>Click me!</button>;
}

import React, { useState } from 'react';
import NavBar from './NavBar';
import { FECGames } from './FECGames.jsx';
import { CreateOrEditGame } from './CreateOrEditGame.jsx'

import FECGameList from '../data/FECGameList.json';

function App() {

  const [gameArray, setGameArray] = useState(FECGameList)

  const addGame = (gameobj) => {

    const updateGameArray = [...gameArray, gameobj];
    setGameArray(updateGameArray); //update state and re-render
  }
 
  return (
    <div className='container'>
      <div className="App">
          <NavBar />
          <FECGames FECGameList={gameArray} />
          <CreateOrEditGame addNewGameCallback={addGame}/>
      </div>
    </div>
  );
}

export default App;

	//imports
export function FECGames(props) {

    
    // State variables 
...
	// Event Handlers
...	
    // Other logic (filtering, sorting, etc) to get our data in the correct order and filtered
    
    const filteredFECGames = props.FECGameList.filter(filterBy);

    // Then sort the filtered list of game cards based alphabetical order
    const FilteredSortedFECGames = filteredFECGames.sort((g1, g2) => {
        if (g1.GameName < g2.GameName) { return -1 }
        if (g1.GameName > g2.GameName) { return 1 }
        return 0;
    });


    // This creates the array of filter options for Games in the drop down
    const FECGamesFilterOptions = FilteredSortedFECGames.map((gameObj) => {
        const { GameName } = gameObj;
        const optionElement = <Dropdown.Item as="button" value={GameName} key={GameName} onClick={handleGameFilterClick}>{GameName}</Dropdown.Item>
        return optionElement
    });
    // This pre-appends "All" at the top of the list of filter options for Games
    FECGamesFilterOptions.unshift(<Dropdown.Item as="button" value="All" key="All" onClick={handleGameFilterClick}>All Games </Dropdown.Item>)

...

   ...
    function FECGameList(props) {


            const cardList = FilteredSortedFECGames.map((cardObj) => {
                const cardItem = FECGameCard(cardObj);
                return cardItem;
            })

            return (
                <div className="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 g-4" >
                    {cardList}
                </div>
            )

        }


    return (
        <div>
            <FilterSet />
            <FECGameList />
        </div>

    );

}

   export function FECGames(props) {

    // State variables for the two filters (Games and Manufacturers)
    const [gameFilter, setGameFilter] = useState("All")
    const [manufacturerFilter, setManufacturerFilter] = useState("All")
    const [viewToggleValue, setViewToggleValue] = useState("cards")

    // handlers for when one of the filter options is selected in the filter dropdowns
    const handleGameManufacturerFilterClick = (event) => {
        // console.log("changed the filter", event);
        // console.log("event.target.value :", event.target.value);
        setManufacturerFilter(event.target.value);
    }

    const handleGameFilterClick = (event) => {
        // console.log("changed the Game filter", event);
        // console.log("event.target.value :", event.target.value);
        setGameFilter(event.target.value);
    }

    const handleToggleViewChange = (event) => {
        setViewToggleValue(event.target.value)
        console.log(event.target.value)

    }

function MyInput(props) {
  const [inputValue, setInputValue] = useState('')
  
  const handleChange = (event) => {
    let newValue = event.target.value
    setInputValue(newValue);
  }

  return (
    <div>
      <input type="text" onChange={handleChange} value={inputValue} />
      You typed: {value}
    </div>);
  )
}

   export function CreateOrEditGame(props) {

    const { addNewGameCallback } = props;
    
    const [gameNameTextValue, setGameNameText] = useState("");
...

    const handleGameNameTextChange = (event) => {
        const inputtedGameNameValue = event.target.value;
        setGameNameText(inputtedGameNameValue);
        
    }
...

    const handleSubmit = (event) => {
        event.preventDefault();

        const gameObj = {
            GameName: gameNameTextValue,
            Manufacturer: manufacturerNameTextValue,
            ImagePath: imgPathTextValue,
            ManufacturerSite: manufacturerURLTextValue
        }

        addNewGameCallback(gameObj)
...
}

continued on next slide

  ... 
      return (
        <div className="container">
            
            <Form className="bg-light border border-primary" onSubmit={handleSubmit}>
            <p className="m-1 formtitle">New Game Form</p>
                <Form.Group className="mb-3" controlId="formGameName">
                    <Form.Label className="m-1">Game Name</Form.Label>
                    <Form.Control
                        type="text"
                        placeholder="Enter Game Name"
                        value={gameNameTextValue}
                        onChange={handleGameNameTextChange}
                    />
                    <Form.Text className="text-muted m-1" >
                        Examples: "Twister", "Typhoon", "Space Invaders"
                    </Form.Text>
                </Form.Group>

...
                <Button variant="primary" type="submit">
                    Submit
                </Button>
            </Form>
        </div>
    );
}

    function FECGameList(props) {
        if (viewToggleValue === "cards") {
            const cardList = FilteredSortedFECGames.map((cardObj) => {
                const cardItem = FECGameCard(cardObj);
                return cardItem;
            })

            return (
                <div className="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 g-4" >
                    {cardList}
                </div>
            )
        }

        else {
            const rowList = FilteredSortedFECGames.map((cardObj) => {
                const rowItem = FECGameRow(cardObj);
                return rowItem;
            })
            return (
                <Table striped bordered hover size="sm">
                    <thead>
                        <tr>
                            <th>img</th>
 ...
                        </tr>
                    </thead>
                    <tbody>
                        {rowList}
                    </tbody>
                </Table>
            )
        }
    }