Skip to content
This repository has been archived by the owner on Aug 7, 2024. It is now read-only.

Commit

Permalink
fix: removed tab sorting (#5742)
Browse files Browse the repository at this point in the history
  • Loading branch information
@eddiejaoude
eddiejaoude authored Mar 31, 2023
1 parent 2709faf commit 5590d64
Show file tree
Hide file tree
Showing 2 changed files with 20 additions and 122 deletions.
40 changes: 17 additions & 23 deletions components/user/UserPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<>
<UserProfile data={userData} BASE_URL={BASE_URL} />
<UserTabs
tabs={tabs}
setTabs={setTabs}
userData={userData}
setUserData={setUserData}
/>
<UserProfile data={data} BASE_URL={BASE_URL} />
<UserTabs tabs={tabs} setTabs={setTabs} />

{tabs.find((tab) => tab.name === "My Links") &&
tabs.find((tab) => tab.name === "My Links").current && (
<UserLinks data={userData} BASE_URL={BASE_URL} />
<UserLinks data={data} BASE_URL={BASE_URL} />
)}
{tabs.find((tab) => tab.name === "Milestones") &&
tabs.find((tab) => tab.name === "Milestones").current && (
<UserMilestones data={userData} />
<UserMilestones data={data} />
)}

{tabs.find((tab) => tab.name === "Testimonials") &&
tabs.find((tab) => tab.name === "Testimonials").current && (
<UserTestimonials data={userData} />
<UserTestimonials data={data} />
)}

{tabs.find((tab) => tab.name === "Events") &&
tabs.find((tab) => tab.name === "Events").current && (
<UserEvents data={userData} />
<UserEvents data={data} />
)}
</>
);
Expand Down
102 changes: 3 additions & 99 deletions components/user/UserTabs.js
View file
Original file line number Diff line number Diff line change
@@ -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();
Expand All @@ -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 (
<div>
<div className="sm:hidden">
Expand Down Expand Up @@ -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}
>
<span>
{tab.name} ({tab.total})
</span>
{tab.current && (
<BiSortAlt2
size="20"
className="hover:text-gray-400"
onClick={(e) => {
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})
</Link>
))}
</nav>
Expand Down

0 comments on commit 5590d64

Please sign in to comment.