add a history of recent searches

[Vadman97]

https://www.loom.com/share/3635973fd10840f0a24743080f79a6ec

[linear]

HIG-4737 add a history of recent searches

[greptile-apps]

To add a history of recent searches:

1. Update State in SearchIssues.tsx:

   • Add a state to store recent searches.

   const [recentSearches, setRecentSearches] = useState<SearchOption[]>([]);

2. Modify onSelect Handler:

   • Update the onSelect handler to store the selected search in the recent searches state.

   onSelect={(newValue: string) => {
     const option = options.find((o) => o.value === newValue);
     if (option) {
       onSelect(option);
       setSelectOption(option);
       setRecentSearches((prev) => [option, ...prev.filter(o => o.id !== option.id)].slice(0, 5)); // Keep only the last 5 searches
     }
   }}

3. Display Recent Searches:

   • Add a section to display recent searches.

   <div className={styles.recentSearches}>
     <h4>Recent Searches</h4>
     <ul>
       {recentSearches.map((search) => (
         <li key={search.id} onClick={() => onSelect(search.value)}>{search.label}</li>
       ))}
     </ul>
   </div>

4. Add CSS for Recent Searches:

   • Update SearchIssues.module.css to style the recent searches section.

   .recentSearches {
     margin-top: 20px;
   }
   .recentSearches ul {
     list-style-type: none;
     padding: 0;
   }
   .recentSearches li {
     cursor: pointer;
     padding: 5px 0;
   }
   .recentSearches li:hover {
     text-decoration: underline;
   }

References

/frontend/src/components/SearchIssues/SearchIssues.tsx
/frontend/src/hooks/useSearchTime.ts
/frontend/src/pages/LogsPage/LogsPage.tsx

Ask Greptile