From 9b3039bead19473928f642f25b61ca4907b20272 Mon Sep 17 00:00:00 2001
From: bsquillari <bsquillari@itba.edu.ar>
Date: Mon, 4 Dec 2023 20:54:09 +0000
Subject: [PATCH] Add create airline flow to browser

---
 browser-domain/src/Api.ts                     | 11 +++-
 browser-domain/src/App.tsx                    |  2 +
 browser-domain/src/components/Home/Home.tsx   |  1 +
 .../src/components/SignUp/CreateAirline.tsx   | 58 +++++++++++++++++++
 browser-domain/src/hooks/useCreateAirline.tsx | 39 +++++++++++++
 5 files changed, 110 insertions(+), 1 deletion(-)
 create mode 100644 browser-domain/src/components/SignUp/CreateAirline.tsx
 create mode 100644 browser-domain/src/hooks/useCreateAirline.tsx

diff --git a/browser-domain/src/Api.ts b/browser-domain/src/Api.ts
index 9c055f7..1f31e7b 100644
--- a/browser-domain/src/Api.ts
+++ b/browser-domain/src/Api.ts
@@ -24,7 +24,7 @@ instance.interceptors.response.use(
             json["count"] = response.headers["x-count"]
             console.log(json)
             return json
-        } else if (response.status == 204) {
+        } else if (response.status === 204) {
             return response;
         }
         return JSON.parse(response.data);
@@ -41,6 +41,15 @@ export const createUser = (
     return instance.post("users", credentials);
 };
 
+export const createAirline = (
+    credentials: Credentials,
+    token: string
+): Promise<{ id?: string; message: string }> => {
+    return instance.post("users/airline", credentials, {
+        headers: { Authorization: `Bearer ${token}` },
+    });
+};
+
 export const fetchUserById = (id: number, token: string): Promise<User & { message?: string }> => {
     return instance.get("users/" + id, {
         headers: { Authorization: `Bearer ${token}` },
diff --git a/browser-domain/src/App.tsx b/browser-domain/src/App.tsx
index b5995c3..0e82d7e 100644
--- a/browser-domain/src/App.tsx
+++ b/browser-domain/src/App.tsx
@@ -1,6 +1,7 @@
 import { LogIn } from "./components/LogIn/LogIn";
 import { Navigate, Route, RouteProps, Routes } from "react-router";
 import { SignUp } from "./components/SignUp/SignUp";
+import { CreateAirline } from "./components/SignUp/CreateAirline";
 import { Home } from "./components/Home/Home";
 import { CreateFlight } from "./components/CreateFlight/CreateFlight";
 import { Button } from "antd";
@@ -15,6 +16,7 @@ function Router() {
             <Routes>
                 <Route path="/login" element={<LogIn />} />
                 <Route path="/signup" element={<SignUp />} />
+                <Route path="/create-airline" element={!isAdmin ? <LogIn /> : <CreateAirline />} />
                 <Route path="/home" element={!user ? <LogIn /> : <Home />} />
                 <Route path="/create-flight" element={!isAirline ? <LogIn /> : <CreateFlight />} />
                 <Route path="/edit-flight/:id" element={!isAirline && !isAdmin ? <LogIn /> : <EditFlight />} />
diff --git a/browser-domain/src/components/Home/Home.tsx b/browser-domain/src/components/Home/Home.tsx
index a4a369c..0002654 100644
--- a/browser-domain/src/components/Home/Home.tsx
+++ b/browser-domain/src/components/Home/Home.tsx
@@ -53,6 +53,7 @@ export const Home: React.FC<Props> = (props) => {
     return (
         <div className="Box">
             {isAirline ? <button onClick={() => { navigate("/create-flight") }}>Create flight</button> : <></>}
+            {isAdmin ? <button onClick={() => { navigate("/create-airline") }}>Create airline user</button> : <></>}
             <h2>Flights</h2>
             <div className="Items">
                 {(props.flights ? props.flights : flights).map((f) => {
diff --git a/browser-domain/src/components/SignUp/CreateAirline.tsx b/browser-domain/src/components/SignUp/CreateAirline.tsx
new file mode 100644
index 0000000..6640477
--- /dev/null
+++ b/browser-domain/src/components/SignUp/CreateAirline.tsx
@@ -0,0 +1,58 @@
+import React, { useState } from "react";
+import { Button, Input } from "antd";
+import { useCreateAirline } from "../../hooks/useCreateAirline";
+
+export const CreateAirline = () => {
+    const [username, setUsername] = useState("");
+    const [email, setEmail] = useState("");
+    const [password, setPassword] = useState("");
+    const [repeatPassword, setRepeatPassword] = useState("");
+
+    const { createAirline, isLoading, error } = useCreateAirline();
+
+    return (
+        <div className="Box Small">
+            <div className="Section">
+                <div className="Section">
+                    <Input
+                        type="email"
+                        placeholder="Email"
+                        onChange={(ev) => setEmail(ev.target.value)}
+                    />
+                    <Input
+                        placeholder="Username"
+                        onChange={(ev) => setUsername(ev.target.value)}
+                    />
+                    <Input.Password
+                        placeholder="Password"
+                        onChange={(ev) => setPassword(ev.target.value)}
+                    />
+                    <Input.Password
+                        placeholder="Repeat password"
+                        onChange={(ev) => setRepeatPassword(ev.target.value)}
+                    />
+                    <Button
+                        style={{ width: "100%" }}
+                        onClick={async () =>
+                            await createAirline({ email, password, username })
+                        }
+                        loading={isLoading}
+                        disabled={
+                            email === "" ||
+                            username === "" ||
+                            password === "" ||
+                            password !== repeatPassword
+                        }
+                    >
+                        Create Airline
+                    </Button>
+                    {error ? (
+                        <div className="Disconnected">{error}</div>
+                    ) : (
+                        <></>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+};
diff --git a/browser-domain/src/hooks/useCreateAirline.tsx b/browser-domain/src/hooks/useCreateAirline.tsx
new file mode 100644
index 0000000..63ea8e4
--- /dev/null
+++ b/browser-domain/src/hooks/useCreateAirline.tsx
@@ -0,0 +1,39 @@
+import { useState } from "react";
+import { Credentials } from "../Types";
+import { createAirline as createAirlineAPI } from "../Api";
+import useAuth from "../useAuth";
+import { useNavigate } from "react-router";
+
+export const useCreateAirline = () => {
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const navigate = useNavigate();
+
+    const createAirline = async (credentials: Credentials): Promise<void> => {
+        try {
+            setIsLoading(true);
+            setError(null);
+
+            const token = localStorage.getItem("token");
+            if (!token) {
+                setError("No token!");
+                setIsLoading(false);
+                return;
+            }
+
+            const createResponse = await createAirlineAPI(credentials, token);
+
+            if (createResponse.id) {
+                navigate("/home");
+            } else {
+                setError(createResponse.message);
+            }
+        } catch (error) {
+            setError(error as string);
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    return { createAirline, isLoading, error };
+};