feat: Add cachedFData state to EntryPage component

This commit adds a new state variable, cachedFData, to the EntryPage component. The cachedFData state is used to store the previous value of fData before making changes to it. This allows for easy rollback to the last saved state in case of failed changes. The commit also includes minor code cleanup and commented out code for future reference.

src/components/EntryPage.tsx

@@ -88,6 +88,7 @@ const EntryPage = () => {
     useState<TransactionManager | null>(null);
   const [tempIds, setTempIds] = useState<string[]>([]);
   const [tempCommentIDs, setTempCommentIDs] = useState<any[]>([]);
+  const [cachedFData, setCachedFData] = useState<any>(null);
 
   const openModal = (key: string) =>
     setModalStates((prev) => ({ ...prev, [key]: true }));
@@ -728,7 +729,8 @@ const EntryPage = () => {
       setIsSaving(false);
       alert('All changes saved successfully.');
       // reload the page
-      window.location.reload();
+      // setCachedFData(fData);
+      // window.location.reload();
     } catch (error) {
       alert('Failed to save changes. Rolling back to the last saved state.');
       // Rollback UI to last saved state
@@ -1052,6 +1054,12 @@ const EntryPage = () => {
         comments: [],
         internalLinks: [],
       });
+
+      if (cachedFData) {
+        setFData(cachedFData);
+        console.log('using cached fdata:', cachedFData);
+        return;
+      }
       await generateFData(data, data.metadata.aliasData);
       // console.log('setting fdata:', fdata);
       // setFData(fdata);
@@ -1202,7 +1210,8 @@ const EntryPage = () => {
                   ...data.metadata,
                 });
               }
-              window.location.reload();
+              setCachedFData(fData);
+              //window.location.reload();
             }}
           >
             {data.metadata.isStarred ? 'Unstar' : 'Star'}

src/components/ForceDirectedGraph.tsx

@@ -280,6 +280,7 @@ const ForceDirectedGraph = ({ data }: any) => {
         }),
     );
   }, [data]);
+
 
   return (
     <div ref={containerRef} style={{ width: '100%', margin: '0 auto' }}>
@@ -289,18 +290,9 @@ const ForceDirectedGraph = ({ data }: any) => {
         onRequestClose={closeModal}
         contentLabel="Node Content"
         ariaHideApp={false}
-        style={{
-          content: {
-            top: '50%',
-            left: '50%',
-            right: 'auto',
-            bottom: 'auto',
-            marginRight: '-50%',
-            transform: 'translate(-50%, -50%)',
-          },
-        }}
       >
-        {modalContent.image ? (
+      <div className="flex flex-col">
+      {modalContent.image ? (
           <img
             src={modalContent.image}
             alt="thumbnail"
@@ -317,6 +309,7 @@ const ForceDirectedGraph = ({ data }: any) => {
         <button onClick={closeModal} type="button">
           Close
         </button>
+      </div>
       </Modal>
     </div>
   );