Merge pull request #222 from akhilmhdh/feat/migration-ts

migration(frontend): migrated frontend files to ts execpt dialog component

frontend/components/RouteGuard.js → frontend/components/RouteGuard.tsx

@@ -1,14 +1,17 @@
-import { useEffect, useState } from 'react';
-import Image from 'next/image';
-import { useRouter } from 'next/router';
+import { ReactNode, useEffect, useState } from "react";
+import { useRouter } from "next/router";
 
-import { publicPaths } from '~/const';
-import checkAuth from '~/pages/api/auth/CheckAuth';
+import { publicPaths } from "~/const";
+import checkAuth from "~/pages/api/auth/CheckAuth";
 
 // #TODO: finish spinner only when the data loads fully
 // #TODO: Redirect somewhere if the page does not exist
 
-export default function RouteGuard({ children }) {
+type Prop = {
+  children: ReactNode;
+};
+
+export default function RouteGuard({ children }: Prop) {
   const router = useRouter();
   const [authorized, setAuthorized] = useState(false);
 
@@ -22,28 +25,27 @@ export default function RouteGuard({ children }) {
     // #TODO: add the loading page when not yet authorized.
     const hideContent = () => setAuthorized(false);
     // const onError = () => setAuthorized(true)
-    router.events.on('routeChangeStart', hideContent);
+    router.events.on("routeChangeStart", hideContent);
     // router.events.on("routeChangeError", onError);
 
     // on route change complete - run auth check
-    router.events.on('routeChangeComplete', authCheck);
+    router.events.on("routeChangeComplete", authCheck);
 
     // unsubscribe from events in useEffect return function
     return () => {
-      router.events.off('routeChangeStart', hideContent);
-      router.events.off('routeChangeComplete', authCheck);
+      router.events.off("routeChangeStart", hideContent);
+      router.events.off("routeChangeComplete", authCheck);
       // router.events.off("routeChangeError", onError);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   /**
    * redirect to login page if accessing a private page and not logged in
-   * @param {*} url - the url of the page we are trying to go to
    */
-  async function authCheck(url) {
+  async function authCheck(url:string) {
     // Make sure that we don't redirect when the user is on the following pages.
-    const path = '/' + url.split('?')[0].split('/')[1];
+    const path = "/" + url.split("?")[0].split("/")[1];
 
     // Check if the user is authenticated
     const response = await checkAuth();
@@ -52,16 +54,16 @@ export default function RouteGuard({ children }) {
     if (!publicPaths.includes(path)) {
       try {
         if (response.status !== 200) {
-          router.push('/login');
-          console.log('Unauthorized to access.');
+          router.push("/login");
+          console.log("Unauthorized to access.");
           setAuthorized(false);
         } else {
           setAuthorized(true);
-          console.log('Authorized to access.');
+          console.log("Authorized to access.");
         }
       } catch (error) {
         console.log(
-          'Error (probably the authCheck route is stuck again...):',
+          "Error (probably the authCheck route is stuck again...):",
           error
         );
       }

frontend/components/basic/Error.tsx

@@ -1,16 +1,15 @@
-import React from "react";
-import { faExclamationTriangle } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 export default function Error({ text }: { text: string }): JSX.Element {
   return (
-    <div className="relative flex flex-row justify-center m-auto items-center w-fit rounded-full">
+    <div className='relative flex flex-row justify-center m-auto items-center w-fit rounded-full'>
       <FontAwesomeIcon
         icon={faExclamationTriangle}
-        className="text-red mt-1.5 mb-2 mx-2"
+        className='text-red mt-1.5 mb-2 mx-2'
       />
       {text && (
-        <p className="relative top-0 text-red mr-2 text-sm py-1">{text}</p>
+        <p className='relative top-0 text-red mr-2 text-sm py-1'>{text}</p>
       )}
     </div>
   );

frontend/components/basic/InputField.tsx

@@ -1,4 +1,4 @@
-import { memo,useState } from 'react';
+import { memo, useState } from 'react';
 import { faCircle, faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
@@ -28,20 +28,20 @@ const InputField = (
 
   if (props.static === true) {
     return (
-      <div className="flex flex-col my-2 md:my-4 justify-center w-full max-w-md">
-        <p className="text-sm font-semibold text-gray-400 mb-0.5">
+      <div className='flex flex-col my-2 md:my-4 justify-center w-full max-w-md'>
+        <p className='text-sm font-semibold text-gray-400 mb-0.5'>
           {props.label}
         </p>
         {props.text && (
-          <p className="text-xs text-gray-400 mb-2">{props.text}</p>
+          <p className='text-xs text-gray-400 mb-2'>{props.text}</p>
         )}
         <input
           onChange={(e) => props.onChangeHandler(e.target.value)}
           type={props.type}
           placeholder={props.placeholder}
           value={props.value}
           required={props.isRequired}
-          className="bg-bunker-800 text-gray-400 border border-gray-600 rounded-md text-md p-2 w-full min-w-16 outline-none"
+          className='bg-bunker-800 text-gray-400 border border-gray-600 rounded-md text-md p-2 w-full min-w-16 outline-none'
           name={props.name}
           readOnly
           autoComplete={props.autoComplete}
@@ -51,9 +51,9 @@ const InputField = (
     );
   } else {
     return (
-      <div className="flex-col w-full">
-        <div className="flex flex-row text-mineshaft-300 items-center mb-0.5">
-          <p className="text-sm font-semibold mr-1">{props.label}</p>
+      <div className='flex-col w-full'>
+        <div className='flex flex-row text-mineshaft-300 items-center mb-0.5'>
+          <p className='text-sm font-semibold mr-1'>{props.label}</p>
           {/* {props.label == "Password" && router.asPath != "/login" && (
 						<div className="mb-0.5 relative inline-block text-gray-400 underline hover:text-primary duration-200">
 							<FontAwesomeIcon
@@ -90,17 +90,17 @@ const InputField = (
               props.error ? 'focus:ring-red/50' : 'focus:ring-primary/50'
             } relative peer bg-bunker-800 rounded-md text-gray-400 text-md p-2 w-full min-w-16 outline-none focus:ring-4 duration-200`}
             name={props.name}
-            spellCheck="false"
+            spellCheck='false'
             autoComplete={props.autoComplete}
             id={props.id}
           />
           {props.label?.includes('Password') && (
             <button
-              type="button"
+              type='button'
               onClick={() => {
                 setPasswordVisible(!passwordVisible);
               }}
-              className="absolute self-end mr-3 text-gray-400 cursor-pointer"
+              className='absolute self-end mr-3 text-gray-400 cursor-pointer'
             >
               {passwordVisible ? (
                 <FontAwesomeIcon icon={faEyeSlash} />
@@ -110,15 +110,15 @@ const InputField = (
             </button>
           )}
           {props.blurred && (
-            <div className="peer group-hover:hidden peer-hover:hidden peer-focus:hidden peer-active:invisible absolute h-10 w-fit max-w-xl rounded-md flex items-center text-gray-400/50 text-clip overflow-hidden">
-              <p className="ml-2"></p>
+            <div className='peer group-hover:hidden peer-hover:hidden peer-focus:hidden peer-active:invisible absolute h-10 w-fit max-w-xl rounded-md flex items-center text-gray-400/50 text-clip overflow-hidden'>
+              <p className='ml-2'></p>
               {props.value
                 .split('')
                 .slice(0, 54)
                 .map(() => (
                   <FontAwesomeIcon
                     key={guidGenerator()}
-                    className="text-xxs mx-0.5"
+                    className='text-xxs mx-0.5'
                     icon={faCircle}
                   />
                 ))}
@@ -131,7 +131,7 @@ const InputField = (
 					)} */}
         </div>
         {props.error && (
-          <p className="text-red text-xs mt-0.5 mx-0 mb-2 max-w-xs">
+          <p className='text-red text-xs mt-0.5 mx-0 mb-2 max-w-xs'>
             {props.errorText}
           </p>
         )}

frontend/components/basic/Listbox.tsx

@@ -3,7 +3,7 @@ import { Fragment } from 'react';
 import {
   faAngleDown,
   faCheck,
-  faPlus
+  faPlus,
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Listbox, Transition } from '@headlessui/react';
@@ -25,7 +25,6 @@ interface ListBoxProps {
  * @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({
@@ -34,37 +33,37 @@ export default function ListBox({
   data,
   text,
   buttonAction,
-  isFull
+  isFull,
 }: ListBoxProps): JSX.Element {
   return (
     <Listbox value={selected} onChange={onChange}>
-      <div className="relative">
+      <div className='relative'>
         <Listbox.Button
           className={`text-gray-400 relative ${
             isFull ? 'w-full' : 'w-52'
           } cursor-default rounded-md bg-white/[0.07] hover:bg-white/[0.11] duration-200 py-2.5 pl-3 pr-10 text-left shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm`}
         >
-          <div className="flex flex-row">
+          <div className='flex flex-row'>
             {text}
-            <span className="ml-1 cursor-pointer block truncate font-semibold text-gray-300 capitalize">
+            <span className='ml-1 cursor-pointer block truncate font-semibold text-gray-300 capitalize'>
               {' '}
               {selected}
             </span>
           </div>
           {data && (
-            <div className="cursor-pointer pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
-              <FontAwesomeIcon icon={faAngleDown} className="text-md mr-1.5" />
+            <div className='cursor-pointer pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2'>
+              <FontAwesomeIcon icon={faAngleDown} className='text-md mr-1.5' />
             </div>
           )}
         </Listbox.Button>
         {data && (
           <Transition
             as={Fragment}
-            leave="transition ease-in duration-100"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
+            leave='transition ease-in duration-100'
+            leaveFrom='opacity-100'
+            leaveTo='opacity-0'
           >
-            <Listbox.Options className="border border-mineshaft-700 z-50 p-2 absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-bunker text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+            <Listbox.Options className='border border-mineshaft-700 z-50 p-2 absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-bunker text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm'>
               {data.map((person, personIdx) => (
                 <Listbox.Option
                   key={personIdx}
@@ -89,10 +88,10 @@ export default function ListBox({
                         {person}
                       </span>
                       {selected ? (
-                        <span className="text-primary rounded-lg absolute inset-y-0 left-0 flex items-center pl-3">
+                        <span className='text-primary rounded-lg absolute inset-y-0 left-0 flex items-center pl-3'>
                           <FontAwesomeIcon
                             icon={faCheck}
-                            className="text-md ml-1"
+                            className='text-md ml-1'
                           />
                         </span>
                       ) : null}
@@ -103,11 +102,11 @@ export default function ListBox({
               {buttonAction && (
                 <button
                   onClick={buttonAction}
-                  className="cursor-pointer w-full"
+                  className='cursor-pointer w-full'
                 >
-                  <div className="my-0.5 relative flex justify-start cursor-pointer select-none py-2 pl-10 pr-4 rounded-md text-gray-400 hover:bg-lime-300 duration-200 hover:text-black hover:font-semibold mt-2">
-                    <span className="rounded-lg absolute inset-y-0 left-0 flex items-center pl-3 pr-4">
-                      <FontAwesomeIcon icon={faPlus} className="text-lg" />
+                  <div className='my-0.5 relative flex justify-start cursor-pointer select-none py-2 pl-10 pr-4 rounded-md text-gray-400 hover:bg-lime-300 duration-200 hover:text-black hover:font-semibold mt-2'>
+                    <span className='rounded-lg absolute inset-y-0 left-0 flex items-center pl-3 pr-4'>
+                      <FontAwesomeIcon icon={faPlus} className='text-lg' />
                     </span>
                     Add Project
                   </div>

frontend/components/basic/Toggle.tsx

@@ -1,27 +1,26 @@
-import React from "react";
-import { Switch } from "@headlessui/react";
+import { Switch } from '@headlessui/react';
 
-interface ToggleProps { 
-  enabled: boolean; 
-  setEnabled: (value: boolean) => void; 
-  addOverride: (value: string | undefined, pos: number) => void; 
+interface ToggleProps {
+  enabled: boolean;
+  setEnabled: (value: boolean) => void;
+  addOverride: (value: string | undefined, pos: number) => void;
   pos: number;
 }
 
 /**
  * This is a typical 'iPhone' toggle (e.g., user for overriding secrets with personal values)
- * @param obj 
+ * @param obj
  * @param {boolean} obj.enabled - whether the toggle is turned on or off
  * @param {function} obj.setEnabled - change the state of the toggle
  * @param {function} obj.addOverride - a function that adds an override to a certain secret
  * @param {number} obj.pos - position of a certain secret
- * @returns 
+ * @returns
  */
-export default function Toggle ({ 
-  enabled, 
-  setEnabled, 
-  addOverride, 
-  pos
+export default function Toggle({
+  enabled,
+  setEnabled,
+  addOverride,
+  pos,
 }: ToggleProps): JSX.Element {
   return (
     <Switch
@@ -38,12 +37,12 @@ export default function Toggle ({
         enabled ? 'bg-primary' : 'bg-bunker-400'
       } relative inline-flex h-5 w-9 items-center rounded-full`}
     >
-      <span className="sr-only">Enable notifications</span>
+      <span className='sr-only'>Enable notifications</span>
       <span
         className={`${
           enabled ? 'translate-x-[1.26rem]' : 'translate-x-0.5'
         } inline-block h-3.5 w-3.5 transform rounded-full bg-bunker-800 transition`}
       />
     </Switch>
-  )
+  );
 }