Skip to content

Commit f2c59d6

Browse files
iintiiiintii
committed
m
1 parent dcbc0e8 commit f2c59d6

File tree

3 files changed

+133
-82
lines changed

3 files changed

+133
-82
lines changed

‎server/frontend/src/App.js

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,35 @@
1-
import LoginPanel from "./components/Login/Login"
1+
// src/App.js
2+
23
import { Routes, Route } from "react-router-dom";
4+
// Corrected import for Login/LoginPanel - assuming LoginPanel is what you want to use for /login
5+
import LoginPanel from "./components/Login/Login"; // This imports the default export from Login.js as LoginPanel
36
import Register from "./components/Register/Register";
7+
import Dealers from './components/Dealers/Dealers';
8+
9+
// **** THESE ARE THE MISSING IMPORTS THAT ARE CAUSING THE ESLINT ERRORS ****
10+
// You need to import these components from their respective files.
11+
// Adjust the paths based on where these component files actually live in your project.
12+
// Common assumption: each component has its own folder within `src/components/`
13+
import Home from './components/Home/Home'; // Assuming your Home component is in src/components/Home/Home.js
14+
import Dealer from './components/Dealers/Dealer'; // Assuming your Dealer component is in src/components/Dealer/Dealer.js
15+
// Assuming PostReview is in src/components/PostReview/PostReview.js
16+
import Header from './components/Header/Header';
417

518
function App() {
619
return (
720
<Routes>
21+
<Route />
22+
<Route path="/" element={<Home />} />
23+
{/* If LoginPanel is the component for your login page, use it here: */}
824
<Route path="/login" element={<LoginPanel />} />
9-
<Route path="/register" element = {<Register/>}/>
25+
{/* If you have a separate component named 'Login' that is *not* LoginPanel,
26+
then you would need to import 'Login' as well: import Login from './components/Login/LoginComponent';
27+
But typically, LoginPanel IS the Login component.
28+
*/}
29+
<Route path="/register" element={<Register />} />
30+
<Route path="/dealers" element={<Dealers />} />
31+
<Route path="/dealer/:id" element={<Dealer />} />
32+
1033
</Routes>
1134
);
1235
}

‎server/frontend/src/components/Dealers/Dealers.jsx

Lines changed: 107 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -5,92 +5,120 @@ import Header from '../Header/Header';
55
import review_icon from "../assets/reviewicon.png"
66

77
const Dealers = () => {
8-
const [dealersList, setDealersList] = useState([]);
9-
// let [state, setState] = useState("")
10-
let [states, setStates] = useState([])
8+
const [dealersList, setDealersList] = useState([]);
9+
const [states, setStates] = useState([]);
10+
const [selectedState, setSelectedState] = useState('All'); // New state to manage the selected filter value
1111

12-
// let root_url = window.location.origin
13-
let dealer_url ="/djangoapp/get_dealers";
14-
15-
let dealer_url_by_state = "/djangoapp/get_dealers/";
16-
17-
const filterDealers = async (state) => {
18-
dealer_url_by_state = dealer_url_by_state+state;
19-
const res = await fetch(dealer_url_by_state, {
20-
method: "GET"
21-
});
22-
const retobj = await res.json();
23-
if(retobj.status === 200) {
24-
let state_dealers = Array.from(retobj.dealers)
25-
setDealersList(state_dealers)
26-
}
27-
}
12+
// Function to fetch dealerships based on the selected state
13+
const fetchDealerships = async (stateParam) => { // Renamed parameter to avoid conflict with useState
14+
let url = `/djangoapp/get_dealers`;
15+
if (stateParam && stateParam !== 'All') {
16+
url = `/djangoapp/get_dealers/${stateParam}`; // Correctly form URL for specific state
17+
}
18+
19+
try {
20+
const res = await fetch(url, {
21+
method: "GET"
22+
});
23+
const retobj = await res.json();
24+
if (retobj.status === 200) {
25+
setDealersList(Array.from(retobj.dealers));
26+
} else {
27+
console.error("Failed to fetch dealerships:", retobj.message);
28+
setDealersList([]); // Clear list on error
29+
}
30+
} catch (error) {
31+
console.error("Network error fetching dealerships:", error);
32+
setDealersList([]); // Clear list on network error
33+
}
34+
};
2835

29-
const get_dealers = async ()=>{
30-
const res = await fetch(dealer_url, {
31-
method: "GET"
32-
});
33-
const retobj = await res.json();
34-
if(retobj.status === 200) {
35-
let all_dealers = Array.from(retobj.dealers)
36-
let states = [];
37-
all_dealers.forEach((dealer)=>{
38-
states.push(dealer.state)
36+
// Function to get all dealers and populate states dropdown initially
37+
const get_all_dealers_and_states = async () => {
38+
const res = await fetch("/djangoapp/get_dealers", { // Always fetch all initially to get states
39+
method: "GET"
3940
});
41+
const retobj = await res.json();
42+
if (retobj.status === 200) {
43+
let all_dealers = Array.from(retobj.dealers);
44+
let uniqueStates = new Set();
45+
all_dealers.forEach((dealer) => {
46+
uniqueStates.add(dealer.state);
47+
});
48+
setStates(Array.from(uniqueStates)); // Set unique states for the dropdown
49+
setDealersList(all_dealers); // Set the initial list of all dealers
50+
} else {
51+
console.error("Failed to fetch initial dealerships and states:", retobj.message);
52+
}
53+
};
4054

41-
setStates(Array.from(new Set(states)))
42-
setDealersList(all_dealers)
43-
}
44-
}
45-
useEffect(() => {
46-
get_dealers();
47-
},[]);
55+
// Use useEffect to fetch initial data and then re-fetch when selectedState changes
56+
useEffect(() => {
57+
// On initial mount, get all dealers and populate states
58+
get_all_dealers_and_states();
59+
}, []); // Empty dependency array: runs only once on component mount
4860

61+
// This useEffect watches for changes in selectedState and fetches dealers accordingly
62+
useEffect(() => {
63+
if (selectedState) { // Ensure selectedState is not null/undefined
64+
fetchDealerships(selectedState);
65+
}
66+
}, [selectedState]); // Dependency array: re-run when selectedState changes
4967

50-
let isLoggedIn = sessionStorage.getItem("username") != null ? true : false;
51-
return(
52-
<div>
53-
<Header/>
68+
const handleStateChange = (e) => {
69+
setSelectedState(e.target.value); // Update the selectedState
70+
};
5471

55-
<table className='table'>
56-
<tr>
57-
<th>ID</th>
58-
<th>Dealer Name</th>
59-
<th>City</th>
60-
<th>Address</th>
61-
<th>Zip</th>
62-
<th>
63-
<select name="state" id="state" onChange={(e) => filterDealers(e.target.value)}>
64-
<option value="" selected disabled hidden>State</option>
65-
<option value="All">All States</option>
66-
{states.map(state => (
67-
<option value={state}>{state}</option>
68-
))}
69-
</select>
72+
let isLoggedIn = sessionStorage.getItem("username") != null ? true : false;
73+
return (
74+
<div>
75+
<Header />
7076

71-
</th>
72-
{isLoggedIn ? (
73-
<th>Review Dealer</th>
74-
):<></>
75-
}
76-
</tr>
77-
{dealersList.map(dealer => (
78-
<tr>
79-
<td>{dealer['id']}</td>
80-
<td><a href={'/dealer/'+dealer['id']}>{dealer['full_name']}</a></td>
81-
<td>{dealer['city']}</td>
82-
<td>{dealer['address']}</td>
83-
<td>{dealer['zip']}</td>
84-
<td>{dealer['state']}</td>
85-
{isLoggedIn ? (
86-
<td><a href={`/postreview/${dealer['id']}`}><img src={review_icon} className="review_icon" alt="Post Review"/></a></td>
87-
):<></>
88-
}
89-
</tr>
90-
))}
91-
</table>;
92-
</div>
93-
)
77+
<table className='table'>
78+
<thead>
79+
<tr>
80+
<th>ID</th>
81+
<th>Dealer Name</th>
82+
<th>City</th>
83+
<th>Address</th>
84+
<th>Zip</th>
85+
<th>
86+
<select name="state" id="state" onChange={handleStateChange} value={selectedState}> {/* Use handleStateChange and value */}
87+
<option value="All">All States</option> {/* Set value to "All" for initial display */}
88+
{states.map(state => (
89+
<option key={state} value={state}>{state}</option> // Add key for list items
90+
))}
91+
</select>
92+
</th>
93+
{isLoggedIn ? (
94+
<th>Review Dealer</th>
95+
) : <></>
96+
}
97+
</tr>
98+
</thead>
99+
<tbody>
100+
{dealersList.length === 0 ? (
101+
<tr><td colSpan="7">Loading dealerships...</td></tr>
102+
) : (
103+
dealersList.map(dealer => (
104+
<tr key={dealer.id}> {/* Add key for list items */}
105+
<td>{dealer['id']}</td>
106+
<td><a href={'/dealer/' + dealer['id']}>{dealer['full_name']}</a></td>
107+
<td>{dealer['city']}</td>
108+
<td>{dealer['address']}</td>
109+
<td>{dealer['zip']}</td>
110+
<td>{dealer['state']}</td>
111+
{isLoggedIn ? (
112+
<td><a href={`/postreview/${dealer['id']}`}><img src={review_icon} className="review_icon" alt="Post Review" /></a></td>
113+
) : <></>
114+
}
115+
</tr>
116+
))
117+
)}
118+
</tbody>
119+
</table>
120+
</div>
121+
);
94122
}
95123

96-
export default Dealers
124+
export default Dealers;

‎server/frontend/src/components/Home/Home.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ function Home() {
4949
</Link>
5050

5151
{/* Dealers Button */}
52-
<Link to="/dealerships" style={buttonStyle} onMouseOver={(e) => e.currentTarget.style.backgroundColor = buttonHoverStyle.backgroundColor} onMouseOut={(e) => e.currentTarget.style.backgroundColor = buttonStyle.backgroundColor}>
52+
<Link to="/dealers" style={buttonStyle} onMouseOver={(e) => e.currentTarget.style.backgroundColor = buttonHoverStyle.backgroundColor} onMouseOut={(e) => e.currentTarget.style.backgroundColor = buttonStyle.backgroundColor}>
5353
View Dealerships
5454
</Link>
5555
</div>

0 commit comments

Comments
 (0)