From 5590d64f473495368bcef9e6d16ab91049056f5f Mon Sep 17 00:00:00 2001 From: Eddie Jaoude Date: Fri, 31 Mar 2023 13:43:06 +0700 Subject: [PATCH] fix: removed tab sorting (#5742) --- components/user/UserPage.js | 40 ++++++-------- components/user/UserTabs.js | 102 ++---------------------------------- 2 files changed, 20 insertions(+), 122 deletions(-) diff --git a/components/user/UserPage.js b/components/user/UserPage.js index 092d7de3572..6fb3f81ea82 100644 --- a/components/user/UserPage.js +++ b/components/user/UserPage.js @@ -8,64 +8,58 @@ import UserTestimonials from "./UserTestimonials"; import UserEvents from "./UserEvents"; export default function UserPage({ data, BASE_URL }) { - const [userData, setUserData] = useState(data); const defaultTabs = [ - { name: "My Links", href: "#", current: true, order: "ASC" }, - { name: "Milestones", href: "#", current: false, order: "ASC" }, - { name: "Testimonials", href: "#", current: false, order: "ASC" }, - { name: "Events", href: "#", current: false, order: "ASC" }, + { name: "My Links", href: "#", current: true }, + { name: "Milestones", href: "#", current: false }, + { name: "Testimonials", href: "#", current: false }, + { name: "Events", href: "#", current: false }, ]; let displayTabs = defaultTabs.flatMap((tab) => { if (tab.name === "Milestones") { - if (userData.milestones && userData.milestones.length) { - return { ...tab, total: userData.milestones.length }; + if (data.milestones && data.milestones.length) { + return { ...tab, total: data.milestones.length }; } return []; } if (tab.name === "Testimonials") { - if (userData.testimonials && userData.testimonials.length) { - return { ...tab, total: userData.testimonials.length }; + if (data.testimonials && data.testimonials.length) { + return { ...tab, total: data.testimonials.length }; } return []; } if (tab.name === "Events") { - if (userData.events && userData.events.length) { - return { ...tab, total: userData.events.length }; + if (data.events && data.events.length) { + return { ...tab, total: data.events.length }; } return []; } - return { ...tab, total: userData.links.length }; + return { ...tab, total: data.links.length }; }); const [tabs, setTabs] = useState(displayTabs); return ( <> - - + + {tabs.find((tab) => tab.name === "My Links") && tabs.find((tab) => tab.name === "My Links").current && ( - + )} {tabs.find((tab) => tab.name === "Milestones") && tabs.find((tab) => tab.name === "Milestones").current && ( - + )} {tabs.find((tab) => tab.name === "Testimonials") && tabs.find((tab) => tab.name === "Testimonials").current && ( - + )} {tabs.find((tab) => tab.name === "Events") && tabs.find((tab) => tab.name === "Events").current && ( - + )} ); diff --git a/components/user/UserTabs.js b/components/user/UserTabs.js index 7c750ad0a4b..a8e5be38b96 100644 --- a/components/user/UserTabs.js +++ b/components/user/UserTabs.js @@ -1,8 +1,6 @@ -import { BiSortAlt2 } from "react-icons/bi"; - import Link from "@components/Link"; -export default function UserTabs({ tabs, setTabs, setUserData, userData }) { +export default function UserTabs({ tabs, setTabs }) { const classNames = (...classes) => classes.filter(Boolean).join(" "); const changeTab = (e, value) => { e.preventDefault(); @@ -15,74 +13,6 @@ export default function UserTabs({ tabs, setTabs, setUserData, userData }) { ); }; - const getDataKeyAndSortKey = (tabName) => { - let dataKeyObj = {}; - switch (tabName) { - case "Events": - dataKeyObj.dataKey = "events"; - dataKeyObj.sortKey = "date.start"; - break; - case "Testimonials": - dataKeyObj.dataKey = "testimonials"; - dataKeyObj.sortKey = "date"; - break; - case "Milestones": - dataKeyObj.dataKey = "milestones"; - dataKeyObj.sortKey = "date"; - break; - default: - dataKeyObj.dataKey = "links"; - dataKeyObj.sortKey = "name"; - } - return dataKeyObj; - }; - - const sortUserTabItems = (tabName, order) => { - const { dataKey, sortKey } = getDataKeyAndSortKey(tabName); - userData[dataKey].sort(function (a, b) { - const aVal = sortKey.includes(".") - ? getNested(a, sortKey.split(".")) - : a[sortKey]; - const bVal = sortKey.includes(".") - ? getNested(b, sortKey.split(".")) - : b[sortKey]; - if (tabName === "My Links") { - if (order === "ASC") { - return aVal.toLowerCase() > bVal.toLowerCase() - ? 1 - : aVal.toLowerCase() < bVal.toLowerCase() - ? -1 - : 0; - } else { - return aVal.toLowerCase() < bVal.toLowerCase() - ? 1 - : aVal.toLowerCase() > bVal.toLowerCase() - ? -1 - : 0; - } - } else { - if (order === "ASC") { - return new Date(aVal) > new Date(bVal) - ? 1 - : new Date(aVal) < new Date(bVal) - ? -1 - : 0; - } else { - return new Date(aVal) < new Date(bVal) - ? 1 - : new Date(aVal) > new Date(bVal) - ? -1 - : 0; - } - } - }); - setUserData({ ...userData }); - }; - - const getNested = (obj, args) => { - return args.reduce((obj, level) => obj && obj[level], obj); - }; - return (
@@ -113,37 +43,11 @@ export default function UserTabs({ tabs, setTabs, setUserData, userData }) { tab.current ? "border-indigo-500 text-indigo-600" : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300", - "w-1/4 py-4 px-1 text-center border-b-2 font-medium text-sm flex justify-center items-center gap-4" + "w-1/4 py-4 px-1 text-center border-b-2 font-medium text-sm" )} aria-current={tab.current ? "page" : undefined} > - - {tab.name} ({tab.total}) - - {tab.current && ( - { - e.preventDefault(); - e.stopPropagation(); - setTabs( - tabs.map((tab) => - tab.current - ? { - ...tab, - order: tab.order === "ASC" ? "DESC" : "ASC", - } - : { ...tab } - ) - ); - sortUserTabItems( - tab.name, - tab.order === "ASC" ? "DESC" : "ASC" - ); - }} - /> - )} + {tab.name} ({tab.total}) ))}