mirror of
https://github.com/SomboChea/ui
synced 2026-01-19 01:25:51 +07:00
Refactor(#209): Converted App component from class to func
This commit is contained in:
Priscila Oliveira
committed by
GitHub
GitHub
parent
0a48906fc8
commit
0d9232a92c
234
src/App/App.tsx
234
src/App/App.tsx
@@ -1,184 +1,106 @@
|
||||
import React, { Component, ReactElement } from 'react';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
import isNil from 'lodash/isNil';
|
||||
import { Router } from 'react-router-dom';
|
||||
|
||||
import storage from '../utils/storage';
|
||||
import { makeLogin, isTokenExpire } from '../utils/login';
|
||||
import Loading from '../components/Loading';
|
||||
import LoginModal from '../components/Login';
|
||||
import Header from '../components/Header';
|
||||
import { Container, Content } from '../components/Layout';
|
||||
import { isTokenExpire } from '../utils/login';
|
||||
import API from '../utils/api';
|
||||
import Header from '../components/Header';
|
||||
import Footer from '../components/Footer';
|
||||
import Box from '../muiComponents/Box';
|
||||
import Loading from '../components/Loading';
|
||||
import StyleBaseline from '../design-tokens/StyleBaseline';
|
||||
import { breakpoints } from '../utils/styles/media';
|
||||
|
||||
import AppRoute from './AppRoute';
|
||||
import { AppProps, AppContextProvider } from './AppContext';
|
||||
import AppContextProvider from './AppContextProvider';
|
||||
import AppRoute, { history } from './AppRoute';
|
||||
|
||||
export default class App extends Component<{}, AppProps> {
|
||||
public state: AppProps = {
|
||||
logoUrl: window.VERDACCIO_LOGO,
|
||||
user: {},
|
||||
scope: window.VERDACCIO_SCOPE || '',
|
||||
showLoginModal: false,
|
||||
isUserLoggedIn: false,
|
||||
packages: [],
|
||||
isLoading: true,
|
||||
const StyledBoxContent = styled(Box)({
|
||||
padding: 15,
|
||||
[`@media screen and (min-width: ${breakpoints.container}px)`]: {
|
||||
maxWidth: breakpoints.container,
|
||||
width: '100%',
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto',
|
||||
},
|
||||
});
|
||||
|
||||
/* eslint-disable react/jsx-max-depth */
|
||||
/* eslint-disable @typescript-eslint/explicit-function-return-type */
|
||||
/* eslint-disable react/jsx-no-bind */
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
const App: React.FC = () => {
|
||||
const [user, setUser] = useState();
|
||||
const [packages, setPackages] = useState([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
/**
|
||||
* Logouts user
|
||||
* Required by: <Header />
|
||||
*/
|
||||
const logout = () => {
|
||||
storage.removeItem('username');
|
||||
storage.removeItem('token');
|
||||
setUser(undefined);
|
||||
};
|
||||
|
||||
public componentDidMount(): void {
|
||||
this.isUserAlreadyLoggedIn();
|
||||
this.loadOnHandler();
|
||||
}
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
public componentDidUpdate(_: AppProps, prevState: AppProps): void {
|
||||
const { isUserLoggedIn } = this.state;
|
||||
if (prevState.isUserLoggedIn !== isUserLoggedIn) {
|
||||
this.loadOnHandler();
|
||||
}
|
||||
}
|
||||
|
||||
public render(): React.ReactElement<HTMLDivElement> {
|
||||
const { isLoading, isUserLoggedIn, packages, logoUrl, user, scope } = this.state;
|
||||
|
||||
const context = { isUserLoggedIn, packages, logoUrl, user, scope };
|
||||
|
||||
return (
|
||||
<Container isLoading={isLoading}>
|
||||
{isLoading ? <Loading /> : <AppContextProvider value={context}>{this.renderContent()}</AppContextProvider>}
|
||||
{this.renderLoginModal()}
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
public isUserAlreadyLoggedIn = () => {
|
||||
const checkUserAlreadyLoggedIn = () => {
|
||||
// checks for token validity
|
||||
const token = storage.getItem('token');
|
||||
const username: string = storage.getItem('username') as string;
|
||||
const username = storage.getItem('username');
|
||||
|
||||
if (isTokenExpire(token) || isNil(username)) {
|
||||
this.handleLogout();
|
||||
} else {
|
||||
this.setState({
|
||||
user: { username },
|
||||
isUserLoggedIn: true,
|
||||
});
|
||||
logout();
|
||||
return;
|
||||
}
|
||||
|
||||
setUser({ username });
|
||||
};
|
||||
|
||||
public loadOnHandler = async () => {
|
||||
const loadOnHandler = async () => {
|
||||
try {
|
||||
const packages = await API.request<any[]>('packages', 'GET');
|
||||
// @ts-ignore: FIX THIS TYPE: Type 'any[]' is not assignable to type '[]'
|
||||
this.setState({
|
||||
packages,
|
||||
isLoading: false,
|
||||
});
|
||||
const packages = await API.request('packages', 'GET');
|
||||
// FIXME add correct type for package
|
||||
setPackages(packages as never[]);
|
||||
} catch (error) {
|
||||
// FIXME: add dialog
|
||||
console.error({
|
||||
title: 'Warning',
|
||||
message: `Unable to load package list: ${error.message}`,
|
||||
});
|
||||
this.setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
public setLoading = (isLoading: boolean) =>
|
||||
this.setState({
|
||||
isLoading,
|
||||
});
|
||||
|
||||
/**
|
||||
* Toggles the login modal
|
||||
* Required by: <LoginModal /> <Header />
|
||||
*/
|
||||
public handleToggleLoginModal = () => {
|
||||
this.setState(prevState => ({
|
||||
showLoginModal: !prevState.showLoginModal,
|
||||
}));
|
||||
};
|
||||
|
||||
/**
|
||||
* handles login
|
||||
* Required by: <Header />
|
||||
*/
|
||||
public handleDoLogin = async (usernameValue: string, passwordValue: string) => {
|
||||
const { username, token, error } = await makeLogin(usernameValue, passwordValue);
|
||||
|
||||
if (username && token) {
|
||||
storage.setItem('username', username);
|
||||
storage.setItem('token', token);
|
||||
this.setLoggedUser(username);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
this.setState({
|
||||
user: {},
|
||||
error,
|
||||
});
|
||||
}
|
||||
setIsLoading(false);
|
||||
};
|
||||
|
||||
public setLoggedUser = (username: string) => {
|
||||
this.setState({
|
||||
user: {
|
||||
username,
|
||||
},
|
||||
isUserLoggedIn: true, // close login modal after successful login
|
||||
showLoginModal: false, // set isUserLoggedIn to true
|
||||
});
|
||||
};
|
||||
useEffect(() => {
|
||||
checkUserAlreadyLoggedIn();
|
||||
loadOnHandler();
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* Logouts user
|
||||
* Required by: <Header />
|
||||
*/
|
||||
public handleLogout = () => {
|
||||
storage.removeItem('username');
|
||||
storage.removeItem('token');
|
||||
this.setState({
|
||||
user: {},
|
||||
isUserLoggedIn: false,
|
||||
});
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<StyleBaseline />
|
||||
<Box display="flex" flexDirection="column" height="100%">
|
||||
{isLoading ? (
|
||||
<Loading />
|
||||
) : (
|
||||
<>
|
||||
<Router history={history}>
|
||||
<AppContextProvider packages={packages} user={user}>
|
||||
<Header />
|
||||
<StyledBoxContent flexGrow={1}>
|
||||
<AppRoute />
|
||||
</StyledBoxContent>
|
||||
</AppContextProvider>
|
||||
</Router>
|
||||
<Footer />
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
public renderLoginModal = (): ReactElement<HTMLElement> => {
|
||||
const { error, showLoginModal } = this.state;
|
||||
return (
|
||||
<LoginModal
|
||||
error={error}
|
||||
onCancel={this.handleToggleLoginModal}
|
||||
onSubmit={this.handleDoLogin}
|
||||
visibility={showLoginModal}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
public renderContent = (): ReactElement<HTMLElement> => {
|
||||
return (
|
||||
<>
|
||||
<Content>
|
||||
<AppRoute>{this.renderHeader()}</AppRoute>
|
||||
</Content>
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
public renderHeader = (): ReactElement<HTMLElement> => {
|
||||
const {
|
||||
logoUrl,
|
||||
user: { username },
|
||||
scope,
|
||||
} = this.state;
|
||||
|
||||
return (
|
||||
<Header
|
||||
logo={logoUrl}
|
||||
onLogout={this.handleLogout}
|
||||
onToggleLoginModal={this.handleToggleLoginModal}
|
||||
scope={scope}
|
||||
username={username}
|
||||
/>
|
||||
);
|
||||
};
|
||||
}
|
||||
export default App;
|
||||
|
||||
Reference in New Issue
Block a user