Redirect to Tasks & Instructions page only when user clicks Contribute

- Fix redirect issue from tasks page to instructions and vice versa
- Preserve respective page route on reload

frontend/src/components/projectDetail/footer.js

@@ -1,5 +1,5 @@
 import { useRef, Fragment } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 import { FormattedMessage } from 'react-intl';
 
@@ -58,6 +58,7 @@ const menuItems = [
 export const ProjectDetailFooter = ({ className, projectId }) => {
   const userIsloggedIn = useSelector((state) => state.auth.token);
   const menuItemsContainerRef = useRef(null);
+  const { pathname } = useLocation();
 
   return (
     <div
@@ -92,7 +93,12 @@ export const ProjectDetailFooter = ({ className, projectId }) => {
       <div className="flex items-center ml-auto gap-1">
         <ShareButton projectId={projectId} />
         {userIsloggedIn && <AddToFavorites projectId={projectId} />}
-        <Link to={`./tasks`} className="">
+        <Link
+          to={`./tasks`}
+          // add previous path to history location to track
+          // if the user is from project detail page
+          state={{ from: pathname }}
+        >
           <Button className="white bg-red h3 w5">
             <FormattedMessage {...messages.contribute} />
           </Button>

frontend/src/components/taskSelection/index.js

@@ -135,9 +135,22 @@ export function TaskSelection({ project }: Object) {
     [navigate, projectId, textSearch],
   );
 
+  // remove history location state since react-router-dom persists state on reload
+  useEffect(() => {
+    function onBeforeUnload() {
+      window.history.replaceState({}, '');
+    }
+    window.addEventListener('beforeunload', onBeforeUnload);
+    return () => {
+      window.removeEventListener('beforeunload', onBeforeUnload);
+    };
+  }, []);
+
   // show the tasks tab when the page loads if the user has already contributed
   // to the project. If no, show the instructions tab.
   useEffect(() => {
+    // do not redirect if user is not from project detail page
+    if (location?.state?.from !== `/projects/${projectId}`) return;
     if (contributions && isFirstRender.current) {
       const currentUserContributions = contributions.filter((u) => u.username === user.username);
       if (textSearch || (user.isExpert && currentUserContributions.length > 0)) {
@@ -147,7 +160,7 @@ export function TaskSelection({ project }: Object) {
       }
       isFirstRender.current = false;
     }
-  }, [contributions, user.username, user, textSearch, setActiveSection]);
+  }, [contributions, user.username, user, textSearch, setActiveSection, location, projectId]);
 
   useEffect(() => {
     // run it only when the component is initialized