Merge pull request #127 from OCA-UFCG/feat/pin_map_maps_section

Feat/pin map maps section
OCA-UFCG · Oct 22, 2024 · 1bfe713 · 1bfe713
2 parents e257769 + 59e6ad2
commit 1bfe713
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 9 deletions.
diff --git a/public/sprite.svg b/public/sprite.svg
diff --git a/src/components/MapsSection/MapsSection.styles.tsx b/src/components/MapsSection/MapsSection.styles.tsx
@@ -109,6 +109,9 @@ export const LoadingContainer = styled.div`
 `;
 
 export const PreviewWrapper = styled.div`
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
   position: relative;
   width: 100%;
   max-width: 950px;
@@ -131,11 +134,8 @@ export const MapPoster = styled(Image)`
 
 export const ExpandBox = styled(Link)`
   display: flex;
-  position: absolute;
   align-items: center;
   justify-content: center;
-  bottom: 1rem;
-  left: 1rem;
   background-color: ${({ theme }) => theme.colors.white};
   opacity: 0.8;
   padding: 0.3rem;
@@ -150,6 +150,33 @@ export const ExpandBox = styled(Link)`
   }
 `;
 
+export const PinBox = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: ${({ theme }) => theme.colors.white};
+  opacity: 0.8;
+  padding: 0.3rem;
+  border-radius: 6px;
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
+  cursor: pointer;
+  z-index: 1;
+  transition: 0.3s;
+
+  &:hover {
+    scale: 1.1;
+  }
+`;
+
+export const ButtonsWrapper = styled.div`
+  display: flex;
+  order: 2;
+  justify-content: space-between;
+  align-items: flex-end;
+  margin: 0.5rem;
+  gap: 0.3rem;
+`;
+
 export const VisuHeader = styled.div`
   display: flex;
   justify-content: space-between;

diff --git a/src/components/MapsSection/MapsSection.tsx b/src/components/MapsSection/MapsSection.tsx
@@ -3,6 +3,7 @@
 import {
   Description,
   ExpandBox,
+  PinBox,
   TagButton,
   TagsContainer,
   VisuHeader,
@@ -14,6 +15,7 @@ import {
   MapSectionWrapper,
   BoxWrapper,
   PreviewWrapper,
+  ButtonsWrapper,
 } from "./MapsSection.styles";
 import { useEffect, useState } from "react";
 import { IEEInfo, ISectionHeader } from "@/utils/interfaces";
@@ -38,6 +40,7 @@ const MapsSection = ({
     name: "cisterna",
     year: "general",
   });
+  const [pinMap, setPinMap] = useState<boolean>(false);
 
   let handler: NodeJS.Timeout;
 
@@ -46,7 +49,7 @@ const MapsSection = ({
     event?: { preventDefault: () => void } | undefined,
   ) => {
     event?.preventDefault();
-
+    setPinMap(false);
     if (visuId !== currentVisu.id) {
       setCurrentVisu(
         tiffInfo.find((map) => map.fields.id === visuId)?.fields ||
@@ -55,6 +58,10 @@ const MapsSection = ({
     }
   };
 
+  const handlePin = () => {
+    setPinMap(!pinMap);
+  };
+
   const nextVisu = () => {
     const currentIndex = tiffInfo.findIndex(
       (map) => map.fields.id === currentVisu.id,
@@ -70,15 +77,15 @@ const MapsSection = ({
   };
 
   useEffect(() => {
-    if (tiffInfo.length > 1) {
+    if (tiffInfo.length > 1 && !pinMap) {
       visuDebounce();
     }
 
     return () => {
       clearTimeout(handler);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentVisu, tiffInfo]);
+  }, [currentVisu, tiffInfo, pinMap]);
 
   useEffect(() => {
     if (tiffInfo.length != 0) {
@@ -100,9 +107,20 @@ const MapsSection = ({
       <SectionHeader id="maps-visu" sectionHead={sectionHead} />
       <BoxWrapper>
         <PreviewWrapper>
-          <ExpandBox href={`/map?name=${currentVisu.id}`}>
-            <Icon id="expand" size={18} />
-          </ExpandBox>
+          <ButtonsWrapper>
+            <ExpandBox
+              href={`/map?name=${currentVisu.id}`}
+              title={`Expandir mapa: ${currentVisu.name}`}
+            >
+              <Icon id="expand" size={18} />
+            </ExpandBox>
+            <PinBox
+              onClick={handlePin}
+              title={`${pinMap ? "Desafixar" : "Fixar"} mapa: ${currentVisu.name}`}
+            >
+              <Icon id={pinMap ? "unpin" : "pin"} size={18} />
+            </PinBox>
+          </ButtonsWrapper>
           <MapPageWrapper
             mapsData={tiffInfo}
             ImgData={imageData}