From 6722bd7bea9d795551c1af52e4248dd48c234600 Mon Sep 17 00:00:00 2001
From: Vladyslav Matsiiako <matsiiako@gmail.com>
Date: Sun, 27 Nov 2022 20:51:41 -0500
Subject: [PATCH] Converted Error and ListBox to typescript (#47)

---
 .../components/basic/{Error.js => Error.tsx}  |  4 +--
 .../basic/{Listbox.js => Listbox.tsx}         | 26 ++++++++++++++-----
 frontend/components/basic/buttons/Button.tsx  | 16 +++++++++++-
 frontend/tsconfig.json                        |  7 ++---
 4 files changed, 40 insertions(+), 13 deletions(-)
 rename frontend/components/basic/{Error.js => Error.tsx} (84%)
 rename frontend/components/basic/{Listbox.js => Listbox.tsx} (84%)

diff --git a/frontend/components/basic/Error.js b/frontend/components/basic/Error.tsx
similarity index 84%
rename from frontend/components/basic/Error.js
rename to frontend/components/basic/Error.tsx
index 78a181016..79cc6e5f1 100644
--- a/frontend/components/basic/Error.js
+++ b/frontend/components/basic/Error.tsx
@@ -1,8 +1,8 @@
-import React, { useState } from "react";
+import React from "react";
 import { faExclamationTriangle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-export default function Error({ text }) {
+export default function Error({ text }: { text: string }): JSX.Element {
   return (
     <div className="relative bg-red-500 opacity-100 border flex flex-row justify-center m-auto items-center w-fit rounded-full mb-4">
       <FontAwesomeIcon
diff --git a/frontend/components/basic/Listbox.js b/frontend/components/basic/Listbox.tsx
similarity index 84%
rename from frontend/components/basic/Listbox.js
rename to frontend/components/basic/Listbox.tsx
index 9949123f4..4d21ff33c 100644
--- a/frontend/components/basic/Listbox.js
+++ b/frontend/components/basic/Listbox.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 import { Fragment } from "react";
-import { useRouter } from "next/router";
 import {
   faAngleDown,
   faCheck,
@@ -9,9 +8,25 @@ import {
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Listbox, Transition } from "@headlessui/react";
 
+
+type ListBoxProps = {
+  selected: string,
+  onChange: () => void,
+  data: string[],
+  text: string,
+  buttonAction: () => void,
+  width: string,
+}
+
 /**
  * This is the component that we use for drop down lists.
- * @param {*} param0
+ * @param {object} obj
+ * @param {string} obj.selected - the item that is currently selected
+ * @param {function} obj.onChange - what happends if you select the item inside a list
+ * @param {string[]} obj.data - all the options available
+ * @param {string} obj.text - the text that shows us in front of the select option
+ * @param {function} obj.buttonAction - if there is a button at the bottom of the list, this is the action that happens when you click the button
+ * @param {string} obj.width - button width
  * @returns
  */
 export default function ListBox({
@@ -21,10 +36,7 @@ export default function ListBox({
   text,
   buttonAction,
   width,
-  workspaceMapping = [],
-}) {
-  const router = useRouter();
-
+} : ListBoxProps): JSX.Element {
   return (
     <Listbox value={selected} onChange={onChange}>
       <div className="relative">
@@ -61,7 +73,7 @@ export default function ListBox({
                     `my-0.5 relative cursor-default select-none py-2 pl-10 pr-4 rounded-md ${
                       selected ? "bg-white/10 text-gray-400 font-bold" : ""
                     } ${
-                      active & !selected
+                      active && !selected
                         ? "bg-white/5 text-mineshaft-200 cursor-pointer"
                         : "text-gray-400"
                     } `
diff --git a/frontend/components/basic/buttons/Button.tsx b/frontend/components/basic/buttons/Button.tsx
index c0db709c1..40251be93 100644
--- a/frontend/components/basic/buttons/Button.tsx
+++ b/frontend/components/basic/buttons/Button.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import Image from "next/image";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { FontAwesomeIcon, FontAwesomeIconProps } from "@fortawesome/react-fontawesome";
 
 var classNames = require("classnames");
 
@@ -17,6 +17,20 @@ type ButtonProps = {
   textDisabled: string;
 }
 
+/**
+ * This is the main butto component in the app.
+ * @param {object} props 
+ * @param {string} props.text - text inside the button
+ * @param {function} props.onButtonPressed - the action that happens when the button is clicked
+ * @param {boolean} props.loading - if a button is currently in the laoding state
+ * @param {string} props.color - button color
+ * @param {string} props.size - button size
+ * @param {FontAwesomeIconProps} props.icon - the icon inside the button
+ * @param {boolean} props.active - if the button is active or disabled
+ * @param {FontAwesomeIconProps} props.text - the icon inside the button when it is disabled
+ * @param {string} props.textDisable - text inside the button when it is disabled
+ * @returns 
+ */
 export default function Button (props: ButtonProps): JSX.Element {
   // Check if the button show always be 'active' - then true;
   // or if it should switch between 'active' and 'disabled' - then give the status
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 8791b97e3..ce99bdc6d 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -23,7 +23,8 @@
     ],
     "allowJs": true,
     "skipLibCheck": true,
-    "strict": false,
+    "strict": true,
+    "noImplicitAny": true,
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
     "esModuleInterop": true,
@@ -37,8 +38,8 @@
   "include": [
     "next-env.d.ts",
     "**/*.ts",
-    "**/*.tsx"
-, "components/basic/layout.js"  ],
+    "**/*.tsx",
+  ],
   "exclude": [
     "node_modules"
   ]