From dc026547e562ec825b48a584871f96bb158782c3 Mon Sep 17 00:00:00 2001 From: Anna Pakula Date: Thu, 11 Mar 2021 18:12:01 +0100 Subject: [PATCH 1/2] Autosave changes of forms' sections #188 --- .../src/Components/FormsEdit/FormsEditPage.js | 117 +++++++++++------- .../src/Components/hooks/FormSectionsAPI.js | 2 +- onboarding/src/Components/hooks/FormsEdit.js | 6 +- 3 files changed, 79 insertions(+), 46 deletions(-) diff --git a/onboarding/src/Components/FormsEdit/FormsEditPage.js b/onboarding/src/Components/FormsEdit/FormsEditPage.js index daefe73f..4c2bd8c7 100644 --- a/onboarding/src/Components/FormsEdit/FormsEditPage.js +++ b/onboarding/src/Components/FormsEdit/FormsEditPage.js @@ -10,6 +10,7 @@ import FormsEdit, { fetchFormData } from "../hooks/FormsEdit"; import { singleCombo } from "../hooks/Packages"; import { onDragEnd } from "../utils"; import ModalWarning from "../ModalWarning"; +import SaveInfo from "../SaveInfo"; function FormsEditPage() { const location = useLocation(); @@ -18,15 +19,16 @@ function FormsEditPage() { const [sections, setSections] = useState([]); const [loading, setLoading] = useState(true); const [errorMessage, setErrorMessage] = useState(""); - const [update, setUpdate] = useState(true); - // const [saved, setSaved] = useState(false); + const [isAutosave, setIsAutosave] = useState(false); + const [saveOnDemand, setSaveOnDemand] = useState(false); const [packageTitle, setPackageTitle] = useState(""); const [showSaveModal, setShowSaveModal] = useState(false); const [editMode, setEditMode] = useState(true); - + const [sectionsCopy, setSectionsCopy] = useState([]); +console.log(sections) const { data:formData } = fetchFormData(formId); - const { sections:sortedSections, loading:isLoading, errorMessage:error } = FormsEdit(formId, update); - + const { sections:sortedSections, loading:isLoading, errorMessage:error } = FormsEdit(formId); + // Set title of package in navigation bar let title = singleCombo(formData?.package)?.title; if(location.state?.packageTitle && !packageTitle) setPackageTitle(location.state.packageTitle); @@ -38,38 +40,87 @@ function FormsEditPage() { useEffect(() => { setSections(sortedSections); + // Shallow copy an Array of Objects + setSectionsCopy(JSON.parse(JSON.stringify(sortedSections))); updateMaxOrder(sortedSections?.length); setLoading(isLoading); setErrorMessage(error); }, [sortedSections, isLoading, error]); + const showAutosaveInfo = () => { + // Show info "Zapisano zmiany" for 3 sec. when the changes were saved + if(saveOnDemand !== true) { + setIsAutosave(true); + const timer = setTimeout(() => { + setIsAutosave(false); + }, 3000); + + return () => { + clearTimeout(timer); + } + }; + } + useEffect(() => { + // Compare two Arrays of Objects + if(sections && sectionsCopy && JSON.stringify(Object.values(sections)) == JSON.stringify(Object.values(sectionsCopy))) return; + if(sections && !sections.some(section => section.title === "") && saveOnDemand !== true) { + setErrorMessage(""); + + // Save changes after 10 sec. form last change + const saveTimeout = setTimeout( + () => { + if(saveOnDemand !== true) { + FormSectionsAPI.saveAll(sections) + // FormSectionsAPI.saveAll(sections, updateUnsetAsNew) + .catch((error) => setErrorMessage(error.message)) + .then((result) => { + // Shallow copy an Array of Objects + setSectionsCopy(JSON.parse(JSON.stringify(result))); + setSections(result); + }) + .finally(() => { + showAutosaveInfo(); + }); + } + }, + 10000 + ); + return () => clearTimeout(saveTimeout); + } + }, [sections]); + const hideModal = () => { setShowSaveModal(false); + setSaveOnDemand(false); }; - + const updateUnsetAsNew = function(newSections){ if(typeof newSections === 'undefined' || newSections === null) - return; - - let newSections2 = newSections.map( (section) => { - if(section.hasOwnProperty('isNew') ) - section.isNew = false; + return; + + // Is newSections2 necessary? + // let newSections2 = newSections.map( (section) => { + // if(section.hasOwnProperty('isNew') ) + // section.isNew = false; + + // return section; + // }); - return section; - }); - - //setSections(newSections2); - setSections( newSections2.sort((section1, section2) => section1.order - section2.order) ); + setSectionsCopy(JSON.parse(JSON.stringify(newSections))); + setSections(newSections); + // setSections( newSections2.sort((section1, section2) => section1.order - section2.order) ); } const handleSave = (e) => { e.preventDefault(); - FormSectionsAPI.saveAll(sections, updateUnsetAsNew) + setIsAutosave(false); + setSaveOnDemand(true); + // FormSectionsAPI.saveAll(sections, updateUnsetAsNew) + FormSectionsAPI.saveAll(sections) .catch((error) => setErrorMessage(error.message)) - .then(() => { - setUpdate(true); + .then((result) => { setShowSaveModal(true); - // updateUnsetAsNew(result); + updateUnsetAsNew(result); }); }; @@ -127,7 +178,10 @@ function FormsEditPage() { - {showSaveModal && ( + {isAutosave && ( + + )} + {showSaveModal && saveOnDemand && ( )} - {/* {saved ? ( -
-
- Zapisano zmiany -
-
- ) : ( - <> - )} */} ); } diff --git a/onboarding/src/Components/hooks/FormSectionsAPI.js b/onboarding/src/Components/hooks/FormSectionsAPI.js index 9449f363..335f6976 100644 --- a/onboarding/src/Components/hooks/FormSectionsAPI.js +++ b/onboarding/src/Components/hooks/FormSectionsAPI.js @@ -69,7 +69,7 @@ const FormSectionsAPI = { ) ); - /*await*/ updateSectionsCallback(sectionsSaveResult); + // /*await*/ updateSectionsCallback(sectionsSaveResult); return sectionsSaveResult; }, }; diff --git a/onboarding/src/Components/hooks/FormsEdit.js b/onboarding/src/Components/hooks/FormsEdit.js index e3a37397..675d70d8 100644 --- a/onboarding/src/Components/hooks/FormsEdit.js +++ b/onboarding/src/Components/hooks/FormsEdit.js @@ -6,8 +6,8 @@ import useFetch from "./useFetch.js"; /** * Get page sections; */ -function FormsEdit(formId, update){ - const [sections, setSections] = useState(null); +function FormsEdit(formId){ + const [sections, setSections] = useState([]); const [loading, setLoading] = useState(true); const [errorMessage, setErrorMessage] = useState(""); @@ -32,7 +32,7 @@ function FormsEdit(formId, update){ .finally(() => setLoading(false)); return () => abortCont.abort(); - }, [update]); + }, []); return { sections, loading, errorMessage }; } From 59d00d3deb4d55427e79540ccc3696480f5aa185 Mon Sep 17 00:00:00 2001 From: Anna Pakula Date: Fri, 12 Mar 2021 11:07:34 +0100 Subject: [PATCH 2/2] Redo changes in updateUnsetAsNew function #188 --- .../src/Components/FormsEdit/FormsEditPage.js | 22 ++++++++----------- .../src/Components/hooks/FormSectionsAPI.js | 2 +- 2 files changed, 10 insertions(+), 14 deletions(-) diff --git a/onboarding/src/Components/FormsEdit/FormsEditPage.js b/onboarding/src/Components/FormsEdit/FormsEditPage.js index 4c2bd8c7..5b1378d7 100644 --- a/onboarding/src/Components/FormsEdit/FormsEditPage.js +++ b/onboarding/src/Components/FormsEdit/FormsEditPage.js @@ -25,7 +25,7 @@ function FormsEditPage() { const [showSaveModal, setShowSaveModal] = useState(false); const [editMode, setEditMode] = useState(true); const [sectionsCopy, setSectionsCopy] = useState([]); -console.log(sections) + const { data:formData } = fetchFormData(formId); const { sections:sortedSections, loading:isLoading, errorMessage:error } = FormsEdit(formId); @@ -70,8 +70,7 @@ console.log(sections) const saveTimeout = setTimeout( () => { if(saveOnDemand !== true) { - FormSectionsAPI.saveAll(sections) - // FormSectionsAPI.saveAll(sections, updateUnsetAsNew) + FormSectionsAPI.saveAll(sections, updateUnsetAsNew) .catch((error) => setErrorMessage(error.message)) .then((result) => { // Shallow copy an Array of Objects @@ -98,25 +97,22 @@ console.log(sections) if(typeof newSections === 'undefined' || newSections === null) return; - // Is newSections2 necessary? - // let newSections2 = newSections.map( (section) => { - // if(section.hasOwnProperty('isNew') ) - // section.isNew = false; + let newSections2 = newSections.map( (section) => { + if(section.hasOwnProperty('isNew') ) + section.isNew = false; - // return section; - // }); + return section; + }); setSectionsCopy(JSON.parse(JSON.stringify(newSections))); - setSections(newSections); - // setSections( newSections2.sort((section1, section2) => section1.order - section2.order) ); + setSections( newSections2.sort((section1, section2) => section1.order - section2.order) ); } const handleSave = (e) => { e.preventDefault(); setIsAutosave(false); setSaveOnDemand(true); - // FormSectionsAPI.saveAll(sections, updateUnsetAsNew) - FormSectionsAPI.saveAll(sections) + FormSectionsAPI.saveAll(sections, updateUnsetAsNew) .catch((error) => setErrorMessage(error.message)) .then((result) => { setShowSaveModal(true); diff --git a/onboarding/src/Components/hooks/FormSectionsAPI.js b/onboarding/src/Components/hooks/FormSectionsAPI.js index 335f6976..9449f363 100644 --- a/onboarding/src/Components/hooks/FormSectionsAPI.js +++ b/onboarding/src/Components/hooks/FormSectionsAPI.js @@ -69,7 +69,7 @@ const FormSectionsAPI = { ) ); - // /*await*/ updateSectionsCallback(sectionsSaveResult); + /*await*/ updateSectionsCallback(sectionsSaveResult); return sectionsSaveResult; }, };