[FR-300] 🐛Fix: Proposal to improve event collections list performance (…

…#66) * 🐛Fix: Proposal to improve event collections list performance * 🐛Fix: Remove unused states * ✨ Add: Replaced react-tooltip with cooltipz tooltip (Only in activity rows) * 🐛Fix: Tooltip opacity unit error
poap-xyz · Mar 10, 2022 · e48d446 · e48d446
1 parent f67cd11
commit e48d446
Show file tree

Hide file tree

Showing 14 changed files with 2,178 additions and 15,073 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -40,7 +40,7 @@
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.3",
     "react-table": "^7.6.2",
-    "react-tooltip": "^4.2.10",
+    "react-tooltip": "^4.2.21",
     "redux": "^4.0.5",
     "redux-persist": "^6.0.0",
     "redux-thunk": "^2.3.0",

diff --git a/src/assets/images/mazury.svg b/src/assets/images/mazury.svg
diff --git a/src/assets/images/rainbow.png b/src/assets/images/rainbow.png
diff --git a/src/assets/images/rainbow.svg b/src/assets/images/rainbow.svg
diff --git a/src/assets/images/tally.png b/src/assets/images/tally.png
diff --git a/src/assets/images/tally.svg b/src/assets/images/tally.svg
diff --git a/src/pages/event.js b/src/pages/event.js
@@ -249,90 +249,37 @@ export function Event() {
   )
 }
 
-function ExternalIconCell({url, icon, tooltipText = null, content}) {
-  const [isHovering, setIsHovering] = useState(false)
-  const [isHoveringLink, setIsHoveringLink] = useState(false)
-
-  let hoverDeactivateTimeout = null;
-  let hoverLinkDeactivateTimeout = null;
-  useEffect(()=>{
-    return () => {
-      // Clear timeouts on unmount
-      clearTimeout(hoverDeactivateTimeout)
-      clearTimeout(hoverLinkDeactivateTimeout)
-    }
-  })
+const ExternalIconCell = ({url, icon, tooltipText = null}) => {
   return (
-      <a href={url} target="_blank" rel="noopener noreferrer"
-         data-tip={tooltipText}
-         data-for='mainTooltip'
-         onMouseEnter={() => {setIsHovering(true)}}
-         onMouseLeave={() => {hoverDeactivateTimeout = setTimeout(() => {
-           if (!isHoveringLink) setIsHovering(false)
-         }, 500)}}
-         style={{position: 'relative', width: 27}}
-      >
-        <span>
-          <img src={icon}
-               style={{'margin': '0 5px', 'verticalAlign': 'middle', width: '20px', height: '20px'}}
-               alt={'Open external link'} />
-        </span>
-        <ReactTooltip id='mainTooltip' effect='solid'/>
-        {
-          isHovering &&
-          <><div className='external-link'
-                 data-tip='Open external link'
-                 data-for='linkTooltip'
-                 onMouseEnter={() => {clearTimeout(hoverDeactivateTimeout); clearTimeout(hoverLinkDeactivateTimeout); setIsHoveringLink(true)}}
-                 onMouseLeave={() => {hoverLinkDeactivateTimeout = setTimeout(() => {
-                   setIsHoveringLink(false)
-                   setIsHovering(false)
-                 }, 500)}}
-          >
-          </div><ReactTooltip id='linkTooltip' effect='solid' place='bottom'/></> }
-      </a>
+    <a
+      href={url}
+      target="_blank"
+      rel="noopener noreferrer"
+      aria-label={tooltipText}
+      data-cooltipz-dir="top"
+      style={{ position: "relative", width: 27 }}
+    >
+      <span>{icon}</span>
+    </a>
   );
 }
 
-function ExternalLinkCell({url, tooltipText = null, content}) {
-  const [isHovering, setIsHovering] = useState(false)
-  const [isHoveringLink, setIsHoveringLink] = useState(false)
-  const width = useWindowWidth()
-  let hoverDeactivateTimeout = null;
-  let hoverLinkDeactivateTimeout = null;
-  useEffect(()=>{
-    return () => {
-      // Clear timeouts on unmount
-      clearTimeout(hoverDeactivateTimeout)
-      clearTimeout(hoverLinkDeactivateTimeout)
-    }
-  })
+const ExternalLinkCell = ({ url, tooltipText = null, content }) => {
+  const width = useWindowWidth();
+
   return (
-    <a href={url} target="_blank" rel="noopener noreferrer"
-       data-tip={tooltipText}
-       data-for='mainTooltip'
-       onMouseEnter={() => {setIsHovering(true)}}
-       onMouseLeave={() => {hoverDeactivateTimeout = setTimeout(() => {
-         if (!isHoveringLink) setIsHovering(false)
-       }, 500)}}
-       style={{position: 'relative', width: 27}}
+    <a
+      href={url}
+      target="_blank"
+      rel="noopener noreferrer"
+      aria-label={tooltipText}
+      data-cooltipz-dir="top"
+      style={{ position: "relative", width: 27 }}
     >
-      <span>{shrinkAddress(content, width > 768 ? 20 : 10)}</span><ReactTooltip id='mainTooltip' effect='solid'/>
-       {
-         isHovering &&
-         <><div className='external-link'
-              data-tip='Open external link'
-              data-for='linkTooltip'
-              onMouseEnter={() => {clearTimeout(hoverDeactivateTimeout); clearTimeout(hoverLinkDeactivateTimeout); setIsHoveringLink(true)}}
-              onMouseLeave={() => {hoverLinkDeactivateTimeout = setTimeout(() => {
-                setIsHoveringLink(false)
-                setIsHovering(false)
-              }, 500)}}
-         >
-         </div><ReactTooltip id='linkTooltip' effect='solid' place='bottom'/></> }
-   </a>
- );
-}
+      <span>{shrinkAddress(content, width > 768 ? 20 : 10)}</span>
+    </a>
+  );
+};
 
 function TableContainer({tokens, ensNames, pageCount: pc, loading}) {
   const [data, setData] = useState([]);

diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
@@ -40,6 +40,8 @@ $color-medium-violet: $grayscale4;
 $color-light-violet: #cabdf3;
 $color-light-grey: #eef0fb;
 $color-grey: #878787;
+$color-dark: #222;
+
 
 $gray-select-arrow: linear-gradient(45deg, transparent 50%, $grayscale4 50%),
   linear-gradient(135deg, $grayscale4 50%, transparent 50%);

diff --git a/src/scss/components/_backoffice.scss b/src/scss/components/_backoffice.scss
@@ -1,3 +1,12 @@
+:root {
+  --cooltipz-bg-color: #{$color-dark};
+  --cooltipz-font-size: 13px;
+  --cooltipz-font-family: #{$font-family};
+  --cooltipz-border-radius: 3px;
+  --cooltipz-border-color: #{$color-dark};
+  --cooltipz-arrow-size: 0.4rem;
+}
+
 .app-content {
   &.backoffice {
     padding-bottom: 200px;

diff --git a/src/scss/main.scss b/src/scss/main.scss
@@ -1,8 +1,8 @@
 /* ******************************************************
    Main Import File
-        - Base Imports (Varialbes/Utilities/Base styles)
-        - Components (Navigation/Tools/Modules)
-        - Vendor Imports (Third party plugins)
+   - Base Imports (Varialbes/Utilities/Base styles)
+   - Vendor Imports (Third party plugins)
+   - Components (Navigation/Tools/Modules)
    ****************************************************** */
 
 /* ================================================================
@@ -18,6 +18,14 @@
 @import 'globals/print';
 @import 'globals/forms';
 
+/* ================================================================
+   Vendor Imports
+   ================================================================ */
+// @import 'vendor/slick';
+// @import "vendor/slick-theme";
+@import 'vendor/aos';
+@import 'vendor/_cooltipz';
+
 /* ================================================================
    Component Imports
    ================================================================ */
@@ -31,10 +39,3 @@
 @import 'components/eventsapp';
 @import 'components/footer';
 @import 'components/poapapp';
-
-/* ================================================================
-   Vendor Imports
-   ================================================================ */
-// @import 'vendor/slick';
-// @import "vendor/slick-theme";
-@import 'vendor/aos';