diff --git a/src/ui/components/LuaDownloadButton/index.tsx b/src/ui/components/LuaDownloadButton/index.tsx new file mode 100644 index 00000000..f747ccbb --- /dev/null +++ b/src/ui/components/LuaDownloadButton/index.tsx @@ -0,0 +1,95 @@ +import { Button } from '@mui/material'; +import { FunctionComponent, useEffect } from 'react'; +import { useLazyQuery } from '@apollo/client/react'; +import { SxProps, Theme } from '@mui/system'; +import { useTranslation } from 'react-i18next'; +import { + FirmwareSource, + FirmwareVersionDataInput, + LuaScriptDocument, +} from '../../gql/generated/types'; +import { DownloadFileRequestBody, IpcRequest } from '../../../ipc'; +import GitRepository from '../../models/GitRepository'; +import ShowAlerts from '../ShowAlerts'; + +const styles: Record> = { + button: { + marginRight: 2, + }, +}; + +interface LuaDownloadButtonProps { + hasLuaScript: boolean; + firmwareVersionData: FirmwareVersionDataInput | null; + gitRepository: GitRepository; + showErrors?: boolean; +} + +const LuaDownloadButton: FunctionComponent = ({ + hasLuaScript, + firmwareVersionData, + gitRepository, + showErrors = false, +}) => { + const { t } = useTranslation(); + + const [ + fetchLuaScript, + { data: luaScriptResponse, error: luaScriptResponseError }, + ] = useLazyQuery(LuaScriptDocument); + + useEffect(() => { + if (firmwareVersionData && hasLuaScript) { + fetchLuaScript({ + variables: { + source: firmwareVersionData.source as FirmwareSource, + gitBranch: firmwareVersionData.gitBranch!, + gitTag: firmwareVersionData.gitTag!, + gitCommit: firmwareVersionData.gitCommit!, + localPath: firmwareVersionData.localPath!, + gitPullRequest: firmwareVersionData.gitPullRequest, + gitRepository: { + url: gitRepository.url, + owner: gitRepository.owner, + repositoryName: gitRepository.repositoryName, + rawRepoUrl: gitRepository.rawRepoUrl, + srcFolder: gitRepository.srcFolder, + hardwareArtifactUrl: gitRepository.hardwareArtifactUrl, + }, + }, + }); + } + }, [gitRepository, firmwareVersionData, fetchLuaScript, hasLuaScript]); + + return ( + <> + {hasLuaScript + && luaScriptResponse + && luaScriptResponse.luaScript.fileLocation + && luaScriptResponse.luaScript.fileLocation.length > 0 && ( + + )} + {hasLuaScript && showErrors && ( + + )} + + ); +}; + +export default LuaDownloadButton; diff --git a/src/ui/views/ConfiguratorView/index.tsx b/src/ui/views/ConfiguratorView/index.tsx index f52a8746..37fea539 100644 --- a/src/ui/views/ConfiguratorView/index.tsx +++ b/src/ui/views/ConfiguratorView/index.tsx @@ -66,12 +66,11 @@ import { UserDefineKind, AvailableFirmwareTargetsDocument, BuildFlashFirmwareDocument, - LuaScriptDocument, TargetDeviceOptionsDocument, } from '../../gql/generated/types'; import Loader from '../../components/Loader'; +import LuaDownloadButton from '../../components/LuaDownloadButton'; import { - DownloadFileRequestBody, IpcRequest, OpenFileLocationRequestBody, SaveFileRequestBody, @@ -469,34 +468,6 @@ const ConfiguratorView: FunctionComponent = (props) => { return deviceType === DeviceType.ExpressLRS && isTX; }, [deviceType, isTX]); - const [ - fetchLuaScript, - { data: luaScriptResponse, error: luaScriptResponseError }, - ] = useLazyQuery(LuaScriptDocument); - - useEffect(() => { - if (firmwareVersionData && isTX && hasLuaScript) { - fetchLuaScript({ - variables: { - source: firmwareVersionData.source as FirmwareSource, - gitBranch: firmwareVersionData.gitBranch!, - gitTag: firmwareVersionData.gitTag!, - gitCommit: firmwareVersionData.gitCommit!, - localPath: firmwareVersionData.localPath!, - gitPullRequest: firmwareVersionData.gitPullRequest, - gitRepository: { - url: gitRepository.url, - owner: gitRepository.owner, - repositoryName: gitRepository.repositoryName, - rawRepoUrl: gitRepository.rawRepoUrl, - srcFolder: gitRepository.srcFolder, - hardwareArtifactUrl: gitRepository.hardwareArtifactUrl, - }, - }, - }); - } - }, [gitRepository, firmwareVersionData, fetchLuaScript, isTX, hasLuaScript]); - /* Display Electron.js confirmation dialog if user wants to shutdown the app when build is in progress. @@ -818,36 +789,6 @@ const ConfiguratorView: FunctionComponent = (props) => { // eslint-disable-next-line react-hooks/exhaustive-deps }, [selectedDevice, deviceTargets]); - const luaDownloadButton = () => { - if ( - hasLuaScript - && luaScriptResponse - && luaScriptResponse.luaScript.fileLocation - && luaScriptResponse.luaScript.fileLocation.length > 0 - ) { - return ( - - ); - } - return null; - }; - const handleDeviceSelectErrorDialogClose = useCallback(() => { setDeviceSelectErrorDialogOpen(false); }, []); @@ -919,11 +860,12 @@ const ConfiguratorView: FunctionComponent = (props) => { /> )} - {!loadingTargets && luaDownloadButton()} - {hasLuaScript && ( - )} @@ -1268,7 +1210,13 @@ const ConfiguratorView: FunctionComponent = (props) => { )} - {response?.buildFlashFirmware.success && luaDownloadButton()} + {response?.buildFlashFirmware.success && ( + + )} )}