Merge pull request #2685 from OneCommunityGlobal/Peterson_implement_D…

…efault_Error_Page_to_be_created_and_redirected_to

Peterson implement default error page to be created and redirected to

src/components/Logout/Logout.jsx

@@ -1,4 +1,4 @@
-import { Redirect } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import { boxStyle, boxStyleDark } from 'styles';
@@ -8,6 +8,7 @@ import { logoutUser } from '../../actions/authActions';
 function Logout({ setLogoutPopup, open }) {
   const darkMode = useSelector(state => state.theme.darkMode);
   const dispatch = useDispatch();
+  const history = useHistory();
 
   const closePopup = () => {
     setLogoutPopup(false);
@@ -22,7 +23,7 @@ function Logout({ setLogoutPopup, open }) {
 
     closePopup();
     dispatch(logoutUser());
-    return <Redirect to="/login" auth={false} />;
+    return history.push('/login');
   };
 
   return (

src/components/Notification/__tests__/notification.test.js

@@ -14,7 +14,11 @@ describe('NotificationCard', () => {
   let store;
 
   beforeEach(() => {
-    store = mockStore({});
+    store = mockStore({
+      theme: {
+        darkMode: false,
+      },
+    });
 
     store.dispatch = jest.fn();
   });

src/components/Notification/notificationCard.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { Card, CardTitle, CardText, Button, CardBody, Container } from 'reactstrap';
-import parse from 'html-react-parser';
 import { useDispatch } from 'react-redux';
+import { useSelector } from 'react-redux';
+import parse from 'html-react-parser';
 import { markNotificationAsRead } from '../../actions/notificationAction';
 import { convertDateFormatToMMMDDYY } from '../../utils/formatDate';
 
@@ -54,6 +55,7 @@ function NotificationCard({ notification }) {
 
   // Fade animation state
   const [fade, setFade] = React.useState(false);
+  const darkMode = useSelector(state => state.theme.darkMode);
 
   // Replace the anchor tag with a styled anchor tag to acoomodate the card's background color.
   // We may use this to apply style to the text before parsing.
@@ -68,7 +70,7 @@ function NotificationCard({ notification }) {
   };
 
   return (
-    <Container fluid>
+    <Container fluid className={`${darkMode ? 'bg-oxford-blue' : 'bg-white'}`}>
       <Card
         color="primary"
         className={fade ? 'fade' : ''}

src/components/SummaryBar/SummaryBar.jsx

@@ -21,16 +21,18 @@ import { ENDPOINTS, ApiEndpoint } from 'utils/URL';
 import axios from 'axios';
 import hasPermission from 'utils/permissions';
 import { toast } from 'react-toastify';
+import { useLocation } from 'react-router-dom';
 import TaskIcon from './task_icon.png';
 import BadgesIcon from './badges_icon.png';
 import BlueScoreIcon from './bluesquare_icon.png';
 import ReportIcon from './report_icon.png';
 import SuggestionsIcon from './suggestions_icon.png';
 import httpService from '../../services/httpService';
-
 import { getProgressColor, getProgressValue } from '../../utils/effortColors';
 
 function SummaryBar(props) {
+  const location = useLocation();
+
   // from parent
   const { displayUserId, summaryBarData } = props;
   // from store
@@ -362,6 +364,11 @@ function SummaryBar(props) {
     setShowSuggestionModal(prev => !prev);
   };
 
+  useEffect(() => {
+    // eslint-disable-next-line no-unused-expressions
+    location.search === '?openModalReport' && openSuggestionModal();
+  }, []);
+
   const onTaskClick = () => {
     window.location.hash = '#tasks';
   };

src/components/not-found/notFoundPage.css

@@ -0,0 +1,58 @@
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+.backgroungContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+.container {
+  width: 80%;
+  height: auto;
+}
+
+.container img {
+  max-width: 100%;
+  width: 100%;
+  height: 25rem;
+  display: block;
+  /* 35 */
+  object-fit: contain;
+}
+
+.container p {
+  font-size: 22px;
+  position: relative;
+  top: -100px;
+  left: 20px;
+}
+
+@media (max-width: 600px) {
+  .container img {
+    width: 100%;
+    height: 15rem;
+    display: block;
+    object-fit: cover;
+  }
+  .container p {
+    font-size: 15px;
+    position: relative;
+    top: -20px;
+    left: 20px;
+  }
+}
+
+@media (max-width: 400px) {
+  .container img {
+    width: 100%;
+    height: 15rem;
+    display: block;
+    object-fit: contain;
+  }
+}

src/components/not-found/notFoundPage.jsx

@@ -0,0 +1,57 @@
+import { Link } from 'react-router-dom';
+import { useSelector } from 'react-redux';
+import './notFoundPage.css';
+
+function NotFoundPage() {
+  const darkMode = useSelector(state => state.theme.darkMode);
+  const validateUserLogin = localStorage.getItem('token');
+
+  return (
+    <section
+      // eslint-disable-next-line react/jsx-curly-brace-presence
+      // d-flex   align-items-center  flex-column justify-content-center
+      className={`h-100 `}
+      style={{ backgroundColor: darkMode ? '#121212' : 'white' }}
+    >
+      <div className="backgroungContainer">
+        <div className="container">
+          <img
+            src={`${darkMode ? '/imagePage404DarkMode.png' : 'imagePage404.png'}`}
+            alt="404 error page illustration"
+          />
+          {validateUserLogin ? (
+            <p
+              style={{ marginBottom: '50px' }}
+              className={`${darkMode ? 'text-light' : 'text-dark '}`}
+            >
+              The rabbits have been nibbling the cables again... Maybe this will help
+              <Link style={{ marginLeft: '6px' }} to="/dashboard">
+                home
+              </Link>{' '}
+              or you can report this page by clicking
+              <Link style={{ marginLeft: '6px' }} to="/dashboard?openModalReport">
+                here
+              </Link>
+            </p>
+          ) : (
+            // eslint-disable-next-line react/jsx-curly-brace-presence
+            <p
+              style={{}}
+              className={`${
+                darkMode ? 'text-light message-error-404DarkMode ' : 'text-dark  message-error-404'
+              }`}
+            >
+              It seems like you&apos;ve reached a page that doesn&apos;t exist. In addition
+              You&apos;re not currently logged in. Please go back to the
+              <Link style={{ marginLeft: '8px' }} to="/login">
+                login page
+              </Link>
+            </p>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default NotFoundPage;

src/routes.js

@@ -41,6 +41,7 @@ import Toolslist from './components/BMDashboard/Tools/ToolsList';
 import AddTool from './components/BMDashboard/Tools/AddTool';
 // eslint-disable-next-line import/order, import/no-unresolved
 import LogTools from './components/BMDashboard/LogTools/LogTools';
+import notFoundPage from './components/not-found/notFoundPage';
 
 const ReusableListView = lazy(() => import('./components/BMDashboard/ReusableList'));
 const ConsumableListView = lazy(() => import('./components/BMDashboard/ConsumableList'));
@@ -109,10 +110,14 @@ export default (
         <ProtectedRoute path="/dashboard/:userId" exact component={Dashboard} />
         <ProtectedRoute path="/project/members/:projectId" fallback component={Members} />
         <ProtectedRoute path="/timelog/" exact render={() => <Timelog userId={null} />} />
-        <ProtectedRoute path="/timelog/:userId" exact render ={(props) => {
-           const {userId} = props.match.params;
-            return <Timelog userId ={userId}/>
-        }} />
+        <ProtectedRoute
+          path="/timelog/:userId"
+          exact
+          render={props => {
+            const { userId } = props.match.params;
+            return <Timelog userId={userId} />;
+          }}
+        />
         <ProtectedRoute path="/peoplereport/:userId" component={PeopleReport} fallback />
         <ProtectedRoute path="/projectreport/:projectId" component={ProjectReport} fallback />
         <ProtectedRoute path="/teamreport/:teamId" component={TeamReport} fallback />
@@ -349,6 +354,7 @@ export default (
         <Route path="/Logout" component={Logout} />
         <Route path="/forcePasswordUpdate/:userId" component={ForcePasswordUpdate} />
         <ProtectedRoute path="/" exact component={Dashboard} />
+        <Route path="*" component={notFoundPage} />
       </Switch>
     </>
   </Switch>