Remove previously loaded scenes (#734)

As mentioned in #724, the current implementation is suboptimal. Let's remove it until we come back with a better design.

Fixes #724

src/components/StoredScenesList.tsx

@@ -1,33 +0,0 @@
-import React from "react";
-import { PreviousScene } from "../scene/types";
-import { t } from "../i18n";
-
-interface StoredScenesListProps {
-  scenes: PreviousScene[];
-  currentId?: string;
-  onChange: (selectedId: string, k?: string) => {};
-}
-
-export function StoredScenesList({
-  scenes,
-  currentId,
-  onChange,
-}: StoredScenesListProps) {
-  return (
-    <select
-      className="stored-ids-select"
-      onChange={({ currentTarget }) => {
-        const scene = scenes[(currentTarget.value as unknown) as number];
-        onChange(scene.id, scene.k);
-      }}
-      value={currentId}
-      title={t("buttons.previouslyLoadedScenes")}
-    >
-      {scenes.map((scene, i) => (
-        <option key={i} value={i}>
-          id={scene.id}
-        </option>
-      ))}
-    </select>
-  );
-}

src/index.tsx

@@ -31,7 +31,6 @@ import {
   hasStroke,
   hasText,
   exportCanvas,
-  loadedScenes,
   loadScene,
   calculateScrollCenter,
   loadFromBlob,
@@ -96,7 +95,6 @@ import { ExportDialog } from "./components/ExportDialog";
 import { LanguageList } from "./components/LanguageList";
 import { Point } from "roughjs/bin/geometry";
 import { t, languages, setLanguage, getLanguage } from "./i18n";
-import { StoredScenesList } from "./components/StoredScenesList";
 import { HintViewer } from "./components/HintViewer";
 
 import { copyToAppClipboard, getClipboardContent } from "./clipboard";
@@ -318,22 +316,6 @@ const LayerUI = React.memo(
       );
     }
 
-    function renderIdsDropdown() {
-      const scenes = loadedScenes();
-      if (scenes.length === 0) {
-        return;
-      }
-      return (
-        <StoredScenesList
-          scenes={scenes}
-          currentId={appState.selectedId}
-          onChange={async (id, k) =>
-            actionManager.updater(await loadScene(id, k))
-          }
-        />
-      );
-    }
-
     return (
       <>
         <FixedSideContainer side="top">
@@ -400,7 +382,6 @@ const LayerUI = React.memo(
             languages={languages}
             currentLanguage={language}
           />
-          {renderIdsDropdown()}
           {appState.scrolledOutside && (
             <button
               className="scroll-back-to-content"

src/locales/en.json

@@ -52,7 +52,6 @@
     "getShareableLink": "Get shareable link",
     "close": "Close",
     "selectLanguage": "Select Language",
-    "previouslyLoadedScenes": "Previously loaded scenes",
     "scrollBackToContent": "Scroll back to content"
   },
   "alerts": {

src/locales/es.json

@@ -52,8 +52,7 @@
     "getShareableLink": "Obtener enlace para compartir",
     "showExportDialog": "Mostrar diálogo para exportar",
     "close": "Cerrar",
-    "selectLanguage": "Seleccionar idioma",
+    "selectLanguage": "Seleccionar idioma"
-    "previouslyLoadedScenes": "Escenas previamente cargadas"
   },
   "alerts": {
     "clearReset": "Esto limpiará todo el lienzo. Estás seguro?",

src/locales/fr.json

@@ -46,7 +46,6 @@
     "save": "Sauvegarder",
     "load": "Ouvrir",
     "getShareableLink": "Obtenir un lien de partage",
-    "previouslyLoadedScenes": "Scènes précédemment chargées",
     "scrollBackToContent": "Revenir au contenu"
   },
   "alerts": {

src/locales/nb-no.json

@@ -52,7 +52,6 @@
     "getShareableLink": "Få delingslenke",
     "close": "Lukk",
     "selectLanguage": "Velg språk",
-    "previouslyLoadedScenes": "Tidligere åpnete scener",
     "scrollBackToContent": "Skroll tilbake til innhold"
   },
   "alerts": {

src/locales/pl.json

@@ -52,7 +52,6 @@
     "getShareableLink": "Udostępnij",
     "close": "Zamknij",
     "selectLanguage": "Wybierz język",
-    "previouslyLoadedScenes": "Ostatnie dokumenty",
     "scrollBackToContent": "Wróć do obszaru roboczego"
   },
   "alerts": {

src/locales/pt.json

@@ -46,7 +46,6 @@
     "save": "Guardar",
     "load": "Carregar",
     "getShareableLink": "Obter um link de partilha",
-    "previouslyLoadedScenes": "Cenas carregadas anteriormente",
     "scrollBackToContent": "Voltar ao conteúdo"
   },
   "alerts": {

src/locales/ru.json

@@ -51,8 +51,7 @@
     "load": "Загрузить",
     "getShareableLink": "Получить доступ по ссылке",
     "close": "Закрыть",
-    "selectLanguage": "Выбрать язык",
+    "selectLanguage": "Выбрать язык"
-    "previouslyLoadedScenes": "Ранее загруженные сцены"
   },
   "alerts": {
     "clearReset": "Это очистит весь холст. Вы уверены?",

src/scene/data.ts

@@ -7,7 +7,7 @@ import {
 } from "../appState";
 
 import { AppState } from "../types";
-import { ExportType, PreviousScene } from "./types";
+import { ExportType } from "./types";
 import { exportToCanvas, exportToSvg } from "./export";
 import nanoid from "nanoid";
 import { fileOpen, fileSave } from "browser-nativefs";
@@ -18,7 +18,6 @@ import { t } from "../i18n";
 import { copyCanvasToClipboardAsPng } from "../clipboard";
 
 const LOCAL_STORAGE_KEY = "excalidraw";
-const LOCAL_STORAGE_SCENE_PREVIOUS_KEY = "excalidraw-previos-scenes";
 const LOCAL_STORAGE_KEY_STATE = "excalidraw-state";
 const BACKEND_GET = "https://json.excalidraw.com/api/v1/";
 
@@ -434,47 +433,6 @@ export function saveToLocalStorage(
   );
 }
 
-/**
- * Returns the list of ids in Local Storage
- * @returns array
- */
-export function loadedScenes(): PreviousScene[] {
-  const storedPreviousScenes = localStorage.getItem(
-    LOCAL_STORAGE_SCENE_PREVIOUS_KEY,
-  );
-  if (storedPreviousScenes) {
-    try {
-      return JSON.parse(storedPreviousScenes);
-    } catch (e) {
-      console.error("Could not parse previously stored ids");
-      return [];
-    }
-  }
-  return [];
-}
-
-/**
- * Append id to the list of Previous Scenes in Local Storage if not there yet
- * @param id string
- */
-export function addToLoadedScenes(id: string, k: string | undefined): void {
-  const scenes = [...loadedScenes()];
-  const newScene = scenes.every(scene => scene.id !== id);
-
-  if (newScene) {
-    scenes.push({
-      timestamp: Date.now(),
-      id,
-      k,
-    });
-  }
-
-  localStorage.setItem(
-    LOCAL_STORAGE_SCENE_PREVIOUS_KEY,
-    JSON.stringify(scenes),
-  );
-}
-
 export async function loadScene(id: string | null, k?: string) {
   let data;
   let selectedId;
@@ -482,7 +440,6 @@ export async function loadScene(id: string | null, k?: string) {
     // k is the private key used to decrypt the content from the server, take
     // extra care not to leak it
     data = await importFromBackend(id, k);
-    addToLoadedScenes(id, k);
     selectedId = id;
     window.history.replaceState({}, "Excalidraw", window.location.origin);
   } else {

src/scene/index.ts

@@ -16,8 +16,6 @@ export {
   saveToLocalStorage,
   exportToBackend,
   importFromBackend,
-  addToLoadedScenes,
-  loadedScenes,
   loadScene,
   calculateScrollCenter,
 } from "./data";

src/scene/types.ts

@@ -16,10 +16,4 @@ export interface Scene {
   elements: ExcalidrawTextElement[];
 }
 
-export interface PreviousScene {
-  id: string;
-  k?: string;
-  timestamp: number;
-}
-
 export type ExportType = "png" | "clipboard" | "backend" | "svg";

src/styles.scss

@@ -238,15 +238,6 @@ button,
   bottom: 0;
 }
 
-.stored-ids-select {
-  @extend .dropdown-select;
-  padding: 0 0.5em 0 1.7em;
-  bottom: 0;
-  left: 0;
-  background-position: left 0.7em top 50%, 0 0;
-  margin-left: 0.5em;
-}
-
 .visually-hidden {
   position: absolute !important;
   height: 1px;