Skip to content

Commit

Permalink
autosave
Browse files Browse the repository at this point in the history
  • Loading branch information
GraemeFulton committed Jun 22, 2024
1 parent 50f52c5 commit 5b68166
Show file tree
Hide file tree
Showing 6 changed files with 94 additions and 66 deletions.
58 changes: 35 additions & 23 deletions components/Editor/Editor.js
Original file line number Diff line number Diff line change
Expand Up @@ -64,9 +64,12 @@ const Editor = ({
postStatus = "draft",
postObject = null,
showNavButtons = true,
//save status
isSaving = false,
hasUnsavedChanges = false,
//functions
refetchPost = false,
savePost = false,
// savePost = false,
updatePost = false,
updatePostSettings = false,
setInitialEditorContent = false,
Expand All @@ -75,7 +78,9 @@ const Editor = ({
redirectIfFound: false,
});

const [isSaving, setIsSaving] = useState(false);
// const [isSaving, setIsSaving] = useState(false);

const [forReview, setForReview] = useState(false);

const editor = useEditor({
extensions: [
Expand Down Expand Up @@ -182,7 +187,7 @@ const Editor = ({
try {
const json = editor.getJSON();
// autosave would happen in the parent here;
updatePost({ editor, json });
updatePost({ editor, json, forReview });
} catch (e) {
if (typeof updatePost !== "function") {
console.log(e);
Expand All @@ -201,25 +206,25 @@ const Editor = ({
* - not using autosave yet
* - remove onSave when switching to autosaving
*/
const onSave = async ({ forReview }) => {
setIsSaving(true);
// const onSave = async ({ forReview }) => {
// setIsSaving(true);

try {
const saved = await savePost({
editor,
forReview: forReview ? true : false,
});
if (saved) {
setIsSaving(false);
} else {
console.log("Error saving");
setIsSaving(false);
}
} catch (e) {
console.log("Error saving");
setIsSaving(false);
}
};
// try {
// const saved = await savePost({
// editor,
// forReview: forReview ? true : false,
// });
// if (saved) {
// setIsSaving(false);
// } else {
// console.log("Error saving");
// setIsSaving(false);
// }
// } catch (e) {
// console.log("Error saving");
// setIsSaving(false);
// }
// };

if (!canEdit) {
return (
Expand Down Expand Up @@ -260,15 +265,22 @@ const Editor = ({
{/* undoredo buttons render in a portal on the navbar */}
{showNavButtons !== false ? (
<UndoRedoNavPortal>
<UndoRedoButtons editor={editor} />
<div className="flex">
<UndoRedoButtons editor={editor} />
<div className={`ml-3 my-auto text-gray-500`}>
{isSaving ? "Saving..." : hasUnsavedChanges ? "" : "Saved"}
</div>
</div>
</UndoRedoNavPortal>
) : null}

{showNavButtons !== false ? (
<EditorButtonsNavPortal>
<EditorNavButtons
user={user}
onSave={onSave}
onSave={({ forReview }) => {
setForReview(forReview);
}}
isSaving={isSaving}
postStatus={postStatus}
canEdit={canEdit}
Expand Down
4 changes: 2 additions & 2 deletions components/Editor/EditorNavButtons.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const EditorNavButtons = ({
}) => {
return (
<>
{user?.isLoggedIn ?
{/* {user?.isLoggedIn ?
<Button
variant="ghostBlue"
onClick={onSave}
Expand All @@ -35,7 +35,7 @@ const EditorNavButtons = ({
? "Update"
: "Save Draft "}
</Button>
:null}
:null} */}

{/* show publish button if post not published */}
{/* publish button does same as save draft button, but uses dialog and adds 'forReview' flag */}
Expand Down
75 changes: 45 additions & 30 deletions components/Editor/EditorWrapper.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import dynamic from "next/dynamic";

// import Fallback from "@/components/atom/Fallback/Fallback";
import useUser from "@/lib/iron-session/useUser";
import { useEffect, useState } from "react";
import { useCallback, useEffect, useState } from "react";
import { addTwitterScript } from "@/components/Editor/editorHooks/libs/addTwitterScript";

import Editor from "@/components/Editor/Editor";
Expand All @@ -17,6 +17,8 @@ import useUpdate from "@/components/Editor/editorHooks/editPost/useUpdate";
import { useRouter } from "next/router";
import EditorNav from "@/components/EditorNav";
import { useConfirmTabClose } from "./useConfirmTabClose";
import { debounce } from "lodash";
const saveDebounceDelay = 3000;

/**
* Write
Expand All @@ -28,7 +30,7 @@ import { useConfirmTabClose } from "./useConfirmTabClose";
*
* @returns
*/
export default function EditorWrapper({isInterview=false,tool=false}) {
export default function EditorWrapper({ isInterview = false, tool = false }) {
const router = useRouter();

const { user } = useUser({
Expand All @@ -43,7 +45,6 @@ export default function EditorWrapper({isInterview=false,tool=false}) {
addTwitterScript();
}, []);


//useLoad hook
//initialContent is null until loaded - so is 'false' when it's a new post
//useLoad hook
Expand All @@ -56,7 +57,11 @@ export default function EditorWrapper({isInterview=false,tool=false}) {
postId,
refetch,
setPostObject,
} = useLoad({ user, interview:isInterview, productName: tool?.name?tool.name:false});
} = useLoad({
user,
interview: isInterview,
productName: tool?.name ? tool.name : false,
});
//create new post hook
const { createPost } = useCreate();

Expand All @@ -66,6 +71,8 @@ export default function EditorWrapper({isInterview=false,tool=false}) {
//update post settings
updateSettings,
setHasUnsavedChanges,
saving,
setSaving,
hasUnsavedChanges,
} = useUpdate();

Expand All @@ -77,15 +84,30 @@ export default function EditorWrapper({isInterview=false,tool=false}) {
* save the content to local storage
* @param {*} param0
*/
const updatePost = ({ editor, json }) => {
const updatePost = ({ editor, json, forReview }) => {
// send the content to an API here (if new post only)
if(postId){
setHasUnsavedChanges(true);
}else{
localStorage.setItem("wipContent", JSON.stringify(json));
if (postId) {
setHasUnsavedChanges(true);
setTimeout(()=>{
setSaving(!saving)
},2700)
debounceSave({ editor, forReview });
} else {
localStorage.setItem("wipContent", JSON.stringify(json));
debounceSave({ editor, forReview });
}
};


/**
* for autosave
*/
const debounceSave = useCallback(
debounce(async ({ editor, forReview }) => {
setSaving(false)
savePost({ editor, forReview });
}, saveDebounceDelay),
[user, postId, postObject, postStatus]
);

/**
* savePost
Expand All @@ -98,8 +120,11 @@ export default function EditorWrapper({isInterview=false,tool=false}) {
*/
const savePost = async ({ editor, forReview }) => {
try {
if (postId) {
if (postId) {
// Updating an existing post

//debounce the save

const updatedPostObject = await updatePostById({
editor: editor,
postId: postId,
Expand All @@ -118,11 +143,11 @@ export default function EditorWrapper({isInterview=false,tool=false}) {
return true;
} else {
// Creating a new post
if(!router.query.slug){
if (!router.query.slug) {
const postInfo = await createPost({ user, editor, forReview });
// Set the new slug
localStorage.removeItem("wipContent");

router.replace(
{
pathname: router.pathname,
Expand All @@ -133,15 +158,11 @@ export default function EditorWrapper({isInterview=false,tool=false}) {
{ shallow: true }
);




refetch();
return true;
}else{
return false
} else {
return false;
}

}
} catch (e) {
console.log(e);
Expand Down Expand Up @@ -193,26 +214,20 @@ export default function EditorWrapper({isInterview=false,tool=false}) {
user?.isLoggedIn && (
<>
<div className="my-4">
{/* <Editor
canEdit={canEdit}
initialContent={initialContent}
postStatus={postStatus}
//functions
createPost={createPost}
savePost={savePost}
updatePost={updatePost}
/> */}

<Editor
canEdit={canEdit}
initialContent={initialContent}
postStatus={postStatus}

//saving status
hasUnsavedChanges={hasUnsavedChanges}
isSaving={saving}
//used for updating existing post
slug={slug}
postId={postId}
postObject={postObject}
//save and update content
savePost={savePost}
// savePost={debounceSave}
updatePost={updatePost}
//refetch post needed when the featured image is updated in post settings
refetchPost={refetch}
Expand Down
4 changes: 2 additions & 2 deletions components/Editor/Menus/FloatingMenu.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -322,9 +322,9 @@ const MenuFloating = ({ editor, isSelecting }) => {
useEffect(()=>{
let editor = document.querySelector('.tiptap.ProseMirror')
if(open){
editor.classList.add('menu-open')
editor?.classList?.add('menu-open')
}else{
editor.classList.remove('menu-open')
editor?.classList?.remove('menu-open')
}
},[open])

Expand Down
18 changes: 10 additions & 8 deletions components/Editor/editorHooks/editPost/useUpdate.js
Original file line number Diff line number Diff line change
Expand Up @@ -70,23 +70,25 @@ const useUpdate = () => {

const updateData = await axios(publishPostEndpointConfig)
.then(async function (response) {
setSaving(false);
setHasUnsavedChanges(false);
setTimeout(() => {
setSaving(false);
setHasUnsavedChanges(false);
}, 1000);
if (forReview) {
toast.success("Submitted for review!", {
duration: 5000,
});
localStorage.removeItem("wipContent");
} else if (postStatus == "publish") {
toast.success("Your post has been updated!", {
duration: 5000,
});
// toast.success("Your post has been updated!", {
// duration: 5000,
// });

localStorage.removeItem("wipContent");
} else {
toast.success("Your draft has been updated!", {
duration: 5000,
});
// toast.success("Your draft has been updated!", {
// duration: 5000,
// });

localStorage.removeItem("wipContent");
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
* @param {*} param0
*/
export const updatePostObject = ({updatedObject, existingObject}) => {
console.log('existingObject', existingObject)

const newFields={
content: updatedObject.content,
Expand Down

0 comments on commit 5b68166

Please sign in to comment.