airscripts · airscripts · Jan 26, 2023 · Jan 26, 2023 · Feb 20, 2019 · Feb 20, 2019
diff --git a/curriculum/front-end-development-libraries/random-quote-machine/.gitignore b/curriculum/front-end-development-libraries/random-quote-machine/.gitignore
@@ -0,0 +1,13 @@
+/.pnp
+/build
+.pnp.js
+/coverage
+.DS_Store
+.env.local
+/node_modules
+npm-debug.log*
+.env.test.local
+yarn-debug.log*
+yarn-error.log*
+.env.production.local
+.env.development.local
diff --git a/curriculum/front-end-development-libraries/random-quote-machine/package-lock.json b/curriculum/front-end-development-libraries/random-quote-machine/package-lock.json
diff --git a/curriculum/front-end-development-libraries/random-quote-machine/package.json b/curriculum/front-end-development-libraries/random-quote-machine/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "random-quote-machine",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "bootstrap": "^4.3.1",
+    "bootstrap-social": "^5.1.1",
+    "font-awesome": "^4.7.0",
+    "jquery": "^3.3.1",
+    "popper.js": "^1.14.7",
+    "react": "^16.8.2",
+    "react-dom": "^16.8.2",
+    "react-pose": "^4.0.7",
+    "react-redux": "^6.0.1",
+    "react-scripts": "2.1.5",
+    "redux": "^4.0.1",
+    "redux-logger": "^3.0.6",
+    "redux-thunk": "^2.3.0",
+    "typescript": "^3.3.3333"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/curriculum/front-end-development-libraries/random-quote-machine/public/favicon.ico b/curriculum/front-end-development-libraries/random-quote-machine/public/favicon.ico
diff --git a/curriculum/front-end-development-libraries/random-quote-machine/public/index.html b/curriculum/front-end-development-libraries/random-quote-machine/public/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+
+  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+  <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
+
+  <title>Random Quote Machine</title>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+</body>
+
+</html>
diff --git a/curriculum/front-end-development-libraries/random-quote-machine/src/App.css b/curriculum/front-end-development-libraries/random-quote-machine/src/App.css
@@ -0,0 +1,43 @@
+.quote {
+  display: flex;
+  color: #282c34;
+  min-height: 100vh;
+  text-align: center;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  font-family: 'Quicksand';
+  background-color: #282c34;
+
+}
+
+@keyframes fadein {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+
+.button-share-new {
+  display: flex;
+  justify-content: center;
+}
+
+#tweet-quote {
+  font-size: 18px;
+  margin-left: 5px;
+}
+
+#new-quote {
+  font-size: 12px;
+}
+
+#quote-box {
+  border-radius: 3px;
+  background-color: white;
+  padding: 40px 50px 40px 50px;
+  box-shadow: 0px 0px 5px 0px #282c34;
+}
+
+#author {
+  font-size: 14px;
+}
diff --git a/curriculum/front-end-development-libraries/random-quote-machine/src/App.js b/curriculum/front-end-development-libraries/random-quote-machine/src/App.js
@@ -0,0 +1,21 @@
+import { Provider } from 'react-redux';
+import React, { Component } from 'react';
+
+import Quotes from './components/RandomQuote';
+import { ConfigureStore } from './redux/store';
+
+import './App.css';
+
+const store = ConfigureStore();
+
+class App extends Component {
+  render() {
+    return (
+      <Provider store={store}>
+        <Quotes />
+      </Provider>
+    );
+  }
+}
+
+export default App;
diff --git a/...culum/front-end-development-libraries/random-quote-machine/src/components/RandomQuote.jsx b/...culum/front-end-development-libraries/random-quote-machine/src/components/RandomQuote.jsx
@@ -0,0 +1,109 @@
+import posed from 'react-pose';
+import { connect } from 'react-redux';
+import React, { Component } from 'react';
+
+import { generateRandomQuote } from '../redux/actions';
+
+import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
+import '../../node_modules/font-awesome/css/font-awesome.min.css';
+import '../App.css';
+
+const mapStateToProps = state => {
+  return {
+    quotes: state.quotes,
+  };
+};
+
+const mapDispatchToProps = dispatch => ({
+  generateRandomQuote: () => { dispatch(generateRandomQuote()) },
+});
+
+const Box = posed.div({
+  hidden: { opacity: 0 },
+  visible: { opacity: 1 },
+});
+
+class Quotes extends Component {
+  constructor(props) {
+    super(props);
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  state = { isVisible: false }
+
+  componentDidMount() {
+    this.props.generateRandomQuote();
+    this.setState({ isVisible: !this.state.isVisible });
+  }
+
+  async handleClick() {
+    await new Promise((resolve) => {
+      setTimeout(() => {
+        this.setState({ isVisible: !this.state.isVisible });
+        resolve();
+      }, 500)
+    })
+
+    setTimeout(() => {
+      this.props.generateRandomQuote();
+      this.setState({ isVisible: !this.state.isVisible });
+    }, 500)
+
+  }
+
+  render() {
+    let environmentColorsList = [
+      "#16a085",
+      "#27ae60",
+      "#2c3e50",
+      "#f39c12",
+      "#e74c3c",
+      "#9b59b6",
+      "#FB6964",
+      "#342224",
+      "#472E32",
+      "#BDBB99",
+      "#77B1A9",
+      "#73A857"
+    ];
+
+    let randomNumber = Math.floor(Math.random() * (environmentColorsList.length - 0) + 0);
+    let hrefTweetForTweeter = `https://twitter.com/intent/tweet?text=${this.props.quotes.quote}`;
+    const { isVisible } = this.state;
+
+    return (
+      <Box
+        className="quote"
+        pose={isVisible ? 'visible' : 'hidden'}
+        style={{ backgroundColor: environmentColorsList[randomNumber] }}
+      >
+        <div id="quote-box">
+          <h4 id="text">{this.props.quotes.quote}</h4>
+          <p id="author">{this.props.quotes.author}</p>
+
+          <div className="button-share-new">
+            <button
+              id="new-quote"
+              className="btn btn-dark"
+              onClick={this.handleClick}
+              style={{ backgroundColor: environmentColorsList[randomNumber] }}
+            >
+              New Quote
+            </button>
+
+            <a id="tweet-quote" href={hrefTweetForTweeter}>
+              <button
+                className="fa fa-twitter btn btn-dark"
+                style={{ backgroundColor: environmentColorsList[randomNumber] }}
+              ></button>
+            </a>
+          </div>
+        </div>
+
+        <p style={{ color: "#ffffff", padding: 10 }}>by Anonymous</p>
+      </Box>
+    );
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Quotes);
diff --git a/curriculum/front-end-development-libraries/random-quote-machine/src/index.css b/curriculum/front-end-development-libraries/random-quote-machine/src/index.css
@@ -0,0 +1,30 @@
+body {
+  margin: 0;
+  padding: 0;
+
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    "Roboto",
+    "Oxygen",
+    "Ubuntu",
+    "Cantarell",
+    "Fira Sans",
+    "Droid Sans",
+    "Helvetica Neue",
+    sans-serif;
+
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+code {
+  font-family:
+    source-code-pro,
+    Menlo,
+    Monaco,
+    Consolas,
+    "Courier New",
+    monospace;
+}
diff --git a/curriculum/front-end-development-libraries/random-quote-machine/src/index.js b/curriculum/front-end-development-libraries/random-quote-machine/src/index.js
@@ -0,0 +1,7 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import './index.css';
+import App from './App';
+
+ReactDOM.render(<App />, document.getElementById('root'));
diff --git a/curriculum/front-end-development-libraries/random-quote-machine/src/logo.svg b/curriculum/front-end-development-libraries/random-quote-machine/src/logo.svg
diff --git a/curriculum/front-end-development-libraries/random-quote-machine/src/redux/actions.js b/curriculum/front-end-development-libraries/random-quote-machine/src/redux/actions.js
@@ -0,0 +1,38 @@
+import * as ActionTypes from "./types";
+
+const api = "https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json";
+
+export const generateRequest = () => ({
+  type: ActionTypes.GENERATE_REQUEST,
+});
+
+export const generateSuccess = (payload) => ({
+  type: ActionTypes.GENERATE_SUCCESS,
+  payload,
+});
+
+export const generateError = () => ({
+  type: ActionTypes.GENERATE_ERROR,
+});
+
+export function generateRandomQuote() {
+  return (dispatch) => {
+    dispatch(generateRequest());
+
+    return generateRandomQuoteAfterClick().then((response) => {
+      if (response.status === 200) {
+        return response.json()
+          .then((data) => {
+            dispatch(generateSuccess(data));
+          })
+      } else {
+        dispatch(generateError());
+      }
+    })
+  }
+}
+
+export function generateRandomQuoteAfterClick() {
+  return fetch(api)
+    .then(response => response);
+}
diff --git a/curriculum/front-end-development-libraries/random-quote-machine/src/redux/reducer.js b/curriculum/front-end-development-libraries/random-quote-machine/src/redux/reducer.js
@@ -0,0 +1,23 @@
+import * as ActionTypes from './types';
+
+export const randomQuotes = (
+  state = { errMess: null, quotes: [] },
+  action
+) => {
+  switch (action.type) {
+    case ActionTypes.GENERATE_REQUEST:
+      return state;
+
+    case ActionTypes.GENERATE_SUCCESS:
+      let randomNumber = Math.floor(Math.random() * (action.payload.quotes.length - 0) + 0);
+
+      return {
+        ...state,
+        errMess: null,
+        quotes: action.payload.quotes[randomNumber]
+      };
+
+    default:
+      return state;
+  }
+};
diff --git a/curriculum/front-end-development-libraries/random-quote-machine/src/redux/store.js b/curriculum/front-end-development-libraries/random-quote-machine/src/redux/store.js
@@ -0,0 +1,15 @@
+import thunk from 'redux-thunk';
+import logger from 'redux-logger';
+import { createStore, applyMiddleware } from 'redux';
+
+import { randomQuotes } from './reducer';
+
+export const ConfigureStore = () => {
+  const store = createStore(
+    randomQuotes,
+    applyMiddleware(thunk, logger)
+  );
+
+  return store;
+}
+
diff --git a/curriculum/front-end-development-libraries/random-quote-machine/src/redux/types.js b/curriculum/front-end-development-libraries/random-quote-machine/src/redux/types.js
@@ -0,0 +1,4 @@
+export const GENERATE_ERROR = "GENERATE_ERROR";
+export const GENERATE_SUCCESS = "GENERATE_SUCCESS";
+export const GENERATE_REQUEST = "GENERATE_REQUEST";
+export const GENERATE_RANDOM_QUOTE = "GENERATE_RANDOM_QUOTE";