I am trying to display a message based on user activity, the message changes based on how many users came back in the payload others. The following code works but it is bulky and feels off somehow.
What I'm doing:
Less than 3: “Along with Billy Bob and Tom Thomason.”
Exactly 3: “Along with Billy Bob, Tom Thomason, and Mary Maryland.”
Greater than 3: “Along with Billy Bob, Tom Thomason, and 3 others.”
const handleActivitySummary = useCallback(
(verb, others) => {
if (verb === "SHARED_POST") {
return "shared a post";
} else {
const userJoined = verb === "MEMBER_ADDED";
let summary;
userJoined
? (summary = `has joined ${post.slug}`)
: (summary = `has left ${post.slug}`);
if (others && others.length < 3) {
summary += ` along with ${others
.map((user) => user.full_name)
.join(", ")
.replace(/, ([^,]*)$/, " and $1")}`;
}
if (others && others.length === 3) {
summary += ` along with ${others
.map((user) => user.full_name)
.join(", ")
.replace(/, ([^,]*)$/, ", and $1")}`;
}
if (others && others.length > 3) {
const newArray = others.slice(0, 3);
const usersLeft = others.length - newArray.length;
summary += ` along with ${newArray
.map((user) => user.full_name)
.join(", ")} and ${usersLeft} ${pluralize(usersLeft, "other")}`;
}
return summary;
}
},
[post]
);
You can try solving this by writing a custom Javascript helper method like below
"use strict";
const getSummary = (memberNames) => {
const memberCount = memberNames.length;
const statement = `along with `.concat(memberNames.slice(0, 3).join(", "));
if (memberCount > 0 && memberCount <= 3) {
return statement.replace(/, ([^,]*)$/, " and $1");
}
if (memberCount > 3) {
return statement.replace(/, ([^,]*)$/, "").concat(` and ${memberCount - 2} others`);
}
return "";
};
console.log(getSummary([]));
console.log(getSummary(["Alice"]));
console.log(getSummary(["Alice", "Bob"]));
console.log(getSummary(["Alice", "Bob", "Cameron"]));
console.log(getSummary(["Alice", "Bob", "Cameron", "Dion"]));