Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Lazy loading #18

Open
wants to merge 5 commits into
base: lazy-loading
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion .babelrc
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
{
"presets": ["es2015", "react"]
"plugins": [
"babel-plugin-syntax-dynamic-import"
],
"presets": [
"es2015",
"react"
]
}
5,959 changes: 3,383 additions & 2,576 deletions package-lock.json

Large diffs are not rendered by default.

14 changes: 8 additions & 6 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,30 +15,32 @@
"author": "gaurav sharma",
"license": "ISC",
"dependencies": {
"@loadable/component": "^5.14.1",
"@material-ui/core": "^4.11.0",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "^4.0.0-alpha.56",
"axios": "^0.19.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"bootstrap": "^4.1.3",
"dotenv": "^6.1.0",
"jquery": "^3.5.0",
"moment": "^2.22.2",
"moment-duration-format": "^2.2.2",
"prop-types": "^15.6.2",
"react": "^15.6.1",
"react": "^16.13.1",
"react-csv-reader": "^1.2.2",
"react-dom": "^15.6.1",
"react-dom": "^16.13.1",
"react-favicon": "0.0.13",
"react-fontawesome": "^1.6.1",
"react-modal": "^3.6.1",
"react-redux": "^5.1.0",
"react-router": "^3.2.1",
"react-router-dom": "^5.0.0",
"react-router-redux": "^4.0.8",
"react-select": "^2.1.2",
"react-simplemde-editor": "^4.1.3",
"react-toastify": "^3.4.3",
"reactstrap": "^5.0.0",
"redux": "^3.7.2",
"redux-devtools": "^3.4.1",
"redux-logger": "^3.0.6",
Expand Down
30 changes: 11 additions & 19 deletions src/client/app/components/AccountHeader/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* the account index component
*
*/
import React, { Component } from 'react';
import React from 'react';

import { browserHistory } from 'react-router';
// import Favicon from 'react-favicon';
Expand All @@ -11,28 +11,20 @@ import { browserHistory } from 'react-router';
import './index.scss';
// import favicon from '../../assets/images/favicon.png';

export default class AccountHeader extends Component {

constructor(props) {
super(props);

this.handleLogout = this.handleLogout.bind(this);
}

handleLogout(e) {
export default (props) => {
const handleLogout = (e) => {
e.preventDefault();
const { type } = this.props;
const { type } = props;
localStorage.removeItem('adminAccessToken');
window.location = '/';

}
render() {
return <section className='account-header'>
{/* <Favicon url={favicon}/> */}
{/* <img src={Logo} height={30}/> */}
<h2 className='logo-text-account'>Social</h2>
<p className='text-center' style={{ position: 'absolute', width: '100%', top: '0', marginTop: '10px'}}>Admin</p>
<span><a href onClick={this.handleLogout}>Logout</a></span>
</section>;
}
return <section className='account-header'>
{/* <Favicon url={favicon}/> */}
{/* <img src={Logo} height={30}/> */}
<h2 className='logo-text-account'>Social</h2>
<p className='text-center' style={{ position: 'absolute', width: '100%', top: '0', marginTop: '10px' }}>Admin</p>
<span><a href onClick={handleLogout}>Logout</a></span>
</section>;
}
25 changes: 11 additions & 14 deletions src/client/app/components/Image/index.js
Original file line number Diff line number Diff line change
@@ -1,26 +1,23 @@
/**
* This component represents a sample image component for application
*/
import React, { Component } from 'react';
import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';

import DefaultImage from '../../assets/images/profile.png';
import './index.scss';

class CustomImage extends Component {
constructor(props) {
super(props);
this.state = {
image: this.props.image || DefaultImage
};
}

render() {
const classNames = `litnite-image ${this.props.className && this.props.className}`;
const { width=50, height=50 } = this.props;
const { image } = this.state;
return <img className={classNames} src={image} width={width} height={50} onError={() => this.setState({ image: DefaultImage })}/>
}
const CustomImage = (props) => {
const [image, setImage] = useState("")
useEffect(() => {
setImage(props.image || DefaultImage)
}, [props.image])

const classNames = `litnite-image ${props.className && props.className}`;
const { width = 50, height = 50 } = props;

return <img className={classNames} src={image} width={width} height={50} onError={() => setState({ image: DefaultImage })} />
}

CustomImage.propTypes = {
Expand Down
16 changes: 5 additions & 11 deletions src/client/app/components/ImageThumbnail/index.js
Original file line number Diff line number Diff line change
@@ -1,20 +1,14 @@
/**
* this component represents the thumbnail image
*/
import React, { Component } from 'react';
import React from 'react';

//import assets
import EmptyThumbnail from '../../assets/images/profile.png';
import './index.scss';

export default class ImageThumbnail extends Component {
constructor(props) {
super(props);
}

render() {
const { image=EmptyThumbnail, width=200, height=200, className } = this.props;
const classes = `thumbnail-image ${className ? className : ''}`;
return <img src={image} width={width} height={height} className={classes}/>
}
export default (props) => {
const { image = EmptyThumbnail, width = 200, height = 200, className } = this.props;
const classes = `thumbnail-image ${className ? className : ''}`;
return <img src={image} width={width} height={height} className={classes} />
}
25 changes: 12 additions & 13 deletions src/client/app/components/NotFoundPage/index.js
Original file line number Diff line number Diff line change
@@ -1,17 +1,16 @@
import React, { Component } from 'react';
import { Container, Row, Col } from 'reactstrap';
import React from 'react';
import { Link } from 'react-router';

import './index.scss';

export default () =>
<Container className='container' id='notfoundcontainer'>
<Row>
<Col className="">
<h1 className="not-found">404</h1>
<p className="subtext">Oooooops!!!</p>
<p>The page seems to have evaporated.</p>
<Link to={"/"}>Continue to Homepage</Link>
</Col>
</Row>
</Container>
export default () =>
<div className='container' id='notfoundcontainer'>


<h1 className="not-found">404</h1>
<p className="subtext">Oooooops!!!</p>
<p>The page seems to have evaporated.</p>
<Link to={"/"}>Continue to Homepage</Link>


</div>
10 changes: 9 additions & 1 deletion src/client/app/components/NotFoundPage/index.scss
Original file line number Diff line number Diff line change
@@ -1,25 +1,33 @@
@import "../../styles/globals";

#notfoundcontainer {
margin-top: $global_component_margin;

border-radius: $global_border_radius;
padding: $global_padding;
color: $global_black_color;
background: $global_white_color;
margin: 0 auto !important;
text-align: center;

a {
color: $theme_color_1;


}



.not-found {
font-size: 20vmax;
color: $theme_color_1;
opacity: 0.3;

}

.subtext {
font-size: 3vmax;
opacity: 0.7;

}
}

16 changes: 5 additions & 11 deletions src/client/app/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,12 @@ import React from 'react';
import { render } from 'react-dom';
import getRoutes from './routes/';

import 'bootstrap/dist/css/bootstrap.css';
import 'jquery/dist/jquery.js';
import 'bootstrap/dist/js/bootstrap.js';
import './styles/index.scss';
class App extends React.Component {
constructor (props) {
super (props);
}

render () {
return getRoutes();
}

const App = () => {
return getRoutes()
}

render (<App/>, document.getElementById ('app'));

render(<App />, document.getElementById('app'));
94 changes: 42 additions & 52 deletions src/client/app/routes/Account/index.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React, { Component } from 'react';
import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import FontAwesome from 'react-fontawesome';
import { browserHistory } from 'react-router';

import { navigationIndexer } from '../../constants';
Expand All @@ -10,75 +9,66 @@ import Dashboard from '../Dashboard';
import Image from '../../components/Image';
import logo from '../../assets/images/logo.png';
import './index.scss';
import ExitToAppIcon from '@material-ui/icons/ExitToApp';

class Account extends Component {
constructor(props) {
super(props);
const Account = (props) => {

this.handleSwitch = this.handleSwitch.bind(this);
this.handleLogout = this.handleLogout.bind(this);
}

handleSwitch(e) {
const { triggerSwitchNavigation } = this.props;
e.preventDefault();
const name = e.target.name || e.target.id;
browserHistory.push(`/${name}`);
triggerSwitchNavigation(navigationIndexer[name]);
}

componentWillMount() {
useEffect(() => {
// if (!localStorage.getItem('accessToken')) {
// window.location = '/';
// }
}

componentDidMount() {
document.title = 'Admin Account';
}, [])

const handleSwitch = (e) => {
const { triggerSwitchNavigation } = props;
e.preventDefault();
const name = e.target.name || e.target.id;
browserHistory.push(`/${name}`);
triggerSwitchNavigation(navigationIndexer[name]);
}

handleLogout(e) {
const handleLogout = (e) => {
e.preventDefault();
const { type } = this.props;
const { type } = props;
localStorage.removeItem('data');
localStorage.removeItem('accessToken');
window.location = '/';

}

render() {
const { active } = this.props;
return <section>
<section className='leftNavigation'>
<section className="navigationMenu">
<p className='text-center'><Image image={logo} /></p>
{/* <p className="navigationHeader">LOGGED USER</p>
const { active } = props;
return <section>
<section className='leftNavigation'>
<section className="navigationMenu">
<p className='text-center'><Image image={logo} /></p>
{/* <p className="navigationHeader">LOGGED USER</p>
<i style={{ color: 'silver' }}>{localStorage.getItem('user')}</i> */}
</section>
<section className="navigationMenu">
<p className="navigationHeader">Dashboard</p>
<button name='dashboard' className={`navigationItem ${active === navigationIndexer.dashboard ? 'activeItem' : ''}`} onClick={this.handleSwitch}>
<FontAwesome id='events' name="events" onClick={this.handleSwitch} />&nbsp; Dashboard
</button>
</section>
<section className="navigationMenu">
<p className="navigationHeader">Contact Us</p>
<button name='contactUs' className={`navigationItem ${active === navigationIndexer.contactUs ? 'activeItem' : ''}`} onClick={this.handleSwitch}>
<FontAwesome id='tournament' name="tournament" onClick={this.handleSwitch} />&nbsp; Contact Us
</section>
<section className="navigationMenu">
<p className="navigationHeader">Dashboard</p>
<button name='dashboard' className={`navigationItem ${active === navigationIndexer.dashboard ? 'activeItem' : ''}`} onClick={handleSwitch}>
{/* <FontAwesome id='events' name="events" onClick={handleSwitch} /> */}
&nbsp; Dashboard
</button>
</section>
<section className="navigationMenu">
<p className="navigationHeader">Account</p>
<button name='logout' className={`navigationItem ${active === navigationIndexer.constants ? 'activeItem' : ''}`} onClick={this.handleLogout}>
<FontAwesome id='logout' name="sign-out" onClick={this.handleSwitch} />&nbsp; Logout
</section>
<section className="navigationMenu">
<p className="navigationHeader">Contact Us</p>
<button name='contactUs' className={`navigationItem ${active === navigationIndexer.contactUs ? 'activeItem' : ''}`} onClick={handleSwitch}>
{/* <FontAwesome id='tournament' name="tournament" onClick={handleSwitch} /> */}
&nbsp; Contact Us
</button>
</section>
</section>
<section className='dynamicContainer'>
{this.props.children || <Dashboard />}
<section className="navigationMenu">
<p className="navigationHeader">Account</p>
<button name='logout' className={`navigationItem ${active === navigationIndexer.constants ? 'activeItem' : ''}`} onClick={handleLogout}>
<span className="content-center"><ExitToAppIcon fontSize="small" id='logout' name="sign-out" onClick={handleSwitch} />&nbsp; Logout</span>
</button>
</section>
</section>;
}
</section>
<section className='dynamicContainer'>
{props.children || <Dashboard />}
</section>
</section>;
}

const mapDispatchToProps = dispatch => {
Expand Down
Loading