1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
import { useState, useEffect } from 'react';
import '../styles/Quote.css'
export function PendingQuotes() {
const [quotes, setQuotes] = useState([]);
const fetchQuotes = async () => {
try {
const response = await fetch('http://localhost:3000/api/pending-quotes');
const data = await response.json();
setQuotes(data);
} catch (error) {
console.error('Failed to fetch quotes:', error);
}
};
useEffect(() => {
fetchQuotes();
}, []);
const approveQuote = async (id) => {
try {
const response = await fetch('http://localhost:3000/api/approve-quote', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ id }),
});
if (response.ok) {
fetchQuotes(); // Refresh the listing after approving the quote
} else {
console.error('Failed to approve quote');
}
} catch (error) {
console.error('Error approving quote:', error);
}
};
const rejectQuote = async (id) => {
try {
const response = await fetch('http://localhost:3000/api/reject-quote', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ id }),
});
if (response.ok) {
fetchQuotes(); // Refresh the listing after approving the quote
} else {
console.error('Failed to reject quote');
}
} catch (error) {
console.error('Error rejecting quote:', error);
}
};
return (
<div>
<h1>Pending Quotes</h1>
{quotes.length > 0 ? (
<ul className="quoteList">
{quotes.map((quote) => (
<li key={quote.id} className="quoteList">
<div className="quote">
<div className="author">
<img src={quote.authorImage} alt="No Profile" width="50" height="50"/>
<h1 className="quoteAuthor">{quote.author}</h1>
</div>
<p className="quoteText">{quote.quote}</p>
<small>- {quote.year}</small>
<small>Submitted by {quote.submitterAuthor} ({quote.submitterID})</small>
</div>
<button onClick={() => approveQuote(quote.id)}>Approve</button>
<button onClick={() => rejectQuote(quote.id)}>Reject</button>
</li>
))}
</ul>
) : (
<p>No pending quotes available.</p>
)}
</div>
);
}
|
