- {comments.map(comment => (
-
-
+
+
+ {comments.map((comment, index) => (
+
+
{comment.name[0]}
-
+
{comment.comment}
-
+
{comment.name} -
{comment.time}
diff --git a/src/components/CommunityPortal/Activities/activityId/CommentSection/CommentSection.module.css b/src/components/CommunityPortal/Activities/activityId/CommentSection/CommentSection.module.css
index 8f5563a587..a36a06dab4 100644
--- a/src/components/CommunityPortal/Activities/activityId/CommentSection/CommentSection.module.css
+++ b/src/components/CommunityPortal/Activities/activityId/CommentSection/CommentSection.module.css
@@ -1,36 +1,39 @@
-/* stylelint-disable */
-.commentText {
- flex: 1;
- background-color: #f4f4f4;
- padding: 10px;
- border-radius: 6px;
-}
-
-.commentFooter {
+.activityCommentFooter {
font-size: 12px;
color: gray;
margin-top: 5px;
+ transition: color 0.3s ease;
}
-.comment {
+.activityComment {
display: flex;
align-items: flex-start;
gap: 10px;
+ transition: background-color 0.3s ease;
}
-.commentsSection {
+.activityCommentsSection {
margin-top: 20px;
display: flex;
flex-direction: column;
gap: 20px;
+ transition: all 0.3s ease;
}
-.commentUser {
+.activityCommentUser {
display: flex;
gap: 5px;
}
-.icon {
+.activityCommentText {
+ flex: 1;
+ background-color: #f4f4f4;
+ padding: 10px;
+ border-radius: 6px;
+ transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.activityIcon {
width: 30px;
height: 30px;
border-radius: 50%;
@@ -38,6 +41,11 @@
text-align: center;
line-height: 30px;
font-weight: bold;
+ transition: transform 0.2s ease;
+}
+
+.activityIcon:hover {
+ transform: scale(1.1);
}
.purple {
@@ -48,33 +56,31 @@
background-color: #36f;
}
-@media (width <= 800px) {
- .comment {
+@media (max-width: 800px) {
+ .activityComment {
flex-direction: column;
gap: 5px;
}
- .commentsSection {
+ .activityCommentsSection {
gap: 10px;
padding: 15px;
}
}
-/* Dark mode (body.dark-mode from theme) */
-:global(body.dark-mode) .commentsSection {
- color: #e0e0e0;
+.darkMode .activityCommentFooter {
+ color: #aaa;
}
-:global(body.dark-mode) .commentText {
- background-color: #2a3a57;
- color: #e0e0e0;
- border: 1px solid #3b4a66;
+.darkMode .activityComment {
+ background-color: transparent;
}
-:global(body.dark-mode) .commentFooter {
- color: #b0b0b0;
+.darkMode .activityCommentsSection {
+ background-color: transparent;
}
-:global(body.dark-mode) .commentFooter span {
- color: #b0b0b0;
+.darkMode .activityCommentText {
+ background-color: #3a506b;
+ color: #ffffff;
}
diff --git a/src/components/CommunityPortal/Activities/activityId/FeedBackSection/Feedback.jsx b/src/components/CommunityPortal/Activities/activityId/FeedBackSection/Feedback.jsx
new file mode 100644
index 0000000000..cad408e059
--- /dev/null
+++ b/src/components/CommunityPortal/Activities/activityId/FeedBackSection/Feedback.jsx
@@ -0,0 +1,405 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useSelector } from 'react-redux';
+import styles from './Feedback.module.css';
+import { FaSearch } from 'react-icons/fa';
+import { MdArrowUpward, MdArrowDownward } from 'react-icons/md';
+import { AiFillStar, AiOutlineStar } from 'react-icons/ai';
+import FeedbackModal from './FeedbackModal';
+
+const nowISO = () => new Date().toISOString();
+
+function Feedback({
+ reviewsEnabled = true,
+ suggestionsOnly = false,
+ isHost = false,
+ eventCreatedAt = null,
+ showModal = false,
+ setShowModal = null,
+ feedbackList,
+ setFeedbackList,
+}) {
+ // local list (in real app you'd fetch)
+ const [searchTerm, setSearchTerm] = useState('');
+ const [filterBy, setFilterBy] = useState('date');
+ const [sortOrder, setSortOrder] = useState('desc');
+ const [visibilityFilter, setVisibilityFilter] = useState('all');
+ const [showSuggestionsOnly, setShowSuggestionsOnly] = useState(false);
+
+ // modal form state (participant)
+ const [modalOpen, setModalOpen] = useState(showModal);
+ const [modalRating, setModalRating] = useState(0);
+ const [modalComment, setModalComment] = useState('');
+ const [modalSuggestionText, setModalSuggestionText] = useState('');
+ const [modalPrivate, setModalPrivate] = useState(false);
+ const [visibleCount, setVisibleCount] = useState(2);
+
+ // reflect incoming modal prop
+ useEffect(() => {
+ if (typeof showModal === 'boolean') setModalOpen(showModal);
+ }, [showModal]);
+
+ useEffect(() => {
+ // If parent gave setShowModal, keep synchronized
+ if (setShowModal) {
+ setShowModal(modalOpen);
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [modalOpen]);
+
+ useEffect(() => {
+ // Placeholder for API call to fetch feedback data
+ // For now we use dummyFeedback above.
+ }, []);
+
+ // dark mode for styling
+ const darkMode = useSelector(state => state.theme?.darkMode);
+
+ // helper: determine if event was created within one month
+ const eventWithinFirstMonth = useMemo(() => {
+ if (!eventCreatedAt) return false;
+ const created = new Date(eventCreatedAt);
+ const oneMonthLater = new Date(created);
+ oneMonthLater.setMonth(oneMonthLater.getMonth() + 1);
+ return new Date() <= oneMonthLater;
+ }, [eventCreatedAt]);
+
+ const handleSearch = e => setSearchTerm(e.target.value);
+ const handleFilterChange = e => setFilterBy(e.target.value);
+ const handleSortChange = () => setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
+
+ const renderStars = feedback =>
+ Array.from({ length: 5 }, (_, i) => (
+
+ {i < (feedback.rating || 0) ?
+
+ {isHost && (
+ <>
+ {
+ setModalOpen(false);
+ if (setShowModal) setShowModal(false);
+ }}
+ onSubmit={handleSubmitFeedback}
+ show={modalOpen}
+ importantLabel={
+ eventWithinFirstMonth
+ ? 'Your feedback is only visible to the host for the first month.'
+ : null
+ }
+ disableSubmit={
+ (!suggestionsOnly && !modalComment && !modalRating) ||
+ (suggestionsOnly && !modalSuggestionText) ||
+ (!reviewsEnabled && !suggestionsOnly)
+ }
+ >
+ {suggestionsOnly ? (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {showSuggestionsOnly ? (
+
+ {suggestionList.length === 0 ? (
+
+ ) : (
+ No suggestions yet.
+ ) : (
+ suggestionList.map(s => (
+
+ ![User]()
+
+ ))
+ )}
+
+
+
+ {s.name}
+ {s.date}
+
+ {s.comment}
+
+ {filteredFeedback.length === 0 ? (
+
+ )}
+ {visibleCount < feedbackList.length && (
+ No feedback matches your filters.
+ ) : (
+ filteredFeedback.slice(0, visibleCount).map(feedback => (
+
+ ![User]()
+
+ ))
+ )}
+
+
+
+ {feedback.name}
+ {feedback.date}
+ {/* Visibility badge */}
+
+ {feedback.visibility === 'host-only'
+ ? 'Private'
+ : feedback.visibility === 'suggestion'
+ ? 'Suggestion'
+ : 'Public'}
+
+
+
+ {/* rating */}
+ {feedback.rating !== null && (
+ {renderStars(feedback)}
+ )}
+
+ {feedback.comment}
+
+
+
+ )}
+
+ )}
+
+ {/* Participant view / modal */}
+ {!isHost && (
+ <>
+ {/* Notice if reviews disabled */}
+ {!reviewsEnabled && !suggestionsOnly && (
+
+ Reviews are currently disabled for this event.
+
+ )}
+
+ {/* Button to open modal if parent didn't provide one */}
+ {!modalOpen && (reviewsEnabled || suggestionsOnly) && (
+
+
+
+ )}
+
+ {/* Modal-like simple panel (replace with your modal component if you have one) */}
+ {modalOpen && (
+
+
+