Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Eliminating Redundant Clicks on Submit Button in Article Finder #5626

Merged
merged 4 commits into from
Feb 16, 2024
Merged

Eliminating Redundant Clicks on Submit Button in Article Finder #5626

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8d15912
Fixed Error due to Multiple clicks on Article Finder
PR4NJ41 Feb 6, 2024
eac999c
Fixed Merge conflicts
PR4NJ41 Feb 15, 2024
61df97b
Fixed Merge conflicts
PR4NJ41 Feb 15, 2024
5998910
simplified the code
PR4NJ41 Feb 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
38 changes: 22 additions & 16 deletions app/assets/javascripts/components/article_finder/article_finder.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,21 +110,6 @@ const ArticleFinder = (props) => {
// const sortSelect = (e) => {
// props.sortArticleFinder(e.target.value);
// };
const searchButton = <button className="button dark" onClick={searchArticles}>{I18n.t('article_finder.submit')}</button>;
const searchTerm = (
<TextInput
id="category"
onChange={updateFieldsHandler}
value={props.search_term}
value_key="search_term"
required
editable
label={I18n.t('article_finder.search')}
placeholder={I18n.t('article_finder.search_placeholder')}
onKeyDown={onKeyDown}
ref={searchboxRef}
>{searchButton}
</TextInput>);

const searchType = (
<div>
Expand Down Expand Up @@ -369,6 +354,9 @@ const ArticleFinder = (props) => {
/>
);

const isButtonDisabled = props.fetchState !== 'PAGEVIEWS_RECEIVED' && !props.loading;
const buttonClasses = `button dark ${isButtonDisabled ? 'disabled' : ''}`;

return (
<div className="container">
<header>
Expand All @@ -379,7 +367,25 @@ const ArticleFinder = (props) => {
</header>
<div className="article-finder-form">
<div className="search-bar">
{searchTerm}
<TextInput
id="category"
onChange={updateFieldsHandler}
value={props.search_term}
value_key="search_term"
required
editable
label={I18n.t('article_finder.search')}
placeholder={I18n.t('article_finder.search_placeholder')}
onKeyDown={onKeyDown}
ref={searchboxRef}
/>
<button
className={buttonClasses}
disabled={isButtonDisabled}
onClick={searchArticles}
>
{I18n.t('article_finder.submit')}
</button>
</div>
</div>
{options}
Expand Down
5 changes: 4 additions & 1 deletion app/assets/stylesheets/modules/_article_finder.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,18 @@
text-align center

.search-bar
display flex
flex-direction row
align-items end
.search-type
display flex
justify-content space-around
input[type=text]
width 50rem
button
margin-bottom 8px
height 2.8rem
margin-left 2rem
margin-bottom 0.43rem

.article-wiki-selector-block
max-width 250px
Expand Down