Merge pull request #6 from qiyu1987/master

Master
qiyu1987 · Dec 9, 2019 · 8776475 · 8776475
2 parents f087a3e + 9b2c32a
commit 8776475
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,14 @@
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+This project achieves the following functionalities:
+
+- The main page displays a programming joke with a set up.
+- After a 5 seconds it will display the punchline of the joke
+- When the user refreshes the a page a different programming joke is displayed.
+- Integrate an external service https://github.com/15Dkatz/official_joke_api
+- Share a joke on facebook
+
+It was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+Styled with [styled components](https://www.styled-components.com/)
+Social Media Share with [react share](https://www.npmjs.com/package/react-share)
 
 ## Available Scripts
 

diff --git a/public/index.html b/public/index.html
@@ -30,7 +30,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-		<title>React App</title>
+		<title>Programing Joke</title>
 	</head>
 	<body>
 		<noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/components/Header.js b/src/components/Header.js
@@ -43,7 +43,7 @@ function Header(props) {
 				<NavRight>
 					<MenuLink href="#">
 						<FacebookShareButton
-							url="http://facebook.com"
+							url="https://programing-jokes.herokuapp.com/"
 							quote={`${props.joke.setup} 
 							${props.joke.punchline}`}
 							hashtag="#programing joke"

diff --git a/src/components/Home.js b/src/components/Home.js
@@ -1,8 +1,9 @@
 import React, { useEffect, useState } from "react"
 import styled from "styled-components"
+// load and connect action, state to redux
 import { loadJoke } from "../actions/joke"
 import { connect } from "react-redux"
-
+// styled component SetUp and Punchline
 const SetUp = styled.div`
 	background-color: #e9ecef;
 	border-radius: 0.3rem;
@@ -19,13 +20,18 @@ const Punchline = styled.div`
 `
 
 function Home(props) {
+	// use state hook, whether to reveal punchline of a joke
 	const [reveal, setReveal] = useState(false)
+	// loadJoke action to fetch random joke from API
+	// after 5 seconds set reveal to true to reveal the punchline
 	useEffect(() => {
 		props.loadJoke()
 		setTimeout(() => {
 			setReveal(true)
 		}, 5000)
 	})
+	// when the joke setup is ready in state, display setup
+	// when reveal is true, display punchline
 	return (
 		<div>
 			{props.joke.setup ? (
@@ -41,7 +47,9 @@ function Home(props) {
 		</div>
 	)
 }
+// injecting joke from redux state
 const mapStateToProps = state => ({
 	joke: state.joke
 })
+// export connected component
 export default connect(mapStateToProps, { loadJoke })(Home)