Qortal/Qortal-Hub
1
0
Fork 0
mirror of https://github.com/Qortal/Qortal-Hub.git synced 2025-04-23 19:37:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix design task manager

Browse Source
This commit is contained in:
PhilReact 2024-11-16 00:44:09 +02:00
parent c5662dd6d7
commit 76825e9f07
2 changed files with 142 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.tsx
View File

@ -69,7 +69,7 @@ import { Loader } from "./components/Loader";
import { PasswordField, ErrorText } from "./components"; import { PasswordField, ErrorText } from "./components";
import { ChatGroup } from "./components/Chat/ChatGroup"; import { ChatGroup } from "./components/Chat/ChatGroup";
import { Group, requestQueueMemberNames } from "./components/Group/Group"; import { Group, requestQueueMemberNames } from "./components/Group/Group";
import { TaskManger } from "./components/TaskManager/TaskManger"; import { TaskManager } from "./components/TaskManager/TaskManger";
import { useModal } from "./common/useModal"; import { useModal } from "./common/useModal";
import { LoadingButton } from "@mui/lab"; import { LoadingButton } from "@mui/lab";
import { Label } from "./components/Group/AddGroup"; import { Label } from "./components/Group/AddGroup";
@ -1555,7 +1555,7 @@ function App() {
zIndex: 100000, zIndex: 100000,
}} }}
> >
<TaskManger getUserInfo={getUserInfo} /> <TaskManager getUserInfo={getUserInfo} />
</Box> </Box>
</MyContext.Provider> </MyContext.Provider>
)} )}

282
src/components/TaskManager/TaskManger.tsx
View File

@ -1,77 +1,69 @@
import { List, ListItemButton, ListItemIcon } from "@mui/material"; import {
List,
ListItemButton,
ListItemIcon,
ListItemText,
Collapse,
IconButton,
} from "@mui/material";
import React, { useContext, useEffect, useRef } from "react"; import React, { useContext, useEffect, useRef } from "react";
import ListItemText from "@mui/material/ListItemText";
import Collapse from "@mui/material/Collapse";
import InboxIcon from "@mui/icons-material/MoveToInbox";
import ExpandLess from "@mui/icons-material/ExpandLess";
import ExpandMore from "@mui/icons-material/ExpandMore";
import StarBorder from "@mui/icons-material/StarBorder";
import PendingIcon from "@mui/icons-material/Pending"; import PendingIcon from "@mui/icons-material/Pending";
import TaskAltIcon from "@mui/icons-material/TaskAlt"; import TaskAltIcon from "@mui/icons-material/TaskAlt";
import ExpandLess from "@mui/icons-material/ExpandLess";
import ExpandMore from "@mui/icons-material/ExpandMore";
import { MyContext, getBaseApiReact, isMobile } from "../../App"; import { MyContext, getBaseApiReact, isMobile } from "../../App";
import { getBaseApi } from "../../background";
export const TaskManager = ({ getUserInfo }) => {
export const TaskManger = ({getUserInfo}) => {
const { txList, setTxList, memberGroups } = useContext(MyContext); const { txList, setTxList, memberGroups } = useContext(MyContext);
const [open, setOpen] = React.useState(true); const [open, setOpen] = React.useState(false);
const intervals = useRef({});
const handleClick = () => { const handleClick = () => {
setOpen(!open); setOpen((prev) => !prev);
}; };
const intervals = useRef({}) const getStatus = ({ signature }, callback) => {
let stop = false;
const getAnswer = async () => {
const getTx = async () => {
const url = `${getBaseApiReact()}/transactions/signature/${signature}`;
const res = await fetch(url);
return await res.json();
};
const getStatus = ({signature}, callback?: any) =>{ if (!stop) {
stop = true;
let stop = false try {
const txTransaction = await getTx();
const getAnswer = async () => { if (!txTransaction.error && txTransaction.signature) {
const getTx = async () => { await new Promise((res) =>
const url = `${getBaseApiReact()}/transactions/signature/${signature}`
const res = await fetch(url)
return await res.json()
}
if (!stop) {
stop = true
try {
const txTransaction = await getTx()
if (!txTransaction.error && txTransaction.signature) {
await new Promise((res)=> {
setTimeout(() => { setTimeout(() => {
res(null) res(null);
}, 300000); }, 300000)
}) );
setTxList((prev)=> { setTxList((prev) => {
let previousData = [...prev]; let previousData = [...prev];
const findTxWithSignature = previousData.findIndex((tx)=> tx.signature === signature) const findTxWithSignature = previousData.findIndex(
if(findTxWithSignature !== -1){ (tx) => tx.signature === signature
);
if (findTxWithSignature !== -1) {
previousData[findTxWithSignature].done = true; previousData[findTxWithSignature].done = true;
return previousData return previousData;
} }
return previousData return previousData;
}) });
if(callback){ if (callback) {
callback(true) callback(true);
} }
clearInterval(intervals.current[signature]) clearInterval(intervals.current[signature]);
}
} catch (error) {}
stop = false;
}
};
} intervals.current[signature] = setInterval(getAnswer, 120000);
} catch (error) { } };
stop = false
}
}
intervals.current[signature] = setInterval(getAnswer, 120000)
}
useEffect(() => { useEffect(() => {
setTxList((prev) => { setTxList((prev) => {
@ -80,111 +72,117 @@ export const TaskManger = ({getUserInfo}) => {
const findGroup = txList.findIndex( const findGroup = txList.findIndex(
(tx) => tx?.type === "joined-group" && tx?.groupId === group.groupId (tx) => tx?.type === "joined-group" && tx?.groupId === group.groupId
); );
if (findGroup !== -1 && !previousData[findGroup]?.done ) { if (findGroup !== -1 && !previousData[findGroup]?.done) {
// add notification
previousData[findGroup].done = true; previousData[findGroup].done = true;
} }
}); });
memberGroups.forEach((group) => { memberGroups.forEach((group) => {
const findGroup = txList.findIndex( const findGroup = txList.findIndex(
(tx) => tx?.type === "created-group" && tx?.groupName === group.groupName (tx) =>
tx?.type === "created-group" && tx?.groupName === group.groupName
); );
if (findGroup !== -1 && !previousData[findGroup]?.done ) { if (findGroup !== -1 && !previousData[findGroup]?.done) {
// add notification
previousData[findGroup].done = true; previousData[findGroup].done = true;
} }
}); });
prev.forEach((tx, index)=> {
if(tx?.type === "leave-group" && memberGroups.findIndex( prev.forEach((tx, index) => {
(group) => tx?.groupId === group.groupId if (
) === -1){ tx?.type === "leave-group" &&
memberGroups.findIndex((group) => tx?.groupId === group.groupId) === -1
) {
previousData[index].done = true; previousData[index].done = true;
} }
});
}) prev.forEach((tx) => {
prev.forEach((tx, index)=> { if (
["created-common-secret", "joined-group-request", "join-request-accept"].includes(
if(tx?.type === "created-common-secret" && tx?.signature && !tx.done){ tx?.type
if(intervals.current[tx.signature]) return ) &&
tx?.signature &&
getStatus({signature: tx.signature}) !tx.done
) {
if (!intervals.current[tx.signature]) {
getStatus({ signature: tx.signature });
}
} }
if (tx?.type === "register-name" && tx?.signature && !tx.done) {
}) if (!intervals.current[tx.signature]) {
prev.forEach((tx, index)=> { getStatus({ signature: tx.signature }, getUserInfo);
}
if(tx?.type === "joined-group-request" && tx?.signature && !tx.done){
if(intervals.current[tx.signature]) return
getStatus({signature: tx.signature})
} }
});
})
prev.forEach((tx, index)=> {
if(tx?.type === "join-request-accept" && tx?.signature && !tx.done){
if(intervals.current[tx.signature]) return
getStatus({signature: tx.signature})
}
})
prev.forEach((tx, index)=> {
if(tx?.type === "register-name" && tx?.signature && !tx.done){
if(intervals.current[tx.signature]) return
getStatus({signature: tx.signature}, getUserInfo)
}
})
return previousData; return previousData;
}); });
}, [memberGroups, getUserInfo]); }, [memberGroups, getUserInfo]);
if(isMobile) return null if (isMobile || txList?.length === 0 || txList.every((item) => item?.done))
return null;
if (txList?.length === 0 || txList.filter((item) => !item?.done).length === 0) return null;
return ( return (
<List <>
sx={{ width: "100%", maxWidth: 360, bgcolor: "background.paper" }} {!open && (
component="nav" <IconButton
aria-labelledby="nested-list-subheader" onClick={handleClick}
> sx={{
<ListItemButton onClick={handleClick}> position: "fixed",
<ListItemIcon> bottom: 16,
{txList.find((item) => !item.done) ? ( right: 16,
<PendingIcon sx={{ bgcolor: "primary.main",
color: 'white' color: "white",
}} /> ":hover": { bgcolor: "primary.dark" },
) : ( }}
<TaskAltIcon sx={{ >
color: 'white' {txList.some((item) => !item.done) ? <PendingIcon /> : <TaskAltIcon />}
}} /> </IconButton>
)} )}
</ListItemIcon> {open && (
<ListItemText primary="Ongoing Transactions" /> <List
{open ? <ExpandLess /> : <ExpandMore />} sx={{
</ListItemButton> position: "fixed",
<Collapse in={open} timeout="auto" unmountOnExit> bottom: 16,
<List component="div" disablePadding sx={{ right: 16,
maxHeight: '400px', width: "300px",
overflow: 'auto' maxHeight: "400px",
}}> bgcolor: "background.paper",
{txList.map((item) => { boxShadow: 4,
return ( overflow: "auto",
<ListItemButton key={item?.signature} sx={{ pl: 4 }}> zIndex: 10,
padding: '0px'
<ListItemText primary={item?.done ? item.labelDone : item.label} /> }}
</ListItemButton> component="nav"
); >
})} <ListItemButton onClick={handleClick}>
<ListItemIcon>
{txList.some((item) => !item.done) ? (
<PendingIcon sx={{
color:'white'
}} />
) : (
<TaskAltIcon sx={{
color:'white'
}} />
)}
</ListItemIcon>
<ListItemText primary="Ongoing Transactions" />
{open ? <ExpandLess /> : <ExpandMore />}
</ListItemButton>
<Collapse in={open} timeout="auto" unmountOnExit>
<List component="div" disablePadding>
{txList.map((item) => (
<ListItemButton key={item?.signature} sx={{ pl: 4 }}>
<ListItemText
primary={item?.done ? item.labelDone : item.label}
/>
</ListItemButton>
))}
</List>
</Collapse>
</List> </List>
</Collapse> )}
</List> </>
); );
}; };