<repo_name>yeti-iasof/bx-integration<file_sep>/src/components/EmitedLabesList/EmitedLabesList.js
import React from 'react';

const EmitedLabesList = (props) => {
  if (props.rows === undefined)
    return null;
  return (
    <div className="table-container">
      <table className="table">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">Nro Tracking</th>
            <th scope="col">Cuenta Corriente</th>
            <th scope="col">Fecha Creacion</th>
            <th scope="col">Referencias</th>
          </tr>
        </thead>
        <tbody>
          {
            props.rows.map((row, x) => {
              return (
                <tr key={x}>
                  <td scope="row">{x}</td>
                  <td scope="col">{row.nroOS}</td>
                  <td scope="col">{row.ctaCte}</td>
                  <td scope="col">{row.fechaCreacion}</td>
                  <td scope="col">{row.numeroReferencia}</td>
                </tr>);
            })
          }
        </tbody>
      </table>
    </div>
  );
}

EmitedLabesList.propTypes = {};

EmitedLabesList.defaultProps = {};

export default EmitedLabesList;
<file_sep>/src/components/Home/Home.js
import React from 'react';
import styles from './Home.module.css';
import Header from '../Header/Header';
import Sider from '../Sider/Sider';
import ShowMenuSelected from '../ShowMenuSelected/ShowMenuSelected';

const Home = (props) => (

  <div className={styles.Home}>
    <Header onClickLogout={props.onClickLogout} username={props.username} />
    <div className="d-flex">
      <Sider menus={props.menus} onclickMenuOption={props.onclickMenuOption} />
      <ShowMenuSelected currentMenu={props.currentMenu} baseUrl={props.baseUrl}  bxToken={props.bxToken} bxUserCode={props.bxUserCode} bxClientAccout={props.bxClientAccout}/>
    </div>
  </div>
);

Home.propTypes = {};

Home.defaultProps = {};

export default Home;
<file_sep>/src/components/EmissionLaPolar/EmissionLaPolar.js
import React, { useState } from 'react';
import LockedWindow from '../LockedWindow/LockedWindow';
import * as XLSX from 'xlsx';
import './EmissionLaPolar.css';
import axios from 'axios';
import swal from 'sweetalert';
import * as EmailValidator from 'email-validator';

const ExcelDataLayout = (props) => {
  if (props.excel === undefined)
    return null;
  return (
    <div className="table-container">
      {
        props.excel.map((sheet, i) => {
          return (
            <table className="table" key={i}>
              <thead>
                <tr>
                  <th scope="col">#</th>
                  <th scope="col">{sheet.sheetName}</th>
                </tr>
              </thead>
              <tbody>
                {
                  sheet.data.map((row, x) => {
                    return (
                      <tr key={x}>
                        <th scope="row">{x}</th>
                        <td>{JSON.stringify(row)}</td>
                      </tr>);
                  })
                }
              </tbody>
            </table>

          )
        })
      }
    </div>
  );
}

const EmissionLaPolar = (props) => {

  const [filename, setFilename] = useState('Choose File');
  const [loading, setLoading] = useState(false);
  const [excel, setExcel] = useState();
  const [emailNotification, setEmailNotification] = useState(undefined);
  const handleFileChange = (event) => {
    event.preventDefault();
    if (event.target.files[0] === undefined)
      return false;
    if (event.target.files[0].type !== "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet")
      return false;

    setFilename(event.target.files[0].name);
    setLoading(true);
    const target = event.target

    let hojas = [];
    let reader = new FileReader()

    reader.readAsArrayBuffer(target.files[0])
    reader.onloadend = (e) => {
      var data = new Uint8Array(e.target.result);
      var workbook = XLSX.read(data, { type: 'array' });
      workbook.SheetNames.forEach(function (sheetName) {
        var XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
        hojas.push({
          data: XL_row_object,
          sheetName
        })
      });
      setExcel(hojas);
    }
    setLoading(false);
  }
  const sendDataToBackend = async (event) => {
    event.preventDefault();
    try {
      if (emailNotification === undefined || emailNotification.trim() === '') {
        swal("Ups!", `Email ${emailNotification} is not valid.`, "error");
        return false;
      }

      if (emailNotification.includes(';')) {
        const emails = emailNotification.split(';');
        for (const email in emails) {
          if (!EmailValidator.validate(emails[email])) {
            swal("Ups!", `Email ${emails[email]} is not valid.`, "error");
            return false;
          }
        }
      }

      if (excel === undefined || excel === null) {
        swal("Ups!", `There is not file to process.`, "error");
        return false;
      }
      

      setLoading(true);
      const result = await axios.post(`${props.baseUrl}/emission/la-polar/3/${emailNotification}`, excel);
      if (result !== undefined)
        swal("Bulk Emission", `File ${filename} is loading. You will be notified by email at ${emailNotification} .`, "success");
      else
        swal("Ups!", `There was an error. Try again.`, "error");

      setExcel(undefined);
    } catch (err) {
      console.error(err);
      swal("Ups!", `There was an error. Try again: ${err}`, "error");
      return false;
    } finally {
      setLoading(false);
    }
  }

  const handleEmailChange = (event) => {
    event.preventDefault();
    setEmailNotification(event.target.value);
  }
  return (
    <div>
      <LockedWindow show={loading} />
      <div className="widget">

        <div className="container-fluid">
          <div className="title">Emission la Polar</div>
          <div className="separator"></div>
          <div className="separator_blank"></div>
          <div className="row">
            <div className="col-12">
              <div className="form-group">
                <label htmlFor="exampleInputEmail1">Notification Emails</label>
                <input type="email" className="form-control" id="exampleInputEmail1"
                  onChange={handleEmailChange}
                  value={emailNotification}
                  placeholder="Your email here. You can put more than one separated by ; (semicolon)" />
              </div>
            </div>
          </div>
          <div className="row">
            <div className="col-12">
              <div className="custom-file">
                <input
                  accept=".xlsx"
                  type="file"
                  className="custom-file-input"
                  id="customFileLang"
                  lang="es"
                  onChange={handleFileChange}
                  placeholder={filename} readOnly />
                <label className="custom-file-label" htmlFor="customFileLang">{filename}</label>
              </div>
            </div>
          </div>
          <div className="row">
            <div className="col-12">
              <ExcelDataLayout excel={excel} />
            </div>
          </div>
          <div className="row">
            <div className="col-12 d-flex justify-content-end align-items-center">
              <button type="button" className="btn btn-primary" onClick={sendDataToBackend}>Procesar</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
export default EmissionLaPolar;
<file_sep>/src/components/Login/Login.js
import React from 'react';
import logo from '../../assets/img/logo.svg';
import './Login.css';

const Login = (props) => {
    return (
        <div className="container" >
            <div className="row full-height  d-flex justify-content-center align-items-center" >
                <div className="col-10 col-md-4  d-flex justify-content-center align-items-center" >
                    <img src={logo} width="200px" alt="" />
                </div>
                <div className="col-10 col-md-4 login-card" >
                    <div className="form-group">
                        <label htmlFor="txt-username">User Name</label>
                        <input type="text" className="form-control" id="txt-username" name="username" onChange={props.onInputChange} />
                    </div>
                    <div className="form-group">
                        <label htmlFor="txt-password">Password</label>
                        <input type="<PASSWORD>" className="form-control" id="txt-password" name="password" onChange={props.onInputChange} />
                    </div>
                    <div className="btn-login">
                        <button type="button" className="btn btn-primary" onClick={props.onLoginClick}>Log In</button>
                    </div>
                </div>
            </div>
        </div>
    );
}

Login.propTypes = {};

Login.defaultProps = {};

export default Login;<file_sep>/src/App.js
import Login from './components/Login/Login';
import LockedWindow from './components/LockedWindow/LockedWindow';
import React, { useState } from 'react';
import axios from 'axios';
import Home from './components/Home/Home';
import swal from 'sweetalert';
axios.interceptors.request.use(
  request => {

    if (request.url.includes('login'))
      return request;

    request.headers['Authorization'] = `Bearer ${localStorage.getItem('jwt')}`;
    return request;
  },
  error => {
    swal("Ups!", `There was an error. Try again: ${error}`, "error");
    return Promise.reject(error);
  }

);

axios.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    swal("Ups!", `There was an error. Try again: ${error}`, "error");
    return Promise.reject(error);
  }

);
const App = () => {
  const BASE_URL = 'http://localhost:8082';

  const [login, setLogin] = useState({
    username: '',
    password: ''
  });

  const [loged, setLoged] = useState(false);
  const [loading, setLoading] = useState(false);
  const [menus, setMenus] = useState([]);
  const [currentMenu, setCurrentMenu] = useState(undefined);

  const handleLoginInputChange = (event) => {
    setLogin({
      ...login,
      [event.target.name]: event.target.value
    })
  }

  const handleClickLogin = async (e) => {
    e.preventDefault();
    try {
      if (login.username.trimEnd().trimStart() === '' || login.password.trimEnd().trimStart() === '')
        return false;

      setLoading(true);
      const result = await axios.post(`${BASE_URL}/login`, login);

      if (result === undefined) {
        swal("Ups!", "Result of login is undefined", "error");
        return false;
      }
      localStorage.setItem('jwt', result.data.data);
      setMenus([
        {
          id: 1,
          name: "Emission",
          menus: [
            { id: 2, name: "Emission - La Polar" },
            { id: 3, name: "<NAME>" }
          ]
        }
      ]);
      setLoged(true);
    } catch (err) {
      console.error(err);
      swal("Ups!", `There was an error. Try again: ${err}`, "error");
      setLogin({
        username: '',
        password: ''
      });
    } finally {
      setLoading(false);
    }
  }

  const handleClickLogout = (event) => {
    event.preventDefault();
    setLoading(true);
    setLoged(false);
    setLoading(false);
  }

  const handleClickMenuOption = (menu) => (event) => {
    event.preventDefault();
    setCurrentMenu(menu);
  }
  if (loading)
    return (<LockedWindow show={loading} />);
  if (!loged)
    return (
      <div>
        <Login onLoginClick={handleClickLogin} login={login} onInputChange={handleLoginInputChange} />
      </div>
    );
  return (
    <div>
      <Home
        baseUrl={BASE_URL}
        loading={loading}
        onClickLogout={handleClickLogout}
        username={login.username}
        menus={menus}
        onclickMenuOption={handleClickMenuOption}
        currentMenu={currentMenu} />
    </div>);
}

export default App;