Host: Tags refactor

sadanandpai · Jul 22, 2024 · 3b967a5 · 3b967a5
1 parent 487d98a
commit 3b967a5
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 70 deletions.
diff --git a/apps/host/src/components/common/tags/tags.module.scss b/apps/host/src/components/common/tags/tags.module.scss
@@ -0,0 +1,22 @@
+.segment {
+  display: flex;
+  justify-self: flex-start;
+  width: 70%;
+  border: 2px solid #ccc;
+}
+
+.segmentBtn {
+  background-color: var(--shadow-footer);
+  width: 50%;
+  border: none;
+  text-transform: capitalize;
+
+  &[data-active='true'] {
+    background-color: rgb(75, 75, 255);
+    border: none;
+    padding: 10px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+    color: white;
+  }
+}
diff --git a/apps/host/src/components/common/tags/tags.tsx b/apps/host/src/components/common/tags/tags.tsx
@@ -0,0 +1,30 @@
+import { ETag } from '@fmc/data/types';
+import styles from './tags.module.scss';
+
+interface Props {
+  tag: ETag;
+  setTag: React.Dispatch<React.SetStateAction<ETag>>;
+  setSelectedChallengesByTags: React.Dispatch<React.SetStateAction<ETag[] | []>>;
+}
+
+function Tags({ tag, setTag, setSelectedChallengesByTags }: Props) {
+  return (
+    <div className={styles.segment}>
+      {Object.entries(ETag).map(([key, value]) => (
+        <button
+          data-active={tag === value}
+          className={styles.segmentBtn}
+          key={key}
+          onClick={() => {
+            setTag(value);
+            setSelectedChallengesByTags([value]);
+          }}
+        >
+          {value}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export default Tags;
diff --git a/apps/host/src/components/modules/challenges/challenge-grid/challenge-filter.tsx b/apps/host/src/components/modules/challenges/challenge-grid/challenge-filter.tsx
@@ -7,6 +7,7 @@ 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';
+import Tags from '@/components/common/tags/tags';
 
 interface Props {
   searchInput: string;
@@ -16,9 +17,9 @@ interface Props {
   setOptionSelected: React.Dispatch<React.SetStateAction<OptionType[] | []>>;
   selectedDifficulties: OptionType[] | [];
   setSelectedDifficulties: React.Dispatch<React.SetStateAction<OptionType[] | []>>;
+  tag: ETag;
+  setTag: React.Dispatch<React.SetStateAction<ETag>>;
   setSelectedChallengesByTags: React.Dispatch<React.SetStateAction<ETag[] | []>>;
-  isSegmentBtn1: boolean;
-  setIsSegmentBtn1: React.Dispatch<React.SetStateAction<boolean>>;
   setNewChallenge: React.Dispatch<React.SetStateAction<boolean>>;
   newChallenge: boolean;
 }
@@ -31,9 +32,9 @@ const ChallengeFilters = ({
   selectedDifficulties,
   setSelectedDifficulties,
   links,
+  tag,
+  setTag,
   setSelectedChallengesByTags,
-  isSegmentBtn1,
-  setIsSegmentBtn1,
   setNewChallenge,
   newChallenge,
 }: Props) => {
@@ -51,6 +52,7 @@ const ChallengeFilters = ({
     });
     return data;
   }, []);
+
   return (
     <div className={styles.filterOptionWrapper}>
       <div className={styles.searchInputWrapper}>
@@ -84,28 +86,9 @@ const ChallengeFilters = ({
         label="New Challenges"
         containerClass={styles.checkboxContainer}
       />
-      <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>
+
+      <Tags tag={tag} setTag={setTag} setSelectedChallengesByTags={setSelectedChallengesByTags} />
+
       <div className={styles.filterByTechWrapper}>
         {links.map((link) => (
           <Link to={`/${link.tech}`} key={link.tech}>

diff --git a/apps/host/src/components/modules/challenges/challenge-grid/challenge-grid.module.scss b/apps/host/src/components/modules/challenges/challenge-grid/challenge-grid.module.scss
@@ -168,38 +168,7 @@
     color: orangered;
   }
 }
-.customSegment {
-  display: flex;
-  justify-self: flex-start;
-  width: 70%;
-  border: 2px solid #ccc;
-}
-.segmentBtn1 {
-  background-color: var(--shadow-footer);
-  width: 50%;
-  border: none;
-  &[data-active='true'] {
-    background-color: rgb(75, 75, 255);
-    border: none;
-    padding: 10px 20px;
-    border-radius: 5px;
-    cursor: pointer;
-    color: var(--bg-body);
-  }
-}
 
-.segmentBtn2 {
-  background-color: var(--shadow-footer);
-  border: none;
-  width: 50%;
-  &[data-active='true'] {
-    background-color: rgb(75, 75, 255);
-    padding: 10px 20px;
-    border-radius: 2px;
-    cursor: pointer;
-    color: var(--bg-body);
-  }
-}
 .checkboxContainer {
   width: fit-content;
   display: flex;

diff --git a/apps/host/src/components/modules/challenges/challenge-grid/challenge-grid.tsx b/apps/host/src/components/modules/challenges/challenge-grid/challenge-grid.tsx
@@ -24,7 +24,7 @@ function ChallengeGrid({ challenges, linkPrefix, links }: Props) {
   const [selectedChallengesByTags, setSelectedChallengesByTags] = useState<ETag[]>(
     initialFilters.selectedChallengesByTags
   );
-  const [isSegmentBtn1, setIsSegmentBtn1] = useState(initialFilters.isSegmentBtn1);
+  const [tag, setTag] = useState(initialFilters.tag);
   const [newChallenge, setNewChallenge] = useState<boolean>(initialFilters.newChallenge);
 
   useEffect(() => {
@@ -43,7 +43,7 @@ function ChallengeGrid({ challenges, linkPrefix, links }: Props) {
       searchInput,
       optionSelected,
       selectedDifficulties,
-      isSegmentBtn1,
+      tag,
       selectedChallengesByTags,
       newChallenge,
     };
@@ -58,7 +58,7 @@ function ChallengeGrid({ challenges, linkPrefix, links }: Props) {
     searchInput,
     optionSelected,
     selectedDifficulties,
-    isSegmentBtn1,
+    tag,
     selectedChallengesByTags,
     newChallenge,
   ]);
@@ -74,8 +74,8 @@ function ChallengeGrid({ challenges, linkPrefix, links }: Props) {
         selectedDifficulties={selectedDifficulties}
         setSelectedDifficulties={setSelectedDifficulties}
         setSelectedChallengesByTags={setSelectedChallengesByTags}
-        isSegmentBtn1={isSegmentBtn1}
-        setIsSegmentBtn1={setIsSegmentBtn1}
+        tag={tag}
+        setTag={setTag}
         newChallenge={newChallenge}
         setNewChallenge={setNewChallenge}
       />

diff --git a/shared/data/types/challenge.ts b/shared/data/types/challenge.ts
@@ -5,7 +5,8 @@ export const enum EDifficulty {
   Medium = 'medium',
   Hard = 'hard',
 }
-export const enum ETag {
+
+export enum ETag {
   interview = 'interview',
   all = 'all',
 }

diff --git a/shared/data/utils/challenges.helper.ts b/shared/data/utils/challenges.helper.ts
@@ -103,13 +103,9 @@ export function getChallengesByid({
   }
 
   let filteredChallenges = getChallengesByTitle(challenges, title);
-
   filteredChallenges = getChallengesByContributors(filteredChallenges, contributors);
-
   filteredChallenges = getChallengesByDifficulties(filteredChallenges, difficulties);
-
   filteredChallenges = getChallengesByTags(filteredChallenges, tags, isResetTags);
-
   filteredChallenges = getChallengesByNewChallenge(filteredChallenges, newChallenge);
   return filteredChallenges;
 }
@@ -121,17 +117,18 @@ export function filtersHelper() {
       searchInput: parsedFilters.searchInput || '',
       optionSelected: parsedFilters.optionSelected || [],
       selectedDifficulties: parsedFilters.selectedDifficulties || [],
-      isSegmentBtn1: parsedFilters.isSegmentBtn1 || false,
+      tag: parsedFilters.tag || ETag.interview,
       selectedChallengesByTags: parsedFilters.selectedChallengesByTags || [],
       newChallenge: parsedFilters.newChallenge || false,
     };
   }
+
   return {
     searchInput: '',
     optionSelected: [],
     selectedDifficulties: [],
-    isSegmentBtn1: true,
-    selectedChallengesByTags: ['interview'],
+    tag: ETag.interview,
+    selectedChallengesByTags: [ETag.interview],
     newChallenge: false,
   };
 }