Gecko [ gandhischool.edu.np ]

Name	Size	Permission
Alert.tsx	2.75 KB	-rw-r--r--
DynamicInput.tsx	5.14 KB	-rw-r--r--
Image.tsx	542 B	-rw-r--r--
Pagination.tsx	3.49 KB	-rw-r--r--
index.tsx	86 B	-rw-r--r--
style.css	3.11 KB	-rw-r--r--

Code Editor : Alert.tsx

import * as React from 'react';
import { connect } from 'react-redux';
import { compose } from 'redux';
import { actions as globalActions } from 'service/global';
import './style.css'
import { withAlert } from 'react-alert';

interface AlertComponentProps {
    showNotifier:any;
    alert?:any;
    notifierOptions:any;
    resetNotifier:any;
    loading:boolean;
    loadingText:any;
}

interface AlertComponentState {
    [key: string]: any;
}

class Alert extends React.Component<AlertComponentProps, AlertComponentState> {
    public constructor(props) {
        super(props);
        this.state = {
        };
    }

public componentDidMount(){
    }

public componentDidUpdate(prevProps) {
        const { showNotifier,alert,notifierOptions,resetNotifier } = this.props;
        if (prevProps.showNotifier !== showNotifier) {
          if(showNotifier === true){
  
              if(notifierOptions.variant === 'success')
                alert.success(notifierOptions.message);
  
              else if(notifierOptions.variant === 'error'){
                alert.error(notifierOptions.message);
              }
  
              else if(notifierOptions.variant === 'info')
                alert.info(notifierOptions.message);
  
              resetNotifier();
            }
        }
    }
    public render() {
        const { loading,loadingText } = this.props;
        return (
                <React.Fragment>
                    {loading && (
                        <div className="fond">
                            <div className="contener_general">
                                <div className="contener_mixte"><div className="ballcolor ball_1">&nbsp;</div></div>
                                <div className="contener_mixte"><div className="ballcolor ball_2">&nbsp;</div></div>
                                <div className="contener_mixte"><div className="ballcolor ball_3">&nbsp;</div></div>
                                <div className="contener_mixte"><div className="ballcolor ball_4">&nbsp;</div></div>
                            </div>
                            <div style={{ paddingTop:"35px" }}>
                            <div className="loading-title">{loadingText}</div>
                            </div>
                        </div>
                    )}
                </React.Fragment>
            );
    }
}

const mapStateToProps = state => ({
    showNotifier: state.global.showNotifier,
    notifierOptions: state.global.notifierOptions,
    loading: state.global.loading,
    loadingText: state.global.loadingText,
});

const mapDispatchToProps = dispatch => ({
  resetNotifier: () => dispatch(globalActions.unnotify())
});

const withConnect = connect(
 mapStateToProps,
 mapDispatchToProps
);

export default compose(withConnect)(withAlert()(Alert));

${this.title}

Code Editor : Alert.tsx