log out function

This commit is contained in:
Ruidy Nemausat 2020-05-14 13:24:45 +02:00
parent 176b51db35
commit 2cfd0a1a22
3 changed files with 16 additions and 8 deletions

View file

@ -3,13 +3,17 @@ import React, {FC} from 'react';
import {Link} from 'react-router-dom'; import {Link} from 'react-router-dom';
import * as ROUTES from '../constants/routes'; import * as ROUTES from '../constants/routes';
//Redux //Redux
import {compose} from '@reduxjs/toolkit';
import {connect} from 'react-redux'; import {connect} from 'react-redux';
import {withFirebase, WithFirebaseProps} from 'react-redux-firebase';
import {selectProfile} from '../store/firebase'; import {selectProfile} from '../store/firebase';
// Style // Style
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'; import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faCode, faSignOutAlt, faUser} from '@fortawesome/free-solid-svg-icons'; import {faCode, faSignOutAlt, faUser} from '@fortawesome/free-solid-svg-icons';
// Typing
import User from '../models/User';
interface IProps { interface IProps extends WithFirebaseProps<User> {
isEmpty: boolean; isEmpty: boolean;
isLoaded: boolean; isLoaded: boolean;
} }
@ -17,7 +21,7 @@ interface IProps {
/** /**
* Main Navbar serves navigation routes. * Main Navbar serves navigation routes.
*/ */
const NavBar: FC<IProps> = ({isEmpty, isLoaded}) => { const NavBar: FC<IProps> = ({firebase, isEmpty, isLoaded}) => {
const publicLinks = ( const publicLinks = (
<ul data-testid="publicLinks"> <ul data-testid="publicLinks">
<li> <li>
@ -57,7 +61,11 @@ const NavBar: FC<IProps> = ({isEmpty, isLoaded}) => {
</Link> </Link>
</li> </li>
<li> <li>
<Link to={ROUTES.SIGN_IN} data-testid="logoutLink"> <Link
to={ROUTES.SIGN_IN}
data-testid="logoutLink"
onClick={() => firebase.logout()}
>
<FontAwesomeIcon icon={faSignOutAlt} /> <FontAwesomeIcon icon={faSignOutAlt} />
<span className="hide-sm"> Log out</span> <span className="hide-sm"> Log out</span>
</Link> </Link>
@ -81,4 +89,6 @@ const NavBar: FC<IProps> = ({isEmpty, isLoaded}) => {
}; };
/** connect HOC subscribes to the store */ /** connect HOC subscribes to the store */
export default connect(selectProfile)(NavBar);
const enhance = compose<FC>(connect(selectProfile), withFirebase);
export default enhance(NavBar);

View file

@ -5,7 +5,7 @@ import {connect} from 'react-redux';
import {WithFirebaseProps, withFirebase} from 'react-redux-firebase'; import {WithFirebaseProps, withFirebase} from 'react-redux-firebase';
import {selectProfile} from '../store/firebase'; import {selectProfile} from '../store/firebase';
// Routing // Routing
import {Link, useHistory, Redirect} from 'react-router-dom'; import {Link, Redirect} from 'react-router-dom';
import * as ROUTES from '../constants/routes'; import * as ROUTES from '../constants/routes';
// Style // Style
import GoogleButton from 'react-google-button'; import GoogleButton from 'react-google-button';
@ -30,7 +30,6 @@ interface IProps extends WithFirebaseProps<User> {
* Sign in form * Sign in form
*/ */
const SignIn: FC<IProps> = ({firebase, isEmpty, isLoaded}) => { const SignIn: FC<IProps> = ({firebase, isEmpty, isLoaded}) => {
const history = useHistory();
const [error, setError] = useState<any>(null); const [error, setError] = useState<any>(null);
// handle form data // handle form data

View file

@ -1,6 +1,6 @@
import React, {FC, useState} from 'react'; import React, {FC, useState} from 'react';
// Routing // Routing
import {Link, useHistory, Redirect} from 'react-router-dom'; import {Link, Redirect} from 'react-router-dom';
import * as ROUTES from '../constants/routes'; import * as ROUTES from '../constants/routes';
// Redux // Redux
import {compose} from 'redux'; import {compose} from 'redux';
@ -32,7 +32,6 @@ interface InitFormData {
* Sign up form recieves firebase from withFirebase HOC * Sign up form recieves firebase from withFirebase HOC
*/ */
const SignUp: FC<IProps> = ({firebase, isEmpty, isLoaded}) => { const SignUp: FC<IProps> = ({firebase, isEmpty, isLoaded}) => {
const history = useHistory();
const [error, setError] = useState<any>(null); const [error, setError] = useState<any>(null);
// handle form data // handle form data