mirror of
https://github.com/Qortal/Qortal-Hub.git
synced 2025-04-24 20:07:51 +00:00
fix design task manager
This commit is contained in:
parent
c5662dd6d7
commit
76825e9f07
@ -69,7 +69,7 @@ import { Loader } from "./components/Loader";
|
||||
import { PasswordField, ErrorText } from "./components";
|
||||
import { ChatGroup } from "./components/Chat/ChatGroup";
|
||||
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 { LoadingButton } from "@mui/lab";
|
||||
import { Label } from "./components/Group/AddGroup";
|
||||
@ -1555,7 +1555,7 @@ function App() {
|
||||
zIndex: 100000,
|
||||
}}
|
||||
>
|
||||
<TaskManger getUserInfo={getUserInfo} />
|
||||
<TaskManager getUserInfo={getUserInfo} />
|
||||
</Box>
|
||||
</MyContext.Provider>
|
||||
)}
|
||||
|
||||
@ -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 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 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 { getBaseApi } from "../../background";
|
||||
|
||||
|
||||
|
||||
export const TaskManger = ({getUserInfo}) => {
|
||||
export const TaskManager = ({ getUserInfo }) => {
|
||||
const { txList, setTxList, memberGroups } = useContext(MyContext);
|
||||
const [open, setOpen] = React.useState(true);
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const intervals = useRef({});
|
||||
|
||||
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) =>{
|
||||
|
||||
let stop = false
|
||||
|
||||
const getAnswer = async () => {
|
||||
const getTx = async () => {
|
||||
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)=> {
|
||||
if (!stop) {
|
||||
stop = true;
|
||||
try {
|
||||
const txTransaction = await getTx();
|
||||
if (!txTransaction.error && txTransaction.signature) {
|
||||
await new Promise((res) =>
|
||||
setTimeout(() => {
|
||||
res(null)
|
||||
}, 300000);
|
||||
})
|
||||
setTxList((prev)=> {
|
||||
res(null);
|
||||
}, 300000)
|
||||
);
|
||||
setTxList((prev) => {
|
||||
let previousData = [...prev];
|
||||
const findTxWithSignature = previousData.findIndex((tx)=> tx.signature === signature)
|
||||
if(findTxWithSignature !== -1){
|
||||
const findTxWithSignature = previousData.findIndex(
|
||||
(tx) => tx.signature === signature
|
||||
);
|
||||
if (findTxWithSignature !== -1) {
|
||||
previousData[findTxWithSignature].done = true;
|
||||
return previousData
|
||||
return previousData;
|
||||
}
|
||||
return previousData
|
||||
})
|
||||
if(callback){
|
||||
callback(true)
|
||||
return previousData;
|
||||
});
|
||||
if (callback) {
|
||||
callback(true);
|
||||
}
|
||||
clearInterval(intervals.current[signature])
|
||||
clearInterval(intervals.current[signature]);
|
||||
}
|
||||
} catch (error) {}
|
||||
stop = false;
|
||||
}
|
||||
};
|
||||
|
||||
}
|
||||
} catch (error) { }
|
||||
|
||||
stop = false
|
||||
}
|
||||
}
|
||||
|
||||
intervals.current[signature] = setInterval(getAnswer, 120000)
|
||||
}
|
||||
intervals.current[signature] = setInterval(getAnswer, 120000);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setTxList((prev) => {
|
||||
@ -80,111 +72,117 @@ export const TaskManger = ({getUserInfo}) => {
|
||||
const findGroup = txList.findIndex(
|
||||
(tx) => tx?.type === "joined-group" && tx?.groupId === group.groupId
|
||||
);
|
||||
if (findGroup !== -1 && !previousData[findGroup]?.done ) {
|
||||
// add notification
|
||||
if (findGroup !== -1 && !previousData[findGroup]?.done) {
|
||||
previousData[findGroup].done = true;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
memberGroups.forEach((group) => {
|
||||
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 ) {
|
||||
// add notification
|
||||
if (findGroup !== -1 && !previousData[findGroup]?.done) {
|
||||
previousData[findGroup].done = true;
|
||||
}
|
||||
|
||||
});
|
||||
prev.forEach((tx, index)=> {
|
||||
if(tx?.type === "leave-group" && memberGroups.findIndex(
|
||||
(group) => tx?.groupId === group.groupId
|
||||
) === -1){
|
||||
|
||||
prev.forEach((tx, index) => {
|
||||
if (
|
||||
tx?.type === "leave-group" &&
|
||||
memberGroups.findIndex((group) => tx?.groupId === group.groupId) === -1
|
||||
) {
|
||||
previousData[index].done = true;
|
||||
}
|
||||
});
|
||||
|
||||
})
|
||||
prev.forEach((tx, index)=> {
|
||||
|
||||
if(tx?.type === "created-common-secret" && tx?.signature && !tx.done){
|
||||
if(intervals.current[tx.signature]) return
|
||||
|
||||
getStatus({signature: tx.signature})
|
||||
prev.forEach((tx) => {
|
||||
if (
|
||||
["created-common-secret", "joined-group-request", "join-request-accept"].includes(
|
||||
tx?.type
|
||||
) &&
|
||||
tx?.signature &&
|
||||
!tx.done
|
||||
) {
|
||||
if (!intervals.current[tx.signature]) {
|
||||
getStatus({ signature: tx.signature });
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
prev.forEach((tx, index)=> {
|
||||
|
||||
if(tx?.type === "joined-group-request" && tx?.signature && !tx.done){
|
||||
if(intervals.current[tx.signature]) return
|
||||
|
||||
getStatus({signature: tx.signature})
|
||||
if (tx?.type === "register-name" && tx?.signature && !tx.done) {
|
||||
if (!intervals.current[tx.signature]) {
|
||||
getStatus({ signature: tx.signature }, getUserInfo);
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
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;
|
||||
});
|
||||
}, [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 (
|
||||
<List
|
||||
sx={{ width: "100%", maxWidth: 360, bgcolor: "background.paper" }}
|
||||
component="nav"
|
||||
aria-labelledby="nested-list-subheader"
|
||||
>
|
||||
<ListItemButton onClick={handleClick}>
|
||||
<ListItemIcon>
|
||||
{txList.find((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 sx={{
|
||||
maxHeight: '400px',
|
||||
overflow: 'auto'
|
||||
}}>
|
||||
{txList.map((item) => {
|
||||
return (
|
||||
<ListItemButton key={item?.signature} sx={{ pl: 4 }}>
|
||||
|
||||
<ListItemText primary={item?.done ? item.labelDone : item.label} />
|
||||
</ListItemButton>
|
||||
);
|
||||
})}
|
||||
<>
|
||||
{!open && (
|
||||
<IconButton
|
||||
onClick={handleClick}
|
||||
sx={{
|
||||
position: "fixed",
|
||||
bottom: 16,
|
||||
right: 16,
|
||||
bgcolor: "primary.main",
|
||||
color: "white",
|
||||
":hover": { bgcolor: "primary.dark" },
|
||||
}}
|
||||
>
|
||||
{txList.some((item) => !item.done) ? <PendingIcon /> : <TaskAltIcon />}
|
||||
</IconButton>
|
||||
)}
|
||||
{open && (
|
||||
<List
|
||||
sx={{
|
||||
position: "fixed",
|
||||
bottom: 16,
|
||||
right: 16,
|
||||
width: "300px",
|
||||
maxHeight: "400px",
|
||||
bgcolor: "background.paper",
|
||||
boxShadow: 4,
|
||||
overflow: "auto",
|
||||
zIndex: 10,
|
||||
padding: '0px'
|
||||
}}
|
||||
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>
|
||||
</Collapse>
|
||||
</List>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user