build: bump dependencies

package.json

@@ -3,37 +3,37 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@apollo/client": "^3.6.9",
-    "@babel/plugin-proposal-decorators": "^7.16.7",
-    "@fortawesome/fontawesome-svg-core": "^6.1.1",
-    "@fortawesome/free-brands-svg-icons": "^6.1.2",
-    "@fortawesome/free-solid-svg-icons": "^6.1.1",
-    "@fortawesome/react-fontawesome": "^0.1.18",
-    "@mdx-js/loader": "^1.6.22",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/user-event": "^12.1.10",
+    "@apollo/client": "^3.7.2",
+    "@babel/plugin-proposal-decorators": "^7.20.5",
+    "@fortawesome/fontawesome-svg-core": "^6.2.1",
+    "@fortawesome/free-brands-svg-icons": "^6.2.1",
+    "@fortawesome/free-solid-svg-icons": "^6.2.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@mdx-js/loader": "^2.1.5",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/user-event": "^14.4.3",
     "apollo-link-error": "^1.1.13",
-    "axios": "^0.27.2",
-    "bootstrap": "^5.0.1",
-    "date-fns": "^2.29.1",
+    "axios": "^1.2.1",
+    "bootstrap": "^5.2.3",
+    "date-fns": "^2.29.3",
     "dotenv": "^16.0.3",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-markdown": "^2.2.1",
+    "eslint-plugin-markdown": "^3.0.0",
     "eslint-plugin-react-hooks": "^4.3.0",
     "graphql": "^16.6.0",
-    "react": "^17.0.2",
-    "react-bootstrap": "^1.6.1",
-    "react-dom": "^17.0.2",
-    "react-icons": "^4.2.0",
-    "react-router": "^5.2.0",
-    "react-router-bootstrap": "^0.25.0",
-    "react-router-dom": "^5.3.3",
-    "react-scripts": "4.0.3",
+    "react": "^18.2.0",
+    "react-bootstrap": "^2.6.0",
+    "react-dom": "^18.2.0",
+    "react-icons": "^4.7.1",
+    "react-router": "^6.4.4",
+    "react-router-bootstrap": "^0.26.2",
+    "react-router-dom": "^6.4.4",
+    "react-scripts": "5.0.1",
     "react-switch": "^7.0.0",
     "react-user-profile": "^1.0.3",
     "smooth-scroll": "^16.1.3",
-    "styled-components": "^5.3.5",
-    "web-vitals": "^1.0.1"
+    "styled-components": "^5.3.6",
+    "web-vitals": "^3.1.0"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -57,24 +57,24 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.16.7",
-    "@babel/eslint-parser": "^7.16.5",
+    "@babel/core": "^7.20.5",
+    "@babel/eslint-parser": "^7.19.1",
     "@babel/preset-react": "^7.16.7",
-    "@testing-library/react": "^11.2.7",
-    "autoprefixer": "^9.8.6",
-    "eslint": "^7.32.0",
+    "@testing-library/react": "^13.4.0",
+    "autoprefixer": "^10.4.13",
+    "eslint": "^8.29.0",
     "eslint-config": "^0.3.0",
     "eslint-config-airbnb": "^19.0.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-jest": "^24.3.6",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-jest": "^27.1.6",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react": "^7.31.11",
     "jest-dom": "^4.0.0",
-    "postcss": "^7.0.39",
+    "postcss": "^8.4.19",
     "postcss-flexbugs-fixes": "^5.0.2",
-    "postcss-preset-env": "^7.7.2",
-    "prettier": "^2.5.1",
-    "react-test-renderer": "^17.0.2"
+    "postcss-preset-env": "^7.8.3",
+    "prettier": "^2.8.0",
+    "react-test-renderer": "^18.2.0"
   }
 }

src/App.js

@@ -7,23 +7,20 @@
 import { React } from 'react';
 
 // Libraries
-import ReactDOM from 'react-dom';
-import { BrowserRouter as Router, Switch, Route, Redirect, useHistory } from 'react-router-dom';
-import { ApolloClient, InMemoryCache, ApolloProvider, HttpLink, from } from '@apollo/client';
-import { format } from 'date-fns';
+import { ApolloClient, ApolloProvider, from, HttpLink, InMemoryCache } from '@apollo/client';
 import { onError } from '@apollo/client/link/error';
+import { Route, Routes } from 'react-router-dom';
 // import * as dotenv from 'dotenv';
 
 // Styles
-import './index.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
+import './index.css';
 
 // Components
+import { AddJournal, Auth, Footer, JournalDetails, Layout, Login } from './components';
 import Profile from './components/Authentication/User-Profile/useprofile';
-import { Journal, Manifesto, Home } from './pages';
-import { Footer, Auth, Header, Login, JournalDetails, AddJournal, Layout } from './components';
-import Navbar from './components/marginals/Navbar/Navbar';
 import Edit from './components/EditJournal/Edit';
+import { Home, Journal } from './pages';
 
 // Context
 import { DataProvider } from './context/DataContext';
@@ -53,33 +50,16 @@ function App() {
     <ApolloProvider client={client}>
       <Layout>
         <DataProvider>
-          <Switch>
-            <Route exact path='/'>
-              <Home />
-            </Route>
-            <Route path='/journal'>
-              <Journal />
-            </Route>
-            <Route exact path='/addjournal'>
-              <AddJournal />
-            </Route>
-            <Route path='/edit/:issn'>
-              <Edit />
-            </Route>
-            <Route path='/policy/:issn'>
-              <JournalDetails />
-            </Route>
-            <Route path='/Signup'>
-              <Auth />
-            </Route>
-            <Route path='/Login'>
-              <Login />
-            </Route>
-            <Route path='/profile'>
-              <Profile />
-            </Route>
-            <Redirect to='/' />
-          </Switch>
+          <Routes>
+            <Route exact path='/' element={<Home />} />
+            <Route path='/journal' element={<Journal />} />
+            <Route exact path='/addJournal' element={<AddJournal />} />
+            <Route path='/edit/:issn' element={<Edit />} />
+            <Route path='/policy/:issn' element={<JournalDetails />} />
+            <Route path='/Signup' element={<Auth />} />
+            <Route path='/Login' element={<Login />} />
+            <Route path='/profile' element={<Profile />} />
+          </Routes>
           <Footer />
         </DataProvider>
       </Layout>

src/components/AddJournal/AddJournal.js

@@ -5,32 +5,32 @@
 import React, { useState } from 'react';
 
 // Libraries
-import { useHistory } from 'react-router-dom';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useMutation } from '@apollo/client';
 import { faBookmark } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useNavigate } from 'react-router-dom';
 import Switch from 'react-switch';
-import { useMutation } from '@apollo/client';
 
 // Styles
+import { FormInputBtn } from '../Authentication/styles';
 import {
+  Div,
+  FirstDiv,
+  Form,
   Head,
-  Label,
-  Toggle,
+  Icon,
   Input,
-  FirstDiv,
+  Label,
+  SecondDiv,
+  Select,
   Subhead,
-  Icon,
   Subhead2,
-  Select,
-  SecondDiv,
-  Form,
-  Div,
+  Toggle,
   ToggleContainer,
 } from './styles';
-import { FormInputBtn } from '../Authentication/styles';
 
 // Components
-import { Error, Loader, SectionLayout, PolicyContainer } from '../marginals';
+import { Error, Loader, PolicyContainer, SectionLayout } from '../marginals';
 
 // Graphql
 import CREATE_JOURNAL from '../../graphql/mutation/createJournal';
@@ -59,8 +59,7 @@ const AddJournal = () => {
   // GraphQL Mutation
   const [createJournal, { error, loading }] = useMutation(CREATE_JOURNAL);
 
-  // useHistory router
-  const history = useHistory();
+  const history = useNavigate();
 
   // Function to add Journal
   const addJournal = async (event) => {

src/components/Authentication/Login/Login.js

@@ -4,29 +4,29 @@
 /* eslint-disable jsx-a11y/label-has-associated-control */
 /* eslint-disable react/function-component-definition */
 /* eslint-disable jsx-a11y/anchor-is-valid */
-import React, { useState } from 'react';
-import { Link, useHistory } from 'react-router-dom';
 import { useMutation } from '@apollo/client';
+import React, { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
 
+import { signup } from '../../../config/content';
+import LOGIN from '../../../graphql/mutation/login';
+import { toErrorMap } from '../../../utils/toErrorMap';
 import {
+  ButtonContainer,
   FormContentRight,
   FormDiv,
   FormH1,
+  FormH2,
+  FormInput,
+  FormInputBtn,
   FormInputs,
   FormInputsP,
   FormLabel,
-  FormInput,
-  FormInputBtn,
-  ButtonContainer,
-  FormH2,
 } from './styles';
-import { signup } from '../../../config/content';
-import LOGIN from '../../../graphql/mutation/login';
-import { toErrorMap } from '../../../utils/toErrorMap';
 
 const FormLogin = () => {
   const [login, { loading, error }] = useMutation(LOGIN);
-  const history = useHistory();
+  const history = useNavigate();
 
   const [isUsernameOrEmailError, setIsUsernameOrEmailError] = useState(false);
   const [isPasswordError, setIsPasswordError] = useState(false);

src/components/Authentication/Signup/SignUp.js

@@ -7,7 +7,7 @@
 /* eslint-disable react/function-component-definition */
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import React, { useState } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { useMutation } from '@apollo/client';
 import {
   FormContentRight,
@@ -26,7 +26,7 @@ import { toErrorMap } from '../../../utils/toErrorMap';
 
 const FormSignup = () => {
   const [register, { loading, error }] = useMutation(REGISTER);
-  const history = useHistory();
+  const history = useNavigate();
 
   const [isFullNameError, setIsFullNameError] = useState(false);
   const [isUsernameError, setIsUsernameError] = useState(false);

src/components/Authentication/User-Profile/useprofile.js

@@ -5,24 +5,23 @@
 /* eslint-disable jsx-a11y/alt-text */
 /* eslint-disable react/self-closing-comp */
 /* eslint-disable no-unused-vars */
+import { useMutation, useQuery } from '@apollo/client';
 import React, { useEffect, useState } from 'react';
-import { useQuery, useMutation } from '@apollo/client';
-import GET_USER from '../../../graphql/queries/GET_USER';
-import Logout from './Logout';
-import { SectionLayout } from '../../marginals';
 import { Container } from 'react-bootstrap';
+import { useNavigate } from 'react-router';
 import LOGOUT from '../../../graphql/mutation/LOGOUT';
-import { useHistory } from 'react-router';
-import { Heading, Card, Title, ButtonLogout, H1 } from './styles';
+import GET_USER from '../../../graphql/queries/GET_USER';
+import { SectionLayout } from '../../marginals';
 import { FormInputBtn } from '../styles';
+import { Card, H1, Heading, Title } from './styles';
 
 function Profile() {
   const { data } = useQuery(GET_USER);
   const [logout, { data1, error }] = useMutation(LOGOUT);
 
   const [user, setUser] = useState('');
 
-  const history = useHistory();
+  const history = useNavigate();
 
   useEffect(() => {
     if (data) {

src/components/JournalDetails/Details.js

@@ -3,38 +3,38 @@
 import React, { useEffect } from 'react';
 
 // Libraries
-import { useParams, Link, useHistory } from 'react-router-dom';
-import { useQuery, useMutation } from '@apollo/client';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useMutation, useQuery } from '@apollo/client';
 import {
   faBookmark,
-  faSquareCheck,
-  faRectangleXmark,
   faLink,
+  faRectangleXmark,
+  faSquareCheck,
 } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Link, useNavigate, useParams } from 'react-router-dom';
 
 // Styles
+import { FormInputBtn } from '../Authentication/styles';
 import {
-  Head,
-  Title,
-  Subhead,
-  Subhead2,
   Box,
+  ButtonContainer,
+  Head,
+  Icon,
   List,
-  Que,
   Misc,
+  Que,
+  Subhead,
+  Subhead2,
+  Title,
   UpdateContainer,
-  Icon,
-  ButtonContainer,
 } from './styles';
-import { FormInputBtn } from '../Authentication/styles';
 
 // Components
-import { SectionLayout, PolicyContainer, Loader, Error } from '../marginals';
+import { Error, Loader, PolicyContainer, SectionLayout } from '../marginals';
 
 // Graphql
-import GET_ALL_JOURNAL_DETAILS from '../../graphql/queries/getFullJournalByISSN';
 import DELETE_JOURNAL from '../../graphql/mutation/deleteJournal';
+import GET_ALL_JOURNAL_DETAILS from '../../graphql/queries/getFullJournalByISSN';
 
 // Reducer
 import { useGlobalContext } from '../../context/DataContext';
@@ -44,7 +44,7 @@ function Details() {
   const { posts, dispatch } = useGlobalContext();
 
   const { issn } = useParams();
-  const history = useHistory();
+  const history = useNavigate();
 
   // Query/Mutation from GraphQL
   const { data, loading, error, refetch } = useQuery(GET_ALL_JOURNAL_DETAILS, {