Merge pull request #149 from Cihatata/110-error-page

feat: [110] add error pages

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,31 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: bug
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - Browser [e.g. Chrome, Safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

frontend/src/App.jsx

@@ -18,6 +18,8 @@ import HintDefaultPage from "./scenes/hints/HintDefaultPage";
 import CreateHintPage from "./scenes/hints/CreateHintPage";
 import HintPage from "./scenes/hints/HintPage";
 import CreatePopupPage from "./scenes/popup/CreatePopupPage";
+import { Error404 } from "./scenes/errors/404";
+import { Error403 } from "./scenes/errors/403";
 
 function App() {
   const { isLoggedIn } = useAuth(); //commented out for testing
@@ -47,7 +49,9 @@ function App() {
         <Route path="/hint-default" element={<HintDefaultPage />} />
         <Route path="/hint/create" element={<CreateHintPage />} />
         <Route path="/hint" element={<HintPage />} />
-      </Routes>
+        <Route path="/403" element={<Error403 />} />
+        <Route path="*" element={<Error404 />} />
+      </Routes>    
     </>
   );
 }

frontend/src/scenes/errors/403.jsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { ErrorComponent } from './Error'
+import { NAVIGATE_403_URL, TEXT_403 } from './constant'
+import { useNavigate } from 'react-router-dom';
+
+export const Error403 = () => {
+  const navigate = useNavigate();
+
+  return (
+    <ErrorComponent text={TEXT_403} errorAction={() => navigate(NAVIGATE_403_URL)} />
+  )
+}

frontend/src/scenes/errors/404.jsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { ErrorComponent } from './Error';
+import { NAVIGATE_404_URL, TEXT_404 } from './constant';
+import { useNavigate } from 'react-router';
+
+export const Error404 = () => {
+  const navigate = useNavigate();
+
+  return (
+    <ErrorComponent text={TEXT_404} errorAction={() => navigate(NAVIGATE_404_URL)} />
+  )
+}

frontend/src/scenes/errors/Error.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import PropTypes from "prop-types";
+import styles from './Error.module.scss';
+import Button from '../../components/Button/Button';
+
+export const ErrorComponent = ({ text, errorAction }) => {
+  const errorButtonStyle = {
+    borderRadius: '8px',
+    marginTop: '58px',
+    fontSize: '13px',
+    lineHeight: '24px',
+    padding: '5px 27px'
+  }
+
+  return (
+    <div className={styles.errorContainer}>
+       <div className={styles.info}>
+          <div className={styles.infoHeader}>We cannot find this page</div>
+          <div className={styles.infoText}>{text}</div>
+       </div>
+       <Button 
+        style={errorButtonStyle}
+        onClick={errorAction}
+        text='Go to the main dashboard' 
+      />
+    </div>
+  )
+};
+
+ErrorComponent.propTypes = {
+  text: PropTypes.string,
+  errorAction: PropTypes.func,
+}

frontend/src/scenes/errors/Error.module.scss

@@ -0,0 +1,35 @@
+.errorContainer {
+  background-color: var(--background-color);
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  .info {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: 18px;
+
+    .infoHeader {
+      font-weight: 600;
+      color: var(--main-text-color);
+      font-size: 16px;
+      line-height: 30px;
+    }
+
+    .infoText {
+      font-size: 13px;
+      font-weight: 400;
+      line-height: 23px;
+    }
+  }
+
+  .navigateButton {
+    margin-top: 58px;
+    border-radius: 8px;
+  }
+}

frontend/src/scenes/errors/constant.js

@@ -0,0 +1,5 @@
+export const TEXT_404 = 'The URL doesn’t exist';
+export const TEXT_403 = 'You don’t have access to it.';
+
+export const NAVIGATE_404_URL = '/'
+export const NAVIGATE_403_URL = '/'

frontend/src/tests/components/Error/Error.test.jsx

@@ -0,0 +1,39 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import React from 'react';
+import { ErrorComponent } from '../../../scenes/errors/Error';
+
+describe('ErrorComponent', () => {
+  const mockErrorAction = vi.fn();
+
+  it('renders the error message and text', () => {
+    const errorMessage = 'Page not found';
+
+    render(<ErrorComponent text={errorMessage} errorAction={mockErrorAction} />);
+
+    expect(screen.getByText('We cannot find this page')).not.toBeNull()
+    expect(screen.getByText(errorMessage)).not.toBeNull()
+  });
+
+  it('calls errorAction when button is clicked', () => {
+    render(<ErrorComponent text="Error occurred" errorAction={mockErrorAction} />);
+
+    const button = screen.getByRole('button');
+
+    fireEvent.click(button);
+
+    expect(mockErrorAction).toHaveBeenCalled();
+  });
+
+  it('applies custom styles to the button', () => {
+    render(<ErrorComponent text="Error occurred" errorAction={mockErrorAction} />);
+
+    const button = screen.getByRole('button');
+
+    expect(button.style.borderRadius).toBe('8px');
+    expect(button.style.marginTop).toBe('58px');
+    expect(button.style.fontSize).toBe('13px');
+    expect(button.style.lineHeight).toBe('24px');
+    expect(button.style.padding).toBe('5px 27px');
+  });
+});