new challenge filter enchancement added for host app

apps/host/src/components/common/checkbox/checkbox.tsx

@@ -0,0 +1,23 @@
+interface Props {
+  checked: boolean;
+  setNewChallenge: React.Dispatch<React.SetStateAction<boolean>>;
+  label: string;
+  className: string;
+  containerClass: string;
+}
+const CustomCheckbox = ({ checked, setNewChallenge, label, className, containerClass }: Props) => {
+  return (
+    <div className={containerClass}>
+      <input
+        className={className}
+        type="checkbox"
+        id="checkbox"
+        name="checkbox"
+        onChange={(e) => setNewChallenge(e.target.checked)}
+        checked={checked}
+      />
+      <label htmlFor="checkbox">{label}</label>
+    </div>
+  );
+};
+export default CustomCheckbox;

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

@@ -6,6 +6,7 @@ import { contributors } from '@fmc/data/content';
 import { ETag, OptionType } from '@fmc/data/types';
 import { Difficulties } from '@fmc/data/constants';
 import { Search } from 'lucide-react';
+import CustomCheckbox from '@/components/common/checkbox/checkbox';
 
 interface Props {
   searchInput: string;
@@ -18,6 +19,8 @@ interface Props {
   setSelectedChallengesByTags: React.Dispatch<React.SetStateAction<ETag[] | []>>;
   isSegmentBtn1: boolean;
   setIsSegmentBtn1: React.Dispatch<React.SetStateAction<boolean>>;
+  setNewChallenge: React.Dispatch<React.SetStateAction<boolean>>;
+  newChallenge: boolean;
 }
 
 const ChallengeFilters = ({
@@ -31,6 +34,8 @@ const ChallengeFilters = ({
   setSelectedChallengesByTags,
   isSegmentBtn1,
   setIsSegmentBtn1,
+  setNewChallenge,
+  newChallenge,
 }: Props) => {
   const DeveloperList = useMemo(() => {
     const developerList = new Map();
@@ -72,6 +77,13 @@ const ChallengeFilters = ({
         optionSelected={selectedDifficulties}
         setOptionSelected={(val: OptionType[]) => setSelectedDifficulties(val)}
       />
+      <CustomCheckbox
+        className={styles.checkbox}
+        checked={newChallenge}
+        setNewChallenge={setNewChallenge}
+        label="New Challenges"
+        containerClass={styles.checkboxContainer}
+      />
       <div className={styles.customSegment}>
         <button
           data-active={isSegmentBtn1 ? true : false}

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

@@ -198,3 +198,18 @@
     cursor: pointer;
   }
 }
+.checkboxContainer {
+  width: fit-content;
+  display: flex;
+  align-items: center;
+  column-gap: 0.3rem;
+  .checkbox {
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+  }
+  label {
+    cursor: pointer;
+  }
+  cursor: pointer;
+}

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

@@ -19,6 +19,7 @@ function ChallengeGrid({ challenges, linkPrefix, links }: Props) {
   const [selectedDifficulties, setSelectedDifficulties] = useState<OptionType[]>([]);
   const [selectedChallengesByTags, setSelectedChallengesByTags] = useState<ETag[]>([]);
   const [isSegmentBtn1, setIsSegmentBtn1] = useState(false);
+  const [newChallenge, setNewChallenge] = useState<boolean>(false);
 
   useEffect(() => {
     setFilteredChallenges(() =>
@@ -28,10 +29,11 @@ function ChallengeGrid({ challenges, linkPrefix, links }: Props) {
         contributors: optionSelected,
         difficulties: selectedDifficulties,
         tags: selectedChallengesByTags, // Convert OptionType[] to ETag[]
+        newChallenge,
       })
     );
 
-    if (!searchInput && !optionSelected && !selectedDifficulties) {
+    if (!searchInput && !optionSelected && !selectedDifficulties && !newChallenge) {
       setFilteredChallenges(challenges);
     }
   }, [
@@ -41,6 +43,7 @@ function ChallengeGrid({ challenges, linkPrefix, links }: Props) {
     selectedDifficulties,
     isSegmentBtn1,
     selectedChallengesByTags,
+    newChallenge,
   ]);
   return (
     <div className={styles.container}>
@@ -55,6 +58,8 @@ function ChallengeGrid({ challenges, linkPrefix, links }: Props) {
         setSelectedChallengesByTags={setSelectedChallengesByTags}
         isSegmentBtn1={isSegmentBtn1}
         setIsSegmentBtn1={setIsSegmentBtn1}
+        newChallenge={newChallenge}
+        setNewChallenge={setNewChallenge}
       />
 
       {filteredChallenges.length ? (

shared/data/types/challenge.ts

@@ -28,4 +28,5 @@ export interface IGetChallengesByid {
   contributors: OptionType[];
   difficulties: OptionType[];
   tags: ETag[] | [];
+  newChallenge: boolean;
 }

shared/data/utils/challenges.helper.ts

@@ -79,20 +79,25 @@ export function getChallengesByTags(challenges: IChallenge[], tags: ETag[], isRe
     return tags.some((tag: ETag) => (challenge.tags as ETag[])?.includes(tag));
   });
 }
-
+export function getChallengesByNewChallenge(challenges: IChallenge[], newChallenge: boolean) {
+  if (!newChallenge) return challenges;
+  return challenges.filter(({ isNew }) => isNew);
+}
 export function getChallengesByid({
   challenges,
   title,
   contributors,
   difficulties,
   tags,
+  newChallenge,
 }: IGetChallengesByid) {
   const isResetTags = !tags || tags.length === 0 || (tags?.length == 1 && tags[0] == ETag.all);
   if (
     (!title || title.length === 0) &&
     (!contributors || contributors.length === 0) &&
     (!difficulties || difficulties.length === 0) &&
-    isResetTags
+    isResetTags &&
+    !newChallenge
   ) {
     return challenges;
   }
@@ -102,7 +107,9 @@ export function getChallengesByid({
   filteredChallenges = getChallengesByContributors(filteredChallenges, contributors);
 
   filteredChallenges = getChallengesByDifficulties(filteredChallenges, difficulties);
+
   filteredChallenges = getChallengesByTags(filteredChallenges, tags, isResetTags);
 
+  filteredChallenges = getChallengesByNewChallenge(filteredChallenges, newChallenge);
   return filteredChallenges;
 }