Express-React-PlagiarismCheck.02-APIUpdate

Express server connected to reactjs for google search & certain content scrapping (puppeteer), using htmx + nodecache, solving this challenge.

This is test02 for individual phrases which they will be divided from the main paragraphs in the very soon
This very modular UI shows to the user to start typing the whole text for check, submitting in ctrl+Enter after finishing.
getting out of (unshowing) the typing-modal cancels the request with a useEffect()'s cleanup func:

  useEffect(() => {  
    if (showModal) {  
          modalRef.current.focus();  
          try{  
          await fetch()...  
          } catch (error) {  
        if (error.name === 'AbortError') {  
          console.log('Fetch request was aborted by the user.');  
          toastify('Requet Aborted')  
        } else {  
          console.error('An error occurred:', error.message);  
        }  
      }  
            const textareaElement = modalRef.current;  
      if (abortControllerRef.current) {  
        abortControllerRef.current.abort();  
      }  
return () => {  
      // Cleanup function  
      // If the component unmounts or the dependency array changes, abort the request  
      if (abortControllerRef.current) {  
        abortControllerRef.current.abort();  
      }  
    };  
    }  

with the main textarea ``` <textarea type="text" ref={modalRef} placeholder="start writing" /> ```

02.01.mp4

02.02.mp4

Client dir.

Features:

-- AbortController to update the request state in case o cancelling the requet by the user (out of the typing-modal)
-- hovering over the ` @Ebrahim Ramadan ` for a little shows this modal of me for [My Github Overview](https://github.com/ebrahim-Ramadan/). and clicking on it takes you to [My Twitter](https://twitter.com/scoopsahoykid).
-- Different Errors handled very gracefully on both server and client related, check the API