Fix ESLint and CSS Minimizer errors blocking npm run build (#17)

## Summary
- Closes #16
- Clear unused imports/bindings, empty `{}` prop patterns, `==` vs `===`, and hook dependency gaps across App, contexts, and pages
- Replace invalid `calc(3rem + unset)` in `index.css` so Css Minimizer no longer fails

## Test plan
- [x] `npm run build` in `llm-fe` succeeds (no ESLint / postcss-calc errors)
- [ ] Spot-check SignIn, dashboard, account, feedback, document storage pages still render
- [ ] Confirm WebSocket/message flows still work after MessageContext dep cleanupReviewed-on: #17

llm-fe/src/App.tsx

@@ -1,18 +1,12 @@
 import React, { Component, useContext } from 'react';
 import './App.css';
-import Dashboard from './llm-fe/pages/Dashboard/Dashboard';
+import { Routes, Route, Outlet, Navigate } from 'react-router-dom';
-import { Routes, Route, createRoutesFromElements, Outlet, Navigate, useLocation } from 'react-router-dom';
-import { createRoot } from 'react-dom/client';
 import SignIn from './llm-fe/pages/SignIn/SignIn';
 import PasswordReset from './llm-fe/pages/PasswordReset/PasswordReset';
 import NotFound from './llm-fe/pages/NotFound/NotFound';
-import { AuthContext, AuthProvider } from './llm-fe/contexts/AuthContext';
+import { AuthContext } from './llm-fe/contexts/AuthContext';
-import AccountPage from './llm-fe/pages/Account/Account';
-import AsyncDashboard from './llm-fe/pages/AsyncDashboard/AsyncDashboard';
 import TermsOfService from './llm-fe/pages/TermsOfService/TermsOfService';
 import SetPassword from './llm-fe/components/SetPassword/SetPassword';
-import FeedbackPage from './llm-fe/pages/FeedbackPage/FeedbackPage';
-import { Typography } from '@mui/material';
 import AsyncDashboard2 from './llm-fe/pages/AsyncDashboard2/AsyncDashboard2';
 import FeedbackPage2 from './llm-fe/pages/FeedbackPage2/FeedbackPage2';
 import DocumentStoragePage from './llm-fe/pages/DocumentStoragePage/DocumentStoragePage';
@@ -23,7 +17,7 @@ import GlobalThemeWrapper from './llm-fe/components/GlobalThemeWrapper/GlobalThe
 import Tracker from './llm-fe/components/Tracker/Tracker';
 
 const ProtectedRoutes = () => {
-  const { authenticated, needsNewPassword, loading } = useContext(AuthContext);
+  const { authenticated, loading } = useContext(AuthContext);
   if (loading) {
     return (
       <div>Loading</div>
@@ -84,4 +78,3 @@ class App extends Component {
 }
 
 export default App;
-

llm-fe/src/axiosApi.js

@@ -53,8 +53,8 @@ axiosInstance.interceptors.response.use(
 
     if (
       error.response.data.code === "token_not_valid" &&
-      error.response.status == 401 &&
+      error.response.status === 401 &&
-      error.response.statusText == "Unauthorized"
+      error.response.statusText === "Unauthorized"
     ) {
       const refresh_token = localStorage.getItem("refresh_token");
 

llm-fe/src/llm-fe/components/Footer/Footer.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import MDTypography from '../../ui-kit/components/MDTypography';
 
-const Footer = ({}): JSX.Element => {
+const Footer = (): JSX.Element => {
   return (
    
     <div className='continer-fluid'>

llm-fe/src/llm-fe/components/PageWrapperLayout/PageWrapperLayout.tsx

@@ -1,11 +1,10 @@
 import createCache, { EmotionCache } from "@emotion/cache";
-import { setOpenConfigurator, useMaterialUIController } from "../../ui-kit/context";
+import { useMaterialUIController } from "../../ui-kit/context";
 import { useEffect, useMemo, useState } from "react";
 import { useLocation } from "react-router-dom";
 import stylisRTLPlugin from "stylis-plugin-rtl";
-import MDBox from "../../ui-kit/components/MDBox";
 import { CacheProvider } from "@emotion/react";
-import { CssBaseline, Icon, ThemeProvider } from "@mui/material";
+import { CssBaseline, ThemeProvider } from "@mui/material";
 import createTheme from "../../ui-kit/assets/theme";
 import createDarkTheme from "../../ui-kit/assets/theme-dark";
 import themeRtl from "../../ui-kit/assets/theme/theme-rtl";
@@ -18,10 +17,9 @@ type PageWrapperLayoutProps = {
 
 const PageWrapperLayout = ({ children }: PageWrapperLayoutProps): JSX.Element => {
 
-  const [controller, dispatch] = useMaterialUIController();
+  const [controller] = useMaterialUIController();
   const {
     direction,
-    openConfigurator,
     darkMode,
     themeColor,
   } = controller;
@@ -38,9 +36,6 @@ const PageWrapperLayout = ({ children }: PageWrapperLayoutProps): JSX.Element =>
     setRtlCache(cacheRtl);
   }, []);
 
-  // Change the openConfigurator state
-  const handleConfiguratorOpen = () => setOpenConfigurator(dispatch, !openConfigurator);
-
   // Setting the dir attribute for the body element
   useEffect(() => {
     document.body.setAttribute("dir", direction);
@@ -54,30 +49,6 @@ const PageWrapperLayout = ({ children }: PageWrapperLayoutProps): JSX.Element =>
     }
   }, [pathname]);
 
-  const configsButton = (
-    <MDBox
-      display="flex"
-      justifyContent="center"
-      alignItems="center"
-      width="3.25rem"
-      height="3.25rem"
-      bgColor="white"
-      shadow="sm"
-      borderRadius="50%"
-      position="fixed"
-      right="2rem"
-      bottom="2rem"
-      zIndex={99}
-      color="dark"
-      sx={{ cursor: "pointer" }}
-      onClick={handleConfiguratorOpen}
-    >
-      <Icon fontSize="small" color="inherit">
-        settings
-      </Icon>
-    </MDBox>
-  );
-
   return direction === "rtl" ? (
     <CacheProvider value={rtlCache}>
       <ThemeProvider theme={darkMode ? themeDarkRTL : themeRtl}>

llm-fe/src/llm-fe/components/ParticleBackground/ParticleBackground.tsx

@@ -49,15 +49,6 @@ const ParticleBackground = () => {
                 this.vy = (Math.random() - 0.5) * 0.5;
                 this.size = Math.random() * 2 + 1;
                 // Use theme main color or fallback
-                const baseColor = theme?.main || '#6495ed';
-                // Convert hex to rgb for opacity if needed, or just use it directly if it's already compatible
-                // For simplicity, let's assume theme.main is a hex and we want to add opacity. 
-                // But here we are using a fixed color for now, let's try to use the theme color.
-                this.color = theme?.darkMode
-                    ? `rgba(100, 149, 237, ${Math.random() * 0.5 + 0.2})`
-                    : `rgba(100, 149, 237, ${Math.random() * 0.5 + 0.2})`; // Keep blueish for now, maybe change later
-
-                // Better approach: use the theme main color
                 this.color = theme?.main
                     ? `${theme.main}${Math.floor((Math.random() * 0.5 + 0.2) * 255).toString(16).padStart(2, '0')}`
                     : `rgba(100, 149, 237, ${Math.random() * 0.5 + 0.2})`;

llm-fe/src/llm-fe/components/SetPassword/SetPassword.tsx

@@ -1,7 +1,7 @@
 import { Form, Formik } from 'formik';
-import React, { Dispatch, PropsWithChildren, SetStateAction, useState } from 'react';
+import React from 'react';
 import CustomPasswordField from '../../components/CustomPasswordField/CustomPasswordField';
-import { Alert, Button, Stack, Typography } from '@mui/material';
+import { Stack, Typography } from '@mui/material';
 import { axiosInstance } from '../../../axiosApi';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import CustomToastMessage from '../../components/CustomToastMessage/CustomeToastMessage';
@@ -46,7 +46,7 @@ const contains_special_character = (item: string): boolean => {
     return false;
 }
 
-const SetPassword = ({ }): JSX.Element => {
+const SetPassword = (): JSX.Element => {
     const navigate = useNavigate();
     // see if the user is allowed to come here first
     const [queryParameters] = useSearchParams()

llm-fe/src/llm-fe/contexts/AccountContext.tsx

@@ -53,7 +53,7 @@ const AccountProvider = ({children}: AccountProviderProps) => {
             
         }
 
-    }, [authenticated])
+    }, [authenticated, loading])
     return (
         <AccountContext.Provider value={{account, setAccount}}>
             {children}

llm-fe/src/llm-fe/contexts/AuthContext.tsx

@@ -1,7 +1,5 @@
-import { Token } from "@mui/icons-material";
 import { jwtDecode } from "jwt-decode";
 import { createContext, ReactNode, useState, useEffect } from "react"
-import { useNavigate } from "react-router-dom";
 
 type AuthProviderProps = {
     children?: ReactNode;
@@ -55,7 +53,6 @@ const AuthProvider = ({children}: AuthProviderProps) => {
     }, [])
     //console.log(authenticated)
     const [ needsNewPassword, setNeedsNewPassword] = useState(initialValues.needsNewPassword)
-    const navigation = useNavigate();
 
     return (
         <AuthContext.Provider value={{ authenticated, setAuthentication, needsNewPassword, setNeedsNewPassword, loading}}>

llm-fe/src/llm-fe/contexts/ConversationContext.tsx

@@ -69,7 +69,7 @@ const ConversationProvider = ({children}: ConversationProviderProps) => {
         if(!loading && authenticated){
             GetConversations();
         }
-    }, [selectedConversation, authenticated, preferencesUpdated])
+    }, [selectedConversation, authenticated, preferencesUpdated, loading])
     return(
         <ConversationContext.Provider value={{conversations, setConversations, selectedConversation, setSelectedConversation, deleteConversation}}>
             {children}

llm-fe/src/llm-fe/contexts/MessageContext.tsx

@@ -1,5 +1,4 @@
 import { createContext, ReactNode, useContext, useEffect, useRef, useState } from "react";
-import { AuthContext } from "./AuthContext";
 import { WebSocketContext } from "./WebSocketContext";
 import { AccountContext } from "./AccountContext";
 import { ConversationContext } from "./ConversationContext";
@@ -30,10 +29,9 @@ const initialValues = {
 const MessageContext = createContext<IMessageContext>(initialValues);
 
 const MessageProvider = ( {children}: MessageProviderProps) => {
-    const { authenticated, loading } = useContext(AuthContext);
+    const [subscribe, unsubscribe]= useContext(WebSocketContext)
-    const [subscribe, unsubscribe, socket, sendMessage]= useContext(WebSocketContext)
     const { account } = useContext(AccountContext)
-    const {conversations, selectedConversation, setSelectedConversation} = useContext(ConversationContext);
+    const {selectedConversation, setSelectedConversation} = useContext(ConversationContext);
 
     const [stateMessage, setStateMessage] = useState<string>('')
     const [conversationDetails, setConversationDetails] = useState<ConversationPrompt[]>([])
@@ -44,38 +42,37 @@ const MessageProvider = ( {children}: MessageProviderProps) => {
     const conversationRef = useRef(conversationDetails)
     const selectedConversationRef = useRef<undefined | number>(undefined)
 
-    async function GetConversationDetails(){
+    useEffect(() => {
-        if(selectedConversation){
+        async function GetConversationDetails(){
+            if(selectedConversation){
                 
-            try{
+                try{
-                //setPromptProcessing(true)
+                    //setPromptProcessing(true)
-                selectedConversationRef.current = selectedConversation;
+                    selectedConversationRef.current = selectedConversation;
-                const {data, }: AxiosResponse<ConversationPromptType[]> = await axiosInstance.get(`conversation_details?conversation_id=${selectedConversation}`)
+                    const {data, }: AxiosResponse<ConversationPromptType[]> = await axiosInstance.get(`conversation_details?conversation_id=${selectedConversation}`)
+                    
+                    const tempConversations: ConversationPrompt[] = data.map((item) => new ConversationPrompt({
+                        message: item.message,
+                        user_created: item.user_created,
+                        created_timestamp: item.created_timestamp
+                    }))
+                    if(tempConversations.length === 1){
+                        // we need to add another card because this is the first message
+                        tempConversations.push(new ConversationPrompt({message: '', user_created:false}))
+                    }
+                    conversationRef.current = tempConversations
+                    setConversationDetails(tempConversations)
+      
+                }finally{
+                    //setPromptProcessing(false)
       
-                const tempConversations: ConversationPrompt[] = data.map((item) => new ConversationPrompt({
-                    message: item.message,
-                    user_created: item.user_created,
-                    created_timestamp: item.created_timestamp
-                }))
-                if(tempConversations.length === 1){
-                    // we need to add another card because this is the first message
-                    tempConversations.push(new ConversationPrompt({message: '', user_created:false}))
                 }
-                conversationRef.current = tempConversations
-                setConversationDetails(tempConversations)
                 
-            }finally{
+            }else{
-                //setPromptProcessing(false)
+                setConversationDetails([])
 
             }
-            
-        }else{
-            setConversationDetails([])
-
         }
-    }
-  
-    useEffect(() => {
         GetConversationDetails();
 
     }, [selectedConversation])
@@ -129,7 +126,7 @@ const MessageProvider = ( {children}: MessageProviderProps) => {
             /* unsubscribe from channel during cleanup */
             unsubscribe(channelName)
         }
-    }, [account, subscribe, unsubscribe, conversationDetails])
+    }, [account, subscribe, unsubscribe, conversationDetails, selectedConversation, setSelectedConversation])
 
 
     return(

llm-fe/src/llm-fe/contexts/WebSocketContext.js

@@ -1,5 +1,4 @@
 import { AccountContext } from "./AccountContext";
-import { AuthContext } from "./AuthContext";
 
 const {
   useEffect,
@@ -12,12 +11,11 @@ const {
 const WebSocketContext = createContext();
 
 function WebSocketProvider({ children }) {
-  const { authenticated, loading } = useContext(AuthContext);
   const ws = useRef(null);
   const [socket, setSocket] = useState(null);
   const channels = useRef({}); // maps each channel to the callback
-  const { account, setAccount } = useContext(AccountContext);
+  const { account } = useContext(AccountContext);
-  const [currentChannel, setCurrentChannel] = useState("");
+  const [, setCurrentChannel] = useState("");
   const [isConnected, setIsConnected] = useState(false);
 
   /* called from a component that registers a callback for a channel */

llm-fe/src/llm-fe/pages/Account2/Account2.tsx

@@ -7,10 +7,8 @@ import { AxiosResponse } from "axios";
 import { ErrorMessage, Field, Form, Formik } from "formik";
 import Header2 from "../../components/Header2/Header2";
 import ParticleBackground from "../../components/ParticleBackground/ParticleBackground";
-import styled, { ThemeProvider } from "styled-components";
+import styled from "styled-components";
 import ThemeSettingsCard from "../../components/ThemeSettingsCard/ThemeSettingsCard";
-import { useMaterialUIController } from "../../ui-kit/context";
-import palettes from "../../ui-kit/assets/theme/base/palettes";
 
 // Styled Components
 const PageContainer = styled.div`
@@ -191,14 +189,6 @@ const DeleteButton = styled.button`
   }
 `;
 
-type AccountUpdateValues = {
-  email: string,
-}
-
-type AccountInformationProps = {
-  account: Account | undefined
-}
-
 type InviteValues = {
   email: string
 }
@@ -316,10 +306,8 @@ const AddUserCard = ({ getCompanyUsers }: AddUserCardProps): JSX.Element => {
   )
 }
 
-const CompanyManagerCard = ({ }): JSX.Element => {
+const CompanyManagerCard = (): JSX.Element => {
   const [users, setUsers] = useState<Account[]>([]);
-  const { account } = useContext(AccountContext);
-  const [showModal, setShowModal] = useState<boolean>(false);
 
   const handleUserUpdate = async (email: string, field: string, value: string): Promise<void> => {
     //console.log(email, field, value)
@@ -413,7 +401,7 @@ const CompanyManagerCard = ({ }): JSX.Element => {
   )
 }
 
-const AccountPage = ({ }): JSX.Element => {
+const AccountPage = (): JSX.Element => {
   const { account } = useContext(AccountContext)
 
   return (
@@ -431,7 +419,7 @@ const AccountPage = ({ }): JSX.Element => {
   )
 }
 
-const Account2 = ({ }): JSX.Element => {
+const Account2 = (): JSX.Element => {
   return (
     <PageContainer>
       <ParticleBackground />

llm-fe/src/llm-fe/pages/Analytics/Analytics.tsx

@@ -79,7 +79,7 @@ const ChartContainer = styled.div`
   height: 400px;
 `;
 
-const UserPromptAnalyticsCard = ({ }): JSX.Element => {
+const UserPromptAnalyticsCard = (): JSX.Element => {
     const [data, setData] = useState<UserPromptAnalytics[]>([])
     const theme = useContext(ThemeContext);
 
@@ -114,7 +114,7 @@ const UserPromptAnalyticsCard = ({ }): JSX.Element => {
     )
 }
 
-const UserConversationAnalyticsCard = ({ }): JSX.Element => {
+const UserConversationAnalyticsCard = (): JSX.Element => {
     const [data, setData] = useState<UserConversationAnalytics[]>([])
     const theme = useContext(ThemeContext);
 
@@ -150,7 +150,7 @@ const UserConversationAnalyticsCard = ({ }): JSX.Element => {
     )
 }
 
-const CompanyUsageAnalyticsCard = ({ }): JSX.Element => {
+const CompanyUsageAnalyticsCard = (): JSX.Element => {
     const [data, setData] = useState<CompanyUsageAnalytics[]>([])
     const theme = useContext(ThemeContext);
 
@@ -185,7 +185,7 @@ const CompanyUsageAnalyticsCard = ({ }): JSX.Element => {
     )
 }
 
-const AdminAnalyticsCard = ({ }): JSX.Element => {
+const AdminAnalyticsCard = (): JSX.Element => {
     const [data, setData] = useState<AdminAnalytics[]>([])
     const theme = useContext(ThemeContext);
 
@@ -228,7 +228,7 @@ const AdminAnalyticsCard = ({ }): JSX.Element => {
 }
 
 
-const AnalyticsInner = ({ }): JSX.Element => {
+const AnalyticsInner = (): JSX.Element => {
     const { account } = useContext(AccountContext)
 
     return (
@@ -245,7 +245,7 @@ const AnalyticsInner = ({ }): JSX.Element => {
     )
 }
 
-const AnalyticsPage = ({ }): JSX.Element => {
+const AnalyticsPage = (): JSX.Element => {
     return (
         <PageContainer>
             <ParticleBackground />

llm-fe/src/llm-fe/pages/AsyncDashboard2/AsyncDashboard2.tsx

@@ -1,24 +1,17 @@
 import React, { useContext, useEffect, useRef, useState } from "react";
 import styled, { ThemeContext } from "styled-components";
-import { Formik, Form, Field, ErrorMessage } from "formik";
+import { Formik, Form, Field } from "formik";
 import * as Yup from "yup";
 import { AttachFile, Delete, Send, Menu } from "@mui/icons-material"; // Keeping icons for now, can replace later if needed
 import { Tooltip } from "@mui/material";
 import Markdown from "markdown-to-jsx";
 
 import {
-  Announcement,
-  AnnouncementType,
-  Conversation,
   ConversationPrompt,
-  ConversationPromptType,
 } from "../../data";
-import { axiosInstance } from "../../../axiosApi";
-import { AxiosResponse } from "axios";
 import { ConversationContext } from "../../contexts/ConversationContext";
 import ConversationDetailCard from "../../components/ConversationDetailCard/ConversationDetailCard";
 import { WebSocketContext } from "../../contexts/WebSocketContext";
-import { AccountContext } from "../../contexts/AccountContext";
 import { MessageContext } from "../../contexts/MessageContext";
 import ParticleBackground from "../../components/ParticleBackground/ParticleBackground";
 
@@ -296,11 +289,9 @@ const AlwaysScrollToBottom = (): JSX.Element => {
   return <div ref={elementRef} />;
 };
 
-const AsyncDashboardInner = ({ }): JSX.Element => {
+const AsyncDashboardInner = (): JSX.Element => {
-  const [announcements, setAnnouncement] = useState<Announcement[]>([]);
+  const [, , , sendMessage, isConnected] =
-  const [subscribe, unsubscribe, socket, sendMessage, isConnected] =
     useContext(WebSocketContext);
-  const { account } = useContext(AccountContext);
 
   const { conversations, selectedConversation, setSelectedConversation, deleteConversation } =
     useContext(ConversationContext);
@@ -309,7 +300,6 @@ const AsyncDashboardInner = ({ }): JSX.Element => {
     conversationDetails,
     setConversationDetails,
     stateMessage,
-    isGeneratingMessage,
   } = useContext(MessageContext);
 
   const conversationRef = useRef(conversationDetails);
@@ -317,20 +307,6 @@ const AsyncDashboardInner = ({ }): JSX.Element => {
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
 
-  async function GetAnnouncements() {
-    const response: AxiosResponse<AnnouncementType[]> =
-      await axiosInstance.get("announcment/get/");
-    setAnnouncement(
-      response.data.map(
-        (status, message) =>
-          new Announcement({
-            status: status,
-            message: message,
-          }),
-      ),
-    );
-  }
-
   const handlePromptSubmit = async (
     { prompt, file, fileType, modelName }: PromptValues,
     { resetForm }: any,
@@ -562,7 +538,7 @@ const AsyncDashboardInner = ({ }): JSX.Element => {
   );
 };
 
-const AsyncDashboard2 = ({ }): JSX.Element => {
+const AsyncDashboard2 = (): JSX.Element => {
   return <AsyncDashboardInner />;
 };
 

llm-fe/src/llm-fe/pages/DocumentStoragePage/DocumentStoragePage.tsx

@@ -5,7 +5,6 @@ import { axiosInstance } from "../../../axiosApi";
 import Header2 from "../../components/Header2/Header2";
 import ParticleBackground from "../../components/ParticleBackground/ParticleBackground";
 import styled from "styled-components";
-import MDButton from "../../ui-kit/components/MDButton";
 
 // Styled Components
 const PageContainer = styled.div`
@@ -190,28 +189,27 @@ type DocumentTableCardProps = {
 
 const CompanyDocumentStorageTableCard = ({ documents, setDocuments }: DocumentTableCardProps): JSX.Element => {
 
-  async function getUploadedDocuments() {
-    try {
-      const { data, }: AxiosResponse<DocumentType[]> = await axiosInstance.get(`/documents/`);
-      setDocuments(data.map((item) => new Document({
-
-        id: item.id,
-        name: item.file.replace(/^.*[\\\/]/, ''),
-        date_uploaded: item.created.substring(0, 10),
-        active: item.active,
-        processed: item.processed,
-
-      })))
-
-
-    } catch (error) {
-      console.log(error)
-    }
-  }
-
   useEffect(() => {
+    async function getUploadedDocuments() {
+      try {
+        const { data, }: AxiosResponse<DocumentType[]> = await axiosInstance.get(`/documents/`);
+        setDocuments(data.map((item) => new Document({
+
+          id: item.id,
+          name: item.file.replace(/^.*[\\/]/, ''),
+          date_uploaded: item.created.substring(0, 10),
+          active: item.active,
+          processed: item.processed,
+
+        })))
+
+
+      } catch (error) {
+        console.log(error)
+      }
+    }
     getUploadedDocuments();
-  }, [])
+  }, [setDocuments])
   return (
     <GlassCard>
       <CardTitle>Your documents in the company workspace</CardTitle>
@@ -256,7 +254,7 @@ const CompanyDocumentStorageTableCard = ({ documents, setDocuments }: DocumentTa
   )
 }
 
-const UserDocumentStorageTableCard = ({ }): JSX.Element => {
+const UserDocumentStorageTableCard = (): JSX.Element => {
   return (
     <GlassCard>
       <CardTitle>Your documents in your personal workspace</CardTitle>
@@ -265,11 +263,7 @@ const UserDocumentStorageTableCard = ({ }): JSX.Element => {
   )
 }
 
-type DocumentSubmitValues = {
+const DocumentUploadCard = (): JSX.Element => {
-  document: File
-}
-
-const DocumentUploadCard = ({ }): JSX.Element => {
   const [selectedFile, setSelectedFile] = useState<File | null>(null);
 
   const handleDocumentUpload = async (): Promise<void> => {
@@ -277,19 +271,14 @@ const DocumentUploadCard = ({ }): JSX.Element => {
     console.log(selectedFile)
     if (selectedFile) {
       try {
-        const reader = new FileReader();
+        await axiosInstance.post('/documents/', {
-        reader.onload = () => {
+          file: selectedFile
-          const base64File = reader.result?.toString().split(',')[1];
+        },
-          axiosInstance.post('/documents/', {
+          {
-            file: selectedFile
+            headers: {
-          },
+              'Content-Type': 'multipart/form-data',
-            {
+            },
-              headers: {
+          })
-                'Content-Type': 'multipart/form-data',
-              },
-            })
-        }
-        reader.readAsDataURL(selectedFile)
 
         // TODO set the documents here
       }
@@ -326,7 +315,7 @@ const DocumentUploadCard = ({ }): JSX.Element => {
   )
 }
 
-const DocumentStoragePageInner = ({ }): JSX.Element => {
+const DocumentStoragePageInner = (): JSX.Element => {
   const [documents, setDocuments] = useState<Document[]>([]);
   return (
     <>
@@ -337,7 +326,7 @@ const DocumentStoragePageInner = ({ }): JSX.Element => {
   )
 }
 
-const DocumentStoragePage = ({ }): JSX.Element => {
+const DocumentStoragePage = (): JSX.Element => {
   return (
     <PageContainer>
       <ParticleBackground />

llm-fe/src/llm-fe/pages/FeedbackPage2/FeedbackPage2.tsx

@@ -199,24 +199,23 @@ type FeedbackTableCardProps = {
 }
 
 const FeedbackTableCard = ({ feedbacks, setFeedbacks }: FeedbackTableCardProps): JSX.Element => {
-  async function getFeedbacks() {
-    try {
-      const { data, }: AxiosResponse<FeedbackType[]> = await axiosInstance.get(`/feedbacks/`);
-      setFeedbacks(data.map((item) => new Feedback({
-        id: item.id,
-        title: item.title,
-        text: item.text,
-        status: item.status,
-        category: item.category,
-      })))
-    } catch (error) {
-      console.log(error)
-    }
-  }
-
   useEffect(() => {
+    async function getFeedbacks() {
+      try {
+        const { data, }: AxiosResponse<FeedbackType[]> = await axiosInstance.get(`/feedbacks/`);
+        setFeedbacks(data.map((item) => new Feedback({
+          id: item.id,
+          title: item.title,
+          text: item.text,
+          status: item.status,
+          category: item.category,
+        })))
+      } catch (error) {
+        console.log(error)
+      }
+    }
     getFeedbacks();
-  }, [])
+  }, [setFeedbacks])
 
   return (
     <GlassCard>
@@ -331,7 +330,7 @@ const FeedbackSubmitCard = ({ feedbacks, setFeedbacks }: FeedbackTableCardProps)
   )
 }
 
-const FeedbackPageInner = ({ }): JSX.Element => {
+const FeedbackPageInner = (): JSX.Element => {
   const [feedbacks, setFeedbacks] = useState<Feedback[]>([]);
   return (
     <>
@@ -341,7 +340,7 @@ const FeedbackPageInner = ({ }): JSX.Element => {
   )
 }
 
-const FeedbackPage2 = ({ }): JSX.Element => {
+const FeedbackPage2 = (): JSX.Element => {
   return (
     <PageContainer>
       <ParticleBackground />

llm-fe/src/llm-fe/pages/NotFound/NotFound.tsx

@@ -1,4 +1,4 @@
-import React, { Dispatch, PropsWithChildren, SetStateAction, useState } from 'react';
+import React from 'react';
 import PageWrapperLayout from '../../components/PageWrapperLayout/PageWrapperLayout';
 import MDBox from '../../ui-kit/components/MDBox';
 import { Card, CardContent, Divider } from '@mui/material';
@@ -6,7 +6,7 @@ import MDTypography from '../../ui-kit/components/MDTypography';
 import Footer from '../../components/Footer/Footer';
 import Header2 from '../../components/Header2/Header2';
 
-const NotFound = ({}): JSX.Element => {
+const NotFound = (): JSX.Element => {
     
   return (
     <PageWrapperLayout>

llm-fe/src/llm-fe/pages/PasswordReset/PasswordReset.tsx

@@ -1,6 +1,6 @@
 import { Form, Formik, Field } from 'formik';
 import React, { useRef } from 'react';
-import { axiosInstance, cleanAxiosInstance } from '../../../axiosApi';
+import { cleanAxiosInstance } from '../../../axiosApi';
 import { useNavigate } from 'react-router-dom';
 import ReCAPTCHA from 'react-google-recaptcha';
 import ParticleBackground from '../../components/ParticleBackground/ParticleBackground';
@@ -121,7 +121,7 @@ export type EmailPasswordResetValues = {
 }
 
 
-const PasswordReset = ({ }): JSX.Element => {
+const PasswordReset = (): JSX.Element => {
     const navigate = useNavigate();
     const recaptchaRef = useRef<ReCAPTCHA>(null);
 

llm-fe/src/llm-fe/pages/PasswordResetConfirmation/PasswordReset.tsx

@@ -1,30 +1,12 @@
-import { Form, Formik } from 'formik';
+import React from 'react';
-import React, { Dispatch, PropsWithChildren, SetStateAction, useState } from 'react';
+import { Card, CardContent, Divider } from '@mui/material';
-import CustomPasswordField from '../../components/CustomPasswordField/CustomPasswordField';
-import { Button, Card, CardContent, Divider } from '@mui/material';
-import { axiosInstance } from '../../../axiosApi';
-import CustomToastMessage from '../../components/CustomToastMessage/CustomeToastMessage';
 import PageWrapperLayout from '../../components/PageWrapperLayout/PageWrapperLayout';
 import MDBox from '../../ui-kit/components/MDBox';
 import background from '../../../bg.jpeg'
 import { Col, Row } from 'react-bootstrap';
 import MDTypography from '../../ui-kit/components/MDTypography';
-import { valuesIn } from 'lodash';
-import CustomTextField from '../../components/CustomTextField/CustomTextField';
-import MDButton from '../../ui-kit/components/MDButton';
-import { useNavigate } from 'react-router-dom';
 
-export type PasswordResetValues = {
+const PasswordResetConfirmation = (): JSX.Element => {
-  password1: string;
-  password2: string;
-};
-
-export type EmailPasswordResetValues = {
-    email: string;
-}
-
-
-const PasswordResetConfirmation = ({}): JSX.Element => {
     
     
   return (

llm-fe/src/llm-fe/pages/SignIn/SignIn.tsx

@@ -135,9 +135,9 @@ const validationSchema = Yup.object().shape({
     password: Yup.string().required('Required'),
 })
 
-const SignIn = ({ }): JSX.Element => {
+const SignIn = (): JSX.Element => {
-    const { authenticated, setAuthentication, setNeedsNewPassword } = useContext(AuthContext);
+    const { setAuthentication, setNeedsNewPassword } = useContext(AuthContext);
-    const { account, setAccount } = useContext(AccountContext);
+    const { setAccount } = useContext(AccountContext);
     const navigate = useNavigate();
     const [errorMessage, setErrorMessage] = useState<string>('');
 

llm-fe/src/llm-fe/pages/TermsOfService/TermsOfService.tsx

@@ -1,33 +1,20 @@
 import { Form, Formik } from 'formik';
-import React, { Dispatch, PropsWithChildren, SetStateAction, useContext, useEffect, useState } from 'react';
+import React from 'react';
-import { Alert, Box, Button, Card, CardContent, CardHeader, Divider, TextField } from '@mui/material';
+import { Card, CardContent, Divider } from '@mui/material';
-import { object, ref, string } from 'yup';
 import { axiosInstance } from '../../../axiosApi';
-import CustomTextField, { CustomTextFieldProps } from '../../components/CustomTextField/CustomTextField';
-import CustomPasswordField from '../../components/CustomPasswordField/CustomPasswordField';
-import CustomToastMessage from '../../components/CustomToastMessage/CustomeToastMessage';
-import { AuthContext } from '../../contexts/AuthContext';
 import { useNavigate } from 'react-router-dom';
-import { AccountContext } from '../../contexts/AccountContext';
-import { MOCK_ACCOUNTS } from '../../mockData';
-import { AxiosResponse } from 'axios';
-import { Account, AccountType } from '../../data';
-import { Label } from '@mui/icons-material';
-import background from '../../../bg.jpeg'
 import MDTypography from '../../ui-kit/components/MDTypography';
 import PageWrapperLayout from '../../components/PageWrapperLayout/PageWrapperLayout';
 import MDBox from '../../ui-kit/components/MDBox';
 import MDButton from '../../ui-kit/components/MDButton';
 
-const TermsOfService = ({}): JSX.Element => {
+const TermsOfService = (): JSX.Element => {
-    const {authenticated, setAuthentication, setNeedsNewPassword} = useContext(AuthContext);
-    const { account, setAccount} = useContext(AccountContext);
     const navigate = useNavigate();    
     
     const handleAcknowledge = async (): Promise<void> => {
         
         try{
-            const response = await axiosInstance.post('/user/acknowledge_tos/')
+            await axiosInstance.post('/user/acknowledge_tos/')
             navigate('/')            
 
         }catch(error){