update SearchBar into SearchBar2024

ivanko22 · Jan 27, 2024 · c536db8 · c536db8
1 parent 31b5728
commit c536db8
Show file tree

Hide file tree

Showing 16 changed files with 64 additions and 67 deletions.
diff --git a/src/js/components/Ballot/BallotSearchResults.jsx b/src/js/components/Ballot/BallotSearchResults.jsx
@@ -5,7 +5,7 @@ import OrganizationActions from '../../actions/OrganizationActions';
 import BallotStore from '../../stores/BallotStore';
 import normalizedImagePath from '../../common/utils/normalizedImagePath';
 import { renderLog } from '../../common/utils/logging';
-import SearchBar from '../Search/SearchBar';
+import SearchBar2024 from '../Search/SearchBar2024';
 import BallotItemSearchResult from './BallotItemSearchResult';
 
 const thumbUpIcon = '../../../img/global/svg-icons/thumbs-up-icon.svg';
@@ -150,7 +150,7 @@ export default class BallotSearchResults extends Component {
         <div>
           {featureTurnedOff ? null : (
             <div className="u-padding-bottom--sm">
-              <SearchBar
+              <SearchBar2024
                 clearButton
                 clearFunction={this.clearFunction}
                 clearSearchTextNow={clearSearchTextNow}

diff --git a/src/js/components/CampaignsHome/CampaignsHomeFilter.jsx b/src/js/components/CampaignsHome/CampaignsHomeFilter.jsx
@@ -6,8 +6,7 @@ import styled from 'styled-components';
 import { renderLog } from '../../common/utils/logging';
 import { SearchTitleTop } from '../../common/components/Style/FilterStyles';
 import StateDropDownCore from '../Filter/StateDropDownCore';
-import SearchBar from '../Search/SearchBar';
-import BaseSearchbox from '../../../js/components/Search/BaseSearchbox';
+import SearchBar2024 from '../Search/SearchBar2024';
 
 // React functional component example
 function CampaignsHomeFilter (props) {
@@ -48,7 +47,7 @@ function CampaignsHomeFilter (props) {
         </CampaignsHomeFilterChoices>
       )}
       <SearchBarWrapper>
-        <SearchBar
+        <SearchBar2024
           clearButton
           searchButton
           placeholder="Search by name, office or state"

diff --git a/src/js/components/Friends/AskFriendsModal.jsx b/src/js/components/Friends/AskFriendsModal.jsx
@@ -10,7 +10,7 @@ import withStyles from '@mui/styles/withStyles';
 import withTheme from '@mui/styles/withTheme';
 import PropTypes from 'prop-types';
 import React, { Component, Suspense } from 'react';
-import SearchBar from '../Search/SearchBar';
+import SearchBar2024 from '../Search/SearchBar2024';
 import FriendList from './FriendList';
 import FriendActions from '../../actions/FriendActions';
 import apiCalming from '../../common/utils/apiCalming';
@@ -226,7 +226,7 @@ class AskFriendsModal extends Component {
           <div className="full-width">
             {totalCurrentFriendListCount > 10 && (
               <>
-                <SearchBar
+                <SearchBar2024
                   clearButton
                   searchButton
                   placeholder="Search by name"

diff --git a/src/js/components/Friends/ShareWithFriendsModalBodyWithController.jsx b/src/js/components/Friends/ShareWithFriendsModalBodyWithController.jsx
@@ -12,7 +12,7 @@ import { renderLog } from '../../common/utils/logging';
 import BallotStore from '../../stores/BallotStore';
 import FriendStore from '../../stores/FriendStore';
 import sortFriendListByMutualFriends from '../../utils/friendFunctions';
-import SearchBar from '../Search/SearchBar';
+import SearchBar2024 from '../Search/SearchBar2024';
 import FriendList from './FriendList';
 
 const SuggestedContacts = React.lazy(() => import(/* webpackChunkName: 'SuggestedContacts' */ './SuggestedContacts'));
@@ -175,7 +175,7 @@ class ShareWithFriendsModalBodyWithController extends Component {
         <div className="full-width">
           {totalCurrentFriendListCount > 10 && (
             <>
-              <SearchBar
+              <SearchBar2024
                 clearButton
                 searchButton
                 placeholder="Search by name"

diff --git a/src/js/components/Friends/SuggestedContactListWithController.jsx b/src/js/components/Friends/SuggestedContactListWithController.jsx
@@ -4,7 +4,7 @@ import React, { Suspense } from 'react';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import SuggestedContactList from './SuggestedContactList';
-import SearchBar from '../Search/SearchBar';
+import SearchBar2024 from '../Search/SearchBar2024';
 import VoterActions from '../../actions/VoterActions';
 import apiCalming from '../../common/utils/apiCalming';
 import { renderLog } from '../../common/utils/logging';
@@ -269,7 +269,7 @@ class SuggestedContactListWithController extends React.Component {
             )}
             {voterContactEmailListCount > 10 && (
               <>
-                <SearchBar
+                <SearchBar2024
                   clearButton
                   searchButton
                   placeholder="Search by name, email, city or state code"

diff --git a/src/js/components/Search/BaseSearchbox.jsx b/src/js/components/Search/BaseSearchbox.jsx
@@ -65,58 +65,58 @@ const SearchInput = styled.input`
 `;
 
 class BaseSearchbox extends React.Component {
-  constructor(props) {
+  constructor (props) {
     super(props);
     this.state = { searchText: '' };
   }
 
   handleInputChange = (event) => {
     this.setState({ searchText: event.target.value }, () => {
-        if (this.props.onChange) {
-            this.props.onChange(event);
-        }
-        if (this.props.onKeyDown) {
-            this.props.onKeyDown(event);
-        }
-        if(this.props.onFocus) {
-            this.props.onFocus(event);
-        }
+      if (this.props.onChange) {
+        this.props.onChange(event);
+      }
+      if (this.props.onKeyDown) {
+        this.props.onKeyDown(event);
+      }
+      if (this.props.onFocus) {
+        this.props.onFocus(event);
+      }
     });
   }
 
   handleClear = () => {
     this.setState({ searchText: '' }, () => {
-        if (this.props.onClear) {
-            this.props.onClear();
-        }
+      if (this.props.onClear) {
+        this.props.onClear();
+      }
     });
   }
 
-  render() {
+  render () {
     return (
       <SearchWrapper>
         {!this.state.searchText && <SearchIcon />}
-        <SearchInput 
-            type="search" 
-            placeholder={this.props.placeholder} 
-            value={this.state.searchText} 
-            onChange={this.handleInputChange} 
+        <SearchInput
+            type="search"
+            placeholder={this.props.placeholder}
+            value={this.state.searchText}
+            onChange={this.handleInputChange}
             onClear={this.handleClear}
-            maxLength={50}
+            maxLength={this.props.maxLength}
         />
-        {this.state.searchText && <ClearButton onClick={this.handleClear}/>}
+        {this.state.searchText && <ClearButton onClick={this.handleClear} />}
       </SearchWrapper>
     );
   }
 }
 
 BaseSearchbox.propTypes = {
-    placeholder: PropTypes.string,
-    onChange: PropTypes.func,
-    onKeyDown: PropTypes.func,
-    onFocus: PropTypes.func,
-    onBlur: PropTypes.func,
-    onClear: PropTypes.func,
+  placeholder: PropTypes.string,
+  onChange: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  onClear: PropTypes.func,
 };
 
-export default BaseSearchbox;
+export default BaseSearchbox;
diff --git a/src/js/components/Search/SearchBar.jsx → src/js/components/Search/SearchBar2024.jsx b/src/js/components/Search/SearchBar.jsx → src/js/components/Search/SearchBar2024.jsx
@@ -1,13 +1,11 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import styled from 'styled-components';
-import { blurTextFieldAndroid, focusTextFieldAndroid, isIPhoneMiniOrSmaller } from '../../common/utils/cordovaUtils';
+import { blurTextFieldAndroid, focusTextFieldAndroid } from '../../common/utils/cordovaUtils';
 import { renderLog } from '../../common/utils/logging';
-
-import BaseSearchbox from '../Search/BaseSearchbox';
+import BaseSearchbox from './BaseSearchbox';
 
 /* eslint-disable jsx-a11y/control-has-associated-label  */
-export default class SearchBar extends Component {
+export default class SearchBar2024 extends Component {
   constructor (props) {
     super(props);
 
@@ -77,26 +75,27 @@ export default class SearchBar extends Component {
   }
 
   render () {
-    renderLog('SearchBar');  // Set LOG_RENDER_EVENTS to log all renders
+    renderLog('SearchBar2024');  // Set LOG_RENDER_EVENTS to log all renders
     const { placeholder } = this.props;
     const { searchString } = this.state;
     return (
       <div className="search-bar clearfix">
-        <BaseSearchbox        
+        <BaseSearchbox
           id="search_input"
           placeholder={placeholder}
           value={searchString}
           onKeyDown={this.handleKeyPress}
           onChange={this.updateResults}
-          onFocus={() => focusTextFieldAndroid('SearchBar')}
-          onBlur={blurTextFieldAndroid} 
+          onFocus={() => focusTextFieldAndroid('SearchBar2024')}
+          onBlur={blurTextFieldAndroid}
           onClear={this.clearQuery}
         />
       </div>
     );
   }
 }
-SearchBar.propTypes = {
+
+SearchBar2024.propTypes = {
   clearButton: PropTypes.bool,
   clearFunction: PropTypes.func.isRequired,
   clearSearchTextNow: PropTypes.bool,

diff --git a/src/js/components/Settings/VoterGuideListSearchResults.jsx b/src/js/components/Settings/VoterGuideListSearchResults.jsx
@@ -7,7 +7,7 @@ import { SearchTitle } from '../../common/components/Style/FilterStyles';
 import { renderLog } from '../../common/utils/logging';
 import BallotStore from '../../stores/BallotStore';
 import voterGuideSearchPriority from '../../utils/voterGuideSearchPriority';
-import SearchBar from '../Search/SearchBar';
+import SearchBar2024 from '../Search/SearchBar2024';
 import BallotItemForAddPositions from './BallotItemForAddPositions';
 
 const DelayedLoad = React.lazy(() => import(/* webpackChunkName: 'DelayedLoad' */ '../../common/components/Widgets/DelayedLoad'));
@@ -164,7 +164,7 @@ class VoterGuideListSearchResults extends Component {
       <div className="ballot_search">
         <div>
           <div className="u-padding-bottom--sm">
-            <SearchBar
+            <SearchBar2024
               clearButton
               clearFunction={this.clearFunction}
               clearSearchTextNow={clearSearchTextNow}

diff --git a/src/js/components/VoterGuide/VoterGuideFollowers.jsx b/src/js/components/VoterGuide/VoterGuideFollowers.jsx
@@ -10,7 +10,7 @@ import VoterGuideStore from '../../stores/VoterGuideStore';
 import VoterStore from '../../stores/VoterStore';
 import { renderLog } from '../../common/utils/logging';
 import LoadingWheel from '../../common/components/Widgets/LoadingWheel';
-import SearchBar from '../Search/SearchBar';
+import SearchBar2024 from '../Search/SearchBar2024';
 import { PageContentContainer } from '../Style/pageLayoutStyles';
 import GuideList from './GuideList';
 
@@ -203,7 +203,7 @@ class VoterGuideFollowers extends Component {
               {/* Search Box */}
               {voterGuideFollowersList && voterGuideFollowersList.length > 0 && (
                 <SearchInputWrapper>
-                  <SearchBar
+                  <SearchBar2024
                     clearButton
                     clearFunction={this.clearSearchBarFunction}
                     placeholder="Search these followers"

diff --git a/src/js/components/VoterGuide/VoterGuideFollowing.jsx b/src/js/components/VoterGuide/VoterGuideFollowing.jsx
@@ -12,7 +12,7 @@ import { renderLog } from '../../common/utils/logging';
 import OrganizationStore from '../../stores/OrganizationStore';
 import VoterGuideStore from '../../stores/VoterGuideStore';
 import VoterStore from '../../stores/VoterStore';
-import SearchBar from '../Search/SearchBar';
+import SearchBar2024 from '../Search/SearchBar2024';
 import GuideList from './GuideList';
 
 const DelayedLoad = React.lazy(() => import(/* webpackChunkName: 'DelayedLoad' */ '../../common/components/Widgets/DelayedLoad'));
@@ -239,7 +239,7 @@ class VoterGuideFollowing extends Component {
             {/* Search Box */}
             {voterGuideFollowedList && voterGuideFollowedList.length > 0 && (
               <SearchInputWrapper>
-                <SearchBar
+                <SearchBar2024
                   clearButton
                   clearFunction={this.clearSearchBarFunction}
                   placeholder="Search these voter guides"

diff --git a/src/js/components/VoterGuide/VoterGuidePositionList.jsx b/src/js/components/VoterGuide/VoterGuidePositionList.jsx
@@ -12,7 +12,7 @@ import apiCalming from '../../common/utils/apiCalming';
 import arrayContains from '../../common/utils/arrayContains';
 import { getTodayAsInteger } from '../../common/utils/dateFormat';
 import { renderLog } from '../../common/utils/logging';
-import SearchBar from '../Search/SearchBar';
+import SearchBar2024 from '../Search/SearchBar2024';
 import FriendStore from '../../stores/FriendStore';
 import OrganizationStore from '../../stores/OrganizationStore';
 import NumberOfItemsFound from '../Widgets/NumberOfItemsFound';
@@ -466,7 +466,7 @@ class VoterGuidePositionList extends Component {
           )}
           {((positionList && (positionList.length > 10)) || isSearching) && (
             <SearchBarWrapper>
-              <SearchBar
+              <SearchBar2024
                 clearButton
                 searchButton
                 placeholder="Search by name, office or state"

diff --git a/src/js/pages/Friends/FriendInvitationsSentByMe.jsx b/src/js/pages/Friends/FriendInvitationsSentByMe.jsx
@@ -7,7 +7,7 @@ import FriendActions from '../../actions/FriendActions';
 import apiCalming from '../../common/utils/apiCalming';
 import { renderLog } from '../../common/utils/logging';
 import FriendInvitationList from '../../components/Friends/FriendInvitationList';
-import SearchBar from '../../components/Search/SearchBar';
+import SearchBar2024 from '../../components/Search/SearchBar2024';
 import MessageCard from '../../components/Widgets/MessageCard';
 import FriendStore from '../../stores/FriendStore';
 
@@ -101,7 +101,7 @@ export default class FriendInvitationsSentByMe extends Component {
               <AlignRight>
                 <Link className="u-link-color" to="/friends/requests">See friend requests you&apos;ve received</Link>
               </AlignRight>
-              <SearchBar
+              <SearchBar2024
                 clearButton
                 searchButton
                 placeholder="Search by name"

diff --git a/src/js/pages/Friends/FriendsCurrent.jsx b/src/js/pages/Friends/FriendsCurrent.jsx
@@ -6,7 +6,7 @@ import FriendActions from '../../actions/FriendActions';
 import apiCalming from '../../common/utils/apiCalming';
 import { renderLog } from '../../common/utils/logging';
 import FriendList from '../../components/Friends/FriendList';
-import SearchBar from '../../components/Search/SearchBar';
+import SearchBar2024 from '../../components/Search/SearchBar2024';
 import FriendStore from '../../stores/FriendStore';
 import sortFriendListByMutualFriends from '../../utils/friendFunctions';
 
@@ -98,7 +98,7 @@ export default class FriendsCurrent extends Component {
               {currentFriendList.length}
               )
             </SectionTitle>
-            <SearchBar
+            <SearchBar2024
               clearButton
               searchButton
               placeholder="Search by name"

diff --git a/src/js/pages/OpinionsFollowed.jsx b/src/js/pages/OpinionsFollowed.jsx
@@ -8,7 +8,7 @@ import apiCalming from '../common/utils/apiCalming';
 import { renderLog } from '../common/utils/logging';
 
 import OpinionsFollowedList from '../components/Organization/OpinionsFollowedList';
-import SearchBar from '../components/Search/SearchBar';
+import SearchBar2024 from '../components/Search/SearchBar2024';
 
 export default class OpinionsFollowed extends Component {
   constructor (props) {
@@ -90,7 +90,7 @@ export default class OpinionsFollowed extends Component {
               <em>We will never sell your email</em>
               .
             </p>
-            <SearchBar
+            <SearchBar2024
               clearButton
               searchButton
               placeholder="Search by name or Twitter handle"

diff --git a/src/js/pages/Values/OneValue.jsx b/src/js/pages/Values/OneValue.jsx
@@ -9,7 +9,7 @@ import IssueActions from '../../actions/IssueActions';
 import OrganizationActions from '../../actions/OrganizationActions';
 import apiCalming from '../../common/utils/apiCalming';
 import { renderLog } from '../../common/utils/logging';
-import SearchBar from '../../components/Search/SearchBar';
+import SearchBar2024 from '../../components/Search/SearchBar2024';
 import { PageContentContainer } from '../../components/Style/pageLayoutStyles';
 import GuideList from '../../components/VoterGuide/GuideList';
 import IssueStore from '../../stores/IssueStore';
@@ -22,7 +22,6 @@ const DelayedLoad = React.lazy(() => import(/* webpackChunkName: 'DelayedLoad' *
 const IssueCard = React.lazy(() => import(/* webpackChunkName: 'IssueCard' */ '../../components/Values/IssueCard'));
 const OrganizationList = React.lazy(() => import(/* webpackChunkName: 'OrganizationList' */ '../../components/Organization/OrganizationList'));
 
-
 class OneValue extends Component {
   constructor (props) {
     super(props);
@@ -275,7 +274,7 @@ class OneValue extends Component {
             </FilterChoices>
           )}
           <SearchBarWrapper>
-            <SearchBar
+            <SearchBar2024
               clearButton
               searchButton
               placeholder="Search by name, Twitter handle or description"

diff --git a/src/js/pages/Values/ValuesList.jsx b/src/js/pages/Values/ValuesList.jsx
@@ -7,7 +7,7 @@ import IssueActions from '../../actions/IssueActions';
 import apiCalming from '../../common/utils/apiCalming';
 import { isCordova } from '../../common/utils/isCordovaOrWebApp';
 import { renderLog } from '../../common/utils/logging';
-import SearchBar from '../../components/Search/SearchBar';
+import SearchBar from '../../components/Search/SearchBar2024';
 import { PageContentContainer } from '../../components/Style/pageLayoutStyles';
 import IssueStore from '../../stores/IssueStore';