From 62d4f142842d65406e6602177dceb55dcae33015 Mon Sep 17 00:00:00 2001
From: Rajnish2105 <166371359+Rajnish2105@users.noreply.github.com>
Date: Thu, 26 Dec 2024 22:53:02 +0530
Subject: [PATCH] Refactored MobileNav with all Todos

---
 .../IDE/components/Header/MobileNav.jsx       | 73 +++++++++++--------
 client/modules/IDE/components/Header/Nav.jsx  | 12 ++-
 client/modules/IDE/hooks/useWhatPage.js       | 13 ++--
 client/modules/Legal/pages/Legal.jsx          |  5 +-
 client/modules/User/pages/AccountView.jsx     |  5 +-
 client/modules/User/pages/CollectionView.jsx  | 10 ++-
 client/modules/User/pages/DashboardView.jsx   |  5 +-
 .../User/pages/EmailVerificationView.jsx      |  6 +-
 client/modules/User/pages/LoginView.jsx       |  6 +-
 client/modules/User/pages/NewPasswordView.jsx |  6 +-
 .../modules/User/pages/ResetPasswordView.jsx  |  6 +-
 client/modules/User/pages/SignupView.jsx      |  5 +-
 12 files changed, 103 insertions(+), 49 deletions(-)

diff --git a/client/modules/IDE/components/Header/MobileNav.jsx b/client/modules/IDE/components/Header/MobileNav.jsx
index 37fa16bed3..3945b49e82 100644
--- a/client/modules/IDE/components/Header/MobileNav.jsx
+++ b/client/modules/IDE/components/Header/MobileNav.jsx
@@ -1,10 +1,12 @@
-import React, { useContext, useMemo, useState } from 'react';
+import React, { useContext, useState } from 'react';
 import styled from 'styled-components';
 import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { sortBy } from 'lodash';
 import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
 import { ParentMenuContext } from '../../../../components/Nav/contexts';
 import NavBar from '../../../../components/Nav/NavBar';
 import { useMenuProps } from '../../../../components/Nav/NavDropdownMenu';
@@ -35,6 +37,7 @@ import { setLanguage } from '../../actions/preferences';
 import Overlay from '../../../App/components/Overlay';
 import ProjectName from './ProjectName';
 import CollectionCreate from '../../../User/components/CollectionCreate';
+import { selectRootFile } from '../../selectors/files';
 
 const Nav = styled(NavBar)`
   background: ${prop('MobilePanel.default.background')};
@@ -200,34 +203,36 @@ const LanguageSelect = styled.div`
   }
 `;
 
-const MobileNav = () => {
+const MobileNav = ({ title }) => {
   const project = useSelector((state) => state.project);
   const user = useSelector((state) => state.user);
 
-  const { t } = useTranslation();
+  // console.log('The title: ', title);
+
+  // const { t } = useTranslation();
 
   const editorLink = useSelector(selectSketchPath);
   const pageName = useWhatPage();
 
   // TODO: remove the switch and use a props like mobileTitle <Nav layout=“dashboard” mobileTitle={t(‘Login’)} />
-  function resolveTitle() {
-    switch (pageName) {
-      case 'login':
-        return t('LoginView.Login');
-      case 'signup':
-        return t('LoginView.SignUp');
-      case 'account':
-        return t('AccountView.Settings');
-      case 'examples':
-        return t('Nav.File.Examples');
-      case 'myStuff':
-        return 'My Stuff';
-      default:
-        return project.name;
-    }
-  }
-
-  const title = useMemo(resolveTitle, [pageName, project.name]);
+  // function resolveTitle() {
+  //   switch (pageName) {
+  //     case 'login':
+  //       return t('LoginView.Login');
+  //     case 'signup':
+  //       return t('LoginView.SignUp');
+  //     case 'account':
+  //       return t('AccountView.Settings');
+  //     case 'examples':
+  //       return t('Nav.File.Examples');
+  //     case 'myStuff':
+  //       return 'My Stuff';
+  //     default:
+  //       return project.name;
+  //   }
+  // }
+
+  // const title = useMemo(resolveTitle, [pageName, project.name]);
 
   const Logo = AsteriskIcon;
   return (
@@ -244,7 +249,7 @@ const MobileNav = () => {
         )}
       </Title>
       {/* check if the user is in login page */}
-      {pageName === 'login' || pageName === 'signup' ? (
+      {pageName === 'LoginView.Login' || pageName === 'LoginView.SignUp' ? (
         // showing the CrossIcon
         <Options>
           <div>
@@ -256,7 +261,7 @@ const MobileNav = () => {
       ) : (
         // Menus for other pages
         <Options>
-          {pageName === 'myStuff' && <StuffMenu />}
+          {pageName === 'My Stuff' && <StuffMenu />}
           {user.authenticated ? (
             <AccountMenu />
           ) : (
@@ -266,7 +271,7 @@ const MobileNav = () => {
               </Link>
             </div>
           )}
-          {pageName === 'home' ? (
+          {pageName === 'home' || pageName === project.name ? (
             <MoreMenu />
           ) : (
             <div>
@@ -281,6 +286,14 @@ const MobileNav = () => {
   );
 };
 
+MobileNav.propTypes = {
+  title: PropTypes.string
+};
+
+MobileNav.defaultProps = {
+  title: 'p5.js Web Editor'
+};
+
 const StuffMenu = () => {
   const { isOpen, handlers } = useMenuProps('stuff');
   const { newSketch } = useSketchActions();
@@ -341,9 +354,8 @@ const AccountMenu = () => {
 
 const MoreMenu = () => {
   // TODO: use selectRootFile selector
-  const rootFile = useSelector(
-    (state) => state.files.filter((file) => file.name === 'root')[0]
-  );
+  // DONE
+  const rootFile = useSelector(selectRootFile);
   const language = useSelector((state) => state.preferences.language);
 
   const dispatch = useDispatch();
@@ -367,8 +379,8 @@ const MoreMenu = () => {
       {isLanguageModalVisible && (
         <Overlay
           // TODO: add translations
-          title="Select Language"
-          ariaLabel="Select Language"
+          title={t('selectLanguage', { defaultValue: 'Select Language' })}
+          ariaLabel={t('selectLanguage', { defaultValue: 'Select Language' })}
           closeOverlay={() => setIsLanguageModalVisible(false)}
         >
           <LanguageSelect>
@@ -420,7 +432,8 @@ const MoreMenu = () => {
             {t('Nav.Sketch.AddFolder')}
           </NavMenuItem>
           {/* TODO: Add Translations */}
-          <b>Settings</b>
+          {/* DONE */}
+          <b>{t('settings', { defaultValue: 'Settings' })}</b>
           <NavMenuItem
             onClick={() => {
               dispatch(openPreferences());
diff --git a/client/modules/IDE/components/Header/Nav.jsx b/client/modules/IDE/components/Header/Nav.jsx
index 3492c4388a..1cf0df5bfc 100644
--- a/client/modules/IDE/components/Header/Nav.jsx
+++ b/client/modules/IDE/components/Header/Nav.jsx
@@ -31,11 +31,13 @@ import { CmControllerContext } from '../../pages/IDEView';
 import MobileNav from './MobileNav';
 import useIsMobile from '../../hooks/useIsMobile';
 
-const Nav = ({ layout }) => {
+const Nav = ({ layout, mobileTitle }) => {
   const isMobile = useIsMobile();
 
+  // console.log('The updated mobile title is: ', mobileTitle);
+
   return isMobile ? (
-    <MobileNav />
+    <MobileNav title={mobileTitle} />
   ) : (
     <NavBar>
       <LeftLayout layout={layout} />
@@ -45,11 +47,13 @@ const Nav = ({ layout }) => {
 };
 
 Nav.propTypes = {
-  layout: PropTypes.oneOf(['dashboard', 'project'])
+  layout: PropTypes.oneOf(['dashboard', 'project']),
+  mobileTitle: PropTypes.string
 };
 
 Nav.defaultProps = {
-  layout: 'project'
+  layout: 'project',
+  mobileTitle: 'p5.js Web Editor'
 };
 
 const LeftLayout = (props) => {
diff --git a/client/modules/IDE/hooks/useWhatPage.js b/client/modules/IDE/hooks/useWhatPage.js
index 8126c596c0..ce551c055a 100644
--- a/client/modules/IDE/hooks/useWhatPage.js
+++ b/client/modules/IDE/hooks/useWhatPage.js
@@ -8,6 +8,7 @@ import { useLocation } from 'react-router-dom';
  */
 const useWhatPage = () => {
   const username = useSelector((state) => state.user.username);
+  const project = useSelector((state) => state.project);
   const { pathname } = useLocation();
 
   const pageName = useMemo(() => {
@@ -15,13 +16,13 @@ const useWhatPage = () => {
       `(/${username}/(sketches/?$|collections|assets)/?)`
     );
 
-    if (myStuffPattern.test(pathname)) return 'myStuff';
-    else if (pathname === '/login') return 'login';
-    else if (pathname === '/signup') return 'signup';
-    else if (pathname === '/account') return 'account';
+    if (myStuffPattern.test(pathname)) return 'My Stuff';
+    else if (pathname === '/login') return 'LoginView.Login';
+    else if (pathname === '/signup') return 'LoginView.SignUp';
+    else if (pathname === '/account') return 'AccountView.Settings';
     else if (pathname === '/p5/collections' || pathname === '/p5/sketches')
-      return 'examples';
-    return 'home';
+      return 'Nav.File.Examples';
+    return project.name || 'home';
   }, [pathname, username]);
 
   return pageName;
diff --git a/client/modules/Legal/pages/Legal.jsx b/client/modules/Legal/pages/Legal.jsx
index 0e629f789a..946bb63bb4 100644
--- a/client/modules/Legal/pages/Legal.jsx
+++ b/client/modules/Legal/pages/Legal.jsx
@@ -10,6 +10,7 @@ import { remSize } from '../../../theme';
 import Loader from '../../App/components/loader';
 import Nav from '../../IDE/components/Header/Nav';
 import PolicyContainer from '../components/PolicyContainer';
+import { useWhatPage } from '../../IDE/hooks';
 
 const StyledTabList = styled.nav`
   display: flex;
@@ -24,6 +25,8 @@ const StyledTabList = styled.nav`
 
 function Legal({ policyFile, title }) {
   const { t } = useTranslation();
+  const pageName = useWhatPage();
+  const pagetitle = String(t(pageName));
   const [isLoading, setIsLoading] = useState(true);
   const [policy, setPolicy] = useState('');
 
@@ -40,7 +43,7 @@ function Legal({ policyFile, title }) {
       <Helmet>
         <title>p5.js Web Editor | {title}</title>
       </Helmet>
-      <Nav layout="dashboard" />
+      <Nav layout="dashboard" mobileTitle={pagetitle} />
       <StyledTabList className="dashboard-header__switcher">
         <ul className="dashboard-header__tabs">
           <RouterTab to="/privacy-policy">{t('Legal.PrivacyPolicy')}</RouterTab>
diff --git a/client/modules/User/pages/AccountView.jsx b/client/modules/User/pages/AccountView.jsx
index e9b3da7c9a..f40ca4b1ba 100644
--- a/client/modules/User/pages/AccountView.jsx
+++ b/client/modules/User/pages/AccountView.jsx
@@ -12,6 +12,7 @@ import Nav from '../../IDE/components/Header/Nav';
 import ErrorModal from '../../IDE/components/ErrorModal';
 import Overlay from '../../App/components/Overlay';
 import Toast from '../../IDE/components/Toast';
+import { useWhatPage } from '../../IDE/hooks';
 
 function SocialLoginPanel() {
   const { t } = useTranslation();
@@ -44,6 +45,8 @@ function SocialLoginPanel() {
 
 function AccountView() {
   const { t } = useTranslation();
+  const pageName = useWhatPage();
+  const pagetitle = String(t(pageName));
 
   const location = useLocation();
   const queryParams = parse(location.search);
@@ -59,7 +62,7 @@ function AccountView() {
       </Helmet>
       <Toast />
 
-      <Nav layout="dashboard" />
+      <Nav layout="dashboard" mobileTitle={pagetitle} />
 
       {showError && (
         <Overlay
diff --git a/client/modules/User/pages/CollectionView.jsx b/client/modules/User/pages/CollectionView.jsx
index e52eb2c279..d0a71fed96 100644
--- a/client/modules/User/pages/CollectionView.jsx
+++ b/client/modules/User/pages/CollectionView.jsx
@@ -1,15 +1,23 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 import Nav from '../../IDE/components/Header/Nav';
 import RootPage from '../../../components/RootPage';
 import Collection from '../components/Collection';
+import { useWhatPage } from '../../IDE/hooks';
 
 const CollectionView = () => {
   const params = useParams();
+  const { t } = useTranslation();
+  const pageName = useWhatPage();
+  const pagetitle = String(t(pageName));
+
+  console.log('the pagename: ', pageName);
+  console.log('the pagename: ', t(pageName));
 
   return (
     <RootPage>
-      <Nav layout="dashboard" />
+      <Nav layout="dashboard" mobileTitle={pagetitle} />
       <Collection
         collectionId={params.collection_id}
         username={params.username}
diff --git a/client/modules/User/pages/DashboardView.jsx b/client/modules/User/pages/DashboardView.jsx
index fcde949cd7..0b5aacb455 100644
--- a/client/modules/User/pages/DashboardView.jsx
+++ b/client/modules/User/pages/DashboardView.jsx
@@ -22,10 +22,13 @@ import DashboardTabSwitcherPublic, {
   TabKey
 } from '../components/DashboardTabSwitcher';
 import useIsMobile from '../../IDE/hooks/useIsMobile';
+import { useWhatPage } from '../../IDE/hooks';
 
 const DashboardView = () => {
   const isMobile = useIsMobile();
   const { t } = useTranslation();
+  const pageName = useWhatPage();
+  const pagetitle = String(t(pageName));
 
   const params = useParams();
   const location = useLocation();
@@ -117,7 +120,7 @@ const DashboardView = () => {
 
   return (
     <RootPage fixedHeight="100%">
-      <Nav layout="dashboard" />
+      <Nav layout="dashboard" mobileTitle={pagetitle} />
 
       <main className="dashboard-header">
         <div className="dashboard-header__header">
diff --git a/client/modules/User/pages/EmailVerificationView.jsx b/client/modules/User/pages/EmailVerificationView.jsx
index 7ad9d2fa79..f7437ac676 100644
--- a/client/modules/User/pages/EmailVerificationView.jsx
+++ b/client/modules/User/pages/EmailVerificationView.jsx
@@ -6,9 +6,13 @@ import { useTranslation } from 'react-i18next';
 import { verifyEmailConfirmation } from '../actions';
 import RootPage from '../../../components/RootPage';
 import Nav from '../../IDE/components/Header/Nav';
+import { useWhatPage } from '../../IDE/hooks';
 
 const EmailVerificationView = () => {
   const { t } = useTranslation();
+  const pageName = useWhatPage();
+  const pagetitle = String(t(pageName));
+
   const location = useLocation();
   const dispatch = useDispatch();
   const browserHistory = useHistory();
@@ -38,7 +42,7 @@ const EmailVerificationView = () => {
 
   return (
     <RootPage>
-      <Nav layout="dashboard" />
+      <Nav layout="dashboard" mobileTitle={pagetitle} />
       <div className="form-container">
         <Helmet>
           <title>{t('EmailVerificationView.Title')}</title>
diff --git a/client/modules/User/pages/LoginView.jsx b/client/modules/User/pages/LoginView.jsx
index 1847c84b50..9b2a248cfc 100644
--- a/client/modules/User/pages/LoginView.jsx
+++ b/client/modules/User/pages/LoginView.jsx
@@ -6,12 +6,16 @@ import LoginForm from '../components/LoginForm';
 import SocialAuthButton from '../components/SocialAuthButton';
 import Nav from '../../IDE/components/Header/Nav';
 import RootPage from '../../../components/RootPage';
+import { useWhatPage } from '../../IDE/hooks';
 
 function LoginView() {
   const { t } = useTranslation();
+  const pageName = useWhatPage();
+  const pagetitle = String(t(pageName));
+
   return (
     <RootPage>
-      <Nav layout="dashboard" />
+      <Nav layout="dashboard" mobileTitle={pagetitle} />
       <main className="form-container">
         <Helmet>
           <title>{t('LoginView.Title')}</title>
diff --git a/client/modules/User/pages/NewPasswordView.jsx b/client/modules/User/pages/NewPasswordView.jsx
index cb9d7cbe1d..3af05e5f82 100644
--- a/client/modules/User/pages/NewPasswordView.jsx
+++ b/client/modules/User/pages/NewPasswordView.jsx
@@ -8,9 +8,13 @@ import NewPasswordForm from '../components/NewPasswordForm';
 import { validateResetPasswordToken } from '../actions';
 import Nav from '../../IDE/components/Header/Nav';
 import RootPage from '../../../components/RootPage';
+import { useWhatPage } from '../../IDE/hooks';
 
 function NewPasswordView() {
   const { t } = useTranslation();
+  const pageName = useWhatPage();
+  const pagetitle = String(t(pageName));
+
   const params = useParams();
   const resetPasswordToken = params.reset_password_token;
   const resetPasswordInvalid = useSelector(
@@ -30,7 +34,7 @@ function NewPasswordView() {
   });
   return (
     <RootPage>
-      <Nav layout="dashboard" />
+      <Nav layout="dashboard" mobileTitle={pagetitle} />
       <div className={newPasswordClass}>
         <Helmet>
           <title>{t('NewPasswordView.Title')}</title>
diff --git a/client/modules/User/pages/ResetPasswordView.jsx b/client/modules/User/pages/ResetPasswordView.jsx
index 9188a5e2c8..9cc58ad24d 100644
--- a/client/modules/User/pages/ResetPasswordView.jsx
+++ b/client/modules/User/pages/ResetPasswordView.jsx
@@ -7,9 +7,13 @@ import { useTranslation } from 'react-i18next';
 import ResetPasswordForm from '../components/ResetPasswordForm';
 import RootPage from '../../../components/RootPage';
 import Nav from '../../IDE/components/Header/Nav';
+import { useWhatPage } from '../../IDE/hooks';
 
 function ResetPasswordView() {
   const { t } = useTranslation();
+  const pageName = useWhatPage();
+  const pagetitle = String(t(pageName));
+
   const resetPasswordInitiate = useSelector(
     (state) => state.user.resetPasswordInitiate
   );
@@ -21,7 +25,7 @@ function ResetPasswordView() {
   });
   return (
     <RootPage>
-      <Nav layout="dashboard" />
+      <Nav layout="dashboard" mobileTitle={pagetitle} />
       <div className={resetPasswordClass}>
         <Helmet>
           <title>{t('ResetPasswordView.Title')}</title>
diff --git a/client/modules/User/pages/SignupView.jsx b/client/modules/User/pages/SignupView.jsx
index 6b1e1fff51..369b4fbafb 100644
--- a/client/modules/User/pages/SignupView.jsx
+++ b/client/modules/User/pages/SignupView.jsx
@@ -6,12 +6,15 @@ import SignupForm from '../components/SignupForm';
 import SocialAuthButton from '../components/SocialAuthButton';
 import Nav from '../../IDE/components/Header/Nav';
 import RootPage from '../../../components/RootPage';
+import { useWhatPage } from '../../IDE/hooks';
 
 function SignupView() {
   const { t } = useTranslation();
+  const pageName = useWhatPage();
+  const pagetitle = String(t(pageName));
   return (
     <RootPage>
-      <Nav layout="dashboard" />
+      <Nav layout="dashboard" mobileTitle={pagetitle} />
       <main className="form-container">
         <Helmet>
           <title>{t('SignupView.Title')}</title>