mageshwaran/thirukalyanamweb
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

block,unblock,report, shortlisted changes in detail page

Browse Source
This commit is contained in:
Nagarajan 2026-04-29 13:11:07 +05:30
parent 30bea864e5
commit 11cc3c58b6
6 changed files with 322 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/api/apiEndpoints.js
View File

@ -76,7 +76,10 @@ export const API_ENDPOINTS = {
SUBSCRIPTION_PLANS: "subscription-plans",
SUBSCRIPTION_PURCHASE_RAZORPAY: "subscription-purchase-razorpay",
SUBSCRIPTION_HISTORY: "subscription-history",
//Report and Block profile
REPORT_PROFILE : "report_profile",
BLOCK_PROFILE: "block_profile",
};
// https://www.thirukalyanam.amrithaa.net/backend/api/report_profile?profile_id=151&reason=test

34
src/components/matches/MatchesProfilesTab.jsx
View File

@ -35,7 +35,7 @@ export default function MatchesInterface() {
const selectedTab = filterType || "all_matches";
const isPaidMember = filters.isPaidMember;
const { ref, inView } = useInView({
const { ref, inView } = useInView({
threshold: 0,
rootMargin: "300px"
});
@ -48,18 +48,18 @@ const { ref, inView } = useInView({
isFetchingNextPage,
} = useProfiles(filters);
const profiles =
profilesData?.pages.flatMap((page) => page?.data|| []) || [];
profilesData?.pages.flatMap((page) => page?.data || []) || [];
// const { ref, inView } = useInView();
// useEffect(() => {
// if (inView && hasNextPage && !isFetchingNextPage) {
// fetchNextPage();
// }
// }, [inView, hasNextPage, isFetchingNextPage]);
// useEffect(() => {
// if (inView && hasNextPage && !isFetchingNextPage) {
// fetchNextPage();
// }
// }, [inView, hasNextPage, isFetchingNextPage]);
useEffect(() => {
useEffect(() => {
if (inView && hasNextPage && !isFetchingNextPage) {
setShowSkeleton(true); // show skeleton
@ -71,7 +71,7 @@ useEffect(() => {
return () => clearTimeout(timer);
}
}, [inView, hasNextPage, isFetchingNextPage, fetchNextPage]);
}, [inView, hasNextPage, isFetchingNextPage, fetchNextPage]);
@ -87,7 +87,7 @@ useEffect(() => {
inView,
hasNextPage,
isFetchingNextPage,
});
});
const tabs = [
{
id: "all_matches",
@ -201,16 +201,14 @@ useEffect(() => {
dispatch(updateFilter({ filter_type: finalFilterType }));
}}
className={`p-4 rounded-lg mb-3 cursor-pointer transition-all ${
selectedTab === tab.id
className={`p-4 rounded-lg mb-3 cursor-pointer transition-all ${selectedTab === tab.id
? "bg-green-50 border-l-4 border-green-600"
: "hover:bg-gray-50"
}`}
>
<div className="flex items-start gap-3">
<div
className={`mt-1 ${
selectedTab === tab.id
className={`mt-1 ${selectedTab === tab.id
? "text-green-600"
: "text-gray-600"
}`}
@ -220,8 +218,7 @@ useEffect(() => {
<div className="flex-1">
<div className="flex items-center justify-between">
<h3
className={`font-semibold text-base ${
selectedTab === tab.id
className={`font-semibold text-base ${selectedTab === tab.id
? "text-green-900"
: "text-gray-900"
}`}
@ -229,8 +226,7 @@ useEffect(() => {
{tab.title}
</h3>
<svg
className={`w-5 h-5 ${
selectedTab === tab.id
className={`w-5 h-5 ${selectedTab === tab.id
? "text-green-600"
: "text-gray-400"
}`}
@ -257,7 +253,7 @@ useEffect(() => {
})}
</div>
</div>
</div>
</div>
{/* Right Content Area - Scrollable */}
<div className=" px-2 py-8 w-full md:w-9/12 ">
<div className="w-[100%] max-w-[1200px] mx-auto">

6
src/components/profiledashboard/DailyRecommendedCard.jsx
View File

@ -180,11 +180,13 @@ const DailyRecommendedCard = ({ profiles: initialProfiles = [] }) => {
e.stopPropagation();
try {
const res = await shortlistProfile(profile.id);
if (res.status === "success") {
console.log(res);
if (res.status === "success" || res.message) {
setIsShortlisted(!isShortlisted);
toast.success(res.data.message || "Updated shortlist status");
toast.success(res.message || "Updated shortlist status");
}
} catch (error) {
console.log(error);
toast.error("Failed to update shortlist");
}
};

76
src/components/profiledetail/MatrimonyProfile.jsx
View File

@ -28,7 +28,9 @@ import "swiper/css/pagination";
import "swiper/css/thumbs";
import { useNavigate } from "react-router-dom";
import { sendInterest, shortlistProfile } from "../../services/shortlistapi";
import { reportProfile, blockProfile } from "../../services/profileActionApi";
import { toast } from "react-hot-toast";
import ReportModel from "../../feature/ReportModel";
import UpgradeModal from "../common/UpgradeModal";
import axiosInstance, { apiForFiles } from "../../api/axiosInstance";
import { API_ENDPOINTS } from "../../api/apiEndpoints";
@ -69,6 +71,8 @@ const MatrimonyProfile = ({ data, onRefresh }) => {
const [isCreatingChat, setIsCreatingChat] = useState(false);
const [modalTitle, setModalTitle] = useState("");
const [modalMessage, setModalMessage] = useState("");
const [reportModalOpen, setReportModalOpen] = useState(false);
const [reportActionType, setReportActionType] = useState("report");
const queryClient = useQueryClient();
@ -308,10 +312,45 @@ const MatrimonyProfile = ({ data, onRefresh }) => {
const handleShortlist = async () => {
try {
const res = await shortlistProfile(profile.id);
toast.success(res.message || "Profile shortlisted successfully");
toast.success(res.message || "Updated shortlist status");
if (onRefresh) onRefresh(false);
queryClient.invalidateQueries();
} catch (error) {
toast.error(error.message || "Failed to shortlist");
toast.error(error.message || "Failed to update shortlist");
}
};
const openReportModal = (type) => {
setReportActionType(type);
setReportModalOpen(true);
setShowMenu(false);
};
const handleReportAction = async (reason) => {
try {
if (reportActionType === 'report') {
const res = await reportProfile(profile.id, reason);
toast.success(res?.message || "Profile Reported successfully");
} else {
const res = await blockProfile(profile.id, reason);
toast.success(res?.message || "Profile Blocked successfully");
}
if (onRefresh) onRefresh(false);
queryClient.invalidateQueries();
} catch (error) {
toast.error(error?.message || `Failed to ${reportActionType === 'report' ? 'Report' : 'Block'}`);
}
};
const handleUnblock = async () => {
try {
// Calling the same blockProfile API without a model/reason to trigger unblocking
const res = await blockProfile(profile.id, "");
toast.success(res?.message || "Profile Unblocked successfully");
if (onRefresh) onRefresh(false);
queryClient.invalidateQueries();
} catch (error) {
toast.error(error?.message || "Failed to Unblock");
}
};
@ -339,6 +378,12 @@ const MatrimonyProfile = ({ data, onRefresh }) => {
return (
<div className="bg-gray-50 min-h-screen py-8 px-4 sm:px-6 lg:px-8">
<ReportModel
open={reportModalOpen}
onClose={() => setReportModalOpen(false)}
onSubmit={handleReportAction}
actionType={reportActionType}
/>
<div
className="max-w-[1200px] mx-auto
bg-white rounded-3xl shadow-xl shadow-gray-200/50 border border-gray-100 overflow-hidden"
@ -424,9 +469,10 @@ const MatrimonyProfile = ({ data, onRefresh }) => {
<div className="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-xl border z-10">
<button
onClick={() => { setShowMenu(false); handleShortlist(); }}
className="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center gap-3"
className={`w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center gap-3 ${profile.is_shortlisted === 1 ? 'text-green-700' : ''}`}
>
<Bookmark className="w-4 h-4" /> Shortlist
<Bookmark className={`w-4 h-4 ${profile.is_shortlisted === 1 ? 'fill-current text-green-700' : ''}`} />
{profile.is_shortlisted === 1 ? "Shortlisted" : "Shortlist"}
</button>
<button
onClick={() => { setShowMenu(false); navigate("/chat"); }}
@ -434,10 +480,26 @@ const MatrimonyProfile = ({ data, onRefresh }) => {
>
<MessageCircle className="w-4 h-4" /> Send Message
</button>
<button className="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center gap-3">
<Ban className="w-4 h-4" /> Block Profile
<button
onClick={() => {
setShowMenu(false);
if (profile.is_blocked) {
handleUnblock();
} else {
openReportModal('block');
}
}}
className="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center gap-3"
>
<Ban className="w-4 h-4" /> {profile.is_blocked ? "Unblock Profile" : "Block Profile"}
</button>
<button className="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center gap-3 text-red-600">
<button
onClick={() => {
setShowMenu(false);
openReportModal('report');
}}
className="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center gap-3 text-red-600"
>
<Flag className="w-4 h-4" /> Report Profile
</button>
</div>

72
src/feature/ReportModel.jsx Normal file
View File

@ -0,0 +1,72 @@
import React, { useState, useEffect } from "react";
import { IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Box, Button, TextField } from "@mui/material";
import { X } from "lucide-react";
const ReportModel = ({ open, onClose, onSubmit, actionType }) => {
const [reason, setReason] = useState("");
useEffect(() => {
if (open) {
setReason("");
}
}, [open]);
const handleSubmit = () => {
onSubmit(reason);
onClose();
};
return (
<Dialog
open={open}
onClose={onClose}
fullWidth
maxWidth="sm"
>
<DialogTitle sx={{ background: "#f5fbff" }}>
<Box display="flex" alignItems="center" justifyContent="space-between">
<span className="capitalize" style={{ textTransform: 'capitalize' }}>
{actionType === 'block' ? 'Block Profile' : 'Report Profile'}
</span>
<IconButton onClick={onClose} aria-label="close">
<X size={20} />
</IconButton>
</Box>
</DialogTitle>
<DialogContent dividers>
<Box mt={1}>
<TextField
fullWidth
multiline
rows={4}
variant="outlined"
placeholder={`Enter your reason for ${actionType === 'block' ? 'blocking' : 'reporting'} this profile...`}
value={reason}
onChange={(e) => setReason(e.target.value)}
/>
</Box>
</DialogContent>
<DialogActions sx={{ p: 2, background: "#f5fbff" }}>
<Button onClick={onClose} color="inherit">
Cancel
</Button>
<Button
onClick={handleSubmit}
variant="contained"
disabled={!reason.trim()}
sx={{
bgcolor: actionType === 'block' ? '#d32f2f' : '#034E08',
'&:hover': {
bgcolor: actionType === 'block' ? '#b71c1c' : '#023806',
}
}}
>
{actionType === 'block' ? 'Block' : 'Submit Report'}
</Button>
</DialogActions>
</Dialog>
);
};
export default ReportModel;

17
src/services/profileActionApi.js
View File

@ -23,7 +23,7 @@ export const getReportedProfiles = async () => {
export const unblockProfile = async (profileId) => {
try {
const response = await axiosInstance.post(`unblock_profile?profile_id=${profileId}`);
const response = await axiosInstance.post(`${API_ENDPOINTS.BLOCK_PROFILE}?profile_id=${profileId}`);
return response.data;
} catch (error) {
console.error("Error unblocking profile:", error);
@ -61,3 +61,18 @@ export const updateInterestStatus = async (id, status) => {
}
};
export const reportProfile = async (profileId, reason) => {
const response = await axiosInstance.post(`${API_ENDPOINTS.REPORT_PROFILE}?profile_id=${profileId}&reason=${reason}`);
if (response.data?.status === "error") {
throw new Error(response.data.message || "Failed to report");
}
return response.data;
};
export const blockProfile = async (profileId, reason) => {
const response = await axiosInstance.post(`${API_ENDPOINTS.BLOCK_PROFILE}?profile_id=${profileId}&reason=${reason}`);
if (response.data?.status === "error") {
throw new Error(response.data.message || "Failed to block");
}
return response.data;
};