TerribleDev/minbin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix up login actions

Browse Source
This commit is contained in:
Tommy Parnell
2017-12-17 14:54:40 -05:00
parent adb5c942b1
commit 14eba3ba51
11 changed files with 84 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dist/index.html vendored
View File

@@ -2,7 +2,7 @@
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<title>MinBin!</title>
</head>
<body>
<div id="example"></div>

1
package.json
View File

@@ -9,6 +9,7 @@
"author": "",
"license": "ISC",
"dependencies": {
"@types/react-redux": "^5.0.14",
"bootstrap": "^4.0.0-beta.2",
"firebase": "^4.8.0",
"react": "^16.2.0",

19
src/actions/loginActions.ts Normal file
View File

@@ -0,0 +1,19 @@
import { LoginState } from '../models/LoginState';
import {LOGGED_IN, LOGGED_OUT} from './types'
import { MinAction } from '../models/MinAction';
export function login(loginState: LoginState) : MinAction<LoginState>{
return {
type: LOGGED_IN,
payload: loginState
}
}
export function logout() : MinAction<LoginState> {
return {
type: LOGGED_OUT,
payload: {isLoggedIn: false, displayName: '', uid: ''}
}
}

4
src/components/LoginButton.tsx
View File

@@ -2,8 +2,8 @@ import * as React from 'react'
import { Button } from 'reactstrap';
import * as firebase from 'firebase'
export interface LoginProps { onClick: React.MouseEventHandler<any> }
export class LoginButton extends React.Component<LoginProps, {}>{
export interface LoginButtonProps { onClick: React.MouseEventHandler<any> }
export class LoginButton extends React.Component<LoginButtonProps, {}>{
render(){
return <Button href="#" onClick={this.props.onClick} color="primary" outline>Login</Button>
}

42
src/containers/Login.tsx
View File

@@ -1,41 +1,59 @@
import * as React from "react";
import * as firebase from "firebase"
import { Reducer } from 'redux';
import * as actions from '../actions/loginActions';
import { LoginState } from '../models/LoginState';
import * as React from 'react';
import * as firebase from 'firebase';
import { LoginButton } from "../components/LoginButton"
export interface LoginState { isLoggedIn: Boolean; displayName: string; uid: string }
import * as reactRedux from 'react-redux';
import {AppState} from '../models/AppState'
import { Dispatch, connect } from 'react-redux';
import * as redux from 'redux';
export class LoginContainer extends React.Component<{}, LoginState>{
const mapStateToProps = (state : AppState) =>
{
return {loginState: state.login};
}
const mapDispatchToProps = (dispatch: any) => {
return {
onLogin:(loginState: LoginState) => dispatch(actions.login(loginState)),
onLogOut:() => dispatch(actions.logout())
}
}
interface LoginProps {loginState: LoginState, onLogin: (loginState: LoginState)=>any, onLogOut: ()=>any }
class loginContainer extends React.Component<LoginProps,{}>{
constructor(props: any){
super(props, {isLoggedIn: false, displayName: '', uid: null})
firebase.auth().onAuthStateChanged((e)=>this.handleLogin(e));
}
handleLogin(user: firebase.User){
if (user) {
this.setState({isLoggedIn: true, displayName: user.displayName, uid: user.uid})
this.props.onLogin({isLoggedIn: true, displayName: user.displayName, uid: user.uid})
} else {
this.setState({isLoggedIn: false})
this.props.onLogOut()
}
}
async logout(){
await firebase.auth().signOut()
this.setState({isLoggedIn: false, displayName: '', uid: ''})
this.props.onLogOut()
}
login(){
var provider = new firebase.auth.GoogleAuthProvider();
firebase.auth().signInWithPopup(provider).then(result => {
});
firebase.auth().signInWithPopup(provider).then(result => {});
}
render(){
if(this.state && this.state.isLoggedIn){
return <span> Hi, {this.state.displayName} <a href="#" onClick={()=>this.logout()}>Log Out</a> </span>
if(this.props && this.props.loginState && this.props.loginState.isLoggedIn){
return <span> Hi, {this.props.loginState.displayName} <a href="#" onClick={()=>this.logout()}>Log Out</a> </span>
}
else{
return <LoginButton onClick={this.login} />
}
}
}
}
export const LoginContainer = connect(mapStateToProps, mapDispatchToProps)(loginContainer)

9
src/index.tsx
View File

@@ -7,7 +7,9 @@ import { NavBar } from './components/NavBar'
import { BoostrapFirebase } from './startup/firebase'
import { LoginContainer } from './containers/Login'
import { createStore } from 'redux'
import { MainReducer } from './reducers/MainReducer'
import {MainReducer} from './reducers/MainReducer'
import { Provider } from 'react-redux'
BoostrapFirebase();
let store = createStore(MainReducer)
const App = () => (
@@ -21,6 +23,9 @@ const App = () => (
);
ReactDOM.render(
<App />,
<Provider store={store}>
<App />
</Provider>
,
document.getElementById("example")
);

8
src/models/AppState.ts
View File

@@ -1,8 +1,4 @@
import { LoginState } from './LoginState';
export interface AppState {
user:{
isLoggedIn: Boolean,
displayName: String
}
login:LoginState
}

1
src/models/LoginState.ts Normal file
View File

@@ -0,0 +1 @@
export interface LoginState { isLoggedIn: Boolean; displayName: string; uid: string }

10
src/models/MinAction.ts Normal file
View File

@@ -0,0 +1,10 @@
import { LoginState } from './LoginState';
import { Action } from 'redux';
// export class MinAction<T> implements Action{
// constructor(public type: any, public payload : T){
// }
export interface MinAction<T> extends Action {
payload: T
}

6
src/reducers/MainReducer.ts
View File

@@ -2,12 +2,12 @@ import * as React from 'react';
import { AppState } from './../models/AppState'
import { Action, AnyAction } from 'redux';
import * as appActions from '../actions/types';
export function MainReducer(state:AppState = {user: { isLoggedIn: false, displayName: ''}}, action: AnyAction) {
export function MainReducer(state:AppState = {login: { isLoggedIn: false, displayName: '', uid: ''}}, action: AnyAction) {
switch(action.type){
case appActions.LOGGED_IN:
return Object.assign({}, state, {user:{ isLoggedIn: true, displayName: action.displayName}})
return Object.assign({}, state, {login:{ isLoggedIn: true, displayName: action.payload.displayName, uid: action.payload.displayName}})
case appActions.LOGGED_OUT:
return Object.assign({}, state, {user:{ isLoggedIn: false, displayName: ""}})
return Object.assign({}, state, {login:{ isLoggedIn: false, displayName: ""}})
default:
return state
}

9
yarn.lock
View File

@@ -61,6 +61,13 @@
"@types/node" "*"
"@types/react" "*"
"@types/react-redux@^5.0.14":
version "5.0.14"
resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-5.0.14.tgz#f3fc30dcbb2d20455a714f591cc27f77b4df09bb"
dependencies:
"@types/react" "*"
redux "^3.6.0"
"@types/react@*", "@types/react@^16.0.31":
version "16.0.31"
resolved "https://registry.yarnpkg.com/@types/react/-/react-16.0.31.tgz#5285da62f3ac62b797f6d0729a1d6181f3180c3e"
@@ -1924,7 +1931,7 @@ reduce-function-call@^1.0.1:
dependencies:
balanced-match "^0.4.2"
redux@^3.7.2:
redux@^3.6.0, redux@^3.7.2:
version "3.7.2"
resolved "https://registry.yarnpkg.com/redux/-/redux-3.7.2.tgz#06b73123215901d25d065be342eb026bc1c8537b"
dependencies: