From 99f96e8d96f89b0a87fb7d3e5c85ffef5db91104 Mon Sep 17 00:00:00 2001 From: elcharitas Date: Wed, 17 Apr 2024 14:03:39 +0100 Subject: [PATCH 1/6] WIP --- packages/frontend/src/MobileApp.tsx | 7 ++ packages/frontend/src/api/hooks/index.ts | 1 + .../store/providers/app-context-provider.tsx | 26 ++--- .../providers/controlled-modal-provider.tsx | 44 ++++++++ .../navigation/NavHeader.tsx | 13 ++- .../profile/UserSettings.tsx | 28 +++-- .../mobile-containers/AuthPromptContainer.tsx | 18 +-- .../mobile-containers/InstallPWAContainer.tsx | 8 +- .../src/mobile-containers/ModalContainer.tsx | 30 +++++ .../frontend/src/mobile-pages/superfeed.tsx | 10 +- packages/frontend/src/routes.ts | 105 ++++++++---------- packages/ui-kit/index.ts | 10 +- 12 files changed, 196 insertions(+), 104 deletions(-) create mode 100644 packages/frontend/src/api/store/providers/controlled-modal-provider.tsx create mode 100644 packages/frontend/src/mobile-containers/ModalContainer.tsx diff --git a/packages/frontend/src/MobileApp.tsx b/packages/frontend/src/MobileApp.tsx index 1788687aa..a89856358 100644 --- a/packages/frontend/src/MobileApp.tsx +++ b/packages/frontend/src/MobileApp.tsx @@ -16,10 +16,12 @@ import CONFIG from "./config"; import ToastContainer from "./containers/toasts/ToastContainer"; import "@alphaday/ui-kit/global.scss"; import "./customIonicStyles.scss"; +import { ModalContainer } from "./mobile-containers/ModalContainer"; import { EMobileRoutePaths, EMobileTabRoutePaths, mobileRoutes, + modals, } from "./routes"; const { IS_DEV } = CONFIG; @@ -138,6 +140,11 @@ const RouterChild = () => { const MobileApp: React.FC = () => { return ( + {modals.map((modal) => ( + + + + ))} diff --git a/packages/frontend/src/api/hooks/index.ts b/packages/frontend/src/api/hooks/index.ts index 4baa7d830..a95997dae 100644 --- a/packages/frontend/src/api/hooks/index.ts +++ b/packages/frontend/src/api/hooks/index.ts @@ -33,3 +33,4 @@ export * from "./useValueWatcher"; export * from "./useOnScreen"; export * from "./usePullToRefresh"; export * from "./useHistory"; +export * from "../store/providers/controlled-modal-provider"; diff --git a/packages/frontend/src/api/store/providers/app-context-provider.tsx b/packages/frontend/src/api/store/providers/app-context-provider.tsx index 550e7ae98..61ea9ed00 100644 --- a/packages/frontend/src/api/store/providers/app-context-provider.tsx +++ b/packages/frontend/src/api/store/providers/app-context-provider.tsx @@ -1,5 +1,6 @@ import { FC } from "react"; import { ChatProvider } from "./chat-context"; +import ControlledModalProvider from "./controlled-modal-provider"; import { DimensionsProvider } from "./dimensions-context"; import { OauthProvider } from "./oauth-provider"; import { PWAInstallProvider } from "./pwa-install-provider"; @@ -21,19 +22,16 @@ function Compose(props: Props) { }, children); } +const providers = [ + PWAInstallProvider, + TutorialProvider, + DimensionsProvider, + ChatProvider, + WalletViewProvider, + OauthProvider, + ControlledModalProvider, +]; + export const AppContextProvider: FC<{ children?: React.ReactNode }> = ({ children, -}) => ( - - {children} - -); +}) => {children}; diff --git a/packages/frontend/src/api/store/providers/controlled-modal-provider.tsx b/packages/frontend/src/api/store/providers/controlled-modal-provider.tsx new file mode 100644 index 000000000..022fb351f --- /dev/null +++ b/packages/frontend/src/api/store/providers/controlled-modal-provider.tsx @@ -0,0 +1,44 @@ +import { createContext, useContext, useMemo, useState } from "react"; + +interface ControlledModalContextProps { + activeModal: string | null; + setActiveModal: React.Dispatch>; + closeModal: () => void; +} + +export const ControlledModalContext = + createContext({ + activeModal: null, + setActiveModal: () => {}, + closeModal: () => {}, + }); + +export const useControlledModal = () => { + const context = useContext(ControlledModalContext); + if (context === undefined) { + throw new Error( + "controlled-modal-context:useControlledModal: not used within a Provider" + ); + } + return context; +}; + +const ControlledModalProvider: React.FC<{ children?: React.ReactNode }> = ({ + children, +}) => { + const [activeModal, setActiveModal] = useState(null); + const closeModal = () => setActiveModal(null); + + return ( + ({ activeModal, setActiveModal, closeModal }), + [activeModal] + )} + > + {children} + + ); +}; + +export default ControlledModalProvider; diff --git a/packages/frontend/src/mobile-components/navigation/NavHeader.tsx b/packages/frontend/src/mobile-components/navigation/NavHeader.tsx index 7a27327e5..8ce143eb3 100644 --- a/packages/frontend/src/mobile-components/navigation/NavHeader.tsx +++ b/packages/frontend/src/mobile-components/navigation/NavHeader.tsx @@ -1,8 +1,8 @@ import { FC } from "react"; -import { Link } from "react-router-dom"; +import { useControlledModal } from "src/api/hooks"; import { ReactComponent as SearchSVG } from "src/assets/svg/search.svg"; import { ReactComponent as UserSVG } from "src/assets/svg/user.svg"; -import { EMobileRoutePaths } from "src/routes"; +import { EMobileModalIds } from "src/routes"; interface IProps { avatar: string | undefined; @@ -10,13 +10,16 @@ interface IProps { } export const NavHeader: FC = ({ avatar, onSearchHandleClick }) => { + const { setActiveModal } = useControlledModal(); return (
- { + setActiveModal(EMobileModalIds.UserFilters); + }} > Open user menu @@ -31,7 +34,7 @@ export const NavHeader: FC = ({ avatar, onSearchHandleClick }) => {
)} - + )} @@ -108,6 +112,7 @@ const UserSettings: FC = ({ const [showProfileEditModal, setShowProfileEditModal] = useState(false); const history = useHistory(); + const { setActiveModal } = useControlledModal(); const [isProfileUpdated, setIsProfileUpdated] = useState(false); const prevIsSavingProfile = usePrevious(isSavingProfile); const { handleInstall, isInstallable } = usePWAInstallContext(); @@ -199,7 +204,10 @@ const UserSettings: FC = ({ /> */} {isAuthenticated ? ( - + ) : ( )} @@ -279,7 +287,7 @@ const UserSettings: FC = ({ title="Profile Updated" onActionClick={() => { setIsProfileUpdated(false); - history.push(EMobileRoutePaths.UserSettings); + setActiveModal(EMobileModalIds.UserSettings); }} >
diff --git a/packages/frontend/src/mobile-containers/AuthPromptContainer.tsx b/packages/frontend/src/mobile-containers/AuthPromptContainer.tsx index db8261b63..797c697c8 100644 --- a/packages/frontend/src/mobile-containers/AuthPromptContainer.tsx +++ b/packages/frontend/src/mobile-containers/AuthPromptContainer.tsx @@ -1,13 +1,12 @@ import { memo, useCallback, useMemo, useState } from "react"; -import { Modal } from "@alphaday/ui-kit"; -import { useHistory } from "react-router-dom"; -import { useAuth } from "src/api/hooks"; +import { useAuth, useControlledModal } from "src/api/hooks"; import { useAppDispatch, useAppSelector } from "src/api/store/hooks"; import * as uiStore from "src/api/store/slices/ui"; import * as userStore from "src/api/store/slices/user"; import { EAuthMethod, EAuthState } from "src/api/types"; import { AuthMethodSelection } from "src/components/auth/AuthModule"; -import { EMobileRoutePaths } from "src/routes"; +import { EMobileModalIds } from "src/routes"; +import { ModalContainer } from "./ModalContainer"; const hasTimeElapsed = (lastAuthPromptedTs: number) => { const now = new Date().getTime(); @@ -18,7 +17,7 @@ const hasTimeElapsed = (lastAuthPromptedTs: number) => { const AuthPromptContainer = memo(() => { const dispatch = useAppDispatch(); - const history = useHistory(); + const { setActiveModal } = useControlledModal(); const lastAuthPromptedTs = useAppSelector( (state) => state.ui.lastAuthPrompted ); @@ -46,14 +45,15 @@ const AuthPromptContainer = memo(() => { isSignIn ? EAuthState.SigningIn : EAuthState.SigningUp ) ); - history.push(EMobileRoutePaths.Auth); + setActiveModal(EMobileModalIds.Auth); } }, - [ssoLogin, dispatch, isSignIn, history] + [ssoLogin, dispatch, isSignIn, setActiveModal] ); return ( - { handleSSOCallback={handleSSOCallback} handleLogin={() => setIsSignIn(true)} /> - + ); }); diff --git a/packages/frontend/src/mobile-containers/InstallPWAContainer.tsx b/packages/frontend/src/mobile-containers/InstallPWAContainer.tsx index 3be8d5371..4bc75ceef 100644 --- a/packages/frontend/src/mobile-containers/InstallPWAContainer.tsx +++ b/packages/frontend/src/mobile-containers/InstallPWAContainer.tsx @@ -1,5 +1,5 @@ import { FC, useCallback, useState } from "react"; -import { Button, Modal } from "@alphaday/ui-kit"; +import { Button } from "@alphaday/ui-kit"; import { useIsMobile } from "src/api/hooks/useIsMobile"; import { setLastInstallPromptTimestamp } from "src/api/store"; import { useAppSelector, useAppDispatch } from "src/api/store/hooks"; @@ -8,6 +8,7 @@ import { isPWA } from "src/api/utils/helpers"; import CONFIG from "src/config"; import { ReactComponent as CloseSVG } from "../assets/icons/close3.svg"; import { ReactComponent as LogoShadowSVG } from "../assets/icons/logo-shadow.svg"; +import { ModalContainer } from "./ModalContainer"; /** * Check if the time has elapsed @@ -36,7 +37,8 @@ const InstallPWAContainer: FC = () => { }, [dispatch]); return ( - { Install
- + ); }; diff --git a/packages/frontend/src/mobile-containers/ModalContainer.tsx b/packages/frontend/src/mobile-containers/ModalContainer.tsx new file mode 100644 index 000000000..57c6a6541 --- /dev/null +++ b/packages/frontend/src/mobile-containers/ModalContainer.tsx @@ -0,0 +1,30 @@ +import { FC } from "react"; +import { Modal, IModal } from "@alphaday/ui-kit"; +import { useControlledModal } from "src/api/store/providers/controlled-modal-provider"; + +export const ModalContainer: FC = ({ + modalId, + showModal, + onClose, + children, + ...props +}) => { + const { activeModal, closeModal } = useControlledModal(); + return ( + { + onClose?.(); + closeModal(); + }} + {...props} + > + {children} + + ); +}; diff --git a/packages/frontend/src/mobile-pages/superfeed.tsx b/packages/frontend/src/mobile-pages/superfeed.tsx index 4cb86b23f..8da4fbedc 100644 --- a/packages/frontend/src/mobile-pages/superfeed.tsx +++ b/packages/frontend/src/mobile-pages/superfeed.tsx @@ -1,19 +1,19 @@ import { useState } from "react"; import md5 from "md5"; -import { useParams, useHistory } from "react-router-dom"; -import { useAccount } from "src/api/hooks"; +import { useParams } from "react-router-dom"; +import { useAccount, useControlledModal } from "src/api/hooks"; import MobileLayout from "src/layout/MobileLayout"; import AuthPromptContainer from "src/mobile-containers/AuthPromptContainer"; import SuperfeedContainer from "src/mobile-containers/SuperfeedContainer"; -import { EMobileRoutePaths } from "src/routes"; +import { EMobileModalIds } from "src/routes"; const SuperfeedPage: React.FC = () => { const { tags } = useParams<{ tags?: string }>(); - const history = useHistory(); + const { setActiveModal } = useControlledModal(); const { userProfile } = useAccount(); const [showSearchBar, setShowSearchBar] = useState(false); - const toggleFeedFilters = () => history.push(EMobileRoutePaths.UserFilters); + const toggleFeedFilters = () => setActiveModal(EMobileModalIds.UserFilters); return ( Date: Wed, 17 Apr 2024 14:09:18 +0100 Subject: [PATCH 2/6] lint fixes --- .../portfolio/WalletConnectionOptions.tsx | 10 ++++------ .../frontend/src/mobile-pages/portfolio-holdings.tsx | 7 +++---- packages/frontend/src/mobile-pages/portfolio.tsx | 6 +++--- 3 files changed, 10 insertions(+), 13 deletions(-) diff --git a/packages/frontend/src/mobile-components/portfolio/WalletConnectionOptions.tsx b/packages/frontend/src/mobile-components/portfolio/WalletConnectionOptions.tsx index 709ca07df..98b04edcd 100644 --- a/packages/frontend/src/mobile-components/portfolio/WalletConnectionOptions.tsx +++ b/packages/frontend/src/mobile-components/portfolio/WalletConnectionOptions.tsx @@ -3,7 +3,7 @@ import { OutlineButton, twMerge } from "@alphaday/ui-kit"; import { ReactComponent as CopySVG } from "src/assets/icons/copy.svg"; import { ReactComponent as HandSVG } from "src/assets/icons/hand.svg"; import { ReactComponent as WalletSVG } from "src/assets/icons/wallet.svg"; -import { EMobileRoutePaths } from "src/routes"; +import { EMobileModalIds } from "src/routes"; const WalletConnectionOptions: FC<{ isAuthenticated: boolean; @@ -16,23 +16,21 @@ const WalletConnectionOptions: FC<{ title="Add Wallet" subtext="Add your wallet manually to get started" icon={} - onClick={() => onClick(EMobileRoutePaths.PortfolioAddWallet)} + onClick={() => onClick(EMobileModalIds.PortfolioAddWallet)} isAuthenticated={isAuthenticated} /> } - onClick={() => - onClick(EMobileRoutePaths.PortfolioConnectWallet) - } + onClick={() => onClick(EMobileModalIds.PortfolioConnectWallet)} isAuthenticated={isAuthenticated} /> } - onClick={() => onClick(EMobileRoutePaths.PortfolioAddHolding)} + onClick={() => onClick(EMobileModalIds.PortfolioAddHolding)} isAuthenticated={isAuthenticated} /> diff --git a/packages/frontend/src/mobile-pages/portfolio-holdings.tsx b/packages/frontend/src/mobile-pages/portfolio-holdings.tsx index 71aa59071..cf6f4f585 100644 --- a/packages/frontend/src/mobile-pages/portfolio-holdings.tsx +++ b/packages/frontend/src/mobile-pages/portfolio-holdings.tsx @@ -1,7 +1,6 @@ import { FC, useState } from "react"; import { Dialog, DropdownSelect } from "@alphaday/ui-kit"; -import { useHistory } from "react-router"; -import { useKeyPress } from "src/api/hooks"; +import { useControlledModal, useKeyPress } from "src/api/hooks"; import { toggleShowBalance as toggleShowBalanceInStore } from "src/api/store"; import { useAppDispatch } from "src/api/store/hooks"; @@ -178,7 +177,7 @@ const AssetsList: FC<{ assets: TPortfolio[] }> = ({ assets }) => { const PortfolioHoldings: React.FC = () => { const dispatch = useAppDispatch(); const [showDialog, setShowDialog] = useState(false); - const history = useHistory(); + const { setActiveModal } = useControlledModal(); const toggleBalance = () => { dispatch(toggleShowBalanceInStore()); @@ -239,7 +238,7 @@ const PortfolioHoldings: React.FC = () => { { - history.push(path); + setActiveModal(path); }} /> diff --git a/packages/frontend/src/mobile-pages/portfolio.tsx b/packages/frontend/src/mobile-pages/portfolio.tsx index 558dacbde..7c6da775c 100644 --- a/packages/frontend/src/mobile-pages/portfolio.tsx +++ b/packages/frontend/src/mobile-pages/portfolio.tsx @@ -1,6 +1,6 @@ import { FC } from "react"; import { Pager } from "@alphaday/ui-kit"; -import { useAuth, useHistory } from "src/api/hooks"; +import { useAuth, useControlledModal } from "src/api/hooks"; import { ReactComponent as CloseSVG } from "src/assets/icons/close.svg"; import { ReactComponent as InfoSVG } from "src/assets/icons/Info2.svg"; import WalletConnectionOptions from "src/mobile-components/portfolio/WalletConnectionOptions"; @@ -30,7 +30,7 @@ const TopSection: FC<{ isAuthenticated: boolean }> = ({ isAuthenticated }) => { }; const PortfolioPage = () => { - const history = useHistory(); + const { setActiveModal } = useControlledModal(); const { isAuthenticated } = useAuth(); // TODO if user has holdings route to holdings @@ -41,7 +41,7 @@ const PortfolioPage = () => { { - history.push(path); + setActiveModal(path); }} className="mx-4" /> From ae931041a361323a08e4d83c517e1da2ef8aaad9 Mon Sep 17 00:00:00 2001 From: elcharitas Date: Wed, 17 Apr 2024 14:46:45 +0100 Subject: [PATCH 3/6] restyle --- packages/frontend/src/MobileApp.tsx | 19 +++++++++---------- .../frontend/src/layout/PagedMobileLayout.tsx | 6 +++--- .../portfolio/AddHolding.tsx | 6 +++--- .../portfolio/SelectHoldingCoin.tsx | 6 +++--- .../src/mobile-containers/ModalContainer.tsx | 7 +------ .../frontend/src/mobile-pages/add-wallet.tsx | 16 +++++++++------- .../src/mobile-pages/connect-wallet.tsx | 6 +++--- .../ui-kit/src/components/modal/Modal.tsx | 6 +++++- 8 files changed, 36 insertions(+), 36 deletions(-) diff --git a/packages/frontend/src/MobileApp.tsx b/packages/frontend/src/MobileApp.tsx index a89856358..af45f9b43 100644 --- a/packages/frontend/src/MobileApp.tsx +++ b/packages/frontend/src/MobileApp.tsx @@ -132,20 +132,19 @@ const RouterChild = () => { ); }; -/** - * TODO: Move user-settings (and any other view that should be accessible from multiple tabs) - * to a modal. - * For the MVP it's fine to nest everything within /superfeed - */ const MobileApp: React.FC = () => { return ( - {modals.map((modal) => ( - - - - ))} + {modals.map((modal) => ( + + + + ))} void; handleBack?: () => void; }> = ({ children, title, onScroll, handleBack, handleClose }) => { - const { backNavigation } = useHistory(); + const { closeModal } = useControlledModal(); return ( { handleBack?.(); - backNavigation(); + closeModal(); }} handleClose={handleClose} /> diff --git a/packages/frontend/src/mobile-components/portfolio/AddHolding.tsx b/packages/frontend/src/mobile-components/portfolio/AddHolding.tsx index 2bce4af93..fccab1a13 100644 --- a/packages/frontend/src/mobile-components/portfolio/AddHolding.tsx +++ b/packages/frontend/src/mobile-components/portfolio/AddHolding.tsx @@ -1,7 +1,7 @@ import { FC } from "react"; import { FormInput, Pager, ScrollBar } from "@alphaday/ui-kit"; import moment from "moment"; -import { useHistory } from "src/api/hooks"; +import { useControlledModal } from "src/api/hooks"; import { TCoin, THolding } from "src/api/types"; interface IAddHolding { @@ -17,7 +17,7 @@ const AddHolding: FC = ({ holding, setHolding, }) => { - const history = useHistory(); + const { closeModal } = useControlledModal(); const defaultHolding: THolding = { coin: selectedCoin, @@ -54,7 +54,7 @@ const AddHolding: FC = ({ {selectedCoin.name} } - handleClose={history.backNavigation} + handleClose={closeModal} handleBack={() => setSelectedCoin(undefined)} />
diff --git a/packages/frontend/src/mobile-components/portfolio/SelectHoldingCoin.tsx b/packages/frontend/src/mobile-components/portfolio/SelectHoldingCoin.tsx index 4d5617a12..2412b6626 100644 --- a/packages/frontend/src/mobile-components/portfolio/SelectHoldingCoin.tsx +++ b/packages/frontend/src/mobile-components/portfolio/SelectHoldingCoin.tsx @@ -1,6 +1,6 @@ import React, { FC, FormEvent } from "react"; import { Input, Pager, ScrollBar, Spinner } from "@alphaday/ui-kit"; -import { useHistory } from "src/api/hooks"; +import { useControlledModal } from "src/api/hooks"; import { TCoin } from "src/api/types"; import { ReactComponent as ChevronSVG } from "src/assets/icons/chevron-right.svg"; import { ReactComponent as SearchSVG } from "src/assets/svg/search.svg"; @@ -22,11 +22,11 @@ const SelectHoldingCoin: FC = ({ coins, setSelectedCoin, }) => { - const history = useHistory(); + const { closeModal } = useControlledModal(); return ( - +

Search or select the desired crypto coin that you have in your portfolio. diff --git a/packages/frontend/src/mobile-containers/ModalContainer.tsx b/packages/frontend/src/mobile-containers/ModalContainer.tsx index 57c6a6541..ee9b1f534 100644 --- a/packages/frontend/src/mobile-containers/ModalContainer.tsx +++ b/packages/frontend/src/mobile-containers/ModalContainer.tsx @@ -12,12 +12,7 @@ export const ModalContainer: FC = ({ const { activeModal, closeModal } = useControlledModal(); return ( { onClose?.(); closeModal(); diff --git a/packages/frontend/src/mobile-pages/add-wallet.tsx b/packages/frontend/src/mobile-pages/add-wallet.tsx index 9383f0fe5..a97b00256 100644 --- a/packages/frontend/src/mobile-pages/add-wallet.tsx +++ b/packages/frontend/src/mobile-pages/add-wallet.tsx @@ -1,6 +1,10 @@ import { useState } from "react"; import { FormInput, MiniDialog, Pager } from "@alphaday/ui-kit"; -import { usePortfolioAccount, useHistory } from "src/api/hooks"; +import { + usePortfolioAccount, + useHistory, + useControlledModal, +} from "src/api/hooks"; import { validateEthAddr } from "src/api/utils/accountUtils"; import { ReactComponent as GreenCheckSVG } from "src/assets/icons/green-check.svg"; import { EMobileRoutePaths } from "src/routes"; @@ -12,8 +16,9 @@ type TWalletInfo = { const AddWalletPage = () => { const history = useHistory(); + const { closeModal } = useControlledModal(); const [isWalletAdded, setIsWalletAdded] = useState(false); - const [walletInfo, setwalletInfo] = useState({ + const [walletInfo, setWalletInfo] = useState({ name: "", address: "", }); @@ -21,7 +26,7 @@ const AddWalletPage = () => { // const handleAddNewWallet = (w: TWalletInfo) => {}; const handleChange = (e: React.ChangeEvent) => { - setwalletInfo((prev) => ({ + setWalletInfo((prev) => ({ ...prev, [e.target.name]: e.target.value, })); @@ -34,10 +39,7 @@ const AddWalletPage = () => { }; return ( <> - +

{ - const history = useHistory(); + const { closeModal } = useControlledModal(); return ( <> - +
Select your preferred wallet provider to conect to your portfolio diff --git a/packages/ui-kit/src/components/modal/Modal.tsx b/packages/ui-kit/src/components/modal/Modal.tsx index 2ded1efe6..a35a64f70 100644 --- a/packages/ui-kit/src/components/modal/Modal.tsx +++ b/packages/ui-kit/src/components/modal/Modal.tsx @@ -58,7 +58,11 @@ export const Modal: FC = ({ }; return ( - + Date: Wed, 17 Apr 2024 14:49:57 +0100 Subject: [PATCH 4/6] change user settings id --- .../frontend/src/mobile-components/navigation/NavHeader.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/frontend/src/mobile-components/navigation/NavHeader.tsx b/packages/frontend/src/mobile-components/navigation/NavHeader.tsx index 8ce143eb3..d44574be2 100644 --- a/packages/frontend/src/mobile-components/navigation/NavHeader.tsx +++ b/packages/frontend/src/mobile-components/navigation/NavHeader.tsx @@ -18,7 +18,7 @@ export const NavHeader: FC = ({ avatar, onSearchHandleClick }) => { tabIndex={0} className="relative flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800" onClick={() => { - setActiveModal(EMobileModalIds.UserFilters); + setActiveModal(EMobileModalIds.UserSettings); }} > From 62dd88cfefe0400679179e462ae0716935105b18 Mon Sep 17 00:00:00 2001 From: elcharitas Date: Wed, 17 Apr 2024 15:01:28 +0100 Subject: [PATCH 5/6] fix more links --- .../profile/UserSettings.tsx | 25 +++++++++++-------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/packages/frontend/src/mobile-components/profile/UserSettings.tsx b/packages/frontend/src/mobile-components/profile/UserSettings.tsx index 5e2915622..1d586acd2 100644 --- a/packages/frontend/src/mobile-components/profile/UserSettings.tsx +++ b/packages/frontend/src/mobile-components/profile/UserSettings.tsx @@ -1,7 +1,7 @@ import { FC, useState } from "react"; import { MiniDialog, Spinner, twMerge } from "@alphaday/ui-kit"; import md5 from "md5"; -import { Link, useHistory } from "react-router-dom"; +import { useHistory } from "react-router-dom"; import { useControlledModal, usePrevious } from "src/api/hooks"; import { usePWAInstallContext } from "src/api/store/providers/pwa-install-provider"; import { TUserProfile } from "src/api/types"; @@ -21,26 +21,30 @@ const { IS_DEV } = CONFIG; const INSTALL_OPTION_ID = "install"; -const NonAuthenticatedSection = () => { +const NonAuthenticatedSection: FC<{ + setActiveModal: (p: string) => void; +}> = ({ setActiveModal }) => { return (

Sign up to unlock the complete experience{" "}

- setActiveModal(EMobileModalIds.Auth)} > Sign up - +

Already have an account? - setActiveModal(EMobileModalIds.Auth)} > Log in here - +

); @@ -109,8 +113,7 @@ const UserSettings: FC = ({ isSavingProfile, onLogout, }) => { - const [showProfileEditModal, setShowProfileEditModal] = - useState(false); + const [showProfileEditModal, setShowProfileEditModal] = useState(false); const history = useHistory(); const { setActiveModal } = useControlledModal(); const [isProfileUpdated, setIsProfileUpdated] = useState(false); @@ -209,7 +212,7 @@ const UserSettings: FC = ({ setActiveModal={setActiveModal} /> ) : ( - + )}
{menu.map((item) => { From ba704318ac64276ce40cfbf938f6b97f9f171163 Mon Sep 17 00:00:00 2001 From: elcharitas Date: Wed, 17 Apr 2024 15:11:15 +0100 Subject: [PATCH 6/6] add support for history --- .../providers/controlled-modal-provider.tsx | 50 ++++++++++++++----- 1 file changed, 38 insertions(+), 12 deletions(-) diff --git a/packages/frontend/src/api/store/providers/controlled-modal-provider.tsx b/packages/frontend/src/api/store/providers/controlled-modal-provider.tsx index 022fb351f..0a54efed7 100644 --- a/packages/frontend/src/api/store/providers/controlled-modal-provider.tsx +++ b/packages/frontend/src/api/store/providers/controlled-modal-provider.tsx @@ -1,17 +1,22 @@ -import { createContext, useContext, useMemo, useState } from "react"; +import { + createContext, + useCallback, + useContext, + useMemo, + useState, +} from "react"; -interface ControlledModalContextProps { +interface Prop { activeModal: string | null; - setActiveModal: React.Dispatch>; + setActiveModal: (modalId: string) => void; closeModal: () => void; } -export const ControlledModalContext = - createContext({ - activeModal: null, - setActiveModal: () => {}, - closeModal: () => {}, - }); +export const ControlledModalContext = createContext({ + activeModal: null, + setActiveModal: () => {}, + closeModal: () => {}, +}); export const useControlledModal = () => { const context = useContext(ControlledModalContext); @@ -23,17 +28,38 @@ export const useControlledModal = () => { return context; }; +const MODAL_HISTORY = new Set(); + const ControlledModalProvider: React.FC<{ children?: React.ReactNode }> = ({ children, }) => { const [activeModal, setActiveModal] = useState(null); - const closeModal = () => setActiveModal(null); + + const closeModal = useCallback(() => { + if (activeModal) { + MODAL_HISTORY.delete(activeModal); + // set active modal to last modal in history + const lastModal = Array.from(MODAL_HISTORY).pop(); + setActiveModal(lastModal || null); + } + }, [activeModal]); + + const setActiveModalWithHistory = (modalId: string) => { + if (!MODAL_HISTORY.has(modalId)) { + setActiveModal(modalId); + MODAL_HISTORY.add(modalId); + } + }; return ( ({ activeModal, setActiveModal, closeModal }), - [activeModal] + () => ({ + activeModal, + setActiveModal: setActiveModalWithHistory, + closeModal, + }), + [activeModal, closeModal] )} > {children}