Merge pull request #28 from heronlancellot/feat/reviews-history

Feat/reviews history

components/Icons/ClockIcon.tsx

@@ -0,0 +1,20 @@
+import { SVGProps } from "react";
+
+export const ClockIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    {...props}
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g id="Clock">
+      <path
+        id="Vector"
+        d="M4.10809 4.10809L3.00132 3.00132C2.50979 2.50979 1.66669 2.85809 1.66669 3.55145V7.13544C1.66669 7.56838 2.01499 7.91669 2.44794 7.91669H6.03192C6.72854 7.91669 7.07684 7.07359 6.58531 6.58205L5.5827 5.57945C6.71226 4.44989 8.27476 3.75002 10 3.75002C13.4505 3.75002 16.25 6.5495 16.25 10C16.25 13.4505 13.4505 16.25 10 16.25C8.6719 16.25 7.44143 15.8366 6.42906 15.1302C5.95705 14.8015 5.30927 14.9154 4.97723 15.3874C4.6452 15.8594 4.76239 16.5072 5.2344 16.8392C6.58856 17.78 8.23244 18.3334 10 18.3334C14.6029 18.3334 18.3334 14.6029 18.3334 10C18.3334 5.39716 14.6029 1.66669 10 1.66669C7.69859 1.66669 5.61525 2.60093 4.10809 4.10809ZM10 5.83335C9.56708 5.83335 9.21877 6.18166 9.21877 6.6146V10C9.21877 10.2084 9.30015 10.4069 9.44664 10.5534L11.7904 12.8972C12.0964 13.2031 12.5912 13.2031 12.8939 12.8972C13.1966 12.5912 13.1999 12.0964 12.8939 11.7936L10.778 9.67776V6.6146C10.778 6.18166 10.4297 5.83335 9.99677 5.83335H10Z"
+        fill="#959FA8"
+      />
+    </g>
+  </svg>
+);

components/Pages/Project/Review/ArrowNavigationBar.tsx

@@ -0,0 +1,144 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/24/solid";
+import { useEffect, useRef, useState } from "react";
+import lodash from "lodash";
+import { useTheme } from "next-themes";
+
+interface HorizontalNavigationBarProps {
+  skeletonMarkup: JSX.Element;
+  barContentMarkup: JSX.Element;
+}
+
+enum ScrollDirection {
+  LEFT,
+  RIGHT,
+}
+
+interface ShowNavButtons {
+  left: boolean;
+  right: boolean;
+}
+
+const VISIBLE_SCROLLER_WIDTH_AFTER_NAVIGATOR_CLICK = 75;
+const DELAY_FOR_DOM_PROPERTY_UPDATE = 2000;
+
+export const ArrowNavigationBar = ({
+  skeletonMarkup,
+  barContentMarkup,
+}: HorizontalNavigationBarProps) => {
+  const navigationBarWrapper = useRef<HTMLDivElement | null>(null);
+  const { theme } = useTheme();
+
+  const [showNavButtons, setShowNavButtons] = useState<ShowNavButtons | null>(null);
+
+  useEffect(() => {
+    setDisplayOfInfiniteShadowsAndNavigationButtons();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [navigationBarWrapper]);
+
+  useEffect(() => {
+    if (window) {
+      window.addEventListener(
+        "resize",
+        lodash.debounce(setDisplayOfInfiniteShadowsAndNavigationButtons, 100),
+      );
+    }
+
+    if (navigationBarWrapper.current) {
+      navigationBarWrapper.current.addEventListener(
+        "scroll",
+        lodash.debounce(setDisplayOfInfiniteShadowsAndNavigationButtons, 100),
+      );
+    }
+
+    return () => {
+      window.removeEventListener(
+        "resize",
+        lodash.debounce(setDisplayOfInfiniteShadowsAndNavigationButtons, 100),
+      );
+
+      navigationBarWrapper.current?.removeEventListener(
+        "scroll",
+        lodash.debounce(setDisplayOfInfiniteShadowsAndNavigationButtons, 100),
+      );
+    };
+  }, []);
+
+  const scrollQuickJumpScrollerTo = (scrollDirection: ScrollDirection) => {
+    if (navigationBarWrapper.current) {
+      const amountToScroll =
+        navigationBarWrapper.current.clientWidth - VISIBLE_SCROLLER_WIDTH_AFTER_NAVIGATOR_CLICK;
+
+      navigationBarWrapper.current.scroll({
+        behavior: "smooth",
+        left:
+          scrollDirection === ScrollDirection.LEFT
+            ? navigationBarWrapper.current.scrollLeft - amountToScroll
+            : navigationBarWrapper.current.scrollLeft + amountToScroll,
+      });
+
+      setTimeout(setDisplayOfInfiniteShadowsAndNavigationButtons, DELAY_FOR_DOM_PROPERTY_UPDATE);
+    }
+  };
+
+  const setDisplayOfInfiniteShadowsAndNavigationButtons = () => {
+    let showLeft, showRight;
+
+    if (navigationBarWrapper.current) {
+      const needsNavigationArrows =
+        navigationBarWrapper.current?.scrollWidth > navigationBarWrapper.current?.clientWidth;
+
+      const userScrolledToRight =
+        navigationBarWrapper.current?.scrollLeft > 0 && needsNavigationArrows;
+      showLeft = userScrolledToRight;
+      const scrolledToTheFartest =
+        navigationBarWrapper.current?.scrollLeft + navigationBarWrapper.current?.clientWidth ===
+        navigationBarWrapper.current?.scrollWidth;
+      showRight = !scrolledToTheFartest && needsNavigationArrows;
+
+      setShowNavButtons({
+        left: showLeft,
+        right: showRight,
+      });
+    }
+  };
+
+
+  return (
+    <div className={`relative flex ${showNavButtons !== null ? "space-x-1 z-20 " : ""}`}>
+      <div className={`z-20 opacity-0 transition ${showNavButtons?.left ? "!opacity-100" : ""}`}>
+        <div
+          className={`pointer-events-none flex items-center absolute top-0 w-20 h-full z-20 rotate-180 transform transition ${
+            theme === "light" ? "gradient-white-to-transparent" : "gradient-black-to-transparent"
+          }`}
+        />
+        <button
+          className="border-transparent border-2 -mt-0.5 hover:border-gray-200 hover:bg-gray-100 rounded-full p-1.5 opacity-100 transition absolute z-30 top-1/2 left-1 transform -translate-x-1/2 -translate-y-1/2"
+          onClick={() => scrollQuickJumpScrollerTo(ScrollDirection.LEFT)}
+        >
+          <ChevronLeftIcon className="w-4 h-4 font-black dark:text-white text-black" />
+        </button>
+      </div>
+      <div
+        ref={navigationBarWrapper}
+        className="z-10 w-full scrollbar-hide overflow-x-scroll no-scrollbar"
+      >
+        {showNavButtons === null && skeletonMarkup}
+        {<div className={showNavButtons === null ? "opacity-0" : ""}>{barContentMarkup}</div>}
+      </div>
+      <div className={`z-20 opacity-0 transition ${showNavButtons?.right ? "!opacity-100" : ""}`}>
+        <div
+          className={`pointer-events-none flex items-center absolute right-0 top-0 w-20 h-full z-20 transition  ${
+            theme === "light" ? "gradient-white-to-transparent" : "gradient-black-to-transparent"
+          }`}
+        />
+        <button
+          onClick={() => scrollQuickJumpScrollerTo(ScrollDirection.RIGHT)}
+          className="border-transparent border-2 -mt-0.5 hover:border-gray-200 hover:bg-gray-100 rounded-full p-1.5 opacity-100 transition absolute z-30 top-1/2 right-1 transform -translate-x-1/2 -translate-y-1/2"
+        >
+          <ChevronRightIcon className="w-4 h-4 text-black dark:text-white font-black" />
+        </button>
+      </div>
+    </div>
+  );
+};