From 05879b1790c01a3100f8ab0bcf6daf82d178fa7e Mon Sep 17 00:00:00 2001
From: amirfazel <amirfazel45@gmail.com>
Date: Tue, 28 Nov 2023 01:07:18 +0330
Subject: [PATCH 1/3] feat: added filtering in workshop page

---
 .../src/pages/workshops/WorkshopsPage.jsx     | 47 ++++++++++++++++++-
 .../src/pages/workshops/useWorkshopsPage.js   | 12 +++++
 frontend/src/pages/workshops/workshops.css    | 27 +++++++++++
 package-lock.json                             |  6 +++
 4 files changed, 91 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/pages/workshops/workshops.css
 create mode 100644 package-lock.json

diff --git a/frontend/src/pages/workshops/WorkshopsPage.jsx b/frontend/src/pages/workshops/WorkshopsPage.jsx
index 2cb2c21..0135229 100644
--- a/frontend/src/pages/workshops/WorkshopsPage.jsx
+++ b/frontend/src/pages/workshops/WorkshopsPage.jsx
@@ -1,7 +1,9 @@
+import { blue, red } from "@mui/material/colors";
 import ItemCard from "../../components/item-card/item-card.jsx";
 import Toast from "../../components/toast/Toast.jsx";
 import {Helper} from "../../utils/Helper.js";
 import useWorkshopsPage from "./useWorkshopsPage.js";
+import './workshops.css'
 
 export default function WorkshopsPage() {
 
@@ -12,8 +14,30 @@ export default function WorkshopsPage() {
         toastData,
         setOpenToast,
         openToast,
+        options,
+        filterOption,
+        setFilterOption,
+        fileteredItems,
+        setFileteredItems
     } = useWorkshopsPage()
 
+
+    const handleFilterChange = (option) => {
+            setFilterOption(option)
+
+            if (option == "All Items"){
+                setFileteredItems(parsedItemsList)
+            }
+
+            else if (option == 'Workshops'){
+                setFileteredItems(parsedItemsList?.filter(item => item.isWorkshop))
+            }
+
+            else if (option == 'Presentations'){
+                setFileteredItems(parsedItemsList?.filter(item => !item.isWorkshop))
+            }
+    }
+
     return (
         <section style={{
           display: 'flex',
@@ -27,7 +51,28 @@ export default function WorkshopsPage() {
                 alertType={toastData.type}
                 message={toastData.message}
             />}
-            {parsedItemsList && parsedItemsList.map((e, index) => {
+            <div className="filter-dropdown-container" style={{
+                width: '100%',
+                height: '3rem',
+                display: 'flex',
+                justifyContent: 'center',
+            }}>
+                <select  name="filter" id="" className="filter-dropdown-select"
+                 style={{
+                    width: '75%',
+                    backgroundColor: blue["50"],
+                }}
+                    value={filterOption}
+                    onChange={(e) => handleFilterChange(e.target.value)}
+                >
+                     {options.map((option) => (
+                        <option key={option} value={option}>
+                        {option}
+                        </option>
+                     ))}
+                </select>
+            </div>
+            {fileteredItems && fileteredItems.map((e, index) => {
                 return (
                     <ItemCard
                         key={index}
diff --git a/frontend/src/pages/workshops/useWorkshopsPage.js b/frontend/src/pages/workshops/useWorkshopsPage.js
index 5a4375a..66fb7bd 100644
--- a/frontend/src/pages/workshops/useWorkshopsPage.js
+++ b/frontend/src/pages/workshops/useWorkshopsPage.js
@@ -16,10 +16,16 @@ export default function useWorkshopsPage() {
         setAddToCartResponse,
     } = useAPI()
 
+    const options = ["All Items", "Workshops", "Presentations"]
+
     const [parsedItemsList, setParsedItemsList] = useState()
+    const [fileteredItems, setFileteredItems] = useState()
     const [gridTemplateColumnsValue, setGridTemplateColumnsValue] = useState("")
     const [toastData, setToastData] = useState(false)
     const [openToast, setOpenToast] = useState(false)
+    const [filterOption, setFilterOption] = useState(options[0])
+
+    
 
     useEffect(() => {
         const func = () => {
@@ -92,6 +98,7 @@ export default function useWorkshopsPage() {
             return item
         }).filter(e => e != null)
         setParsedItemsList(parsedData)
+        setFileteredItems(parsedData)
     }, [workshopsData, presentationsData, presenterData, teachersData])
 
     const addToCart = useCallback(({
@@ -111,5 +118,10 @@ export default function useWorkshopsPage() {
         toastData,
         setOpenToast,
         openToast,
+        options,
+        filterOption,
+        setFilterOption,
+        fileteredItems,
+        setFileteredItems
     }
 }
\ No newline at end of file
diff --git a/frontend/src/pages/workshops/workshops.css b/frontend/src/pages/workshops/workshops.css
new file mode 100644
index 0000000..ba075a9
--- /dev/null
+++ b/frontend/src/pages/workshops/workshops.css
@@ -0,0 +1,27 @@
+/* FilterDropdown.css */
+.filter-dropdown-container {
+    margin-bottom: 20px;
+  }
+  
+.filter-dropdown-container label {
+    margin-right: 10px;
+  }
+  
+.filter-dropdown-select {
+    padding: 8px;
+    font-size: 16px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    outline: none;
+    cursor: pointer;
+  }
+  
+.filter-dropdown-select:hover {
+    border-color: #888;
+  }
+  
+.filter-dropdown-select:focus {
+    border-color: #333;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+  }
+  
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..52b5608
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "AAISS-2023",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}

From b30d827ad3929838b55a6679ddecc0d544834246 Mon Sep 17 00:00:00 2001
From: amirfazel <amirfazel45@gmail.com>
Date: Tue, 28 Nov 2023 01:08:12 +0330
Subject: [PATCH 2/3] fix: removed unused code

---
 frontend/src/pages/workshops/WorkshopsPage.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/workshops/WorkshopsPage.jsx b/frontend/src/pages/workshops/WorkshopsPage.jsx
index 0135229..f278eda 100644
--- a/frontend/src/pages/workshops/WorkshopsPage.jsx
+++ b/frontend/src/pages/workshops/WorkshopsPage.jsx
@@ -1,4 +1,4 @@
-import { blue, red } from "@mui/material/colors";
+import { blue} from "@mui/material/colors";
 import ItemCard from "../../components/item-card/item-card.jsx";
 import Toast from "../../components/toast/Toast.jsx";
 import {Helper} from "../../utils/Helper.js";

From f3470cef893a21e8dd66a2d80d33e232388867d9 Mon Sep 17 00:00:00 2001
From: amirfazel <amirfazel45@gmail.com>
Date: Tue, 28 Nov 2023 01:13:14 +0330
Subject: [PATCH 3/3] fix: moved styles to css file

---
 frontend/src/pages/workshops/WorkshopsPage.jsx | 11 +----------
 frontend/src/pages/workshops/workshops.css     |  7 ++++++-
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/frontend/src/pages/workshops/WorkshopsPage.jsx b/frontend/src/pages/workshops/WorkshopsPage.jsx
index f278eda..b9cb287 100644
--- a/frontend/src/pages/workshops/WorkshopsPage.jsx
+++ b/frontend/src/pages/workshops/WorkshopsPage.jsx
@@ -51,17 +51,8 @@ export default function WorkshopsPage() {
                 alertType={toastData.type}
                 message={toastData.message}
             />}
-            <div className="filter-dropdown-container" style={{
-                width: '100%',
-                height: '3rem',
-                display: 'flex',
-                justifyContent: 'center',
-            }}>
+            <div className="filter-dropdown-container">
                 <select  name="filter" id="" className="filter-dropdown-select"
-                 style={{
-                    width: '75%',
-                    backgroundColor: blue["50"],
-                }}
                     value={filterOption}
                     onChange={(e) => handleFilterChange(e.target.value)}
                 >
diff --git a/frontend/src/pages/workshops/workshops.css b/frontend/src/pages/workshops/workshops.css
index ba075a9..384531d 100644
--- a/frontend/src/pages/workshops/workshops.css
+++ b/frontend/src/pages/workshops/workshops.css
@@ -1,6 +1,9 @@
-/* FilterDropdown.css */
 .filter-dropdown-container {
     margin-bottom: 20px;
+    width: 100%;
+    height:3rem;
+    display: flex;
+    justify-content: center;
   }
   
 .filter-dropdown-container label {
@@ -14,6 +17,8 @@
     border-radius: 4px;
     outline: none;
     cursor: pointer;
+    width: 70%;
+    background-color: #e3f2fd;
   }
   
 .filter-dropdown-select:hover {