refactor: resolve hook violations

src/app/login/githublogin.tsx

@@ -29,7 +29,7 @@ const GithubLogin: React.FC = () => {
       setErrorMsg(errorMessage);
       setShowError(true);
     }
-  }, []);
+  }, [searchParams]);
 
   const handleGitHubLogin = () => {
     signIn('github', { callbackUrl: '/' }); // Redirect to home page after login

src/components/Contribute/Knowledge/Github/index.tsx

@@ -426,23 +426,42 @@ export const KnowledgeFormGithub: React.FunctionComponent<KnowledgeFormProps> =
     setSeedExamples(yamlSeedExampleToFormSeedExample(data.seed_examples));
   };
 
-  const knowledgeFormData: KnowledgeFormData = {
-    email: email,
-    name: name,
-    submissionSummary: submissionSummary,
-    domain: domain,
-    documentOutline: documentOutline,
-    filePath: filePath,
-    seedExamples: seedExamples,
-    knowledgeDocumentRepositoryUrl: knowledgeDocumentRepositoryUrl,
-    knowledgeDocumentCommit: knowledgeDocumentCommit,
-    documentName: documentName,
-    titleWork: titleWork,
-    linkWork: linkWork,
-    revision: revision,
-    licenseWork: licenseWork,
-    creators: creators
-  };
+  const knowledgeFormData: KnowledgeFormData = useMemo(
+    () => ({
+      email,
+      name,
+      submissionSummary,
+      domain,
+      documentOutline,
+      filePath,
+      seedExamples,
+      knowledgeDocumentRepositoryUrl,
+      knowledgeDocumentCommit,
+      documentName,
+      titleWork,
+      linkWork,
+      revision,
+      licenseWork,
+      creators
+    }),
+    [
+      email,
+      name,
+      submissionSummary,
+      domain,
+      documentOutline,
+      filePath,
+      seedExamples,
+      knowledgeDocumentRepositoryUrl,
+      knowledgeDocumentCommit,
+      documentName,
+      titleWork,
+      linkWork,
+      revision,
+      licenseWork,
+      creators
+    ]
+  );
 
   useEffect(() => {
     setDisableAction(!checkKnowledgeFormCompletion(knowledgeFormData));

src/components/Contribute/Knowledge/Native/index.tsx

@@ -425,23 +425,42 @@ export const KnowledgeFormNative: React.FunctionComponent<KnowledgeFormProps> =
     setSeedExamples(yamlSeedExampleToFormSeedExample(data.seed_examples));
   };
 
-  const knowledgeFormData: KnowledgeFormData = {
-    email: email,
-    name: name,
-    submissionSummary: submissionSummary,
-    domain: domain,
-    documentOutline: documentOutline,
-    filePath: filePath,
-    seedExamples: seedExamples,
-    knowledgeDocumentRepositoryUrl: knowledgeDocumentRepositoryUrl,
-    knowledgeDocumentCommit: knowledgeDocumentCommit,
-    documentName: documentName,
-    titleWork: titleWork,
-    linkWork: linkWork,
-    revision: revision,
-    licenseWork: licenseWork,
-    creators: creators
-  };
+  const knowledgeFormData: KnowledgeFormData = useMemo(
+    () => ({
+      email,
+      name,
+      submissionSummary,
+      domain,
+      documentOutline,
+      filePath,
+      seedExamples,
+      knowledgeDocumentRepositoryUrl,
+      knowledgeDocumentCommit,
+      documentName,
+      titleWork,
+      linkWork,
+      revision,
+      licenseWork,
+      creators
+    }),
+    [
+      email,
+      name,
+      submissionSummary,
+      domain,
+      documentOutline,
+      filePath,
+      seedExamples,
+      knowledgeDocumentRepositoryUrl,
+      knowledgeDocumentCommit,
+      documentName,
+      titleWork,
+      linkWork,
+      revision,
+      licenseWork,
+      creators
+    ]
+  );
 
   useEffect(() => {
     setDisableAction(!checkKnowledgeFormCompletion(knowledgeFormData));

src/components/Contribute/Skill/Github/index.tsx

@@ -1,6 +1,6 @@
 // src/components/Contribute/Skill/Github/index.tsx
 'use client';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
 import './skills.css';
 import { Alert, AlertActionCloseButton, AlertGroup } from '@patternfly/react-core/dist/dynamic/components/Alert';
 import { ActionGroup } from '@patternfly/react-core/dist/dynamic/components/Form';
@@ -324,17 +324,20 @@ export const SkillFormGithub: React.FunctionComponent<SkillFormProps> = ({ skill
     setSeedExamples(yamlSeedExampleToFormSeedExample(data.seed_examples));
   };
 
-  const skillFormData: SkillFormData = {
-    email: email,
-    name: name,
-    submissionSummary: submissionSummary,
-    documentOutline: documentOutline,
-    filePath: filePath,
-    seedExamples: seedExamples,
-    titleWork: titleWork,
-    licenseWork: licenseWork,
-    creators: creators
-  };
+  const skillFormData: SkillFormData = useMemo(
+    () => ({
+      email,
+      name,
+      submissionSummary,
+      documentOutline,
+      filePath,
+      seedExamples,
+      titleWork,
+      licenseWork,
+      creators
+    }),
+    [email, name, submissionSummary, documentOutline, filePath, seedExamples, titleWork, licenseWork, creators]
+  );
 
   useEffect(() => {
     setDisableAction(!checkSkillFormCompletion(skillFormData));

src/components/Contribute/Skill/Native/index.tsx

@@ -1,6 +1,6 @@
 // src/components/Contribute/Skill/Native/index.tsx
 'use client';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
 import './skills.css';
 import { Alert, AlertActionCloseButton, AlertGroup } from '@patternfly/react-core/dist/dynamic/components/Alert';
 import { ActionGroup } from '@patternfly/react-core/dist/dynamic/components/Form';
@@ -301,17 +301,20 @@ export const SkillFormNative: React.FunctionComponent<SkillFormProps> = ({ skill
     setSeedExamples(yamlSeedExampleToFormSeedExample(data.seed_examples));
   };
 
-  const skillFormData: SkillFormData = {
-    email: email,
-    name: name,
-    submissionSummary: submissionSummary,
-    documentOutline: documentOutline,
-    filePath: filePath,
-    seedExamples: seedExamples,
-    titleWork: titleWork,
-    licenseWork: licenseWork,
-    creators: creators
-  };
+  const skillFormData: SkillFormData = useMemo(
+    () => ({
+      email,
+      name,
+      submissionSummary,
+      documentOutline,
+      filePath,
+      seedExamples,
+      titleWork,
+      licenseWork,
+      creators
+    }),
+    [email, name, submissionSummary, documentOutline, filePath, seedExamples, titleWork, licenseWork, creators]
+  );
 
   useEffect(() => {
     setDisableAction(!checkSkillFormCompletion(skillFormData));

src/components/GithubAccessPopup/index.tsx

@@ -25,7 +25,7 @@ const GithubAccessPopup: React.FunctionComponent<Props> = ({ onAccept }) => {
       }
     };
     showPopupWarning();
-  }, []);
+  }, [onAccept]);
 
   const setDecisionAndClose = () => {
     setIsOpen(false);

src/components/PathService/PathService.tsx

@@ -1,5 +1,5 @@
 // /src/components/PathService.tsx
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { SearchInput } from '@patternfly/react-core/dist/dynamic/components/SearchInput';
 import { List } from '@patternfly/react-core/dist/dynamic/components/List';
 import { ListItem } from '@patternfly/react-core/dist/dynamic/components/List';
@@ -23,40 +23,43 @@ const PathService: React.FC<PathServiceProps> = ({ reset, rootPath, path, handle
   const inputRef = useRef<HTMLInputElement>(null);
   const [validPath, setValidPath] = React.useState<ValidatedOptions>();
 
-  const validatePath = () => {
+  const validatePath = useCallback(() => {
     if (inputValue.trim().length > 0) {
       setValidPath(ValidatedOptions.success);
       return;
     }
     setValidPath(ValidatedOptions.error);
-  };
-
-  const fetchData = async (subpath: string) => {
-    try {
-      const response = await fetch('/api/tree', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ root_path: rootPath, dir_name: subpath })
-      });
-
-      if (!response.ok) {
-        console.warn('Failed to get path service tree for subpath ( ' + subpath + ' ) from server.');
-      }
+  }, [inputValue]);
 
-      const result = await response.json();
-      // set items to be displayed in the dropdown
-      if (result.data === null || result.data.length === 0) {
+  const fetchData = useCallback(
+    async (subpath: string) => {
+      try {
+        const response = await fetch('/api/tree', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({ root_path: rootPath, dir_name: subpath })
+        });
+
+        if (!response.ok) {
+          console.warn('Failed to get path service tree for subpath ( ' + subpath + ' ) from server.');
+        }
+
+        const result = await response.json();
+        // set items to be displayed in the dropdown
+        if (result.data === null || result.data.length === 0) {
+          setItems([]);
+          return;
+        }
+        setItems(result.data.map((item: string) => item.valueOf()));
+      } catch (error) {
+        console.warn('Error fetching path service data:', error);
         setItems([]);
-        return;
       }
-      setItems(result.data.map((item: string) => item.valueOf()));
-    } catch (error) {
-      console.warn('Error fetching path service data:', error);
-      setItems([]);
-    }
-  };
+    },
+    [rootPath]
+  );
 
   useEffect(() => {
     setInputValue('');
@@ -79,7 +82,7 @@ const PathService: React.FC<PathServiceProps> = ({ reset, rootPath, path, handle
     return () => {
       window.removeEventListener('keydown', handleEsc);
     };
-  }, []);
+  }, [path]);
 
   useEffect(() => {
     // check if input value is empty or ends with a slash
@@ -91,7 +94,7 @@ const PathService: React.FC<PathServiceProps> = ({ reset, rootPath, path, handle
       setItems([]);
     }
     validatePath();
-  }, [inputValue]);
+  }, [inputValue, fetchData, handlePathChange, validatePath]);
 
   const handleChange = (value: string) => {
     setInputValue(value);