diff --git a/dist/index.html b/dist/index.html index 361a6bf..df6cdaf 100644 --- a/dist/index.html +++ b/dist/index.html @@ -2,7 +2,7 @@ - + MinBin!
diff --git a/package.json b/package.json index 75d7e37..a9f0aeb 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/actions/loginActions.ts b/src/actions/loginActions.ts new file mode 100644 index 0000000..083b46c --- /dev/null +++ b/src/actions/loginActions.ts @@ -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{ + return { + type: LOGGED_IN, + payload: loginState + } +} + + + +export function logout() : MinAction { + return { + type: LOGGED_OUT, + payload: {isLoggedIn: false, displayName: '', uid: ''} + } +} \ No newline at end of file diff --git a/src/components/LoginButton.tsx b/src/components/LoginButton.tsx index 1e1581a..679982b 100644 --- a/src/components/LoginButton.tsx +++ b/src/components/LoginButton.tsx @@ -2,8 +2,8 @@ import * as React from 'react' import { Button } from 'reactstrap'; import * as firebase from 'firebase' -export interface LoginProps { onClick: React.MouseEventHandler } -export class LoginButton extends React.Component{ +export interface LoginButtonProps { onClick: React.MouseEventHandler } +export class LoginButton extends React.Component{ render(){ return } diff --git a/src/containers/Login.tsx b/src/containers/Login.tsx index cdb7df7..336c384 100644 --- a/src/containers/Login.tsx +++ b/src/containers/Login.tsx @@ -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{ 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 Hi, {this.state.displayName} this.logout()}>Log Out + if(this.props && this.props.loginState && this.props.loginState.isLoggedIn){ + return Hi, {this.props.loginState.displayName} this.logout()}>Log Out } else{ return } } -} \ No newline at end of file +} +export const LoginContainer = connect(mapStateToProps, mapDispatchToProps)(loginContainer) \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx index ac253bb..e29382f 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -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( - , + + + + , document.getElementById("example") ); \ No newline at end of file diff --git a/src/models/AppState.ts b/src/models/AppState.ts index bfafb3f..dce4048 100644 --- a/src/models/AppState.ts +++ b/src/models/AppState.ts @@ -1,8 +1,4 @@ +import { LoginState } from './LoginState'; export interface AppState { - user:{ - isLoggedIn: Boolean, - displayName: String - } - - + login:LoginState } \ No newline at end of file diff --git a/src/models/LoginState.ts b/src/models/LoginState.ts new file mode 100644 index 0000000..9dd36f9 --- /dev/null +++ b/src/models/LoginState.ts @@ -0,0 +1 @@ +export interface LoginState { isLoggedIn: Boolean; displayName: string; uid: string } \ No newline at end of file diff --git a/src/models/MinAction.ts b/src/models/MinAction.ts new file mode 100644 index 0000000..fbf8ba8 --- /dev/null +++ b/src/models/MinAction.ts @@ -0,0 +1,10 @@ +import { LoginState } from './LoginState'; +import { Action } from 'redux'; +// export class MinAction implements Action{ +// constructor(public type: any, public payload : T){ + +// } + +export interface MinAction extends Action { + payload: T +} \ No newline at end of file diff --git a/src/reducers/MainReducer.ts b/src/reducers/MainReducer.ts index 4db4386..774effc 100644 --- a/src/reducers/MainReducer.ts +++ b/src/reducers/MainReducer.ts @@ -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 } diff --git a/yarn.lock b/yarn.lock index 0fee2d2..8583661 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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: