From 95bdfb6c2fd1cb122d4f5fddefa93192e0325b12 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Thu, 6 Jan 2022 18:06:38 +0100
Subject: [PATCH] FilterBar: handle resize
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/components/filter_bar.js | 38 +++++++++++++++++++++++-----
 1 file changed, 31 insertions(+), 7 deletions(-)

diff --git a/app/soapbox/components/filter_bar.js b/app/soapbox/components/filter_bar.js
index d17c1a908..8aebf9bb1 100644
--- a/app/soapbox/components/filter_bar.js
+++ b/app/soapbox/components/filter_bar.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
+import { debounce } from 'lodash';
 
 export default class FilterBar extends React.PureComponent {
 
@@ -20,11 +21,27 @@ export default class FilterBar extends React.PureComponent {
 
   componentDidMount() {
     document.addEventListener('keydown', this.handleKeyDown, false);
-    this.setState({ mounted: true });
+    window.addEventListener('resize', this.handleResize, { passive: true });
+
+    const { left, width } = this.getActiveTabIndicationSize();
+    this.setState({ mounted: true, left, width });
   }
 
   componentWillUnmount() {
     document.removeEventListener('keydown', this.handleKeyDown, false);
+    document.removeEventListener('resize', this.handleResize, false);
+  }
+
+  handleResize = debounce(() => {
+    this.setState(this.getActiveTabIndicationSize());
+  }, 300, {
+    trailing: true,
+  });
+
+  componentDidUpdate(prevProps) {
+    if (this.props.active !== prevProps.active) {
+      this.setState(this.getActiveTabIndicationSize());
+    }
   }
 
   setRef = c => {
@@ -88,22 +105,28 @@ export default class FilterBar extends React.PureComponent {
     }
   }
 
-  renderActiveTabIndicator() {
+  getActiveTabIndicationSize() {
     const { active, items } = this.props;
 
-    if (!active || !this.node) return null;
+    if (!active || !this.node) return { width: null };
 
     const index = items.findIndex(({ name }) => name === active);
     const elements = Array.from(this.node.getElementsByTagName('a'));
     const element = elements[index];
 
-    if (!element) return null;
+    if (!element) return { width: null };
 
-    const offsetLeft = element.offsetLeft;
+    const left = element.offsetLeft;
     const { width } = element.getBoundingClientRect();
 
+    return { left, width };
+  }
+
+  renderActiveTabIndicator() {
+    const { left, width } = this.state;
+
     return (
-      <div className='filter-bar__active' style={{ left: offsetLeft, width }} />
+      <div className='filter-bar__active' style={{ left, width }} />
     );
   }
 
@@ -112,10 +135,11 @@ export default class FilterBar extends React.PureComponent {
       return <li key={`sep-${i}`} className='dropdown-menu__separator' />;
     }
 
-    const { text, href, to, title } = option;
+    const { name, text, href, to, title } = option;
 
     return (
       <a
+        key={name}
         href={href || to || '#'}
         role='button'
         tabIndex='0'