-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
9eb4747
commit 5efa8ca
Showing
11 changed files
with
96 additions
and
64 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,9 +1,6 @@ | ||
import React from 'react'; | ||
import HomeView, { HomeViewProps } from './Home-view'; | ||
import HomeView from './Home-view'; | ||
|
||
// These are the same, for now. If they ever change, replace this alias. | ||
type HomeContainerProps = HomeViewProps; | ||
|
||
export default function HomeContainer(props: HomeContainerProps): JSX.Element { | ||
return <HomeView {...props} />; | ||
export default function HomeContainer(): JSX.Element { | ||
return <HomeView />; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,19 +1,8 @@ | ||
import React, { useEffect } from 'react'; | ||
import { useSelector, useDispatch } from 'react-redux'; | ||
import { fetchUser } from '../../actions'; | ||
import { RootState } from '../../reducers'; | ||
import { User } from '../../types'; | ||
import React from 'react'; | ||
import { useProtected } from '../../hooks/useProtected'; | ||
import HomeContainer from './Home-container'; | ||
|
||
export default function HomeRedux(): JSX.Element { | ||
const dispatch = useDispatch(); | ||
const user: User = useSelector((state: RootState) => state.auth); | ||
|
||
// by passing [dispatch] as the second argument of useEffect, we replicate the behavior | ||
// of componentDidMount + componentDidUnmount, but not componentDidUpdate | ||
useEffect(() => { | ||
dispatch(fetchUser()); | ||
}, [dispatch]); | ||
|
||
return <HomeContainer user={user} />; | ||
useProtected(); | ||
return <HomeContainer />; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export * from './useProtected'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
import React from 'react'; | ||
import { useProtected } from '.'; | ||
import { blankUser } from '../../templates'; | ||
import { getBlankInitialState, renderWithRouterRedux } from '../../testUtils/reduxRender'; | ||
|
||
const mockHistoryPush = jest.fn(); | ||
|
||
jest.mock('react-router-dom', () => ({ | ||
// eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
...(jest.requireActual('react-router-dom') as any), | ||
useHistory: () => ({ | ||
push: mockHistoryPush, | ||
}), | ||
})); | ||
|
||
// Because you can't run a hook outside of a react component, we'll make a small test case: | ||
function TestComponent({ redirect }: { redirect?: string }): JSX.Element { | ||
useProtected({ redirectTo: redirect }); | ||
return <h1>Hi</h1>; | ||
} | ||
|
||
describe('useProtected', () => { | ||
describe('redirect behavior', () => { | ||
it('redirects to the default path if a user is present', () => { | ||
renderWithRouterRedux(<TestComponent />); | ||
expect(mockHistoryPush).toHaveBeenCalledWith('/'); | ||
}); | ||
|
||
it('redirects to a custom path if one is specific', () => { | ||
renderWithRouterRedux(<TestComponent redirect="customPath" />); | ||
expect(mockHistoryPush).toHaveBeenCalledWith('customPath'); | ||
}); | ||
|
||
it('does not redirect if no user is present', () => { | ||
const initialState = { ...getBlankInitialState(), auth: { ...blankUser, displayName: 'John' } }; | ||
renderWithRouterRedux(<TestComponent />, { initialState }); | ||
expect(mockHistoryPush).not.toHaveBeenCalled(); | ||
}); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
// This hook will check if the user is logged in. | ||
// If yes, do nothing. | ||
// If not, this will redirect the user to login. | ||
|
||
import { useEffect } from 'react'; | ||
import { useDispatch, useSelector } from 'react-redux'; | ||
import { useHistory } from 'react-router-dom'; | ||
import { fetchUser } from '../../actions'; | ||
import { RootState } from '../../reducers'; | ||
import { initialState as initialBlankUser } from '../../reducers/reducer_auth'; | ||
|
||
import { User } from '../../types'; | ||
|
||
interface UseProtectedOptions { | ||
redirectTo?: string; | ||
} | ||
|
||
const DEFAULT_REDIRECT_PATH = '/'; | ||
|
||
export function useProtected(options?: UseProtectedOptions): void { | ||
const { push } = useHistory(); | ||
const dispatch = useDispatch(); | ||
const auth: User = useSelector((state: RootState) => state.auth); | ||
|
||
// by passing [dispatch] as the second argument of useEffect, we replicate the behavior | ||
// of componentDidMount + componentDidUnmount, but not componentDidUpdate | ||
useEffect(() => { | ||
dispatch(fetchUser()); | ||
}, [dispatch]); | ||
|
||
// If this doesn't exist or is equivalent to an empty user, redirect | ||
if (!auth || auth === initialBlankUser) { | ||
push(options?.redirectTo || DEFAULT_REDIRECT_PATH); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters