Skip to content

Commit c189b2e

Browse files
padmajabholpadmajabhol
authored
Merge pull request #192 from padmajabhol/auth-integration
Integrate graphQL for auth component
2 parents 67273b5 + fb87f39 commit c189b2e

File tree

8 files changed

+429
-92
lines changed

8 files changed

+429
-92
lines changed

‎package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6+
"@apollo/client": "^3.6.9",
67
"@babel/plugin-proposal-decorators": "^7.16.7",
78
"@fortawesome/fontawesome-svg-core": "^6.1.1",
89
"@fortawesome/free-brands-svg-icons": "^6.1.2",
@@ -11,12 +12,14 @@
1112
"@mdx-js/loader": "^1.6.22",
1213
"@testing-library/jest-dom": "^5.11.4",
1314
"@testing-library/user-event": "^12.1.10",
15+
"apollo-link-error": "^1.1.13",
1416
"axios": "^0.27.2",
1517
"bootstrap": "^5.0.1",
1618
"date-fns": "^2.29.1",
1719
"eslint-plugin-import": "^2.26.0",
1820
"eslint-plugin-markdown": "^2.2.1",
1921
"eslint-plugin-react-hooks": "^4.3.0",
22+
"graphql": "^16.6.0",
2023
"react": "^17.0.2",
2124
"react-bootstrap": "^1.6.1",
2225
"react-dom": "^17.0.2",

‎src/App.js

Lines changed: 53 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
1+
/* eslint-disable array-callback-return */
2+
/* eslint-disable no-alert */
13
/* eslint-disable react-hooks/exhaustive-deps */
24
/* eslint-disable arrow-body-style */
35
/* eslint-disable max-len */
46
/* eslint-disable no-unused-vars */
57
import { React, useEffect, useState } from 'react';
68
import ReactDOM from 'react-dom';
9+
import { ApolloClient, InMemoryCache, ApolloProvider, HttpLink, from } from '@apollo/client';
10+
import { onError } from '@apollo/client/link/error';
711
import './index.css';
812
import 'bootstrap/dist/css/bootstrap.min.css';
913
import { BrowserRouter as Router, Switch, Route, Redirect, useHistory } from 'react-router-dom';
@@ -16,40 +20,57 @@ import Edit from './components/EditJournal/Edit';
1620
import useAxiosFetch from './hooks/useAxiosFetch';
1721
import { DataProvider } from './context/DataContext';
1822

23+
const errorLink = onError(({ graphqlErrors, networkError }) => {
24+
if (graphqlErrors) {
25+
graphqlErrors.map(({ message, location, path }) => {
26+
alert(`Graphql error ${message}`);
27+
});
28+
}
29+
});
30+
31+
const link = from([errorLink, new HttpLink({ uri: 'http://localhost:4000/graphql' })]);
32+
33+
const client = new ApolloClient({
34+
cache: new InMemoryCache(),
35+
link,
36+
});
37+
1938
function App() {
2039
return (
21-
<Layout>
22-
<DataProvider>
23-
<Switch>
24-
<Route exact path='/'>
25-
<Home />
26-
</Route>
27-
<Route path='/manifesto'>
28-
<Manifesto />
29-
</Route>
30-
<Route path='/journal'>
31-
<Journal />
32-
</Route>
33-
<Route exact path='/addjournal'>
34-
<AddJournal />
35-
</Route>
36-
<Route path='/edit/:id'>
37-
<Edit />
38-
</Route>
39-
<Route path='/policy/:id'>
40-
<JournalDetails />
41-
</Route>
42-
<Route path='/Signup'>
43-
<Auth />
44-
</Route>
45-
<Route path='/Login'>
46-
<Login />
47-
</Route>
48-
<Redirect to='/' />
49-
</Switch>
50-
<Footer />
51-
</DataProvider>
52-
</Layout>
40+
<ApolloProvider client={client}>
41+
<Layout>
42+
<DataProvider>
43+
<Switch>
44+
<Route exact path='/'>
45+
<Home />
46+
</Route>
47+
<Route path='/manifesto'>
48+
<Manifesto />
49+
</Route>
50+
<Route path='/journal'>
51+
<Journal />
52+
</Route>
53+
<Route exact path='/addjournal'>
54+
<AddJournal />
55+
</Route>
56+
<Route path='/edit/:id'>
57+
<Edit />
58+
</Route>
59+
<Route path='/policy/:id'>
60+
<JournalDetails />
61+
</Route>
62+
<Route path='/Signup'>
63+
<Auth />
64+
</Route>
65+
<Route path='/Login'>
66+
<Login />
67+
</Route>
68+
<Redirect to='/' />
69+
</Switch>
70+
<Footer />
71+
</DataProvider>
72+
</Layout>
73+
</ApolloProvider>
5374
);
5475
}
5576

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

Lines changed: 56 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1+
/* eslint-disable no-unused-vars */
12
/* eslint-disable max-len */
23
/* eslint-disable import/extensions */
34
/* eslint-disable jsx-a11y/label-has-associated-control */
45
/* eslint-disable react/function-component-definition */
56
/* eslint-disable jsx-a11y/anchor-is-valid */
6-
import React from 'react';
7-
import { Link } from 'react-router-dom';
7+
import React, { useState } from 'react';
8+
import { Link, useHistory } from 'react-router-dom';
9+
import { useMutation } from '@apollo/client';
810
import useFormLogin from './useFormLogin';
911
import validateLoginInfo from './validateLoginInfo.js';
1012
import {
@@ -20,12 +22,57 @@ import {
2022
FormH2,
2123
} from './styles';
2224
import { signup } from '../../../config/content';
25+
import LOGIN from '../../../graphql/mutation/login';
26+
import { toErrorMap } from '../../../utils/toErrorMap';
2327

24-
const FormLogin = ({ submitForm }) => {
25-
const { handleChange, values, handleSubmit, errors } = useFormLogin(
26-
submitForm,
27-
validateLoginInfo,
28-
);
28+
const FormLogin = () => {
29+
const [login, { loading, error }] = useMutation(LOGIN);
30+
const history = useHistory();
31+
32+
const [isUsernameOrEmailError, setIsUsernameOrEmailError] = useState(false);
33+
const [isPasswordError, setIsPasswordError] = useState(false);
34+
const [usernameOrEmailErrorMessage, setUsernameOrEmailErrorMessage] = useState('');
35+
const [passwordErrorMessage, setPasswordErrorMessage] = useState('');
36+
37+
const resetErrorStateValues = () => {
38+
setIsUsernameOrEmailError(false);
39+
setIsPasswordError(false);
40+
setUsernameOrEmailErrorMessage('');
41+
setPasswordErrorMessage('');
42+
};
43+
44+
const handleSubmit = async (event) => {
45+
event.preventDefault();
46+
resetErrorStateValues();
47+
const data = new FormData(event.currentTarget);
48+
49+
const usernameOrEmail = data.get('email');
50+
const password = data.get('password');
51+
52+
const response = await login({
53+
variables: {
54+
userInfo: { usernameOrEmail, password },
55+
},
56+
});
57+
58+
if (response.data?.login.errors) {
59+
const errorMapped = toErrorMap(response.data.login.errors);
60+
// console.log(toErrorMap(response.data.login.errors));
61+
if (errorMapped.usernameOrEmail) {
62+
setUsernameOrEmailErrorMessage(errorMapped.usernameOrEmail);
63+
setIsUsernameOrEmailError(true);
64+
}
65+
66+
if (errorMapped.password) {
67+
setPasswordErrorMessage(errorMapped.password);
68+
setIsPasswordError(true);
69+
}
70+
} else if (response.data?.login.user) {
71+
// console.log('Login Successful');
72+
resetErrorStateValues();
73+
history.push('/journal');
74+
}
75+
};
2976

3077
return (
3178
<FormContentRight>
@@ -34,25 +81,11 @@ const FormLogin = ({ submitForm }) => {
3481
<FormH2>{signup.head2}</FormH2>
3582
<FormInputs>
3683
<FormLabel htmlFor='email'>{signup.labelEmail}</FormLabel>
37-
<FormInput
38-
id='email'
39-
type='email'
40-
name='email'
41-
value={values.email}
42-
onChange={handleChange}
43-
/>
44-
{errors.email && <FormInputsP>{errors.email}</FormInputsP>}
84+
<FormInput id='email' label='Email Address' type='email' name='email' />
4585
</FormInputs>
4686
<FormInputs>
4787
<FormLabel htmlFor='password'>{signup.labelPassword}</FormLabel>
48-
<FormInput
49-
id='password'
50-
type='password'
51-
name='password'
52-
value={values.password}
53-
onChange={handleChange}
54-
/>
55-
{errors.password && <FormInputsP>{errors.password}</FormInputsP>}
88+
<FormInput id='password' label='Password' type='password' name='password' />
5689
</FormInputs>
5790
<ButtonContainer>
5891
<FormInputBtn type='submit'>{signup.buttonLogin}</FormInputBtn>

0 commit comments

Comments
 (0)