| Conditions | 5 |
| Total Lines | 61 |
| Code Lines | 53 |
| Lines | 0 |
| Ratio | 0 % |
| Changes | 0 | ||
Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.
For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.
Commonly applied refactorings include:
If many parameters/temporary variables are present:
| 1 | import React, { useState } from "react"; |
||
| 20 | |||
| 21 | function App() { |
||
| 22 | const user = useSelector((state: any) => state.app.authUser as any) as any; |
||
| 23 | const dispatch = useDispatch(); |
||
| 24 | const history = useHistory(); |
||
| 25 | |||
| 26 | const fetchAuthUser = async () => { |
||
| 27 | const response = await axios |
||
| 28 | .get("http://localhost:5000/api/v1/auth/user", { withCredentials: true }) |
||
| 29 | .catch((err) => { |
||
| 30 | console.log("Not properly authenticated"); |
||
| 31 | dispatch(setIsAuthenticated(false)); |
||
| 32 | dispatch(setAuthUser(null)); |
||
| 33 | history.push("/login/error"); |
||
| 34 | }); |
||
| 35 | |||
| 36 | if (response && response.data) { |
||
| 37 | console.log("User: ", response.data); |
||
| 38 | dispatch(setIsAuthenticated(true)); |
||
| 39 | dispatch(setAuthUser(response.data)); |
||
| 40 | history.push("/welcome"); |
||
| 41 | } |
||
| 42 | }; |
||
| 43 | |||
| 44 | const redirectToGoogleSSO = async () => { |
||
| 45 | let timer: NodeJS.Timeout | null = null; |
||
| 46 | const googleLoginURL = "http://localhost:5000/api/v1/login/google"; |
||
| 47 | const newWindow = window.open( |
||
| 48 | googleLoginURL, |
||
| 49 | "_blank", |
||
| 50 | "width=500,height=600" |
||
| 51 | ); |
||
| 52 | |||
| 53 | if (newWindow) { |
||
| 54 | timer = setInterval(() => { |
||
| 55 | if (newWindow.closed) { |
||
| 56 | console.log("Yay we're authenticated"); |
||
| 57 | fetchAuthUser(); |
||
| 58 | if (timer) clearInterval(timer); |
||
| 59 | } |
||
| 60 | }, 500); |
||
| 61 | } |
||
| 62 | }; |
||
| 63 | |||
| 64 | return ( |
||
| 65 | <AppContainer> |
||
| 66 | <Switch> |
||
| 67 | <Route exact path="/"> |
||
| 68 | Welcome Home! |
||
| 69 | <Link to="/login">Login</Link> |
||
| 70 | </Route> |
||
| 71 | <Route exact path="/login"> |
||
| 72 | <GoogleButton onClick={redirectToGoogleSSO} /> |
||
| 73 | </Route> |
||
| 74 | <Route path="/welcome">Welcome Back {user && user.fullName}</Route> |
||
| 75 | <Route exact path="/login/success" component={LoginSuccess} /> |
||
| 76 | <Route path="/login/error"> |
||
| 77 | Error loging in. Please try again later! |
||
| 78 | </Route> |
||
| 79 | </Switch> |
||
| 80 | </AppContainer> |
||
| 81 | ); |
||
| 84 | export default App; |