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; |