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>