format code

src/frontend/src/App.tsx

@@ -11,11 +11,11 @@ import SuccessAlert from "./alerts/success";
 import CrashErrorComponent from "./components/CrashErrorComponent";
 import Header from "./components/headerComponent";
 import { alertContext } from "./contexts/alertContext";
+import { AuthContext } from "./contexts/authContext";
 import { locationContext } from "./contexts/locationContext";
 import { TabsContext } from "./contexts/tabsContext";
-import Router from "./routes";
-import { AuthContext } from "./contexts/authContext";
 import { getLoggedUser } from "./controllers/API";
+import Router from "./routes";
 
 export default function App() {
   let { setCurrent, setShowSideBar, setIsStackedOpen } =
@@ -131,14 +131,15 @@ export default function App() {
   const { setUserData, getAuthentication } = useContext(AuthContext);
   useEffect(() => {
     setTimeout(() => {
-        if(getAuthentication && !isLoginPage){
+      if (getAuthentication && !isLoginPage) {
-          getLoggedUser().then((user) => {
+        getLoggedUser()
+          .then((user) => {
             setUserData(user);
-          }).catch((error) => {});
+          })
+          .catch((error) => {});
       }
     }, 1000);
-  },[]);
+  }, []);
-
 
   return (
     //need parent component with width and height

src/frontend/src/components/PaginatorComponent/index.tsx

@@ -17,12 +17,9 @@ export default function PaginatorComponent({
   totalRowsCount = 0,
   paginate,
 }: PaginatorComponentType) {
-  
   const [size, setPageSize] = useState(pageSize);
   const [index, setPageIndex] = useState(pageIndex);
-  const [maxIndex, setMaxPageIndex] = useState(
+  const [maxIndex, setMaxPageIndex] = useState(100);
-    100
-  );
 
   return (
     <>
@@ -51,7 +48,7 @@ export default function PaginatorComponent({
             </Select>
           </div>
           <div className="flex w-[100px] items-center justify-center text-sm font-medium">
-            Page {index+1} of {maxIndex}
+            Page {index + 1} of {maxIndex}
           </div>
           <div className="flex items-center space-x-2">
             <Button

src/frontend/src/components/authLoginGuard/index.tsx

@@ -6,7 +6,7 @@ export const ProtectedLoginRoute = ({ children }) => {
   const { getAuthentication } = useContext(AuthContext);
 
   if (getAuthentication()) {
-    window.location.replace('/');
+    window.location.replace("/");
     return <Navigate to="/" replace />;
   }
 

src/frontend/src/components/genericIconComponent/index.tsx

@@ -1,12 +1,9 @@
-import React, { forwardRef } from 'react';
+import { forwardRef } from "react";
 import { IconComponentProps } from "../../types/components";
 import { nodeIconsLucide } from "../../utils/styleUtils";
 
-const ForwardedIconComponent = forwardRef(({
+const ForwardedIconComponent = forwardRef(
-  name,
+  ({ name, className, iconColor }: IconComponentProps, ref) => {
-  className,
-  iconColor,
-}: IconComponentProps, ref) => {
     const TargetIcon = nodeIconsLucide[name] ?? nodeIconsLucide["unknown"];
     return (
       <TargetIcon
@@ -16,6 +13,7 @@ const ForwardedIconComponent = forwardRef(({
         ref={ref}
       />
     );
-});
+  }
+);
 
 export default ForwardedIconComponent;

src/frontend/src/components/headerComponent/index.tsx

@@ -4,6 +4,7 @@ import { Link, useLocation, useNavigate } from "react-router-dom";
 import AlertDropdown from "../../alerts/alertDropDown";
 import { USER_PROJECTS_HEADER } from "../../constants/constants";
 import { alertContext } from "../../contexts/alertContext";
+import { AuthContext } from "../../contexts/authContext";
 import { darkContext } from "../../contexts/darkContext";
 import { TabsContext } from "../../contexts/tabsContext";
 import { getRepoStars } from "../../controllers/API";
@@ -11,7 +12,6 @@ import IconComponent from "../genericIconComponent";
 import { Button } from "../ui/button";
 import { Separator } from "../ui/separator";
 import MenuBar from "./components/menuBar";
-import { AuthContext } from "../../contexts/authContext";
 
 export default function Header() {
   const { flows, tabId } = useContext(TabsContext);
@@ -41,9 +41,10 @@ export default function Header() {
           onClick={() => {
             logout();
             navigate("/login");
-          
           }}
-        variant="outline" className="">
+          variant="outline"
+          className=""
+        >
           Sign out
         </Button>
         {flows.findIndex((f) => tabId === f.id) !== -1 && tabId !== "" && (

src/frontend/src/constants/constants.ts

@@ -507,7 +507,7 @@ export const URL_EXCLUDED_FROM_ERROR_RETRIES = [
   "/api/v1/validate/code",
   "/api/v1/custom_component",
   "/api/v1/validate/prompt",
-  "http://localhost:7860/login"
+  "http://localhost:7860/login",
 ];
 
 export const CONTROL_INPUT_STATE = {

src/frontend/src/contexts/index.tsx

@@ -3,19 +3,18 @@ import { ReactFlowProvider } from "reactflow";
 import { TooltipProvider } from "../components/ui/tooltip";
 import { SSEProvider } from "./SSEContext";
 import { AlertProvider } from "./alertContext";
+import { AuthProvider } from "./authContext";
 import { DarkProvider } from "./darkContext";
 import { LocationProvider } from "./locationContext";
 import { TabsProvider } from "./tabsContext";
 import { TypesProvider } from "./typesContext";
 import { UndoRedoProvider } from "./undoRedoContext";
-import { AuthProvider } from "./authContext";
 
 export default function ContextWrapper({ children }: { children: ReactNode }) {
   //element to wrap all context
   return (
     <>
       <AuthProvider>
-
         <TooltipProvider>
           <ReactFlowProvider>
             <DarkProvider>
@@ -34,7 +33,6 @@ export default function ContextWrapper({ children }: { children: ReactNode }) {
           </ReactFlowProvider>
         </TooltipProvider>
       </AuthProvider>
-
     </>
   );
 }

src/frontend/src/controllers/API/api.tsx

@@ -1,11 +1,10 @@
 import axios, { AxiosError, AxiosInstance } from "axios";
 import { useContext, useEffect } from "react";
+import { Cookies } from "react-cookie";
 import { useNavigate } from "react-router-dom";
 import { renewAccessToken } from ".";
-import { URL_EXCLUDED_FROM_ERROR_RETRIES } from "../../constants/constants";
 import { alertContext } from "../../contexts/alertContext";
 import { AuthContext } from "../../contexts/authContext";
-import { Cookies } from "react-cookie";
 
 // Create a new Axios instance
 const api: AxiosInstance = axios.create({
@@ -14,23 +13,23 @@ const api: AxiosInstance = axios.create({
 
 function ApiInterceptor() {
   const { setErrorData } = useContext(alertContext);
-  let { accessToken, login, logout, authenticationErrorCount } = useContext(AuthContext);
+  let { accessToken, login, logout, authenticationErrorCount } =
+    useContext(AuthContext);
   const navigate = useNavigate();
   const cookies = new Cookies();
 
   console.log(accessToken);
 
-
   useEffect(() => {
     const interceptor = api.interceptors.response.use(
       (response) => response,
       async (error: AxiosError) => {
         if (error.response?.status === 401) {
-          const refreshToken = cookies.get('refresh_token');
+          const refreshToken = cookies.get("refresh_token");
 
           if (refreshToken) {
             authenticationErrorCount = authenticationErrorCount + 1;
-            if(authenticationErrorCount > 3){
+            if (authenticationErrorCount > 3) {
               authenticationErrorCount = 0;
               logout();
               navigate("/login");
@@ -39,7 +38,7 @@ function ApiInterceptor() {
             const res = await renewAccessToken(refreshToken);
             login(res.data.access_token, res.data.refresh_token);
             try {
-              const accessToken = cookies.get('access_token');
+              const accessToken = cookies.get("access_token");
               delete error.config.headers["Authorization"];
               error.config.headers["Authorization"] = `Bearer ${accessToken}`;
               const response = await axios.request(error.config);
@@ -50,13 +49,11 @@ function ApiInterceptor() {
                 navigate("/login");
               }
             }
-          }
+          } else {
-          else{
             logout();
             navigate("/login");
           }
-        } 
+        } else {
-        else{
           // if (URL_EXCLUDED_FROM_ERROR_RETRIES.includes(error.config?.url)) {
           return Promise.reject(error);
           // }

src/frontend/src/controllers/API/index.ts

@@ -1,5 +1,6 @@
 import { AxiosResponse } from "axios";
 import { ReactFlowJsonObject } from "reactflow";
+import { BASE_URL_API } from "../../constants/constants";
 import { api } from "../../controllers/API/api";
 import {
   APIObjectType,
@@ -17,8 +18,6 @@ import {
   UploadFileTypeAPI,
   errorsTypeAPI,
 } from "./../../types/api/index";
-import { BASE_URL_API } from "../../constants/constants";
-
 
 /**
  * Fetches all objects from the API endpoint.
@@ -390,7 +389,6 @@ export async function renewAccessToken(token: string) {
 
 export async function getLoggedUser(): Promise<Users> {
   try {
-
     const res = await api.get(`${BASE_URL_API}user`);
 
     if (res.status === 200) {

src/frontend/src/modals/UserManagementModal/index.tsx

@@ -4,6 +4,7 @@ import { useContext, useEffect, useState } from "react";
 import { Button } from "../../components/ui/button";
 import { Checkbox } from "../../components/ui/checkbox";
 import { CONTROL_NEW_USER } from "../../constants/constants";
+import { AuthContext } from "../../contexts/authContext";
 import {
   UserInputType,
   UserManagementType,
@@ -11,7 +12,6 @@ import {
 } from "../../types/components";
 import { nodeIconsLucide } from "../../utils/styleUtils";
 import BaseModal from "../baseModal";
-import { AuthContext } from "../../contexts/authContext";
 
 export default function UserManagementModal({
   title,
@@ -24,7 +24,6 @@ export default function UserManagementModal({
   index,
   onConfirm,
 }: UserManagementType) {
-
   const Icon: any = nodeIconsLucide[icon];
   const [pwdVisible, setPwdVisible] = useState(false);
   const [confirmPwdVisible, setConfirmPwdVisible] = useState(false);
@@ -35,12 +34,10 @@ export default function UserManagementModal({
   const [isDisabled, setIsDisabled] = useState(data?.is_disabled ?? false);
   const [isSuperUser, setIsSuperUser] = useState(data?.is_superuser ?? false);
   const [inputState, setInputState] = useState<UserInputType>(CONTROL_NEW_USER);
-  const { userData} = useContext(AuthContext);
+  const { userData } = useContext(AuthContext);
-
 
   console.log(userData);
 
-
   function handleInput({
     target: { name, value },
   }: inputHandlerEventType): void {
@@ -50,8 +47,7 @@ export default function UserManagementModal({
   useEffect(() => {
     if (!data) {
       resetForm();
-    }
+    } else {
-    else{
       handleInput({ target: { name: "username", value: username } });
       handleInput({ target: { name: "is_disabled", value: isDisabled } });
       handleInput({ target: { name: "is_superuser", value: isSuperUser } });
@@ -139,15 +135,17 @@ export default function UserManagementModal({
                       {pwdVisible && (
                         <Eye
                           onClick={() => setPwdVisible(!pwdVisible)}
-                        className="h-5 cursor-pointer" strokeWidth={1.5} />
+                          className="h-5 cursor-pointer"
+                          strokeWidth={1.5}
+                        />
                       )}
-
                       {!pwdVisible && (
                         <EyeOff
                           onClick={() => setPwdVisible(!pwdVisible)}
-                        className="h-5 cursor-pointer" strokeWidth={1.5} />
+                          className="h-5 cursor-pointer"
+                          strokeWidth={1.5}
+                        />
                       )}
-
                     </Form.Label>
                   </div>
                   <Form.Control asChild>
@@ -194,14 +192,21 @@ export default function UserManagementModal({
                       </span>
                       {confirmPwdVisible && (
                         <Eye
-                        onClick={() => setConfirmPwdVisible(!confirmPwdVisible)}
+                          onClick={() =>
-                        className="h-5 cursor-pointer" strokeWidth={1.5} />
+                            setConfirmPwdVisible(!confirmPwdVisible)
+                          }
+                          className="h-5 cursor-pointer"
+                          strokeWidth={1.5}
+                        />
                       )}
-
                       {!confirmPwdVisible && (
                         <EyeOff
-                        onClick={() => setConfirmPwdVisible(!confirmPwdVisible)}
+                          onClick={() =>
-                        className="h-5 cursor-pointer" strokeWidth={1.5} />
+                            setConfirmPwdVisible(!confirmPwdVisible)
+                          }
+                          className="h-5 cursor-pointer"
+                          strokeWidth={1.5}
+                        />
                       )}
                     </Form.Label>
                   </div>
@@ -265,7 +270,6 @@ export default function UserManagementModal({
                   </div>
                 </Form.Field>
               )}
-
             </div>
           </div>
 

src/frontend/src/pages/AdminPage/LoginPage/index.tsx

@@ -47,15 +47,17 @@ export default function LoginAdminPage() {
       });
   }
 
-  function getUser(){
+  function getUser() {
-    if(getAuthentication){
+    if (getAuthentication) {
       setTimeout(() => {
-        getLoggedUser().then((user) => {
+        getLoggedUser()
+          .then((user) => {
             setUserData(user);
-        }).catch((error) => {});
+          })
+          .catch((error) => {});
       }, 1000);
     }
-}
+  }
 
   return (
     <div className="flex h-full w-full flex-col items-center justify-center bg-muted">

src/frontend/src/pages/loginPage/index.tsx

@@ -1,7 +1,6 @@
 import * as Form from "@radix-ui/react-form";
 import { useContext, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
-import IconComponent from "../../components/genericIconComponent";
 import InputComponent from "../../components/inputComponent";
 import { Button } from "../../components/ui/button";
 import { Input } from "../../components/ui/input";
@@ -49,15 +48,17 @@ export default function LoginPage(): JSX.Element {
       });
   }
 
-  function getUser(){
+  function getUser() {
-    if(getAuthentication){
+    if (getAuthentication) {
       setTimeout(() => {
-        getLoggedUser().then((user) => {
+        getLoggedUser()
+          .then((user) => {
             setUserData(user);
-        }).catch((error) => {});
+          })
+          .catch((error) => {});
       }, 1000);
     }
-}
+  }
 
   return (
     <Form.Root
@@ -126,9 +127,7 @@ export default function LoginPage(): JSX.Element {
           </div>
           <div className="w-full">
             <Form.Submit asChild>
-              <Button className="mr-3 mt-6 w-full">
+              <Button className="mr-3 mt-6 w-full">Sign in</Button>
-                Sign in
-              </Button>
             </Form.Submit>
           </div>
           <div className="w-full">

src/frontend/src/pages/signUpPage/index.tsx

@@ -1,7 +1,6 @@
 import * as Form from "@radix-ui/react-form";
 import { FormEvent, useState } from "react";
 import { Link } from "react-router-dom";
-import IconComponent from "../../components/genericIconComponent";
 import InputComponent from "../../components/inputComponent";
 import { Button } from "../../components/ui/button";
 import { Input } from "../../components/ui/input";

src/frontend/src/types/components/index.ts

@@ -230,6 +230,6 @@ export type loginInputStateType = {
 export type UserInputType = {
   username: string;
   password: string;
-  is_disabled:boolean;
+  is_disabled: boolean;
   is_superuser: boolean;
 };