✨ feat(profile): shuffle randomize showing pf and enable search tag

myanmar-software-engineers · Oct 21, 2023 · 0e24296 · 0e24296
1 parent 0a7ac8d
commit 0e24296
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 44 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -33,6 +33,7 @@
     "contentlayer": "^0.3.4",
     "cz-customizable": "^7.0.0",
     "date-fns": "^2.30.0",
+    "fast-shuffle": "^6.0.1",
     "framer-motion": "^10.16.4",
     "husky": "^8.0.3",
     "lint-staged": "^15.0.2",

diff --git a/src/components/Profile/ProfileCardList/ProfileCardList.tsx b/src/components/Profile/ProfileCardList/ProfileCardList.tsx
@@ -4,17 +4,18 @@ import SpacingDivider from "@/components/Common/SpacingDivider/SpacingDivider";
 import TitleText from "@/components/Common/TitleText/TitleText";
 import SquareBox from "@/components/Ui/SquareBox/SquareBox";
 import { cn, generateColor } from "@/utils";
-import { profileHelperService } from "@/utils/profileHelper";
+import { checkIsFoundTag, profileHelperService } from "@/utils/profileHelper";
 import { Profile } from "contentlayer/generated";
 import Image from "next/image";
 import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
+import { IoPeople } from "react-icons/io5";
 
 type TPropsProfileCardList = {
   profiles: Profile[];
 };
 
-const Tag = ({ tag }: { tag: string }) => {
+const Tag = ({ tag, searchTag }: { tag: string; searchTag: string }) => {
   const searchParams = useSearchParams();
   const router = useRouter();
 
@@ -24,8 +25,10 @@ const Tag = ({ tag }: { tag: string }) => {
   return (
     <TitleText
       className={cn(
-        "inline-block cursor-pointer text-[10px] px-2 py-1 rounded-full mb-1 mr-[4px] bg-opacity-50 hover:bg-opacity-80",
-        generateColor()
+        "inline-block cursor-pointer text-[10px] px-2 py-1 rounded-full mb-1 mr-[5px] bg-opacity-50 hover:bg-opacity-90",
+        generateColor(),
+        checkIsFoundTag(tag, searchTag) &&
+          "bg-green-600 bg-opacity-100 outline-dashed outline-2 outline-offset-2 "
       )}
       key={tag}
       tag="span"
@@ -52,10 +55,15 @@ const ProfileCardList = ({ profiles }: TPropsProfileCardList) => {
     <>
       <div>
         {uniqueTags.map((tag) => (
-          <Tag key={tag} tag={tag} />
+          <Tag key={tag} tag={tag} searchTag={searchTag} />
         ))}
       </div>
 
+      <TitleText tag="h3" className="text-sm mt-2">
+        <IoPeople className="inline-block -top-[2px] mx-2 relative" />
+        Total Profiles :{filteredProfiles.length}
+      </TitleText>
+
       <SpacingDivider size="lg" />
 
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5">
@@ -96,8 +104,8 @@ const ProfileCardList = ({ profiles }: TPropsProfileCardList) => {
                     </div>
                   </div>
                   <div className="mb-2">
-                    {profile.tags?.slice(0, 8)?.map((tag) => (
-                      <Tag key={tag} tag={tag} />
+                    {profile.tags?.map((tag) => (
+                      <Tag key={tag} tag={tag} searchTag={searchTag} />
                     ))}
                   </div>
                   <TitleText

diff --git a/src/utils/profileHelper.ts b/src/utils/profileHelper.ts
@@ -1,4 +1,5 @@
 import { Profile } from "contentlayer/generated";
+import { shuffle } from "fast-shuffle";
 
 export const getUniqueTags = (tags: string[]) => {
   const uniqueTags: string[] = [];
@@ -23,45 +24,15 @@ export const profileHelperService = (
     profile.tags = profileTags;
     tags.push(profileTags);
 
-    if (!!searchTag) {
-      let isAlreayIncludedInProfile = false;
-      profileTags.forEach((pTag) => {
-        const profileTag = pTag.toLowerCase();
-        const sTagLowerCase = searchTag.toLowerCase();
+    let isAlreadyIncludedInProfile = false;
 
-        if (isAlreayIncludedInProfile) return;
+    if (!!searchTag && !isAlreadyIncludedInProfile) {
+      profileTags.forEach((pTag) => {
+        if (isAlreadyIncludedInProfile) return;
 
-        if (profileTag === sTagLowerCase) {
-          // exact match
-          foundProfiles.push(profile);
-          isAlreayIncludedInProfile = true;
-        } else if (
-          profileTag === sTagLowerCase + "js" ||
-          profileTag === sTagLowerCase + ".js"
-        ) {
-          // try add js or .js extension to search tag
-          foundProfiles.push(profile);
-          isAlreayIncludedInProfile = true;
-        } else if (
-          profileTag === sTagLowerCase.replace(/\.js$/, "") ||
-          profileTag === sTagLowerCase.replace(/js$/, "")
-        ) {
-          // try remove js or .js extension from search tag
+        if (checkIsFoundTag(pTag, searchTag)) {
           foundProfiles.push(profile);
-          isAlreayIncludedInProfile = true;
-        } else if (
-          profileTag + "js" === sTagLowerCase ||
-          profileTag + ".js" === sTagLowerCase
-        ) {
-          foundProfiles.push(profile);
-          isAlreayIncludedInProfile = true;
-        } else if (
-          profileTag === sTagLowerCase.replace(/\.js$/, "") + "js" ||
-          profileTag === sTagLowerCase.replace(/js$/, "") + ".js"
-        ) {
-          // try swap .js and js extension
-          foundProfiles.push(profile);
-          isAlreayIncludedInProfile = true;
+          isAlreadyIncludedInProfile = true;
         }
       });
     }
@@ -70,7 +41,37 @@ export const profileHelperService = (
   const uniqueTags = getUniqueTags(tags.flat(1));
 
   return {
-    foundProfiles: !!searchTag ? foundProfiles : profiles,
+    foundProfiles: shuffle(!!searchTag ? foundProfiles : profiles),
     uniqueTags,
   };
 };
+
+export const checkIsFoundTag = (profileTag: string, searchTag: string) => {
+  const sTagLowerCase = searchTag.toLowerCase();
+  const pTagLowerCase = profileTag.toLowerCase();
+
+  const isExactMatch = pTagLowerCase === searchTag;
+  if (isExactMatch) return true;
+
+  const isWithJsOrDotJSMatch =
+    pTagLowerCase === sTagLowerCase + "js" ||
+    pTagLowerCase === sTagLowerCase + ".js";
+  if (isWithJsOrDotJSMatch) return true;
+
+  const isRemoveJsOrDotJsExtensionMatch =
+    pTagLowerCase === sTagLowerCase.replace(/\.js$/, "") ||
+    pTagLowerCase === sTagLowerCase.replace(/js$/, "");
+  if (isRemoveJsOrDotJsExtensionMatch) return true;
+
+  const isAddJsOrDotJsToProfileTagMatch =
+    pTagLowerCase + "js" === sTagLowerCase ||
+    pTagLowerCase + ".js" === sTagLowerCase;
+  if (isAddJsOrDotJsToProfileTagMatch) return true;
+
+  const isTrySwapDotJsAndJsExtMatch =
+    pTagLowerCase === sTagLowerCase.replace(/\.js$/, "") + "js" ||
+    pTagLowerCase === sTagLowerCase.replace(/js$/, "") + ".js";
+  if (isTrySwapDotJsAndJsExtMatch) return true;
+
+  return false;
+};