Add is touched editor

src/components/Editing/Editing.tsx

@@ -10,8 +10,10 @@ const Editing: React.FC = () => {
   const [date, setDate] = useState<Date>(new Date())
   const [header, setHeader] = useState<string>('')
   const [quote, setQuote] = useState<string>('')
+  const [isTouched, setIsTouched] = useState<boolean>(false)
   const { user }: any = useContext(UserContext)
-  const handleSave = async () => {
+
+  const handleSave = async (): Promise<void> => {
     const monthlyNewsService = new MonthlyNewsService()
     await monthlyNewsService.createMonthlyReport(
       date,
@@ -24,11 +26,25 @@ const Editing: React.FC = () => {
     setQuote('')
     setHeader('')
   }, [])
+
   const isEmpty = (): boolean => {
-    if (quote !== '' || header !== '') {
+    if ((quote !== '' || header !== '') && isTouched) {
       return false
     } else return true
   }
+
+  const handleEditorChange = (
+    value: string,
+    type: 'header' | 'quote'
+  ): void => {
+    setIsTouched(true)
+    if (type === 'header') {
+      setHeader(value)
+    } else {
+      setQuote(value)
+    }
+  }
+
   useEffect(() => {
     async function getCurrentMonthlyNews() {
       const monthlyNewsService = new MonthlyNewsService()
@@ -37,10 +53,10 @@ const Editing: React.FC = () => {
         date.getMonth(),
         user.xsrftoken
       )
-      console.log('news', news)
       if (news) {
         setHeader(news.header)
         setQuote(news.quote)
+        setIsTouched(false)
       }
     }
     getCurrentMonthlyNews()
@@ -67,7 +83,9 @@ const Editing: React.FC = () => {
                 'undo redo | bold italic underline | alignleft aligncenter alignright | code',
             }}
             value={header}
-            onEditorChange={(newHeader, editor) => setHeader(newHeader)}
+            onEditorChange={(newHeader, editor) =>
+              handleEditorChange(newHeader, 'header')
+            }
           />
           <div className="subtitle">
             <p className="title">Citation du mois</p>
@@ -81,7 +99,9 @@ const Editing: React.FC = () => {
                 'undo redo | bold italic underline | alignleft aligncenter alignright | code',
             }}
             value={quote}
-            onEditorChange={(newQuote, editor) => setQuote(newQuote)}
+            onEditorChange={(newQuote, editor) =>
+              handleEditorChange(newQuote, 'quote')
+            }
           />
           <button className="btnCancel" onClick={handleCancel}>
             Annuler