Remove transactions heading

We believe the list is self-explanatory.

Author: xMartin

package.json

@@ -11,7 +11,6 @@
   },
   "homepage": "https://grouptabs.net/",
   "dependencies": {
-    "@seznam/compose-react-refs": "^1.0.6",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^14.1.1",
@@ -44,7 +43,6 @@
     "redux-first-router": "^2.1.5",
     "redux-thunk": "^2.4.0",
     "reselect": "^4.1.2",
-    "smooth-scroll": "^16.1.3",
     "stream-browserify": "^3.0.0",
     "typescript": "^4.4.4",
     "util": "^0.12.4",

src/components/__snapshots__/main.test.tsx.snap

@@ -230,59 +230,54 @@ exports[`renders summary and transaction list 1`] = `
     <div
       className="row"
     >
-      <h3
-        className="transactions-heading"
-      >
-        Transactions
-      </h3>
       <div
         id="transactions"
       >
-        <div>
-          <div>
-            <div
-              className="dategroup"
-            >
-              9/20/2020
-            </div>
-            <div
-              className="transaction list-item-with-arrow"
-              onClick={[Function]}
-            >
-              <table>
-                <tbody>
-                  <tr>
-                    <td
-                      className="title"
+        <div
+          className="dategroup"
+        >
+          <div
+            className="date"
+          >
+            9/20/2020
+          </div>
+          <div
+            className="transaction list-item-with-arrow"
+            onClick={[Function]}
+          >
+            <table>
+              <tbody>
+                <tr>
+                  <td
+                    className="title"
+                  >
+                    Gummibärchen
+                    <div
+                      className="payments"
+                    >
+                      <strong>
+                        Martin: 22.8, 
+                      </strong>
+                      Jan
+                    </div>
+                  </td>
+                  <td
+                    className="total"
+                  >
+                    <span
+                      className="amount-integer"
                     >
-                      Gummibärchen
-                      <div
-                        className="payments"
-                      >
-                        <strong>
-                          Martin: 22.8, 
-                        </strong>
-                        Jan
-                      </div>
-                    </td>
-                    <td
-                      className="total"
+                      22
+                    </span>
+                    <small
+                      className="amount-fraction"
                     >
-                      <span
-                        className="amount-integer"
-                      >
-                        22
-                      </span>
-                      <small
-                        className="amount-fraction"
-                      >
-                        80
-                      </small>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
+                      80
+                    </small>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
           </div>
         </div>
       </div>

src/components/main.tsx

@@ -1,21 +1,11 @@
-import React, {
-  FunctionComponent,
-  useRef,
-  useState,
-  useEffect,
-  memo,
-  RefObject,
-} from "react";
-// @ts-ignore
-import SmoothScroll from "smooth-scroll";
+import React, { FunctionComponent, memo } from "react";
 import Loader from "./loader";
 import Summary from "./summary";
 import TransactionList from "./transactionlist";
 import TotalSpending from "./totalspending";
 import LoadError from "./loaderror";
 import { Account, Transaction, Info } from "../types";
 import useScrollIndicator from "../hooks/scrollindicator";
-import composeRefs from "@seznam/compose-react-refs";
 
 interface Props {
   tabInfo?: Info;
@@ -32,82 +22,9 @@ interface Props {
   onDetailsClick: (tabId: string, transactionId: string) => void;
 }
 
-const useTransactionHeadingScroller = (
-  scrollContainerRef: RefObject<HTMLElement>,
-  transactionsHeadingRef: RefObject<HTMLElement>,
-  recheckDependencies: unknown[]
-): {
-  transactionsHeadingIsOutOfViewport: boolean;
-  scrollToTransactionHeading: () => void;
-} => {
-  const [
-    transactionsHeadingIsOutOfViewport,
-    setTransactionsHeadingIsOutOfViewport,
-  ] = useState<boolean>(false);
-
-  // this ref is needed as the state updates unreliably
-  const transactionsHeadingIsOutOfViewportRef = useRef(false);
-
-  const checkTransactionsHeadingVisibilityRef = useRef(() => {
-    if (!scrollContainerRef.current || !transactionsHeadingRef.current) {
-      return;
-    }
-
-    const scrollContainer = scrollContainerRef.current;
-    const scrollBottomY =
-      scrollContainer.clientHeight + scrollContainer.scrollTop;
-    const headingY = transactionsHeadingRef.current.offsetTop;
-    const newTransactionsHeadingIsOutOfViewport = scrollBottomY < headingY + 60;
-    if (
-      newTransactionsHeadingIsOutOfViewport !==
-      transactionsHeadingIsOutOfViewportRef.current
-    ) {
-      transactionsHeadingIsOutOfViewportRef.current =
-        newTransactionsHeadingIsOutOfViewport;
-      setTransactionsHeadingIsOutOfViewport(
-        newTransactionsHeadingIsOutOfViewport
-      );
-    }
-  });
-
-  const scroller = useRef<any>(new SmoothScroll());
-
-  useEffect(() => {
-    const handler = checkTransactionsHeadingVisibilityRef.current;
-    const scrollContainer = scrollContainerRef.current;
-    scrollContainer?.addEventListener("scroll", handler);
-    window.addEventListener("resize", handler);
-    handler();
-
-    return () => {
-      scrollContainer?.removeEventListener("scroll", handler);
-      window.removeEventListener("resize", handler);
-    };
-  }, [scrollContainerRef]);
-
-  useEffect(() => {
-    setTimeout(checkTransactionsHeadingVisibilityRef.current);
-  }, recheckDependencies); // eslint-disable-line react-hooks/exhaustive-deps
-
-  return {
-    transactionsHeadingIsOutOfViewport,
-    scrollToTransactionHeading: () => {
-      scroller.current.animateScroll(transactionsHeadingRef.current);
-    },
-  };
-};
-
 const Main: FunctionComponent<Props> = (props) => {
-  const contentContainerRef = useRef<HTMLDivElement>(null);
-  const transactionsHeadingRef = useRef<HTMLHeadingElement>(null);
-
   const [isScrolled, scrollContainerRef] = useScrollIndicator();
 
-  const { transactionsHeadingIsOutOfViewport, scrollToTransactionHeading } =
-    useTransactionHeadingScroller(contentContainerRef, transactionsHeadingRef, [
-      props.accounts,
-    ]);
-
   const handleNewEntryClick = () => {
     if (!props.tabId) {
       throw new Error("Tab ID missing.");
@@ -137,9 +54,6 @@ const Main: FunctionComponent<Props> = (props) => {
         <Summary accounts={props.accounts} />
       </div>
       <div className="row">
-        <h3 ref={transactionsHeadingRef} className="transactions-heading">
-          Transactions
-        </h3>
         <TransactionList
           transactions={props.transactions}
           onDetailsClick={props.onDetailsClick}
@@ -206,21 +120,10 @@ const Main: FunctionComponent<Props> = (props) => {
   return (
     <div className="scene mainScene">
       {renderHeader(!isLoading && !props.remoteTabError)}
-      {transactionsHeadingIsOutOfViewport && (
-        <h3
-          className="transactions-heading transactions-heading-fixed"
-          onClick={scrollToTransactionHeading}
-        >
-          ▾ Transactions
-        </h3>
-      )}
       <div
         id="main-content"
         className="content"
-        ref={composeRefs<HTMLDivElement>(
-          contentContainerRef,
-          scrollContainerRef
-        )}
+        ref={scrollContainerRef}
         style={{ position: "relative" }}
       >
         <Loader show={isLoading}>{renderContent()}</Loader>

src/components/transactionlist.tsx

@@ -46,22 +46,20 @@ const TransactionList: FunctionComponent<Props> = ({
 }) => {
   return (
     <div id="transactions">
-      <div>
-        {groupTransactions(transactions).map((dateGroup) => (
-          <div key={dateGroup.date}>
-            <div className="dategroup">{dateGroup.date}</div>
-            {dateGroup.transactions.map((transaction) => {
-              return (
-                <TransactionListItem
-                  key={transaction.timestamp + "_" + transaction.description}
-                  transaction={transaction}
-                  onDetailsClick={onDetailsClick}
-                />
-              );
-            })}
-          </div>
-        ))}
-      </div>
+      {groupTransactions(transactions).map((dateGroup) => (
+        <div key={dateGroup.date} className="dategroup">
+          <div className="date">{dateGroup.date}</div>
+          {dateGroup.transactions.map((transaction) => {
+            return (
+              <TransactionListItem
+                key={transaction.timestamp + "_" + transaction.description}
+                transaction={transaction}
+                onDetailsClick={onDetailsClick}
+              />
+            );
+          })}
+        </div>
+      ))}
     </div>
   );
 };

src/index.css

@@ -555,33 +555,17 @@ input[type="number"] {
   font-size: 18px;
 }
 
+.summary {
+  margin-bottom: 38px;
+}
 .summary tr {
   box-sizing: border-box;
   height: 56px;
 }
 
-.transactions-heading {
-  text-align: center;
-  padding-top: 18px;
-  padding-bottom: 0;
-  margin-bottom: 0;
-}
-.mainScene {
-  position: relative;
-}
-.transactions-heading-fixed {
-  position: absolute;
-  z-index: 1;
-  left: 0;
-  bottom: 0;
-  margin: 0;
-  width: 100%;
-  padding: 20px 0 12px;
-  background: linear-gradient(transparent, var(--main-background-color));
-  text-shadow: 0 0 4px var(--main-background-color);
-  cursor: pointer;
+#transactions .dategroup:not(:last-child) {
+  margin-bottom: 26px;
 }
-
 #transactions .transaction {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
@@ -594,8 +578,8 @@ input[type="number"] {
 #transactions .transaction:first-child {
   border-top: none;
 }
-#transactions .dategroup {
-  padding: 26px 12px 6px;
+#transactions .date {
+  padding: 0 12px 6px;
   font-size: 12px;
   color: var(--subtle-text-color);
 }

yarn.lock

@@ -1633,11 +1633,6 @@
   resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.2.0.tgz#8be36a1f66f3265389e90b5f9c9962146758f728"
   integrity sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg==
 
-"@seznam/compose-react-refs@^1.0.6":
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/@seznam/compose-react-refs/-/compose-react-refs-1.0.6.tgz#6ec4e70bdd6e32f8e70b4100f27267cf306bd8df"
-  integrity sha512-izzOXQfeQLonzrIQb8u6LQ8dk+ymz3WXTIXjvOlTXHq6sbzROg3NWU+9TTAOpEoK9Bth24/6F/XrfHJ5yR5n6Q==
-
 "@sinclair/typebox@^0.24.1":
   version "0.24.51"
   resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.24.51.tgz#645f33fe4e02defe26f2f5c0410e1c094eac7f5f"
@@ -8927,11 +8922,6 @@ slice-ansi@^5.0.0:
     ansi-styles "^6.0.0"
     is-fullwidth-code-point "^4.0.0"
 
-smooth-scroll@^16.1.3:
-  version "16.1.3"
-  resolved "https://registry.yarnpkg.com/smooth-scroll/-/smooth-scroll-16.1.3.tgz#c5b68194b4186173f9f61065103ae4e26ce36885"
-  integrity sha512-ca9U+neJS/cbdScTBuUTCZvUWNF2EuMCk7oAx3ImdeRK5FPm+xRo9XsVHIkeEVkn7MBRx+ufVEhyveM4ZhaTGA==
-
 sockjs@^0.3.24:
   version "0.3.24"
   resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.24.tgz#c9bc8995f33a111bea0395ec30aa3206bdb5ccce"