From 2dc5d5ab32e060af02311ebe05d47ba730a924f0 Mon Sep 17 00:00:00 2001
From: Michael Bumann <hello@michaelbumann.com>
Date: Sun, 28 Nov 2021 09:36:10 -0600
Subject: [PATCH] Connect categories

---
 src/Components/ExplorePage/partials/Categories.tsx | 9 +++++----
 src/index.tsx                                      | 2 --
 src/utils/interfaces.ts                            | 5 +++++
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/Components/ExplorePage/partials/Categories.tsx b/src/Components/ExplorePage/partials/Categories.tsx
index 500884c..3fa1453 100644
--- a/src/Components/ExplorePage/partials/Categories.tsx
+++ b/src/Components/ExplorePage/partials/Categories.tsx
@@ -1,8 +1,9 @@
+import { AllCategoriesData, ProjectCategory } from "../../../utils/interfaces";
 import { useQuery, gql } from "@apollo/client";
 
 const ALL_CATEGORIES = gql`
   query GetCategories {
-    allCategories() {
+    allCategories {
       id
       title
     }
@@ -11,7 +12,7 @@ const ALL_CATEGORIES = gql`
 
 export default function Categories() {
 
-    const { loading, error, data } = useQuery(ALL_CATEGORIES);
+    const { loading, error, data } = useQuery<AllCategoriesData, ProjectCategory>(ALL_CATEGORIES);
 
     const handleClick = (categoryId: string) => {
 
@@ -19,10 +20,10 @@ export default function Categories() {
 
     if (loading)
         return null;
-
+    console.log(data);
     return (
         <div className="flex gap-12 flex-wrap">
-            {data?.map(category => <span key={category.id} className="chip hover:cursor-pointer hover:bg-gray-200" onClick={() => handleClick(category.id)}>{category.title}</span>)}
+            {data && data.allCategories.map(category => <span key={category.id} className="chip hover:cursor-pointer hover:bg-gray-200" onClick={() => handleClick(category.id)}>{category.title}</span>)}
         </div>
     )
 }
diff --git a/src/index.tsx b/src/index.tsx
index 9f096c5..238b303 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -4,8 +4,6 @@ import {
   ApolloClient,
   InMemoryCache,
   ApolloProvider,
-  useQuery,
-  gql
 } from "@apollo/client";
 import './index.css';
 import App from './App';
diff --git a/src/utils/interfaces.ts b/src/utils/interfaces.ts
index 02ef90e..3fdb9c1 100644
--- a/src/utils/interfaces.ts
+++ b/src/utils/interfaces.ts
@@ -1,3 +1,8 @@
+
+export interface AllCategoriesData {
+  allCategories: ProjectCategory[]
+}
+
 export interface ProjectCategory {
   id: string;
   title: string;