From ae9dfbc35b6cfdb6d84d568a4cbff4385e3c2215 Mon Sep 17 00:00:00 2001
From: MrChocolatine <47531779+MrChocolatine@users.noreply.github.com>
Date: Sun, 13 Oct 2024 14:28:36 +0100
Subject: [PATCH] Rework logic using `ref` objects

---
 gui/src/renderer/components/SearchBar.tsx            | 12 +++++-------
 .../components/select-location/SelectLocation.tsx    | 12 ++++++------
 2 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/gui/src/renderer/components/SearchBar.tsx b/gui/src/renderer/components/SearchBar.tsx
index 40f4614dd94b..c8c0bfa46be3 100644
--- a/gui/src/renderer/components/SearchBar.tsx
+++ b/gui/src/renderer/components/SearchBar.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import { colors } from '../../config.json';
 import { messages } from '../../shared/gettext';
-import { useStyledRef } from '../lib/utilityHooks';
+import { useCombinedRefs, useStyledRef } from '../lib/utilityHooks';
 import { normalText } from './common-styles';
 import ImageView from './ImageView';
 
@@ -71,12 +71,12 @@ interface ISearchBarProps {
   onSearch: (searchTerm: string) => void;
   className?: string;
   disableAutoFocus?: boolean;
-  hasLocationTypeChanged?: boolean;
-  resetLocationTypeChange?: () => void;
+  searchInputRef?: React.Ref<HTMLInputElement>;
 }
 
 export default function SearchBar(props: ISearchBarProps) {
   const inputRef = useStyledRef<HTMLInputElement>();
+  const combinedRef = useCombinedRefs(inputRef, props.searchInputRef);
 
   const onInput = useCallback(
     (event: React.FormEvent) => {
@@ -95,14 +95,12 @@ export default function SearchBar(props: ISearchBarProps) {
     if (!props.disableAutoFocus) {
       inputRef.current?.focus({ preventScroll: true });
     }
-
-    return () => props.resetLocationTypeChange?.();
-  }, [props.hasLocationTypeChanged]);
+  }, []);
 
   return (
     <StyledSearchContainer className={props.className}>
       <StyledSearchInput
-        ref={inputRef}
+        ref={combinedRef}
         value={props.searchTerm}
         onInput={onInput}
         placeholder={messages.gettext('Search for...')}
diff --git a/gui/src/renderer/components/select-location/SelectLocation.tsx b/gui/src/renderer/components/select-location/SelectLocation.tsx
index b51babae5c46..44680faf9644 100644
--- a/gui/src/renderer/components/select-location/SelectLocation.tsx
+++ b/gui/src/renderer/components/select-location/SelectLocation.tsx
@@ -9,7 +9,7 @@ import { daitaFilterActive, filterSpecialLocations } from '../../lib/filter-loca
 import { useHistory } from '../../lib/history';
 import { formatHtml } from '../../lib/html-formatter';
 import { RoutePath } from '../../lib/routes';
-import { useBoolean, useNormalRelaySettings } from '../../lib/utilityHooks';
+import { useNormalRelaySettings, useStyledRef } from '../../lib/utilityHooks';
 import { useSelector } from '../../redux/store';
 import * as Cell from '../cell';
 import { useFilteredProviders } from '../Filter';
@@ -104,14 +104,15 @@ export default function SelectLocation() {
     }
   }, [relaySettingsUpdater, resetScrollPositions, relaySettings]);
 
-  const [hasLocationTypeChanged, notifyLocationTypeChange, resetLocationTypeChange] =
-    useBoolean(false);
+  const searchInputRef = useStyledRef<HTMLInputElement>();
 
   const changeLocationType = useCallback(
     (locationType: LocationType) => {
       saveScrollPosition();
       setLocationType(locationType);
-      notifyLocationTypeChange();
+
+      console.log('### changeLocationType | searchInputRef.current', searchInputRef.current);
+      searchInputRef.current?.focus();
     },
     [saveScrollPosition],
   );
@@ -247,8 +248,7 @@ export default function SelectLocation() {
               <StyledSearchBar
                 searchTerm={searchValue}
                 onSearch={updateSearchTerm}
-                hasLocationTypeChanged={hasLocationTypeChanged}
-                resetLocationTypeChange={resetLocationTypeChange}
+                searchInputRef={searchInputRef}
               />
             </StyledNavigationBarAttachment>