From 9c396976bb42a9d41407358ce1a1d37242230f21 Mon Sep 17 00:00:00 2001
From: gabrhr <73925454+gabrhr@users.noreply.github.com>
Date: Fri, 27 May 2022 12:50:13 -0500
Subject: Add redux, dispatch and etiquetas
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- estetica de etiquetas (ok)
- add message, pedido Reducer
- add dispatch en Componentes con connect
- add api reducer que obtienen el JSON todo ok

#TODO
- FIX logica de añadiir
- FIX axios y dispatch fuera de un componente
---
 front/odiparpack/app/containers/App/index.js | 60 +++++++++++++++++++++++++++-
 1 file changed, 58 insertions(+), 2 deletions(-)

(limited to 'front/odiparpack/app/containers/App/index.js')

diff --git a/front/odiparpack/app/containers/App/index.js b/front/odiparpack/app/containers/App/index.js
index a7313fe..ea78618 100644
--- a/front/odiparpack/app/containers/App/index.js
+++ b/front/odiparpack/app/containers/App/index.js
@@ -5,11 +5,51 @@ import Auth from './Auth';
 import Application from './Application';
 import LoginDedicated from '../Pages/Standalone/LoginDedicated';
 import ThemeWrapper from './ThemeWrapper';
+import {  Snackbar, Button, Icon } from '@material-ui/core';
+import { connect } from 'react-redux';
 window.__MUI_USE_NEXT_TYPOGRAPHY_VARIANTS__ = true;
 
-function App() {
+function App(props) {
+  
+  const handleMessageClose = () => {
+    props.dispatch(closeMessage())
+  }
+  
+  const {
+    openMessage = false,
+    message = '',
+    type = 'error'
+  } = props
+  
   return (
     <ThemeWrapper>
+      <Snackbar
+          anchorOrigin={{
+            vertical: 'top',
+            horizontal: 'right',
+          }}
+          open={openMessage}
+          autoHideDuration={6000}
+          onClose={handleMessageClose}
+          message={
+            <div className="center-aligned-child">
+              <Icon style={{
+                fontSize: 20,
+                marginRight: 15
+              }} > 
+                {type === 'success' ? 'check_circle' : 'report_problem'}
+              </Icon>
+              {message}
+            </div>
+          }
+          action={[
+            <Button key="undo" color="secondary" size="small" onClick={handleMessageClose}>
+              <Icon> 
+                {'close'}
+              </Icon>
+            </Button>
+          ]}
+        />
       <Switch>
         <Route path="/" exact component={LoginDedicated} />
         <Route path="/app" component={Application} />
@@ -20,4 +60,20 @@ function App() {
   );
 }
 
-export default App;
+const reducer = 'message';
+const mapStateToProps = state => ({
+  force: state, // force state from reducer
+  message: state.getIn([reducer, 'message']),
+  type: state.getIn([reducer, 'type']),
+  openMessage: state.getIn([reducer, 'openMessage'])
+});
+
+const mapDispatchToProps = dispatch => ({
+  dispatch: dispatch
+});
+const AppMapped = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(App);
+
+export default AppMapped;
-- 
cgit v1.2.3