filter master integrate
This commit is contained in:
parent
5392a4211e
commit
9427677a72
88
package-lock.json
generated
88
package-lock.json
generated
@ -31,6 +31,9 @@
|
||||
"react-lazy-load-image-component": "^1.6.3",
|
||||
"react-redux": "^9.2.0",
|
||||
"react-router-dom": "^7.9.6",
|
||||
"react-select": "^5.10.2",
|
||||
"react-window": "^2.2.7",
|
||||
"redux-persist": "^6.0.0",
|
||||
"swiper": "^12.0.3",
|
||||
"tailwindcss": "^4.1.17"
|
||||
},
|
||||
@ -1719,6 +1722,31 @@
|
||||
"integrity": "sha512-+uGNN7rkfn41HLO0vekTFhTxk61eKa8mTpRGLO0QSqlQdKvIoGAvLp3ppdVIWbTGYJWM6Kp0iN+PjMIOcnVqTw==",
|
||||
"license": "Apache-2.0"
|
||||
},
|
||||
"node_modules/@floating-ui/core": {
|
||||
"version": "1.7.5",
|
||||
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.5.tgz",
|
||||
"integrity": "sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@floating-ui/utils": "^0.2.11"
|
||||
}
|
||||
},
|
||||
"node_modules/@floating-ui/dom": {
|
||||
"version": "1.7.6",
|
||||
"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.6.tgz",
|
||||
"integrity": "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@floating-ui/core": "^1.7.5",
|
||||
"@floating-ui/utils": "^0.2.11"
|
||||
}
|
||||
},
|
||||
"node_modules/@floating-ui/utils": {
|
||||
"version": "0.2.11",
|
||||
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.11.tgz",
|
||||
"integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@grpc/grpc-js": {
|
||||
"version": "1.9.15",
|
||||
"resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.9.15.tgz",
|
||||
@ -7139,6 +7167,12 @@
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/memoize-one": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
|
||||
"integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/merge-stream": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
|
||||
@ -8053,6 +8087,27 @@
|
||||
"react-dom": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/react-select": {
|
||||
"version": "5.10.2",
|
||||
"resolved": "https://registry.npmjs.org/react-select/-/react-select-5.10.2.tgz",
|
||||
"integrity": "sha512-Z33nHdEFWq9tfnfVXaiM12rbJmk+QjFEztWLtmXqQhz6Al4UZZ9xc0wiatmGtUOCCnHN0WizL3tCMYRENX4rVQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.12.0",
|
||||
"@emotion/cache": "^11.4.0",
|
||||
"@emotion/react": "^11.8.1",
|
||||
"@floating-ui/dom": "^1.0.1",
|
||||
"@types/react-transition-group": "^4.4.0",
|
||||
"memoize-one": "^6.0.0",
|
||||
"prop-types": "^15.6.0",
|
||||
"react-transition-group": "^4.3.0",
|
||||
"use-isomorphic-layout-effect": "^1.2.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-smooth": {
|
||||
"version": "4.0.4",
|
||||
"resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.4.tgz",
|
||||
@ -8116,6 +8171,16 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-window": {
|
||||
"version": "2.2.7",
|
||||
"resolved": "https://registry.npmjs.org/react-window/-/react-window-2.2.7.tgz",
|
||||
"integrity": "sha512-SH5nvfUQwGHYyriDUAOt7wfPsfG9Qxd6OdzQxl5oQ4dsSsUicqQvjV7dR+NqZ4coY0fUn3w1jnC5PwzIUWEg5w==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"react": "^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/read-cache": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
|
||||
@ -8205,6 +8270,15 @@
|
||||
"integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/redux-persist": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/redux-persist/-/redux-persist-6.0.0.tgz",
|
||||
"integrity": "sha512-71LLMbUq2r02ng2We9S215LtPu3fY0KgaGE0k8WRgl6RkqxtGfl7HUozz1Dftwsb0D/5mZ8dwAaPbtnzfvbEwQ==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"redux": ">4.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/redux-thunk": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
|
||||
@ -9069,6 +9143,20 @@
|
||||
"punycode": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/use-isomorphic-layout-effect": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.2.1.tgz",
|
||||
"integrity": "sha512-tpZZ+EX0gaghDAiFR37hj5MgY6ZN55kLiPkJsKxBMZ6GZdOSPJXiOzPM984oPYZ5AnehYx5WQp1+ME8I/P/pRA==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/use-sync-external-store": {
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
|
||||
|
||||
@ -33,6 +33,9 @@
|
||||
"react-lazy-load-image-component": "^1.6.3",
|
||||
"react-redux": "^9.2.0",
|
||||
"react-router-dom": "^7.9.6",
|
||||
"react-select": "^5.10.2",
|
||||
"react-window": "^2.2.7",
|
||||
"redux-persist": "^6.0.0",
|
||||
"swiper": "^12.0.3",
|
||||
"tailwindcss": "^4.1.17"
|
||||
},
|
||||
|
||||
@ -53,5 +53,9 @@ BE_SAFE_ONLINE:"get_be_safe_online",
|
||||
NOTIFICATION_LIST:"notification/lists",
|
||||
NOTIFICATION_COUNT:"notification/un_read_count",
|
||||
|
||||
// filter with profiles list api's
|
||||
PROFILES_FILTER_LIST:"profiles/lists",
|
||||
PROFILES_FILTER_MASTER:"profiles/filter/masters",
|
||||
|
||||
|
||||
};
|
||||
|
||||
@ -63,3 +63,17 @@ export const getPartnerPreferenceMasters = async () => {
|
||||
);
|
||||
return res.data;
|
||||
};
|
||||
|
||||
|
||||
// profile filter masters
|
||||
export const getProfilesFilterList = async (filters) => {
|
||||
const res = await axiosInstance.get(API_ENDPOINTS.PROFILES_FILTER_LIST, {
|
||||
params: filters,
|
||||
});
|
||||
return res.data;
|
||||
};
|
||||
|
||||
export const getProfilesFilterMasters = async () => {
|
||||
const res = await axiosInstance.get(API_ENDPOINTS.PROFILES_FILTER_MASTER);
|
||||
return res.data;
|
||||
};
|
||||
97
src/components/common/VirtualizedSelect.jsx
Normal file
97
src/components/common/VirtualizedSelect.jsx
Normal file
@ -0,0 +1,97 @@
|
||||
import React from "react";
|
||||
import Autocomplete from "@mui/material/Autocomplete";
|
||||
import TextField from "@mui/material/TextField";
|
||||
import ReactWindow from "react-window";
|
||||
|
||||
const FixedSizeList = ReactWindow?.FixedSizeList || ReactWindow?.default?.FixedSizeList;
|
||||
|
||||
const LISTBOX_PADDING = 8; // px
|
||||
|
||||
function renderRow(props) {
|
||||
const { data, index, style } = props;
|
||||
const dataSet = data[index];
|
||||
const inlineStyle = {
|
||||
...style,
|
||||
top: style.top + LISTBOX_PADDING,
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={inlineStyle}>
|
||||
{dataSet}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const OuterElementContext = React.createContext({});
|
||||
|
||||
const OuterElementType = React.forwardRef((props, ref) => {
|
||||
const outerProps = React.useContext(OuterElementContext);
|
||||
return <div ref={ref} {...props} {...outerProps} />;
|
||||
});
|
||||
|
||||
const ListboxComponent = React.forwardRef(function ListboxComponent(props, ref) {
|
||||
const { children, ...other } = props;
|
||||
|
||||
if (!FixedSizeList) {
|
||||
return <ul ref={ref} {...other}>{children}</ul>;
|
||||
}
|
||||
|
||||
const itemData = [];
|
||||
|
||||
React.Children.forEach(children, (item) => {
|
||||
itemData.push(item);
|
||||
itemData.push(...(item.children || []));
|
||||
});
|
||||
|
||||
const itemCount = itemData.length;
|
||||
const itemSize = 48;
|
||||
|
||||
const getHeight = () => {
|
||||
if (itemCount > 8) {
|
||||
return 8 * itemSize;
|
||||
}
|
||||
return itemCount * itemSize;
|
||||
};
|
||||
|
||||
return (
|
||||
<div ref={ref}>
|
||||
<OuterElementContext.Provider value={other}>
|
||||
<FixedSizeList
|
||||
itemData={itemData}
|
||||
height={getHeight() + 2 * LISTBOX_PADDING}
|
||||
width="100%"
|
||||
outerElementType={OuterElementType}
|
||||
innerElementType="ul"
|
||||
itemSize={itemSize}
|
||||
overscanCount={5}
|
||||
itemCount={itemCount}
|
||||
>
|
||||
{renderRow}
|
||||
</FixedSizeList>
|
||||
</OuterElementContext.Provider>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
const VirtualizedSelect = ({ options, value, onChange, label, placeholder, isMulti, ...props }) => {
|
||||
return (
|
||||
<Autocomplete
|
||||
multiple={isMulti}
|
||||
options={options}
|
||||
value={value}
|
||||
onChange={(event, newValue) => {
|
||||
onChange(newValue);
|
||||
}}
|
||||
disableListWrap
|
||||
ListboxComponent={ListboxComponent}
|
||||
renderInput={(params) => (
|
||||
<TextField {...params} label={label} placeholder={placeholder} variant="outlined" />
|
||||
)}
|
||||
isOptionEqualToValue={(option, value) => option.value === value.value}
|
||||
getOptionLabel={(option) => option.label || ""}
|
||||
{...props}>
|
||||
</Autocomplete>
|
||||
)
|
||||
}
|
||||
|
||||
export default VirtualizedSelect
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { useState } from "react";
|
||||
import { Crown, Bookmark, CurrencyIcon, Currency, Wallet, Receipt, Sparkles, MoonStar, IdCard, RockingChair, LocateFixed, School, WorkflowIcon } from "lucide-react";
|
||||
import { Crown, Bookmark, CurrencyIcon, Currency, Wallet, Receipt, Sparkles, MoonStar, IdCard, RockingChair, LocateFixed, School, WorkflowIcon, Lock } from "lucide-react";
|
||||
import CakeIcon from "@mui/icons-material/Cake";
|
||||
import GroupsIcon from "@mui/icons-material/Groups";
|
||||
import SchoolIcon from "@mui/icons-material/School";
|
||||
@ -26,6 +26,9 @@ import { useNavigate } from "react-router-dom";
|
||||
import { Button, Fab } from "@mui/material";
|
||||
import MessageIcon from "@mui/icons-material/Message";
|
||||
import PhoneIcon from "@mui/icons-material/Phone";
|
||||
import toast from "react-hot-toast";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
import { updateFilter } from "../../redux/filterSlice";
|
||||
// Profile Card Component
|
||||
function ProfileCard({ profile }) {
|
||||
const [isLiked, setIsLiked] = useState(false);
|
||||
@ -216,67 +219,70 @@ function ProfileCard({ profile }) {
|
||||
// Main Component
|
||||
export default function MatchesInterface() {
|
||||
const navigate = useNavigate();
|
||||
const [selectedTab, setSelectedTab] = useState("your-matches");
|
||||
const dispatch = useDispatch();
|
||||
const filterType = useSelector((state) => state.filters.filter_type);
|
||||
const selectedTab = filterType || "all_matches";
|
||||
const isPaidMember = useSelector((state) => state.filters.isPaidMember);
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
id: "your-matches",
|
||||
id: "all_matches",
|
||||
icon: <PersonIcon className="w-6 h-6" />,
|
||||
title: "Your Matches",
|
||||
description: "View all the profiles that match your preferences",
|
||||
category: "All Matches",
|
||||
},
|
||||
{
|
||||
id: "shortlisted-by-you",
|
||||
id: "shorlisted_by_you",
|
||||
icon: <StarIcon className="w-6 h-6" />,
|
||||
title: "Shortlisted by you",
|
||||
description: "Matches you have shortlisted",
|
||||
category: "Based on activity",
|
||||
},
|
||||
{
|
||||
id: "viewed-you",
|
||||
id: "viewed_you",
|
||||
icon: <VisibilityIcon className="w-6 h-6" />,
|
||||
title: "Viewed you",
|
||||
description: "Matches who have viewed your profile",
|
||||
category: "Based on activity",
|
||||
},
|
||||
{
|
||||
id: "shortlisted-you",
|
||||
id: "shorlisted_you",
|
||||
icon: <PersonAddIcon className="w-6 h-6" />,
|
||||
title: "Shortlisted you",
|
||||
description: "Matches who have shortlisted your profile",
|
||||
category: "Based on activity",
|
||||
},
|
||||
{
|
||||
id: "viewed-by-you",
|
||||
id: "viewed_by_you",
|
||||
icon: <VisibilityIcon className="w-6 h-6" />,
|
||||
title: "Viewed by you",
|
||||
description: "Matches you have viewed",
|
||||
category: "Based on activity",
|
||||
},
|
||||
{
|
||||
id: "newly-joined",
|
||||
id: "newly_joined",
|
||||
icon: <RockingChair className="w-6 h-6" />,
|
||||
title: "Newly Joined",
|
||||
description: "Matches who Joined within the last 30 days",
|
||||
category: "Based on activity",
|
||||
},
|
||||
{
|
||||
id: "location",
|
||||
id: "location_matches",
|
||||
icon: <LocateFixed className="w-6 h-6" />,
|
||||
title: "Location matches",
|
||||
description: "Matches near your location",
|
||||
category: "Based on activity",
|
||||
},
|
||||
{
|
||||
id: "education",
|
||||
id: "education_matches",
|
||||
icon: <School className="w-6 h-6" />,
|
||||
title: "Education matches",
|
||||
description: "Matches near your education match",
|
||||
category: "Based on activity",
|
||||
},
|
||||
{
|
||||
id: "job",
|
||||
id: "job_matches",
|
||||
icon: <WorkflowIcon className="w-6 h-6" />,
|
||||
title: "Job matches",
|
||||
description: "Matches near your job",
|
||||
@ -406,7 +412,9 @@ export default function MatchesInterface() {
|
||||
</h2>
|
||||
)}
|
||||
<div
|
||||
onClick={() => setSelectedTab(tab.id)}
|
||||
onClick={() => {
|
||||
dispatch(updateFilter({ filter_type: 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"
|
||||
@ -472,12 +480,23 @@ export default function MatchesInterface() {
|
||||
{tabs.find((t) => t.id === selectedTab)?.title}
|
||||
</h1>
|
||||
<div className="flex gap-2 items-center">
|
||||
<div className="relative cursor-pointer" onClick={() => {
|
||||
if (isPaidMember) {
|
||||
navigate("/horoscoper-generate");
|
||||
} else {
|
||||
toast.error("Star Matching is locked for free members");
|
||||
}
|
||||
}}>
|
||||
<img
|
||||
src={horoscope}
|
||||
onClick={() => {
|
||||
navigate("/horoscoper-generate");
|
||||
}}
|
||||
className={!isPaidMember ? "opacity-50 blur-[1px]" : ""}
|
||||
/>
|
||||
{!isPaidMember && (
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<Lock className="w-4 h-4 text-black" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<FilterModal />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -107,14 +107,14 @@ const AdvancedDropzone = ({ value, onChange }) => {
|
||||
<FileMosaic
|
||||
{...file}
|
||||
onDelete={onDelete}
|
||||
// onSee={handleSee}
|
||||
// onWatch={handleWatch}
|
||||
onSee={handleSee}
|
||||
onWatch={handleWatch}
|
||||
onAbort={handleAbort}
|
||||
onCancel={handleCancel}
|
||||
resultOnTooltip
|
||||
alwaysActive
|
||||
preview
|
||||
// info={false}
|
||||
info={false}
|
||||
/>
|
||||
{hoveredId === file.id && (
|
||||
<div
|
||||
|
||||
@ -1,15 +1,12 @@
|
||||
import React, { useState } from "react";
|
||||
import React, { useState, useMemo } from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import {
|
||||
setAge,
|
||||
setHeight,
|
||||
setMaritalStatus,
|
||||
setMotherTongue,
|
||||
setReligion,
|
||||
setMatchesWithHoroscope,
|
||||
setCaste,
|
||||
setSubCaste,
|
||||
updateFilter,
|
||||
resetFilters,
|
||||
} from "../redux/filterSlice";
|
||||
import {
|
||||
Slider,
|
||||
@ -26,8 +23,12 @@ import {
|
||||
Accordion,
|
||||
AccordionSummary,
|
||||
AccordionDetails,
|
||||
CircularProgress,
|
||||
} from "@mui/material";
|
||||
import { ChevronDown } from "lucide-react";
|
||||
import { ChevronDown, Lock, Crown, RotateCcw, Check } from "lucide-react";
|
||||
import { useProfilesFilterMasters } from "../hooks/useProfiles";
|
||||
import { useCityMasters } from "../hooks/useDependentMasters";
|
||||
import toast from "react-hot-toast";
|
||||
|
||||
const FilterForm = () => {
|
||||
const dispatch = useDispatch();
|
||||
@ -40,34 +41,61 @@ const FilterForm = () => {
|
||||
location: false,
|
||||
lifestyle: false,
|
||||
family: false,
|
||||
paidBenefit: false,
|
||||
});
|
||||
|
||||
const { data: filterMasters, isLoading, isError } = useProfilesFilterMasters();
|
||||
|
||||
const { data: cityData } = useCityMasters(
|
||||
filters.state && filters.state.length > 0 ? filters.state : null
|
||||
);
|
||||
|
||||
const cityOptions = useMemo(() => {
|
||||
const raw = cityData;
|
||||
if (!raw) return [];
|
||||
if (Array.isArray(raw)) return raw;
|
||||
return raw.subCaste || raw.district || raw.data || [];
|
||||
}, [cityData]);
|
||||
|
||||
const handleAccordionChange = (section) => (event, isExpanded) => {
|
||||
setExpandedSections((prev) => ({ ...prev, [section]: isExpanded }));
|
||||
};
|
||||
|
||||
const casteOptions = ["Agamudayar", "Pillai", "Vellalar"];
|
||||
const motherTongueOptions = [
|
||||
"Tamil",
|
||||
"Telugu",
|
||||
"Malayalam",
|
||||
"Kannada",
|
||||
"Hindi",
|
||||
];
|
||||
|
||||
const handleSubmit = () => {
|
||||
console.log("Filter Values:", filters);
|
||||
};
|
||||
|
||||
const handleClear = () => {
|
||||
dispatch(resetFilters());
|
||||
toast.success("Filters cleared");
|
||||
};
|
||||
|
||||
const handleSelectionChange = (field, value) => {
|
||||
console.log(`${field} selected:`, value);
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex justify-center items-center min-h-[300px]">
|
||||
<CircularProgress />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (isError) {
|
||||
return (
|
||||
<div className="flex justify-center items-center min-h-[300px]">
|
||||
<Typography color="error">Failed to load filter options</Typography>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-6xl mx-auto p-4 px-0 md:p-6 ">
|
||||
<div className="bg-white rounded-lg shadow-sm">
|
||||
{/* Header */}
|
||||
<div className="border-b border-pink-200 p-4 bg-[#fff5ed]">
|
||||
<div className="border-b border-pink-200 p-4 bg-[#f2f2f2]">
|
||||
<Typography variant="h5" className="font-semibold text-center">
|
||||
Partner Filter preference
|
||||
</Typography>
|
||||
@ -98,7 +126,7 @@ const FilterForm = () => {
|
||||
<Typography gutterBottom sx={{marginBottom:"30px"}}>Age</Typography>
|
||||
<div className="px-2">
|
||||
<Slider
|
||||
value={filters.age}
|
||||
value={[filters.from_age, filters.to_age]}
|
||||
onChange={(e, newValue) => {
|
||||
dispatch(setAge(newValue));
|
||||
handleSelectionChange("Age", newValue);
|
||||
@ -119,7 +147,7 @@ const FilterForm = () => {
|
||||
<Typography gutterBottom sx={{marginBottom:"30px"}}>Height</Typography>
|
||||
<div className="px-2">
|
||||
<Slider
|
||||
value={filters.height}
|
||||
value={[filters.from_height, filters.to_height]}
|
||||
onChange={(e, newValue) => {
|
||||
dispatch(setHeight(newValue));
|
||||
handleSelectionChange("Height", newValue);
|
||||
@ -141,46 +169,40 @@ const FilterForm = () => {
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Marital Status</InputLabel>
|
||||
<Select
|
||||
value={filters.maritalStatus}
|
||||
multiple
|
||||
value={filters.marital_status || []}
|
||||
label="Marital Status"
|
||||
onChange={(e) => {
|
||||
dispatch(setMaritalStatus(e.target.value));
|
||||
dispatch(updateFilter({ marital_status: e.target.value }));
|
||||
handleSelectionChange("Marital Status", e.target.value);
|
||||
}}
|
||||
>
|
||||
<MenuItem value="All Profile">All Profile</MenuItem>
|
||||
<MenuItem value="Never Married">Never Married</MenuItem>
|
||||
<MenuItem value="Divorced">Divorced</MenuItem>
|
||||
<MenuItem value="Widowed">Widowed</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
{/* Mother Tongue */}
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Mother Tongue</InputLabel>
|
||||
<Select
|
||||
multiple
|
||||
value={filters.motherTongue}
|
||||
label="Mother Tongue"
|
||||
onChange={(e) => {
|
||||
dispatch(setMotherTongue(e.target.value));
|
||||
handleSelectionChange("Mother Tongue", e.target.value);
|
||||
}}
|
||||
renderValue={(selected) => (
|
||||
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
|
||||
{selected.map((value) => (
|
||||
<Chip key={value} label={value} size="small" />
|
||||
))}
|
||||
{selected.map((value) => {
|
||||
const label = filterMasters?.marital_statuses?.find((s) => s.id === value)?.marital_status_name || value;
|
||||
return (
|
||||
<Chip
|
||||
key={value}
|
||||
label={label}
|
||||
size="small"
|
||||
onDelete={() => dispatch(updateFilter({ marital_status: filters.marital_status.filter((v) => v !== value) }))}
|
||||
onMouseDown={(e) => e.stopPropagation()}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
)}
|
||||
>
|
||||
{motherTongueOptions.map((lang) => (
|
||||
<MenuItem key={lang} value={lang}>
|
||||
{lang}
|
||||
{filterMasters?.marital_statuses?.map((status) => (
|
||||
<MenuItem key={status.id} value={status.id}>
|
||||
{status.marital_status_name}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
@ -207,61 +229,69 @@ const FilterForm = () => {
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Religion</InputLabel>
|
||||
<Select
|
||||
value={filters.religion}
|
||||
multiple
|
||||
value={filters.religion || []}
|
||||
label="Religion"
|
||||
onChange={(e) => {
|
||||
dispatch(setReligion(e.target.value));
|
||||
dispatch(updateFilter({ religion: e.target.value }));
|
||||
handleSelectionChange("Religion", e.target.value);
|
||||
}}
|
||||
renderValue={(selected) => (
|
||||
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
|
||||
{selected.map((value) => {
|
||||
const label = filterMasters?.religions?.find((r) => r.id === value)?.religion_name || value;
|
||||
return (
|
||||
<Chip
|
||||
key={value}
|
||||
label={label}
|
||||
size="small"
|
||||
onDelete={() => dispatch(updateFilter({ religion: filters.religion.filter((v) => v !== value) }))}
|
||||
onMouseDown={(e) => e.stopPropagation()}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
)}
|
||||
>
|
||||
<MenuItem value="Hindu">Hindu</MenuItem>
|
||||
<MenuItem value="Muslim">Muslim</MenuItem>
|
||||
<MenuItem value="Christian">Christian</MenuItem>
|
||||
<MenuItem value="Sikh">Sikh</MenuItem>
|
||||
{filterMasters?.religions?.map((rel) => (
|
||||
<MenuItem key={rel.id} value={rel.id}>
|
||||
{rel.religion_name}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
{/* Matches with Horoscope */}
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
checked={filters.matchesWithHoroscope}
|
||||
onChange={(e) => {
|
||||
dispatch(setMatchesWithHoroscope(e.target.checked));
|
||||
handleSelectionChange(
|
||||
"Matches with Horoscope",
|
||||
e.target.checked
|
||||
);
|
||||
}}
|
||||
/>
|
||||
}
|
||||
label="Matches with horoscope"
|
||||
/>
|
||||
|
||||
{/* Caste */}
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Caste (Multi Select)</InputLabel>
|
||||
<InputLabel>Caste</InputLabel>
|
||||
<Select
|
||||
multiple
|
||||
value={filters.caste}
|
||||
label="Caste (Multi Select)"
|
||||
label="Caste"
|
||||
onChange={(e) => {
|
||||
dispatch(setCaste(e.target.value));
|
||||
handleSelectionChange("Caste", e.target.value);
|
||||
}}
|
||||
renderValue={(selected) => (
|
||||
<Box
|
||||
sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}
|
||||
>
|
||||
{selected.map((value) => (
|
||||
<Chip key={value} label={value} size="small" />
|
||||
))}
|
||||
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
|
||||
{selected.map((value) => {
|
||||
const label = filterMasters?.castes?.find((c) => c.id === value)?.caste_name || value;
|
||||
return (
|
||||
<Chip
|
||||
key={value}
|
||||
label={label}
|
||||
size="small"
|
||||
onDelete={() => dispatch(setCaste(filters.caste.filter((v) => v !== value)))}
|
||||
onMouseDown={(e) => e.stopPropagation()}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
)}
|
||||
>
|
||||
{["Agamudayar", "Pillai", "Vellalar"].map((caste) => (
|
||||
<MenuItem key={caste} value={caste}>
|
||||
{caste}
|
||||
{filterMasters?.castes?.map((caste) => (
|
||||
<MenuItem key={caste.id} value={caste.id}>
|
||||
{caste.caste_name}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
@ -269,21 +299,19 @@ const FilterForm = () => {
|
||||
|
||||
{/* Sub-Caste */}
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Sub-Caste (Multi Select)</InputLabel>
|
||||
<InputLabel>Sub-Caste</InputLabel>
|
||||
<Select
|
||||
multiple
|
||||
value={filters.subCaste}
|
||||
label="Sub-Caste (Multi Select)"
|
||||
value={filters.sub_caste}
|
||||
label="Sub-Caste"
|
||||
onChange={(e) => {
|
||||
dispatch(setSubCaste(e.target.value));
|
||||
handleSelectionChange("Sub-Caste", e.target.value);
|
||||
}}
|
||||
renderValue={(selected) => (
|
||||
<Box
|
||||
sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}
|
||||
>
|
||||
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
|
||||
{selected.map((value) => (
|
||||
<Chip key={value} label={value} size="small" />
|
||||
<Chip key={value} label={value} size="small" onDelete={() => dispatch(setSubCaste(filters.sub_caste.filter((v) => v !== value)))} onMouseDown={(e) => e.stopPropagation()} />
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
@ -296,39 +324,7 @@ const FilterForm = () => {
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
{/* Star */}
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Star</InputLabel>
|
||||
<Select
|
||||
value={filters.star}
|
||||
label="Star"
|
||||
onChange={(e) => {
|
||||
dispatch(updateFilter({ star: e.target.value }));
|
||||
handleSelectionChange("Star", e.target.value);
|
||||
}}
|
||||
>
|
||||
<MenuItem value="Any">Any</MenuItem>
|
||||
<MenuItem value="Ashwini">Ashwini</MenuItem>
|
||||
<MenuItem value="Bharani">Bharani</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
{/* Dasham */}
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Dasham</InputLabel>
|
||||
<Select
|
||||
value={filters.dasham}
|
||||
label="Dasham"
|
||||
onChange={(e) => {
|
||||
dispatch(updateFilter({ dasham: e.target.value }));
|
||||
handleSelectionChange("Dasham", e.target.value);
|
||||
}}
|
||||
>
|
||||
<MenuItem value="Doesn't matter">Doesn't matter</MenuItem>
|
||||
<MenuItem value="Yes">Yes</MenuItem>
|
||||
<MenuItem value="No">No</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</div>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
@ -356,66 +352,108 @@ const FilterForm = () => {
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Occupation</InputLabel>
|
||||
<Select
|
||||
value={filters.occupation}
|
||||
multiple
|
||||
value={filters.occupation || []}
|
||||
label="Occupation"
|
||||
onChange={(e) => {
|
||||
dispatch(updateFilter({ occupation: e.target.value }));
|
||||
handleSelectionChange("Occupation", e.target.value);
|
||||
}}
|
||||
renderValue={(selected) => (
|
||||
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
|
||||
{selected.map((value) => {
|
||||
const label = filterMasters?.occupations?.find((o) => o.id === value)?.occupation_name || value;
|
||||
return <Chip key={value} label={label} size="small" onDelete={() => dispatch(updateFilter({ occupation: filters.occupation.filter((v) => v !== value) }))} onMouseDown={(e) => e.stopPropagation()} />;
|
||||
})}
|
||||
</Box>
|
||||
)}
|
||||
>
|
||||
<MenuItem value="Any">Any</MenuItem>
|
||||
<MenuItem value="Software Engineer">
|
||||
Software Engineer
|
||||
{filterMasters?.occupations?.map((occ) => (
|
||||
<MenuItem key={occ.id} value={occ.id}>
|
||||
{occ.occupation_name}
|
||||
</MenuItem>
|
||||
<MenuItem value="Doctor">Doctor</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Annual Income</InputLabel>
|
||||
<Select
|
||||
value={filters.annualIncome}
|
||||
multiple
|
||||
value={filters.annual_income || []}
|
||||
label="Annual Income"
|
||||
onChange={(e) => {
|
||||
dispatch(updateFilter({ annualIncome: e.target.value }));
|
||||
dispatch(updateFilter({ annual_income: e.target.value }));
|
||||
handleSelectionChange("Annual Income", e.target.value);
|
||||
}}
|
||||
renderValue={(selected) => (
|
||||
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
|
||||
{selected.map((value) => {
|
||||
const label = filterMasters?.annual_incomes?.find((i) => i.id === value)?.annual_income_name || value;
|
||||
return <Chip key={value} label={label} size="small" onDelete={() => dispatch(updateFilter({ annual_income: filters.annual_income.filter((v) => v !== value) }))} onMouseDown={(e) => e.stopPropagation()} />;
|
||||
})}
|
||||
</Box>
|
||||
)}
|
||||
>
|
||||
<MenuItem value="Any">Any</MenuItem>
|
||||
<MenuItem value="0-5 Lakhs">0-5 Lakhs</MenuItem>
|
||||
<MenuItem value="5-10 Lakhs">5-10 Lakhs</MenuItem>
|
||||
{filterMasters?.annual_incomes?.map((inc) => (
|
||||
<MenuItem key={inc.id} value={inc.id}>
|
||||
{inc.annual_income_name}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Employee Type</InputLabel>
|
||||
<Select
|
||||
value={filters.employeeType}
|
||||
multiple
|
||||
value={filters.employee_type || []}
|
||||
label="Employee Type"
|
||||
onChange={(e) => {
|
||||
dispatch(updateFilter({ employeeType: e.target.value }));
|
||||
dispatch(updateFilter({ employee_type: e.target.value }));
|
||||
handleSelectionChange("Employee Type", e.target.value);
|
||||
}}
|
||||
renderValue={(selected) => (
|
||||
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
|
||||
{selected.map((value) => {
|
||||
const label = filterMasters?.employee_types?.find((et) => et.id === value)?.employee_type_name || value;
|
||||
return <Chip key={value} label={label} size="small" onDelete={() => dispatch(updateFilter({ employee_type: filters.employee_type.filter((v) => v !== value) }))} onMouseDown={(e) => e.stopPropagation()} />;
|
||||
})}
|
||||
</Box>
|
||||
)}
|
||||
>
|
||||
<MenuItem value="Any">Any</MenuItem>
|
||||
<MenuItem value="Government">Government</MenuItem>
|
||||
<MenuItem value="Private">Private</MenuItem>
|
||||
{filterMasters?.employee_types?.map((emp) => (
|
||||
<MenuItem key={emp.id} value={emp.id}>
|
||||
{emp.employee_type_name}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Education</InputLabel>
|
||||
<Select
|
||||
value={filters.education}
|
||||
multiple
|
||||
value={filters.education || []}
|
||||
label="Education"
|
||||
onChange={(e) => {
|
||||
dispatch(updateFilter({ education: e.target.value }));
|
||||
handleSelectionChange("Education", e.target.value);
|
||||
}}
|
||||
renderValue={(selected) => (
|
||||
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
|
||||
{selected.map((value) => {
|
||||
const label = filterMasters?.educations?.find((ed) => ed.id === value)?.education_name || value;
|
||||
return <Chip key={value} label={label} size="small" onDelete={() => dispatch(updateFilter({ education: filters.education.filter((v) => v !== value) }))} onMouseDown={(e) => e.stopPropagation()} />;
|
||||
})}
|
||||
</Box>
|
||||
)}
|
||||
>
|
||||
<MenuItem value="Any">Any</MenuItem>
|
||||
<MenuItem value="Bachelor">Bachelor</MenuItem>
|
||||
<MenuItem value="Master">Master</MenuItem>
|
||||
{filterMasters?.educations?.map((edu) => (
|
||||
<MenuItem key={edu.id} value={edu.id}>
|
||||
{edu.education_name}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</div>
|
||||
@ -443,50 +481,59 @@ const FilterForm = () => {
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>State</InputLabel>
|
||||
<Select
|
||||
value={filters.state}
|
||||
multiple
|
||||
value={filters.state || []}
|
||||
label="State"
|
||||
onChange={(e) => {
|
||||
dispatch(updateFilter({ state: e.target.value }));
|
||||
dispatch(updateFilter({ state: e.target.value, district: [] }));
|
||||
handleSelectionChange("State", e.target.value);
|
||||
}}
|
||||
renderValue={(selected) => (
|
||||
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
|
||||
{selected.map((value) => {
|
||||
const label = filterMasters?.states?.find((s) => s.id === value)?.state_name || value;
|
||||
return <Chip key={value} label={label} size="small" onDelete={() => dispatch(updateFilter({ state: filters.state.filter((v) => v !== value), district: [] }))} onMouseDown={(e) => e.stopPropagation()} />;
|
||||
})}
|
||||
</Box>
|
||||
)}
|
||||
>
|
||||
<MenuItem value="Any">Any</MenuItem>
|
||||
<MenuItem value="Tamil Nadu">Tamil Nadu</MenuItem>
|
||||
<MenuItem value="Karnataka">Karnataka</MenuItem>
|
||||
{filterMasters?.states?.map((state) => (
|
||||
<MenuItem key={state.id} value={state.id}>
|
||||
{state.state_name}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Country</InputLabel>
|
||||
<InputLabel>City</InputLabel>
|
||||
<Select
|
||||
value={filters.country}
|
||||
label="Country"
|
||||
multiple
|
||||
value={filters.district || []}
|
||||
label="City"
|
||||
disabled={!filters.state || filters.state.length === 0}
|
||||
onChange={(e) => {
|
||||
dispatch(updateFilter({ country: e.target.value }));
|
||||
handleSelectionChange("Country", e.target.value);
|
||||
dispatch(updateFilter({ district: e.target.value }));
|
||||
handleSelectionChange("City", e.target.value);
|
||||
}}
|
||||
renderValue={(selected) => (
|
||||
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
|
||||
{selected.map((value) => {
|
||||
const label = cityOptions.find((c) => c.id === value)?.district_name || value;
|
||||
return <Chip key={value} label={label} size="small" onDelete={() => dispatch(updateFilter({ district: filters.district.filter((v) => v !== value) }))} onMouseDown={(e) => e.stopPropagation()} />;
|
||||
})}
|
||||
</Box>
|
||||
)}
|
||||
>
|
||||
<MenuItem value="Any">Any</MenuItem>
|
||||
<MenuItem value="India">India</MenuItem>
|
||||
<MenuItem value="USA">USA</MenuItem>
|
||||
{cityOptions.map((city) => (
|
||||
<MenuItem key={city.id} value={city.id}>
|
||||
{city.district_name}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Citizenship</InputLabel>
|
||||
<Select
|
||||
value={filters.citizenship}
|
||||
label="Citizenship"
|
||||
onChange={(e) => {
|
||||
dispatch(updateFilter({ citizenship: e.target.value }));
|
||||
handleSelectionChange("Citizenship", e.target.value);
|
||||
}}
|
||||
>
|
||||
<MenuItem value="Any">Any</MenuItem>
|
||||
<MenuItem value="Indian">Indian</MenuItem>
|
||||
<MenuItem value="US Citizen">US Citizen</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
</div>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
@ -512,54 +559,22 @@ const FilterForm = () => {
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Eating Habits</InputLabel>
|
||||
<Select
|
||||
value={filters.eatingHabits}
|
||||
value={filters.diet}
|
||||
label="Eating Habits"
|
||||
onChange={(e) => {
|
||||
dispatch(updateFilter({ eatingHabits: e.target.value }));
|
||||
dispatch(updateFilter({ diet: e.target.value }));
|
||||
handleSelectionChange("Eating Habits", e.target.value);
|
||||
}}
|
||||
>
|
||||
<MenuItem value="Any">Any</MenuItem>
|
||||
<MenuItem value="Vegetarian">Vegetarian</MenuItem>
|
||||
<MenuItem value="Non-Vegetarian">Non-Vegetarian</MenuItem>
|
||||
{filterMasters?.diets?.map((diet) => (
|
||||
<MenuItem key={diet.id} value={diet.id}>
|
||||
{diet.diet_name}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
{/* <FormControl fullWidth>
|
||||
<InputLabel>Smoking Habits</InputLabel>
|
||||
<Select
|
||||
value={filters.smokingHabits}
|
||||
label="Smoking Habits"
|
||||
onChange={(e) => {
|
||||
dispatch(
|
||||
updateFilter({ smokingHabits: e.target.value })
|
||||
);
|
||||
handleSelectionChange("Smoking Habits", e.target.value);
|
||||
}}
|
||||
>
|
||||
<MenuItem value="Doesn't matter">Doesn't matter</MenuItem>
|
||||
<MenuItem value="Non-Smoker">Non-Smoker</MenuItem>
|
||||
<MenuItem value="Smoker">Smoker</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Drinking Habits</InputLabel>
|
||||
<Select
|
||||
value={filters.drinkingHabits}
|
||||
label="Drinking Habits"
|
||||
onChange={(e) => {
|
||||
dispatch(
|
||||
updateFilter({ drinkingHabits: e.target.value })
|
||||
);
|
||||
handleSelectionChange("Drinking Habits", e.target.value);
|
||||
}}
|
||||
>
|
||||
<MenuItem value="Doesn't matter">Doesn't matter</MenuItem>
|
||||
<MenuItem value="Non-Drinker">Non-Drinker</MenuItem>
|
||||
<MenuItem value="Social Drinker">Social Drinker</MenuItem>
|
||||
</Select>
|
||||
</FormControl> */}
|
||||
</div>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
@ -585,64 +600,116 @@ const FilterForm = () => {
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Family Type</InputLabel>
|
||||
<Select
|
||||
value={filters.familyType}
|
||||
multiple
|
||||
value={filters.family_type || []}
|
||||
label="Family Type"
|
||||
onChange={(e) => {
|
||||
dispatch(updateFilter({ familyType: e.target.value }));
|
||||
dispatch(updateFilter({ family_type: e.target.value }));
|
||||
handleSelectionChange("Family Type", e.target.value);
|
||||
}}
|
||||
renderValue={(selected) => (
|
||||
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
|
||||
{selected.map((value) => {
|
||||
const label = filterMasters?.family_types?.find((t) => t.id === value)?.family_type_name || value;
|
||||
return <Chip key={value} label={label} size="small" onDelete={() => dispatch(updateFilter({ family_type: filters.family_type.filter((v) => v !== value) }))} onMouseDown={(e) => e.stopPropagation()} />;
|
||||
})}
|
||||
</Box>
|
||||
)}
|
||||
>
|
||||
<MenuItem value="Any">Any</MenuItem>
|
||||
<MenuItem value="Nuclear">Nuclear</MenuItem>
|
||||
<MenuItem value="Joint">Joint</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Family Status</InputLabel>
|
||||
<Select
|
||||
value={filters.familyStatus}
|
||||
label="Family Status"
|
||||
onChange={(e) => {
|
||||
dispatch(updateFilter({ familyStatus: e.target.value }));
|
||||
handleSelectionChange("Family Status", e.target.value);
|
||||
}}
|
||||
>
|
||||
<MenuItem value="Any">Any</MenuItem>
|
||||
<MenuItem value="Middle Class">Middle Class</MenuItem>
|
||||
<MenuItem value="Upper Middle Class">
|
||||
Upper Middle Class
|
||||
{filterMasters?.family_types?.map((type) => (
|
||||
<MenuItem key={type.id} value={type.id}>
|
||||
{type.family_type_name}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Family Value</InputLabel>
|
||||
<Select
|
||||
value={filters.familyValue}
|
||||
label="Family Value"
|
||||
onChange={(e) => {
|
||||
dispatch(updateFilter({ familyValue: e.target.value }));
|
||||
handleSelectionChange("Family Value", e.target.value);
|
||||
</div>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
|
||||
{/* Paid Membership Benefit Section */}
|
||||
<Accordion
|
||||
expanded={expandedSections.paidBenefit && filters.isPaidMember}
|
||||
onChange={(e, isExpanded) => {
|
||||
if (!filters.isPaidMember) {
|
||||
toast.error("This feature is locked for paid members only", {
|
||||
icon: "🔒",
|
||||
});
|
||||
return;
|
||||
}
|
||||
handleAccordionChange("paidBenefit")(e, isExpanded);
|
||||
}}
|
||||
className="mb-4"
|
||||
>
|
||||
<AccordionSummary
|
||||
expandIcon={filters.isPaidMember ? <ChevronDown /> : <Lock size={18} className="text-gray-400" />}
|
||||
sx={{
|
||||
backgroundColor: "#f5fbff",
|
||||
"&:hover": {
|
||||
backgroundColor: "#fff6f0",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<MenuItem value="Any">Any</MenuItem>
|
||||
<MenuItem value="Traditional">Traditional</MenuItem>
|
||||
<MenuItem value="Moderate">Moderate</MenuItem>
|
||||
<MenuItem value="Liberal">Liberal</MenuItem>
|
||||
<div className="flex items-center gap-2 -mx-4 -my-2 px-4 py-2 w-full">
|
||||
<Crown size={20} className="text-yellow-600" />
|
||||
<Typography className="font-semibold">
|
||||
Paid Membership Benefit
|
||||
</Typography>
|
||||
</div>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
|
||||
{/* Star Filter */}
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Star</InputLabel>
|
||||
<Select
|
||||
multiple
|
||||
value={filters.star || []}
|
||||
label="Star"
|
||||
disabled={!filters.isPaidMember}
|
||||
onChange={(e) => {
|
||||
dispatch(updateFilter({ star: e.target.value }));
|
||||
handleSelectionChange("Star", e.target.value);
|
||||
}}
|
||||
renderValue={(selected) => (
|
||||
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
|
||||
{selected.map((value) => {
|
||||
const label = filterMasters?.stars?.find((s) => s.id === value)?.star_name || value;
|
||||
return <Chip key={value} label={label} size="small" onDelete={() => dispatch(updateFilter({ star: filters.star.filter((v) => v !== value) }))} onMouseDown={(e) => e.stopPropagation()} />;
|
||||
})}
|
||||
</Box>
|
||||
)}
|
||||
>
|
||||
{filterMasters?.stars?.map((star) => (
|
||||
<MenuItem key={star.id} value={star.id}>
|
||||
{star.star_name}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</div>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
|
||||
{/* Submit Button */}
|
||||
<div className="mt-6 flex justify-center">
|
||||
{/* Sticky Footer Actions */}
|
||||
<div className="sticky bottom-0 bg-white p-4 border-t border-gray-200 flex justify-between gap-4 mt-4 z-10 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.1)]">
|
||||
<Button
|
||||
variant="outlined"
|
||||
size="large"
|
||||
onClick={handleClear}
|
||||
className="px-8"
|
||||
color="inherit"
|
||||
startIcon={<RotateCcw size={20} />}
|
||||
>
|
||||
Clear Filters
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
size="large"
|
||||
onClick={handleSubmit}
|
||||
className="px-12"
|
||||
startIcon={<Check size={20} />}
|
||||
>
|
||||
Apply Filters
|
||||
</Button>
|
||||
|
||||
@ -27,7 +27,7 @@ const FilterModal = () => {
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
fullWidth
|
||||
maxWidth="lg" // adjust: "sm" | "md" | "lg"
|
||||
maxWidth="md" // adjust: "sm" | "md" | "lg"
|
||||
>
|
||||
<DialogTitle sx={{background:"#f5fbff"}}>
|
||||
<Box display="flex" alignItems="center" justifyContent="space-between">
|
||||
|
||||
@ -16,6 +16,7 @@ import {
|
||||
DialogContent,
|
||||
DialogContentText,
|
||||
DialogActions,
|
||||
Tooltip,
|
||||
} from "@mui/material";
|
||||
import { LocalizationProvider } from "@mui/x-date-pickers";
|
||||
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
|
||||
@ -184,6 +185,7 @@ const LifestyleDetailsForm = ({
|
||||
};
|
||||
|
||||
const renderChartCell = (label, value, onChange) => (
|
||||
<Tooltip title={value && value.length > 0 ? value.join(", ") : ""} arrow placement="top">
|
||||
<div className="bg-white border border-gray-300 rounded-lg p-2 flex flex-col items-center justify-center min-h-[70px]">
|
||||
<span className="text-[10px] font-medium text-gray-700 text-center">
|
||||
{label}
|
||||
@ -196,7 +198,17 @@ const LifestyleDetailsForm = ({
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
renderValue={(selected) => {
|
||||
if (!selected || selected.length === 0) return `+ Add ${label}`;
|
||||
return selected.join(", ");
|
||||
return (
|
||||
<div style={{
|
||||
whiteSpace: "nowrap",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
maxWidth: "60px",
|
||||
fontSize: "11px"
|
||||
}}>
|
||||
{selected.join(", ")}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
MenuProps={{
|
||||
PaperProps: { style: { maxHeight: 280 } },
|
||||
@ -211,6 +223,7 @@ const LifestyleDetailsForm = ({
|
||||
</Select>
|
||||
</FormControl>
|
||||
</div>
|
||||
</Tooltip>
|
||||
);
|
||||
|
||||
const renderChartGrid = (type) => {
|
||||
|
||||
@ -39,6 +39,7 @@ const PersonalDetailsForm = ({ onSubmitStep, errors, onFieldChange, isStep1Updat
|
||||
const dispatch = useDispatch();
|
||||
const data = useSelector((state) => state.registerform.personalDetails);
|
||||
const nameInputRef = useRef(null);
|
||||
const mobileInputRef = useRef(null);
|
||||
const requiredMark = <span style={{ color: "#d32f2f" }}> *</span>;
|
||||
|
||||
const [showOtp, setShowOtp] = useState(false);
|
||||
@ -56,15 +57,23 @@ const PersonalDetailsForm = ({ onSubmitStep, errors, onFieldChange, isStep1Updat
|
||||
if (isStep1Update && data.mobileNumber && !data.verifiedMobileNumber) {
|
||||
dispatch(updatePersonalDetails({ verifiedMobileNumber: data.mobileNumber }));
|
||||
setMobileOtpVerified(true);
|
||||
setMobileNumberError("");
|
||||
}
|
||||
}, [isStep1Update, data.mobileNumber, data.verifiedMobileNumber, dispatch]);
|
||||
|
||||
useEffect(() => {
|
||||
if (data.verifiedMobileNumber && data.mobileNumber === data.verifiedMobileNumber) {
|
||||
setMobileOtpVerified(true);
|
||||
setMobileNumberError("");
|
||||
}
|
||||
}, [data.verifiedMobileNumber, data.mobileNumber]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isStep1Update && !data.religion) {
|
||||
dispatch(updatePersonalDetails({ religion: 1 }));
|
||||
}
|
||||
}, [isStep1Update, data.religion, dispatch]);
|
||||
|
||||
const { data: personalMasters, isLoading: isPersonalMastersLoading } =
|
||||
usePersonalDetailsMasters();
|
||||
|
||||
@ -120,7 +129,7 @@ const PersonalDetailsForm = ({ onSubmitStep, errors, onFieldChange, isStep1Updat
|
||||
const raw = cityQuery.data;
|
||||
if (!raw) return [];
|
||||
if (Array.isArray(raw)) return raw;
|
||||
return raw.subCaste || raw.district || raw.data || [];
|
||||
return raw.subCaste || raw.sub_caste || raw.district || raw.data || [];
|
||||
}, [cityQuery.data]);
|
||||
|
||||
const starOptions = useMemo(() => {
|
||||
@ -384,12 +393,6 @@ const PersonalDetailsForm = ({ onSubmitStep, errors, onFieldChange, isStep1Updat
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (showOtp && !mobileOtpVerified && isOtpComplete) {
|
||||
handleOtpSubmit();
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [otp]);
|
||||
|
||||
|
||||
// file upload
|
||||
@ -426,32 +429,31 @@ const PersonalDetailsForm = ({ onSubmitStep, errors, onFieldChange, isStep1Updat
|
||||
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (showOtp && !isOtpComplete) {
|
||||
// For new registrations, mobile verification is mandatory.
|
||||
// For updates, it's also mandatory if the number was changed.
|
||||
// The `mobileOtpVerified` state covers both scenarios.
|
||||
if (!mobileOtpVerified) {
|
||||
// Provide a more specific error message.
|
||||
if (showOtp) {
|
||||
if (!isOtpComplete) {
|
||||
setOtpError("OTP is required and must be complete");
|
||||
return;
|
||||
} else {
|
||||
setOtpError("Please submit the OTP to verify your number.");
|
||||
}
|
||||
const firstOtpInput = document.getElementById("otp-0");
|
||||
if (firstOtpInput) {
|
||||
firstOtpInput.focus();
|
||||
}
|
||||
} else {
|
||||
setMobileNumberError("Please verify your mobile number to proceed.");
|
||||
if (mobileInputRef.current) {
|
||||
mobileInputRef.current.focus();
|
||||
}
|
||||
|
||||
if (showOtp && !mobileOtpVerified) {
|
||||
try {
|
||||
await verifyOtp.mutateAsync({
|
||||
mobile: data.mobileNumber,
|
||||
otp: otp.join(""),
|
||||
});
|
||||
setMobileOtpVerified(true);
|
||||
setOtpError("");
|
||||
console.log("Submitting personal details:", data); // log here
|
||||
onSubmitStep();
|
||||
console.log("OTP verified on submit");
|
||||
} catch (err) {
|
||||
setOtpError(err || "OTP verification failed");
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// no OTP or already verified
|
||||
console.log("Submitting personal details:", data); // log here
|
||||
onSubmitStep();
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
const formatTimer = (sec) => {
|
||||
@ -532,6 +534,7 @@ const PersonalDetailsForm = ({ onSubmitStep, errors, onFieldChange, isStep1Updat
|
||||
<Box sx={{ display: "flex", alignItems: "start", gap: 2 }}>
|
||||
<TextField
|
||||
fullWidth
|
||||
inputRef={mobileInputRef}
|
||||
name="mobileNumber"
|
||||
label="Mobile Number"
|
||||
type="tel"
|
||||
@ -629,15 +632,15 @@ const PersonalDetailsForm = ({ onSubmitStep, errors, onFieldChange, isStep1Updat
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Typography sx={{ ml: 2, minWidth: 56 }}>
|
||||
<Typography sx={{ ml: 0, minWidth: 56 }}>
|
||||
{otpTimer > 0 ? (
|
||||
` ${formatTimer(otpTimer) } Seconds`
|
||||
) : (
|
||||
<button
|
||||
component="button"
|
||||
variant="body2"
|
||||
type="button"
|
||||
onClick={handleMobileSubmit}
|
||||
disabled={otpTimer > 0}
|
||||
style={{ background: "none", border: "none", padding: 0, textDecoration: "underline", cursor: "pointer", color: "inherit", font: "inherit" }}
|
||||
>
|
||||
Resend OTP
|
||||
</button>
|
||||
@ -712,6 +715,8 @@ const PersonalDetailsForm = ({ onSubmitStep, errors, onFieldChange, isStep1Updat
|
||||
fullWidth
|
||||
name="height"
|
||||
label="Enter Height"
|
||||
|
||||
max={3}
|
||||
type="number"
|
||||
value={data.height}
|
||||
onChange={(e) => handleChange("height", e.target.value)}
|
||||
|
||||
@ -233,8 +233,7 @@ const StepperForm = () => {
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
const hideStepperRoutes = ["/profile-edit"];
|
||||
|
||||
const shouldHideStepper = hideStepperRoutes.includes(location.pathname);
|
||||
const shouldHideStepper = hideStepperRoutes.some((route) => location.pathname.startsWith(route));
|
||||
const personalDetails = useSelector(
|
||||
(state) => state.registerform.personalDetails
|
||||
);
|
||||
@ -421,14 +420,21 @@ const [completedSteps, setCompletedSteps] = useState([]);
|
||||
}
|
||||
}, [location.state, navigate, location.pathname]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isAuth) return;
|
||||
const fetchPersonalDetails = async () => {
|
||||
try {
|
||||
const { data: personalDetailsData } = useQuery({
|
||||
queryKey: ["personalDetails"],
|
||||
queryFn: async () => {
|
||||
const response = await axiosInstance.get(API_ENDPOINTS.EDIT_PERSONAL_DETAILS);
|
||||
const data = response.data;
|
||||
if (data.status === "success" && data.personal_details) {
|
||||
const pd = data.personal_details;
|
||||
return response.data;
|
||||
},
|
||||
enabled: isAuth || shouldHideStepper,
|
||||
retry: false,
|
||||
refetchOnWindowFocus: false,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const processData = async () => {
|
||||
if (personalDetailsData?.status === "success" && personalDetailsData?.personal_details) {
|
||||
const pd = personalDetailsData.personal_details;
|
||||
setIsStep1Update(true);
|
||||
|
||||
const rawImages = pd.profile_images || pd.images || [];
|
||||
@ -440,12 +446,14 @@ const [completedSteps, setCompletedSteps] = useState([]);
|
||||
let fileName = `image-${index}.jpg`;
|
||||
|
||||
try {
|
||||
if (imageUrl) {
|
||||
const response = await fetch(imageUrl);
|
||||
const blob = await response.blob();
|
||||
if (blob.type) mimeType = blob.type;
|
||||
const ext = mimeType.split("/")[1] || "jpg";
|
||||
fileName = `image-${index}.${ext}`;
|
||||
file = new File([blob], fileName, { type: mimeType });
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error converting image URL to File:", error);
|
||||
}
|
||||
@ -487,12 +495,9 @@ const [completedSteps, setCompletedSteps] = useState([]);
|
||||
})
|
||||
);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching personal details:", error);
|
||||
}
|
||||
};
|
||||
fetchPersonalDetails();
|
||||
}, [dispatch, isAuth]);
|
||||
processData();
|
||||
}, [personalDetailsData, dispatch]);
|
||||
|
||||
|
||||
// Fetch Educational Details
|
||||
@ -502,7 +507,7 @@ const [completedSteps, setCompletedSteps] = useState([]);
|
||||
const response = await axiosInstance.get(API_ENDPOINTS.EDIT_EDUCATION_DETAILS);
|
||||
return response.data;
|
||||
},
|
||||
enabled: isAuth,
|
||||
enabled: isAuth || shouldHideStepper,
|
||||
retry: false,
|
||||
refetchOnWindowFocus: false,
|
||||
});
|
||||
@ -535,7 +540,7 @@ const {data:familyData} = useQuery({
|
||||
const response = await axiosInstance.get(API_ENDPOINTS.EDIT_FAMILY_DETAILS);
|
||||
return response.data;
|
||||
},
|
||||
enabled: isAuth,
|
||||
enabled: isAuth || shouldHideStepper,
|
||||
retry:false,
|
||||
refetchOnWindowFocus:false,
|
||||
});
|
||||
@ -584,9 +589,10 @@ useEffect(()=>{
|
||||
const response = await axiosInstance.get(API_ENDPOINTS.EDIT_LIFESTYLE_DETAILS);
|
||||
return response.data;
|
||||
},
|
||||
enabled: isAuth,
|
||||
enabled: isAuth || shouldHideStepper,
|
||||
retry: false,
|
||||
refetchOnWindowFocus: false,
|
||||
refetchOnMount: true,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
@ -608,8 +614,8 @@ useEffect(()=>{
|
||||
updateLifestyleDetails({
|
||||
diets: ld.diet_id || "",
|
||||
hobbies: ld.hobbies_ids || [],
|
||||
dob: ld.time_of_birth || "",
|
||||
tob: ld.date_of_birth ? ld.date_of_birth.substring(0, 5) : "",
|
||||
dob: ld.time_of_birth ? ld.time_of_birth.split("T")[0] : "",
|
||||
tob: ld.time_of_birth_formated ? ld.time_of_birth_formated.substring(0, 5) : "",
|
||||
placeOfBirth: ld.place_of_birth || "",
|
||||
graha: mapChart("graha"),
|
||||
amsam: mapChart("amsam"),
|
||||
@ -626,7 +632,7 @@ useEffect(()=>{
|
||||
const response = await axiosInstance.get(API_ENDPOINTS.EDIT_PREFERED_PARTNER_DETAILS);
|
||||
return response.data;
|
||||
},
|
||||
enabled: isAuth,
|
||||
enabled: isAuth || shouldHideStepper,
|
||||
retry: false,
|
||||
refetchOnWindowFocus: false,
|
||||
});
|
||||
@ -878,6 +884,8 @@ useEffect(()=>{
|
||||
|
||||
if (fileToAppend) {
|
||||
formData.append(`profile_images[${index}]`, fileToAppend);
|
||||
} else if (item.preview && typeof item.preview === "string") {
|
||||
formData.append(`profile_images[${index}]`, item.preview);
|
||||
}
|
||||
})
|
||||
);
|
||||
@ -932,7 +940,7 @@ useEffect(()=>{
|
||||
formData.append("tob", lifestyleDetails.tob || "");
|
||||
formData.append("place_of_birth", lifestyleDetails.placeOfBirth || "");
|
||||
|
||||
formData.append("diet", lifestyleDetails.diets || "");
|
||||
formData.append("diets", lifestyleDetails.diets || "");
|
||||
|
||||
(lifestyleDetails.hobbies || []).forEach((id, index) => {
|
||||
formData.append(`hobbies[${index}]`, id);
|
||||
@ -1022,6 +1030,9 @@ useEffect(()=>{
|
||||
|
||||
try {
|
||||
const previewData = await getPreviewDetails();
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["preview-details"]
|
||||
});
|
||||
if (previewData?.personal_details) {
|
||||
const pd = previewData.personal_details;
|
||||
const images = pd.images || pd.profile_images;
|
||||
@ -1032,7 +1043,7 @@ useEffect(()=>{
|
||||
dispatch(updatePersonalDetails({ profiles: formattedImages }));
|
||||
}
|
||||
}
|
||||
queryClient.invalidateQueries({ queryKey: ["previewDetails"] });
|
||||
queryClient.invalidateQueries({ queryKey: ["personalDetails"] });
|
||||
} catch (error) {
|
||||
console.error("Error refreshing preview details:", error);
|
||||
}
|
||||
@ -1047,21 +1058,29 @@ useEffect(()=>{
|
||||
case 2:
|
||||
payload = buildRegisterStep2Payload();
|
||||
await registerStep2.mutateAsync(payload);
|
||||
queryClient.invalidateQueries({ queryKey: ["educationalDetails"] });
|
||||
queryClient.invalidateQueries({ queryKey: ["preview-details"] });
|
||||
break;
|
||||
|
||||
case 3:
|
||||
payload = buildRegisterStep3Payload();
|
||||
await registerStep3.mutateAsync(payload);
|
||||
queryClient.invalidateQueries({ queryKey: ["familyDetails"] })
|
||||
queryClient.invalidateQueries({ queryKey: ["preview-details"] });
|
||||
break;
|
||||
|
||||
case 4:
|
||||
payload = buildRegisterStep4Payload();
|
||||
await registerStep4.mutateAsync(payload);
|
||||
queryClient.invalidateQueries({ queryKey: ["lifestyleDetails"] });
|
||||
queryClient.invalidateQueries({ queryKey: ["preview-details"] });
|
||||
break;
|
||||
|
||||
case 5:
|
||||
payload = buildRegisterStep5Payload();
|
||||
await registerStep5.mutateAsync(payload);
|
||||
queryClient.invalidateQueries({ queryKey: ["partnerPreferences"] });
|
||||
queryClient.invalidateQueries({ queryKey: ["preview-details"] });
|
||||
break;
|
||||
|
||||
default:
|
||||
|
||||
15
src/hooks/useProfiles.js
Normal file
15
src/hooks/useProfiles.js
Normal file
@ -0,0 +1,15 @@
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { getProfilesFilterList, getProfilesFilterMasters } from "../api/masters.api";
|
||||
|
||||
export const useProfiles = (filters) => {
|
||||
return useQuery({
|
||||
queryKey: ["profiles-filter-list", filters],
|
||||
queryFn: () => getProfilesFilterList(filters),
|
||||
});
|
||||
};
|
||||
|
||||
export const useProfilesFilterMasters = () =>
|
||||
useQuery({
|
||||
queryKey: ["profiles-filter-masters"],
|
||||
queryFn: getProfilesFilterMasters,
|
||||
});
|
||||
@ -7,8 +7,9 @@ import { ThemeProvider } from "@mui/material/styles";
|
||||
import theme from "./theme";
|
||||
|
||||
import { Provider } from "react-redux";
|
||||
import { store } from "./redux/store.js";
|
||||
import { persistor, store } from "./redux/store.js";
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import { PersistGate } from "redux-persist/integration/react";
|
||||
// Disable noisy logs in production while keeping warnings/errors.
|
||||
if (import.meta.env.PROD) {
|
||||
console.log = () => {};
|
||||
@ -31,9 +32,11 @@ ReactDOM.createRoot(document.getElementById("root")).render(
|
||||
|
||||
<ThemeProvider theme={theme}>
|
||||
<Provider store={store}>
|
||||
<PersistGate loading={null} persistor={persistor}>
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<App />
|
||||
</QueryClientProvider>
|
||||
</PersistGate>
|
||||
</Provider>
|
||||
</ThemeProvider>
|
||||
|
||||
|
||||
@ -1,29 +1,26 @@
|
||||
import { createSlice } from "@reduxjs/toolkit";
|
||||
|
||||
const initialState = {
|
||||
age: [18, 70],
|
||||
height: [4.0, 7.11],
|
||||
maritalStatus: "All Profile",
|
||||
motherTongue: [],
|
||||
religion: "Hindu",
|
||||
matchesWithHoroscope: false,
|
||||
from_age: 18,
|
||||
to_age: 70,
|
||||
from_height: 4.0,
|
||||
to_height: 7.11,
|
||||
marital_status: [],
|
||||
religion: [],
|
||||
caste: [],
|
||||
subCaste: [],
|
||||
star: "Any",
|
||||
dasham: "Doesn't matter",
|
||||
occupation: "Any",
|
||||
annualIncome: "Any",
|
||||
employeeType: "Any",
|
||||
education: "Any",
|
||||
state: "Any",
|
||||
country: "Any",
|
||||
citizenship: "Any",
|
||||
eatingHabits: "Any",
|
||||
smokingHabits: "Doesn't matter",
|
||||
drinkingHabits: "Doesn't matter",
|
||||
familyType: "Any",
|
||||
familyStatus: "Any",
|
||||
familyValue: "Any",
|
||||
sub_caste: [],
|
||||
star: [],
|
||||
occupation: [],
|
||||
annual_income: [],
|
||||
employee_type: [],
|
||||
education: [],
|
||||
state: [],
|
||||
district: [],
|
||||
diet: "",
|
||||
family_type: [],
|
||||
filter_type: "all_matches",
|
||||
page: 1,
|
||||
isPaidMember: false,
|
||||
};
|
||||
|
||||
const filterSlice = createSlice({
|
||||
@ -31,73 +28,24 @@ const filterSlice = createSlice({
|
||||
initialState,
|
||||
reducers: {
|
||||
setAge: (state, action) => {
|
||||
state.age = action.payload;
|
||||
state.from_age = action.payload[0];
|
||||
state.to_age = action.payload[1];
|
||||
},
|
||||
setHeight: (state, action) => {
|
||||
state.height = action.payload;
|
||||
state.from_height = action.payload[0];
|
||||
state.to_height = action.payload[1];
|
||||
},
|
||||
setMaritalStatus: (state, action) => {
|
||||
state.maritalStatus = action.payload;
|
||||
},
|
||||
setMotherTongue: (state, action) => {
|
||||
state.motherTongue = action.payload;
|
||||
state.marital_status = Array.isArray(action.payload) ? action.payload : [action.payload];
|
||||
},
|
||||
setReligion: (state, action) => {
|
||||
state.religion = action.payload;
|
||||
},
|
||||
setMatchesWithHoroscope: (state, action) => {
|
||||
state.matchesWithHoroscope = action.payload;
|
||||
state.religion = Array.isArray(action.payload) ? action.payload : [action.payload];
|
||||
},
|
||||
setCaste: (state, action) => {
|
||||
state.caste = action.payload;
|
||||
},
|
||||
setSubCaste: (state, action) => {
|
||||
state.subCaste = action.payload;
|
||||
},
|
||||
setStar: (state, action) => {
|
||||
state.star = action.payload;
|
||||
},
|
||||
setDasham: (state, action) => {
|
||||
state.dasham = action.payload;
|
||||
},
|
||||
setOccupation: (state, action) => {
|
||||
state.occupation = action.payload;
|
||||
},
|
||||
setAnnualIncome: (state, action) => {
|
||||
state.annualIncome = action.payload;
|
||||
},
|
||||
setEmployeeType: (state, action) => {
|
||||
state.employeeType = action.payload;
|
||||
},
|
||||
setEducation: (state, action) => {
|
||||
state.education = action.payload;
|
||||
},
|
||||
setState: (state, action) => {
|
||||
state.state = action.payload;
|
||||
},
|
||||
setCountry: (state, action) => {
|
||||
state.country = action.payload;
|
||||
},
|
||||
setCitizenship: (state, action) => {
|
||||
state.citizenship = action.payload;
|
||||
},
|
||||
setEatingHabits: (state, action) => {
|
||||
state.eatingHabits = action.payload;
|
||||
},
|
||||
setSmokingHabits: (state, action) => {
|
||||
state.smokingHabits = action.payload;
|
||||
},
|
||||
setDrinkingHabits: (state, action) => {
|
||||
state.drinkingHabits = action.payload;
|
||||
},
|
||||
setFamilyType: (state, action) => {
|
||||
state.familyType = action.payload;
|
||||
},
|
||||
setFamilyStatus: (state, action) => {
|
||||
state.familyStatus = action.payload;
|
||||
},
|
||||
setFamilyValue: (state, action) => {
|
||||
state.familyValue = action.payload;
|
||||
state.sub_caste = action.payload;
|
||||
},
|
||||
|
||||
// universal update
|
||||
@ -105,7 +53,16 @@ const filterSlice = createSlice({
|
||||
return { ...state, ...action.payload };
|
||||
},
|
||||
|
||||
resetFilters: () => initialState,
|
||||
resetFilters: (state) => {
|
||||
// Reset all filters but preserve the paid member status
|
||||
return { ...initialState, isPaidMember: state.isPaidMember };
|
||||
},
|
||||
setPage: (state, action) => {
|
||||
state.page = action.payload;
|
||||
},
|
||||
setPaidMemberStatus: (state, action) => {
|
||||
state.isPaidMember = action.payload;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
@ -113,28 +70,13 @@ export const {
|
||||
setAge,
|
||||
setHeight,
|
||||
setMaritalStatus,
|
||||
setMotherTongue,
|
||||
setReligion,
|
||||
setMatchesWithHoroscope,
|
||||
setCaste,
|
||||
setSubCaste,
|
||||
setStar,
|
||||
setDasham,
|
||||
setOccupation,
|
||||
setAnnualIncome,
|
||||
setEmployeeType,
|
||||
setEducation,
|
||||
setState,
|
||||
setCountry,
|
||||
setCitizenship,
|
||||
setEatingHabits,
|
||||
setSmokingHabits,
|
||||
setDrinkingHabits,
|
||||
setFamilyType,
|
||||
setFamilyStatus,
|
||||
setFamilyValue,
|
||||
updateFilter,
|
||||
resetFilters,
|
||||
setPage,
|
||||
setPaidMemberStatus,
|
||||
} = filterSlice.actions;
|
||||
|
||||
export default filterSlice.reducer;
|
||||
|
||||
@ -1,9 +1,36 @@
|
||||
import { configureStore } from "@reduxjs/toolkit";
|
||||
import registerformReducer from "./registrationFormSlice";
|
||||
import filtersReducer from "./filterSlice";
|
||||
import {
|
||||
persistStore,
|
||||
persistReducer,
|
||||
FLUSH,
|
||||
REHYDRATE,
|
||||
PAUSE,
|
||||
PERSIST,
|
||||
PURGE,
|
||||
REGISTER,
|
||||
} from "redux-persist";
|
||||
import storage from "redux-persist/lib/storage"; // defaults to localStorage for web
|
||||
|
||||
const persistConfig = {
|
||||
key: "filters",
|
||||
storage,
|
||||
};
|
||||
|
||||
const persistedFiltersReducer = persistReducer(persistConfig, filtersReducer);
|
||||
|
||||
export const store = configureStore({
|
||||
reducer: {
|
||||
registerform:registerformReducer,
|
||||
filters:filtersReducer,
|
||||
registerform: registerformReducer,
|
||||
filters: persistedFiltersReducer,
|
||||
},
|
||||
middleware: (getDefaultMiddleware) =>
|
||||
getDefaultMiddleware({
|
||||
serializableCheck: {
|
||||
ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
|
||||
},
|
||||
}),
|
||||
});
|
||||
|
||||
export const persistor = persistStore(store);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user