chore (explore page): clean up code

src/features/Projects/pages/ExplorePage/ExplorePage.tsx

@@ -19,67 +19,16 @@ import { useUpdateUrlWithFilters } from './helpers';
 import { withBasicProvider } from 'src/utils/helperFunctions';
 import { ProjectsFiltersProvider, useProjectsFilters } from './filters-context';
 
-const UPDATE_FILTERS_ACTION = createAction<Partial<ProjectsFilters>>('PROJECTS_FILTERS_UPDATED')({})
-
-
-type QueryFilter = Partial<{
-    categoryId: string[] | null
-    tags: string[] | null
-    yearFounded: number | null
-    dead: boolean | null
-    license: string | null
-}>
-
-const PAGE_SIZE = 28;
 
 function ExplorePage() {
 
     const dispatch = useAppDispatch();
-    const { filters, updateFilters } = useProjectsFilters();
 
-    const projectsLength = useRef<number>(0);
     const [canFetchMore, setCanFetchMore] = useState(true);
 
+    const { filters, updateFilters } = useProjectsFilters();
     useUpdateUrlWithFilters(filters)
-
-
-    const { queryFilters, hasSearchFilters } = useMemo(() => {
-        let filter: QueryFilter = {}
-        let hasSearchFilters = false;
-
-
-        if (filters?.categories) {
-            filter.categoryId = filters?.categories.map(c => c.id!);
-            hasSearchFilters = true;
-        }
-
-
-        if (filters?.tags) {
-            filter.tags = filters?.tags.map(t => t.id)
-            hasSearchFilters = true;
-        }
-
-        if (filters?.yearFounded) {
-            filter.yearFounded = Number(filters?.yearFounded)
-            hasSearchFilters = true;
-        }
-
-        if (filters?.projectStatus) {
-            filter.dead = filters?.projectStatus === 'alive' ? false : true;
-            hasSearchFilters = true;
-        }
-
-
-        if (filters?.projectLicense) {
-            filter.license = filters?.projectLicense
-            hasSearchFilters = true;
-        }
-
-        if (Object.keys(filter).length === 0)
-            return { queryFilters: null, hasSearchFilters }
-
-        return { queryFilters: filter, hasSearchFilters };
-    }, [filters])
+    const { queryFilters, hasSearchFilters } = useMemo(() => createQueryFilters(filters), [filters])
 
     const { data, networkStatus, error, fetchMore } = useExplorePageQuery({
         variables: {
@@ -94,9 +43,6 @@ function ExplorePage() {
     });
 
 
-    projectsLength.current = data?.projects?.length ?? 0;
-
-
     const onFiltersUpdated = useCallback(({ payload }: typeof UPDATE_FILTERS_ACTION) => {
         updateFilters(payload)
     }, [updateFilters])
@@ -171,17 +117,6 @@ function ExplorePage() {
                         {hasSearchFilters && <span className='absolute bg-primary-600 text-body6 text-white w-24 aspect-square rounded-full top-0 right-0 translate-x-1/3 -translate-y-1/3 flex justify-center border-2 border-white items-center '>{Object.keys(filters ?? {}).length}</span>}
                     </Button>
                 </div>
-                {/* <div className="flex justify-end mb-12 md:mb-24 my-24">
-                    <label className='flex gap-16 items-center'>
-                        <input
-                            disabled={hasDeadProjectsFilter}
-                            checked={showDeadProjects}
-                            className='input-checkbox self-center'
-                            onChange={e => setShowDeadProjects(v => !v)}
-                            type="checkbox" />
-                        <span className={`text-body4 text-gray-800 ${hasDeadProjectsFilter && 'opacity-60'}`}>Show dead projects {deadProjectsCount !== undefined && `(${deadProjectsCount})`}</span>
-                    </label>
-                </div> */}
                 <ProjectsGrid
                     isLoading={isLoading}
                     isLoadingMore={isLoadingMore}
@@ -195,4 +130,56 @@ function ExplorePage() {
     )
 }
 
-export default withBasicProvider(ProjectsFiltersProvider, ExplorePage);
+export default withBasicProvider(ProjectsFiltersProvider, ExplorePage);
+
+
+const UPDATE_FILTERS_ACTION = createAction<Partial<ProjectsFilters>>('PROJECTS_FILTERS_UPDATED')({})
+
+const PAGE_SIZE = 28;
+
+type QueryFilter = Partial<{
+    categoryId: string[] | null
+    tags: string[] | null
+    yearFounded: number | null
+    dead: boolean | null
+    license: string | null
+}>
+
+
+const createQueryFilters = (filters: Partial<ProjectsFilters> | null) => {
+    let filter: QueryFilter = {}
+    let hasSearchFilters = false;
+
+
+    if (filters?.categories) {
+        filter.categoryId = filters?.categories.map(c => c.id!);
+        hasSearchFilters = true;
+    }
+
+
+    if (filters?.tags) {
+        filter.tags = filters?.tags.map(t => t.id)
+        hasSearchFilters = true;
+    }
+
+    if (filters?.yearFounded) {
+        filter.yearFounded = Number(filters?.yearFounded)
+        hasSearchFilters = true;
+    }
+
+    if (filters?.projectStatus) {
+        filter.dead = filters?.projectStatus === 'alive' ? false : true;
+        hasSearchFilters = true;
+    }
+
+
+    if (filters?.projectLicense) {
+        filter.license = filters?.projectLicense
+        hasSearchFilters = true;
+    }
+
+    if (Object.keys(filter).length === 0)
+        return { queryFilters: null, hasSearchFilters }
+
+    return { queryFilters: filter, hasSearchFilters };
+}

src/features/Projects/pages/ExplorePage/Header/Header.tsx

@@ -30,14 +30,6 @@ export default function Header(props: Props) {
     return (
         <div className='h-[280px] rounded-20 overflow-hidden relative text-center flex flex-col justify-center items-center gap-8'>
             <img src={ASSETS.CoverImage} alt="" className='absolute inset-0 opacity-100 w-full h-full object-cover object-bottom z-[-1]' />
-            {/* <div className='absolute inset-0 w-full h-full bg-gray-300 bg-opacity-50   z-[-1]' /> */}
-            {/* <Link
-                to={PAGES_ROUTES.projects.default}
-                className="
-              w-[48px] h-[48px] bg-white hover:bg-gray-200 
-              absolute top-24 left-24 md:top-1/2 md:left-40 md:-translate-y-1/2
-               rounded-full text-center flex justify-center items-center">
-                <FiArrowLeft className=' inline-block text-body2 lg:text-body1' /></Link> */}
             <div className="content-container">
                 <div className="flex flex-col justify-center items-center gap-8">
                     <h1

src/utils/apollo.ts

@@ -1,7 +1,6 @@
 import { ApolloClient, HttpLink, InMemoryCache, from, Reference, FieldPolicy } from "@apollo/client";
 import { onError } from "@apollo/client/link/error";
 import { RetryLink } from "@apollo/client/link/retry";
-import { CONSTS } from "src/utils";
 
 let apiClientUri = "https://api.baseql.com/airtable/graphql/app7wOLbDNm617R18";
 
@@ -48,9 +47,6 @@ export const apolloClient = new ApolloClient({
         httpLink
     ]),
     cache: new InMemoryCache({
-        possibleTypes: {
-            BaseUser: ['User', 'MyProfile']
-        },
         typePolicies: {
             Query: {
                 fields: {