Web2 editor back button (#334)

* added back button

* fixed tests

Author: winnteas

frontend/src/App.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import { Routes, Route } from "react-router-dom";
 import { Provider } from "react-redux";
 import { GlobalStore } from "src/redux-state/index";
 
@@ -13,12 +13,10 @@ const App: React.FC = () => {
     <div className="App">
       <GlobalStyle />
       <Provider store={GlobalStore}>
-        <Router>
           <Routes>
             <Route path="/" element={<Dashboard/>}/>
             <Route path="/editor/:id" element={<Editor/>}/>
           </Routes>
-        </Router>
       </Provider>
     </div>
   );

frontend/src/cse-testing-lib/test-utils.tsx

@@ -3,20 +3,24 @@ import { Provider } from 'react-redux';
 import { GlobalStore } from 'src/redux-state/index';
 import {render, queries, RenderOptions} from '@testing-library/react'
 import * as customQueries from './custom-queries'
+import { BrowserRouter } from 'react-router-dom';
 
 // with redux
 const AllTheProviders: React.FC = ({ children }) => {
   return (
-    <Provider store={GlobalStore}>
-      {children}
-    </Provider>
+    <BrowserRouter>
+      <Provider store={GlobalStore}>
+        {children}
+      </Provider>
+    </BrowserRouter>
   )
 }
 
 const customRender = (
   ui: React.ReactElement,
   options?: Omit<RenderOptions, 'queries'>,
-) => render(ui, {
+) => render(
+  ui, {
   queries: {...queries, ...customQueries},
   wrapper: AllTheProviders,
   ...options

frontend/src/deprecated/components/Editor/EditorHeader.tsx

@@ -1,6 +1,10 @@
 import React from 'react';
 import styled from 'styled-components';
 import Button from '@mui/material/Button';
+import IconButton from "@mui/material/IconButton";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import { useNavigate } from 'react-router-dom';
+
 
 const Container = styled.div`
   height: 65px;
@@ -16,7 +20,7 @@ const HeaderFlex = styled.div`
 display: flex;
 flex-direction: row;
 flex-wrap: nowrap;
-justify-content: flex-end;
+justify-content: space-between;
 align-items: center;
 padding: 0.3rem 0.5rem;
 `
@@ -37,13 +41,30 @@ const ButtonStyle = styled(Button)`
   min-width: 2px;
 }
 `
+
+const ButtonContainer = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  flex-direction: row;
+  align-items: center;
+`
+
 /* Preview and text to be changed into a dropdown menu */
 
 const EditorHeader: React.FC = (props) => {
+
+  const navigate = useNavigate();
+
   return (
     <Container>
       <HeaderFlex>
-        {props.children}
+
+        <IconButton aria-label="back" onClick={() => navigate(-1)}>
+          <ArrowBackIcon fontSize="inherit" />
+        </IconButton>
+        <ButtonContainer>
+          {props.children}
+        </ButtonContainer>
         {/* <ButtonGroup>
           <ButtonStyle>
           ←

frontend/src/index.tsx

@@ -2,11 +2,15 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import { BrowserRouter } from 'react-router-dom';
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+        <App />
+    </BrowserRouter>
   </React.StrictMode>,
+
   document.getElementById('root')
 );
 

frontend/src/packages/dashboard/components/SideBar/SideBar.test.tsx

@@ -1,7 +1,6 @@
 import { render } from "src/cse-testing-lib";
 import { queryByDataAnchor } from "src/cse-testing-lib/custom-queries";
 import SideBar from "./SideBar";
-import { BrowserRouter as Router } from "react-router-dom";
 import React from "react";
 
 describe("Side bar tests", () => {
@@ -11,14 +10,12 @@ describe("Side bar tests", () => {
     const mockSetModalState = jest.fn();
     const mockSelectedFileID = "5";
     const { queryByDataAnchor } = render(
-      <Router>
         <SideBar
           setModalState={mockSetModalState}
           selectedFile={mockSelectedFileID}
           isOpen={true}
           setOpen={mockSetOpen}
         />
-      </Router>
     );
 
     expect(queryByDataAnchor("NewPageButton")).toBeTruthy();

frontend/src/packages/editor/EditorBlock.test.tsx

@@ -5,6 +5,7 @@ import EditorPage from "./index";
 
 describe("Editor Block tests", () => {
   it("On CreateContentBlockButton click should create content block", () => {
+    
     const { queryByDataAnchor, queryAllByDataAnchor } = render(<EditorPage/>);
     const CreateContentBlockButton = queryByDataAnchor("CreateContentBlockButton");