diff --git a/src/app/login/githublogin.tsx b/src/app/login/githublogin.tsx index 8281b487..1e82502e 100644 --- a/src/app/login/githublogin.tsx +++ b/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 diff --git a/src/components/Contribute/Knowledge/Github/index.tsx b/src/components/Contribute/Knowledge/Github/index.tsx index 96f9b30d..1c15a8d3 100644 --- a/src/components/Contribute/Knowledge/Github/index.tsx +++ b/src/components/Contribute/Knowledge/Github/index.tsx @@ -426,23 +426,42 @@ export const KnowledgeFormGithub: React.FunctionComponent = 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)); diff --git a/src/components/Contribute/Knowledge/Native/index.tsx b/src/components/Contribute/Knowledge/Native/index.tsx index 794ca0b0..4f955220 100644 --- a/src/components/Contribute/Knowledge/Native/index.tsx +++ b/src/components/Contribute/Knowledge/Native/index.tsx @@ -425,23 +425,42 @@ export const KnowledgeFormNative: React.FunctionComponent = 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)); diff --git a/src/components/Contribute/Skill/Github/index.tsx b/src/components/Contribute/Skill/Github/index.tsx index a2ab87a9..fee18422 100644 --- a/src/components/Contribute/Skill/Github/index.tsx +++ b/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 = ({ 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)); diff --git a/src/components/Contribute/Skill/Native/index.tsx b/src/components/Contribute/Skill/Native/index.tsx index a017f4fc..79a23466 100644 --- a/src/components/Contribute/Skill/Native/index.tsx +++ b/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 = ({ 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)); diff --git a/src/components/GithubAccessPopup/index.tsx b/src/components/GithubAccessPopup/index.tsx index 66044980..32f24e45 100644 --- a/src/components/GithubAccessPopup/index.tsx +++ b/src/components/GithubAccessPopup/index.tsx @@ -25,7 +25,7 @@ const GithubAccessPopup: React.FunctionComponent = ({ onAccept }) => { } }; showPopupWarning(); - }, []); + }, [onAccept]); const setDecisionAndClose = () => { setIsOpen(false); diff --git a/src/components/PathService/PathService.tsx b/src/components/PathService/PathService.tsx index 03aab6ab..30cbc011 100644 --- a/src/components/PathService/PathService.tsx +++ b/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 = ({ reset, rootPath, path, handle const inputRef = useRef(null); const [validPath, setValidPath] = React.useState(); - 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 = ({ 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 = ({ reset, rootPath, path, handle setItems([]); } validatePath(); - }, [inputValue]); + }, [inputValue, fetchData, handlePathChange, validatePath]); const handleChange = (value: string) => { setInputValue(value);