Merge branch 'release/1.1.0'

Author: annabranco

CHANGELOG.md

@@ -7,7 +7,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
-## [1.0.5](https://github.com/annabranco/my-profile/compare/v1.0.4...1.0.5)
+## [1.1.0](https://github.com/annabranco/my-profile/compare/1.0.5...1.1.0)
+
+### Commits
+
+- enh: [#a06] Enhanced details on devices [`edcac23`](https://github.com/annabranco/my-profile/commit/edcac23417419dad7ba6dea641ef86686a85a6be)
+
+## [1.0.5](https://github.com/annabranco/my-profile/compare/v1.0.5...1.0.5) - 2021-04-22
+
+## [v1.0.5](https://github.com/annabranco/my-profile/compare/v1.0.4...v1.0.5) - 2021-04-22
 
 ### Commits
 

package-lock.json

@@ -2,7 +2,7 @@
   "name": "anna-branco-profile",
   "author": "Anna Branco <anna.branco@icloud.com> (https://github.com/annabranco)",
   "description": "This is Anna Branco's developer profile",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "repository": "github:annabranco/my-profile/",
   "homepage": "http://annabranco.github.io/my-profile/",
   "keywords": [

package.json

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { bool, func } from 'prop-types';
 import {
@@ -127,44 +127,50 @@ const ScrollArea = ({
   const resetScrollPosition = delay =>
     setTimeout(() => scrollAreaRef.current.scrollTo(0, 0), delay);
 
-  const goToNextSection = type => {
-    if (type === BACK_ACTION) {
-      dispatch(changeSection(getPreviousSection(currentSection)));
-      changeActiveSection(getPreviousSection(currentSection));
-    } else {
-      dispatch(changeSection(getNextSection(currentSection)));
-      changeActiveSection(getNextSection(currentSection));
-    }
-  };
+  const goToNextSection = useCallback(
+    type => {
+      if (type === BACK_ACTION) {
+        dispatch(changeSection(getPreviousSection(currentSection)));
+        changeActiveSection(getPreviousSection(currentSection));
+      } else {
+        dispatch(changeSection(getNextSection(currentSection)));
+        changeActiveSection(getNextSection(currentSection));
+      }
+    },
+    [dispatch, currentSection, changeActiveSection]
+  );
 
-  const handleTouchStart = ev => {
+  const handleTouchStart = useCallback(ev => {
     const xCoord = ev.changedTouches[0].screenX;
     touchEvent = xCoord;
-  };
-
-  const handleTouchEnd = ev => {
-    const xCoord = ev.changedTouches[0].screenX;
-    const difference = touchEvent - xCoord;
-
-    if (difference >= 200) {
-      if (showInstructions && !langModalVisible) {
-        ev.stopPropagation();
-        toggleInstructions(false);
-        return;
-      }
-      goToNextSection();
-    } else if (difference <= -200) {
-      if (showInstructions && !langModalVisible) {
-        ev.stopPropagation();
-        toggleInstructions(false);
-        return;
+  }, []);
+
+  const handleTouchEnd = useCallback(
+    ev => {
+      const xCoord = ev.changedTouches[0].screenX;
+      const difference = touchEvent - xCoord;
+
+      if (difference >= 100) {
+        if (showInstructions && !langModalVisible) {
+          ev.stopPropagation();
+          toggleInstructions(false);
+          return;
+        }
+        goToNextSection();
+      } else if (difference <= -100) {
+        if (showInstructions && !langModalVisible) {
+          ev.stopPropagation();
+          toggleInstructions(false);
+          return;
+        }
+        goToNextSection(BACK_ACTION);
       }
-      goToNextSection(BACK_ACTION);
-    }
-    setTimeout(() => {
-      touchEvent = 0;
-    }, 1000);
-  };
+      setTimeout(() => {
+        touchEvent = 0;
+      }, 1000);
+    },
+    [showInstructions, langModalVisible, goToNextSection, toggleInstructions]
+  );
 
   const getNextSectionName = () =>
     sectionsTexts[getNextSection(currentSection)];
@@ -267,7 +273,7 @@ const ScrollArea = ({
       document.removeEventListener('touchend', handleTouchEnd);
       touchActive.current = false;
     };
-  }, [handleTouchStart, handleTouchEnd, handleTouchEnd]);
+  }, [handleTouchStart, handleTouchEnd]);
 
   return (
     <ScrollAreaWrapper

src/components/mainComponents/ScrollArea/index.js

@@ -79,7 +79,7 @@ export const Advise = styled.div`
   position: absolute;
   margin-left: 3vw;
   padding: 5px 10px;
-  bottom: 25vh;
+  bottom: 20vh;
   width: 45vw;
   background: rgba(254, 255, 255, 0.3);
   font-size: 0.8em;
@@ -263,6 +263,8 @@ MeuBarquinho.displayName = 'Ship Image';
 export const MoreText = styled.p`
   z-index: 50;
   position: absolute;
+  top: 50%;
+  transform: translate(0, -50%);
   font-family: ${fontTitleAlt};
   color: ${colorWhite};
 `;

src/components/sections/MyInfoPage/styles.js

@@ -69,7 +69,7 @@ const FishesElement = () => {
       }
       updateFishes(currentFishes);
     }, 12000);
-  }, []);
+  }, [updateFishes]);
 
   return <>{fishes.map(fish => fish)}</>;
 };

src/components/sections/Seabed/seaElements/FishesElement/index.js

@@ -18,9 +18,7 @@ const sections = [
 
 export const getNextSection = current => {
   const currentId = sections.findIndex(section => section === current);
-  console.log('$$$ currentId', currentId);
 
-  console.log('$$$ sections[currentId + 1]', sections[currentId + 1]);
   if (currentId === 0 || currentId !== -1) {
     if (currentId === sections.length - 1) {
       return INFO_PAGE_SECTION;
@@ -32,9 +30,6 @@ export const getNextSection = current => {
 
 export const getPreviousSection = current => {
   const currentId = sections.findIndex(section => section === current);
-  console.log('$$$ currentId', currentId);
-
-  console.log('$$$ sections[currentId + 1]', sections[currentId + 1]);
 
   if (currentId === 0 || currentId === -1) {
     return INFO_PAGE_SECTION;