feat(profile): set app logout

ahlsunnah · May 10, 2020 · b314a5e · b314a5e
1 parent 931d461
commit b314a5e
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 2 deletions.
diff --git a/src/components/modules/Profile/Profile.tsx b/src/components/modules/Profile/Profile.tsx
@@ -2,6 +2,7 @@
 import { jsx } from 'theme-ui'
 import gql from 'graphql-tag'
 import { useMemo, useState } from 'react'
+import { navigate } from 'gatsby'
 import { makeStyles } from '@material-ui/core/styles'
 import _get from 'lodash/get'
 import _upperFirst from 'lodash/upperFirst'
@@ -28,6 +29,7 @@ import { MeQuery, MeQueryVariables } from '../../../hasuraTypes'
 
 type PropType = {
   me: FirebaseUser
+  signOut: () => Promise<void>
   path?: string
 }
 
@@ -69,7 +71,7 @@ const NEW_USER_QUERY = gql`
   }
 `
 
-const Profile: React.FC<PropType> = ({ me }) => {
+const Profile: React.FC<PropType> = ({ me, signOut }) => {
   const [isEditProfile, setEditProfile] = useState(false)
   const classes = useStyles()
   const currentUserId = useMemo(() => _get(me, 'uid', ''), [me])
@@ -88,6 +90,15 @@ const Profile: React.FC<PropType> = ({ me }) => {
 
   const [insert_users_one, { loading: mutationLoading, error: mutationError }] = useMutation(NEW_USER_QUERY)
 
+  const handleSignOut = async () => {
+    try {
+      await signOut()
+      navigate('/')
+    } catch (error) {
+      console.log(error)
+    }
+  }
+
   const formik = useFormik<FormValues>({
     initialValues: {
       gender: 'female',
@@ -164,6 +175,9 @@ const Profile: React.FC<PropType> = ({ me }) => {
             <Button size="small" onClick={() => setEditProfile((prev) => !prev)}>
               Edit profile
             </Button>
+            <Button size="small" onClick={handleSignOut}>
+              Sign Out
+            </Button>
           </CardActions>
         </Card>
       )}

diff --git a/src/pages/app.tsx b/src/pages/app.tsx
@@ -68,7 +68,7 @@ const App = () => {
           >
             <Router basepath="/app">
               <Tracks path="/" />
-              <Profile path="/profile" me={user.authUser} />
+              <Profile path="/profile" me={user.authUser} signOut={user.signOut} />
               <Login
                 path="/login"
                 signInWithEmailAndPwd={user.signInWithEmailAndPwd}

diff --git a/src/services/auth.ts b/src/services/auth.ts
@@ -112,7 +112,11 @@ export function useAuth(): UseAuth {
   const signOut = async () => {
     try {
       setAuthState({ status: 'loading' })
+
+      localStorage.removeItem('authUser')
+      setAuthUser(undefined)
       await firebase.auth().signOut()
+
       setAuthState({ status: 'out' })
     } catch (error) {
       console.log(error)