From a8dd0635c466824bbe24cb0d3dad00b0dd2179a3 Mon Sep 17 00:00:00 2001
From: Roland Bernard <rolbernard@unibz.it>
Date: Mon, 31 May 2021 18:16:24 +0200
Subject: [PATCH] Improved the slider

---
 .../layout/ProjectsSlider/index.tsx           | 27 ++++++++++---------
 .../ProjectsSlider/projects-slider.scss       |  7 ++++-
 2 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/client/src/components/layout/ProjectsSlider/index.tsx b/client/src/components/layout/ProjectsSlider/index.tsx
index 398fb96..ac755bd 100644
--- a/client/src/components/layout/ProjectsSlider/index.tsx
+++ b/client/src/components/layout/ProjectsSlider/index.tsx
@@ -1,5 +1,5 @@
 
-import { useCallback, useRef } from 'react';
+import { CSSProperties, useCallback, useState } from 'react';
 
 import ProjectSlide, { ProjectSlideProps } from 'components/ui/ProjectSlide';
 
@@ -10,24 +10,25 @@ interface Props {
 }
 
 export default function ProjectsSlider({ projects }: Props) {
-    const slider = useRef<HTMLDivElement | null>(null);
+    const [position, setPosition] = useState(0);
 
     const onChange = useCallback(amount => {
-        const current = parseFloat(slider.current?.style.getPropertyValue('--position') ?? '0') || 0;
-        const next = Math.min(Math.max(current + amount, 0), projects.length - 1);
-        slider.current?.style.setProperty('--position', next.toString());
-    }, [slider, projects]);
+        const nextPosition = Math.min(Math.max(position + amount, 0), projects.length - 1);
+        setPosition(nextPosition);
+    }, [position, setPosition, projects]);
 
     return (
         projects.length
             ? (
-                <div className="project-slider" ref={slider}>
-                    <div className="prev-button" onClick={() => onChange(-1)}>
-                        &lt;
-                    </div>
-                    <div className = "next-button" onClick={() => onChange(1)}>
-                        &gt;
-                    </div>
+                <div className="project-slider" style={{ '--position': position } as CSSProperties}>
+                    <div
+                        className={'prev-button' + (position > 0 ? '' : ' disabled' )}
+                        onClick={() => onChange(-1)}
+                    >&lt;</div>
+                    <div
+                        className={'next-button' + (position < projects.length - 1 ? '' : ' disabled')}
+                        onClick={() => onChange(1)}
+                    >&gt;</div>
                     {
                         projects.map(project =>
                             <div
diff --git a/client/src/components/layout/ProjectsSlider/projects-slider.scss b/client/src/components/layout/ProjectsSlider/projects-slider.scss
index 66e4c5c..0eb5b51 100644
--- a/client/src/components/layout/ProjectsSlider/projects-slider.scss
+++ b/client/src/components/layout/ProjectsSlider/projects-slider.scss
@@ -24,7 +24,12 @@
         top: 50%;
         transform: translateY(-50%);
         justify-content: center;
-        align-items: center;;
+        align-items: center;
+
+        &.disabled {
+            opacity: 0.1;
+            cursor: auto;
+        }
     }
 
     .prev-button {
-- 
GitLab