From c9e4e27f1a1023a170d89049b2d018b155cd7b8e Mon Sep 17 00:00:00 2001
From: linyers <linyers666@gmail.com>
Date: Wed, 5 Jun 2024 13:46:53 -0300
Subject: [PATCH] Add disabled next and prev buttons

---
 client/src/Annotator/index.jsx              |  3 +++
 client/src/DemoSite/index.jsx               |  3 +--
 client/src/MainLayout/index.jsx             |  5 +++--
 client/src/workspace/HeaderButton/index.jsx | 12 ++++++------
 4 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/client/src/Annotator/index.jsx b/client/src/Annotator/index.jsx
index f97a627..514640b 100644
--- a/client/src/Annotator/index.jsx
+++ b/client/src/Annotator/index.jsx
@@ -56,6 +56,7 @@ export const Annotator = ({
   hideHeaderText,
   hideNext,
   hidePrev,
+  disabledNextAndPrev,
   hideClone,
   hideSettings,
   hideSave,
@@ -171,6 +172,7 @@ export const Annotator = ({
           hideHeaderText={hideHeaderText}
           hideNext={hideNext}
           hidePrev={hidePrev}
+          disabledNextAndPrev={disabledNextAndPrev}
           hideClone={hideClone}
           hideSettings={hideSettings}
           hideSave={hideSave}
@@ -216,6 +218,7 @@ Annotator.propTypes = {
   hideHeaderText: PropTypes.bool,
   hideNext: PropTypes.bool,
   hidePrev: PropTypes.bool,
+  disabledNextAndPrev: PropTypes.bool,
   hideClone: PropTypes.bool,
   hideSettings: PropTypes.bool,
   settings: PropTypes.object,
diff --git a/client/src/DemoSite/index.jsx b/client/src/DemoSite/index.jsx
index 40dc538..8f784ee 100644
--- a/client/src/DemoSite/index.jsx
+++ b/client/src/DemoSite/index.jsx
@@ -128,8 +128,6 @@ export default () => {
     setLoading(false);
   }, []);
 
-  
-
   return (
     <>
     { !showLabel ? ( // Render loading indicator if loading is true
@@ -159,6 +157,7 @@ export default () => {
         changeSelectedImageIndex(isNaN(updatedIndex ) ? 0 : updatedIndex)
       }}
       hideSettings={true}
+      disabledNextAndPrev={settings.images.length <= 1}
       selectedImageIndex={selectedImageIndex}
     />)}
     </>
diff --git a/client/src/MainLayout/index.jsx b/client/src/MainLayout/index.jsx
index 0f0e9dd..7f7d1d0 100644
--- a/client/src/MainLayout/index.jsx
+++ b/client/src/MainLayout/index.jsx
@@ -43,6 +43,7 @@ export const MainLayout = ({
   hideHeaderText,
   hideNext = false,
   hidePrev = false,
+  disabledNextAndPrev,
   hideClone = false,
   hideSettings = false,
   downloadImage = false,
@@ -221,8 +222,8 @@ export const MainLayout = ({
                 ) : null,
               ].filter(Boolean)}
               headerItems={[
-                !hidePrev && {name: "Prev"},
-                !hideNext && {name: "Next"},
+                !hidePrev && {name: "Prev", disabled: disabledNextAndPrev},
+                !hideNext && {name: "Next", disabled: disabledNextAndPrev},
                 state.annotationType !== "video"
                   ? null
                   : !state.videoPlaying
diff --git a/client/src/workspace/HeaderButton/index.jsx b/client/src/workspace/HeaderButton/index.jsx
index ad7c424..049cf35 100644
--- a/client/src/workspace/HeaderButton/index.jsx
+++ b/client/src/workspace/HeaderButton/index.jsx
@@ -30,8 +30,8 @@ const ButtonInnerContent = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
 }))
-const IconContainer = styled("div")(({ textHidden }) => ({
-  color: colors.grey[700],
+const IconContainer = styled("div")(({ textHidden, disabled }) => ({
+  color: disabled ? colors.grey[400] : colors.grey[700],
   height: textHidden ? 32 : 20,
   paddingTop: textHidden ? 8 : 0,
   "& .MuiSvgIcon-root": {
@@ -39,10 +39,10 @@ const IconContainer = styled("div")(({ textHidden }) => ({
     height: 18,
   },
 }))
-const Text = styled("div")(({ theme }) => ({
+const Text = styled("div")(({ theme, disabled }) => ({
   fontWeight: "bold",
   fontSize: 11,
-  color: colors.grey[800],
+  color: disabled ? colors.grey[500] : colors.grey[800],
   display: "flex",
   alignItems: "center",
   lineHeight: 1,
@@ -61,11 +61,11 @@ export const HeaderButton = ({
     <ThemeProvider theme={theme}>
       <StyledButton onClick={onClick} disabled={disabled}>
         <ButtonInnerContent>
-          <IconContainer textHidden={hideText}>
+          <IconContainer textHidden={hideText} disabled={disabled}>
             {icon || getIcon(name, customIconMapping)}
           </IconContainer>
           {!hideText && (
-            <Text>
+            <Text disabled={disabled}>
               <div>{name}</div>
             </Text>
           )}