feat: Apply filters to Categories as well (#30)

.prettierrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  ...require('@smartive/prettier-config'),
+}

src/compositions/search-with-results.tsx

@@ -30,16 +30,16 @@ const getVendors = `query Vendors($service: [Service!], $zip: Int, $tenants: [Te
     order
     contact
   }
+  categories(filter:{service: $service, tenants: $tenants, zip: $zip})
   total
 }`;
 
 type Props = {
   query: ParsedUrlQuery;
-  categories?: string[];
   selectedCategory?: string;
 };
 
-export const SearchWithResults: FC<Props> = ({ query, categories, selectedCategory }) => {
+export const SearchWithResults: FC<Props> = ({ query, selectedCategory }) => {
   const tenants = query['tenants'] && query['tenants'];
 
   const [service, setService] = useState<'DELIVERY' | 'TAKEAWAY'>('TAKEAWAY');
@@ -64,7 +64,7 @@ export const SearchWithResults: FC<Props> = ({ query, categories, selectedCatego
     }
   }, [postcode]);
 
-  const { pages, isLoadingMore, isReachingEnd, loadMore } = useSWRPages(
+  const { pages, isLoadingMore, pageSWRs, isReachingEnd, loadMore } = useSWRPages(
     'results',
     ({ offset, withSWR }) => {
       const variables = useMemo(() => {
@@ -113,6 +113,8 @@ export const SearchWithResults: FC<Props> = ({ query, categories, selectedCatego
     [zip, service, tenants, categoryFilter]
   );
 
+  const [page] = pageSWRs;
+  const categories = page?.data?.categories;
   return (
     <>
       <Search onChange={(zip) => setZip(zip)} onToggle={(service) => setService(service)} service={service} zip={zip} />

src/pages/iframe-suche.tsx

@@ -1,16 +1,11 @@
 import { SearchWithResults } from '../compositions/search-with-results';
-import { getClient } from '../services/mongo';
 
 export async function getServerSideProps(context) {
-  const client = await getClient();
-  const categories = await client.db('shops').collection('shops').distinct('categories');
-  client.close();
-
   return {
-    props: { query: context.query, categories },
+    props: { query: context.query },
   };
 }
 
-export default ({ query, categories }) => {
-  return <SearchWithResults categories={categories} query={query} />;
+export default ({ query }) => {
+  return <SearchWithResults query={query} />;
 };

src/pages/suche.tsx

@@ -1,23 +1,12 @@
 import { useRouter } from 'next/router';
 import { SearchWithResults } from '../compositions/search-with-results';
 import { Stacked } from '../layout/stacked';
-import { getClient } from '../services/mongo';
 
-export async function getServerSideProps() {
-  const client = await getClient();
-  const categories = await client.db('shops').collection('shops').distinct('categories');
-  client.close();
-
-  return {
-    props: { categories },
-  };
-}
-
-export default ({ categories }) => {
+export default () => {
   const { query } = useRouter();
   return (
     <Stacked title="Anbieter und Angebote - Emma bringts!">
-      <SearchWithResults categories={categories} query={query} />
+      <SearchWithResults query={query} />
     </Stacked>
   );
 };

src/resolvers/vendors.ts

@@ -102,6 +102,10 @@ export const vendors = {
     }));
   },
   total: async (_args, { client }: Context): Promise<number> => client.db('shops').collection('shops').countDocuments(),
-  categories: async (_args, { client }: Context): Promise<string[]> =>
-    client.db('shops').collection('shops').distinct('categories'),
+  categories: async ({ filter = {} }: VendorInput, { client }: Context): Promise<string[]> => {
+    const query = await buildQuery(filter);
+    const categories = await client.db('shops').collection('shops').distinct('categories', query);
+
+    return categories;
+  },
 };

src/schemas/graphql.ts

@@ -67,15 +67,13 @@ export const schema = buildSchema(`
     contact: [String]!
   }
 
-
-
   type Mutation {
     createVendor(vendor: VendorInput!): Vendor!
   }
 
   type Query {
     vendors(filter: VendorFilterInput, skip: Int, limit: Int): [Vendor]!
-    categories: [String]!
+    categories(filter: VendorFilterInput): [String]!
     total: Int!
   }
 `);