bloominstituteoftechnology · kwnie · Mar 3, 2021 · Mar 3, 2021
diff --git a/README.md b/README.md
@@ -18,7 +18,7 @@ Commit your code regularly and meaningfully. This helps both you and your team l
 
 In this project you'll choose an api to consume. You will build an application from scratch that uses your chosen API and displays the data you are getting from it.
 
-## Instruction
+## Instructions
 
 ### Task 1: Project Set Up
 
@@ -33,24 +33,17 @@ In this project you'll choose an api to consume. You will build an application f
 - [ ] Implement the project on your newly created `<firstName-lastName>` branch, committing changes regularly.
 - [ ] Push commits: git push origin `<firstName-lastName>`.
 
-### Task 2a: Minimum Viable Product
+### Task 2: Minimum Viable Product
 
 - [ ] Build a React Redux app
 - [ ] Fetch data inside an async action creator from an API of your choosing
 - [ ] Add the data from the API to the Redux store
 - [ ] Display the data from the store in a component
 - [ ] _Some_ styling must be applied. It can be basic, but the app must not only use browser default stylings
 
-### Task 2b: Exit Ticket 
-
-Once you begin, you will have 15 minutes to answer the questions [here](https://app.codesignal.com/public-test/LsYPZfuJtZMmcYg9a/fs3PghBeYnx3L8).
-
-The completion of these questions is mandatory for MVP. However, passing the quiz doesn't affect your standing as a Lambda School student whatsoever. This is Lambda School testing itself! Please answer honestly and to the best of your ability without using external references.
-
 ### Task 3: Stretch Problems
 
 Take the app as far as you can go! Styling, redux hooks, another API, an input to fetch data dynamically, etc. Work on it, improve it until the end of the day. If you find yourself finishing with time left to spare, jump on with your TL or fellow student to ask them what feature they think you should build next. Good luck!
 
 ## Submission Format
 * [ ] Submit a Pull-Request to merge `<firstName-lastName>` Branch into `main` (student's  Repo). **Please don't merge your own pull request**
-* [ ] Fill out your module retrospective form [here](https://forms.lambdaschool.com/module-retrospective) with a link to your PR
diff --git a/app/.gitignore b/app/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/app/package-lock.json b/app/package-lock.json
diff --git a/app/package.json b/app/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "app",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.11.9",
+    "@testing-library/react": "^11.2.5",
+    "@testing-library/user-event": "^12.8.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-scripts": "4.0.3",
+    "web-vitals": "^1.1.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/app/public/index.html b/app/public/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <title>Cat Fact</title>
+  </head>
+
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/app/src/App.js b/app/src/App.js
@@ -0,0 +1,10 @@
+import Fact from './components/Fact';
+import React from 'react';
+
+export default function App() {
+    return (
+      <div>
+        <Fact />
+      </div>
+    )
+  };
diff --git a/app/src/actions/Actions.js b/app/src/actions/Actions.js
@@ -0,0 +1,15 @@
+import axios from 'axios'
+
+export const FETCHING_FACT_START = "FETCHING_FACT_START";
+export const FETCHING_FACT_SUCCESS = "FETCHING_FACT_SUCCESS";
+export const FETCHING_FACT_FAILURE = "FETCHING_FACT_FAILURE";
+
+export const getFact = dispatch => {
+    dispatch({ type: FETCHING_FACT_START })
+
+    axios.get('https://cat-fact.herokuapp.com/facts')
+        .then(res => 
+            dispatch({ type: FETCHING_FACT_SUCCESS, payload: res.data }))
+        .catch(err => 
+            dispatch({ type: FETCHING_FACT_FAILURE, payload: err }))
+}
diff --git a/app/src/components/Fact.js b/app/src/components/Fact.js
@@ -0,0 +1,24 @@
+import React, { useEffect } from "react";
+import {  useDispatch, useSelector } from "react-redux";
+import { getFact } from "../actions/Actions";
+
+const Fact = props => {
+
+    const dispatch = useDispatch();
+    const { fact, loading } = useSelector(state => state);
+
+    useEffect(() => {
+        getFact(dispatch);
+    }, [dispatch]);
+
+    loading && <h2>Loading...</h2>
+
+    return (
+        <div>
+        <h2>{fact[0].text}</h2>
+        <button onClick={() => getFact(dispatch)}>Get new fact</button>
+        </div>
+    )
+}
+
+export default Fact;
diff --git a/app/src/index.css b/app/src/index.css
@@ -0,0 +1 @@
+
diff --git a/app/src/index.js b/app/src/index.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import { applyMiddleware, createStore } from 'redux';
+import { Provider } from 'react-redux';
+import logger from "redux-logger";
+import { reducer } from './reducers/Reducer';
+import App from './App';
+
+const store = createStore(reducer, applyMiddleware(logger));
+
+
+ReactDOM.render(
+  <Provider store={store}>
+    <App />
+  </Provider>,
+  document.getElementById('root')
+);
diff --git a/app/src/reducers/Reducer.js b/app/src/reducers/Reducer.js
@@ -0,0 +1,31 @@
+import { FETCHING_FACT_START, FETCHING_FACT_SUCCESS, FETCHING_FACT_FAILURE } from '../actions/Actions';
+
+const initialState = {
+    loading: false,
+    error: "",
+    fact: "",
+};
+
+export const reducer = (state = initialState, action) => {
+    switch(action.type) {
+        case FETCHING_FACT_START:
+            return { 
+                ...state,
+                loading: true
+            };
+        case FETCHING_FACT_SUCCESS:
+            return {
+                ...state,
+                loading: false,
+                fact: action.payload
+            }
+        case FETCHING_FACT_FAILURE:
+            return {
+                ...state,
+                loading: false,
+                error: action.payload
+            }
+        default:
+            return state;
+    }
+}
diff --git a/package-lock.json b/package-lock.json