tag based filter

apps/host/src/components/modules/challenges/challenge-grid/challenge-filter.tsx

@@ -6,6 +6,7 @@ import { contributors } from '@fmc/data/content';
 import { OptionType } from '@fmc/data/types';
 import { Difficulties } from '@fmc/data/constants';
 import { Search } from 'lucide-react';
+import { ETag } from '../../../../../../../shared/data/types/challenge';
 
 interface Props {
   searchInput: string;
@@ -15,6 +16,9 @@ interface Props {
   setOptionSelected: React.Dispatch<React.SetStateAction<OptionType[] | []>>;
   selectedDifficulties: OptionType[] | [];
   setSelectedDifficulties: React.Dispatch<React.SetStateAction<OptionType[] | []>>;
+  setSelectedChallengesByTags: React.Dispatch<React.SetStateAction<ETag[] | []>>;
+  isSegmentBtn1: boolean;
+  setIsSegmentBtn1: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 const ChallengeFilters = ({
@@ -25,6 +29,9 @@ const ChallengeFilters = ({
   selectedDifficulties,
   setSelectedDifficulties,
   links,
+  setSelectedChallengesByTags,
+  isSegmentBtn1,
+  setIsSegmentBtn1,
 }: Props) => {
   const DeveloperList = useMemo(() => {
     const developerList = new Map();
@@ -40,7 +47,6 @@ const ChallengeFilters = ({
     });
     return data;
   }, []);
-
   return (
     <div className={styles.filterOptionWrapper}>
       <div className={styles.searchInputWrapper}>
@@ -67,7 +73,28 @@ const ChallengeFilters = ({
         optionSelected={selectedDifficulties}
         setOptionSelected={(val: OptionType[]) => setSelectedDifficulties(val)}
       />
-
+      <div className={styles.customSegment}>
+        <button
+          data-active={isSegmentBtn1 ? true : false}
+          className={styles.segmentBtn1}
+          onClick={() => {
+            setIsSegmentBtn1(true);
+            setSelectedChallengesByTags([ETag?.interview]);
+          }}
+        >
+          Interview
+        </button>
+        <button
+          data-active={!isSegmentBtn1 ? true : false}
+          className={styles.segmentBtn2}
+          onClick={() => {
+            setIsSegmentBtn1(false);
+            setSelectedChallengesByTags([ETag?.all]);
+          }}
+        >
+          All
+        </button>
+      </div>
       <div className={styles.filterByTechWrapper}>
         {links.map((link) => (
           <Link to={`/${link.tech}`} key={link.tech}>

apps/host/src/components/modules/challenges/challenge-grid/challenge-grid.module.scss

@@ -1,14 +1,14 @@
 .filterOptionWrapper {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
   gap: 1rem;
+  position: relative;
   margin: 2rem 0;
 }
 
 .searchInputWrapper {
   position: relative;
   height: 35px;
-
   .searchInput {
     outline: none;
     padding: 0.5rem 1rem;
@@ -168,3 +168,33 @@
     color: orangered;
   }
 }
+.customSegment {
+  display: flex;
+  justify-self: flex-start;
+  width: 70%;
+  border: 2px solid #ccc;
+}
+.segmentBtn1 {
+  background-color: #cecdcd;
+  width: 50%;
+  border: none;
+  &[data-active='true'] {
+    background-color: white;
+    border: none;
+    padding: 0px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+}
+
+.segmentBtn2 {
+  background-color: #cecdcd;
+  border: none;
+  width: 50%;
+  &[data-active='true'] {
+    background-color: white;
+    padding: 0px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+}

apps/host/src/components/modules/challenges/challenge-grid/challenge-grid.tsx

@@ -5,6 +5,7 @@ import Challenge from './challenge';
 import styles from './challenge-grid.module.scss';
 import { getChallengesByid } from '../../../../../../../shared/data/utils/challenges.helper';
 import ChallengeFilters from './challenge-filter';
+import { ETag } from '../../../../../../../shared/data/types/challenge';
 
 interface Props {
   challenges: IChallenge[];
@@ -17,6 +18,8 @@ function ChallengeGrid({ challenges, linkPrefix, links }: Props) {
   const [filteredChallenges, setFilteredChallenges] = useState(challenges);
   const [optionSelected, setOptionSelected] = useState<OptionType[]>([]);
   const [selectedDifficulties, setSelectedDifficulties] = useState<OptionType[]>([]);
+  const [selectedChallengesByTags, setSelectedChallengesByTags] = useState<ETag[]>([]);
+  const [isSegmentBtn1, setIsSegmentBtn1] = useState(false);
 
   useEffect(() => {
     setFilteredChallenges(() =>
@@ -25,14 +28,21 @@ function ChallengeGrid({ challenges, linkPrefix, links }: Props) {
         title: searchInput,
         contributors: optionSelected,
         difficulties: selectedDifficulties,
+        tags: selectedChallengesByTags, // Convert OptionType[] to ETag[]
       })
     );
 
     if (!searchInput && !optionSelected && !selectedDifficulties) {
       setFilteredChallenges(challenges);
     }
-  }, [challenges, searchInput, optionSelected, selectedDifficulties]);
-
+  }, [
+    challenges,
+    searchInput,
+    optionSelected,
+    selectedDifficulties,
+    isSegmentBtn1,
+    selectedChallengesByTags,
+  ]);
   return (
     <div className={styles.container}>
       <ChallengeFilters
@@ -43,6 +53,9 @@ function ChallengeGrid({ challenges, linkPrefix, links }: Props) {
         setOptionSelected={setOptionSelected}
         selectedDifficulties={selectedDifficulties}
         setSelectedDifficulties={setSelectedDifficulties}
+        setSelectedChallengesByTags={setSelectedChallengesByTags}
+        isSegmentBtn1={isSegmentBtn1}
+        setIsSegmentBtn1={setIsSegmentBtn1}
       />
 
       {filteredChallenges.length ? (

shared/data/content/js-challenges.ts

@@ -1,4 +1,4 @@
-import { EDifficulty, type IChallenge } from '../types/challenge';
+import { EDifficulty, ETag, type IChallenge } from '../types/challenge';
 import { sortChallengesByDifficulty } from '../utils/challenges.helper';
 
 const challenges: Map<string, IChallenge> = new Map([
@@ -204,7 +204,7 @@ const challenges: Map<string, IChallenge> = new Map([
       link: 'MadStory_generator/',
       difficulty: EDifficulty.Easy,
       developer: 'hritik',
-      tags: [],
+      tags: [ETag.interview],
     },
   ],
   [

shared/data/types/challenge.ts

@@ -5,6 +5,10 @@ export const enum EDifficulty {
   Medium = 'medium',
   Hard = 'hard',
 }
+export const enum ETag {
+  interview = 'interview',
+  all = 'all',
+}
 
 export interface IChallenge {
   title: string;
@@ -13,7 +17,7 @@ export interface IChallenge {
   developer: string;
   contributors?: string[];
   youtube?: string;
-  tags?: string[];
+  tags?: ETag[] | [];
   isNew?: boolean;
   longLink?: string;
 }
@@ -23,4 +27,5 @@ export interface IGetChallengesByid {
   title: string;
   contributors: OptionType[];
   difficulties: OptionType[];
+  tags: ETag[] | [];
 }

shared/data/utils/challenges.helper.ts

@@ -1,5 +1,5 @@
 import { EDifficulty, IChallenge, OptionType } from '../types';
-import { IGetChallengesByid } from '../types/challenge';
+import { ETag, IGetChallengesByid } from '../types/challenge';
 
 const difficultyOrder = [EDifficulty.Easy, EDifficulty.Medium, EDifficulty.Hard];
 
@@ -71,17 +71,26 @@ export function getChallengesByDifficulties(challenges: IChallenge[], difficulti
   const difficultyValues = difficulties.map((difficulty) => difficulty.value);
   return challenges.filter((challenge) => difficultyValues.includes(challenge.difficulty));
 }
+export function getChallengesByTags(challenges: IChallenge[], tags: ETag[]) {
+  if (!tags || tags.length === 0) return challenges;
+  return challenges.filter((challenge) => {
+    if (!challenge.tags) return false;
+    return tags.some((tag: ETag) => (challenge.tags as ETag[])?.includes(tag));
+  });
+}
 
 export function getChallengesByid({
   challenges,
   title,
   contributors,
   difficulties,
+  tags,
 }: IGetChallengesByid) {
   if (
     (!title || title.length === 0) &&
     (!contributors || contributors.length === 0) &&
-    (!difficulties || difficulties.length === 0)
+    (!difficulties || difficulties.length === 0) &&
+    (!tags || tags.length === 0 || (tags?.length == 1 && tags[0] == ETag.all))
   ) {
     return challenges;
   }
@@ -91,6 +100,7 @@ export function getChallengesByid({
   filteredChallenges = getChallengesByContributors(filteredChallenges, contributors);
 
   filteredChallenges = getChallengesByDifficulties(filteredChallenges, difficulties);
+  filteredChallenges = getChallengesByTags(filteredChallenges, tags);
 
   return filteredChallenges;
 }