From 44c6b5ad3289e9d0fb063d99695225d3d913dfaf Mon Sep 17 00:00:00 2001 From: PhilReact Date: Mon, 21 Oct 2024 07:19:34 +0300 Subject: [PATCH] fixed bugs --- src/components/Apps/SortablePinnedApps.tsx | 67 +++++++++++++++------- src/components/ContextMenuPinnedApps.tsx | 14 ++++- src/useQortalGetSaveSettings.tsx | 3 +- 3 files changed, 59 insertions(+), 25 deletions(-) diff --git a/src/components/Apps/SortablePinnedApps.tsx b/src/components/Apps/SortablePinnedApps.tsx index d758997..fc75919 100644 --- a/src/components/Apps/SortablePinnedApps.tsx +++ b/src/components/Apps/SortablePinnedApps.tsx @@ -28,7 +28,7 @@ const SortableItem = ({ id, name, app }) => { }; return ( - + { - console.log({myWebsite, myApp, availableQapps, pinnedApps}) - let pinned = [...pinnedApps] - const findMyWebsite = pinned?.find((item)=> item?.service === myWebsite?.service && item?.name === myWebsite?.name) - const findMyApp = pinned?.find((item)=> item?.service === myApp?.service && item?.name === myApp?.name) - - if(myWebsite && !findMyWebsite){ - pinned.unshift(myWebsite) - } - if(myApp && !findMyApp){ - pinned.unshift(myApp) - } - pinned = pinned.map((pin)=> { - const findIndex = availableQapps?.findIndex((item)=> item?.service === pin?.service && item?.name === pin?.name) - if(findIndex !== -1) return availableQapps[findIndex] - - return pin - }) - return pinned - }, [myApp, myWebsite, pinnedApps, availableQapps]) + const transformPinnedApps = useMemo(() => { + console.log({ myWebsite, myApp, availableQapps, pinnedApps }); + + // Clone the existing pinned apps list + let pinned = [...pinnedApps]; + + // Function to add or update `isMine` property + const addOrUpdateIsMine = (pinnedList, appToCheck) => { + if (!appToCheck) return pinnedList; + + const existingIndex = pinnedList.findIndex( + (item) => item?.service === appToCheck?.service && item?.name === appToCheck?.name + ); + + if (existingIndex !== -1) { + // If the app is already in the list, update it with `isMine: true` + pinnedList[existingIndex] = { ...pinnedList[existingIndex], isMine: true }; + } else { + // If not in the list, add it with `isMine: true` at the beginning + pinnedList.unshift({ ...appToCheck, isMine: true }); + } + + return pinnedList; + }; + + // Update or add `myWebsite` and `myApp` while preserving their positions + pinned = addOrUpdateIsMine(pinned, myWebsite); + pinned = addOrUpdateIsMine(pinned, myApp); + + // Update pinned list based on availableQapps + pinned = pinned.map((pin) => { + const findIndex = availableQapps?.findIndex( + (item) => item?.service === pin?.service && item?.name === pin?.name + ); + if (findIndex !== -1) return { + ...availableQapps[findIndex], + ...pin + } + + return pin; + }); + + return pinned; + }, [myApp, myWebsite, pinnedApps, availableQapps]); + console.log('transformPinnedApps', transformPinnedApps) // const hasSetPinned = useRef(false) // useEffect(() => { diff --git a/src/components/ContextMenuPinnedApps.tsx b/src/components/ContextMenuPinnedApps.tsx index 7075f4c..be0ae46 100644 --- a/src/components/ContextMenuPinnedApps.tsx +++ b/src/components/ContextMenuPinnedApps.tsx @@ -22,7 +22,7 @@ const CustomStyledMenu = styled(Menu)(({ theme }) => ({ }, })); -export const ContextMenuPinnedApps = ({ children, app, setEnableDrag }) => { +export const ContextMenuPinnedApps = ({ children, app, isMine }) => { const [menuPosition, setMenuPosition] = useState(null); const longPressTimeout = useRef(null); const maxHoldTimeout = useRef(null); @@ -31,6 +31,7 @@ export const ContextMenuPinnedApps = ({ children, app, setEnableDrag }) => { const [sortablePinnedApps, setSortablePinnedApps] = useRecoilState(sortablePinnedAppsAtom); const handleContextMenu = (event) => { + if(isMine) return event.preventDefault(); event.stopPropagation(); preventClick.current = true; @@ -41,12 +42,14 @@ export const ContextMenuPinnedApps = ({ children, app, setEnableDrag }) => { }; const handleTouchStart = (event) => { + if(isMine) return + const { clientX, clientY } = event.touches[0]; startTouchPosition.current = { x: clientX, y: clientY }; longPressTimeout.current = setTimeout(() => { preventClick.current = true; - setEnableDrag(false); + event.stopPropagation(); setMenuPosition({ mouseX: clientX, @@ -61,6 +64,8 @@ export const ContextMenuPinnedApps = ({ children, app, setEnableDrag }) => { }; const handleTouchMove = (event) => { + if(isMine) return + const { clientX, clientY } = event.touches[0]; const { x, y } = startTouchPosition.current; @@ -74,9 +79,10 @@ export const ContextMenuPinnedApps = ({ children, app, setEnableDrag }) => { }; const handleTouchEnd = (event) => { + if(isMine) return + clearTimeout(longPressTimeout.current); clearTimeout(maxHoldTimeout.current); - setEnableDrag(true); if (preventClick.current) { event.preventDefault(); event.stopPropagation(); @@ -85,6 +91,8 @@ export const ContextMenuPinnedApps = ({ children, app, setEnableDrag }) => { }; const handleClose = (e) => { + if(isMine) return + e.preventDefault(); e.stopPropagation(); setMenuPosition(null); diff --git a/src/useQortalGetSaveSettings.tsx b/src/useQortalGetSaveSettings.tsx index 4809b59..6da3092 100644 --- a/src/useQortalGetSaveSettings.tsx +++ b/src/useQortalGetSaveSettings.tsx @@ -68,10 +68,11 @@ export const useQortalGetSaveSettings = (myName) => { console.log('settings', settings, timestamp, settingsLocalLastUpdated ) if(settings?.sortablePinnedApps && timestamp > settingsLocalLastUpdated){ setSortablePinnedApps(settings.sortablePinnedApps) - setOldPinnedApps(settings.sortablePinnedApps) + setSettingsQDNLastUpdated(timestamp || 0) } else if(settings?.sortablePinnedApps){ setSettingsQDNLastUpdated(timestamp || 0) + setOldPinnedApps(settings.sortablePinnedApps) } if(!settings){ // set -100 to indicate that it couldn't fetch the publish