refactor: update react-router-dom element

react-router-dom element => useHistory -> useNavigate
Organized Imports

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, {

src/context/DataContext.js

@@ -6,8 +6,7 @@
 /* eslint-disable arrow-body-style */
 /* eslint-disable react/function-component-definition */
 
-import { React, createContext, useState, useEffect, useContext, useReducer } from 'react';
-import { BrowserRouter as useHistory } from 'react-router-dom';
+import { createContext, React, useContext, useReducer } from 'react';
 import reducer from './reducer';
 
 const initialState = {