Bootzooka frontend - the more functional way

backend-start.sh

@@ -1,3 +1,3 @@
 #!/bin/bash
 
-sbt "~backend/reStart"
+sbt "~backend/reStart" -mem 3000

ui/package.json

@@ -19,7 +19,10 @@
     "axios": "^0.20.0",
     "bootstrap": "^4.5.2",
     "formik": "^2.2.0",
+    "fp-ts": "^2.9.5",
     "immer": "^7.0.9",
+    "io-ts": "^2.2.14",
+    "io-ts-reporters": "^1.2.2",
     "jest-environment-jsdom-sixteen": "^1.0.3",
     "noop-ts": "^1.0.3",
     "react": "^16.13.1",

ui/src/contexts/UserContext/UserContext.tsx

@@ -1,29 +1,26 @@
 import React from "react";
 import immer from "immer";
 import noop from "noop-ts";
-
-export interface UserDetails {
-  createdOn: string;
-  email: string;
-  login: string;
-}
+import { ApiKey, UserDetails } from "../../services/UserService/UserServiceFP";
+import { none, Option } from "fp-ts/es6/Option";
 
 export interface UserState {
-  apiKey: string | null;
-  user: UserDetails | null;
-  loggedIn: boolean | null;
+  apiKey: Option<ApiKey>;
+  user: Option<UserDetails>;
+  // TODO: do we really need this flag??
+  // loggedIn: boolean;
 }
 
 export const initialUserState: UserState = {
-  apiKey: null,
-  user: null,
-  loggedIn: null,
+  apiKey: none,
+  user: none,
+  // loggedIn: false,
 };
 
 export type UserAction =
-  | { type: "SET_API_KEY"; apiKey: string | null }
+  | { type: "SET_API_KEY"; apiKey: Option<ApiKey> }
   | { type: "UPDATE_USER_DATA"; user: Partial<UserDetails> }
-  | { type: "LOG_IN"; user: UserDetails }
+  | { type: "LOG_IN"; user: Option<UserDetails> }
   | { type: "LOG_OUT" };
 
 const UserReducer = (state: UserState, action: UserAction): UserState => {
@@ -40,13 +37,11 @@ const UserReducer = (state: UserState, action: UserAction): UserState => {
     case "LOG_IN":
       return immer(state, (draftState) => {
         draftState.user = action.user;
-        draftState.loggedIn = true;
       });
     case "LOG_OUT":
       return immer(state, (draftState) => {
-        draftState.apiKey = null;
-        draftState.user = null;
-        draftState.loggedIn = false;
+        draftState.apiKey = none;
+        draftState.user = none;
       });
   }
 };

ui/src/main/Main/Main.tsx

@@ -3,32 +3,25 @@ import Footer from "../Footer/Footer";
 import Top from "../Top/Top";
 import ForkMe from "../ForkMe/ForkMe";
 import { UserContext } from "../../contexts/UserContext/UserContext";
-import Loader from "../Loader/Loader";
 import Routes from "../Routes/Routes";
 import useLoginOnApiKey from "./useLoginOnApiKey";
 import useLocalStoragedApiKey from "./useLocalStoragedApiKey";
 
 const Main: React.FC = () => {
   const {
-    state: { loggedIn },
+    state: { user },
   } = React.useContext(UserContext);
 
   useLocalStoragedApiKey();
   useLoginOnApiKey();
 
-  if (loggedIn === null) {
-    return <Loader />;
-  }
-
-  return (
-    <>
-      <Top />
-      <ForkMe>
-        <Routes />
-      </ForkMe>
-      <Footer />
-    </>
-  );
+  return <>
+    <Top />
+    <ForkMe>
+      <Routes />
+    </ForkMe>
+    <Footer />
+  </>
 };
 
 export default Main;

ui/src/main/Main/useLocalStoragedApiKey.tsx

@@ -1,10 +1,12 @@
 import React from "react";
 import { UserContext } from "../../contexts/UserContext/UserContext";
+import { fold, fromNullable, some } from "fp-ts/Option";
+import { pipe } from "fp-ts/pipeable";
 
 const useLocalStoragedApiKey = () => {
   const {
     dispatch,
-    state: { apiKey, loggedIn },
+    state: { user, apiKey },
   } = React.useContext(UserContext);
 
   const apiKeyRef = React.useRef(apiKey);
@@ -14,24 +16,24 @@ const useLocalStoragedApiKey = () => {
   }, [apiKey, dispatch]);
 
   React.useEffect(() => {
-    const storedApiKey = localStorage.getItem("apiKey");
 
-    if (!storedApiKey) return dispatch({ type: "LOG_OUT" });
-
-    dispatch({ type: "SET_API_KEY", apiKey: storedApiKey });
+    pipe(
+      fromNullable(localStorage.getItem("apiKey")),
+      fold(
+        () => dispatch({ type: 'LOG_OUT' }),
+        key => dispatch({ type: 'SET_API_KEY', apiKey: some(key) })
+      )
+    );
   }, [dispatch]);
 
   React.useEffect(() => {
-    switch (loggedIn) {
-      case true:
-        return localStorage.setItem("apiKey", apiKeyRef.current || "");
-      case false:
-        return localStorage.removeItem("apiKey");
-      case null:
-      default:
-        return;
-    }
-  }, [loggedIn]);
+    pipe(apiKeyRef.current,
+      fold(
+        () => localStorage.removeItem('apiKey'),
+        key => localStorage.setItem('apiKey', key),
+      )
+    )
+  }, [user]);
 };
 
 export default useLocalStoragedApiKey;

ui/src/main/Main/useLoginOnApiKey.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 import { UserContext } from "../../contexts/UserContext/UserContext";
 import userService from "../../services/UserService/UserService";
+import { pipe } from "fp-ts/pipeable";
+import { map, some } from "fp-ts/Option";
 
 const useLoginOnApiKey = () => {
   const {
@@ -9,12 +11,18 @@ const useLoginOnApiKey = () => {
   } = React.useContext(UserContext);
 
   React.useEffect(() => {
-    if (!apiKey) return;
+    console.log('useLoginOnApiKey');
+    pipe(
+      apiKey,
+      map(key => {
+        userService
+          .getCurrentUser(key)
+          .then((user) => dispatch({ type: "LOG_IN", user: some(user) }))
+          .catch(() => dispatch({ type: "LOG_OUT" }));
+      })
+    )
+
 
-    userService
-      .getCurrentUser(apiKey)
-      .then((user) => dispatch({ type: "LOG_IN", user }))
-      .catch(() => dispatch({ type: "LOG_OUT" }));
   }, [apiKey, dispatch]);
 };
 

ui/src/main/Routes/ProtectedRoute.tsx

@@ -2,15 +2,21 @@ import React from "react";
 import { Route, RouteProps } from "react-router-dom";
 import { UserContext } from "../../contexts/UserContext/UserContext";
 import Login from "../../pages/Login/Login";
+import { fold } from "fp-ts/Option";
+import { pipe } from "fp-ts/pipeable";
 
 const ProtectedRoute: React.FC<RouteProps> = ({ children, ...props }) => {
   const {
-    state: { loggedIn },
+    state: { user },
   } = React.useContext(UserContext);
 
-  if (!loggedIn) return <Route {...props} component={Login} />;
-
-  return <Route {...props}>{children}</Route>;
+  return pipe(
+    user,
+    fold(
+      () => <Route {...props} component={Login} />,
+      _ => <Route {...props}>{children}</Route>
+    )
+  );
 };
 
 export default ProtectedRoute;

ui/src/main/Top/Top.tsx

@@ -4,11 +4,12 @@ import Nav from "react-bootstrap/Nav";
 import Container from "react-bootstrap/Container";
 import { LinkContainer } from "react-router-bootstrap";
 import { UserContext } from "../../contexts/UserContext/UserContext";
-import { BiPowerOff, BiHappy } from "react-icons/bi";
+import { BiHappy, BiPowerOff } from "react-icons/bi";
+import { pipe } from "fp-ts/pipeable";
 
 const Top: React.FC = () => {
   const {
-    state: { user, loggedIn },
+    state: { user },
     dispatch,
   } = React.useContext(UserContext);
 
@@ -30,29 +31,31 @@ const Top: React.FC = () => {
               <Nav.Link>Home</Nav.Link>
             </LinkContainer>
             <div className="flex-grow-1" />
-            {loggedIn ? (
-              <>
-                <LinkContainer to="/profile">
-                  <Nav.Link className="text-right">
-                    <BiHappy />
-                    &nbsp;{user?.login}
+            {pipe(
+              user,
+              () => (
+                <>
+                  <LinkContainer to="/register">
+                    <Nav.Link className="text-right">Register</Nav.Link>
+                  </LinkContainer>
+                  <LinkContainer to="/login">
+                    <Nav.Link className="text-right">Login</Nav.Link>
+                  </LinkContainer>
+                </>),
+              u => (
+                <>
+                  <LinkContainer to="/profile">
+                    <Nav.Link className="text-right">
+                      <BiHappy />
+                      &nbsp;{}
+                    </Nav.Link>
+                  </LinkContainer>{" "}
+                  <Nav.Link className="text-right" onClick={handleLogOut}>
+                    <BiPowerOff />
+                    &nbsp;Logout
                   </Nav.Link>
-                </LinkContainer>{" "}
-                <Nav.Link className="text-right" onClick={handleLogOut}>
-                  <BiPowerOff />
-                  &nbsp;Logout
-                </Nav.Link>
-              </>
-            ) : (
-              <>
-                <LinkContainer to="/register">
-                  <Nav.Link className="text-right">Register</Nav.Link>
-                </LinkContainer>
-                <LinkContainer to="/login">
-                  <Nav.Link className="text-right">Login</Nav.Link>
-                </LinkContainer>
-              </>
-            )}
+                </>))
+            }
           </Nav>
         </Navbar.Collapse>
       </Container>

ui/src/pages/Login/Login.test.tsx

@@ -18,7 +18,7 @@ beforeEach(() => {
 test("renders header", () => {
   const { getByText } = render(
     <Router history={history}>
-      <UserContext.Provider value={{ state: { ...initialUserState, loggedIn: false }, dispatch }}>
+      <UserContext.Provider value={{ state: { ...initialUserState }, dispatch }}>
         <Login />
       </UserContext.Provider>
     </Router>
@@ -30,7 +30,7 @@ test("renders header", () => {
 test("redirects when logged in", () => {
   render(
     <Router history={history}>
-      <UserContext.Provider value={{ state: { ...initialUserState, loggedIn: true }, dispatch }}>
+      <UserContext.Provider value={{ state: { ...initialUserState }, dispatch }}>
         <Login />
       </UserContext.Provider>
     </Router>
@@ -73,7 +73,7 @@ test("handles login error", async () => {
 
   const { getByLabelText, getByText, findByRole } = render(
     <Router history={history}>
-      <UserContext.Provider value={{ state: { ...initialUserState, loggedIn: false }, dispatch }}>
+      <UserContext.Provider value={{ state: { ...initialUserState }, dispatch }}>
         <Login />
       </UserContext.Provider>
     </Router>