Skip to content

Commit cb53e63

Browse files
d-e-v-eshd-e-v-esh
committed
refactor: update react-router-dom element
react-router-dom element => useHistory -> useNavigate Organized Imports
1 parent 491ba33 commit cb53e63

7 files changed

Lines changed: 64 additions & 87 deletions

File tree

‎src/App.js‎

Lines changed: 15 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -7,23 +7,20 @@
77
import { React } from 'react';
88

99
// Libraries
10-
import ReactDOM from 'react-dom';
11-
import { BrowserRouter as Router, Switch, Route, Redirect, useHistory } from 'react-router-dom';
12-
import { ApolloClient, InMemoryCache, ApolloProvider, HttpLink, from } from '@apollo/client';
13-
import { format } from 'date-fns';
10+
import { ApolloClient, ApolloProvider, from, HttpLink, InMemoryCache } from '@apollo/client';
1411
import { onError } from '@apollo/client/link/error';
12+
import { Route, Routes } from 'react-router-dom';
1513
// import * as dotenv from 'dotenv';
1614

1715
// Styles
18-
import './index.css';
1916
import 'bootstrap/dist/css/bootstrap.min.css';
17+
import './index.css';
2018

2119
// Components
20+
import { AddJournal, Auth, Footer, JournalDetails, Layout, Login } from './components';
2221
import Profile from './components/Authentication/User-Profile/useprofile';
23-
import { Journal, Manifesto, Home } from './pages';
24-
import { Footer, Auth, Header, Login, JournalDetails, AddJournal, Layout } from './components';
25-
import Navbar from './components/marginals/Navbar/Navbar';
2622
import Edit from './components/EditJournal/Edit';
23+
import { Home, Journal } from './pages';
2724

2825
// Context
2926
import { DataProvider } from './context/DataContext';
@@ -53,33 +50,16 @@ function App() {
5350
<ApolloProvider client={client}>
5451
<Layout>
5552
<DataProvider>
56-
<Switch>
57-
<Route exact path='/'>
58-
<Home />
59-
</Route>
60-
<Route path='/journal'>
61-
<Journal />
62-
</Route>
63-
<Route exact path='/addjournal'>
64-
<AddJournal />
65-
</Route>
66-
<Route path='/edit/:issn'>
67-
<Edit />
68-
</Route>
69-
<Route path='/policy/:issn'>
70-
<JournalDetails />
71-
</Route>
72-
<Route path='/Signup'>
73-
<Auth />
74-
</Route>
75-
<Route path='/Login'>
76-
<Login />
77-
</Route>
78-
<Route path='/profile'>
79-
<Profile />
80-
</Route>
81-
<Redirect to='/' />
82-
</Switch>
53+
<Routes>
54+
<Route exact path='/' element={<Home />} />
55+
<Route path='/journal' element={<Journal />} />
56+
<Route exact path='/addJournal' element={<AddJournal />} />
57+
<Route path='/edit/:issn' element={<Edit />} />
58+
<Route path='/policy/:issn' element={<JournalDetails />} />
59+
<Route path='/Signup' element={<Auth />} />
60+
<Route path='/Login' element={<Login />} />
61+
<Route path='/profile' element={<Profile />} />
62+
</Routes>
8363
<Footer />
8464
</DataProvider>
8565
</Layout>

‎src/components/AddJournal/AddJournal.js‎

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,32 +5,32 @@
55
import React, { useState } from 'react';
66

77
// Libraries
8-
import { useHistory } from 'react-router-dom';
9-
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
8+
import { useMutation } from '@apollo/client';
109
import { faBookmark } from '@fortawesome/free-solid-svg-icons';
10+
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
11+
import { useNavigate } from 'react-router-dom';
1112
import Switch from 'react-switch';
12-
import { useMutation } from '@apollo/client';
1313

1414
// Styles
15+
import { FormInputBtn } from '../Authentication/styles';
1516
import {
17+
Div,
18+
FirstDiv,
19+
Form,
1620
Head,
17-
Label,
18-
Toggle,
21+
Icon,
1922
Input,
20-
FirstDiv,
23+
Label,
24+
SecondDiv,
25+
Select,
2126
Subhead,
22-
Icon,
2327
Subhead2,
24-
Select,
25-
SecondDiv,
26-
Form,
27-
Div,
28+
Toggle,
2829
ToggleContainer,
2930
} from './styles';
30-
import { FormInputBtn } from '../Authentication/styles';
3131

3232
// Components
33-
import { Error, Loader, SectionLayout, PolicyContainer } from '../marginals';
33+
import { Error, Loader, PolicyContainer, SectionLayout } from '../marginals';
3434

3535
// Graphql
3636
import CREATE_JOURNAL from '../../graphql/mutation/createJournal';
@@ -59,8 +59,7 @@ const AddJournal = () => {
5959
// GraphQL Mutation
6060
const [createJournal, { error, loading }] = useMutation(CREATE_JOURNAL);
6161

62-
// useHistory router
63-
const history = useHistory();
62+
const history = useNavigate();
6463

6564
// Function to add Journal
6665
const addJournal = async (event) => {

‎src/components/Authentication/Login/Login.js‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,29 +4,29 @@
44
/* eslint-disable jsx-a11y/label-has-associated-control */
55
/* eslint-disable react/function-component-definition */
66
/* eslint-disable jsx-a11y/anchor-is-valid */
7-
import React, { useState } from 'react';
8-
import { Link, useHistory } from 'react-router-dom';
97
import { useMutation } from '@apollo/client';
8+
import React, { useState } from 'react';
9+
import { Link, useNavigate } from 'react-router-dom';
1010

11+
import { signup } from '../../../config/content';
12+
import LOGIN from '../../../graphql/mutation/login';
13+
import { toErrorMap } from '../../../utils/toErrorMap';
1114
import {
15+
ButtonContainer,
1216
FormContentRight,
1317
FormDiv,
1418
FormH1,
19+
FormH2,
20+
FormInput,
21+
FormInputBtn,
1522
FormInputs,
1623
FormInputsP,
1724
FormLabel,
18-
FormInput,
19-
FormInputBtn,
20-
ButtonContainer,
21-
FormH2,
2225
} from './styles';
23-
import { signup } from '../../../config/content';
24-
import LOGIN from '../../../graphql/mutation/login';
25-
import { toErrorMap } from '../../../utils/toErrorMap';
2626

2727
const FormLogin = () => {
2828
const [login, { loading, error }] = useMutation(LOGIN);
29-
const history = useHistory();
29+
const history = useNavigate();
3030

3131
const [isUsernameOrEmailError, setIsUsernameOrEmailError] = useState(false);
3232
const [isPasswordError, setIsPasswordError] = useState(false);

‎src/components/Authentication/Signup/SignUp.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
/* eslint-disable react/function-component-definition */
88
/* eslint-disable jsx-a11y/anchor-is-valid */
99
import React, { useState } from 'react';
10-
import { useHistory } from 'react-router-dom';
10+
import { useNavigate } from 'react-router-dom';
1111
import { useMutation } from '@apollo/client';
1212
import {
1313
FormContentRight,
@@ -26,7 +26,7 @@ import { toErrorMap } from '../../../utils/toErrorMap';
2626

2727
const FormSignup = () => {
2828
const [register, { loading, error }] = useMutation(REGISTER);
29-
const history = useHistory();
29+
const history = useNavigate();
3030

3131
const [isFullNameError, setIsFullNameError] = useState(false);
3232
const [isUsernameError, setIsUsernameError] = useState(false);

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

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,24 +5,23 @@
55
/* eslint-disable jsx-a11y/alt-text */
66
/* eslint-disable react/self-closing-comp */
77
/* eslint-disable no-unused-vars */
8+
import { useMutation, useQuery } from '@apollo/client';
89
import React, { useEffect, useState } from 'react';
9-
import { useQuery, useMutation } from '@apollo/client';
10-
import GET_USER from '../../../graphql/queries/GET_USER';
11-
import Logout from './Logout';
12-
import { SectionLayout } from '../../marginals';
1310
import { Container } from 'react-bootstrap';
11+
import { useNavigate } from 'react-router';
1412
import LOGOUT from '../../../graphql/mutation/LOGOUT';
15-
import { useHistory } from 'react-router';
16-
import { Heading, Card, Title, ButtonLogout, H1 } from './styles';
13+
import GET_USER from '../../../graphql/queries/GET_USER';
14+
import { SectionLayout } from '../../marginals';
1715
import { FormInputBtn } from '../styles';
16+
import { Card, H1, Heading, Title } from './styles';
1817

1918
function Profile() {
2019
const { data } = useQuery(GET_USER);
2120
const [logout, { data1, error }] = useMutation(LOGOUT);
2221

2322
const [user, setUser] = useState('');
2423

25-
const history = useHistory();
24+
const history = useNavigate();
2625

2726
useEffect(() => {
2827
if (data) {

‎src/components/JournalDetails/Details.js‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,38 +3,38 @@
33
import React, { useEffect } from 'react';
44

55
// Libraries
6-
import { useParams, Link, useHistory } from 'react-router-dom';
7-
import { useQuery, useMutation } from '@apollo/client';
8-
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
6+
import { useMutation, useQuery } from '@apollo/client';
97
import {
108
faBookmark,
11-
faSquareCheck,
12-
faRectangleXmark,
139
faLink,
10+
faRectangleXmark,
11+
faSquareCheck,
1412
} from '@fortawesome/free-solid-svg-icons';
13+
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
14+
import { Link, useNavigate, useParams } from 'react-router-dom';
1515

1616
// Styles
17+
import { FormInputBtn } from '../Authentication/styles';
1718
import {
18-
Head,
19-
Title,
20-
Subhead,
21-
Subhead2,
2219
Box,
20+
ButtonContainer,
21+
Head,
22+
Icon,
2323
List,
24-
Que,
2524
Misc,
25+
Que,
26+
Subhead,
27+
Subhead2,
28+
Title,
2629
UpdateContainer,
27-
Icon,
28-
ButtonContainer,
2930
} from './styles';
30-
import { FormInputBtn } from '../Authentication/styles';
3131

3232
// Components
33-
import { SectionLayout, PolicyContainer, Loader, Error } from '../marginals';
33+
import { Error, Loader, PolicyContainer, SectionLayout } from '../marginals';
3434

3535
// Graphql
36-
import GET_ALL_JOURNAL_DETAILS from '../../graphql/queries/getFullJournalByISSN';
3736
import DELETE_JOURNAL from '../../graphql/mutation/deleteJournal';
37+
import GET_ALL_JOURNAL_DETAILS from '../../graphql/queries/getFullJournalByISSN';
3838

3939
// Reducer
4040
import { useGlobalContext } from '../../context/DataContext';
@@ -44,7 +44,7 @@ function Details() {
4444
const { posts, dispatch } = useGlobalContext();
4545

4646
const { issn } = useParams();
47-
const history = useHistory();
47+
const history = useNavigate();
4848

4949
// Query/Mutation from GraphQL
5050
const { data, loading, error, refetch } = useQuery(GET_ALL_JOURNAL_DETAILS, {

‎src/context/DataContext.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@
66
/* eslint-disable arrow-body-style */
77
/* eslint-disable react/function-component-definition */
88

9-
import { React, createContext, useState, useEffect, useContext, useReducer } from 'react';
10-
import { BrowserRouter as useHistory } from 'react-router-dom';
9+
import { createContext, React, useContext, useReducer } from 'react';
1110
import reducer from './reducer';
1211

1312
const initialState = {

0 commit comments

Comments
 (0)