Create a secret route

.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+*package-lock.json
 
 # testing
 /coverage

src/locale/en.json

@@ -1,4 +1,5 @@
 {
+  "secret_page_title": "my account",
   "realtime_map_explanation": "Location data of buses collected in real time",
   "timeline_page_title": "Historical timeline",
   "realtime_map_page_title": "Real time map",

src/locale/he.json

@@ -1,4 +1,5 @@
 {
+  "secret_page_title": "החשבון שלי",
   "realtime_map_explanation": "נתוני מיקום של אוטובוסים שנאספו בזמן אמת",
   "timeline_page_title": "לוח זמנים היסטורי",
   "realtime_map_page_title": "מפה בזמן אמת",

src/pages/secretPage/SecretPage.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const SecretPage = () => {
+  return (
+    <div>SecretPage</div>
+  )
+}
+
+export default SecretPage

src/routes/ProtectedRoute.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { Navigate } from 'react-router-dom';
+
+const ProtectedRoute = ({children}:any) => {
+
+    const isAuth:boolean = false;
+
+  return (
+    isAuth ? children : <Navigate to="/dashboard" replace/>
+  )
+}
+
+export default ProtectedRoute

src/routes/index.tsx

@@ -10,6 +10,8 @@ const SingleLineMapPage = lazy(() => import('../pages/SingleLineMapPage'))
 const About = lazy(() => import('../pages/About'))
 const Profile = lazy(() => import('../pages/Profile'))
 const BugReportForm = lazy(() => import('../pages/BugReportForm '))
+const SecretPage = lazy(() => import('../pages/secretPage/SecretPage'))
+import ProtectedRoute from './ProtectedRoute'
 import CircularProgress from '@mui/material/CircularProgress'
 
 import {
@@ -22,67 +24,84 @@ import {
   BugOutlined,
   BarChartOutlined,
   LineChartOutlined,
+  VerifiedOutlined
 } from '@ant-design/icons'
 
 export const usePages = () => {
   const { t } = useTranslation()
   return [
+    {
+      label: t('secret_page_title'),
+      path: '/secretpage',
+      icon: <VerifiedOutlined />,
+      element: <SecretPage />,
+      isProtected: true,
+    },
     {
       label: t('dashboard_page_title'),
       path: '/dashboard',
       icon: <LaptopOutlined />,
       element: <DashboardPage />,
+      isProtected: false,
     },
     {
       label: t('timeline_page_title'),
       path: '/timeline',
       searchParamsRequired: true,
       icon: <FieldTimeOutlined />,
       element: <TimelinePage />,
+      isProtected: false,
     },
     {
       label: t('gaps_page_title'),
       path: '/gaps',
       searchParamsRequired: true,
       icon: <BarChartOutlined />,
       element: <GapsPage />,
+      isProtected: false,
     },
     {
       label: t('gaps_patterns_page_title'),
       path: '/gaps_patterns',
       icon: <LineChartOutlined />,
       element: <GapsPatternsPage />,
+      isProtected: false,
     },
     {
       label: t('realtime_map_page_title'),
       path: '/map',
       icon: <HeatMapOutlined />,
       element: <RealtimeMapPage />,
+      isProtected: false,
     },
     {
       label: t('singleline_map_page_title'),
       path: '/single-line-map',
       searchParamsRequired: true,
       icon: <RadarChartOutlined />,
       element: <SingleLineMapPage />,
+      isProtected: false,
     },
     {
       label: t('about_title'),
       path: '/about',
       icon: <BellOutlined />,
       element: <About />,
+      isProtected: false,
     },
     {
       label: t('report_a_bug_title'),
       path: 'report-a-bug',
       icon: <BugOutlined />,
       element: <BugReportForm />,
+      isProtected: false,
     },
     {
       label: t('donate_title'),
       path: 'https://www.jgive.com/new/he/ils/donation-targets/3268#donation-modal',
       icon: <DollarOutlined />,
       element: null,
+      isProtected: false,
     },
   ]
 }
@@ -94,8 +113,16 @@ const RoutesList = () => {
   return (
     <Suspense fallback={<CircularProgress />}>
       <Routes>
-        {routes.map(({ path, element }) => (
-          <Route key={path} path={path} element={element} />
+        {routes.map(({ path, element, isProtected}) => (
+          <Route key={path} path={path} element=
+        {
+          isProtected ? 
+          <ProtectedRoute>
+          element
+          </ProtectedRoute> 
+          : 
+          element
+        } />
         ))}
         <Route path="/profile" element={<Profile />} />
         <Route path="*" element={<RedirectToDashboard />} />