From 8c1168ef3325dcbd74750076bc2264cbf23b8492 Mon Sep 17 00:00:00 2001
From: DanielJGeiger <1852529+DanielJGeiger@users.noreply.github.com>
Date: Tue, 7 Feb 2023 01:11:20 -0600
Subject: [PATCH] refactor: Make the example React app reusable without
 duplication (#6188)

---
 src/packages/excalidraw/example/App.tsx       |  24 ++++++++++++------
 src/packages/excalidraw/example/index.tsx     |   5 +++-
 .../example/public/{ => images}/doremon.png   | Bin
 .../example/public/{ => images}/excalibot.png | Bin
 .../example/public/{ => images}/pika.jpeg     | Bin
 .../example/public/{ => images}/rocket.jpeg   | Bin
 .../example/sidebar/ExampleSidebar.tsx        |   4 +--
 7 files changed, 22 insertions(+), 11 deletions(-)
 rename src/packages/excalidraw/example/public/{ => images}/doremon.png (100%)
 rename src/packages/excalidraw/example/public/{ => images}/excalibot.png (100%)
 rename src/packages/excalidraw/example/public/{ => images}/pika.jpeg (100%)
 rename src/packages/excalidraw/example/public/{ => images}/rocket.jpeg (100%)

diff --git a/src/packages/excalidraw/example/App.tsx b/src/packages/excalidraw/example/App.tsx
index e394d1a1..1f4a6c7f 100644
--- a/src/packages/excalidraw/example/App.tsx
+++ b/src/packages/excalidraw/example/App.tsx
@@ -80,7 +80,13 @@ const COMMENT_ICON_DIMENSION = 32;
 const COMMENT_INPUT_HEIGHT = 50;
 const COMMENT_INPUT_WIDTH = 150;
 
-export default function App() {
+export interface AppProps {
+  appTitle: string;
+  useCustom: (api: ExcalidrawImperativeAPI | null, customArgs?: any[]) => void;
+  customArgs?: any[];
+}
+
+export default function App({ appTitle, useCustom, customArgs }: AppProps) {
   const appRef = useRef<any>(null);
   const [viewModeEnabled, setViewModeEnabled] = useState(false);
   const [zenModeEnabled, setZenModeEnabled] = useState(false);
@@ -107,6 +113,8 @@ export default function App() {
   const [excalidrawAPI, setExcalidrawAPI] =
     useState<ExcalidrawImperativeAPI | null>(null);
 
+  useCustom(excalidrawAPI, customArgs);
+
   useHandleLibrary({ excalidrawAPI });
 
   useEffect(() => {
@@ -114,7 +122,7 @@ export default function App() {
       return;
     }
     const fetchData = async () => {
-      const res = await fetch("/rocket.jpeg");
+      const res = await fetch("/images/rocket.jpeg");
       const imageData = await res.blob();
       const reader = new FileReader();
       reader.readAsDataURL(imageData);
@@ -150,7 +158,7 @@ export default function App() {
           />
         )}
         <button
-          onClick={() => alert("This is dummy top right UI")}
+          onClick={() => alert("This is an empty top right UI")}
           style={{ height: "2.5rem" }}
         >
           {" "}
@@ -397,7 +405,7 @@ export default function App() {
           }}
         >
           <div className="comment-avatar">
-            <img src="doremon.png" alt="doremon" />
+            <img src="images/doremon.png" alt="doremon" />
           </div>
         </div>
       );
@@ -525,7 +533,7 @@ export default function App() {
   };
   return (
     <div className="App" ref={appRef}>
-      <h1> Excalidraw Example</h1>
+      <h1>{appTitle}</h1>
       <ExampleSidebar>
         <div className="button-wrapper">
           <button onClick={loadSceneOrLibrary}>Load Scene or Library</button>
@@ -611,15 +619,15 @@ export default function App() {
                   const collaborators = new Map();
                   collaborators.set("id1", {
                     username: "Doremon",
-                    avatarUrl: "doremon.png",
+                    avatarUrl: "images/doremon.png",
                   });
                   collaborators.set("id2", {
                     username: "Excalibot",
-                    avatarUrl: "excalibot.png",
+                    avatarUrl: "images/excalibot.png",
                   });
                   collaborators.set("id3", {
                     username: "Pika",
-                    avatarUrl: "pika.jpeg",
+                    avatarUrl: "images/pika.jpeg",
                   });
                   collaborators.set("id4", {
                     username: "fallback",
diff --git a/src/packages/excalidraw/example/index.tsx b/src/packages/excalidraw/example/index.tsx
index 825a1016..0f3bad30 100644
--- a/src/packages/excalidraw/example/index.tsx
+++ b/src/packages/excalidraw/example/index.tsx
@@ -8,6 +8,9 @@ const root = createRoot(rootElement);
 
 root.render(
   <StrictMode>
-    <App />
+    <App
+      appTitle={"Excalidraw Example"}
+      useCustom={(api: any, args?: any[]) => {}}
+    />
   </StrictMode>,
 );
diff --git a/src/packages/excalidraw/example/public/doremon.png b/src/packages/excalidraw/example/public/images/doremon.png
similarity index 100%
rename from src/packages/excalidraw/example/public/doremon.png
rename to src/packages/excalidraw/example/public/images/doremon.png
diff --git a/src/packages/excalidraw/example/public/excalibot.png b/src/packages/excalidraw/example/public/images/excalibot.png
similarity index 100%
rename from src/packages/excalidraw/example/public/excalibot.png
rename to src/packages/excalidraw/example/public/images/excalibot.png
diff --git a/src/packages/excalidraw/example/public/pika.jpeg b/src/packages/excalidraw/example/public/images/pika.jpeg
similarity index 100%
rename from src/packages/excalidraw/example/public/pika.jpeg
rename to src/packages/excalidraw/example/public/images/pika.jpeg
diff --git a/src/packages/excalidraw/example/public/rocket.jpeg b/src/packages/excalidraw/example/public/images/rocket.jpeg
similarity index 100%
rename from src/packages/excalidraw/example/public/rocket.jpeg
rename to src/packages/excalidraw/example/public/images/rocket.jpeg
diff --git a/src/packages/excalidraw/example/sidebar/ExampleSidebar.tsx b/src/packages/excalidraw/example/sidebar/ExampleSidebar.tsx
index 0fa5bf4e..793d17b0 100644
--- a/src/packages/excalidraw/example/sidebar/ExampleSidebar.tsx
+++ b/src/packages/excalidraw/example/sidebar/ExampleSidebar.tsx
@@ -10,8 +10,8 @@ export default function Sidebar({ children }: { children: React.ReactNode }) {
           x
         </button>
         <div className="sidebar-links">
-          <button>Dummy Home</button>
-          <button>Dummy About</button>{" "}
+          <button>Empty Home</button>
+          <button>Empty About</button>{" "}
         </div>
       </div>
       <div className={`${open ? "sidebar-open" : ""}`}>