rfac: used useQuery instead of useEffect (frontend)

README.md

@@ -51,6 +51,8 @@ Admin credintials:
 
 Change admin credentials after first login.
 
+Admin credential is stored in the file "/var/autocd/admin-credential.json", in case you forgot. 
+
 The application is running in http://localhost:5001, Logs of autocd can be seen in output.log
 
 - Stop running autocd

src/client/package.json

@@ -15,6 +15,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hot-toast": "^2.4.1",
+    "react-query": "^3.39.3",
     "react-router-dom": "^6.28.0",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.5",

src/client/src/App.tsx

@@ -3,14 +3,15 @@ import Projects from './pages/project';
 import Login from './pages/login';
 import './index.css';
 import Navbar from './components/navbar';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { getToken } from './utils/utils';
 import toast from 'react-hot-toast';
 import { getCurrentUser } from './api/user';
 import { CurrentUser } from './models/user';
 import User from './pages/user';
 import Script from './pages/script';
 import Logs from './pages/logs';
+import { useQuery } from 'react-query';
 
 function App() {
   const navigate = useNavigate();
@@ -38,9 +39,11 @@ function App() {
       }
     }
   };
-  useEffect(() => {
-    fetchCurrentUser();
-  }, []);
+
+  useQuery('currentUser', fetchCurrentUser, {
+    retry: false,
+  });
+
   return (
     <div>
       <Navbar currUser={currUser} setCurrUser={setCurrUser} />

src/client/src/api/user.ts

@@ -33,15 +33,13 @@ export const getUsers = async (): Promise<UserModel[]> => {
 export const createUser = async (
   username: string,
   password: string,
-  roles: string[],
   permissions: string[]
 ): Promise<UserModel> => {
   const response = await axios.post<UserModel>(
     url + '/api/protected/user/admin/add',
     {
       username: username,
       password: password,
-      roles: roles,
       permissions: permissions,
     },
     {
@@ -57,15 +55,13 @@ export const updateUser = async (
   id: number,
   username: string,
   password: string,
-  roles: string[],
   permissions: string[]
 ): Promise<UserModel> => {
   const response = await axios.put<UserModel>(
     url + '/api/protected/user/admin/update/' + id,
     {
       username: username,
       password: password,
-      roles: roles,
       permissions: permissions,
     },
     {

src/client/src/components/navbar/index.tsx

@@ -1,7 +1,7 @@
 import './index.css';
 import logo from '../../assets/autocd-logo.png';
 import { CurrentUser } from '../../models/user';
-import React, { useEffect } from 'react';
+import React from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 
 interface Prop {
@@ -11,7 +11,6 @@ interface Prop {
 
 const Navbar: React.FC<Prop> = ({ currUser, setCurrUser }) => {
   const navigate = useNavigate();
-  useEffect(() => {}, [currUser, setCurrUser]);
   const logoutHandler = () => {
     setCurrUser(null);
     localStorage.removeItem('token');

src/client/src/pages/login/index.tsx

@@ -37,7 +37,7 @@ const Login = () => {
   return (
     <>
       <div className="log-div">
-        <img className="logo" src={logo} alt="autocd"/>
+        <img className="logo" src={logo} alt="autocd" />
         <div className="input-div">
           <div className="input">
             <span className="input-box">Username: </span>

src/client/src/pages/logs/index.tsx

@@ -1,8 +1,9 @@
 import { useParams } from 'react-router-dom';
 import './index.css';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { getLogs } from '../../api/logs';
 import MonacoEditor from '@monaco-editor/react';
+import { useQuery } from 'react-query';
 const Logs = () => {
   const { id } = useParams();
   const [logs, setLogs] = useState<string>('');
@@ -16,9 +17,9 @@ const Logs = () => {
     } catch (e) {}
   };
 
-  useEffect(() => {
-    Fetch();
-  }, []);
+  useQuery('logs', Fetch, {
+    retry: false,
+  });
 
   return (
     <div>

src/client/src/pages/project/index.tsx

@@ -1,9 +1,10 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import './index.css';
 import { ProjectModel } from '../../models/project';
 import { addProject, getAllProjects } from '../../api/project';
 import ProjectCard from './project-card';
 import toast from 'react-hot-toast';
+import { useQuery } from 'react-query';
 
 const Projects = () => {
   const [projects, setProjects] = useState<ProjectModel[]>([]);
@@ -41,9 +42,9 @@ const Projects = () => {
       error: data => `${data.message}`,
     });
   };
-  useEffect(() => {
-    fetchProjects();
-  }, []);
+  useQuery('projects', fetchProjects, {
+    retry: false,
+  });
   return (
     <div className="project-page">
       <button className="project-btn" onClick={() => setOpen(true)}>

src/client/src/pages/script/index.tsx

@@ -1,6 +1,6 @@
 import { useNavigate, useParams } from 'react-router-dom';
 import './index.css';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { ProjectModel } from '../../models/project';
 import { getProject } from '../../api/project';
 import { getScript, updateScript } from '../../api/script';
@@ -9,6 +9,7 @@ import toast from 'react-hot-toast';
 import { Link } from 'react-router-dom';
 import { getHost } from '../../utils/utils';
 import { getAuthToken } from '../../api/token';
+import { useQuery } from 'react-query';
 
 const Script = () => {
   const { id } = useParams();
@@ -72,9 +73,9 @@ const Script = () => {
       setToken(res.token);
     } catch (e) {}
   };
-  useEffect(() => {
-    fetch();
-  }, []);
+  useQuery('script', fetch, {
+    retry: false,
+  });
 
   return (
     <div className="script-page">