fix: added loading state to categories drop-down, removed logs, improved search query typing

src/Components/Navbar/CategoriesList/CategoriesList.tsx

@@ -1,8 +1,8 @@
-import React from 'react'
+import { useQuery } from '@apollo/client'
+import Skeleton from 'react-loading-skeleton'
 import { Link } from 'react-router-dom'
-import { MOCK_DATA } from 'src/mocks/data'
 import { numberFormatter } from 'src/utils/helperFunctions'
-import { ProjectCategory } from 'src/utils/interfaces'
+import { ALL_CATEGORIES_QUERY, ALL_CATEGORIES_QUERY_RES } from './query'
 
 interface Props {
     // categories: Pick<ProjectCategory, 'id' | 'title' | 'icon' | 'votes_sum'>[]
@@ -10,12 +10,25 @@ interface Props {
     onClick?: (categoryId: number) => void
 }
 
-const categories = MOCK_DATA['categories']
 
 export default function CategoriesList({ classes = {}, onClick }: Props) {
+
+
+    const { data, loading } = useQuery<ALL_CATEGORIES_QUERY_RES>(ALL_CATEGORIES_QUERY);
+
+
+    if (loading)
+        return <ul className={classes.list}>
+            {Array(5).fill(0).map((_, idx) =>
+                <li key={idx} className={`flex p-16 text-body4 font-semibold items-center hover:bg-gray-100 rounded-8 ${classes.item}`} >
+                    <span className="text-body3 mr-8"><Skeleton width='1.5ch' /></span> <Skeleton width='10ch' /> <span className="ml-auto text-body5 font-normal text-gray-400"><Skeleton width='2ch' /></span>
+                </li>
+            )}
+        </ul>
+
     return (
         <ul className={classes.list}>
-            {categories.map(category =>
+            {data?.allCategories.map(category =>
                 <Link
                     onClick={() => onClick?.(category.id)}
                     key={category.id}

src/Components/Navbar/CategoriesList/query.ts

@@ -0,0 +1,22 @@
+import { gql } from "@apollo/client";
+import { ProjectCategory } from "src/utils/interfaces";
+
+export const ALL_CATEGORIES_QUERY = gql`
+  query AllCategories {
+    allCategories {
+      id
+      title
+      icon
+      votes_sum
+    }
+  }
+`;
+
+export type ALL_CATEGORIES_QUERY_RES = {
+  allCategories: Pick<ProjectCategory,
+    | 'id'
+    | 'title'
+    | 'icon'
+    | 'votes_sum'
+  >[];
+};

src/Components/Navbar/Search/Search.tsx

@@ -117,7 +117,6 @@ export default function Search({
                         value={searchInput}
                         onChange={handleChange}
                         onKeyDown={e => {
-                            console.log(e.key);
                             if (e.key === 'Escape') dispatch(toggleSearch(false))
 
                         }}

src/Components/Navbar/Search/SearchProjectCard/SearchProjectCard.tsx

@@ -1,4 +1,5 @@
-import { ProjectCard } from 'src/utils/interfaces'
+
+import { ProjectSearchItem } from '../query'
 import SearchProjectCardSkeleton from './SearchProjectCard.Skeleton'
 
 type Props =
@@ -8,7 +9,7 @@ type Props =
     |
     {
         loading?: false
-        project: ProjectCard
+        project: ProjectSearchItem
         onClick: (projectId: number) => void;
     }
 

src/Components/Navbar/Search/SearchResults/SearchResults.tsx

@@ -3,12 +3,13 @@ import { openModal } from 'src/redux/features/modals.slice';
 import { toggleSearch } from 'src/redux/features/ui.slice';
 import { useAppDispatch } from 'src/utils/hooks';
 import { ProjectCard } from 'src/utils/interfaces'
+import { ProjectSearchItem } from '../query';
 import SearchProjectCard from '../SearchProjectCard/SearchProjectCard';
 import styles from './styles.module.css'
 
 interface Props {
     isLoading?: boolean;
-    projects: ProjectCard[] | undefined,
+    projects: ProjectSearchItem[] | undefined,
 }
 
 export default function SearchResults({ projects, isLoading }: Props) {

src/Components/Navbar/Search/query.ts

@@ -1,5 +1,5 @@
 import { gql } from "@apollo/client";
-import { ProjectCard } from "src/utils/interfaces";
+import { ProjectCard, ProjectCategory } from "src/utils/interfaces";
 
 export const SEARCH_PROJECTS_QUERY = gql`
 query SEARCH_PROJECTS_QUERY($search: String!) {
@@ -17,9 +17,23 @@ query SEARCH_PROJECTS_QUERY($search: String!) {
 }
 `
 export type SEARCH_PROJECTS_QUERY_VARS = {
-    search: string;
+  search: string;
 }
 
+export type ProjectSearchItem =
+  (
+    Pick<ProjectCard,
+      | 'id'
+      | 'thumbnail_image'
+      | 'title'>
+    &
+    {
+      category: Pick<ProjectCategory,
+        | 'id'
+        | 'title'>
+    }
+  )
+
 export type SEARCH_PROJECTS_QUERY_RES_TYPE = {
-    searchProjects: ProjectCard[],
+  searchProjects: ProjectSearchItem[],
 }

src/mocks/handlers.ts

@@ -62,7 +62,6 @@ export const handlers = [
 
     graphql.query('HOTTEST_PROJECTS', async (req, res, ctx) => {
         await delay()
-        console.log(hottestProjects());
 
         return res(
             ctx.data({

src/pages/HottestPage/HottestPage.tsx

@@ -19,7 +19,6 @@ export default function HottestPage() {
         </div>
     }
 
-    console.log(data);
 
 
     return (