Merge branch 'master' into feat/full-text-search

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

@@ -18,17 +18,50 @@ import { withBasicProvider } from "src/utils/helperFunctions";
 import { ProjectsFiltersProvider, useProjectsFilters } from "./filters-context";
 import { setTheme } from "src/redux/features/ui.slice";
 import OgTags from "src/Components/OgTags/OgTags";
+import ErrorMessage from "src/Components/Errors/ErrorMessage/ErrorMessage";
+import { useExplorePageQuery, useGetFiltersQuery } from "src/graphql";
+import ProjectsGrid from "./ProjectsGrid/ProjectsGrid";
+import Categories, { Category } from "../../Components/Categories/Categories";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import Header from "./Header/Header";
+import Button from "src/Components/Button/Button";
+import { useAppDispatch } from "src/utils/hooks";
+import { openModal } from "src/redux/features/modals.slice";
+import { createAction } from "@reduxjs/toolkit";
+import { useReduxEffect } from "src/utils/hooks/useReduxEffect";
+import { NetworkStatus } from "@apollo/client";
+import { FiSliders } from "react-icons/fi";
+import { HiOutlineChevronDoubleDown } from "react-icons/hi";
+import { ProjectsFilters } from "./Filters/FiltersModal";
+import { useUpdateUrlWithFilters } from "./helpers";
+import { withBasicProvider } from "src/utils/helperFunctions";
+import { ProjectsFiltersProvider, useProjectsFilters } from "./filters-context";
+import { setTheme } from "src/redux/features/ui.slice";
+import OgTags from "src/Components/OgTags/OgTags";
 
 function ExplorePage() {
   const dispatch = useAppDispatch();
+  const dispatch = useAppDispatch();
 
+  const [canFetchMore, setCanFetchMore] = useState(true);
   const [canFetchMore, setCanFetchMore] = useState(true);
 
+  const { filters, updateFilters } = useProjectsFilters();
   const { filters, updateFilters } = useProjectsFilters();
 
+  useUpdateUrlWithFilters(filters);
+  const filtersQuery = useGetFiltersQuery();
   useUpdateUrlWithFilters(filters);
   const filtersQuery = useGetFiltersQuery();
 
+  const hiddenCategoriesIds = useMemo(() => {
+    if (filtersQuery.loading) return [];
+    return (
+      filtersQuery.data?.categoryList
+        ?.filter((c) => c?.isHidden)
+        .map((c) => c!.id!) ?? []
+    );
+  }, [filtersQuery.data?.categoryList, filtersQuery.loading]);
   const hiddenCategoriesIds = useMemo(() => {
     if (filtersQuery.loading) return [];
     return (
@@ -38,6 +71,13 @@ function ExplorePage() {
     );
   }, [filtersQuery.data?.categoryList, filtersQuery.loading]);
 
+  const { queryFilters, hasSearchFilters } = useMemo(
+    () =>
+      createQueryFilters(filters, {
+        hiddenCategoriesIds,
+      }),
+    [filters, hiddenCategoriesIds]
+  );
   const { queryFilters, hasSearchFilters } = useMemo(
     () =>
       createQueryFilters(filters, {
@@ -46,6 +86,18 @@ function ExplorePage() {
     [filters, hiddenCategoriesIds]
   );
 
+  const { data, networkStatus, error, fetchMore } = useExplorePageQuery({
+    variables: {
+      page: 1,
+      pageSize: PAGE_SIZE,
+      filter: queryFilters,
+    },
+    notifyOnNetworkStatusChange: true,
+    onCompleted: (data) => {
+      if ((data.projects?.length ?? 0) < PAGE_SIZE) setCanFetchMore(false);
+    },
+    skip: filtersQuery.loading,
+  });
   const { data, networkStatus, error, fetchMore } = useExplorePageQuery({
     variables: {
       page: 1,
@@ -59,6 +111,12 @@ function ExplorePage() {
     skip: filtersQuery.loading,
   });
 
+  const onFiltersUpdated = useCallback(
+    ({ payload }: typeof UPDATE_FILTERS_ACTION) => {
+      updateFilters(payload);
+    },
+    [updateFilters]
+  );
   const onFiltersUpdated = useCallback(
     ({ payload }: typeof UPDATE_FILTERS_ACTION) => {
       updateFilters(payload);
@@ -66,12 +124,19 @@ function ExplorePage() {
     [updateFilters]
   );
 
+  useReduxEffect(onFiltersUpdated, UPDATE_FILTERS_ACTION.type);
   useReduxEffect(onFiltersUpdated, UPDATE_FILTERS_ACTION.type);
 
+  useEffect(() => {
+    dispatch(setTheme("light"));
+  }, [dispatch]);
   useEffect(() => {
     dispatch(setTheme("light"));
   }, [dispatch]);
 
+  useEffect(() => {
+    setCanFetchMore(true);
+  }, [filters]);
   useEffect(() => {
     setCanFetchMore(true);
   }, [filters]);
@@ -208,6 +273,10 @@ const createQueryFilters = (
   let filter: QueryFilter = {};
   let hasSearchFilters = false;
 
+  const defaultFilters = {
+    status: "Published",
+  };
+
   if (filters?.categories) {
     filter.categoryId = filters?.categories.map((c) => c.id!);
     hasSearchFilters = true;
@@ -242,5 +311,5 @@ const createQueryFilters = (
   if (Object.keys(filter).length === 0)
     return { queryFilters: null, hasSearchFilters };
 
-  return { queryFilters: filter, hasSearchFilters };
+  return { queryFilters: { ...defaultFilters, ...filter }, hasSearchFilters };
 };