Remove default exports

Better improves intellisense support

frontend/src/App.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import App from "./App";
+import { App } from "./App";
 
 it("renders without crashing", () => {
   const div = document.createElement("div");

frontend/src/App.tsx

@@ -1,15 +1,15 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { Grid } from "semantic-ui-react";
-import Header from "./components/Header";
-import History from "./components/History";
-import KeyCard from "./components/KeyCard";
-import KeyRequestForm from "./components/KeyRequestForm";
-import LoginForm from "./components/LoginForm";
-import TroubleshootingCard from "./components/TroubleshootingCard";
+import { Header } from "./components/Header";
+import { History } from "./components/History";
+import { KeyCard } from "./components/KeyCard";
+import { KeyRequestForm } from "./components/KeyRequestForm";
+import { LoginForm } from "./components/LoginForm";
+import { TroubleshootingCard } from "./components/TroubleshootingCard";
 import { updateUserInfo } from "./actions";
 
-const App = () => {
-  React.useEffect(() => {
+export const App = () => {
+  useEffect(() => {
     // We used to support OneLogin as a provider; this ensures it isn't kept around.
     if (localStorage.getItem("provider") !== "okta") {
       updateUserInfo({ username: "", password: "" });
@@ -39,5 +39,3 @@ const App = () => {
     </div>
   );
 };
-
-export default App;

frontend/src/components/Header.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Menu } from "semantic-ui-react";
 
-export default function Header() {
+export const Header = () => {
   return (
     <Menu fixed="top" fluid color="grey">
       <Menu.Item header>Key Conjurer</Menu.Item>

frontend/src/components/History.tsx

@@ -4,7 +4,7 @@ import keyConjurerLogo from "./../images/KeyConjurer.png";
 
 const binaryName = process.env.REACT_APP_BINARY_NAME;
 
-const History = () => (
+export const History = () => (
   <Card fluid>
     <Image src={keyConjurerLogo} />
     <Card.Content>
@@ -45,5 +45,3 @@ const History = () => (
     </Card.Content>
   </Card>
 );
-
-export default History;

frontend/src/components/KeyCard.tsx

@@ -46,5 +46,3 @@ export AWS_SECURITY_TOKEN=$AWS_SESSION_TOKEN`;
     </Card>
   );
 }
-
-export default KeyCard;

frontend/src/components/KeyRequestForm.test.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import KeyRequestForm from "./KeyRequestForm";
+import { KeyRequestForm } from "./KeyRequestForm";
 import { cleanup, render } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { update, resetAllStores } from "../stores";

frontend/src/components/KeyRequestForm.tsx

@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { Component, type ChangeEvent } from "react";
 import { Message, Form, Card } from "semantic-ui-react";
 import { requestKeys } from "../actions";
 import { subscribe } from "../stores";
@@ -7,7 +7,7 @@ const documentationURL = process.env.REACT_APP_DOCUMENTATION_URL;
 const timeouts = [1, 2, 3, 4, 5, 6, 7, 8];
 
 interface RoleInputProps {
-  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
   value: string;
 }
 
@@ -52,7 +52,7 @@ interface State {
   requestSent: boolean;
 }
 
-class KeyRequestForm extends Component<{}, State> {
+export class KeyRequestForm extends Component<{}, State> {
   state: State = {
     accounts: [],
     keyRequest: false,
@@ -71,17 +71,17 @@ class KeyRequestForm extends Component<{}, State> {
 
   handleChange =
     <K extends keyof State>(name: K) =>
-    (event: React.ChangeEvent<HTMLSelectElement | HTMLInputElement>) => {
-      if (name === "timeout") {
-        localStorage.setItem("timeout", event.currentTarget.value);
-      }
+      (event: ChangeEvent<HTMLSelectElement | HTMLInputElement>) => {
+        if (name === "timeout") {
+          localStorage.setItem("timeout", event.currentTarget.value);
+        }
 
-      this.setState((prevState) => {
-        return { ...prevState, [name]: event.currentTarget.value };
-      });
-    };
+        this.setState((prevState) => {
+          return { ...prevState, [name]: event.currentTarget.value };
+        });
+      };
 
-  setAccount = (event: React.ChangeEvent<HTMLSelectElement>) => {
+  setAccount = (event: ChangeEvent<HTMLSelectElement>) => {
     this.setState({ selectedAccount: event.currentTarget.value });
   };
 
@@ -259,5 +259,3 @@ class KeyRequestForm extends Component<{}, State> {
     );
   }
 }
-
-export default KeyRequestForm;

frontend/src/components/LoginForm.tsx

@@ -16,7 +16,7 @@ interface State {
   errorMessage?: string;
 }
 
-class LoginForm extends Component<{}, State> {
+export class LoginForm extends Component<{}, State> {
   state = {
     username: "",
     password: "",
@@ -68,13 +68,13 @@ class LoginForm extends Component<{}, State> {
 
     const handleTextChange =
       (property: "username" | "password") =>
-      (_event: unknown, data: { value: string }) => {
-        const { username, password } = this.state;
-        updateUserInfo({
-          username: "username" === property ? data.value : username,
-          password: "password" === property ? data.value : password,
-        });
-      };
+        (_event: unknown, data: { value: string }) => {
+          const { username, password } = this.state;
+          updateUserInfo({
+            username: "username" === property ? data.value : username,
+            password: "password" === property ? data.value : password,
+          });
+        };
 
     const handleSubmit = () => {
       const { username, password } = this.state;
@@ -125,5 +125,3 @@ class LoginForm extends Component<{}, State> {
     );
   }
 }
-
-export default LoginForm;

frontend/src/components/TroubleshootingCard.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Card } from "semantic-ui-react";
 
-const TroubleshootingCard = () => {
+export const TroubleshootingCard = () => {
   return (
     <Card fluid>
       <Card.Content>
@@ -14,5 +14,3 @@ const TroubleshootingCard = () => {
     </Card>
   );
 };
-
-export default TroubleshootingCard;

frontend/src/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import App from "./App";
+import { App } from "./App";
 import "./index.css";
 import "semantic-ui-css/semantic.min.css";