Converted Button component to typescript (#47)

frontend/components/basic/buttons/Button.js

@@ -1,111 +0,0 @@
-import React from "react";
-import Image from "next/image";
-import Link from "next/link";
-import { faPlus } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-var classNames = require("classnames");
-
-export default function Button({
-  text,
-  onButtonPressed,
-  link,
-  loading,
-  color,
-  size,
-  icon,
-  active = true,
-  iconDisabled,
-  textDisabled,
-}) {
-  let styleButton = classNames(
-    "group m-auto md:m-0 inline-block rounded-md duration-200",
-
-    // Setting background colors and hover modes
-    color == "mineshaft" && active && "bg-mineshaft-700 hover:bg-primary",
-    color == "mineshaft" && !active && "bg-mineshaft",
-    (color == "primary" || !color) && active && "bg-primary hover:opacity-80",
-    (color == "primary" || !color) && !active && "bg-primary",
-    color == "red" && "bg-red",
-
-    // Changing the opacity when active vs when not
-    active ? "opacity-100 cursor-pointer" : "opacity-40",
-
-    // Setting the button sizes
-    size == "md" && "h-10 w-full px-2 md:px-4",
-    size == "lg" && "h-12 w-full px-2 md:px-8",
-    !size && "md:py-1 px-3 md:px-8",
-    size == "icon-md" && "h-10 w-10 flex items-center justify-center",
-    size == "icon-sm" && "h-9 w-9 flex items-center justify-center"
-  );
-
-  let styleMainDiv = classNames(
-    "relative font-medium flex items-center",
-
-    // Setting the text color for the text and icon
-    color == "mineshaft" && "text-gray-400",
-    color != "mineshaft" && color != "red" && "text-black",
-    color == "red" && "text-gray-200",
-    active && color != "red" ? "group-hover:text-black" : "",
-
-    size == "icon" && "flex items-center justify-center"
-  );
-
-  let textStyle = classNames(
-    "relative duration-200",
-
-    // Show the loading sign if the loading indicator is on
-    loading == true ? "opacity-0" : "opacity-100",
-    size == "md" && "text-sm",
-    size == "lg" && "text-lg"
-  );
-
-  const button = (
-    <button
-      disabled={!active}
-      onClick={onButtonPressed}
-      className={styleButton}
-    >
-      <div className={styleMainDiv}>
-        <div
-          className={`${
-            loading == true ? "opacity-100" : "opacity-0"
-          } absolute flex items-center px-2 duration-200`}
-        >
-          <Image
-            src="/images/loading/loadingblack.gif"
-            height={25}
-            width={42}
-            alt="loading animation"
-            className={`rounded-xl`}
-          ></Image>
-        </div>
-        {icon && (
-          <FontAwesomeIcon
-            icon={icon}
-            className={`flex my-auto font-extrabold ${
-              size == "icon-sm" ? "text-sm" : "text-md"
-            } ${(text || textDisabled) && "mr-2"}`}
-          />
-        )}
-        {iconDisabled && (
-          <FontAwesomeIcon
-            icon={iconDisabled}
-            className={`flex my-auto font-extrabold ${
-              size == "icon-sm" ? "text-sm" : "text-md"
-            } ${(text || textDisabled) && "mr-2"}`}
-          />
-        )}
-        {(text || textDisabled) && (
-          <p className={textStyle}>{active ? text : textDisabled}</p>
-        )}
-      </div>
-    </button>
-  );
-
-  if (link) {
-    return <Link href={link}>{button}</Link>;
-  }
-
-  return button;
-}

frontend/components/basic/buttons/Button.tsx

@@ -0,0 +1,111 @@
+import React from "react";
+import Image from "next/image";
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+var classNames = require("classnames");
+
+type ButtonProps = {
+  text: string;
+  onButtonPressed: () => void;
+  loading: boolean;
+  color: string;
+  size: string;
+  icon: IconProp;
+  active: boolean;
+  iconDisabled: string;
+  textDisabled: string;
+}
+
+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
+  const activityStatus = props.active || (props.text != "" && props.textDisabled == undefined)
+  
+  let styleButton = classNames(
+    "group m-auto md:m-0 inline-block rounded-md duration-200",
+
+    // Setting background colors and hover modes
+    props.color == "mineshaft" && activityStatus && "bg-mineshaft-700 hover:bg-primary",
+    props.color == "mineshaft" && !activityStatus && "bg-mineshaft",
+    (props.color == "primary" || !props.color) && activityStatus && "bg-primary hover:opacity-80",
+    (props.color == "primary" || !props.color) && !activityStatus && "bg-primary",
+    props.color == "red" && "bg-red",
+
+    // Changing the opacity when active vs when not
+    activityStatus ? "opacity-100 cursor-pointer" : "opacity-40",
+
+    // Setting the button sizes
+    props.size == "md" && "h-10 w-full px-2 md:px-4",
+    props.size == "lg" && "h-12 w-full px-2 md:px-8",
+    !props.size && "md:py-1 px-3 md:px-8",
+    props.size == "icon-md" && "h-10 w-10 flex items-center justify-center",
+    props.size == "icon-sm" && "h-9 w-9 flex items-center justify-center"
+  );
+
+  let styleMainDiv = classNames(
+    "relative font-medium flex items-center",
+
+    // Setting the text color for the text and icon
+    props.color == "mineshaft" && "text-gray-400",
+    props.color != "mineshaft" && props.color != "red" && "text-black",
+    props.color == "red" && "text-gray-200",
+    activityStatus && props.color != "red" ? "group-hover:text-black" : "",
+
+    props.size == "icon" && "flex items-center justify-center"
+  );
+
+  let textStyle = classNames(
+    "relative duration-200",
+
+    // Show the loading sign if the loading indicator is on
+    props.loading == true ? "opacity-0" : "opacity-100",
+    props.size == "md" && "text-sm",
+    props.size == "lg" && "text-lg"
+  );
+
+  const button = (
+    <button
+      disabled={!activityStatus}
+      onClick={props.onButtonPressed}
+      className={styleButton}
+    >
+      <div className={styleMainDiv}>
+        <div
+          className={`${
+            props.loading == true ? "opacity-100" : "opacity-0"
+          } absolute flex items-center px-2 duration-200`}
+        >
+          <Image
+            src="/images/loading/loadingblack.gif"
+            height={25}
+            width={42}
+            alt="loading animation"
+            className={`rounded-xl`}
+          ></Image>
+        </div>
+        {props.icon && (
+          <FontAwesomeIcon
+            icon={props.icon as IconProp}
+            className={`flex my-auto font-extrabold ${
+              props.size == "icon-sm" ? "text-sm" : "text-md"
+            } ${(props.text || props.textDisabled) && "mr-2"}`}
+          />
+        )}
+        {props.iconDisabled && (
+          <FontAwesomeIcon
+            icon={props.iconDisabled as IconProp}
+            className={`flex my-auto font-extrabold ${
+              props.size == "icon-sm" ? "text-sm" : "text-md"
+            } ${(props.text || props.textDisabled) && "mr-2"}`}
+          />
+        )}
+        {(props.text || props.textDisabled) && (
+          <p className={textStyle}>{activityStatus ? props.text : props.textDisabled}</p>
+        )}
+      </div>
+    </button>
+  );
+
+  return button;
+}

frontend/components/basic/table/UserTable.js

@@ -185,7 +185,7 @@ const UserTable = ({
                         )}
                         {(row.status == "invited" ||
                           row.status == "verified") && (
-                          <div className="w-full pl-12">
+                          <div className="w-full pl-9">
                             <Button
                               onButtonPressed={() =>
                                 deleteMembershipAndResendInvite(

frontend/jsconfig.json

@@ -1,19 +0,0 @@
-{
-	"compilerOptions": {
-		"baseUrl": ".",
-		"paths": {
-			"~/components/*": [
-				"components/*"
-			],
-			"~/utilities/*": [
-				"components/utilities/*"
-			],
-			"~/*": [
-				"const"
-			],
-			"~/pages/*": [
-				"pages/*"
-			],
-		}
-	}
-}

frontend/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

frontend/package.json

@@ -16,7 +16,6 @@
     "@fortawesome/free-solid-svg-icons": "^6.1.2",
     "@fortawesome/react-fontawesome": "^0.1.19",
     "@headlessui/react": "^1.6.6",
-    "@heroicons/react": "^1.0.6",
     "@reduxjs/toolkit": "^1.8.3",
     "@stripe/react-stripe-js": "^1.10.0",
     "@stripe/stripe-js": "^1.35.0",
@@ -53,6 +52,7 @@
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.4",
+    "@types/node": "18.11.9",
     "autoprefixer": "^10.4.7",
     "eslint": "^8.28.0",
     "eslint-config-next": "^13.0.5",

frontend/tsconfig.json

@@ -0,0 +1,45 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "~/components/*": [
+        "components/*"
+      ],
+      "~/utilities/*": [
+        "components/utilities/*"
+      ],
+      "~/*": [
+        "const"
+      ],
+      "~/pages/*": [
+        "pages/*"
+      ]
+    },
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+, "components/basic/layout.js"  ],
+  "exclude": [
+    "node_modules"
+  ]
+}