Merge pull request #209 from xMartin/sync-status

Display sync status #150
xMartin · Apr 25, 2024 · 7b81ffc · 7b81ffc
2 parents bf20789 + ccc540a
commit 7b81ffc
Show file tree

Hide file tree

Showing 16 changed files with 788 additions and 224 deletions.
diff --git a/src/app.ts b/src/app.ts
@@ -6,6 +6,7 @@ import {
   getTransactions,
   getAccounts,
   getCurrentLocation,
+  getCurrentTabStatus,
 } from "./redux/selectors";
 import {
   navigateToTabs,
@@ -38,6 +39,9 @@ function mapStateToProps(state: AllState) {
     currentLocation: getCurrentLocation(state),
     initialLoadingDone: state.app.initialLoadingDone,
     tabInfo: getTabInfo(state),
+    currentTabLastSyncedSucessfully:
+      getCurrentTabStatus(state)?.lastSyncedSuccessfully,
+    currentTabSyncError: getCurrentTabStatus(state)?.syncError,
     transaction: state.app.docsById[
       state.location.payload.transactionId
     ] as Transaction,

diff --git a/src/components/__snapshots__/main.test.tsx.snap b/src/components/__snapshots__/main.test.tsx.snap
@@ -5,28 +5,64 @@ exports[`renders empty view with no tab selected 1`] = `
   className="scene mainScene"
 >
   <div
-    className="header header-app"
+    className="header-container"
   >
-    <button
-      className="left"
-      onClick={[MockFunction spy]}
+    <div
+      className="header header-app"
     >
-      <svg
-        height="16"
-        width="16"
+      <button
+        className="left"
+        onClick={[MockFunction spy]}
       >
-        <path
-          d="m2 2c-0.554 0-1 0.446-1 1s0.446 1 1 1h12c0.554 0 1-0.446 1-1s-0.446-1-1-1h-12zm0 5c-0.554 0-1 0.446-1 1s0.446 1 1 1h12c0.554 0 1-0.446 1-1s-0.446-1-1-1h-12zm0 5c-0.554 0-1 0.446-1 1s0.446 1 1 1h12c0.554 0 1-0.446 1-1s-0.446-1-1-1h-12z"
-        />
-      </svg>
-    </button>
-    <h2 />
-    <button
-      className="create"
-      onClick={[Function]}
-    >
-      +
-    </button>
+        <svg
+          height="16"
+          width="16"
+        >
+          <path
+            d="m2 2c-0.554 0-1 0.446-1 1s0.446 1 1 1h12c0.554 0 1-0.446 1-1s-0.446-1-1-1h-12zm0 5c-0.554 0-1 0.446-1 1s0.446 1 1 1h12c0.554 0 1-0.446 1-1s-0.446-1-1-1h-12zm0 5c-0.554 0-1 0.446-1 1s0.446 1 1 1h12c0.554 0 1-0.446 1-1s-0.446-1-1-1h-12z"
+          />
+        </svg>
+      </button>
+      <h2 />
+      <div
+        className="header-slot-sync-status"
+      >
+        <div
+          className="sync-status"
+        >
+          <div
+            className="icon"
+          >
+            <svg
+              className="cloud"
+              viewBox="0 0 122.88 79.13"
+            >
+              <g>
+                <path
+                  d="M86.35,29.93c-0.75,0.37-1.51,0.78-2.26,1.21c-2.25,1.32-4.47,2.93-6.74,4.78l-4.84-5.54c1.67-1.55,3.48-2.96,5.4-4.21 c1.53-1,3.13-1.89,4.78-2.65c0.66-0.33,1.32-0.64,2-0.93c-3.19-5.65-7.78-9.7-12.98-12.2c-5.2-2.49-11.02-3.45-16.69-2.9 c-5.63,0.54-11.1,2.59-15.62,6.1c-5.23,4.05-9.2,10.11-10.73,18.14l-0.48,2.51l-2.5,0.44c-2.45,0.43-4.64,1.02-6.56,1.77 c-1.86,0.72-3.52,1.61-4.97,2.66c-1.16,0.84-2.16,1.78-3.01,2.8c-2.63,3.15-3.85,7.1-3.82,11.1c0.03,4.06,1.35,8.16,3.79,11.53 c0.91,1.25,1.96,2.4,3.16,3.4c1.22,1.01,2.59,1.85,4.13,2.48c1.53,0.63,3.22,1.08,5.09,1.34l72.55,0c3.53-0.85,6.65-2,9.3-3.48 c2.63-1.47,4.78-3.26,6.39-5.41c2.5-3.33,3.73-8.04,3.78-12.87c0.06-5.07-1.18-10.16-3.59-13.86c-0.69-1.07-1.45-2.03-2.25-2.89 c-3.61-3.89-8.19-5.59-12.95-5.62C93.3,27.6,89.73,28.43,86.35,29.93L86.35,29.93L86.35,29.93z M91.99,20.65 c1.6-0.25,3.2-0.38,4.79-0.36c6.72,0.05,13.2,2.45,18.3,7.95c1.07,1.15,2.08,2.45,3.03,3.9c3.2,4.92,4.84,11.49,4.77,17.92 c-0.07,6.31-1.77,12.59-5.25,17.21c-2.27,3.01-5.18,5.47-8.67,7.42c-3.36,1.88-7.28,3.31-11.68,4.33l-0.82,0.1l-73.08,0l-0.46-0.04 c-2.67-0.34-5.09-0.97-7.29-1.88c-2.27-0.94-4.28-2.15-6.05-3.63c-1.68-1.4-3.15-2.99-4.4-4.72C1.84,64.25,0.04,58.63,0,53.03 c-0.04-5.66,1.72-11.29,5.52-15.85c1.23-1.48,2.68-2.84,4.34-4.04c1.93-1.4,4.14-2.58,6.64-3.55c1.72-0.67,3.56-1.23,5.5-1.68 c2.2-8.74,6.89-15.47,12.92-20.14c5.64-4.37,12.43-6.92,19.42-7.59c6.96-0.67,14.12,0.51,20.55,3.6 C81.9,7.15,88.02,12.76,91.99,20.65L91.99,20.65L91.99,20.65z"
+                />
+              </g>
+            </svg>
+            <span
+              className="status"
+            >
+              ❌
+            </span>
+          </div>
+          <div
+            className="tooltip"
+          >
+            Not synced, yet
+          </div>
+        </div>
+      </div>
+      <button
+        className="create"
+        onClick={[Function]}
+      >
+        +
+      </button>
+    </div>
   </div>
   <div
     className="content"
@@ -99,28 +135,64 @@ exports[`renders missing tab info error 1`] = `
   className="scene mainScene"
 >
   <div
-    className="header header-app"
+    className="header-container"
   >
-    <button
-      className="left"
-      onClick={[MockFunction spy]}
+    <div
+      className="header header-app"
     >
-      <svg
-        height="16"
-        width="16"
+      <button
+        className="left"
+        onClick={[MockFunction spy]}
       >
-        <path
-          d="m2 2c-0.554 0-1 0.446-1 1s0.446 1 1 1h12c0.554 0 1-0.446 1-1s-0.446-1-1-1h-12zm0 5c-0.554 0-1 0.446-1 1s0.446 1 1 1h12c0.554 0 1-0.446 1-1s-0.446-1-1-1h-12zm0 5c-0.554 0-1 0.446-1 1s0.446 1 1 1h12c0.554 0 1-0.446 1-1s-0.446-1-1-1h-12z"
-        />
-      </svg>
-    </button>
-    <h2 />
-    <button
-      className="create"
-      onClick={[Function]}
-    >
-      +
-    </button>
+        <svg
+          height="16"
+          width="16"
+        >
+          <path
+            d="m2 2c-0.554 0-1 0.446-1 1s0.446 1 1 1h12c0.554 0 1-0.446 1-1s-0.446-1-1-1h-12zm0 5c-0.554 0-1 0.446-1 1s0.446 1 1 1h12c0.554 0 1-0.446 1-1s-0.446-1-1-1h-12zm0 5c-0.554 0-1 0.446-1 1s0.446 1 1 1h12c0.554 0 1-0.446 1-1s-0.446-1-1-1h-12z"
+          />
+        </svg>
+      </button>
+      <h2 />
+      <div
+        className="header-slot-sync-status"
+      >
+        <div
+          className="sync-status"
+        >
+          <div
+            className="icon"
+          >
+            <svg
+              className="cloud"
+              viewBox="0 0 122.88 79.13"
+            >
+              <g>
+                <path
+                  d="M86.35,29.93c-0.75,0.37-1.51,0.78-2.26,1.21c-2.25,1.32-4.47,2.93-6.74,4.78l-4.84-5.54c1.67-1.55,3.48-2.96,5.4-4.21 c1.53-1,3.13-1.89,4.78-2.65c0.66-0.33,1.32-0.64,2-0.93c-3.19-5.65-7.78-9.7-12.98-12.2c-5.2-2.49-11.02-3.45-16.69-2.9 c-5.63,0.54-11.1,2.59-15.62,6.1c-5.23,4.05-9.2,10.11-10.73,18.14l-0.48,2.51l-2.5,0.44c-2.45,0.43-4.64,1.02-6.56,1.77 c-1.86,0.72-3.52,1.61-4.97,2.66c-1.16,0.84-2.16,1.78-3.01,2.8c-2.63,3.15-3.85,7.1-3.82,11.1c0.03,4.06,1.35,8.16,3.79,11.53 c0.91,1.25,1.96,2.4,3.16,3.4c1.22,1.01,2.59,1.85,4.13,2.48c1.53,0.63,3.22,1.08,5.09,1.34l72.55,0c3.53-0.85,6.65-2,9.3-3.48 c2.63-1.47,4.78-3.26,6.39-5.41c2.5-3.33,3.73-8.04,3.78-12.87c0.06-5.07-1.18-10.16-3.59-13.86c-0.69-1.07-1.45-2.03-2.25-2.89 c-3.61-3.89-8.19-5.59-12.95-5.62C93.3,27.6,89.73,28.43,86.35,29.93L86.35,29.93L86.35,29.93z M91.99,20.65 c1.6-0.25,3.2-0.38,4.79-0.36c6.72,0.05,13.2,2.45,18.3,7.95c1.07,1.15,2.08,2.45,3.03,3.9c3.2,4.92,4.84,11.49,4.77,17.92 c-0.07,6.31-1.77,12.59-5.25,17.21c-2.27,3.01-5.18,5.47-8.67,7.42c-3.36,1.88-7.28,3.31-11.68,4.33l-0.82,0.1l-73.08,0l-0.46-0.04 c-2.67-0.34-5.09-0.97-7.29-1.88c-2.27-0.94-4.28-2.15-6.05-3.63c-1.68-1.4-3.15-2.99-4.4-4.72C1.84,64.25,0.04,58.63,0,53.03 c-0.04-5.66,1.72-11.29,5.52-15.85c1.23-1.48,2.68-2.84,4.34-4.04c1.93-1.4,4.14-2.58,6.64-3.55c1.72-0.67,3.56-1.23,5.5-1.68 c2.2-8.74,6.89-15.47,12.92-20.14c5.64-4.37,12.43-6.92,19.42-7.59c6.96-0.67,14.12,0.51,20.55,3.6 C81.9,7.15,88.02,12.76,91.99,20.65L91.99,20.65L91.99,20.65z"
+                />
+              </g>
+            </svg>
+            <span
+              className="status"
+            >
+              ❌
+            </span>
+          </div>
+          <div
+            className="tooltip"
+          >
+            Not synced, yet
+          </div>
+        </div>
+      </div>
+      <button
+        className="create"
+        onClick={[Function]}
+      >
+        +
+      </button>
+    </div>
   </div>
   <div
     className="content"
@@ -193,30 +265,66 @@ exports[`renders summary and transaction list 1`] = `
   className="scene mainScene"
 >
   <div
-    className="header header-app"
+    className="header-container"
   >
-    <button
-      className="left"
-      onClick={[MockFunction spy]}
+    <div
+      className="header header-app"
     >
-      <svg
-        height="16"
-        width="16"
+      <button
+        className="left"
+        onClick={[MockFunction spy]}
       >
-        <path
-          d="m2 2c-0.554 0-1 0.446-1 1s0.446 1 1 1h12c0.554 0 1-0.446 1-1s-0.446-1-1-1h-12zm0 5c-0.554 0-1 0.446-1 1s0.446 1 1 1h12c0.554 0 1-0.446 1-1s-0.446-1-1-1h-12zm0 5c-0.554 0-1 0.446-1 1s0.446 1 1 1h12c0.554 0 1-0.446 1-1s-0.446-1-1-1h-12z"
-        />
-      </svg>
-    </button>
-    <h2>
-      My Tab
-    </h2>
-    <button
-      className="create"
-      onClick={[Function]}
-    >
-      +
-    </button>
+        <svg
+          height="16"
+          width="16"
+        >
+          <path
+            d="m2 2c-0.554 0-1 0.446-1 1s0.446 1 1 1h12c0.554 0 1-0.446 1-1s-0.446-1-1-1h-12zm0 5c-0.554 0-1 0.446-1 1s0.446 1 1 1h12c0.554 0 1-0.446 1-1s-0.446-1-1-1h-12zm0 5c-0.554 0-1 0.446-1 1s0.446 1 1 1h12c0.554 0 1-0.446 1-1s-0.446-1-1-1h-12z"
+          />
+        </svg>
+      </button>
+      <h2>
+        My Tab
+      </h2>
+      <div
+        className="header-slot-sync-status"
+      >
+        <div
+          className="sync-status"
+        >
+          <div
+            className="icon"
+          >
+            <svg
+              className="cloud"
+              viewBox="0 0 122.88 79.13"
+            >
+              <g>
+                <path
+                  d="M86.35,29.93c-0.75,0.37-1.51,0.78-2.26,1.21c-2.25,1.32-4.47,2.93-6.74,4.78l-4.84-5.54c1.67-1.55,3.48-2.96,5.4-4.21 c1.53-1,3.13-1.89,4.78-2.65c0.66-0.33,1.32-0.64,2-0.93c-3.19-5.65-7.78-9.7-12.98-12.2c-5.2-2.49-11.02-3.45-16.69-2.9 c-5.63,0.54-11.1,2.59-15.62,6.1c-5.23,4.05-9.2,10.11-10.73,18.14l-0.48,2.51l-2.5,0.44c-2.45,0.43-4.64,1.02-6.56,1.77 c-1.86,0.72-3.52,1.61-4.97,2.66c-1.16,0.84-2.16,1.78-3.01,2.8c-2.63,3.15-3.85,7.1-3.82,11.1c0.03,4.06,1.35,8.16,3.79,11.53 c0.91,1.25,1.96,2.4,3.16,3.4c1.22,1.01,2.59,1.85,4.13,2.48c1.53,0.63,3.22,1.08,5.09,1.34l72.55,0c3.53-0.85,6.65-2,9.3-3.48 c2.63-1.47,4.78-3.26,6.39-5.41c2.5-3.33,3.73-8.04,3.78-12.87c0.06-5.07-1.18-10.16-3.59-13.86c-0.69-1.07-1.45-2.03-2.25-2.89 c-3.61-3.89-8.19-5.59-12.95-5.62C93.3,27.6,89.73,28.43,86.35,29.93L86.35,29.93L86.35,29.93z M91.99,20.65 c1.6-0.25,3.2-0.38,4.79-0.36c6.72,0.05,13.2,2.45,18.3,7.95c1.07,1.15,2.08,2.45,3.03,3.9c3.2,4.92,4.84,11.49,4.77,17.92 c-0.07,6.31-1.77,12.59-5.25,17.21c-2.27,3.01-5.18,5.47-8.67,7.42c-3.36,1.88-7.28,3.31-11.68,4.33l-0.82,0.1l-73.08,0l-0.46-0.04 c-2.67-0.34-5.09-0.97-7.29-1.88c-2.27-0.94-4.28-2.15-6.05-3.63c-1.68-1.4-3.15-2.99-4.4-4.72C1.84,64.25,0.04,58.63,0,53.03 c-0.04-5.66,1.72-11.29,5.52-15.85c1.23-1.48,2.68-2.84,4.34-4.04c1.93-1.4,4.14-2.58,6.64-3.55c1.72-0.67,3.56-1.23,5.5-1.68 c2.2-8.74,6.89-15.47,12.92-20.14c5.64-4.37,12.43-6.92,19.42-7.59c6.96-0.67,14.12,0.51,20.55,3.6 C81.9,7.15,88.02,12.76,91.99,20.65L91.99,20.65L91.99,20.65z"
+                />
+              </g>
+            </svg>
+            <span
+              className="status"
+            >
+              ❌
+            </span>
+          </div>
+          <div
+            className="tooltip"
+          >
+            Not synced, yet
+          </div>
+        </div>
+      </div>
+      <button
+        className="create"
+        onClick={[Function]}
+      >
+        +
+      </button>
+    </div>
   </div>
   <div
     className="content"
@@ -385,30 +493,66 @@ exports[`renders tab with no transactions 1`] = `
   className="scene mainScene"
 >
   <div
-    className="header header-app"
+    className="header-container"
   >
-    <button
-      className="left"
-      onClick={[MockFunction spy]}
+    <div
+      className="header header-app"
     >
-      <svg
-        height="16"
-        width="16"
+      <button
+        className="left"
+        onClick={[MockFunction spy]}
       >
-        <path
-          d="m2 2c-0.554 0-1 0.446-1 1s0.446 1 1 1h12c0.554 0 1-0.446 1-1s-0.446-1-1-1h-12zm0 5c-0.554 0-1 0.446-1 1s0.446 1 1 1h12c0.554 0 1-0.446 1-1s-0.446-1-1-1h-12zm0 5c-0.554 0-1 0.446-1 1s0.446 1 1 1h12c0.554 0 1-0.446 1-1s-0.446-1-1-1h-12z"
-        />
-      </svg>
-    </button>
-    <h2>
-      My Tab
-    </h2>
-    <button
-      className="create"
-      onClick={[Function]}
-    >
-      +
-    </button>
+        <svg
+          height="16"
+          width="16"
+        >
+          <path
+            d="m2 2c-0.554 0-1 0.446-1 1s0.446 1 1 1h12c0.554 0 1-0.446 1-1s-0.446-1-1-1h-12zm0 5c-0.554 0-1 0.446-1 1s0.446 1 1 1h12c0.554 0 1-0.446 1-1s-0.446-1-1-1h-12zm0 5c-0.554 0-1 0.446-1 1s0.446 1 1 1h12c0.554 0 1-0.446 1-1s-0.446-1-1-1h-12z"
+          />
+        </svg>
+      </button>
+      <h2>
+        My Tab
+      </h2>
+      <div
+        className="header-slot-sync-status"
+      >
+        <div
+          className="sync-status"
+        >
+          <div
+            className="icon"
+          >
+            <svg
+              className="cloud"
+              viewBox="0 0 122.88 79.13"
+            >
+              <g>
+                <path
+                  d="M86.35,29.93c-0.75,0.37-1.51,0.78-2.26,1.21c-2.25,1.32-4.47,2.93-6.74,4.78l-4.84-5.54c1.67-1.55,3.48-2.96,5.4-4.21 c1.53-1,3.13-1.89,4.78-2.65c0.66-0.33,1.32-0.64,2-0.93c-3.19-5.65-7.78-9.7-12.98-12.2c-5.2-2.49-11.02-3.45-16.69-2.9 c-5.63,0.54-11.1,2.59-15.62,6.1c-5.23,4.05-9.2,10.11-10.73,18.14l-0.48,2.51l-2.5,0.44c-2.45,0.43-4.64,1.02-6.56,1.77 c-1.86,0.72-3.52,1.61-4.97,2.66c-1.16,0.84-2.16,1.78-3.01,2.8c-2.63,3.15-3.85,7.1-3.82,11.1c0.03,4.06,1.35,8.16,3.79,11.53 c0.91,1.25,1.96,2.4,3.16,3.4c1.22,1.01,2.59,1.85,4.13,2.48c1.53,0.63,3.22,1.08,5.09,1.34l72.55,0c3.53-0.85,6.65-2,9.3-3.48 c2.63-1.47,4.78-3.26,6.39-5.41c2.5-3.33,3.73-8.04,3.78-12.87c0.06-5.07-1.18-10.16-3.59-13.86c-0.69-1.07-1.45-2.03-2.25-2.89 c-3.61-3.89-8.19-5.59-12.95-5.62C93.3,27.6,89.73,28.43,86.35,29.93L86.35,29.93L86.35,29.93z M91.99,20.65 c1.6-0.25,3.2-0.38,4.79-0.36c6.72,0.05,13.2,2.45,18.3,7.95c1.07,1.15,2.08,2.45,3.03,3.9c3.2,4.92,4.84,11.49,4.77,17.92 c-0.07,6.31-1.77,12.59-5.25,17.21c-2.27,3.01-5.18,5.47-8.67,7.42c-3.36,1.88-7.28,3.31-11.68,4.33l-0.82,0.1l-73.08,0l-0.46-0.04 c-2.67-0.34-5.09-0.97-7.29-1.88c-2.27-0.94-4.28-2.15-6.05-3.63c-1.68-1.4-3.15-2.99-4.4-4.72C1.84,64.25,0.04,58.63,0,53.03 c-0.04-5.66,1.72-11.29,5.52-15.85c1.23-1.48,2.68-2.84,4.34-4.04c1.93-1.4,4.14-2.58,6.64-3.55c1.72-0.67,3.56-1.23,5.5-1.68 c2.2-8.74,6.89-15.47,12.92-20.14c5.64-4.37,12.43-6.92,19.42-7.59c6.96-0.67,14.12,0.51,20.55,3.6 C81.9,7.15,88.02,12.76,91.99,20.65L91.99,20.65L91.99,20.65z"
+                />
+              </g>
+            </svg>
+            <span
+              className="status"
+            >
+              ❌
+            </span>
+          </div>
+          <div
+            className="tooltip"
+          >
+            Not synced, yet
+          </div>
+        </div>
+      </div>
+      <button
+        className="create"
+        onClick={[Function]}
+      >
+        +
+      </button>
+    </div>
   </div>
   <div
     className="content"

diff --git a/src/components/app.tsx b/src/components/app.tsx
@@ -116,6 +116,8 @@ export default class App extends Component<Props> {
           />
           <Main
             tabInfo={this.props.tabInfo}
+            lastSyncedSuccessfully={this.props.currentTabLastSyncedSucessfully}
+            syncError={this.props.currentTabSyncError}
             tabId={this.props.location.payload.tabId}
             accounts={this.props.accounts}
             transactions={this.props.transactions}