allow filtering groups on activity

Aero56 · Oct 22, 2023 · 954a9d4 · 954a9d4
1 parent ba9436b
commit 954a9d4
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 39 deletions.
diff --git a/src/components/ActivitySelect.tsx b/src/components/ActivitySelect.tsx
@@ -28,7 +28,7 @@ export const ACTIVITIES = [
 ];
 
 interface ActivitySelectProps {
-  value: Option;
+  value: Option | null;
   onChange: (value: Option) => void;
   className?: string;
 }
@@ -38,7 +38,9 @@ const ActivitySelect = ({
   onChange,
   className,
 }: ActivitySelectProps) => {
-  const [selected, setSelected] = useState<Option>(value);
+  const [selected, setSelected] = useState<Option>(
+    value !== null ? value : ACTIVITIES[0],
+  );
 
   const handleChange = (value: Option[]) => {
     onChange(value[0]);

diff --git a/src/hooks/queries/useGroupsQuery.ts b/src/hooks/queries/useGroupsQuery.ts
@@ -1,13 +1,18 @@
 import { Group } from '@/types/groups';
-import { QueryParams } from '@/types/supabase';
+import { QueryModifiers } from '@/types/supabase';
 import { supabase } from '@api/supabase';
 import { useQuery, UseQueryOptions } from '@tanstack/react-query';
 
+interface Filters {
+  type?: number;
+}
+
 const useGroupsQuery = (
-  params?: QueryParams,
+  filters?: Filters,
+  modifiers?: QueryModifiers,
   options?: UseQueryOptions<Group[] | null>,
 ) => {
-  const queryKey = ['groups'];
+  const queryKey = ['groups', filters];
 
   return useQuery<Group[] | null>(
     queryKey,
@@ -17,14 +22,17 @@ const useGroupsQuery = (
         .select(
           '*, users!users_group_id_fkey(id, username), type!inner(id, name)',
         )
-        .eq('status', 'open')
-        .returns<Group[]>();
+        .eq('status', 'open');
+
+      if (filters?.type) {
+        query = query.eq('type', filters.type);
+      }
 
-      if (params?.order) {
-        query = query.order(params.order.column, params.order.options);
+      if (modifiers?.order) {
+        query = query.order(modifiers.order.column, modifiers.order.options);
       }
 
-      const { data } = await query;
+      const { data } = await query.returns<Group[]>();
 
       return data;
     },

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -1,50 +1,43 @@
 import useGroupsQuery from '@hooks/queries/useGroupsQuery';
 import { useAuth } from '@contexts/AuthContext';
 import CreateParty from '@components/Dialogs/CreateParty';
-import Select, { Option } from '@components/Select';
+import { Option } from '@components/Select';
 import { useState } from 'react';
 import Group from '@components/Group';
-
-const OPTIONS = [
-  { label: 'Option 1', value: '1' },
-  { label: 'Option 2', value: '2' },
-  { label: 'Option 3', value: '3' },
-];
+import ActivitySelect from '@components/ActivitySelect';
 
 const Home = () => {
   const { user } = useAuth();
 
-  const [selected, setSelected] = useState<Option[]>([OPTIONS[0]]);
-
-  const { data: groups, isLoading } = useGroupsQuery({
-    order: { column: 'updated_at', options: { ascending: false } },
-  });
+  const [selected, setSelected] = useState<Option | null>(null);
 
-  if (isLoading) {
-    return <p>Loading...</p>;
-  }
+  const { data: groups, isLoading } = useGroupsQuery(
+    { type: selected?.value ? Number(selected?.value) : undefined },
+    {
+      order: { column: 'updated_at', options: { ascending: false } },
+    },
+  );
 
-  const handleChangeFilter = (selected: Option[]) => {
+  const handleChangeFilter = (selected: Option) => {
     setSelected(selected);
   };
 
   return (
     <div className="container pt-4">
       <div className="flex justify-between">
-        <Select
-          value={selected}
-          options={OPTIONS}
-          onChange={handleChangeFilter}
-          isMulti
-        />
+        <ActivitySelect value={selected} onChange={handleChangeFilter} />
         {user && <CreateParty />}
       </div>
-      {groups && (
-        <div className="mt-5 flex flex-col gap-5">
-          {groups.map((group) => (
-            <Group group={group} />
-          ))}
-        </div>
+      {isLoading ? (
+        <p>Loading...</p>
+      ) : (
+        groups && (
+          <div className="mt-5 flex flex-col gap-5">
+            {groups.map((group) => (
+              <Group group={group} />
+            ))}
+          </div>
+        )
       )}
     </div>
   );

diff --git a/src/types/supabase.ts b/src/types/supabase.ts
@@ -16,7 +16,7 @@ export type Json =
 export type Table<T extends keyof Database['public']['Tables']> =
   Database['public']['Tables'][T]['Row'];
 
-export type QueryParams = {
+export type QueryModifiers = {
   order?: {
     column: string;
     options: {