Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add condition to display back button #356

Draft
wants to merge 2 commits into
base: develop
Choose a base branch
from
Draft

Add condition to display back button #356

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c4787da
add condition for display of back button
prachigarg19 Dec 22, 2022
5dcee8a
fix: remove for no callback url and within donate
prachigarg19 May 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 35 additions & 1 deletion src/Donations/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,7 @@ function DonationInfo() {
} = React.useContext(QueryParamContext);

const [isMobile, setIsMobile] = React.useState(false);
const [showBackButton, setShowBackButton] = React.useState(null);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe use boolean state as for isMobile above?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is because I if the value if set to false at any point of time, it means that the user came from an external link and so I don't want to display the back button. Setting false initially would prevent me from updating the value and setting true would display the back button. Hence, I've set null as the initial value.

React.useEffect(() => {
if (typeof window !== "undefined") {
if (window.innerWidth > 767) {
Expand Down Expand Up @@ -140,6 +141,39 @@ function DonationInfo() {
);
};
const router = useRouter();

function storePathValues() {
const storage = globalThis?.sessionStorage;
if (!storage) return;
// Set the previous path as the value of the current path.
const prevPath = storage.getItem("currentPath");
storage.setItem("prevPath", prevPath);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This raises a warning about a type error for string | null.

// Set the current path value by looking at the window object.
storage.setItem("currentPath", window.origin);
}

useEffect(storePathValues, [router]);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why not put the code of the function directly into the useEffect(() => {...}, [router]); instead of defining a new function storePathValues?


useEffect(() => {
const storage = globalThis?.sessionStorage;
if (
!storage ||
router.query.step !== "donate" ||
storage.getItem("showBackButton") === "false"
)
return;
storage.setItem(
"showBackButton",
`${
storage.getItem("prevPath") === window.origin &&
router.query["callback_url"]
}`
);
const isShow = storage.getItem("showBackButton") === "true";

setShowBackButton(isShow);
Comment on lines +172 to +174
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This could be just one line of code.

}, [router.query.step]);

const goBack = () => {
const callbackUrl = router.query.callback_url;
router.push(`${callbackUrl ? callbackUrl : "/"}`);
Expand All @@ -165,7 +199,7 @@ function DonationInfo() {
alt="Background image with trees"
/> */}

{isMobile && (
{isMobile && (router.query["callback_url"] || showBackButton) && (
<button
id={"backButtonSingleP"}
className={"callbackButton"}
Expand Down