Skip to content

Search functionality not displaying error message when no results are found in the landing Page #466

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

Open
wants to merge 2 commits into
base: source
Choose a base branch
from
Open

Search functionality not displaying error message when no results are found in the landing Page #466

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e947c98
Update CardsContainer.jsx
SrikanthPynaboina Dec 4, 2024
6a8728d
Update search.css
SrikanthPynaboina Dec 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
131 changes: 76 additions & 55 deletions src/components/ProjectList/CardsContainer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import Select from 'react-select';
import each from 'lodash/each'
import each from 'lodash/each';

import Card from './ProjectsCards';
import projectList from './listOfProjects';
Expand All @@ -15,125 +15,146 @@ export default class CardsContainer extends React.Component {

this.state = {
value: [],
filterList: this.sortArrayRandom(projectList)
}
filterList: this.sortArrayRandom(projectList),
error: "",
};

this.setTags = new Set();
this.filterOptions = [];
this.valueList = [];

for (let i = 0; i < projectList.length; i++) {

if (projectList[i].tags) {

projectList[i].tags.forEach(tag => {

projectList[i].tags.sort()
this.setTags.add(tag.toLowerCase())
})
projectList[i].tags.forEach((tag) => {
projectList[i].tags.sort();
this.setTags.add(tag.toLowerCase());
});
}
}

this.setTags.forEach(v => this.filterOptions.push({ value: v, label: v }));
if (this.setTags.size) {
this.setTags.forEach((v) =>
this.filterOptions.push({ value: v, label: v })
);
}

this.handleSelectChange = this.handleSelectChange.bind(this);
this.handleChange = this.handleChange.bind(this);
}

handleSelectChange(value) {

this.value = value;
this.setState({ value });
this.handleFilterListUpdate(value);
}

handleFilterListUpdate(value) {

let updatedList = [];

// If no filters
if ((!value || value.length === 0) && (!this.inputValue || this.inputValue.length === 0)) {
return this.setState({ filterList: this.sortArrayRandom(projectList) });
if (
(!value || value.length === 0) &&
(!this.inputValue || this.inputValue.length === 0)
) {
return this.setState({
filterList: this.sortArrayRandom(projectList),
error: "",
});
}

// If tags filter applied
if (value && value.length > 0) {
const valueList = [];

value.map(v => {
return valueList.push(v.value)
});
value.map((v) => valueList.push(v.value));

each(projectList, (project) => {

if (!project.tags) return;

let lowerCaseTags = project.tags.map(v => v.toLowerCase())
if (valueList.every(v => lowerCaseTags.includes(v))) {

let lowerCaseTags = project.tags.map((v) => v.toLowerCase());
if (valueList.every((v) => lowerCaseTags.includes(v))) {
updatedList.push(project);
}
})
});
}

// If search input value is not empty
if (this.inputValue && this.inputValue.length > 0) {

const searchedList = []
each(((updatedList.length > 0) ? updatedList : projectList), (project) => {

if (project.name.toLowerCase().includes(this.inputValue)
|| project.description.toLowerCase().includes(this.inputValue)
|| project.tags.toString().toLowerCase().includes(this.inputValue)) {

searchedList.push(project)
const searchedList = [];
each(
updatedList.length > 0 ? updatedList : projectList,
(project) => {
if (
project.name.toLowerCase().includes(this.inputValue) ||
project.description.toLowerCase().includes(this.inputValue) ||
project.tags.toString().toLowerCase().includes(this.inputValue)
) {
searchedList.push(project);
}
}
});
);

updatedList = searchedList;
}

this.setState({ filterList: updatedList });
// Update state with results or error message
if (updatedList.length > 0) {
this.setState({ filterList: updatedList, error: "" });
} else {
this.setState({
filterList: [],
error: `No results found for your search: "${this.inputValue}". Please try again.`,
});
}
}

// Search input handler
handleChange(event) {

this.inputValue = event.currentTarget.value;

this.inputValue = this.inputValue.trim();
this.inputValue = this.inputValue.toLowerCase();

this.handleFilterListUpdate(this.value)
this.inputValue = event.currentTarget.value.trim().toLowerCase();
this.handleFilterListUpdate(this.value);
}

sortArrayRandom(array){
if(Array.isArray(array)){
return array.sort(()=>0.5-Math.random())
sortArrayRandom(array) {
if (Array.isArray(array)) {
return array.sort(() => 0.5 - Math.random());
}
return array
return array;
}

render() {

return (
<div>
<div id='container'>
<div className='inputContainer'>
<input id='search' type='text' name='search' placeholder='Search...' onChange={this.handleChange} aria-label='Search'/>
<div id="container">
<div className="inputContainer">
<input
id="search"
type="text"
name="search"
placeholder="Search..."
onChange={this.handleChange}
aria-label="Search"
/>
</div>
<div id="tag-selector-container" className='inputContainer'>
<div id="tag-selector-container" className="inputContainer">
<Select
name='tag-selector'
name="tag-selector"
value={this.state.value}
onChange={this.handleSelectChange}
options={this.filterOptions}
multi={true}
placeholder={<div className='filter-placeholder-text'>Filter</div>}
aria-labelledby='tag-selector-container'
placeholder={<div className="filter-placeholder-text">Filter</div>}
aria-labelledby="tag-selector-container"
/>
</div>
</div>
<section id='project-list' className='containerLayout'>

{this.state.error && (
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What about showing error messages only if there is nothing in the filterList? Then you don't need another state like error. Maybe that could work 🤷

<div className='errorMessage'>
{this.state.error}
</div>
)}

<section id="project-list" className="containerLayout">
{this.state.filterList.map((item, key) => {
return (
<Card
Expand All @@ -143,7 +164,7 @@ export default class CardsContainer extends React.Component {
projectLink={item.projectLink}
description={item.description}
tags={item.tags}
className='testing-testing'
className="testing-testing"
/>
);
})}
Expand Down
10 changes: 9 additions & 1 deletion src/components/ProjectList/css/search.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,17 @@
margin-top: 40px;
}

div.errorMessage {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@SrikanthPynaboina can you make error message in red or yellow background? I think users are used to seeing danger messages in red or yellow. What do you think?

color: #FFF;
margin: 10px 0;
text-align: center;
font-size: 18px;
font-weight: bold;
}

@media screen and (max-width: 500px) {
.inputContainer {
width: 45%;
margin-top: 40px;
}
}
}