Skip to content

Autosave changes of forms' sections #188 #196

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
annapakula wants to merge 4 commits into
base: react_dev
Choose a base branch
from
Open

Autosave changes of forms' sections #188 #196

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
dc02654
Autosave changes of forms' sections #188
annapakula Mar 11, 2021
59d00d3
Redo changes in updateUnsetAsNew function #188
annapakula Mar 12, 2021
9c59003
Merge branch 'react_dev' of https://github.com/binawork/OnlineOnboard…
annapakula Mar 12, 2021
6b9bcb6
Merge branch 'react_dev' of https://github.com/binawork/OnlineOnboard…
annapakula Apr 8, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
99 changes: 64 additions & 35 deletions onboarding/src/Components/FormsEdit/FormsEditPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
import "../../static/css/FormsEdit.scss";

function FormsEditPage() {
Expand All @@ -19,15 +20,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([]);

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);
Expand All @@ -39,38 +41,83 @@ 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, 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;

return;
let newSections2 = newSections.map( (section) => {
if(section.hasOwnProperty('isNew') )
section.isNew = false;
Copy link
Copy Markdown
Member

@adam-sas-on adam-sas-on Mar 12, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It was (still is) necessary to set the section not being new when the POST request was done as it is not new on the server anymore. By removing/commenting this you make the request being constantly POST for already created sections so whenever yous clicks "Zapisz pytania" the server will duplicate them. We are working on this duplication and it is issue #180 .
So in short: it makes the request being POST only once and only for sections the user created by click of corresponding button on the right panel.

Copy link
Copy Markdown
Collaborator Author

@annapakula annapakula Mar 12, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, I didn't notice duplication on my computer. I will redo this change.


section.isNew = false;
return section;
});

//setSections(newSections2);
setSectionsCopy(JSON.parse(JSON.stringify(newSections)));
setSections( newSections2.sort((section1, section2) => section1.order - section2.order) );
}

const handleSave = (e) => {
e.preventDefault();
setIsAutosave(false);
setSaveOnDemand(true);
FormSectionsAPI.saveAll(sections, updateUnsetAsNew)
.catch((error) => setErrorMessage(error.message))
.then(() => {
setUpdate(true);
.then((result) => {
setShowSaveModal(true);
// updateUnsetAsNew(result);
updateUnsetAsNew(result);
});
};

Expand Down Expand Up @@ -128,7 +175,10 @@ function FormsEditPage() {
</div>
</form>
</section>
{showSaveModal && (
{isAutosave && (
<SaveInfo message={errorMessage ? "Nie udało się zapisać - któreś z pól może zawierać za dużo znaków." : "Zapisano zmiany"} />
)}
{showSaveModal && saveOnDemand && (
<ModalWarning
handleAccept={ hideModal }
title={ "Zapisywanie sekcji formularza" }
Expand All @@ -142,27 +192,6 @@ function FormsEditPage() {
id={ 0 }
/>
)}
{/* {saved ? (
<div
className="fixed-bottom d-flex justify-content-center show-and-hide"
style={{ display: "fixed-bottom", left: "240px" }}
>
<div
className="m-2 p-2"
style={{
width: "150px",
backgroundColor: "rgba(226, 232, 238, 0.57)",
color: "black",
textAlign: "center",
borderRadius: "4px",
}}
>
Zapisano zmiany
</div>
</div>
) : (
<></>
)} */}
</div>
);
}
Expand Down
6 changes: 3 additions & 3 deletions onboarding/src/Components/hooks/FormsEdit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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("");

Expand All @@ -32,7 +32,7 @@ function FormsEdit(formId, update){
.finally(() => setLoading(false));

return () => abortCont.abort();
}, [update]);
}, []);

return { sections, loading, errorMessage };
}
Expand Down