From a76cf731a6af305531c5ca472c5023251451f622 Mon Sep 17 00:00:00 2001
From: Anton <antonoutkine@gmail.com>
Date: Sun, 7 Jan 2024 10:05:17 -0600
Subject: [PATCH] Add save animation and reporting

---
 src/garage/components/Bar.tsx | 34 +++++++++++++++++++++++++++++-----
 src/garage/store.tsx          | 22 ++++++++++++++--------
 2 files changed, 43 insertions(+), 13 deletions(-)

diff --git a/src/garage/components/Bar.tsx b/src/garage/components/Bar.tsx
index 0957b19..48933bf 100644
--- a/src/garage/components/Bar.tsx
+++ b/src/garage/components/Bar.tsx
@@ -1,9 +1,11 @@
-import { For, Match, Switch } from 'solid-js'
+import { For, Match, Switch, createSignal } from 'solid-js'
 import { ROUTES, useStore } from '../store'
 import { LANGS } from '../utils/constants'
 
 const Bar = () => {
   const [state, actions] = useStore()
+  const [saveAnimation, setSaveAnimation] = createSignal('');
+  const [hasSaveError, setHasSaveError] = createSignal(false);
 
   const shared = (
     <div class="d-flex align-items-center">
@@ -14,6 +16,19 @@ const Bar = () => {
     </div>
   )
 
+  const save = async () => {
+    try {
+      await actions.saveRobotCode()
+      if (saveAnimation() === 'disappearing-one') {
+        setSaveAnimation('disappearing-two')
+      } else {
+        setSaveAnimation('disappearing-one')
+      }
+    } catch (e) {
+      setHasSaveError(true)
+    }
+  }
+
   const barForUser = () => (
     <>
       <div class="d-flex align-items-center">
@@ -23,12 +38,21 @@ const Bar = () => {
             r2
           </a>
         </div>
-        <button class="button ms-4" onClick={actions.saveRobotCode}>
+        <button class="button ms-4" onClick={save}>
           save
         </button>
-        <p class="mx-3 disappearing-" style="visibility: hidden;">
-          saved
-        </p>
+        <Switch>
+          <Match when={saveAnimation() !== ''}>
+            <p class={"mx-3 " + saveAnimation()}>
+              saved
+            </p>
+          </Match>
+          <Match when={hasSaveError()}>
+            <p class="mx-3 internal-error">
+              error
+            </p>
+          </Match>
+        </Switch>
       </div>
       <div class="d-flex align-items-center">
         <a class="me-4" href="/builtin" target="_blank">
diff --git a/src/garage/store.tsx b/src/garage/store.tsx
index 2d26558..ad29bcb 100644
--- a/src/garage/store.tsx
+++ b/src/garage/store.tsx
@@ -1,5 +1,6 @@
 import { createContext, ParentProps, useContext } from 'solid-js'
 import { createStore, SetStoreFunction } from 'solid-js/store'
+import { captureException } from '@sentry/browser'
 import { WorkerWrapper } from './worker/workerWrapper'
 import { Lang, OUR_TEAM } from './utils/constants'
 import { CallbackParams, EvalInfo } from './worker/match.worker'
@@ -133,14 +134,19 @@ const createActions = (state: State, setState: SetStoreFunction<State>) => ({
       throw new Error('Missing siteInfo')
     }
 
-    await fetch(ROUTES.updateRobotCode(state.siteInfo.robotId), {
-      method: 'POST',
-      body: JSON.stringify({ code: state.code }),
-      headers: {
-        "Content-Type": "application/json",
-      },
-    })
-    setState({ savedCode: state.code })
+    try {
+      await fetch(ROUTES.updateRobotCode(state.siteInfo.robotId), {
+        method: 'POST',
+        body: JSON.stringify({ code: state.code }),
+        headers: {
+          "Content-Type": "application/json",
+        },
+      })
+      setState({ savedCode: state.code })
+    } catch (e) {
+      captureException(e)
+      throw e
+    }
   },
   toggleSettingsMenu() {
     setState({ viewingSettings: !state.viewingSettings })