From f8350f3c3bba986b8a37c6c0c3f8e484ed1365d5 Mon Sep 17 00:00:00 2001
From: Sachin Chaurasiya <sachinchaurasiyachotey87@gmail.com>
Date: Fri, 12 Aug 2022 13:03:25 +0530
Subject: [PATCH 1/3] =?UTF-8?q?=E2=9C=A8=20[Feature]=20#102:=20In=20filter?=
 =?UTF-8?q?=20modal=20creator=20dropdown=20should=20be=20a=20card=20list?=
 =?UTF-8?q?=20with=20image?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/search/FilterPlays.jsx | 222 ++++++++++++++++++++----------
 1 file changed, 147 insertions(+), 75 deletions(-)

diff --git a/src/common/search/FilterPlays.jsx b/src/common/search/FilterPlays.jsx
index fdbeadf41..b9d696062 100644
--- a/src/common/search/FilterPlays.jsx
+++ b/src/common/search/FilterPlays.jsx
@@ -7,90 +7,161 @@ import "./search.css";
 import { RiFilterFill } from "react-icons/ri";
 import useBackListener from "common/routing/hooks/useBackListener";
 import useFetchFilterData from "./hooks/usePlayFilter";
+import { FormControl, MenuItem, Select } from "@mui/material";
 
 const FilterPlaysModalBody = ({ filterQuery, setFilterQuery }) => {
   const [loading, error, data] = useFetchFilterData();
-  const {tags, levels, creators} = data;
+  const { tags, levels, creators } = data;
 
   const languages = ["js", "ts"];
 
   if (error) {
-    return <p>{error?.message ?? "Something Went Wrong"}</p>
+    return <p>{error?.message ?? "Something Went Wrong"}</p>;
   }
 
+  const defaultOption = {
+    value: " ",
+    label: "All",
+  };
+
+  const creatorOptions = [
+    defaultOption,
+    ...(creators?.map((creator) => ({
+      value: creator.user.id,
+      label: creator.user.avatarUrl ? (
+        <div className="flex gap-x-2 items-center">
+          <img
+            alt={creator.user.displayName}
+            className="rounded"
+            src={creator.user.avatarUrl}
+            width="32px"
+          />
+          {creator.user.displayName}
+        </div>
+      ) : (
+        creator.user.displayName
+      ),
+    })) || []),
+  ];
+
+  const levelOptions = [
+    defaultOption,
+    ...(levels?.map((level) => ({
+      label: level.level.name,
+      value: level.level.id,
+    })) || []),
+  ];
+
+  const tagOptions = [
+    defaultOption,
+    ...(tags?.map((tag) => ({
+      label: tag.tag,
+      value: tag.id,
+    })) || []),
+  ];
+
+  const languageOptions = [
+    defaultOption,
+    ...languages?.map((language) => ({
+      label: language === "ts" ? "TypeScript" : "JavaScript",
+      value: language,
+    })),
+  ];
+
+  const renderCreator = (value) => {
+    const selectedCreator = creatorOptions.find(
+      (option) => option.value === value
+    );
+    return selectedCreator ? selectedCreator.label : "All";
+  };
+
   return (
     <>
-      <div className='form-group'>
+      <div className="form-group">
         {loading && "Loading Data"}
         <label>Level</label>
-        <select
-          className='form-control'
-          onChange={(event) =>
-            setFilterQuery({ ...filterQuery, level_id: event.target.value })
-          }
-          value={filterQuery.level_id}
-        >
-          <option value=''>All</option>
-          {levels?.map((level) => (
-            <option key={level.level.name} value={level.level.id}>
-              {level.level.name}
-            </option>
-          ))}
-        </select>
+        <FormControl fullWidth>
+          <Select
+            value={filterQuery.level_id || " "}
+            onChange={(event) => {
+              const { value } = event.target;
+              setFilterQuery({
+                ...filterQuery,
+                level_id: defaultOption.value === value ? "" : value,
+              });
+            }}
+          >
+            {levelOptions.map((option) => (
+              <MenuItem value={option.value} key={option.value}>
+                {option.label}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
       </div>
-      <div className='form-group'>
+      <div className="form-group">
         <label>Tags</label>
-        <select
-          className='form-control'
-          onChange={(event) =>
-            setFilterQuery({
-              ...filterQuery,
-              tags: event.target.value !== "" ? [event.target.value] : [],
-            })
-          }
-          value={filterQuery.tags[0]}
-        >
-          <option value=''>All</option>
-          {tags?.map((tag) => (
-            <option key={tag.tag} value={tag.id}>
-              {tag.tag}
-            </option>
-          ))}
-        </select>
+        <FormControl fullWidth>
+          <Select
+            value={filterQuery.tags[0] || " "}
+            onChange={(event) => {
+              const { value } = event.target;
+              setFilterQuery({
+                ...filterQuery,
+                tags: value !== defaultOption.value ? [value] : [],
+              });
+            }}
+          >
+            {tagOptions.map((option) => (
+              <MenuItem value={option.value} key={option.value}>
+                {option.label}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
       </div>
-      <div className='form-group'>
+      <div className="form-group">
         <label>Creator</label>
-        <select
-          className='form-control'
-          onChange={(event) =>
-            setFilterQuery({ ...filterQuery, owner_user_id: event.target.value })
-          }
-          value={filterQuery.owner_user_id}
-        >
-          <option value=''>All</option>
-          {creators?.map((creator) => (
-            <option key={creator.user.displayName} value={creator.user.id}>
-              {creator.user.displayName}
-            </option>
-          ))}
-        </select>
+        <FormControl fullWidth>
+          <Select
+            value={filterQuery.owner_user_id || " "}
+            onChange={(event) => {
+              const { value } = event.target;
+              setFilterQuery({
+                ...filterQuery,
+                owner_user_id: defaultOption.value === value ? "" : value,
+              });
+            }}
+            renderValue={renderCreator}
+          >
+            {creatorOptions.map((option) => (
+              <MenuItem value={option.value} key={option.value}>
+                {option.label}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
       </div>
-      <div className='form-group'>
+      <div className="form-group">
         <label>Language</label>
-        <select
-          className='form-control'
-          onChange={(event) =>
-            setFilterQuery({ ...filterQuery, language: event.target.value })
-          }
-          value={filterQuery.language}
-        >
-          <option value=''>All</option>
-          {languages.map((language) => (
-            <option key={language} value={language}>
-              {language === "ts" ? "TypeScript" : "JavaScript"}
-            </option>
-          ))}
-        </select>
+        <FormControl fullWidth>
+          <Select
+            value={filterQuery.language || " "}
+            onChange={(event) => {
+              const { value } = event.target;
+              setFilterQuery({
+                ...filterQuery,
+                language: defaultOption.value === value ? "" : value,
+              });
+            }}
+          >
+            {languageOptions.map((option) => (
+              <MenuItem value={option.value} key={option.value}>
+                {option.label}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
       </div>
     </>
   );
@@ -103,7 +174,8 @@ const getAppliedFilter = (filterObject) => {
       ? 1
       : 0;
   const noOfcreatorsApplied =
-    filterObject.owner_user_id !== undefined && filterObject.owner_user_id.trim() !== ""
+    filterObject.owner_user_id !== undefined &&
+    filterObject.owner_user_id.trim() !== ""
       ? 1
       : 0;
   const noOfLanguageApplied =
@@ -182,13 +254,13 @@ const FilterPlays = () => {
   };
 
   return (
-    <div className='search-filter'>
+    <div className="search-filter">
       <Modal
-        title='Filter Plays By'
+        title="Filter Plays By"
         onClose={() => setShowModal(false)}
         onSubmit={handleFilter}
         show={showModal}
-        cname='filter'
+        cname="filter"
         children={
           <FilterPlaysModalBody
             filterQuery={modifiedFilterQuery}
@@ -199,17 +271,17 @@ const FilterPlays = () => {
 
       <button
         onClick={() => setShowModal(true)}
-        className='btn-filter'
-        title='Filter Plays'
+        className="btn-filter"
+        title="Filter Plays"
       >
         {noOfAppliedFilter === 0 ? null : (
-          <div className='badge'>{noOfAppliedFilter}</div>
+          <div className="badge">{noOfAppliedFilter}</div>
         )}
 
         <RiFilterFill
-          className='icon'
-          size='28px'
-          color='var(--color-neutral-30)'
+          className="icon"
+          size="28px"
+          color="var(--color-neutral-30)"
         />
       </button>
     </div>

From 740ab8b238e78eab0830c0f1887a95216aad6ea0 Mon Sep 17 00:00:00 2001
From: Sachin Chaurasiya <sachinchaurasiyachotey87@gmail.com>
Date: Sat, 13 Aug 2022 21:30:55 +0530
Subject: [PATCH 2/3] Limit select menu height

---
 package.json                      |  1 +
 src/common/search/FilterPlays.jsx | 13 +++++++++++++
 2 files changed, 14 insertions(+)

diff --git a/package.json b/package.json
index 81e719a77..86115dc23 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "@emotion/styled": "^11.9.3",
     "@giscus/react": "^2.0.3",
     "@mui/material": "^5.9.1",
+    "@mui/styles": "^5.9.3",
     "@nhost/react": "^0.9.0",
     "@types/lodash": "^4.14.182",
     "@types/react": "^18.0.6",
diff --git a/src/common/search/FilterPlays.jsx b/src/common/search/FilterPlays.jsx
index b9d696062..785c91d70 100644
--- a/src/common/search/FilterPlays.jsx
+++ b/src/common/search/FilterPlays.jsx
@@ -8,11 +8,20 @@ import { RiFilterFill } from "react-icons/ri";
 import useBackListener from "common/routing/hooks/useBackListener";
 import useFetchFilterData from "./hooks/usePlayFilter";
 import { FormControl, MenuItem, Select } from "@mui/material";
+import { makeStyles } from "@mui/styles";
+
+const useStyles = makeStyles({
+  menuPaper: {
+    maxHeight: "250px",
+  },
+});
 
 const FilterPlaysModalBody = ({ filterQuery, setFilterQuery }) => {
   const [loading, error, data] = useFetchFilterData();
   const { tags, levels, creators } = data;
 
+  const classes = useStyles();
+
   const languages = ["js", "ts"];
 
   if (error) {
@@ -90,6 +99,7 @@ const FilterPlaysModalBody = ({ filterQuery, setFilterQuery }) => {
                 level_id: defaultOption.value === value ? "" : value,
               });
             }}
+            MenuProps={{ classes: { paper: classes.menuPaper } }}
           >
             {levelOptions.map((option) => (
               <MenuItem value={option.value} key={option.value}>
@@ -111,6 +121,7 @@ const FilterPlaysModalBody = ({ filterQuery, setFilterQuery }) => {
                 tags: value !== defaultOption.value ? [value] : [],
               });
             }}
+            MenuProps={{ classes: { paper: classes.menuPaper } }}
           >
             {tagOptions.map((option) => (
               <MenuItem value={option.value} key={option.value}>
@@ -133,6 +144,7 @@ const FilterPlaysModalBody = ({ filterQuery, setFilterQuery }) => {
               });
             }}
             renderValue={renderCreator}
+            MenuProps={{ classes: { paper: classes.menuPaper } }}
           >
             {creatorOptions.map((option) => (
               <MenuItem value={option.value} key={option.value}>
@@ -154,6 +166,7 @@ const FilterPlaysModalBody = ({ filterQuery, setFilterQuery }) => {
                 language: defaultOption.value === value ? "" : value,
               });
             }}
+            MenuProps={{ classes: { paper: classes.menuPaper } }}
           >
             {languageOptions.map((option) => (
               <MenuItem value={option.value} key={option.value}>

From 5059e80d4ae4c5f7053b4ffdae055ddd6e560d89 Mon Sep 17 00:00:00 2001
From: Sachin Chaurasiya <sachinchaurasiyachotey87@gmail.com>
Date: Sat, 13 Aug 2022 21:37:54 +0530
Subject: [PATCH 3/3] Add important css

---
 src/common/search/FilterPlays.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common/search/FilterPlays.jsx b/src/common/search/FilterPlays.jsx
index 785c91d70..7ee08cb53 100644
--- a/src/common/search/FilterPlays.jsx
+++ b/src/common/search/FilterPlays.jsx
@@ -12,7 +12,7 @@ import { makeStyles } from "@mui/styles";
 
 const useStyles = makeStyles({
   menuPaper: {
-    maxHeight: "250px",
+    maxHeight: "250px !important",
   },
 });