From 900fe2a2fbebb8a2d955174408430eda4f50c0ba Mon Sep 17 00:00:00 2001 From: PhilReact Date: Mon, 16 Dec 2024 11:20:53 +0200 Subject: [PATCH] changes to saved pinned apps --- src/App.tsx | 2 +- src/atoms/global.ts | 4 + src/components/Apps/AppsDesktop.tsx | 2 +- src/components/Apps/AppsDevMode.tsx | 2 +- src/components/DesktopSideBar.tsx | 4 +- src/components/Save/Save.tsx | 235 ++++++++++++++++++++++++++-- src/useQortalGetSaveSettings.tsx | 10 +- src/useRetrieveDataLocalStorage.tsx | 5 +- 8 files changed, 241 insertions(+), 23 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index a442e97..01d00e1 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -388,7 +388,7 @@ function App() { const qortalRequestCheckbox1Ref = useRef(null); useRetrieveDataLocalStorage(); - useQortalGetSaveSettings(userInfo?.name); + useQortalGetSaveSettings(userInfo?.name, extState === "authenticated"); const [fullScreen, setFullScreen] = useRecoilState(fullScreenAtom); const [isEnabledDevMode, setIsEnabledDevMode] = useRecoilState(enabledDevModeAtom); diff --git a/src/atoms/global.ts b/src/atoms/global.ts index 846753b..dfb9f82 100644 --- a/src/atoms/global.ts +++ b/src/atoms/global.ts @@ -40,6 +40,10 @@ export const sortablePinnedAppsAtom = atom({ { name: 'Q-Manager', service: 'APP' + }, + { + name: 'Q-Blog', + service: 'APP' } ], }); diff --git a/src/components/Apps/AppsDesktop.tsx b/src/components/Apps/AppsDesktop.tsx index 121dd6e..8797a52 100644 --- a/src/components/Apps/AppsDesktop.tsx +++ b/src/components/Apps/AppsDesktop.tsx @@ -407,7 +407,7 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop /> */} - + {isEnabledDevMode && ( { diff --git a/src/components/Apps/AppsDevMode.tsx b/src/components/Apps/AppsDevMode.tsx index 297db33..0514ce3 100644 --- a/src/components/Apps/AppsDevMode.tsx +++ b/src/components/Apps/AppsDevMode.tsx @@ -282,7 +282,7 @@ export const AppsDevMode = ({ mode, setMode, show , myName, goToHome, setDesktop /> - + { setDesktopViewMode('dev') diff --git a/src/components/DesktopSideBar.tsx b/src/components/DesktopSideBar.tsx index ae55a50..9ee123d 100644 --- a/src/components/DesktopSideBar.tsx +++ b/src/components/DesktopSideBar.tsx @@ -11,7 +11,7 @@ import { useRecoilState } from 'recoil'; import { enabledDevModeAtom } from '../atoms/global'; import { AppsIcon } from '../assets/Icons/AppsIcon'; -export const DesktopSideBar = ({goToHome, setDesktopSideView, toggleSideViewDirects, hasUnreadDirects, isDirects, toggleSideViewGroups,hasUnreadGroups, isGroups, isApps, setDesktopViewMode, desktopViewMode }) => { +export const DesktopSideBar = ({goToHome, setDesktopSideView, toggleSideViewDirects, hasUnreadDirects, isDirects, toggleSideViewGroups,hasUnreadGroups, isGroups, isApps, setDesktopViewMode, desktopViewMode, myName }) => { const [isEnabledDevMode, setIsEnabledDevMode] = useRecoilState(enabledDevModeAtom) return ( @@ -98,7 +98,7 @@ export const DesktopSideBar = ({goToHome, setDesktopSideView, toggleSideViewDire /> */} - + {/* */} {isEnabledDevMode && ( { +import { Spacer } from "../../common/Spacer"; +import { LoadingButton } from "@mui/lab"; +import { saveToLocalStorage } from "../Apps/AppsNavBar"; +export const Save = ({ isDesktop, disableWidth, myName }) => { const [pinnedApps, setPinnedApps] = useRecoilState(sortablePinnedAppsAtom); const [settingsQdnLastUpdated, setSettingsQdnLastUpdated] = useRecoilState( settingsQDNLastUpdatedAtom @@ -31,7 +34,7 @@ export const Save = ({ isDesktop, disableWidth }) => { const [isLoading, setIsLoading] = useState(false); const [infoSnack, setInfoSnack] = useState(null); const [oldPinnedApps, setOldPinnedApps] = useRecoilState(oldPinnedAppsAtom); - + const [anchorEl, setAnchorEl] = useState(null); const { show } = useContext(MyContext); const hasChanged = useMemo(() => { @@ -83,9 +86,7 @@ export const Save = ({ isDesktop, disableWidth }) => { .sendMessage( "ENCRYPT_DATA", { - - data64, - + data64, }, 60000 ) @@ -135,6 +136,7 @@ export const Save = ({ isDesktop, disableWidth }) => { message: "Sucessfully published to QDN", }); setOpenSnack(true); + setAnchorEl(null) } } } catch (error) { @@ -147,20 +149,31 @@ export const Save = ({ isDesktop, disableWidth }) => { setIsLoading(false); } }; + const handlePopupClick = (event) => { + event.stopPropagation(); // Prevent parent onClick from firing + setAnchorEl(event.currentTarget); + }; + + const revertChanges = () => { + setPinnedApps(oldPinnedApps); + saveToLocalStorage("ext_saved_settings", "sortablePinnedApps", null); + setAnchorEl(null) + }; + return ( <> {isDesktop ? ( { /> )} + setAnchorEl(null)} // Close popover on click outside + anchorOrigin={{ + vertical: "bottom", + horizontal: "center", + }} + transformOrigin={{ + vertical: "top", + horizontal: "center", + }} + sx={{ + width: "300px", + maxWidth: "90%", + maxHeight: "80%", + overflow: "auto", + }} + > + + {!myName ? ( + + + You need a registered Qortal name to save your pinned apps to QDN. + + + ) : ( + <> + {hasChanged && ( + + + You have unsaved changes to your pinned apps. Save them to QDN. + + + + Save to QDN + + + {!isNaN(settingsQdnLastUpdated) && settingsQdnLastUpdated > 0 && ( + <> + + Don't like your current local changes? Would you like to + reset to your saved QDN pinned apps? + + + + Revert to QDN + + + )} + {!isNaN(settingsQdnLastUpdated) && settingsQdnLastUpdated === 0 && ( + <> + + Don't like your current local changes? Would you like to + reset to the default pinned apps? + + + + Revert to default + + + )} + + )} + {!isNaN(settingsQdnLastUpdated) && settingsQdnLastUpdated === -100 && ( + + + The app was unable to download your existing QDN-saved pinned + apps. Would you like to overwrite those changes? + + + + Overwrite to QDN + + + )} + {!hasChanged && ( + + + You currently do not have any changes to your pinned apps + + + + )} + + )} + + + { ); data = await res.text(); - if(!data) throw new Error('Unable to fetch publish') const decryptedKey: any = await decryptResource(data); @@ -53,7 +52,8 @@ const getPublishRecord = async (myName) => { } }; -export const useQortalGetSaveSettings = (myName) => { + +export const useQortalGetSaveSettings = (myName, isAuthenticated) => { const setSortablePinnedApps = useSetRecoilState(sortablePinnedAppsAtom); const setCanSave = useSetRecoilState(canSaveSettingToQdnAtom); const setSettingsQDNLastUpdated = useSetRecoilState(settingsQDNLastUpdatedAtom); @@ -67,7 +67,7 @@ export const useQortalGetSaveSettings = (myName) => { const settings = await getPublish(myName) if(settings?.sortablePinnedApps && timestamp > settingsLocalLastUpdated){ setSortablePinnedApps(settings.sortablePinnedApps) - + setSettingsQDNLastUpdated(timestamp || 0) } else if(settings?.sortablePinnedApps){ setSettingsQDNLastUpdated(timestamp || 0) @@ -87,8 +87,8 @@ export const useQortalGetSaveSettings = (myName) => { } }, []) useEffect(()=> { - if(!myName || !settingsLocalLastUpdated) return + if(!myName || !settingsLocalLastUpdated || !isAuthenticated) return getSavedSettings(myName, settingsLocalLastUpdated) - }, [getSavedSettings, myName, settingsLocalLastUpdated]) + }, [getSavedSettings, myName, settingsLocalLastUpdated, isAuthenticated]) } diff --git a/src/useRetrieveDataLocalStorage.tsx b/src/useRetrieveDataLocalStorage.tsx index 88e93f4..8f808ab 100644 --- a/src/useRetrieveDataLocalStorage.tsx +++ b/src/useRetrieveDataLocalStorage.tsx @@ -23,8 +23,11 @@ export const useRetrieveDataLocalStorage = () => { const pinnedAppsLocal = fetchFromLocalStorage('ext_saved_settings') if(pinnedAppsLocal?.sortablePinnedApps){ setSortablePinnedApps(pinnedAppsLocal?.sortablePinnedApps) + setSettingsLocalLastUpdated(pinnedAppsLocal?.timestamp || -1) + } else { + setSettingsLocalLastUpdated(-1) } - setSettingsLocalLastUpdated(pinnedAppsLocal?.timestamp || -1) + }, []) useEffect(()=> {