From fb359f5e593c697eeaf15ab988d1963031e8bfa8 Mon Sep 17 00:00:00 2001
From: althafdaa <althafdemiandraakbar@gmail.com>
Date: Wed, 24 Jul 2024 22:35:41 +0700
Subject: [PATCH 1/5] feat: create filter for event and rating

---
 src/components/circle/FilterDrawer.tsx        | 57 ++++++++++++++-----
 .../detail-page/EditGeneralInfoSection.tsx    |  4 +-
 .../circle/useParseClientQueryToParams.ts     |  4 +-
 src/hooks/event/useGetEvent.ts                | 23 ++++++--
 src/pages/index.tsx                           | 57 ++++++++++++++++++-
 src/pages/join.tsx                            |  4 +-
 src/types/circle.ts                           | 31 ++++++++--
 7 files changed, 151 insertions(+), 29 deletions(-)

diff --git a/src/components/circle/FilterDrawer.tsx b/src/components/circle/FilterDrawer.tsx
index 4808e45..24715d6 100644
--- a/src/components/circle/FilterDrawer.tsx
+++ b/src/components/circle/FilterDrawer.tsx
@@ -22,7 +22,7 @@ import { useGetWorkType } from '@/hooks/circle/useGetWorkType';
 import { prettifyError } from '@/utils/helper';
 import { useRouter } from 'next/router';
 import { useEffect } from 'react';
-import { CircleFilterWithNoSearch } from '@/types/circle';
+import { CircleFilterWithNoSearch, RATING_ENUM } from '@/types/circle';
 import { useParseCircleQueryToParams } from '@/hooks/circle/useParseClientQueryToParams';
 
 const WorkTypeSection = () => {
@@ -224,25 +224,54 @@ const MainFilter = () => {
     (state) => state.setDrawerFilterStep,
   );
   const filterForm = useFormContext<CircleFilterWithNoSearch>();
+  const { filter } = useParseCircleQueryToParams();
 
   return (
     <>
+      {!!filter.event && (
+        <Controller
+          control={filterForm.control}
+          name="day"
+          render={({ field: { disabled, onChange, ...fields } }) => {
+            return (
+              <RadioGroup
+                label={<div className="font-medium">Day</div>}
+                orientation="horizontal"
+                isDisabled={disabled}
+                {...fields}
+                onValueChange={(a) => onChange(a)}
+              >
+                <Radio value="first">First Day</Radio>
+                <Radio value="second">Second Day</Radio>
+                <Radio value="both">Both Days</Radio>
+              </RadioGroup>
+            );
+          }}
+        />
+      )}
+
       <Controller
         control={filterForm.control}
-        name="day"
-        render={({ field: { disabled, onChange, ...fields } }) => {
+        name="rating"
+        render={({ field }) => {
           return (
-            <RadioGroup
-              label={<div className="font-medium">Day</div>}
-              orientation="horizontal"
-              isDisabled={disabled}
-              {...fields}
-              onValueChange={(a) => onChange(a)}
+            <CheckboxGroup
+              name={field.name}
+              ref={field.ref}
+              value={(field?.value ?? []).map(String)}
+              onChange={(val) => field.onChange(val)}
+              label={<div className="font-medium">Rating</div>}
             >
-              <Radio value="first">First Day</Radio>
-              <Radio value="second">Second Day</Radio>
-              <Radio value="both">Both Days</Radio>
-            </RadioGroup>
+              <div className="flex gap-2">
+                {RATING_ENUM.map((x) => {
+                  return (
+                    <Checkbox key={x} value={x}>
+                      {x}
+                    </Checkbox>
+                  );
+                })}
+              </div>
+            </CheckboxGroup>
           );
         }}
       />
@@ -318,6 +347,7 @@ const FilterDrawer = () => {
         day: filter.day,
         fandom_id: filter.fandom_id,
         work_type_id: filter.work_type_id,
+        rating: filter.rating,
       });
     }
   }, [open]);
@@ -343,6 +373,7 @@ const FilterDrawer = () => {
                     day: '',
                     fandom_id: [],
                     work_type_id: [],
+                    rating: [],
                   },
                   {
                     keepTouched: true,
diff --git a/src/components/circle/detail-page/EditGeneralInfoSection.tsx b/src/components/circle/detail-page/EditGeneralInfoSection.tsx
index bbd7a30..fe9e16d 100644
--- a/src/components/circle/detail-page/EditGeneralInfoSection.tsx
+++ b/src/components/circle/detail-page/EditGeneralInfoSection.tsx
@@ -11,7 +11,7 @@ import { uploadService } from '@/services/upload';
 import {
   EditGeneralInfoPayload,
   editGeneralInfoPayload,
-  ratingEnum,
+  RATING_ENUM,
   updateCirclePayload,
 } from '@/types/circle';
 import { prettifyError } from '@/utils/helper';
@@ -198,7 +198,7 @@ function EditGeneralInfoSection() {
                       errorMessage={formState.errors[field.name]?.message}
                       selectionMode="single"
                     >
-                      {ratingEnum.map((id) => {
+                      {RATING_ENUM.map((id) => {
                         return (
                           <SelectItem
                             key={id}
diff --git a/src/hooks/circle/useParseClientQueryToParams.ts b/src/hooks/circle/useParseClientQueryToParams.ts
index 40f4403..ab21322 100644
--- a/src/hooks/circle/useParseClientQueryToParams.ts
+++ b/src/hooks/circle/useParseClientQueryToParams.ts
@@ -10,6 +10,8 @@ export const CIRCLE_FILTER_CLIENT_PARAMS_INITIAL_VALUE: GetCircleQueryParamsClie
     fandom_id: [],
     work_type_id: [],
     search: '',
+    rating: [],
+    event: '',
   };
 
 export const useParseCircleQueryToParams = () => {
@@ -21,7 +23,7 @@ export const useParseCircleQueryToParams = () => {
   }
 
   const isActive = Object.entries(params).some(([key, values]) => {
-    return key !== 'search' && values.length > 0;
+    return key !== 'search' && key !== 'event' && values.length > 0;
   });
   return {
     filter: params,
diff --git a/src/hooks/event/useGetEvent.ts b/src/hooks/event/useGetEvent.ts
index c6d1681..e4806c9 100644
--- a/src/hooks/event/useGetEvent.ts
+++ b/src/hooks/event/useGetEvent.ts
@@ -1,13 +1,28 @@
 import { eventService } from '@/services/event';
-import { useQuery } from '@tanstack/react-query';
+import { UndefinedInitialDataOptions, useQuery } from '@tanstack/react-query';
+type QueryFnData = Awaited<ReturnType<typeof eventService.getEvents>>['data'];
+type Options = Omit<UndefinedInitialDataOptions<QueryFnData>, 'queryKey'>;
+type PickedOptions = Partial<
+  Pick<
+    Options,
+    | 'refetchOnMount'
+    | 'refetchOnReconnect'
+    | 'refetchOnWindowFocus'
+    | 'enabled'
+    | 'staleTime'
+  >
+>;
 
-export const useGetEvents = (
-  params: Parameters<typeof eventService.getEvents>[0],
-) => {
+type Params = Parameters<typeof eventService.getEvents>[0];
+
+export const useGetEvents = (params: Params, options?: PickedOptions) => {
   return useQuery({
     queryKey: ['/v1/event', params],
     queryFn: async () => (await eventService.getEvents(params)).data,
     retry: 0,
     refetchOnMount: false,
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+    ...options,
   });
 };
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 90b3d27..3f0f9c1 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -5,6 +5,8 @@ import {
   Popover,
   PopoverContent,
   PopoverTrigger,
+  Radio,
+  RadioGroup,
 } from '@nextui-org/react';
 import { prettifyError } from '@/utils/helper';
 import { useGetCirclesInfinite } from '@/hooks/circle/useGetCirclesInfinite';
@@ -18,6 +20,8 @@ import MegaphoneIcon from '@/icons/MegaphoneIcon';
 import { classNames } from '@/utils/classNames';
 import TVIcon from '@/icons/TVIcon';
 import { useSession } from '@/components/providers/SessionProvider';
+import { useGetEvents } from '@/hooks/event/useGetEvent';
+import { useRouter } from 'next/router';
 
 const FilterDrawer = dynamic(() => import('@/components/circle/FilterDrawer'), {
   ssr: false,
@@ -168,6 +172,55 @@ const JoinAsCircleCTA = () => {
   );
 };
 
+const EventChipsFilter = () => {
+  const { data, error } = useGetEvents(
+    { limit: 2, page: 1 },
+    { staleTime: Infinity },
+  );
+  const router = useRouter();
+  if (!data || data.length === 0 || error) return null;
+  return (
+    <div className="my-4 flex w-full">
+      <ul className="flex gap-2">
+        {data.map((ev) => {
+          const isSelected = router.query.event === ev.slug;
+          return (
+            <li key={ev.id}>
+              <Link
+                type="button"
+                className={classNames(
+                  'border-[1.5px] border-neutral-200 bg-slate-50 px-2 py-1 font-medium text-neutral-500 transition-all active:scale-90',
+
+                  isSelected
+                    ? 'rounded-lg border-neutral-500 bg-primary font-semibold text-white'
+                    : 'rounded-[50px] hover:bg-slate-200',
+                )}
+                href={{
+                  query: (() => {
+                    const copy = { ...router.query };
+                    if (isSelected) {
+                      delete copy.event;
+                      return copy;
+                    } else {
+                      return {
+                        ...copy,
+                        event: ev.slug,
+                      };
+                    }
+                  })(),
+                }}
+                shallow
+              >
+                {ev.name}
+              </Link>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+};
+
 export default function Home() {
   const setOpen = useDrawerFilterStore((state) => state.setDrawerFilterIsOpen);
   const { isActive } = useParseCircleQueryToParams();
@@ -179,7 +232,7 @@ export default function Home() {
         <h1 className="text-xl font-bold">Discover Circles</h1>
         <WarningDev />
       </div>
-      <div className="mb-6 mt-2 flex w-full items-center gap-2">
+      <div className="my-2 flex w-full items-center gap-2">
         <SearchInput />
         <button
           type="button"
@@ -195,6 +248,8 @@ export default function Home() {
         </button>
         <FilterDrawer />
       </div>
+      <EventChipsFilter />
+
       <CircleListGrid />
     </EachPageLayout>
   );
diff --git a/src/pages/join.tsx b/src/pages/join.tsx
index c0b2861..4ae4024 100644
--- a/src/pages/join.tsx
+++ b/src/pages/join.tsx
@@ -3,7 +3,7 @@ import Spin from '@/components/general/Spin';
 import { useSession } from '@/components/providers/SessionProvider';
 import { useOnboarding } from '@/hooks/circle/useOnboarding';
 import MegaphoneIcon from '@/icons/MegaphoneIcon';
-import { onboardingPayloadSchema, ratingEnum } from '@/types/circle';
+import { onboardingPayloadSchema, RATING_ENUM } from '@/types/circle';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Button, Input, Select, SelectItem } from '@nextui-org/react';
 import { useRouter } from 'next/router';
@@ -115,7 +115,7 @@ function JoinPage() {
                       <Select
                         color="primary"
                         variant="underlined"
-                        items={ratingEnum.map((x) => ({
+                        items={RATING_ENUM.map((x) => ({
                           id: x,
                           name: x,
                         }))}
diff --git a/src/types/circle.ts b/src/types/circle.ts
index 9cc8759..423cf5f 100644
--- a/src/types/circle.ts
+++ b/src/types/circle.ts
@@ -11,8 +11,8 @@ import {
 import { ACCEPTED_IMAGE_TYPES, FIVE_MB } from '@/constants/common';
 import { eventEntity } from './event';
 
-export const ratingEnum = ['GA', 'PG', 'M'] as const;
-export const ratingEnumSchema = z.enum(ratingEnum, {
+export const RATING_ENUM = ['GA', 'PG', 'M'] as const;
+export const ratingEnumSchema = z.enum(RATING_ENUM, {
   message: 'Rating is required',
 });
 
@@ -31,6 +31,12 @@ export const circlesQueryParamsClient = z.object({
     .or(z.literal(''))
     .default('')
     .optional(),
+  rating: z
+    .array(ratingEnumSchema)
+    .or(ratingEnumSchema.transform((x) => [x]))
+    .default([]),
+
+  event: trimmedString.optional(),
 });
 
 export type GetCircleQueryParamsClient = z.infer<
@@ -82,15 +88,28 @@ export const circleSchema = circleEntity.extend({
   event: eventEntity.nullable(),
 });
 
-const circles = circleSchema.omit({ event: true });
-
-export type CircleCard = z.infer<typeof circles>;
+export type CircleCard = z.infer<typeof circlePaginationSchema>;
 
 export const onboardCircleResponse = backendResponseSchema(circleEntity);
 export const getOneCircleResponse = backendResponseSchema(
   circleSchema.omit({ event_id: true }),
 );
-export const getCirclesResponse = backendResponsePagination(circles);
+
+export const circlePaginationSchema = circleEntity
+  .omit({ description: true })
+  .extend({
+    block: circleBlockEntity.nullable(),
+    bookmarked: z.boolean(),
+    work_type: z.array(fandomWorkTypeBaseEntity),
+    fandom: z.array(fandomWorkTypeBaseEntity),
+    event: eventEntity
+      .omit({ description: true, ended_at: true, started_at: true })
+      .nullable(),
+  });
+
+export const getCirclesResponse = backendResponsePagination(
+  circlePaginationSchema,
+);
 
 export const onboardingPayloadSchema = z.object({
   name: z

From f317b45f514240271b1985119cfd61f5a3f27211 Mon Sep 17 00:00:00 2001
From: althafdaa <althafdemiandraakbar@gmail.com>
Date: Wed, 24 Jul 2024 22:37:42 +0700
Subject: [PATCH 2/5] style: overflow auto for small screen

---
 src/pages/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 3f0f9c1..d929f44 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -181,7 +181,7 @@ const EventChipsFilter = () => {
   if (!data || data.length === 0 || error) return null;
   return (
     <div className="my-4 flex w-full">
-      <ul className="flex gap-2">
+      <ul className="flex w-full max-w-full gap-2 overflow-x-auto">
         {data.map((ev) => {
           const isSelected = router.query.event === ev.slug;
           return (
@@ -189,7 +189,7 @@ const EventChipsFilter = () => {
               <Link
                 type="button"
                 className={classNames(
-                  'border-[1.5px] border-neutral-200 bg-slate-50 px-2 py-1 font-medium text-neutral-500 transition-all active:scale-90',
+                  'whitespace-nowrap border-[1.5px] border-neutral-200 bg-slate-50 px-2 py-1 font-medium text-neutral-500 transition-all active:scale-90',
 
                   isSelected
                     ? 'rounded-lg border-neutral-500 bg-primary font-semibold text-white'

From 4e1341b2c6e6ec0e0e910bc3b059173fe9085686 Mon Sep 17 00:00:00 2001
From: althafdaa <althafdemiandraakbar@gmail.com>
Date: Wed, 24 Jul 2024 22:41:51 +0700
Subject: [PATCH 3/5] chore: remove Radio and RadioGroup imports

---
 src/pages/index.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index d929f44..63b9f34 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -5,8 +5,6 @@ import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-  Radio,
-  RadioGroup,
 } from '@nextui-org/react';
 import { prettifyError } from '@/utils/helper';
 import { useGetCirclesInfinite } from '@/hooks/circle/useGetCirclesInfinite';

From 517dc4d7b8e4ee7860978ca6846a3106518022a2 Mon Sep 17 00:00:00 2001
From: althafdaa <althafdemiandraakbar@gmail.com>
Date: Wed, 24 Jul 2024 22:48:12 +0700
Subject: [PATCH 4/5] chore: refactor EventChipsFilter component to improve
 performance and fix filter bug

---
 src/pages/index.tsx | 74 ++++++++++++++++++++++-----------------------
 1 file changed, 36 insertions(+), 38 deletions(-)

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 63b9f34..87948e9 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -176,46 +176,44 @@ const EventChipsFilter = () => {
     { staleTime: Infinity },
   );
   const router = useRouter();
+  const { filter } = useParseCircleQueryToParams();
   if (!data || data.length === 0 || error) return null;
   return (
-    <div className="my-4 flex w-full">
-      <ul className="flex w-full max-w-full gap-2 overflow-x-auto">
-        {data.map((ev) => {
-          const isSelected = router.query.event === ev.slug;
-          return (
-            <li key={ev.id}>
-              <Link
-                type="button"
-                className={classNames(
-                  'whitespace-nowrap border-[1.5px] border-neutral-200 bg-slate-50 px-2 py-1 font-medium text-neutral-500 transition-all active:scale-90',
-
-                  isSelected
-                    ? 'rounded-lg border-neutral-500 bg-primary font-semibold text-white'
-                    : 'rounded-[50px] hover:bg-slate-200',
-                )}
-                href={{
-                  query: (() => {
-                    const copy = { ...router.query };
-                    if (isSelected) {
-                      delete copy.event;
-                      return copy;
-                    } else {
-                      return {
-                        ...copy,
-                        event: ev.slug,
-                      };
-                    }
-                  })(),
-                }}
-                shallow
-              >
-                {ev.name}
-              </Link>
-            </li>
-          );
-        })}
-      </ul>
-    </div>
+    <ul className="my-4 flex h-full w-full max-w-full gap-2 overflow-x-auto overflow-y-hidden">
+      {data.map((ev) => {
+        const isSelected = router.query.event === ev.slug;
+        return (
+          <Link
+            className={classNames(
+              'whitespace-nowrap border-[1.5px] border-neutral-200 bg-slate-50 px-3 py-1 font-medium text-neutral-500 transition-all active:scale-90',
+
+              isSelected
+                ? 'rounded-[50px] border-neutral-500 bg-primary font-semibold text-white'
+                : 'rounded-lg hover:bg-slate-200',
+            )}
+            key={ev.id}
+            href={{
+              query: (() => {
+                const copy = { ...router.query };
+                if (isSelected) {
+                  if (!!filter.day) delete copy.day;
+                  delete copy.event;
+                  return copy;
+                } else {
+                  return {
+                    ...copy,
+                    event: ev.slug,
+                  };
+                }
+              })(),
+            }}
+            shallow
+          >
+            <li> {ev.name}</li>
+          </Link>
+        );
+      })}
+    </ul>
   );
 };
 

From e78cd9ae4e6af5177bbd453e5a96d4598c2c008e Mon Sep 17 00:00:00 2001
From: althafdaa <althafdemiandraakbar@gmail.com>
Date: Wed, 24 Jul 2024 22:55:05 +0700
Subject: [PATCH 5/5] refactor: improve EventChipsFilter component performance
 and fix filter bug

---
 src/pages/index.tsx | 41 ++++++++++++++++++++++++++---------------
 1 file changed, 26 insertions(+), 15 deletions(-)

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 87948e9..736cd28 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -20,6 +20,7 @@ import TVIcon from '@/icons/TVIcon';
 import { useSession } from '@/components/providers/SessionProvider';
 import { useGetEvents } from '@/hooks/event/useGetEvent';
 import { useRouter } from 'next/router';
+import XMarkIcon from '@/icons/XMarkIcon';
 
 const FilterDrawer = dynamic(() => import('@/components/circle/FilterDrawer'), {
   ssr: false,
@@ -179,7 +180,7 @@ const EventChipsFilter = () => {
   const { filter } = useParseCircleQueryToParams();
   if (!data || data.length === 0 || error) return null;
   return (
-    <ul className="my-4 flex h-full w-full max-w-full gap-2 overflow-x-auto overflow-y-hidden">
+    <ul className="mb-4 mt-0 flex h-full w-full max-w-full items-center gap-2 overflow-x-auto overflow-y-hidden">
       {data.map((ev) => {
         const isSelected = router.query.event === ev.slug;
         return (
@@ -193,19 +194,10 @@ const EventChipsFilter = () => {
             )}
             key={ev.id}
             href={{
-              query: (() => {
-                const copy = { ...router.query };
-                if (isSelected) {
-                  if (!!filter.day) delete copy.day;
-                  delete copy.event;
-                  return copy;
-                } else {
-                  return {
-                    ...copy,
-                    event: ev.slug,
-                  };
-                }
-              })(),
+              query: {
+                ...router.query,
+                event: ev.slug,
+              },
             }}
             shallow
           >
@@ -213,6 +205,25 @@ const EventChipsFilter = () => {
           </Link>
         );
       })}
+      {!!router.query.event && (
+        <button
+          className="rounded-full p-0.5 transition-all delay-200 hover:bg-danger hover:text-white active:scale-90"
+          type="button"
+          onClick={() => {
+            if (!!filter.day) delete router.query.day;
+            delete router.query.event;
+            router.push(
+              {
+                query: router.query,
+              },
+              undefined,
+              { shallow: true },
+            );
+          }}
+        >
+          <XMarkIcon width={16} height={16} />
+        </button>
+      )}
     </ul>
   );
 };
@@ -228,7 +239,7 @@ export default function Home() {
         <h1 className="text-xl font-bold">Discover Circles</h1>
         <WarningDev />
       </div>
-      <div className="my-2 flex w-full items-center gap-2">
+      <div className="mb-4 mt-2 flex w-full items-center gap-2">
         <SearchInput />
         <button
           type="button"