diff --git a/src/components/Apps/AppsPrivate.tsx b/src/components/Apps/AppsPrivate.tsx index d18fcad..e9696e0 100644 --- a/src/components/Apps/AppsPrivate.tsx +++ b/src/components/Apps/AppsPrivate.tsx @@ -1,6 +1,5 @@ -import React, { useContext, useMemo, useState } from "react"; +import React, { useContext, useMemo, useState } from 'react'; import { - Avatar, Box, Button, ButtonBase, @@ -13,14 +12,17 @@ import { Select, Tab, Tabs, - Typography, -} from "@mui/material"; -import { useDropzone } from "react-dropzone"; -import { useHandlePrivateApps } from "./useHandlePrivateApps"; -import { useRecoilState, useSetRecoilState } from "recoil"; -import { groupsPropertiesAtom, myGroupsWhereIAmAdminAtom } from "../../atoms/global"; -import { Label } from "../Group/AddGroup"; -import { Spacer } from "../../common/Spacer"; + useTheme, +} from '@mui/material'; +import { useDropzone } from 'react-dropzone'; +import { useHandlePrivateApps } from './useHandlePrivateApps'; +import { useRecoilState } from 'recoil'; +import { + groupsPropertiesAtom, + myGroupsWhereIAmAdminAtom, +} from '../../atoms/global'; +import { Label } from '../Group/AddGroup'; +import { Spacer } from '../../common/Spacer'; import { Add, AppCircle, @@ -28,52 +30,59 @@ import { AppCircleLabel, PublishQAppChoseFile, PublishQAppInfo, -} from "./Apps-styles"; -import ImageUploader from "../../common/ImageUploader"; -import { isMobile, MyContext } from "../../App"; -import { fileToBase64 } from "../../utils/fileReading"; -import { objectToBase64 } from "../../qdn/encryption/group-encryption"; -import { getFee } from "../../background"; +} from './Apps-styles'; +import ImageUploader from '../../common/ImageUploader'; +import { isMobile, MyContext } from '../../App'; +import { fileToBase64 } from '../../utils/fileReading'; +import { objectToBase64 } from '../../qdn/encryption/group-encryption'; +import { getFee } from '../../background'; const maxFileSize = 50 * 1024 * 1024; // 50MB -export const AppsPrivate = ({myName}) => { +export const AppsPrivate = ({ myName }) => { const { openApp } = useHandlePrivateApps(); const [file, setFile] = useState(null); const [logo, setLogo] = useState(null); - const [qortalUrl, setQortalUrl] = useState(""); + const [qortalUrl, setQortalUrl] = useState(''); const [selectedGroup, setSelectedGroup] = useState(0); - const [groupsProperties] = useRecoilState(groupsPropertiesAtom) + const [groupsProperties] = useRecoilState(groupsPropertiesAtom); const [valueTabPrivateApp, setValueTabPrivateApp] = useState(0); const [myGroupsWhereIAmAdminFromGlobal] = useRecoilState( myGroupsWhereIAmAdminAtom ); - const myGroupsWhereIAmAdmin = useMemo(()=> { - return myGroupsWhereIAmAdminFromGlobal?.filter((group)=> groupsProperties[group?.groupId]?.isOpen === false) - }, [myGroupsWhereIAmAdminFromGlobal, groupsProperties]) - const [isOpenPrivateModal, setIsOpenPrivateModal] = useState(false); - const { show, setInfoSnackCustom, setOpenSnackGlobal, memberGroups } = useContext(MyContext); - + const myGroupsWhereIAmAdmin = useMemo(() => { + return myGroupsWhereIAmAdminFromGlobal?.filter( + (group) => groupsProperties[group?.groupId]?.isOpen === false + ); + }, [myGroupsWhereIAmAdminFromGlobal, groupsProperties]); - const myGroupsPrivate = useMemo(()=> { - return memberGroups?.filter((group)=> groupsProperties[group?.groupId]?.isOpen === false) - }, [memberGroups, groupsProperties]) + const [isOpenPrivateModal, setIsOpenPrivateModal] = useState(false); + const { show, setInfoSnackCustom, setOpenSnackGlobal, memberGroups } = + useContext(MyContext); + const theme = useTheme(); + + const myGroupsPrivate = useMemo(() => { + return memberGroups?.filter( + (group) => groupsProperties[group?.groupId]?.isOpen === false + ); + }, [memberGroups, groupsProperties]); const [privateAppValues, setPrivateAppValues] = useState({ - name: "", - service: "DOCUMENT", - identifier: "", + name: '', + service: 'DOCUMENT', + identifier: '', groupId: 0, }); const [newPrivateAppValues, setNewPrivateAppValues] = useState({ - service: "DOCUMENT", - identifier: "", - name: "", + service: 'DOCUMENT', + identifier: '', + name: '', }); + const { getRootProps, getInputProps } = useDropzone({ accept: { - "application/zip": [".zip"], // Only accept zip files + 'application/zip': ['.zip'], // Only accept zip files }, maxSize: maxFileSize, multiple: false, // Disable multiple file uploads @@ -85,7 +94,7 @@ export const AppsPrivate = ({myName}) => { onDropRejected: (fileRejections) => { fileRejections.forEach(({ file, errors }) => { errors.forEach((error) => { - if (error.code === "file-too-large") { + if (error.code === 'file-too-large') { console.error( `File ${file.name} is too large. Max size allowed is ${ maxFileSize / (1024 * 1024) @@ -100,25 +109,24 @@ export const AppsPrivate = ({myName}) => { const addPrivateApp = async () => { try { if (privateAppValues?.groupId === 0) return; - - await openApp(privateAppValues, true); + + await openApp(privateAppValues, true); } catch (error) { - console.error(error) - + console.error(error); } }; const clearFields = () => { setPrivateAppValues({ - name: "", - service: "DOCUMENT", - identifier: "", + name: '', + service: 'DOCUMENT', + identifier: '', groupId: 0, }); setNewPrivateAppValues({ - service: "DOCUMENT", - identifier: "", - name: "", + service: 'DOCUMENT', + identifier: '', + name: '', }); setFile(null); setValueTabPrivateApp(0); @@ -129,9 +137,9 @@ export const AppsPrivate = ({myName}) => { const publishPrivateApp = async () => { try { if (selectedGroup === 0) return; - if (!logo) throw new Error("Please select an image for a logo"); - if (!myName) throw new Error("You need a Qortal name to publish"); - if (!newPrivateAppValues?.name) throw new Error("Your app needs a name"); + if (!logo) throw new Error('Please select an image for a logo'); + if (!myName) throw new Error('You need a Qortal name to publish'); + if (!newPrivateAppValues?.name) throw new Error('Your app needs a name'); const base64Logo = await fileToBase64(logo); const base64App = await fileToBase64(file); const objectToSave = { @@ -141,27 +149,29 @@ export const AppsPrivate = ({myName}) => { }; const object64 = await objectToBase64(objectToSave); const decryptedData = await window.sendMessage( - "ENCRYPT_QORTAL_GROUP_DATA", + 'ENCRYPT_QORTAL_GROUP_DATA', { base64: object64, groupId: selectedGroup, } ); + if (decryptedData?.error) { throw new Error( - decryptedData?.error || "Unable to encrypt app. App not published" + decryptedData?.error || 'Unable to encrypt app. App not published' ); } - const fee = await getFee("ARBITRARY"); + + const fee = await getFee('ARBITRARY'); await show({ - message: "Would you like to publish this app?", - publishFee: fee.fee + " QORT", + message: 'Would you like to publish this app?', + publishFee: fee.fee + ' QORT', }); await new Promise((res, rej) => { window - .sendMessage("publishOnQDN", { + .sendMessage('publishOnQDN', { data: decryptedData, identifier: newPrivateAppValues?.identifier, service: newPrivateAppValues?.service, @@ -174,9 +184,10 @@ export const AppsPrivate = ({myName}) => { rej(response.error); }) .catch((error) => { - rej(error.message || "An error occurred"); + rej(error.message || 'An error occurred'); }); }); + openApp( { identifier: newPrivateAppValues?.identifier, @@ -188,10 +199,10 @@ export const AppsPrivate = ({myName}) => { ); clearFields(); } catch (error) { - setOpenSnackGlobal(true) + setOpenSnackGlobal(true); setInfoSnackCustom({ - type: "error", - message: error?.message || "Unable to publish app", + type: 'error', + message: error?.message || 'Unable to publish app', }); } }; @@ -203,9 +214,10 @@ export const AppsPrivate = ({myName}) => { function a11yProps(index: number) { return { id: `simple-tab-${index}`, - "aria-controls": `simple-tabpanel-${index}`, + 'aria-controls': `simple-tabpanel-${index}`, }; } + return ( <> { setIsOpenPrivateModal(true); }} sx={{ - width: "80px", + width: '80px', }} > + + Private @@ -233,7 +246,7 @@ export const AppsPrivate = ({myName}) => { aria-labelledby="alert-dialog-title" aria-describedby="alert-dialog-description" onKeyDown={(e) => { - if (e.key === "Enter") { + if (e.key === 'Enter') { if (valueTabPrivateApp === 0) { if ( !privateAppValues.name || @@ -249,23 +262,17 @@ export const AppsPrivate = ({myName}) => { maxWidth="md" fullWidth={true} > - - {valueTabPrivateApp === 0 - ? "Access private app" - : "Publish private app"} - - @@ -273,20 +280,20 @@ export const AppsPrivate = ({myName}) => { label="Access app" {...a11yProps(0)} sx={{ - "&.Mui-selected": { - color: "white", + '&.Mui-selected': { + color: theme.palette.text.primary, }, - fontSize: isMobile ? "0.75rem" : "1rem", // Adjust font size for mobile + fontSize: isMobile ? '0.75rem' : '1rem', // Adjust font size for mobile }} /> @@ -296,9 +303,9 @@ export const AppsPrivate = ({myName}) => { @@ -333,10 +340,10 @@ export const AppsPrivate = ({myName}) => { @@ -355,10 +362,10 @@ export const AppsPrivate = ({myName}) => { @@ -376,6 +383,7 @@ export const AppsPrivate = ({myName}) => { /> + + {logo?.name} + +