From 0f3a0cdc0eaf2ab54f2a395bea83782937ed273f Mon Sep 17 00:00:00 2001
From: adriano <adriano08andra@hotmail.com>
Date: Mon, 14 Mar 2022 10:21:50 -0300
Subject: [PATCH] =?UTF-8?q?Corre=C3=A7=C3=A3o=20do=20useEffect?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ChatEnd/ModalChatEnd/index.js  | 488 ++++++++----------
 1 file changed, 229 insertions(+), 259 deletions(-)

diff --git a/frontend/src/components/ChatEnd/ModalChatEnd/index.js b/frontend/src/components/ChatEnd/ModalChatEnd/index.js
index b2346fe..64036ee 100644
--- a/frontend/src/components/ChatEnd/ModalChatEnd/index.js
+++ b/frontend/src/components/ChatEnd/ModalChatEnd/index.js
@@ -123,7 +123,7 @@ const Modal = (props) => {
   const [schedulesContact, dispatch] =  useReducer(reducer, []); 
 
   const [currencyHourBefore, setCurrency] = useState(null);
-  const [currenciesTimeBefore, setCurrenciesTimeBefore] = useState( ); 
+  const [currenciesTimeBefore, setCurrenciesTimeBefore] = useState(null); 
  
   const handleCancel = (event, reason) => {
 
@@ -159,68 +159,8 @@ const Modal = (props) => {
   function formatedTimeHour(timer){
     return  `${timer.getHours().toString().padStart(2, '0')}:${timer.getMinutes().toString().padStart(2, '0')}`
   }
-
-  const hoursBeforeAvalible = (timer) =>{  
-
-      let hours = []
-      let hour = 1       
-
-      if(startDate === dateCurrentFormated()){
-
-        console.log('HOJE++++')
-
-        while(subHours(timer, hour).getHours()>=6 && 
-        subHours(timer, hour).getHours()>=new Date().getHours() && 
-        subHours(timer, hour).getHours()<=19){
-
-          console.log('******** TIMER: ', formatedTimeHour(subHours(timer,hour)))
-  
-          hours.push(
-            {value: formatedTimeHour(subHours(timer,hour)), 
-            label: `${hour} HORA ANTES DO HORÁRIO DO AGENDAMENTO`})
-  
-          hour++;
-        }
-
-        if(hours.length>1){ 
-          console.log('entrou----------------------: ', hours.length) 
-          hours.pop() 
-          setCurrency(hours[0].value) 
-        }
-        else{
-          setCurrency(null)
-        } 
-
-      }
-      else{ 
-
-        while(subHours(timer, hour).getHours()>=6 && subHours(timer, hour).getHours()<=19){
-
-          console.log('******** another day TIMER: ', formatedTimeHour(subHours(timer,hour)))
-  
-          hours.push(
-            {value: formatedTimeHour(subHours(timer,hour)), 
-            label: `${hour} HORA ANTES DO HORÁRIO DO AGENDAMENTO`})
-  
-          hour++;
-        }
-
-        if(hours.length>0){ 
-          console.log('entrou----------------------: ', hours.length)  
-          setCurrency(hours[0].value) 
-        }
-        else{
-          setCurrency(null)
-        } 
-
-      }
  
    
-      return {time: hours, hour:hour}       
-
-  }
-
-   
 
   const handleCloseConfirmationModal = () => {
     setConfirmModalOpen(false);
@@ -243,12 +183,16 @@ const Modal = (props) => {
 const datePickerValue = (data) => { 
   console.log('datePickerValue: ',(data));   
   setDatePicker(data) 
+
+   
 }
 
 // Get from child 3
 const timerPickerValue = (data) => { 
   console.log('timerPickerValue: ',(data));   
   setTimerPicker(data)
+
+ 
 }
 
 const dateCurrentFormated = () => { 
@@ -285,32 +229,11 @@ const dateCurrentFormated = () => {
 
       return
 
-    }
-    // else if(startDate === dateCurrentFormated()){    
-    //   if(  
-    //       (new Date(subHours(timerPicker, 1)).getHours() <= new Date().getHours() && 
-    //       new Date(subHours(timerPicker, 1)).getMinutes() <= new Date().getMinutes()) ||
-
-    //       (new Date(subHours(timerPicker, 1)).getHours() == new Date().getHours() && 
-    //       new Date(subHours(timerPicker, 1)).getMinutes() <= new Date().getMinutes())
-          
-    //       )
-    //   {
-
-    //     alert('Para agendamentos do dia, é necessário que o horário do lembrete seja no mínimo uma hora adiantado!')
-
-    //     return
-    //   }
-    // }    
-
-
-   
+    } 
  
 
     props.func({ 
-      'scheduleId': scheduleId,   
-      // 'schedulingDate': startDate+' '+formatedTimeHour(subHours(new Date(`${startDate} ${timerPicker.getHours()}:${timerPicker.getMinutes()}:${timerPicker.getSeconds()}`), 1))+':00',
-      // 'schedulingDate': `${startDate} ${timerPicker.getHours()}:${timerPicker.getMinutes()}:${timerPicker.getSeconds()}`,
+      'scheduleId': scheduleId,    
       'schedulingDate': `${startDate} ${currencyHourBefore}:00`,
       'schedulingTime': startDate+' '+formatedTimeHour(new Date(`${startDate} ${timerPicker.getHours()}:${timerPicker.getMinutes()}:00`)), 
       'message': textArea1  
@@ -347,20 +270,71 @@ const handleChangeHourBefore = (event) => {
 
 };
 
-
- 
-
-
-
-// Get from child 4
-// const textArea1Value = (data) => { 
-//   console.log('textArea1Value: ',(data));   
-//   setTextArea1(data)
-// } 
+  
 
 useEffect(()=>{
 
-  setCurrenciesTimeBefore(hoursBeforeAvalible(timerPicker).time)    
+  const hoursBeforeAvalible = (timer) =>{  
+
+    let hours = []
+    let hour = 1       
+
+      if(startDate === dateCurrentFormated()){
+
+        console.log('HOJE++++')
+
+        while(subHours(timer, hour).getHours()>=6 && 
+        subHours(timer, hour).getHours()>=new Date().getHours() && 
+        subHours(timer, hour).getHours()<=19){
+
+          console.log('******** TIMER: ', formatedTimeHour(subHours(timer,hour)))
+
+          hours.push(
+            {value: formatedTimeHour(subHours(timer,hour)), 
+            label: `${hour} HORA ANTES DO HORÁRIO DO AGENDAMENTO`})
+
+          hour++;
+        }
+
+        if(hours.length>1){ 
+          console.log('entrou----------------------: ', hours.length) 
+          hours.pop() 
+          setCurrency(hours[0].value) 
+        }
+        else{
+          setCurrency(null)
+        } 
+
+      }
+      else{ 
+
+        while(subHours(timer, hour).getHours()>=6 && subHours(timer, hour).getHours()<=19){
+
+          console.log('******** another day TIMER: ', formatedTimeHour(subHours(timer,hour)))
+
+          hours.push(
+            {value: formatedTimeHour(subHours(timer,hour)), 
+            label: `${hour} HORA ANTES DO HORÁRIO DO AGENDAMENTO`})
+
+          hour++;
+        }
+
+        if(hours.length>0){ 
+          console.log('entrou----------------------: ', hours.length)  
+          setCurrency(hours[0].value) 
+        }
+        else{
+          setCurrency(null)
+        } 
+
+      }
+
+  
+      return {time: hours, hour:hour}       
+
+  }
+
+  setCurrenciesTimeBefore(hoursBeforeAvalible(timerPicker).time)     
      
 },[timerPicker, startDate]) 
 
@@ -382,7 +356,7 @@ useEffect(()=>{
     setTextArea1('Boa noite, '+greetMessageSchedule( formatedTimeHour(new Date(timerPicker), 1)))
   }   
 
-},[currencyHourBefore, startDate])
+},[currencyHourBefore, startDate, timerPicker])
 
 
 const handleChange = (event) => {
@@ -393,186 +367,182 @@ const handleChange = (event) => {
  
 
 
-  return ( 
-
+  return (  
  
- 
- 
-<Dialog 
-        open={open}
-        onClose={handleCancel} 
-        // fullWidth={true}
-        // maxWidth={true}    
-        disableEscapeKeyDown
+    <Dialog 
+            open={open}
+            onClose={handleCancel} 
+            // fullWidth={true}
+            // maxWidth={true}    
+            disableEscapeKeyDown
 
-        scroll={scroll}
-        aria-labelledby="scroll-dialog-title"
-        aria-describedby="scroll-dialog-description"
-      >   
+            scroll={scroll}
+            aria-labelledby="scroll-dialog-title"
+            aria-describedby="scroll-dialog-description"
+          >   
 
-        <DialogTitle id="scroll-dialog-title">{props.modal_header}</DialogTitle>
-        <DialogContent dividers={scroll === 'body'}>
+            <DialogTitle id="scroll-dialog-title">{props.modal_header}</DialogTitle>
+            <DialogContent dividers={scroll === 'body'}>
 
-          <DialogContentText
-            id="scroll-dialog-description"
-            ref={descriptionElementRef}
-            tabIndex={-1}
-          >
-            
-          </DialogContentText> 
+              <DialogContentText
+                id="scroll-dialog-description"
+                ref={descriptionElementRef}
+                tabIndex={-1}
+              >
+                
+              </DialogContentText> 
 
-              
-            <Box
-                  sx={{
-                    width: 500,
-                    height: '100%',
-                    // backgroundColor: 'primary.dark',
-                    // '&:hover': {backgroundColor: 'primary.main', opacity: [0.9, 0.8, 0.7],},
-                  }}> 
+                  
+                <Box
+                      sx={{
+                        width: 500,
+                        height: '100%',
+                        // backgroundColor: 'primary.dark',
+                        // '&:hover': {backgroundColor: 'primary.main', opacity: [0.9, 0.8, 0.7],},
+                      }}> 
 
-                      <Box  sx={{
-                          display: 'grid',  
-                        }}>
-                        <Item>
-                            <span>Selecione uma opção para encerrar o Atendimento</span> 
+                          <Box  sx={{
+                              display: 'grid',  
+                            }}>
+                            <Item>
+                                <span>Selecione uma opção para encerrar o Atendimento</span> 
+                                
+                                <SelectField func={textFieldSelect} 
+                                emptyField={false} 
+                                header={'Opções de encerramento do atendimento'} 
+                                currencies={data.map((obj)=>{
+                                          return {'value': obj.id, 'label': obj.name}
+                                        })}/>
+                                
+
+                            </Item> 
+
+                          </Box> 
+                          
+                          {scheduleId==='2' &&
+                          
+                          <Item> 
+
+                            <span>Lembrete de retorno</span>
+
+                          <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)' }}> 
                             
-                            <SelectField func={textFieldSelect} 
-                            emptyField={false} 
-                            header={'Opções de encerramento do atendimento'} 
-                            currencies={data.map((obj)=>{
-                                      return {'value': obj.id, 'label': obj.name}
-                                    })}/>
+                            <Item><DatePicker func={datePickerValue} minDate = {true} title={'Data do agendamento'}/></Item>
                             
-
-                        </Item> 
-
-                      </Box> 
-                      
-                      {scheduleId==='2' &&
-                      
-                      <Item> 
-
-                        <span>Lembrete de retorno</span>
-
-                      <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)' }}> 
-                        
-                        <Item><DatePicker func={datePickerValue} minDate = {true} title={'Data do agendamento'}/></Item>
-                        
-                        <Item><TimerPickerSelect func={timerPickerValue} title={'Hora do agendamento'}/></Item>
-                           
-                      </Box>
+                            <Item><TimerPickerSelect func={timerPickerValue} title={'Hora do agendamento'}/></Item>
+                              
+                          </Box>
 
 
-                      <Box sx={{display: 'flex', flexDirection: 'column' }}>    
-                      
-                      {currencyHourBefore &&
-                        <Item>                      
-                          <TextFieldSelectHourBefore
-                          id="outlined-select-currency"
-                          select
-                          label="Enviar mensagem para cliente"
-                          value={currencyHourBefore}
-                          size="small"
-                          onChange={handleChangeHourBefore} 
-                        >
-                          {currenciesTimeBefore.map((option) => (
-                            <MenuItem key={option.value} value={option.value}>
-                              {option.label}
-                            </MenuItem>
-                          ))}
-                        </TextFieldSelectHourBefore>
+                          <Box sx={{display: 'flex', flexDirection: 'column' }}>    
+                          
+                          {currencyHourBefore &&
+                            <Item>                      
+                              <TextFieldSelectHourBefore
+                              id="outlined-select-currency"
+                              select
+                              label="Enviar mensagem para cliente"
+                              value={currencyHourBefore}
+                              size="small"
+                              onChange={handleChangeHourBefore} 
+                            >
+                              {currenciesTimeBefore.map((option) => (
+                                <MenuItem key={option.value} value={option.value}>
+                                  {option.label}
+                                </MenuItem>
+                              ))}
+                            </TextFieldSelectHourBefore>
+                            </Item>
+                          }
+
+                            
+                            <Item>
+                              <TextareaAutosize 
+                                  aria-label="minimum height"
+                                  minRows={3}  
+                                  value={textArea1}
+                                  placeholder={'Mensagem para lembrar cliente'}   
+                                  onChange={ handleChange}  
+                                  style={{ width: '100%' }}
+                              />
+                            </Item>
+                          </Box>
+
                         </Item>
-                      }
+                        } 
+
+                        {schedulesContact.length>0 && 
 
                         
-                        <Item>
-                          <TextareaAutosize 
-                              aria-label="minimum height"
-                              minRows={3}  
-                              value={textArea1}
-                              placeholder={'Mensagem para lembrar cliente'}   
-                              onChange={ handleChange}  
-                              style={{ width: '100%' }}
-                          />
-                        </Item>
-                      </Box>
 
-                    </Item>
-                    } 
+                        <Item> 
 
-                    {schedulesContact.length>0 && 
-
-                    
-
-                    <Item> 
-
-          <ConfirmationModal
-            title={selectedSchedule && `Deletar agendamento do dia ${selectedSchedule.schedulingTime.split(' ')[0]}  ${selectedSchedule.schedulingTime.split(' ')[1]} ?`}
-            open={confirmModalOpen}
-            onClose={handleCloseConfirmationModal}
-            onConfirm={() => handleDeleteSchedule(selectedSchedule.id)}
-          >
-            <span>Deseja realmente deletar esse Agendamento? </span>
-          </ConfirmationModal> 
-                          <span>Agendamentos</span>
-                    <Paper  variant="outlined"> 
-                      <Table size="small">
-                       
-                        <TableHead>
-                          <TableRow>
-                            <TableCell align="center">
-                              Data
-                            </TableCell>
-                            <TableCell align="center">
-                              Hora 
-                            </TableCell> 
-                            <TableCell align="center">
-                              Deletar
-                            </TableCell>
-                          </TableRow>
-                        </TableHead>
-                        
-                        <TableBody>
-                          <>
-                            {schedulesContact.map((scheduleData, index) => (
-                              <TableRow key={scheduleData.id}>
-                                <TableCell align="center">{scheduleData.schedulingDate.split(' ')[0]}</TableCell>
-                                <TableCell align="center">{scheduleData.schedulingTime.split(' ')[1]}</TableCell> 
-                                <TableCell align="center"> 
-              
-                                  <IconButton
-                                    size="small"
-                                    onClick={() => { 
-                                      setSelectedSchedule(scheduleData);
-                                      setConfirmModalOpen(true);
-                                     
-                                    }}
-                                  >
-                                    <DeleteOutline />
-                                  </IconButton>
+              <ConfirmationModal
+                title={selectedSchedule && `Deletar agendamento do dia ${selectedSchedule.schedulingTime.split(' ')[0]}  ${selectedSchedule.schedulingTime.split(' ')[1]} ?`}
+                open={confirmModalOpen}
+                onClose={handleCloseConfirmationModal}
+                onConfirm={() => handleDeleteSchedule(selectedSchedule.id)}
+              >
+                <span>Deseja realmente deletar esse Agendamento? </span>
+              </ConfirmationModal> 
+                              <span>Agendamentos</span>
+                        <Paper  variant="outlined"> 
+                          <Table size="small">
+                          
+                            <TableHead>
+                              <TableRow>
+                                <TableCell align="center">
+                                  Data
+                                </TableCell>
+                                <TableCell align="center">
+                                  Hora 
+                                </TableCell> 
+                                <TableCell align="center">
+                                  Deletar
                                 </TableCell>
-
                               </TableRow>
-                            ))} 
-                          </>
-                        </TableBody>
-                      </Table>
-                    </Paper>  
-                    </Item>}
-                     
-                      
-            </Box>   
-        </DialogContent>
-        
- 
-        <DialogActions>     
-          <div style={{marginRight:'50px'}}>
-          <Button onClick={handleCancel}>Cancelar</Button>  
-          </div>
-          <Button onClick={handleChatEnd}>Ok</Button>  
-        </DialogActions>
-      </Dialog> 
- 
+                            </TableHead>
+                            
+                            <TableBody>
+                              <>
+                                {schedulesContact.map((scheduleData, index) => (
+                                  <TableRow key={scheduleData.id}>
+                                    <TableCell align="center">{scheduleData.schedulingDate.split(' ')[0]}</TableCell>
+                                    <TableCell align="center">{scheduleData.schedulingTime.split(' ')[1]}</TableCell> 
+                                    <TableCell align="center"> 
+                  
+                                      <IconButton
+                                        size="small"
+                                        onClick={() => { 
+                                          setSelectedSchedule(scheduleData);
+                                          setConfirmModalOpen(true);
+                                        
+                                        }}
+                                      >
+                                        <DeleteOutline />
+                                      </IconButton>
+                                    </TableCell>
+
+                                  </TableRow>
+                                ))} 
+                              </>
+                            </TableBody>
+                          </Table>
+                        </Paper>  
+                        </Item>}
+                        
+                          
+                </Box>   
+            </DialogContent>
+            
+    
+            <DialogActions>     
+              <div style={{marginRight:'50px'}}>
+              <Button onClick={handleCancel}>Cancelar</Button>  
+              </div>
+              <Button onClick={handleChatEnd}>Ok</Button>  
+            </DialogActions>
+          </Dialog>  
 
   );
 }