From 661aa7a771989214e4573a8ee49f05bbe9274672 Mon Sep 17 00:00:00 2001
From: DeanYona <deangy10@gmail.com>
Date: Sun, 21 Apr 2024 20:32:03 +0300
Subject: [PATCH 1/2] organize-filtersWindow

---
 components/Projects/FiltersBar/FiltersBar.tsx | 64 +++------------
 .../Projects/FiltersBar/FiltersWindow.tsx     | 79 +++++++++++++++++++
 2 files changed, 90 insertions(+), 53 deletions(-)
 create mode 100644 components/Projects/FiltersBar/FiltersWindow.tsx

diff --git a/components/Projects/FiltersBar/FiltersBar.tsx b/components/Projects/FiltersBar/FiltersBar.tsx
index 22aa254..fb1ad0e 100644
--- a/components/Projects/FiltersBar/FiltersBar.tsx
+++ b/components/Projects/FiltersBar/FiltersBar.tsx
@@ -11,6 +11,7 @@ import Link from 'next/link';
 import { ProjectPaginationFilter } from '@/types/project';
 import { useTranslations } from 'next-intl';
 import { SearchInput } from '@/components/Common/Inputs/SearchInput';
+import FiltersWindow from './FiltersWindow';
 
 interface FiltersBarProps {
   filters: ProjectFilter[];
@@ -115,59 +116,16 @@ const FiltersBar: React.FC<FiltersBarProps> = ({
                 height={27}
               />
               {/* settings window on burger click */}
-              {toggleFiltersWindow ? (
-                <>
-                  <div
-                    ref={filterRef}
-                    className="z-[101] absolute -bottom-[23.5rem] md:-bottom-[16.75rem] right-2 px-[34px] py-[27px] rounded-md border border-blue-600 min-w-[300px] md:min-w-0 md:w-[863px] min-h-[260px] md:h-[209px] p-5 bg-gray-50 dark:bg-gray-600"
-                  >
-                    <div className="flex flex-col gap-[22px]">
-                      <h3 className="text-base font-bold leading-normal">
-                        {t('projectsFilters')}{' '}
-                      </h3>
-                      {/* sort by ProjectPaginationFilter (sortoptions,sortoptionsmapper) */}
-                      <div className="flex gap-4 md:gap-[26px] justify-center md:justify-normal md:items-center">
-                        <span className="body-roman text-gray-500 dark:text-gray-400 w-[60px] max-w-[60px]">
-                          {t('filters')}
-                        </span>
-                        <div className="flex gap-[18px] md:gap-10 flex-wrap w-full">
-                          {sortOptions.map(sortOption => (
-                            <Radiobox
-                              key={sortOption}
-                              id={sortOption}
-                              value={sortOption}
-                              checked={selectedSortOption === sortOption}
-                              onChange={handleCategoryOptionSelection}
-                            />
-                          ))}
-                        </div>
-                      </div>
-                      {/* sort by set languages */}
-                      <div className="flex gap-4 md:gap-[26px] justify-center md:justify-normal md:items-center">
-                        <span className="body-roman text-gray-500 dark:text-gray-400 w-[60px] max-w-[60px] leading-tight">
-                          {t('tags')}
-                        </span>
-                        <div className="flex gap-2 flex-wrap w-full">
-                          {filters.map(filter => (
-                            <FilterTagBtn
-                              key={filter.name}
-                              btnText={filter.name}
-                              toggleIsFilterActive={() =>
-                                handleFilterOptionChange(filter)
-                              }
-                              isSelected={filter.isActive}
-                            />
-                          ))}
-                        </div>
-                      </div>
-                    </div>
-                    <div className="absolute -top-[0.75rem] right-[10px] -mb-[1px] inline-block overflow-hidden">
-                      <div className="h-3 w-[18px] origin-bottom-left rotate-45 transform border border-blue-600 bg-gray-50 dark:bg-gray-500 "></div>
-                    </div>
-                  </div>
-                  <div className="fixed z-[100] top-0 left-0 w-full h-screen opacity-[30%] bg-gray-900" />
-                </>
-              ) : null}
+              {toggleFiltersWindow && (
+                <FiltersWindow
+                  filterRef={filterRef}
+                  sortOptions={sortOptions}
+                  selectedSortOption={selectedSortOption}
+                  handleCategoryOptionSelection={handleCategoryOptionSelection}
+                  filters={filters}
+                  handleFilterOptionChange={handleFilterOptionChange}
+                />
+              )}
             </div>
             <SearchInput
               onChange={setSearchByProjectName}
diff --git a/components/Projects/FiltersBar/FiltersWindow.tsx b/components/Projects/FiltersBar/FiltersWindow.tsx
new file mode 100644
index 0000000..ff9fd4a
--- /dev/null
+++ b/components/Projects/FiltersBar/FiltersWindow.tsx
@@ -0,0 +1,79 @@
+import Radiobox from '@/components/utils/Radiobox';
+import React, { Ref } from 'react';
+import { useTranslations } from 'next-intl';
+import FilterTagBtn from './FilterTagBtn';
+import { ProjectFilter } from '@/types';
+
+interface FiltersWindow {
+  filterRef: Ref<HTMLDivElement>;
+  sortOptions: string[];
+  selectedSortOption: any;
+  handleCategoryOptionSelection: any;
+  filters: ProjectFilter[];
+  handleFilterOptionChange: any;
+}
+
+const FiltersWindow = ({
+  filterRef,
+  sortOptions,
+  selectedSortOption,
+  handleCategoryOptionSelection,
+  filters,
+  handleFilterOptionChange,
+}: FiltersWindow) => {
+  const t = useTranslations('Projects.FiltersBar');
+
+  return (
+    <div>
+      <div
+        ref={filterRef}
+        className="z-[101] absolute -bottom-[23.5rem] md:-bottom-[16.75rem] right-2 px-[34px] py-[27px] rounded-md border border-blue-600 min-w-[300px] md:min-w-0 md:w-[863px] min-h-[260px] md:h-[209px] p-5 bg-gray-50 dark:bg-gray-600"
+      >
+        <div className="flex flex-col gap-[22px]">
+          <h3 className="text-base font-bold leading-normal">
+            {t('projectsFilters')}{' '}
+          </h3>
+          {/* sort by ProjectPaginationFilter (sortoptions,sortoptionsmapper) */}
+          <div className="flex gap-4 md:gap-[26px] justify-center md:justify-normal md:items-center">
+            <span className="body-roman text-gray-500 dark:text-gray-400 w-[60px] max-w-[60px]">
+              {t('filters')}
+            </span>
+            <div className="flex gap-[18px] md:gap-10 flex-wrap w-full">
+              {sortOptions.map(sortOption => (
+                <Radiobox
+                  key={sortOption}
+                  id={sortOption}
+                  value={sortOption}
+                  checked={selectedSortOption === sortOption}
+                  onChange={handleCategoryOptionSelection}
+                />
+              ))}
+            </div>
+          </div>
+          {/* sort by set languages */}
+          <div className="flex gap-4 md:gap-[26px] justify-center md:justify-normal md:items-center">
+            <span className="body-roman text-gray-500 dark:text-gray-400 w-[60px] max-w-[60px] leading-tight">
+              {t('tags')}
+            </span>
+            <div className="flex gap-2 flex-wrap w-full">
+              {filters.map(filter => (
+                <FilterTagBtn
+                  key={filter.name}
+                  btnText={filter.name}
+                  toggleIsFilterActive={() => handleFilterOptionChange(filter)}
+                  isSelected={filter.isActive}
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+        <div className="absolute -top-[0.75rem] right-[10px] -mb-[1px] inline-block overflow-hidden">
+          <div className="h-3 w-[18px] origin-bottom-left rotate-45 transform border border-blue-600 bg-gray-50 dark:bg-gray-500 "></div>
+        </div>
+      </div>
+      <div className="fixed z-[100] top-0 left-0 w-full h-screen opacity-[30%] bg-gray-900" />
+    </div>
+  );
+};
+
+export default FiltersWindow;

From 2b7a6e85c50845ae773d2bb0c3d97aeba3d01a04 Mon Sep 17 00:00:00 2001
From: DeanYona <deangy10@gmail.com>
Date: Tue, 23 Apr 2024 00:51:26 +0300
Subject: [PATCH 2/2] fix-tags-toggling

---
 app/[locale]/projects/page.tsx                  | 17 ++++++++++++++---
 .../Projects/FiltersBar/FilterBtnsGroup.tsx     |  8 ++++----
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/app/[locale]/projects/page.tsx b/app/[locale]/projects/page.tsx
index 28001d2..805503f 100644
--- a/app/[locale]/projects/page.tsx
+++ b/app/[locale]/projects/page.tsx
@@ -42,12 +42,23 @@ const ProjectsPage = () => {
     setLoading(true);
     const existingTags = structuredClone(tags);
 
-    // we set tag active to true
-    for (const exisitingTag of existingTags) {
+    // we set tags chosen to active and all the others to not
+    if (existingTags.every(value => value.isActive)) {
+      existingTags.forEach(existingTag => {
+        existingTag.isActive = false;
+      });
+    }
+
+    existingTags.forEach(exisitingTag => {
       if (exisitingTag.name === tag.name) {
         exisitingTag.isActive = !exisitingTag.isActive;
-        break;
       }
+    });
+
+    if (existingTags.every(value => !value.isActive)) {
+      existingTags.forEach(existingTag => {
+        existingTag.isActive = true;
+      });
     }
 
     setTags(existingTags);
diff --git a/components/Projects/FiltersBar/FilterBtnsGroup.tsx b/components/Projects/FiltersBar/FilterBtnsGroup.tsx
index 8c5804e..4de1d13 100644
--- a/components/Projects/FiltersBar/FilterBtnsGroup.tsx
+++ b/components/Projects/FiltersBar/FilterBtnsGroup.tsx
@@ -12,9 +12,9 @@ const FilterBtnsGroup = ({
   filters,
   handleFilterOptionChange,
 }: FilterBtnsGroupProps) => {
-  const handleBtnFilterClick = (filter: ProjectFilter) => {
-    handleFilterOptionChange(filter);
-  };
+  // const handleBtnFilterClick = (filter: ProjectFilter) => {
+  //   handleFilterOptionChange(filter);
+  // };
 
   return (
     <div className="flex gap-2 flex-wrap">
@@ -22,7 +22,7 @@ const FilterBtnsGroup = ({
         <FilterBtn
           key={filter.name}
           filter={filter}
-          onBtnClick={() => handleBtnFilterClick(filter)}
+          onBtnClick={() => handleFilterOptionChange(filter)}
         />
       ))}
     </div>