added conditional disabling upload and mysubmission links based on lo…

…gin status

Signed-off-by: Duncan Ragsdale <[email protected]>

src/app/(analyses)/analyses/analysis/page.tsx

@@ -21,9 +21,14 @@ import AnalysisService from '@/services/analysis_service';
 import SubmissionUploader from '@/app/modules/analyses/upload/uploader';
 import replaceImagePaths from '@/config/mdurl';
 import MS from '@/services/md_service';
+import CookieService from '@/services/cookie_service';
 
 // *********** REDUX IMPORTS ***********
 
+import {useAppSelector} from '@/store/store';
+import {useDispatch} from 'react-redux';
+import {logIn} from '@/reducers/user';
+
 // *********** END OF IMPORTS ***********
 
 
@@ -35,6 +40,11 @@ type AnalysisDetailsCard = {
 const AnalysisPage: React.FC = () => {
   const searchParams = useSearchParams();
   const navigate = useRouter();
+  const dispatch = useDispatch();
+
+  const loggedIn = useAppSelector((state) => (
+    state.user.loggedIn)
+  );
 
   if (searchParams.get('analysisId') === null) {
     console.error('Analysis ID not found');
@@ -91,6 +101,14 @@ const AnalysisPage: React.FC = () => {
   const [coverImageDir, setCoverImageDir] = useState('');
   const [analysesBlurb, setAnalysesBlurb] = useState('');
 
+  useEffect(() => {
+    if (!loggedIn) {
+      const userCookie = CookieService.getUserCookie();
+      if (userCookie && userCookie.token) {
+        dispatch(logIn(userCookie.username));
+      }
+    }
+  }, [dispatch, loggedIn]);
 
   useEffect(() => {
     if (window.location.hostname.includes('localhost') && (
@@ -258,11 +276,19 @@ const AnalysisPage: React.FC = () => {
                             className='
                           panelTab
                           '/>
-                          <Tab
-                            label="Submit Algorithm"
-                            className='
+                          {
+                            loggedIn ? <Tab
+                              label="Submit Algorithm"
+                              className='
                           panelTab
-                          '/>
+                          '/> : <Tab
+                                label="Submit Algorithm"
+                                disabled
+                                className='
+                        panelTab
+                        '/>
+                          }
+
                         </Tabs>
                       </Grid>
 

src/app/globals.css

@@ -443,6 +443,10 @@ body {
   flex: 1 0 content;
 }
 
+/* 
+  Pallete colors 
+*/
+
 .pal-yellow {
   color: #F0E442;
 }

src/app/modules/header/header.tsx

@@ -32,10 +32,12 @@ import {logIn} from '@/reducers/user';
   type NavMenuPage = {
     route: string;
     text: string;
+    requireLogin: boolean;
   }
 
   type NavMenuProps = {
     pages: NavMenuPage[];
+    isLoggedIn: boolean;
   }
 
   type UserInfoMenuItem = {
@@ -94,14 +96,17 @@ export default function Header() {
     {
       text: 'Analytical Tasks',
       route: '/analyses',
+      requireLogin: false,
     },
     {
       text: 'My Submissions',
       route: '/mysubmissions',
+      requireLogin: true,
     },
     {
       text: 'Resources',
       route: '/resources',
+      requireLogin: false,
     },
   ];
     // *********** END OF DEFINITIONS ***********
@@ -112,7 +117,7 @@ export default function Header() {
         <Container maxWidth="xl">
           <Toolbar disableGutters>
             <Logo redirect="/" />
-            <NavMenu pages={navPages} />
+            <NavMenu pages={navPages} isLoggedIn={loggedIn}/>
             {
                 !loggedIn ?
                   <UserLoggedInMenu /> :
@@ -149,18 +154,35 @@ function Logo({redirect}: {redirect: string}) {
  * The NavMenu component is the navigation menu of the app.
  * It displays the navigation menu items.
  * @param {NavMenuProps} pages The pages to display in the navigation menu.
+ * @param {boolean} isLoggedIn Whether the user is logged in.
  * @return {JSX.Element} The rendered NavMenu component.
  */
-const NavMenu: React.FC<NavMenuProps> = ({pages}) => {
+const NavMenu: React.FC<NavMenuProps> = ({pages, isLoggedIn}) => {
   return (
     <Box sx={{flexGrow: 1, display: {xs: 'none', md: 'flex'}}}>
-      {pages.map((page, index) => (
-        <Link className={`${styles.menuLink} ${styles.headerBackground}`}
-          key={`${index}-${page.route}`}
-          href={page.route}>
-          {page.text}
-        </Link>
-      ))}
+      {pages.map((page, index) => {
+        if (page.requireLogin && !isLoggedIn) {
+          console.log('disabled link');
+          return (
+            <Link className={`
+              ${styles.menuDisabled} 
+              ${styles.headerBackground}
+              `}
+            key={`${index}-${page.route}`}
+            href={'/login'}>
+              {page.text}
+            </Link>
+          );
+        } else {
+          return (
+            <Link className={`${styles.menuLink} ${styles.headerBackground}`}
+              key={`${index}-${page.route}`}
+              href={page.route}>
+              {page.text}
+            </Link>
+          );
+        }
+      })}
     </Box>
   );
 };

src/app/modules/modulecss/header.module.css

@@ -23,6 +23,21 @@
     &:hover {
         background-color: #f8f8f8;
     }
+  }
+
+  .menuDisabled {
+    display: block;
+    padding: 0.5rem 1rem;
+    color: grey;
+    text-decoration: none;
+    font-family: sans-serif;
+    font-weight: 400;
+    background-color: #31A69B;
+    transition: background-color 0.2s ease-in-out;
+
+    &:hover {
+      background-color: #f8f8f8;
+  }
 
   .headerBackground {
     background-color: #31A69B;