Move clear cache to settings (#579)

src/components/EditorHeader/ControlPanel.jsx

@@ -82,6 +82,7 @@ import { toDBML } from "../../utils/exportAs/dbml";
 import { exportSavedData } from "../../utils/exportSavedData";
 import { nanoid } from "nanoid";
 import { getTableHeight } from "../../utils/utils";
+import { deleteFromCache, STORAGE_KEY } from "../../utils/cache";
 
 export default function ControlPanel({
   diagramId,
@@ -126,7 +127,7 @@ export default function ControlPanel({
   const { selectedElement, setSelectedElement } = useSelect();
   const { transform, setTransform } = useTransform();
   const { t, i18n } = useTranslation();
-  const { version, setGistId } = useContext(IdContext);
+  const { version, gistId, setGistId } = useContext(IdContext);
   const navigate = useNavigate();
 
   const invertLayout = (component) =>
@@ -1444,13 +1445,19 @@ export default function ControlPanel({
       export_saved_data: {
         function: exportSavedData,
       },
+      clear_cache: {
+        function: () => {
+          deleteFromCache(gistId);
+          Toast.success(t("cache_cleared"));
+        },
+      },
       flush_storage: {
         warning: {
           title: t("flush_storage"),
           message: t("are_you_sure_flush_storage"),
         },
         function: async () => {
-          localStorage.removeItem("versions_cache");
+          localStorage.removeItem(STORAGE_KEY);
           db.delete()
             .then(() => {
               Toast.success(t("storage_flushed"));

src/components/EditorHeader/SideSheet/Versions.jsx

@@ -23,22 +23,9 @@ import {
   useTypes,
 } from "../../../hooks";
 import { databases } from "../../../data/databases";
+import { loadCache, saveCache } from "../../../utils/cache";
 
 const LIMIT = 10;
-const STORAGE_KEY = "versions_cache";
-
-function loadCache() {
-  try {
-    const saved = localStorage.getItem(STORAGE_KEY);
-    return saved ? JSON.parse(saved) : {};
-  } catch {
-    return {};
-  }
-}
-
-function saveCache(cache) {
-  localStorage.setItem(STORAGE_KEY, JSON.stringify(cache));
-}
 
 export default function Versions({ open, title, setTitle }) {
   const { gistId, setGistId, version, setVersion } = useContext(IdContext);
@@ -236,12 +223,6 @@ export default function Versions({ open, title, setTitle }) {
     }
   };
 
-  const onClearCache = () => {
-    delete cacheRef[gistId];
-    saveCache(cacheRef);
-    Toast.success(t("cache_cleared"));
-  };
-
   useEffect(() => {
     if (gistId && open) {
       getRevisions();
@@ -250,9 +231,8 @@ export default function Versions({ open, title, setTitle }) {
 
   return (
     <div className="mx-5 relative h-full">
-      <div className="sticky top-0 z-10 sidesheet-theme pb-2 grid grid-cols-3 gap-2">
+      <div className="sticky top-0 z-10 sidesheet-theme pb-2">
         <Button
-          className={cacheRef[gistId] ? "col-span-2" : "col-span-3"}
           block
           icon={isRecording ? <Spin /> : <IconPlus />}
           disabled={isLoading || isRecording}
@@ -260,12 +240,6 @@ export default function Versions({ open, title, setTitle }) {
         >
           {t("record_version")}
         </Button>
-
-        {cacheRef[gistId] && (
-          <Button block type="danger" onClick={onClearCache}>
-            {t("clear_cache")}
-          </Button>
-        )}
       </div>
 
       {(!gistId || !versions.length) && !isLoading && (

src/utils/cache.js

@@ -0,0 +1,22 @@
+export const STORAGE_KEY = "versions_cache";
+
+export function loadCache() {
+  try {
+    const saved = localStorage.getItem(STORAGE_KEY);
+    return saved ? JSON.parse(saved) : {};
+  } catch {
+    return {};
+  }
+}
+
+export function saveCache(cache) {
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(cache));
+}
+
+export function deleteFromCache(key) {
+  const cache = loadCache();
+  if (cache[key]) {
+    delete cache[key];
+    saveCache(cache);
+  }
+}