#266 implement search functionality fe #271
Conversation
| onChange={(e) => setSearchTerm(e.target.value)} | ||
| /> | ||
| </div> | ||
| <button |
There was a problem hiding this comment.
I also would expect to run a search from the keyboard on the enter press
There was a problem hiding this comment.
Can you explain it, please?
There was a problem hiding this comment.
Thank you for feedback. Done.
There was a problem hiding this comment.
I mean when I heat Enter button from the keyboard I would expect to run a search
| @@ -1,4 +1,4 @@ | |||
| .header-search-box { | |||
| /* .header-search-box { | |||
There was a problem hiding this comment.
Thank you for feedback. Done.
| axios | ||
| .get(`${servedAddress}/api/search/?name=${searchTerm}`) | ||
| .then((response) => { | ||
| setSearchResults(response.data); | ||
| setSearchPerformed(true); | ||
| setError(null); // Clear error on successful response | ||
| }) | ||
| .catch((error) => { | ||
| console.error('Error fetching search results:', error); | ||
| setError(error.response ? error.response.data : 'An error occurred'); | ||
| }); |
There was a problem hiding this comment.
I think we can handle it using swr for the consistency
There was a problem hiding this comment.
Thank you for feedback. Done
| import App from './App'; | ||
| import reportWebVitals from './reportWebVitals'; | ||
|
|
||
| const root = ReactDOM.createRoot(document.getElementById('root')); |
There was a problem hiding this comment.
Do we really need to create a new react root for the SearchPage?
There was a problem hiding this comment.
Thank you for feedback. Done.
| return ( | ||
| <div> | ||
| {!error && ( | ||
| <> |
There was a problem hiding this comment.
No need for the fragment if you have only one child
There was a problem hiding this comment.
Thank you for feedback. Done.
| @@ -0,0 +1,33 @@ | |||
| import MainCompanies from './companies/Companies'; | |||
| import './Text.css'; | |||
There was a problem hiding this comment.
Thank you for feedback. Done.
| .new-companies { | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 800px; |
There was a problem hiding this comment.
Is it the correct value?
There was a problem hiding this comment.
It isn't a correct class. Deleted.
|
|
||
| // those variables we would use for axios to get data from beckend | ||
| // get saved list code here | ||
| const usersSavedList = []; |
There was a problem hiding this comment.
It seems to be a TODO
| // add company to saved list code here | ||
| // const addToSavedList = (profile_id) => {}; | ||
|
|
||
| // del company from saved list code here | ||
| // const delFromSavedList = (profile_id) => {}; |
There was a problem hiding this comment.
Best practices writing comments I do not really think that it should be a comment. If this work is out of your ticket scope its better to create a new follow up ticket to complete it.
There was a problem hiding this comment.
Thank you for feedback. Done.
| import { Link } from 'react-router-dom'; | ||
| import wish_list_checklist from './img/wish_list_checklist.svg'; | ||
| import wish_list_checklist_added from './img/wish_list_checklist_added.svg'; | ||
| import './CompaniesCards.css'; |
There was a problem hiding this comment.
Thank you for feedback. Done.
| .map((category) => category.name) | ||
| .join(' ')} | ||
| </div> | ||
| <div className="product-card__name-text align_items_left"> |
There was a problem hiding this comment.
Do we have a product card component? If no its better to move it to the separate component
There was a problem hiding this comment.
I've renamed Companies.js to CompanyCard. Because it ctreates company card, not a list of companies. Is that smth you've meant?
There was a problem hiding this comment.
If it creates CompanyCard I think its ok.
| .App { | ||
| text-align: center; | ||
| } | ||
|
|
||
| .App-logo { | ||
| height: 40vmin; | ||
| pointer-events: none; | ||
| } | ||
|
|
||
| @media (prefers-reduced-motion: no-preference) { | ||
| .App-logo { | ||
| animation: App-logo-spin infinite 20s linear; | ||
| } | ||
| } | ||
|
|
||
| .main_block_outer { | ||
| padding-top: 10px; | ||
| } | ||
|
|
||
| .new-companies-main { | ||
| background-color: var(--new-companies-main); | ||
| } | ||
|
|
||
| .App-header { | ||
| background-color: var(--text-color); | ||
| min-height: 100vh; | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| justify-content: center; | ||
| font-size: calc(10px + 2vmin); | ||
| color: var(--white-color); | ||
| } | ||
|
|
||
| .App-link { | ||
| color: var(--link-color); | ||
| } |
There was a problem hiding this comment.
We probably want to include SearchPage to the main react root, some of the styles could be redundant than
There was a problem hiding this comment.
Thank you for feedback. Done.
| </div> | ||
| </header> | ||
| ); | ||
| function Header(props) { |
There was a problem hiding this comment.
Could you add prop types for props?
There was a problem hiding this comment.
No. It's not my task for now. But I'll create a new task
|
|
||
| const ITEMS_PER_PAGE = 6; | ||
|
|
||
| export function Search(props) { |
There was a problem hiding this comment.
Thank you for feedback. Done
| import CompanyCard from './companies/CompanyCard'; | ||
| import styles from './Text.module.css'; | ||
|
|
||
| const SearchResults = ({ results, displayedResults, isAuthorized }) => { |
There was a problem hiding this comment.
Thank you for feedback. Done
| import { useState, useEffect } from 'react'; | ||
| import { useSWRConfig } from 'swr'; | ||
| import useSWRMutation from 'swr/mutation'; | ||
| // import useSWR from 'swr'; |
There was a problem hiding this comment.
Remove if we do not use it here
| const [isSaved, setIsSaved] = useState(false); | ||
|
|
||
| async function sendRequest(url, { arg: data }) { | ||
| return fetch(url, { |
There was a problem hiding this comment.
I think we use Axios across the app
There was a problem hiding this comment.
Thank you for feedback. Done: fetch->axios
| Authorization: `Token ${authToken}`, | ||
| }, | ||
| body: JSON.stringify(data), | ||
| }).then(); |
There was a problem hiding this comment.
No need for the empty then
| mutate((key) => typeof key === 'string' && key.startsWith('/api/profiles/'), { | ||
| revalidate: true, | ||
| }); |
| <div className={styles['product-card__image-frame']}> | ||
| <img | ||
| className={styles['product-card__image']} | ||
| // src={companyData.banner_image} |
| </div> | ||
| </div> | ||
| </div> | ||
| {/* {isAuthorized ? (isSaved ? filledStar : outlinedStar) : null} */} |
There was a problem hiding this comment.
Should it be commented
| </div> | ||
| {/* {isAuthorized ? (isSaved ? filledStar : outlinedStar) : null} */} | ||
| {star} | ||
| {/* <div>{}</div> */} |
| /* .search_result_error_search_value { | ||
| color: var(--main-style-signs-color); | ||
| } |
There was a problem hiding this comment.
Do we still need it?
Frontend part of search functionality
