Skip to content

Commit

Permalink
fix: error handling on nav search (#352)
Browse files Browse the repository at this point in the history
  • Loading branch information
@tuliomir
tuliomir authored Dec 17, 2024
1 parent 818dfaf commit a9fb9ab
Show file tree
Hide file tree
Showing 3 changed files with 182 additions and 163 deletions.
333 changes: 172 additions & 161 deletions src/components/Navigation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import {
REACT_APP_NETWORK,
} from '../constants';
import { toggleTheme } from '../actions';
import NewHathorAlert from './NewHathorAlert';

function Navigation() {
const history = useHistory();
Expand Down Expand Up @@ -86,56 +87,109 @@ function Navigation() {
const hathorNetwork = `Hathor ${REACT_APP_NETWORK}`;

return (
<nav>
<div className="hide-logo-container-mobile">
<div className="newLogo-explorer-container">
<div className="d-flex flex-column align-items-center">
<Link className="navbar-brand" to="/" href="/">
<NewLogo
className={`newLogo ${theme === 'dark' ? 'dark-theme-logo' : 'light-theme-logo'}`}
/>
</Link>
<>
<nav>
<div className="hide-logo-container-mobile">
<div className="newLogo-explorer-container">
<div className="d-flex flex-column align-items-center">
<Link className="navbar-brand" to="/" href="/">
<NewLogo
className={`newLogo ${
theme === 'dark' ? 'dark-theme-logo' : 'light-theme-logo'
}`}
/>
</Link>
</div>
{!showSearchInput ? (
<button
className="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span>EXPLORER</span>
</button>
) : (
''
)}
</div>
<div className="hide-network-mobile">
<GlobeNetwork
className={`${
theme === 'dark' ? 'dark-theme-logo' : 'light-theme-logo'
} theme-network-logo`}
/>
<span className="nav-title">{hathorNetwork}</span>
</div>
{!showSearchInput ? (
<button
className="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span>EXPLORER</span>
</button>
) : (
''
)}
</div>
<div className="hide-network-mobile">
<GlobeNetwork
className={`${
theme === 'dark' ? 'dark-theme-logo' : 'light-theme-logo'
} theme-network-logo`}
/>
<span className="nav-title">{hathorNetwork}</span>
</div>
</div>
<div className="nav-tabs-container hide-tabs">
<ul className="navbar-nav me-auto">
<li className="nav-item">
<NavLink
to="/"
exact
className="nav-link"
activeClassName="active"
activeStyle={{ fontWeight: 'bold' }}
>
Home
</NavLink>
</li>
{showTokensTab && (
<ul className="nav-item dropdown">
<div className="nav-tabs-container hide-tabs">
<ul className="navbar-nav me-auto">
<li className="nav-item">
<NavLink
to="/"
exact
className="nav-link"
activeClassName="active"
activeStyle={{ fontWeight: 'bold' }}
>
Home
</NavLink>
</li>
{showTokensTab && (
<ul className="nav-item dropdown">
<span
className="nav-link dropdown-toggle custom-dropdown-toggle"
id="navbarDropdown"
role="button"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Tokens
<ArrorDownNavItem className="dropdown-icon" />
</span>
<div className="dropdown-menu" aria-labelledby="navbarDropdown">
<li>
<ConditionalNavigation
to="/tokens"
label="Token list"
featureToggle={`${UNLEASH_TOKENS_BASE_FEATURE_FLAG}.rollout`}
/>
<ConditionalNavigation
to="/token_balances"
label="Token balances"
featureToggle={`${UNLEASH_TOKEN_BALANCES_FEATURE_FLAG}.rollout`}
/>
</li>
</div>
</ul>
)}
<li className="nav-item">
<NavLink
to="/network"
exact
className="nav-link"
activeClassName="active"
activeStyle={{ fontWeight: 'bold' }}
>
Network
</NavLink>
</li>
<li className="nav-item">
<NavLink
to="/statistics"
exact
className="nav-link"
activeClassName="active"
activeStyle={{ fontWeight: 'bold' }}
>
Statistics
</NavLink>
</li>
<li className="nav-item dropdown">
<span
className="nav-link dropdown-toggle custom-dropdown-toggle"
id="navbarDropdown"
Expand All @@ -144,132 +198,89 @@ function Navigation() {
aria-haspopup="true"
aria-expanded="false"
>
Tokens
Tools
<ArrorDownNavItem className="dropdown-icon" />
</span>
<div className="dropdown-menu" aria-labelledby="navbarDropdown">
<li>
<ConditionalNavigation
to="/tokens"
label="Token list"
featureToggle={`${UNLEASH_TOKENS_BASE_FEATURE_FLAG}.rollout`}
/>
<ConditionalNavigation
to="/token_balances"
label="Token balances"
featureToggle={`${UNLEASH_TOKEN_BALANCES_FEATURE_FLAG}.rollout`}
/>
</li>
<NavLink to="/decode-tx/" exact className="nav-link">
Decode Tx
</NavLink>
<NavLink to="/push-tx/" exact className="nav-link">
Push Tx
</NavLink>
<NavLink to="/dag/" exact className="nav-link">
DAG
</NavLink>
<NavLink to="/features/" exact className="nav-link">
Features
</NavLink>
</div>
</ul>
)}
<li className="nav-item">
<NavLink
to="/network"
exact
className="nav-link"
activeClassName="active"
activeStyle={{ fontWeight: 'bold' }}
>
Network
</NavLink>
</li>
<li className="nav-item">
<NavLink
to="/statistics"
exact
className="nav-link"
activeClassName="active"
activeStyle={{ fontWeight: 'bold' }}
>
Statistics
</NavLink>
</li>
<li className="nav-item dropdown">
<span
className="nav-link dropdown-toggle custom-dropdown-toggle"
id="navbarDropdown"
role="button"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Tools
<ArrorDownNavItem className="dropdown-icon" />
</span>
<div className="dropdown-menu" aria-labelledby="navbarDropdown">
<NavLink to="/decode-tx/" exact className="nav-link">
Decode Tx
</NavLink>
<NavLink to="/push-tx/" exact className="nav-link">
Push Tx
</NavLink>
<NavLink to="/dag/" exact className="nav-link">
DAG
</NavLink>
<NavLink to="/features/" exact className="nav-link">
Features
</NavLink>
</li>
</ul>
<div className="d-flex flex-row align-items-center ms-auto navigation-search">
<div className="d-flex flex-row align-items-center">
<input
className="form-control me-2 bg-dark text-light navigation-search-input"
type="search"
placeholder={`Search here`}
aria-label="Search"
ref={txSearchRef}
onKeyUp={handleKeyUp}
/>
</div>
</li>
</ul>
<div className="d-flex flex-row align-items-center ms-auto navigation-search">
<div className="d-flex flex-row align-items-center">
</div>
</div>
<div className="network-container hide-tabs">
<img
src={theme === 'dark' ? sun : moon}
alt="themeColorButton"
className="theme-color-btn"
onClick={() => dispatch(toggleTheme())}
role="button"
/>
<div className="network-icon-container">
<GlobeNetwork
className={`${theme === 'dark' ? 'dark-theme-logo' : 'light-theme-logo'}`}
/>
<span className="nav-title">{hathorNetwork}</span>
</div>
</div>
<div className="mobile-tabs">
{showSearchInput ? (
<input
className="form-control me-2 bg-dark text-light navigation-search-input"
type="search"
placeholder={`Search here`}
className={`form-control me-2 bg-dark text-light mobile-search-input ${
showSearchInput ? 'expanded' : ''
}`}
placeholder="Search..."
aria-label="Search"
ref={txSearchRef}
onKeyUp={handleKeyUp}
onBlur={() => setShowSearchInput(false)}
autoFocus
/>
</div>
</div>
</div>
<div className="network-container hide-tabs">
<img
src={theme === 'dark' ? sun : moon}
alt="themeColorButton"
className="theme-color-btn"
onClick={() => dispatch(toggleTheme())}
role="button"
/>
<div className="network-icon-container">
<GlobeNetwork
className={`${theme === 'dark' ? 'dark-theme-logo' : 'light-theme-logo'}`}
/>
<span className="nav-title">{hathorNetwork}</span>
</div>
</div>
<div className="mobile-tabs">
{showSearchInput ? (
<input
type="search"
className={`form-control me-2 bg-dark text-light mobile-search-input ${
showSearchInput ? 'expanded' : ''
}`}
placeholder="Search..."
aria-label="Search"
ref={txSearchRef}
onKeyUp={handleKeyUp}
onBlur={() => setShowSearchInput(false)}
autoFocus
/>
) : (
<SearchIcon
) : (
<SearchIcon
fill={theme === 'dark' ? 'white' : 'black'}
onClick={toggleSearchInput}
className="mobile-search-icon"
/>
)}
<MenuIcon
fill={theme === 'dark' ? 'white' : 'black'}
onClick={toggleSearchInput}
className="mobile-search-icon"
onClick={showSidebarHandler}
className="mobile-sidebar-icon"
/>
)}
<MenuIcon
fill={theme === 'dark' ? 'white' : 'black'}
onClick={showSidebarHandler}
className="mobile-sidebar-icon"
/>
</div>
<Sidebar close={() => setShowSidebar(false)} open={showSidebar} />
</nav>
</div>
<Sidebar close={() => setShowSidebar(false)} open={showSidebar} />
</nav>
<NewHathorAlert
ref={alertErrorRef}
text="Invalid hash format or address"
type="error"
fixedPosition
/>
</>
);
};

Expand Down
6 changes: 4 additions & 2 deletions src/components/NewHathorAlert.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { ReactComponent as SuccessIcon } from '../assets/images/success-icon.svg
* @param {Object} props - Component properties.
* @param {string} props.type - Defines the alert type for styling (e.g., "success", "error").
* @param {string} props.text - The message text displayed in the alert.
* @param {boolean} [props.fixedPosition=false] - If true, the alert will be fixed at the bottom right of the screen
* @param {React.Ref} ref - A reference to call the `show` method from parent components.
*
* @example:
Expand All @@ -24,7 +25,7 @@ import { ReactComponent as SuccessIcon } from '../assets/images/success-icon.svg
* alertRef.current.show(2000); // Show the alert for 2 seconds
* ```
*/
const NewHathorAlert = forwardRef(({ type, text, showAlert }, ref) => {
const NewHathorAlert = forwardRef(({ type, text, showAlert, fixedPosition }, ref) => {
const alertDiv = useRef(null);

/**
Expand Down Expand Up @@ -56,10 +57,11 @@ const NewHathorAlert = forwardRef(({ type, text, showAlert }, ref) => {
show,
}));

const fixedPositionClass = fixedPosition ? 'fixed-position' : '';
return (
<div
ref={alertDiv}
className={`new-hathor-alert alert alert-${type} alert-dismissible fade`}
className={`new-hathor-alert alert alert-${type} alert-dismissible fade ${fixedPositionClass}`}
role="alert"
style={{ display: 'flex', flexDirection: 'row' }}
>
Expand Down
Loading

0 comments on commit a9fb9ab

Please sign in to comment.