import React, { useContext, useMemo, useState } from 'react';
import {
AppCircle,
AppCircleContainer,
AppCircleLabel,
AppLibrarySubTitle,
AppsContainer,
AppsParent,
} from './Apps-styles';
import { Buffer } from 'buffer';
import {
Avatar,
Box,
Button,
ButtonBase,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
Input,
} from '@mui/material';
import { Add } from '@mui/icons-material';
import { MyContext, getBaseApiReact } from '../../App';
import LogoSelected from '../../assets/svgs/LogoSelected.svg';
import { executeEvent } from '../../utils/events';
import { Spacer } from '../../common/Spacer';
import { useModal } from '../../common/useModal';
import { createEndpoint, isUsingLocal } from '../../background';
import { Label } from '../Group/AddGroup';
import ShortUniqueId from 'short-unique-id';
import swaggerSVG from '../../assets/svgs/swagger.svg';
const uid = new ShortUniqueId({ length: 8 });
export const AppsDevModeHome = ({
setMode,
myApp,
myWebsite,
availableQapps,
myName,
}) => {
const [domain, setDomain] = useState('127.0.0.1');
const [port, setPort] = useState('');
const [selectedPreviewFile, setSelectedPreviewFile] = useState(null);
const { isShow, onCancel, onOk, show, message } = useModal();
const {
openSnackGlobal,
setOpenSnackGlobal,
infoSnackCustom,
setInfoSnackCustom,
} = useContext(MyContext);
const handleSelectFile = async (existingFilePath) => {
const filePath = existingFilePath || (await window.electron.selectFile());
if (filePath) {
const content = await window.electron.readFile(filePath);
return { buffer: content, filePath };
} else {
console.log('No file selected.');
}
};
const handleSelectDirectry = async (existingDirectoryPath) => {
const { buffer, directoryPath } =
await window.electron.selectAndZipDirectory(existingDirectoryPath);
if (buffer) {
return { buffer, directoryPath };
} else {
console.log('No file selected.');
}
};
const addDevModeApp = async () => {
try {
const usingLocal = await isUsingLocal();
if (!usingLocal) {
setOpenSnackGlobal(true);
setInfoSnackCustom({
type: 'error',
message:
'Please use your local node for dev mode! Logout and use Local node.',
});
return;
}
const { portVal, domainVal } = await show({
message: '',
publishFee: '',
});
const framework = domainVal + ':' + portVal;
const response = await fetch(
`${getBaseApiReact()}/developer/proxy/start`,
{
method: 'POST',
headers: {
'Content-Type': 'text/plain',
},
body: framework,
}
);
const responseData = await response.text();
executeEvent('appsDevModeAddTab', {
data: {
url: 'http://127.0.0.1:' + responseData,
},
});
} catch (error) {
console.log(error);
}
};
const addPreviewApp = async (isRefresh, existingFilePath, tabId) => {
try {
const usingLocal = await isUsingLocal();
if (!usingLocal) {
setOpenSnackGlobal(true);
setInfoSnackCustom({
type: 'error',
message:
'Please use your local node for dev mode! Logout and use Local node.',
});
return;
}
if (!myName) {
setOpenSnackGlobal(true);
setInfoSnackCustom({
type: 'error',
message: 'You need a name to use preview',
});
return;
}
const { buffer, filePath } = await handleSelectFile(existingFilePath);
if (!buffer) {
setOpenSnackGlobal(true);
setInfoSnackCustom({
type: 'error',
message: 'Please select a file',
});
return;
}
const postBody = Buffer.from(buffer).toString('base64');
const endpoint = await createEndpoint(
`/arbitrary/APP/${myName}/zip?preview=true`
);
const response = await fetch(endpoint, {
method: 'POST',
headers: {
'Content-Type': 'text/plain',
},
body: postBody,
});
if (!response?.ok) throw new Error('Invalid zip');
const previewPath = await response.text();
if (tabId) {
executeEvent('appsDevModeUpdateTab', {
data: {
url: 'http://127.0.0.1:12391' + previewPath,
isPreview: true,
filePath,
refreshFunc: (tabId) => {
addPreviewApp(true, filePath, tabId);
},
tabId,
},
});
return;
}
executeEvent('appsDevModeAddTab', {
data: {
url: 'http://127.0.0.1:12391' + previewPath,
isPreview: true,
filePath,
refreshFunc: (tabId) => {
addPreviewApp(true, filePath, tabId);
},
},
});
} catch (error) {
console.error(error);
}
};
const addPreviewAppWithDirectory = async (isRefresh, existingDir, tabId) => {
try {
const usingLocal = await isUsingLocal();
if (!usingLocal) {
setOpenSnackGlobal(true);
setInfoSnackCustom({
type: 'error',
message:
'Please use your local node for dev mode! Logout and use Local node.',
});
return;
}
if (!myName) {
setOpenSnackGlobal(true);
setInfoSnackCustom({
type: 'error',
message: 'You need a name to use preview',
});
return;
}
const { buffer, directoryPath } = await handleSelectDirectry(existingDir);
if (!buffer) {
setOpenSnackGlobal(true);
setInfoSnackCustom({
type: 'error',
message: 'Please select a file',
});
return;
}
const postBody = Buffer.from(buffer).toString('base64');
const endpoint = await createEndpoint(
`/arbitrary/APP/${myName}/zip?preview=true`
);
const response = await fetch(endpoint, {
method: 'POST',
headers: {
'Content-Type': 'text/plain',
},
body: postBody,
});
if (!response?.ok) throw new Error('Invalid zip');
const previewPath = await response.text();
if (tabId) {
executeEvent('appsDevModeUpdateTab', {
data: {
url: 'http://127.0.0.1:12391' + previewPath,
isPreview: true,
directoryPath,
refreshFunc: (tabId) => {
addPreviewAppWithDirectory(true, directoryPath, tabId);
},
tabId,
},
});
return;
}
executeEvent('appsDevModeAddTab', {
data: {
url: 'http://127.0.0.1:12391' + previewPath,
isPreview: true,
directoryPath,
refreshFunc: (tabId) => {
addPreviewAppWithDirectory(true, directoryPath, tabId);
},
},
});
} catch (error) {
console.error(error);
}
};
return (
<>
Dev Mode Apps
{
addDevModeApp();
}}
>
+
Server
{
addPreviewApp();
}}
>
+
Zip
{
addPreviewAppWithDirectory();
}}
>
+
Directory
{
executeEvent('appsDevModeAddTab', {
data: {
service: 'APP',
name: 'Q-Sandbox',
tabId: uid.rnd(),
},
});
}}
>
![center-icon]()
Q-Sandbox
{
executeEvent('appsDevModeAddTab', {
data: {
url: 'http://127.0.0.1:12391',
isPreview: false,
customIcon: swaggerSVG,
},
});
}}
>
![center-icon]()
API
{isShow && (
)}
);
};