Skip to content

Commit

Permalink
Revert "Merge pull request #192 from glific/feature/Authentication"
Browse files Browse the repository at this point in the history 
This reverts commit b70d45b, reversing
changes made to 30d6ec1.
  • Loading branch information
@claalmve
claalmve committed Jul 14, 2020
1 parent c09fd1a commit 92d69b6
Show file tree
Hide file tree
Showing 12 changed files with 65 additions and 162 deletions.
1 change: 0 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
"dependencies": {
"@absinthe/socket": "^0.2.1",
"@absinthe/socket-apollo-link": "^0.2.1",
"@apollo/link-context": "^2.0.0-beta.3",
"@apollo/client": "^3.0.0-rc.12",
"@apollo/link-ws": "^2.0.0-beta.3",
"@jumpn/utils-graphql": "^0.6.0",
Expand Down
18 changes: 6 additions & 12 deletions src/App.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,16 @@
import React from 'react';
import { shallow, mount } from 'enzyme';
import { mount } from 'enzyme';
import { MemoryRouter } from 'react-router-dom';
import { MockedProvider } from '@apollo/client/testing';
import { Login } from './components/pages/Login/Login';

import App from './App';
import Chat from './containers/Chat/Chat';
import { CONVERSATION_MOCKS } from './containers/Chat/Chat.test.helper';

const mocks = CONVERSATION_MOCKS;

describe('<App /> ', () => {
test('it should render <App /> component correctly', () => {
const wrapper = shallow(<App />);
expect(wrapper.exists()).toBe(true);
});

test('it should render <Login /> component by default', () => {
test('it should render <Chat /> component by default', () => {
const wrapper = mount(
<MockedProvider mocks={mocks} addTypename={false}>
<MemoryRouter initialEntries={['/']}>
Expand All @@ -24,14 +19,13 @@ describe('<App /> ', () => {
</MockedProvider>
);

expect(wrapper.find(Login)).toHaveLength(1);
expect(wrapper.find(Chat)).toHaveLength(1);
});

test('it should render <Chat /> component if session is active', () => {
localStorage.setItem('session', '{"access_token":"access","renewal_token":"renew"}');
test('it should render <Chat /> component correctly if params are passed', () => {
const wrapper = mount(
<MockedProvider mocks={mocks} addTypename={false}>
<MemoryRouter>
<MemoryRouter initialEntries={['/chat/1']}>
<App />
</MemoryRouter>
</MockedProvider>
Expand Down
86 changes: 27 additions & 59 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,78 +1,46 @@
import React, { useState } from 'react';
import { Switch, RouteComponentProps, Redirect, Route } from 'react-router-dom';
import React from 'react';
import { Switch, Route, RouteComponentProps, Redirect } from 'react-router-dom';
import './assets/fonts/fonts.css';
import { Layout } from './components/UI/Layout/Layout';
import { Tag } from './containers/Tag/Tag';
import { TagPage } from './components/pages/TagPage/TagPage';
// import ChatPage from './components/pages/ChatPage/ChatPage';
import { Registration } from './components/pages/Registration/Registration';
import { ConfirmOTP } from './components/pages/ConfirmOTP/ConfirmOTP';
import { Login } from './components/pages/Login/Login';
import MessageTemplatePage from './components/pages/MessageTemplatePage/MessageTemplatePage';
import { MessageTemplate } from './containers/MessageTemplate/MessageTemplate';
import Chat from './containers/Chat/Chat';
import styles from './App.module.css';
import gqlClient from './config/apolloclient';
import { ApolloProvider } from '@apollo/client';
import { SessionContext } from './context/session';

const App = () => {
const session = localStorage.getItem('session');
const [authenticated, setAuthenticated] = useState(session ? true : false);

const values = {
authenticated: authenticated,
setAuthenticated: (value: any) => {
setAuthenticated(value);
},
};

const accessToken = session ? JSON.parse(session).access_token : null;
const defaultRedirect = () => <Redirect to="/chat" />;
const client = authenticated ? gqlClient(accessToken) : gqlClient(null);
let routes;

if (authenticated) {
routes = (
<div className={styles.App}>
<Layout>
<Switch>
<Route path="/tag" exact component={TagPage} />
<Route path="/tag/add" exact component={Tag} />
<Route path="/tag/:id/edit" exact component={Tag} />
{/* Doesn't this error without a passed in `contactId`? */}

<Route path="/speed-send" exact component={MessageTemplatePage} />
<Route path="/speed-send/add" exact component={MessageTemplate} />
<Route path="/speed-send/:id/edit" exact component={MessageTemplate} />
<Route path="/chat" exact component={Chat} />
{/* This part isn't working properly */}
<Route
exact
path="/chat/:contactId"
component={({ match }: RouteComponentProps<{ contactId: any }>) => (
<Chat contactId={match.params.contactId} />
)}
/>
<Route path="/" render={defaultRedirect} />
</Switch>
</Layout>
</div>
);
} else {
routes = (
<Switch>
<Route path="/login" exact component={Login} />
<Route path="/registration" exact component={Registration} />
<Route path="/confirmotp" exact component={ConfirmOTP} />
<Route path="/" render={() => <Redirect to="/login" />} />
</Switch>
);
}

return (
<SessionContext.Provider value={values}>
<ApolloProvider client={client}>{routes}</ApolloProvider>
</SessionContext.Provider>
<div className={styles.App}>
<Layout>
<Switch>
<Route path="/registration" exact component={Registration} />
<Route path="/confirmotp" exact component={ConfirmOTP} />
<Route path="/login" exact component={Login} />
<Route path="/tag" exact component={TagPage} />
<Route path="/tag/add" exact component={Tag} />
<Route path="/tag/:id/edit" exact component={Tag} />
<Route path="/speed-send" exact component={MessageTemplatePage} />
<Route path="/speed-send/add" exact component={MessageTemplate} />
<Route path="/speed-send/:id/edit" exact component={MessageTemplate} />
<Route path="/chat" exact component={Chat} />
<Route
exact
path="/chat/:contactId"
component={({ match }: RouteComponentProps<{ contactId: any }>) => (
<Chat contactId={match.params.contactId} />
)}
/>
</Switch>
<Route exact path="/" render={defaultRedirect} />
</Layout>
</div>
);
};

Expand Down
3 changes: 2 additions & 1 deletion src/common/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,5 @@ export const REACT_APP_GLIFIC_REGISTRATION_API =
process.env.REACT_APP_GLIFIC_API + '/v1/registration';
export const REACT_APP_GLIFIC_AUTHENTICATION_API =
process.env.REACT_APP_GLIFIC_API + '/v1/registration/send_otp';
export const USER_SESSION = process.env.REACT_APP_GLIFIC_API + '/v1/session';
export const REACT_APP_GLIFIC_NEW_SESSION_EXISTING_USER =
process.env.REACT_APP_GLIFIC_API + '/v1/session';
39 changes: 1 addition & 38 deletions src/components/UI/Layout/Navigation/SideDrawer/SideDrawer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState, useContext } from 'react';
import React, { useState } from 'react';
import {
Hidden,
Drawer,
Expand All @@ -8,16 +8,13 @@ import {
Divider,
Toolbar,
Typography,
Button,
} from '@material-ui/core';
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
import axios from 'axios';
import clsx from 'clsx';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import SideMenus from '../SideMenus/SideMenus';
import * as constants from '../../../../../common/constants';
import { SessionContext } from '../../../../../context/session';

export interface SideDrawerProps {}

Expand Down Expand Up @@ -87,17 +84,10 @@ const useStyles = makeStyles((theme: Theme) =>
closedIcon: {
margin: '12px 12px 12px 15px',
},
LogoutButton: {
position: 'absolute',
bottom: '10px',
left: '20px',
width: 'fit-content',
},
})
);

export const SideDrawer: React.SFC<SideDrawerProps> = (props) => {
const { setAuthenticated } = useContext(SessionContext);
const classes = useStyles();
const [mobileOpen, setMobileOpen] = useState(false);
const [fullOpen, setFullOpen] = React.useState(true);
Expand Down Expand Up @@ -138,25 +128,6 @@ export const SideDrawer: React.SFC<SideDrawerProps> = (props) => {

const container = window !== undefined ? () => window.document.body : undefined;

const session = localStorage.getItem('session');
const accessToken = session ? JSON.parse(session).access_token : null;

const handleLogout = () => {
axios
.delete(constants.USER_SESSION, {
headers: {
Authorization: accessToken,
},
})
.then((response: any) => {
localStorage.removeItem('session');
setAuthenticated(false);
})
.catch(function (error: any) {
console.log(error);
});
};

return (
<nav
className={clsx({
Expand Down Expand Up @@ -199,14 +170,6 @@ export const SideDrawer: React.SFC<SideDrawerProps> = (props) => {
// open
>
{drawer}
<Button
color="secondary"
variant="contained"
className={classes.LogoutButton}
onClick={handleLogout}
>
Log Out
</Button>
</Drawer>
</Hidden>
</nav>
Expand Down
6 changes: 1 addition & 5 deletions src/components/pages/ConfirmOTP/ConfirmOTP.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState, useContext } from 'react';
import React, { useState } from 'react';
import styles from './ConfirmOTP.module.css';
import { Typography, FormHelperText } from '@material-ui/core';
import InputLabel from '@material-ui/core/InputLabel';
Expand All @@ -9,14 +9,12 @@ import clsx from 'clsx';
import axios from 'axios';
import { REACT_APP_GLIFIC_REGISTRATION_API } from '../../../common/constants';
import { Redirect } from 'react-router-dom';
import { SessionContext } from '../../../context/session';

export interface ConfirmOTPProps {
location: any;
}

export const ConfirmOTP: React.SFC<ConfirmOTPProps> = (props) => {
const { setAuthenticated } = useContext(SessionContext);
const [userAuthCode, setUserAuthCode] = useState('');
const [tokenResponse, setTokenResponse] = useState('');
const [authError, setAuthError] = useState(false);
Expand All @@ -41,8 +39,6 @@ export const ConfirmOTP: React.SFC<ConfirmOTPProps> = (props) => {
})
.then(function (response: any) {
const responseString = JSON.stringify(response.data.data);
localStorage.setItem('session', responseString);
setAuthenticated(true);
setTokenResponse(responseString);
})
.catch(function (error: any) {
Expand Down
14 changes: 5 additions & 9 deletions src/components/pages/Login/Login.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState, useContext } from 'react';
import React, { useState } from 'react';
import { Redirect } from 'react-router-dom';
import { Typography, FormHelperText } from '@material-ui/core';
import FormControl from '@material-ui/core/FormControl';
Expand All @@ -10,15 +10,13 @@ import Visibility from '@material-ui/icons/Visibility';
import VisibilityOff from '@material-ui/icons/VisibilityOff';
import { Button } from '../../UI/Form/Button/Button';
import styles from './Login.module.css';
import { USER_SESSION } from '../../../common/constants';
import { REACT_APP_GLIFIC_NEW_SESSION_EXISTING_USER } from '../../../common/constants';
import clsx from 'clsx';
import axios from 'axios';
import { SessionContext } from '../../../context/session';

export interface LoginProps {}

export const Login: React.SFC<LoginProps> = () => {
const { setAuthenticated } = useContext(SessionContext);
const [password, setPassword] = useState('');
const [phoneNumber, setPhoneNumber] = useState('');
const [showPassword, setShowPassword] = useState(false);
Expand Down Expand Up @@ -60,19 +58,17 @@ export const Login: React.SFC<LoginProps> = () => {
handleInputErrors();
if (!passwordError && !phoneNumberError) {
axios
.post(USER_SESSION, {
.post(REACT_APP_GLIFIC_NEW_SESSION_EXISTING_USER, {
user: {
phone: phoneNumber,
password: password,
},
})
.then((response: any) => {
.then(function (response: any) {
const responseString = JSON.stringify(response.data.data);
localStorage.setItem('session', responseString);
setAuthenticated(true);
setSessionToken(responseString);
})
.catch((error: any) => {
.catch(function (error: any) {
setInvalidLogin(true);
});
}
Expand Down
4 changes: 2 additions & 2 deletions src/components/pages/Registration/Registration.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,10 +93,10 @@ export const Registration: React.SFC<RegistrationProps> = () => {
phone: phoneNumber,
},
})
.then((response: any) => {
.then(function (response: any) {
setAuthMessage(response);
})
.catch((error: any) => {
.catch(function (error: any) {
console.log(error);
});
}
Expand Down
33 changes: 10 additions & 23 deletions src/config/apolloclient.ts
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,18 @@
import { ApolloClient, InMemoryCache, createHttpLink, split, from } from '@apollo/client';
import { ApolloClient, InMemoryCache, createHttpLink, split } from '@apollo/client';
import absinthe from './absinthe';
import { URI } from '.';
import { setContext } from '@apollo/link-context';

const subscribe = require('@jumpn/utils-graphql');

const gqlClient = (auth_token: string | null) => {
const authLink = setContext((_, { headers }) => {
return {
headers: {
...headers,
Authorization: auth_token ? auth_token : '',
},
};
});
const link = split(
(operation) => subscribe.hasSubscription(operation.query),
absinthe,
createHttpLink({ uri: URI })
);

const httpLink = createHttpLink({ uri: URI });
const gqlClient = new ApolloClient({
link,
cache: new InMemoryCache(),
});

const link = split(
(operation) => subscribe.hasSubscription(operation.query),
absinthe,
authLink.concat(httpLink)
);

return new ApolloClient({
link,
cache: new InMemoryCache(),
});
};
export default gqlClient;
6 changes: 0 additions & 6 deletions src/context/session.ts
View file

This file was deleted.

Loading

0 comments on commit 92d69b6

Please sign in to comment.