Added HookClock, UserPage, and HelloUser components. Bug existing for…

… importing and employing HelloUser

package.json

@@ -4,10 +4,12 @@
   "private": true,
   "proxy": "http://localhost:3001",
   "dependencies": {
+    "create-react-app": "^2.1.5",
     "express": "^4.16.4",
     "isomorphic-unfetch": "^3.0.0",
-    "react": "^16.8.1",
-    "react-dom": "^16.8.1",
+    "next": "^8.0.1",
+    "react": "^16.8.3",
+    "react-dom": "^16.8.3",
     "react-redux": "^6.0.0",
     "react-router-dom": "^4.3.1",
     "react-scripts": "^2.1.5",

src/components/AppHeader/index.js

@@ -3,8 +3,8 @@ import { Menu } from "semantic-ui-react";
 import { Link } from "react-router-dom";
 import AuthButton from "auth/components/AuthButton";
 // import Clock from "../Clock";
-import Clock from "../HookClock"
-import HelloUser from '../HelloUser'
+import Clock from "../HookClock";
+// import HelloUser from '../HelloUser';
 
 const AppHeader = ({ title, displayClock, ...props }) => (
   <Menu fixed="top" inverted {...props}>
@@ -21,7 +21,7 @@ const AppHeader = ({ title, displayClock, ...props }) => (
       TV Shows
     </Menu.Item>
     <Menu.Item>
-      <HelloUser />
+      {/* <HelloUser /> */}
     </Menu.Item>
     <Menu.Item>
       <AuthButton />

src/components/HelloUser.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import { connect } from 'net';
+
+const HelloUser = ({ username }) => 
+    username ? (
+        <p>Hello, {username}</p>
+    ) : (
+        <p>No user detected</p>
+    );
+
+// export default HelloUser
+export default connect(
+    (state) => ({ username: state.auth.username }),
+    null
+)(HelloUser);

src/components/HookClock.js

@@ -0,0 +1,18 @@
+import React, { useState, useEffect } from 'react'
+
+const Clock = () => {
+    const [date, setDate] = useState(new Date())
+    useEffect(()=> {
+        const timer = setInterval(
+            () => {
+                setDate(new Date())
+            }, 1000
+        )
+        return () => {
+            clearInterval(timer)
+        }
+    }, [])
+    return <span>{date.toLocaleTimeString()}</span>
+}
+
+export default Clock

src/modules/auth/actions.js

@@ -1,5 +1,6 @@
 export const AUTH_SUCCESS = "@auth/AUTH_SUCCESS";
 export const AUTH_DELETE = "@auth/AUTH_DELETE";
+export const GREET_USER = "GREET_USER"
 
 export const authSuccess = token => ({
   type: AUTH_SUCCESS,
@@ -9,3 +10,8 @@ export const authSuccess = token => ({
 export const authDelete = token => ({
   type: AUTH_DELETE
 });
+
+export const updateUserGreeting = username => ({
+  type: GREET_USER,
+  payload: username
+})

src/modules/auth/pages/AuthCode.js

@@ -29,11 +29,11 @@ class AuthCode extends Component {
         this.setState({ loading: false });
 
         if (json.access_token) {
-          this.setState({ error: false, success: true });
+          this.setState({ error: false, success: true, loading: false });
           this.props.handleAuthSuccess(json.access_token);
           setTimeout(() => history.replace("/auth/user"), 1000);
         } else {
-          this.setState({ error: "Invalid code", success: false });
+          this.setState({ error: "Invalid code", success: false, loading: false });
         }
       } catch (err) {
         console.error(err);

src/modules/auth/pages/UserPage.js

@@ -1,8 +1,7 @@
 import React, { Component } from "react";
 
 import { connect } from "react-redux";
-
-// const UserPage = () => ;
+import { updateUserGreeting } from "../actions"
 
 class UserPage extends Component {
   state = {
@@ -22,6 +21,7 @@ class UserPage extends Component {
         user,
         loading: false
       });
+      this.props.handleUserGreeting(user.login)
     } else {
       history.replace("/auth/github");
     }
@@ -48,9 +48,11 @@ class UserPage extends Component {
   }
 }
 
-export default connect(
-  // mapStateToProps:
-  state => ({
-    ...state.auth
-  })
-)(UserPage);
+const mapDispatchToProps = dispatch => ({
+  handleUserGreeting: (username) => dispatch(updateUserGreeting(username)),
+})
+
+export default connect (
+  (state) => ({ ...state.auth}),
+  mapDispatchToProps
+)(UserPage)

src/modules/auth/reducer.js

@@ -1,8 +1,9 @@
-import { AUTH_SUCCESS, AUTH_DELETE } from "./actions";
+import { AUTH_SUCCESS, AUTH_DELETE, GREET_USER } from "./actions";
 
 const initialState = {
   token: null,
-  authenticated: false
+  authenticated: false,
+  username: null
 };
 
 const reducer = (state = initialState, action) => {
@@ -11,6 +12,8 @@ const reducer = (state = initialState, action) => {
       return { ...state, token: action.payload, authenticated: true };
     case AUTH_DELETE:
       return { ...initialState };
+    case GREET_USER:
+      return { ...state, username: action.payload}
     default:
       return state;
   }

src/modules/common/components/Counter.js

@@ -0,0 +1,17 @@
+import React, { useState, useEffect } from "react"
+
+
+const Counter = () => {
+    const [count, setCount] = useState(0)
+    // const [apiDate, setApiData] = useState({ loading: false, value: null})
+    useEffect(()=> {document.title = `${count} hits`;})
+    // ... which is componentDidMount & componentDidUpdate
+    // if you return within useEffect, it is the same as componentWillUnmount
+    return (
+        <div>
+            <p>You clicked {count} times</p>
+            <button onClick={() => setCount(count + 1)}>Click me</button>
+        </div>
+    )
+}
+export default Counter