From a765d22f4b1115d6bc7bc818f2a40cfb859c7ee4 Mon Sep 17 00:00:00 2001
From: Abdullah Atta <abdullahatta@streetwriters.co>
Date: Thu, 7 Mar 2024 12:18:37 +0500
Subject: [PATCH] web: fix crashes when moving tabs

---
 apps/web/src/components/editor/action-bar.tsx | 15 +++---
 .../src/components/error-boundary/index.tsx   | 50 ++++++++-----------
 2 files changed, 28 insertions(+), 37 deletions(-)

diff --git a/apps/web/src/components/editor/action-bar.tsx b/apps/web/src/components/editor/action-bar.tsx
index 36d4058ac..f586991f7 100644
--- a/apps/web/src/components/editor/action-bar.tsx
+++ b/apps/web/src/components/editor/action-bar.tsx
@@ -220,21 +220,18 @@ function TabStrip() {
             }}
             onMove={(from, to) => {
               if (from === to) return;
-
               useEditorStore.setState((state) => {
-                const direction =
-                  to === 0 ? "start" : from > to ? "left" : "right";
+                // if the tab where this tab is being dropped is pinned,
+                // let's pin our tab too.
+                if (state.sessions[to].pinned)
+                  state.sessions[from].pinned = true;
+
                 const [fromTab] = state.sessions.splice(from, 1);
-                const newIndex =
-                  direction === "start" || direction === "right" ? to : to - 1;
 
                 // unpin the tab if it is moved.
                 if (fromTab.pinned) fromTab.pinned = false;
-                // if the tab where this tab is being dropped is pinned,
-                // let's pin our tab too.
-                if (state.sessions[to].pinned) fromTab.pinned = true;
 
-                state.sessions.splice(newIndex, 0, fromTab);
+                state.sessions.splice(to, 0, fromTab);
               });
             }}
             onClose={() => useEditorStore.getState().closeSessions(session.id)}
diff --git a/apps/web/src/components/error-boundary/index.tsx b/apps/web/src/components/error-boundary/index.tsx
index 3e8db053e..26c312fdd 100644
--- a/apps/web/src/components/error-boundary/index.tsx
+++ b/apps/web/src/components/error-boundary/index.tsx
@@ -84,19 +84,25 @@ export function ErrorComponent({ error, resetErrorBoundary }: FallbackProps) {
               How to fix it?
             </Text>
             <Text variant="body">{help.action}</Text>
-            <Flex sx={{ gap: 1 }}>
-              <Button
-                variant="error"
-                sx={{ alignSelf: "start", px: 30, mt: 1 }}
-                onClick={() =>
-                  help.fix().catch((e) => {
-                    console.error(e);
-                    alert(errorToString(e));
-                  })
-                }
-              >
-                Fix it
-              </Button>
+          </>
+        ) : null}
+        <Flex sx={{ gap: 1 }}>
+          {help ? (
+            <Button
+              variant="error"
+              sx={{ alignSelf: "start", px: 30, mt: 1 }}
+              onClick={() =>
+                help.fix().catch((e) => {
+                  console.error(e);
+                  alert(errorToString(e));
+                })
+              }
+            >
+              Fix it
+            </Button>
+          ) : (
+            <>
+              {" "}
               <Button
                 variant="secondary"
                 sx={{ alignSelf: "start", px: 30, mt: 1 }}
@@ -128,21 +134,9 @@ ${getDeviceInfo()}`
               >
                 Contact support
               </Button>
-            </Flex>
-          </>
-        ) : (
-          <>
-            <Button
-              variant="secondary"
-              sx={{ alignSelf: "start", px: 30, mt: 1 }}
-              onClick={() =>
-                window.open("mailto:support@streetwriters.co", "_blank")
-              }
-            >
-              Contact support
-            </Button>
-          </>
-        )}
+            </>
+          )}
+        </Flex>
       </Flex>
     </BaseThemeProvider>
   );