Passed
Push — dev ( 066742...6b6ad0 )
by Kasper
02:28 queued 13s
created

App.tsx ➔ App   B

Complexity

Conditions 5

Size

Total Lines 61
Code Lines 53

Duplication

Lines 0
Ratio 0 %

Importance

Changes 0
Metric Value
eloc 53
dl 0
loc 61
c 0
b 0
f 0
rs 8.0715
cc 5

How to fix   Long Method   

Long Method

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:

1
import React, { useState } from "react";
2
import "./App.css";
3
import styled from "styled-components";
4
import { Link, Route, Switch, useHistory } from "react-router-dom";
5
import GoogleButton from "react-google-button";
6
import { LoginSuccess } from "./app/containers/LoginSuccess";
7
import axios from "axios";
8
import { useDispatch, useSelector } from "react-redux";
9
import { setAuthUser, setIsAuthenticated } from "./app/appSlice";
10
11
const AppContainer = styled.div`
12
  width: 100%;
13
  height: 100%;
14
  display: flex;
15
  flex-direction: column;
16
  justify-content: center;
17
  align-items: center;
18
  font-size: 31px;
19
`;
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
  );
82
}
83
84
export default App;