Refactoring components

.gitignore

@@ -4,6 +4,7 @@
 
 # storybook
 build-storybook.log
+storybook-static
 
 # dependencies
 /node_modules

.storybook/preview.js

@@ -1,3 +1,5 @@
+import "bootstrap/dist/css/bootstrap.min.css";
+
 import CustomThemeProvider from "./../src/components/CustomThemeProvider";
 import { I18nextProvider } from "react-i18next";
 import i18n from "../src/i18n";

src/App.test.jsx → src/App.test.tsx

@@ -1,9 +1,9 @@
+import App from "./App";
 import React from "react";
 import { render } from "@testing-library/react";
-import App from "./App";
 
-test('renders "Utvecklat av Digital Ungdom"', () => {
+test('renders "Digital Ungdom"', () => {
   const { getByText } = render(<App />);
-  const element = getByText(/Svenska/i);
+  const element = getByText(/Digital Ungdom/i);
   expect(element).toBeInTheDocument();
 });

src/App.tsx

@@ -1,10 +1,12 @@
+import "bootstrap/dist/css/bootstrap.min.css";
 import "utils/tokenInterceptor";
 import "resources/app.css";
 import "react-toastify/dist/ReactToastify.min.css";
 
 import store, { persistor } from "./store";
 
 import AuthenticatedLayer from "features/auth/AuthenticatedLayer";
+import Background from "components/Background";
 import ChangeLanguage from "features/ChangeLanguage";
 import CustomThemeProvider from "components/CustomThemeProvider";
 import DevelopedBy from "components/DevelopedBy";
@@ -13,40 +15,21 @@ import { Provider } from "react-redux";
 import React from "react";
 import Router from "features/router";
 import { ToastContainer } from "react-toastify";
-import axios from "axios";
-import styled from "styled-components";
 
-const StyledApp = styled.div`
-  background: ${(props) => props.theme.bg};
-
-  height: 100%;
-  width: 100%;
-  overflow: auto;
-
-  #centered {
-    width: 100%;
-    min-height: calc(100% - 2.5rem);
-    display: table;
-  }
-`;
-
-axios.defaults.baseURL =
-  process.env.REACT_APP_API_URL || "https://devapi.infrarays.digitalungdom.se";
-
-function App() {
+function App(): React.ReactElement {
   return (
     <Provider store={store}>
       <PersistGate loading={null} persistor={persistor}>
         <AuthenticatedLayer>
           <CustomThemeProvider>
-            <StyledApp>
+            <Background>
               <ChangeLanguage />
               <ToastContainer />
               <div id="centered">
                 <Router />
               </div>
               <DevelopedBy />
-            </StyledApp>
+            </Background>
           </CustomThemeProvider>
         </AuthenticatedLayer>
       </PersistGate>

src/api/admin.ts

@@ -0,0 +1,45 @@
+import { Admin, NewAdmin } from "types/user";
+import {
+  Application,
+  ApplicationGrade,
+  GradedApplication,
+  IndividualGrading,
+  OrderItem,
+} from "types/grade";
+
+import api from "./axios";
+
+export const getAdmins = (): Promise<Admin[]> =>
+  api.format.get<Admin[]>("/admin", { params: { skip: 0, limit: 10 } });
+
+export const getGradesConfig = (applicantID: string): string =>
+  `/application/${applicantID}/grade`;
+
+export const getGradesByApplicant = (
+  applicantID: string
+): Promise<IndividualGrading[]> =>
+  api.format.get<IndividualGrading[]>(getGradesConfig(applicantID));
+
+export const getApplications = (): Promise<
+  (Application | GradedApplication)[]
+> => api.format.get<Application[]>("/application");
+
+export const getGradingOrder = (): Promise<OrderItem[]> =>
+  api.format.get<OrderItem[]>("/admin/grading");
+
+export const postApplicationGrade = (
+  applicantID: string,
+  form: ApplicationGrade
+): Promise<IndividualGrading> =>
+  api.format.post<IndividualGrading>(`/application/${applicantID}/grade`, form);
+
+export const addAdmin = (admin: NewAdmin): Promise<Admin> =>
+  api.format.post<Admin>("/admin", admin);
+
+/**
+ * Admins can randomise the order they view applications in,
+ * to decrease bias in the grading process
+ * @returns order of applicants
+ */
+export const randomiseOrder = (): Promise<OrderItem[]> =>
+  api.format.post<OrderItem[]>("/admin/grading/randomise");

src/api/auth.ts

@@ -0,0 +1,29 @@
+import { ServerTokenResponse } from "types/tokens";
+import api from "./axios";
+
+export const authorizeWithEmailAndCode = (
+  email: string,
+  code: string
+): Promise<ServerTokenResponse> =>
+  api.format.post<ServerTokenResponse>(
+    "/user/oauth/token",
+    {
+      grant_type: "client_credentials",
+    },
+    {
+      headers: { Authorization: `Email ${btoa(email + ":" + code)}` },
+    }
+  );
+
+export const authorizeWithToken = (
+  token: string
+): Promise<ServerTokenResponse> =>
+  api.format.post<ServerTokenResponse>(
+    "/user/oauth/token",
+    {
+      grant_type: "client_credentials",
+    },
+    {
+      headers: { Authorization: `Email ${token}` },
+    }
+  );

src/api/axios.ts

@@ -0,0 +1,47 @@
+import axios, { AxiosRequestConfig } from "axios";
+
+import { DEV_API_BASE_URL } from "./constants";
+import formatErrors from "utils/formatErrors";
+
+export const api = axios.create({
+  baseURL: process.env.REACT_APP_API_URL || DEV_API_BASE_URL,
+});
+
+interface FormattedRequests {
+  post<T>(url: string, data?: unknown, config?: AxiosRequestConfig): Promise<T>;
+  get<T>(url: string, config?: AxiosRequestConfig): Promise<T>;
+  delete<T>(url: string, config?: AxiosRequestConfig): Promise<T>;
+  patch<T>(
+    url: string,
+    data?: unknown,
+    config?: AxiosRequestConfig
+  ): Promise<T>;
+}
+
+const format: FormattedRequests = {
+  post: (url, data, config) =>
+    api
+      .post(url, data, config)
+      .then((res) => res.data)
+      .catch(formatErrors),
+  get: (url, config) =>
+    api
+      .get(url, config)
+      .then((res) => res.data)
+      .catch(formatErrors),
+  patch: (url, data, config) =>
+    api
+      .patch(url, data, config)
+      .then((res) => res.data)
+      .catch(formatErrors),
+  delete: (url, config) =>
+    api
+      .delete(url, config)
+      .then((res) => res.data)
+      .catch(formatErrors),
+};
+
+export default {
+  ...api,
+  format,
+};

src/api/constants.ts

@@ -0,0 +1 @@
+export const DEV_API_BASE_URL = "https://devapi.infrarays.digitalungdom.se";

src/api/downloadPDF.ts

@@ -0,0 +1,25 @@
+import api from "./axios";
+import showFile from "utils/showFile";
+
+/**
+ * Downloads PDF and returns the blob and the file name
+ * @param applicantID
+ * @returns {[Blob, string]} Blob and file name
+ */
+export const downloadPDF = (applicantID: string): Promise<[Blob, string]> =>
+  api
+    .get<Blob>(`/application/${applicantID}/pdf`, { responseType: "blob" })
+    .then((res) => {
+      const name = res.headers["content-disposition"].split("filename=")[1];
+      return [res.data, name];
+    });
+
+/**
+ * Download and open PDF in new tab
+ * @param applicantID
+ * @returns void
+ */
+export const downloadAndOpen = (applicantID: string): Promise<void> =>
+  downloadPDF(applicantID).then((args) => showFile(...args));
+
+export default downloadPDF;

src/api/files.ts

@@ -0,0 +1,69 @@
+import { FileInfo, FileType } from "types/files";
+
+import FileSaver from "file-saver";
+import api from "./axios";
+
+export const getFilesConfiguration = (applicantID = "@me"): string =>
+  `/application/${applicantID}/file`;
+
+export const getFiles = (applicantID = "@me"): Promise<FileInfo[]> =>
+  api.format.get<FileInfo[]>(getFilesConfiguration(applicantID));
+
+export const downloadFile = (
+  fileID: string,
+  applicantID = "@me"
+): Promise<void> =>
+  api
+    .get(`application/${applicantID}/file/${fileID}`, {
+      responseType: "blob",
+    })
+    .then((res) => {
+      const utf8FileName = res.headers["content-disposition"].split(
+        "filename*=UTF-8''"
+      )[1];
+      const decodedName = decodeURIComponent(utf8FileName);
+      const normalName = res.headers["content-disposition"].split(
+        "filename="
+      )[1];
+      FileSaver.saveAs(
+        res.data,
+        utf8FileName === undefined
+          ? normalName.substring(1, normalName.length - 1)
+          : decodedName.substring(1, decodedName.length - 1)
+      );
+    });
+
+export const downloadFullPDF = (applicantID = "@me"): Promise<void> =>
+  api
+    .get(`/application/${applicantID}/pdf`, { responseType: "blob" })
+    .then((res) => {
+      FileSaver.saveAs(
+        res.data,
+        res.headers["content-disposition"].split("filename=")[1]
+      );
+    });
+
+export const deleteFile = (
+  fileID: string,
+  applicantID = "@me"
+): Promise<void> =>
+  api.format.delete(`/application/${applicantID}/file/${fileID}`);
+
+export const uploadFile = (
+  fileType: FileType,
+  file: File,
+  fileName: string,
+  applicantID = "@me"
+): Promise<FileInfo> => {
+  // create FormData to append file with desired file name
+  const form = new FormData();
+  form.append("file", file, fileName);
+  // format the results, useful if there are errors!
+  return api.format.post<FileInfo>(
+    `application/${applicantID}/file/${fileType}`,
+    form,
+    {
+      headers: { "Content-Type": "multipart/form-data" },
+    }
+  );
+};

src/api/recommendations.ts

@@ -0,0 +1,33 @@
+import {
+  RecommendationFile,
+  RecommendationRequest,
+} from "types/recommendations";
+
+import api from "./axios";
+
+export const requestRecommendation = (
+  recommendationIndex: number,
+  email: string
+): Promise<RecommendationRequest> =>
+  api.format.post<RecommendationRequest>(
+    `/application/@me/recommendation/${recommendationIndex}`,
+    {
+      email,
+    }
+  );
+
+export const getRecommendationRequestConfig = (code: string): string =>
+  `/application/recommendation/${code}`;
+
+export const uploadLetterOfRecommendation = (
+  file: File,
+  fileName: string,
+  code: string
+): Promise<RecommendationFile> => {
+  const form = new FormData();
+  form.append("file", file, fileName);
+  return api.format.post<RecommendationFile>(
+    `/application/recommendation/${code}`,
+    form
+  );
+};

src/api/register.ts

@@ -0,0 +1,17 @@
+import { Applicant } from "types/user";
+import api from "./axios";
+
+/**
+ * Required values in a registration form for an applicant
+ */
+export type RegistrationForm = Pick<
+  Applicant,
+  "firstName" | "lastName" | "birthdate" | "email" | "finnish"
+>;
+
+/**
+ * Register an application
+ * @param {RegistrationForm} form values to register with
+ */
+export const register = (form: RegistrationForm): Promise<Applicant> =>
+  api.format.post<Applicant>("application", form);

src/api/sendLoginCode.ts

@@ -0,0 +1,41 @@
+import formatErrors, { FormattedErrors } from "utils/formatErrors";
+
+import { DEV_API_BASE_URL } from "./constants";
+import api from "./axios";
+
+/**
+ * Sends login code to your email
+ * @param {email}
+ * @returns {Promise<null | string>} returns either nothing or the login code
+ */
+const sendLoginCode = (email: string): Promise<string | null> =>
+  api.format.post<null | string>("/user/send_email_login_code", {
+    email,
+  });
+
+/**
+ * Required parameters for send login code request
+ */
+type SendLoginCodeParams = {
+  email: string; // the email which you signed up with
+};
+
+/**
+ * Sends login code to your email and displays it in a notification if it is run on the dev api
+ * @param email
+ * @returns the string or formatted errors
+ */
+export const sendLoginCodeAndShowCode = (
+  email: string
+): Promise<string | void | FormattedErrors<SendLoginCodeParams>> =>
+  api
+    .post<string | void>("/user/send_email_login_code", { email })
+    .then((res) => {
+      if (res.data && res.config.baseURL === DEV_API_BASE_URL) return res.data;
+      return;
+    })
+    .catch((err) => {
+      throw formatErrors(err);
+    });
+
+export default sendLoginCode;