diff --git a/public/assets/images/logo-light.png b/public/assets/images/logo-light.png new file mode 100644 index 0000000..28e29dd Binary files /dev/null and b/public/assets/images/logo-light.png differ diff --git a/src/Components/Navbar/NavDesktop.tsx b/src/Components/Navbar/NavDesktop.tsx index 27166ae..d82bf44 100644 --- a/src/Components/Navbar/NavDesktop.tsx +++ b/src/Components/Navbar/NavDesktop.tsx @@ -41,8 +41,9 @@ export default function NavDesktop() {
-

- Bolt fun logo +

+ Lightning Landscape Logo + Lightning Landscape

diff --git a/src/assets/images/logo-light.png b/src/assets/images/logo-light.png new file mode 100644 index 0000000..28e29dd Binary files /dev/null and b/src/assets/images/logo-light.png differ diff --git a/src/assets/index.ts b/src/assets/index.ts index 8a8e4db..a017beb 100644 --- a/src/assets/index.ts +++ b/src/assets/index.ts @@ -3,7 +3,8 @@ import Images_ExploreHeader2 from './images/shock-the-web.jpg' import Category_BG from './images/category-bg.jpg' import Image_Hottest_Header from './images/hottest.jfif' import Logo from './images/logo.png' +import LogoLight from './images/logo-light.png' -const ASSETS = { Images_ExploreHeader1, Images_ExploreHeader2, Image_Hottest_Header, Logo, Category_BG } +const ASSETS = { Images_ExploreHeader1, Images_ExploreHeader2, Image_Hottest_Header, Logo, LogoLight, Category_BG } export default ASSETS; \ No newline at end of file diff --git a/src/features/Projects/Components/Categories/Categories.tsx b/src/features/Projects/Components/Categories/Categories.tsx index 4deb0e3..d15bf0b 100644 --- a/src/features/Projects/Components/Categories/Categories.tsx +++ b/src/features/Projects/Components/Categories/Categories.tsx @@ -1,6 +1,6 @@ import { useNavigate } from 'react-router-dom'; -import { CategoryList, useAllCategoriesQuery } from 'src/graphql'; +import { CategoryList, useAllCategoriesQuery, useGetFiltersQuery } from 'src/graphql'; import { FaChevronLeft, FaChevronRight } from 'react-icons/fa'; import { useCarousel } from 'src/utils/hooks'; import Skeleton from 'react-loading-skeleton'; @@ -31,7 +31,7 @@ export default function Categories(props: Props) { align: 'start', slidesToScroll: 2, containScroll: "trimSnaps", }) - const { data, loading } = useAllCategoriesQuery(); + const { data, loading } = useGetFiltersQuery(); if (loading || !data) diff --git a/src/features/Projects/pages/ExplorePage/ExplorePage.tsx b/src/features/Projects/pages/ExplorePage/ExplorePage.tsx index ca9ff88..923ec8b 100644 --- a/src/features/Projects/pages/ExplorePage/ExplorePage.tsx +++ b/src/features/Projects/pages/ExplorePage/ExplorePage.tsx @@ -4,7 +4,7 @@ import { useExplorePageQuery } from 'src/graphql'; import ProjectsGrid from './ProjectsGrid/ProjectsGrid'; import { Helmet } from "react-helmet"; import Categories, { Category } from '../../Components/Categories/Categories'; -import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; +import { useCallback, useMemo, useRef, useState } from 'react'; import Header from './Header/Header'; import Button from 'src/Components/Button/Button'; import { useAppDispatch } from 'src/utils/hooks'; @@ -15,7 +15,7 @@ import { NetworkStatus } from '@apollo/client'; import { FiSliders } from 'react-icons/fi'; import { HiOutlineChevronDoubleDown } from 'react-icons/hi' import { ProjectsFilters } from './Filters/FiltersModal'; -import { getFiltersFromUrl, useUpdateUrlWithFilters } from './helpers'; +import { useUpdateUrlWithFilters } from './helpers'; import { withBasicProvider } from 'src/utils/helperFunctions'; import { ProjectsFiltersProvider, useProjectsFilters } from './filters-context'; @@ -35,12 +35,9 @@ const PAGE_SIZE = 28; function ExplorePage() { const dispatch = useAppDispatch(); - const { filters, updateFilters } = useProjectsFilters(); - const [selectedCategory, setSelectedCategory] = useState(null) const projectsLength = useRef(0); - const [showDeadProjects, setShowDeadProjects] = useState(false) const [canFetchMore, setCanFetchMore] = useState(true); useUpdateUrlWithFilters(filters) @@ -50,13 +47,12 @@ function ExplorePage() { let filter: QueryFilter = {} let hasSearchFilters = false; - const defaultFilters = {} as const; if (filters?.categories) { - filter.categoryId = filters?.categories.map(c => c.id); + filter.categoryId = filters?.categories.map(c => c.id!); hasSearchFilters = true; } - if (selectedCategory?.id) filter.categoryId = [selectedCategory?.id] + if (filters?.tags) { filter.tags = filters?.tags.map(t => t.id) @@ -83,7 +79,7 @@ function ExplorePage() { return { queryFilters: null, hasSearchFilters } return { queryFilters: filter, hasSearchFilters }; - }, [filters, selectedCategory?.id]) + }, [filters]) const { data, networkStatus, error, fetchMore } = useExplorePageQuery({ variables: { @@ -102,7 +98,6 @@ function ExplorePage() { const onFiltersUpdated = useCallback(({ payload }: typeof UPDATE_FILTERS_ACTION) => { - setSelectedCategory(null) setCanFetchMore(true); updateFilters(payload) }, [updateFilters]) @@ -129,11 +124,7 @@ function ExplorePage() { } const selectCategoryTab = (category: Category | null) => { - if (filters) { - const { categories, ...filtersWithoutCategory } = filters - updateFilters(filtersWithoutCategory) - } - setSelectedCategory(category); + updateFilters({ ...(filters ?? {}), categories: category ? [category] : undefined }) setCanFetchMore(true); } @@ -150,9 +141,6 @@ function ExplorePage() {
} - const deadProjectsCount = data?.projects?.filter(p => p?.dead).length; - const hasDeadProjectsFilter = filters?.projectStatus === 'dead'; - const isLoading = networkStatus === NetworkStatus.loading || networkStatus === NetworkStatus.refetch || networkStatus === NetworkStatus.setVariables; const isLoadingMore = networkStatus === NetworkStatus.fetchMore; const canLoadMore = !isLoading && !isLoadingMore && data?.projects && data.projects.length > 0 && canFetchMore; @@ -165,11 +153,11 @@ function ExplorePage() {
-
selectCategoryTab(v)} />
+
selectCategoryTab(v)} />
)} {query.loading && diff --git a/src/features/Projects/pages/ExplorePage/Filters/filters.graphql b/src/features/Projects/pages/ExplorePage/Filters/filters.graphql index f2830cb..56f9950 100644 --- a/src/features/Projects/pages/ExplorePage/Filters/filters.graphql +++ b/src/features/Projects/pages/ExplorePage/Filters/filters.graphql @@ -3,6 +3,7 @@ query GetFilters { id name icon + projectsCount } tags { id diff --git a/src/features/Projects/pages/ExplorePage/Header/Header.tsx b/src/features/Projects/pages/ExplorePage/Header/Header.tsx index ab30212..0b558ce 100644 --- a/src/features/Projects/pages/ExplorePage/Header/Header.tsx +++ b/src/features/Projects/pages/ExplorePage/Header/Header.tsx @@ -1,12 +1,7 @@ -import React from 'react' -import { FiArrowLeft } from 'react-icons/fi' + import { MdClose } from 'react-icons/md' -import Skeleton from 'react-loading-skeleton' -import { Link } from 'react-router-dom' -import ASSETS from 'src/assets' import Badge from 'src/Components/Badge/Badge' import { Category } from 'src/features/Projects/Components/Categories/Categories' -import { PAGES_ROUTES } from 'src/utils/routing' import { useProjectsFilters } from '../filters-context' type Props = { @@ -23,16 +18,16 @@ export default function Header(props: Props) { const onSearchPage = !onCategoryPage && !filtersEmpty - const title = onCategoryPage ? `${props.selectedCategry?.projectsCount} projects` : - filtersEmpty ? "Discover 1,592 lightning projects" : "Search results"; + const title = onCategoryPage ? `${props.selectedCategry?.name} projects` : + filtersEmpty ? "Discover 1,592 lightning projects" : "All lightning projects"; - const subtitle = onCategoryPage ? props.selectedCategry?.name : + const subtitle = onCategoryPage ? "" : filtersEmpty ? "Explore a directory of lightning startups, projects, and companies" : "" return ( -
+
{/*
*/} {/*

filtered by

+ {filters?.categories && filters.categories.length > 0 && Category: {filters.categories[0].name} } + {filters?.tags && filters.tags.length > 0 && 🏷️ {filters.tags.map(t => t.label).join(', ')} } {filters?.yearFounded && 📆 Founded in {filters.yearFounded} } {filters?.projectStatus && 🌱 Status: {filters?.projectStatus} } {filters?.projectLicense && 💻 {filters.projectLicense} } - {filters?.categories && filters.categories.length > 0 && Category: {filters.categories[0].label} } - {filters?.tags && filters.tags.length > 0 && 🏷️ {filters.tags.map(t => t.label).join(', ')} }
}
diff --git a/src/features/Projects/pages/ExplorePage/explorePage.graphql b/src/features/Projects/pages/ExplorePage/explorePage.graphql index fef7401..0437776 100644 --- a/src/features/Projects/pages/ExplorePage/explorePage.graphql +++ b/src/features/Projects/pages/ExplorePage/explorePage.graphql @@ -1,5 +1,10 @@ query ExplorePage($filter: JSON, $page: JSON, $pageSize: JSON) { - projects(_filter: $filter, _page: $page, _page_size: $pageSize) { + projects( + _order_by: ["dead", "title"] + _filter: $filter + _page: $page + _page_size: $pageSize + ) { id title logo diff --git a/src/graphql/index.tsx b/src/graphql/index.tsx index f335e9d..535f778 100644 --- a/src/graphql/index.tsx +++ b/src/graphql/index.tsx @@ -411,7 +411,7 @@ export type AllCategoriesQuery = { __typename?: 'Query', categoryList: Array<{ _ export type GetFiltersQueryVariables = Exact<{ [key: string]: never; }>; -export type GetFiltersQuery = { __typename?: 'Query', categoryList: Array<{ __typename?: 'categoryList', id: string | null, name: string | null, icon: string | null } | null> | null, tags: Array<{ __typename?: 'tags', id: string | null, name: string | null, icon: string | null } | null> | null }; +export type GetFiltersQuery = { __typename?: 'Query', categoryList: Array<{ __typename?: 'categoryList', id: string | null, name: string | null, icon: string | null, projectsCount: string | null } | null> | null, tags: Array<{ __typename?: 'tags', id: string | null, name: string | null, icon: string | null } | null> | null }; export type ExplorePageQueryVariables = Exact<{ filter: InputMaybe; @@ -475,6 +475,7 @@ export const GetFiltersDocument = gql` id name icon + projectsCount } tags { id @@ -512,7 +513,12 @@ export type GetFiltersLazyQueryHookResult = ReturnType; export const ExplorePageDocument = gql` query ExplorePage($filter: JSON, $page: JSON, $pageSize: JSON) { - projects(_filter: $filter, _page: $page, _page_size: $pageSize) { + projects( + _order_by: ["dead", "title"] + _filter: $filter + _page: $page + _page_size: $pageSize + ) { id title logo