Add files via upload

.gitignore

@@ -1,80 +1,23 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
-# TypeScript v1 declaration files
-typings/
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
 
-# Optional npm cache directory
-.npm
+# testing
+/coverage
 
-# Optional eslint cache
-.eslintcache
+# production
+/build
 
-# Optional REPL history
-.node_repl_history
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
 
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env
-.env.test
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-
-# next.js build output
-.next
-
-# nuxt.js build output
-.nuxt
-
-# vuepress build output
-.vuepress/dist
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

App.css

@@ -0,0 +1,46 @@
+.App {
+  text-align: center;
+  margin: 125px auto;
+  width: 500px;
+  height: 500px;
+  background: white;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+body {
+  background: black;
+}

App.js

@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+import Display from './components/Display.js'
+import Dashboard from './components/Dashboard.js'
+import './App.css';
+
+export const addStrike = currentStrikes => {
+  return currentStrikes + 1;
+}
+
+export const addBall = currentBalls => {
+  return currentBalls + 1;
+}
+
+function App() {
+  const [ strikes, setStrikes ] = useState(0);
+  const [ balls, setBalls ] = useState(0);
+
+  const handleStrike = () => {
+    if(strikes < 2)
+      setStrikes(addStrike(strikes));
+    else
+      setStrikes(0);
+  };
+
+  const handleFoul= () => {
+    if(strikes < 2)
+      setStrikes(strikes + 1);
+  };
+
+  const handleBall = () => {
+    if(balls < 3)
+      setBalls(addBall(balls));
+    else
+      setBalls(0);
+  };
+
+  const handleHit = () => {
+      setBalls(0);
+      setStrikes(0);
+  };
+
+
+  return (
+    <div className="App">
+      <Display strikes={strikes} balls={balls}/>
+      <Dashboard handleStrike={handleStrike} handleFoul={handleFoul} handleBall={handleBall} handleHit={handleHit}/>
+    </div>
+  );
+}
+
+export default App;

App.test.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { addStrike, addBall } from './App';
+import App from './App';
+
+test('renders learn react link', () => {
+  const { getByText } = render(<App />);
+  const string = getByText(/Strikes/i);
+  expect(string).toBeInTheDocument();
+});
+
+test('handleStrike (one)', () => {
+  let strikes = 1;
+  let expected = 2;
+
+  let actual = addStrike(strikes);
+
+  expect(actual).toBe(expected);
+
+});
+
+test('handleStrike (two)', () => {
+  let strikes = 2;
+  let expected = 3;
+
+  let actual = addStrike(strikes);
+
+  expect(actual).toBe(expected);
+
+});
+
+test('handleBall (two)', () => {
+  let balls = 3;
+  let expected = 4;
+
+  let actual = addBall(balls);
+
+  expect(actual).toBe(expected);
+
+});

Dashboard.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+const Dashboard = (props) => {
+
+    return (
+        <div className="Dashboard">
+            <button onClick={() => props.handleStrike()}>strike</button>
+            <button onClick={() => props.handleBall()}>ball</button>
+            <button onClick={() => props.handleFoul()} >foul</button>
+            <button onClick={() => props.handleHit()}>hit</button>
+        </div> 
+    );
+};
+
+export default Dashboard;

Display.js

@@ -0,0 +1,19 @@
+import React from 'react';
+
+const Display = (props) => {
+
+    return (
+        <div className="Display">
+            <div className="Balls">
+                <h2>Balls</h2>
+                <p>{props.balls}</p>
+            </div>
+            <div className="Strikes">
+                <h2>Strikes</h2>
+                <p>{props.strikes}</p>
+            </div>
+        </div>
+    );
+};
+
+export default Display;

README.md

@@ -1,79 +1,68 @@
-# Testing II
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 
-In this project, you will demonstrate proficiency by writing unit tests and production code to satisfy the _Minimum Viable Product_ described below.
+## Available Scripts
 
-Some of the topics covered were:
+In the project directory, you can run:
 
-- introduction to testing a React application.
-- using the `react-testing-library` testing framework.
-- writing unit tests for React components.
+### `npm start`
 
-## Instructions
+Runs the app in the development mode.<br />
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
 
-**Read these requirements carefully. Understand exactly what is expected _before_ starting.**
+The page will reload if you make edits.<br />
+You will also see any lint errors in the console.
 
-You are allowed, and encouraged, to collaborate with your peers while working on this assignment. Remember to follow the _twenty-minute rule_ and post questions to your cohort's help channel before seeking support from your PM and Instructor.
+### `npm test`
 
-## Commits
+Launches the test runner in the interactive watch mode.<br />
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
 
-Please push your code often and use descriptive commit messages, this helps you and your project manager.
+### `npm run build`
 
-## Project Description
+Builds the app for production to the `build` folder.<br />
+It correctly bundles React in production mode and optimizes the build for the best performance.
 
-In this project, you will **write unit tests and the implementation code** for a React application for _Baseball Stadium_ personnel. The application helps them enter information about the game and have that information shown in the _Score Board Display_ for fans to see.
+The build is minified and the filenames include the hashes.<br />
+Your app is ready to be deployed!
 
-The requirements are listed under the _Minimum Viable Product_ section below.
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
 
-## Project Set Up
+### `npm run eject`
 
-Follow these steps to setup your git _fork_ and _branch_.
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
 
-- [ ] Fork this repository.
-- [ ] Use GitHub's website to add your project manager as collaborator on **your fork**.
-- [ ] **Clone your forked version** of the repository (**Not Lambda's**!).
-- [ ] Create a new branch: `git checkout -b <firstName-lastName>`.
-- [ ] Commit changes to your `<firstName-lastName>` branch.
-- [ ] Push often to your branch: `git push origin <firstName-lastName>`.
+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
 
-Follow these steps for completing your project.
+Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
 
-- [ ] Submit a Pull-Request to merge the `<firstName-lastName>` branch into the master branch on your fork. **Please don't merge your own pull request**
-- [ ] Use GitHub's website to add your project manager as a reviewer on the pull-request.
-- [ ] Your project manager will count the project as complete by merging the branch back into the master branch of your forked repository.
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
 
-## Minimum Viable Product
+## Learn More
 
-After a set of interviews with the potential users of the solution, we gathered the following information about the desired functionality. Not all the information provided by our clients is relevant to the design of the solution, but it's included to help understand the requirements.
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
 
-Your job is to design and build a React application that includes at least two components: `Display` and `Dashboard`. **For the MVP you only need to record information about a player's _"at bat"_**.
+To learn React, check out the [React documentation](https://reactjs.org/).
 
-The specifications are listed below.
+### Code Splitting
 
-### Count Rules
+This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
 
-- balls and strikes reset to 0 when a player reaches 3 strikes or 4 balls.
-- balls and strikes reset to 0 when a `hit` is recorded.
-- a `foul` increases strikes up to 2. With no strikes, a foul makes it 1 strike. With 1 strike, a foul makes it 2 strikes. With two strikes a foul has no effect, count stays at 2 strikes.
+### Analyzing the Bundle Size
 
-### Display
+This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
 
-- display the count of `balls` and `strikes` for the at-bat.
-- should be updated when the user records activity on the `Dashboard` component.
+### Making a Progressive Web App
 
-### Dashboard
+This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
 
-- provide a button that the person in charge can press every time there is a `strike`, `ball`, `foul` or `hit`.
-- there is **NO** need to specify the type of hit (single, double, etc).
-- changes recorded on this component should update the information shown by the `Display` component.
+### Advanced Configuration
 
-Feel free add other components and organize and name your components any way you want to satisfy the requirements. **Make it up and make it happen developer!**.
+This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
 
-## Stretch Problem
+### Deployment
 
-This section is **optional** and not counted towards MVP. Start working on it after you're done with the main assignment.
+This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
 
-- Expand the solution to keep track of all the activity of a single inning. Include the number of outs and track them.
-- Expand the solution to keep track of the number of runs and errors in the inning.
-- Expand the solution to keep track of which bases are occupied and to record hits, doubles, triples and home runs.
-- Expand the solution to keep track of all activity across all innings. Display the current inning.
-- Work on [this repository for extra practice testing a legacy React application](https://github.com/LambdaSchool/React-Testing).
+### `npm run build` fails to minify
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify