I have a table of values with varying values of location. I am trying to filter the rows in the database by matching the location value. The code is
'use client';
import { useState, useEffect } from 'react';
import { io } from 'socket.io-client';
const styles = {
container: {
width: '100%',
height: '100vh',
display: 'flex',
flexDirection: 'column',
backgroundColor: '#fff',
overflow: 'hidden',
},
header: {
width: '100%',
padding: '1rem',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
borderBottom: '1px solid #eaeaea',
boxSizing: 'border-box',
},
createButton: {
padding: '0.5rem 1rem',
backgroundColor: '#0070f3',
color: 'white',
border: 'none',
borderRadius: '5px',
cursor: 'pointer',
fontSize: '1rem',
},
headerText: {
flex: 1,
textAlign: 'center',
fontSize: '1.25rem',
color: '#333',
},
logOutButton: {
padding: '0.4rem 1rem',
backgroundColor: '#FF999C',
color: 'white',
border: '0.5px',
borderRadius: '5px',
cursor: 'pointer',
fontSize: '1rem',
},
contentWrapper: {
flex: 1,
padding: '1rem',
overflowY: 'auto',
},
main: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
width: '100%',
},
table: {
width: '100%',
borderCollapse: 'collapse',
borderRadius: '10px',
overflow: 'hidden',
border: '1px solid #000',
boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
},
th: {
border: '1px solid #000',
padding: '8px',
paddingLeft: '10px',
backgroundColor: '#334',
color: '#fff',
textAlign: 'center',
},
td: {
border: '1px solid #000',
padding: '8px',
textAlign: 'center',
backgroundColor: '#FAF9F6',
color: '#000',
},
footer: {
padding: '0.5rem',
borderTop: '2px solid #eaeaea',
display: 'flex',
justifyContent: 'center',
backgroundColor: 'white',
color: 'black',
boxSizing: 'border-box',
},
modalOverlay: {
position: 'fixed',
top: 0,
left: 0,
width: '100%',
height: '100%',
backgroundColor: 'rgba(0, 0, 0, 0.5)',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
zIndex: 1000,
},
modalContent: {
backgroundColor: 'white',
padding: '2rem',
borderRadius: '10px',
width: '90%',
maxWidth: '600px',
boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
},
input: {
width: '100%',
padding: '0.5rem',
marginBottom: '0.5rem',
color: 'black',
borderRadius: '5px',
border: '1px solid #ccc',
fontSize: '1rem',
},
modalButtons: {
display: 'flex',
justifyContent: 'space-between',
},
addButton: {
padding: '0.5rem 1rem',
backgroundColor: '#0070f3',
color: 'white',
border: 'none',
borderRadius: '5px',
cursor: 'pointer',
fontSize: '1rem',
},
cancelButton: {
padding: '0.5rem 1rem',
backgroundColor: '#E97451',
color: 'white',
border: 'none',
borderRadius: '5px',
cursor: 'pointer',
fontSize: '1rem',
},
deleteButton: {
padding: '0.1rem 1rem',
backgroundColor: '#E97451',
color: 'white',
border: 'none',
borderRadius: '5px',
cursor: 'pointer',
fontSize: '0.8rem',
},
'@media (max-width: 1024px)': {
container: {
padding: '0.5rem',
},
headerText: {
fontSize: '1rem',
},
createButton: {
padding: '0.3rem 0.6rem',
fontSize: '0.875rem',
},
table: {
width: '100%',
},
modalContent: {
width: '80%',
},
},
'@media (max-width: 768px)': {
container: {
padding: '0.5rem',
},
headerText: {
fontSize: '1rem',
},
createButton: {
padding: '0.3rem 0.6rem',
fontSize: '0.875rem',
},
table: {
width: '100%',
},
modalContent: {
width: '90%',
},
},
'@media (max-width: 480px)': {
container: {
padding: '0.25rem',
},
header: {
flexDirection: 'column',
alignItems: 'flex-start',
},
createButton: {
padding: '0.3rem 0.5rem',
fontSize: '0.75rem',
},
headerText: {
fontSize: '0.875rem',
},
table: {
fontSize: '0.875rem',
},
modalContent: {
width: '95%',
},
},
};
const Dashboard = () => {
const [streetLights, setStreetLights] = useState([]);
const [filter, setFilter] = useState({ location: '' });
const [selectedLocation, setSelectedLocation] = useState('');
const [newLight, setNewLight] = useState({
id: '',
dateOfFixing: '',
intensity: '',
workingCondition: '',
location: '',
});
const [editingLight, setEditingLight] = useState(null);
const [isModalOpen, setIsModalOpen] = useState(false);
// Fetch street lights when the filter changes
useEffect(() => {
const fetchStreetLights = async () => {
const query = new URLSearchParams(filter).toString(); // Convert filter to query string
const res = await fetch(`/api/streetlights?${query}`); // Append query string to the API endpoint
const data = await res.json();
setStreetLights(data); // Update state with filtered data
};
fetchStreetLights();
}, [filter]); // Re-run the effect when the filter changes
useEffect(() => {
const interval = setInterval(() => {
const fetchStreetLights = async () => {
const query = new URLSearchParams(filter).toString();
const res = await fetch(`/api/streetlights?${query}`);
const data = await res.json();
setStreetLights(data);
};
fetchStreetLights();
}, 100);
return () => clearInterval(interval);
}, [filter]);
// Socket connection for real-time updates
useEffect(() => {
const socket = io('http://localhost:3001');
socket.on('streetLightsData', (data) => {
setStreetLights(data);
});
return () => {
socket.disconnect();
};
}, []);
const handleFilterChange = (e) => {
setFilter({ ...filter, [e.target.name]: e.target.value }); // Update the filter state
};
const handleDelete = async (id) => {
const res = await fetch(`/api/streetlights/${id}`, {
method: 'DELETE',
});
if (res.ok) {
setStreetLights((prev) => prev.filter((light) => light.id !== id));
} else {
console.error('Failed to delete street light');
}
};
const handleChange = (e) => {
const { name, value } = e.target;
setNewLight((prev) => ({
...prev,
[name]: value,
}));
};
const handleSubmit = async (e) => {
e.preventDefault();
const res = await fetch('/api/streetlights', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(newLight),
});
if (res.ok) {
const newLight = await res.json();
setStreetLights((prev) => [...prev, newLight]);
setNewLight({
id: '',
dateOfFixing: '',
intensity: '',
workingCondition: true,
location: '',
});
}
};
const startEditing = (light) => {
setEditingLight(light);
setIsModalOpen(true);
};
const handleEditChange = (e) => {
const { name, value } = e.target;
setEditingLight((prev) => ({
...prev,
[name]: value,
}));
};
const handleOpenModal = () => {
setIsModalOpen(true);
};
const handleCloseModal = () => {
setIsModalOpen(false);
};
const handleLogout = () => {
window.location.href = '/api/auth/logout';
};
return (
<div style={styles.container}>
<header style={styles.header}>
<button style={styles.createButton} onClick={handleOpenModal}>
Create Light
</button>
<div style={styles.headerText}>Street Lights Dashboard</div>
<button style={styles.logOutButton} onClick={handleLogout}>
Log out
</button>
</header>
<header style={styles.header}>
<div>
<select
name="location"
value={filter.location}
onChange={handleFilterChange}
style={styles.input}
>
<option value="">All Locations</option>
<option value="Sriperumbudur">Sriperumbudur</option>
<option value="Location2">Location 2</option>
<option value="Location3">Location 3</option>
</select>
</div>
<div style={styles.headerText}>Street Lights Dashboard</div>
</header>
<div style={styles.contentWrapper}>
<main style={styles.main}>
<table style={styles.table}>
<thead>
<tr>
<th style={styles.th}>ID</th>
<th style={styles.th}>Date of Fixing</th>
<th style={styles.th}>Intensity</th>
<th style={styles.th}>Status</th>
<th style={styles.th}>Location</th>
<th style={styles.th}>Actions</th>
</tr>
</thead>
<tbody>
{streetLights.length > 0 ? (
streetLights.map((light) => (
<tr key={light.id}>
<td style={styles.td}>{light.id}</td>
<td style={styles.td}>{light.dateOfFixing}</td>
<td style={styles.td}>{light.intensity}</td>
<td style={styles.td}>{light.workingCondition}</td>
<td style={styles.td}>{light.location}</td>
<td style={styles.td}>
<button style={styles.deleteButton} onClick={() => handleDelete(light.id)}>
Delete
</button>
</td>
</tr>
))
) : (
<tr>
<td style={styles.td} colSpan="6">No street lights found for this location.</td>
</tr>
)}
</tbody>
</table>
</main>
</div>
<footer style={styles.footer}>
<p>Street Light Management System</p>
</footer>
</div>
);
};
export default Dashboard;
It still doesn’t filter the values by location. How do I do that?
Tried to print the lights with the location selected from the drop down menu but end up getting all the lights