Skip to content

Commit dd8ead1

Browse files
darkhorse-420darkhorse-420
committed
feat: real-time search
1 parent 67b2ed0 commit dd8ead1

File tree

1 file changed

+36
-119
lines changed

1 file changed

+36
-119
lines changed

‎src/ui/views/OpenPushRequests/components/PushesTable.jsx

Lines changed: 36 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -13,25 +13,17 @@ import Paper from '@material-ui/core/Paper';
1313
import styles from '../../../assets/jss/material-dashboard-react/views/dashboardStyle';
1414
import { getPushes } from '../../../services/git-push';
1515
import { KeyboardArrowRight } from '@material-ui/icons';
16-
import Search from '../../../components/Search/Search'; // Import the Search component
17-
import Pagination from '../../../components/Pagination/Pagination'; // Import Pagination component
1816

1917
export default function PushesTable(props) {
2018
const useStyles = makeStyles(styles);
2119
const classes = useStyles();
2220
const [data, setData] = useState([]);
23-
const [filteredData, setFilteredData] = useState([]); // State for filtered data
21+
const [, setAuth] = useState(true);
2422
const [isLoading, setIsLoading] = useState(false);
2523
const [isError, setIsError] = useState(false);
2624
const navigate = useNavigate();
27-
const [, setAuth] = useState(true);
28-
const [currentPage, setCurrentPage] = useState(1); // State for current page
29-
const itemsPerPage = 5;
30-
const [searchTerm, setSearchTerm] = useState(''); // Define searchTerm state
31-
const openPush = (push) => navigate(`/admin/push/${push}`, { replace: true });
3225

33-
34-
26+
const openPush = (push) => navigate(`/admin/push/${push}`, { replace: true });
3527

3628
useEffect(() => {
3729
const query = {};
@@ -43,161 +35,94 @@ export default function PushesTable(props) {
4335
getPushes(setIsLoading, setData, setAuth, setIsError, query);
4436
}, [props]);
4537

46-
47-
// useEffect(() => {
48-
// setFilteredData(data); // Initialize filtered data with full data on load
49-
// }, [data]);
50-
51-
useEffect(() => {
52-
// Initialize filtered data with full data on load
53-
const filtered = filterByStatus(data);
54-
setFilteredData(filtered);
55-
}, [props]);
56-
57-
const filterByStatus = (data) => {
58-
if (props.authorised) {
59-
return data.filter(item => item.status === 'approved');
60-
}
61-
if (props.rejected) {
62-
return data.filter(item => item.status === 'rejected');
63-
}
64-
if (props.canceled) {
65-
return data.filter(item => item.status === 'canceled');
66-
}
67-
if (props.blocked) {
68-
return data.filter(item => item.status === 'pending');
69-
}
70-
return data;
71-
};
72-
73-
74-
// Apply search to the filtered data
75-
useEffect(() => {
76-
const filtered = filterByStatus(data); // Apply status filter first
77-
if (searchTerm) {
78-
const lowerCaseTerm = searchTerm.toLowerCase();
79-
const searchFiltered = filtered.filter((item) =>
80-
item.repo.toLowerCase().includes(lowerCaseTerm) ||
81-
item.commitTo.toLowerCase().includes(lowerCaseTerm) ||
82-
83-
item.commitData[0].message.toLowerCase().includes(lowerCaseTerm)
84-
);
85-
setFilteredData(searchFiltered);
86-
} else {
87-
setFilteredData(filtered); // Reset to filtered data after clearing search
88-
}
89-
setCurrentPage(1); // Reset pagination on search
90-
}, [searchTerm, props]); // Trigger on search or tab change
91-
92-
// Handler function for search input
93-
const handleSearch = (searchTerm) => {
94-
setSearchTerm(searchTerm); // Update search term state
95-
};
96-
97-
98-
const handlePageChange = (page) => {
99-
setCurrentPage(page); // Update current page
100-
};
101-
102-
// Logic for pagination (getting items for the current page)
103-
const indexOfLastItem = currentPage * itemsPerPage;
104-
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
105-
const currentItems = filteredData.slice(indexOfFirstItem, indexOfLastItem);
106-
107-
// Change page
108-
const paginate = (pageNumber) => setCurrentPage(pageNumber);
109-
11038
if (isLoading) return <div>Loading...</div>;
11139
if (isError) return <div>Something went wrong ...</div>;
11240

11341
return (
11442
<div>
115-
<Search onSearch={handleSearch} /> {/* Use the Search component */}
116-
117-
11843
<TableContainer component={Paper}>
119-
<Table className={classes.table} aria-label="simple table">
44+
<Table className={classes.table} aria-label='simple table'>
12045
<TableHead>
12146
<TableRow>
122-
<TableCell align="left">Timestamp</TableCell>
123-
<TableCell align="left">Repository</TableCell>
124-
<TableCell align="left">Branch</TableCell>
125-
<TableCell align="left">Commit SHA</TableCell>
126-
<TableCell align="left">Committer</TableCell>
127-
<TableCell align="left">Author</TableCell>
128-
<TableCell align="left">Author E-mail</TableCell>
129-
<TableCell align="left">Commit Message</TableCell>
130-
<TableCell align="left">No. of Commits</TableCell>
131-
<TableCell align="right"></TableCell>
47+
<TableCell align='left'>Timestamp</TableCell>
48+
<TableCell align='left'>Repository</TableCell>
49+
<TableCell align='left'>Branch</TableCell>
50+
<TableCell align='left'>Commit SHA</TableCell>
51+
<TableCell align='left'>Committer</TableCell>
52+
<TableCell align='left'>Author</TableCell>
53+
<TableCell align='left'>Author E-mail</TableCell>
54+
<TableCell align='left'>Commit Message</TableCell>
55+
<TableCell align='left'>No. of Commits</TableCell>
56+
<TableCell align='right'></TableCell>
13257
</TableRow>
13358
</TableHead>
13459
<TableBody>
135-
{currentItems.reverse().map((row) => {
60+
{[...data].reverse().map((row) => {
13661
const repoFullName = row.repo.replace('.git', '');
13762
const repoBranch = row.branch.replace('refs/heads/', '');
13863

13964
return (
14065
<TableRow key={row.id}>
141-
<TableCell align="left">
66+
<TableCell align='left'>
14267
{moment
14368
.unix(row.commitData[0].commitTs || row.commitData[0].commitTimestamp)
14469
.toString()}
14570
</TableCell>
146-
<TableCell align="left">
147-
<a href={`https://github.com/${row.repo}`} rel="noreferrer" target="_blank">
71+
<TableCell align='left'>
72+
<a href={`https://github.com/${row.repo}`} rel='noreferrer' target='_blank'>
14873
{repoFullName}
14974
</a>
15075
</TableCell>
151-
<TableCell align="left">
76+
<TableCell align='left'>
15277
<a
15378
href={`https://github.com/${repoFullName}/tree/${repoBranch}`}
154-
rel="noreferrer"
155-
target="_blank"
79+
rel='noreferrer'
80+
target='_blank'
15681
>
15782
{repoBranch}
15883
</a>
15984
</TableCell>
160-
<TableCell align="left">
85+
<TableCell align='left'>
16186
<a
16287
href={`https://github.com/${repoFullName}/commit/${row.commitTo}`}
163-
rel="noreferrer"
164-
target="_blank"
88+
rel='noreferrer'
89+
target='_blank'
16590
>
16691
{row.commitTo.substring(0, 8)}
16792
</a>
16893
</TableCell>
169-
<TableCell align="left">
94+
<TableCell align='left'>
17095
<a
17196
href={`https://github.com/${row.commitData[0].committer}`}
172-
rel="noreferrer"
173-
target="_blank"
97+
rel='noreferrer'
98+
target='_blank'
17499
>
175100
{row.commitData[0].committer}
176101
</a>
177102
</TableCell>
178-
<TableCell align="left">
103+
<TableCell align='left'>
179104
<a
180105
href={`https://github.com/${row.commitData[0].author}`}
181-
rel="noreferrer"
182-
target="_blank"
106+
rel='noreferrer'
107+
target='_blank'
183108
>
184109
{row.commitData[0].author}
185110
</a>
186111
</TableCell>
187-
<TableCell align="left">
112+
<TableCell align='left'>
188113
{row.commitData[0].authorEmail ? (
189114
<a href={`mailto:${row.commitData[0].authorEmail}`}>
190115
{row.commitData[0].authorEmail}
191116
</a>
192117
) : (
193118
'No data...'
194-
)}
119+
)}{' '}
195120
</TableCell>
196-
<TableCell align="left">{row.commitData[0].message}</TableCell>
197-
<TableCell align="left">{row.commitData.length}</TableCell>
198-
<TableCell component="th" scope="row">
199-
<Button variant="contained" color="primary" onClick={() => openPush(row.id)}>
200-
<KeyboardArrowRight />
121+
<TableCell align='left'>{row.commitData[0].message}</TableCell>
122+
<TableCell align='left'>{row.commitData.length}</TableCell>
123+
<TableCell component='th' scope='row'>
124+
<Button variant='contained' color='primary' onClick={() => openPush(row.id)}>
125+
<KeyboardArrowRight></KeyboardArrowRight>
201126
</Button>
202127
</TableCell>
203128
</TableRow>
@@ -206,14 +131,6 @@ export default function PushesTable(props) {
206131
</TableBody>
207132
</Table>
208133
</TableContainer>
209-
{/* Pagination Component */}
210-
<Pagination
211-
itemsPerPage={itemsPerPage}
212-
totalItems={filteredData.length}
213-
paginate={paginate}
214-
currentPage={currentPage}
215-
onPageChange={handlePageChange}
216-
/>
217134
</div>
218135
);
219136
}

0 commit comments

Comments
 (0)