import React, { Component } from 'react';
import { fetchTicketNotes } from '../../../helpers/cw';

const Notes = ({ ticketNumber }) => {

  const [notes, setNotes] = React.useState([]);
  const [isLoading, setIsLoading] = React.useState(false);

  React.useEffect(() => {
      displayNotes();
  }, []);

  const displayNotes = () => {
    setIsLoading(true);
    fetchTicketNotes(ticketNumber).then(results => {
      const notes = results.map(note => ({
        createdBy: note.member.name,
        dateCreated: (new Date(note.dateCreated)).toLocaleDateString() + ' ' + (new Date(note.dateCreated)).toLocaleTimeString(),
        id: note.id,
        text: note.text,
      }));

      setIsLoading(false);
      setNotes(notes);
    });
  }

    return (
      <div>
        <h4>Notes</h4>
        {isLoading && (<p style={{textAlign: 'center'}}>Loading &hellip;</p>)}

        {notes.length
          ? <div className="ticket-notes">
            {notes.map(message =>
              <div key={message.id}>
                <p>{message.text}</p>
                <p><strong>{message.createdBy}, {message.dateCreated}</strong></p>
              </div>
            )}
          </div>
          : !isLoading ? 'No ticket notes found' : null
        }
      </div>
    );
}

export default Notes;

@@ -9,23 +9,8 @@
 eact
-, %7B Component %7D
  fro
@@ -228,67 +228,8 @@
 );%0A%0A
-  React.useEffect(() =%3E %7B%0A      displayNotes();%0A  %7D, %5B%5D);%0A%0A
   co
@@ -661,20 +661,76 @@
  %7D);%0A  %7D
+;
 %0A%0A  
+React.useEffect(() =%3E %7B%0A    displayNotes();%0A  %7D, %5B%5D);%0A%0A
   return
@@ -740,18 +740,14 @@
     
-  
 %3Cdiv%3E%0A
-  
     
@@ -763,18 +763,16 @@
 es%3C/h4%3E%0A
-  
       %7Bi
@@ -843,26 +843,24 @@
 p%3E)%7D%0A%0A      
-  
 %7Bnotes.lengt
@@ -861,18 +861,16 @@
 .length%0A
-  
         
@@ -908,26 +908,24 @@
 %3E%0A          
- 
- 
 %7Bnotes.map(m
@@ -934,18 +934,16 @@
 sage =%3E%0A
-  
         
@@ -983,18 +983,16 @@
         
-  
 %3Cp%3E%7Bmess
@@ -1019,18 +1019,16 @@
         
- 
- 
 %3Cp%3E%3Cstro
@@ -1094,35 +1094,31 @@
             
-  
 %3C/div%3E%0A
-  
           )%7D
@@ -1122,35 +1122,31 @@
  )%7D%0A        
-  
 %3C/div%3E%0A
-  
         : !i
@@ -1197,14 +1197,10 @@
     
-  %7D%0A  
+%7D%0A
     
@@ -1210,16 +1210,15 @@
 iv%3E%0A
-  
   );%0A%7D
+;
 %0A%0Aex

Reposition useEffect hook and displayNotes methods