From a78e41a7b2a5349d3da2014e323cb91ba9f722ac Mon Sep 17 00:00:00 2001 From: MTG2000 Date: Tue, 8 Nov 2022 11:24:48 +0200 Subject: [PATCH] update: unify category filter, update projects sorting, update nav logo --- public/assets/images/logo-light.png | Bin 0 -> 2333 bytes src/Components/Navbar/NavDesktop.tsx | 5 ++-- src/assets/images/logo-light.png | Bin 0 -> 2333 bytes src/assets/index.ts | 3 +- .../Components/Categories/Categories.tsx | 4 +-- .../pages/ExplorePage/ExplorePage.tsx | 28 +++++------------- .../ExplorePage/Filters/FiltersModal.tsx | 13 ++++---- .../pages/ExplorePage/Filters/filters.graphql | 1 + .../pages/ExplorePage/Header/Header.tsx | 19 +++++------- .../pages/ExplorePage/explorePage.graphql | 7 ++++- src/graphql/index.tsx | 10 +++++-- 11 files changed, 44 insertions(+), 46 deletions(-) create mode 100644 public/assets/images/logo-light.png create mode 100644 src/assets/images/logo-light.png diff --git a/public/assets/images/logo-light.png b/public/assets/images/logo-light.png new file mode 100644 index 0000000000000000000000000000000000000000..28e29dd4f4c9b66e6c86f2cc78ece070c1a9359f GIT binary patch literal 2333 zcmV+&3F7vNP)cvkPhj%|;NzYoZgT?;1G9TU zoYufZxbe(5WX4qO_jRj9BlVvQlM%8-cl~5#WoCW(l~f)>WRK8KDv>h0ErRr)>whG1eq42SBP}I01X|;Uc zZ~C3~Kg?9{U&W#=CSAhRHT->Kt?WExF?}!KPH|at;@+$1lB#_P1sX-i`0m+EtyI!C zSp257x~8hD&dEDt>}J0UG5s|Deq!#88yq<_MpVCio;T{Y@wn2D^1-B~V8@Qx@6+Y! z8tmABK|JTo8RzJ0tRjuL{bQ4JhjbTMd(r=JvJtq)t*Oy+(x<4?1*dSc_%pRT_)H^C zrZLx9+vOgDx}N74i(@_=|3~$1j@ew7Docj) za2W)cTlB9^o6(@K%v+?vDg)5}aJnsh%GYwMT7u7aKc`z_{ASsd_plIg4k_2^E_Hw| z^6Byakfp);| z#PhMW2JR%gw2ga*q{~qT6bDxsBWpm@eqx+po5qum}((Un9Tqw1B+Z8K|( zs2?o6i7kH%1w#v~8$-NY19JhvI{)`ye`%PTfo(VVx{{Q9l`>p<&lLk#{;!Y_dx;DL^ZW|T@Z`6VMZ0o&u2Dl4f!&7<8im* zndvcvwTML(Shhw8o_6|Fel0J!DZYQ?BeU(WhCn7Nj9Q(uO$KacBb6f>u^jrn-IoGF zjO4m7Ql3O0P1P(&LBaXJ1F=aTPiupugE6JXAUhlS`|MQSph+0%uavwqA<~Cww9@+D z>3P;*opkBGu0IBoP(;+aU1Y--sSOxkP%XD23({o(qj4r&{? z6)Ca+L8Qaq8dMCF+%E>e^alL-N4z}_JamPwA4jRil+;yFk9W#2%b?90FntFxUv7;%SudlLnH z9&WSbMB(>DyNTp-Jyp@rAj(i#WSWp^X&f zt8ByX9rx*2q^nrwfLXw;UBuVY-qTXBa!*DHKp2eE!?&`17p0TbkJV$mT?a~V7Xr$n ztu!r@<8E0L7Qrv`splyS%YM1 zo@;bE((TBwrN9sq;C0tY&-XxKLahxhbcz^1X{@LpzD`BwK+ggw2;2>lsd?NCB}|jB z@X$~-@jXvrj774FuGuC4c2hxNK)<-2pdStH2wc-T_mKdvyMGV8uEwrl;(El*&?>2y za85k2x2c)t`toF+gfMm$te;&^4bH$tY~ocFD#mKN`sx6mEOcZ6Ax3KQPd^vec}ZNS!fjF6?|P)t1HO6hdqr*hG}tdmn1=2v|2~%UQfb6 z;m+`04t}44kx~m9`Wk&UDjd4S5uapLOgR!2B`SZuOrq_B#f8DUnN>`cGUkxh?^liC zr_aveh(8W~H?Cj)`1Pmg-Qd&lSrs$&<&Ud>OFq-51VOKH(ICU+qicBq_ zquMw6pAu4ObO*<;Slmhx0--O?lJq+nYkYW*uuEouWGf~;2vTs5B3dDXW|(dz{pSSn z+yBf|`_KhM%2}%$(a!@|c>(UeiSwWBbEF0SfUGyFI>%qN=rRE05pO-eMezqO zAZan-FHy`3*3S|zQwggzfYwKFsq?_4TA%kHgYf-75&*_js~`CY00000NkvXXu0mjf D2zY)l literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..28e29dd4f4c9b66e6c86f2cc78ece070c1a9359f GIT binary patch literal 2333 zcmV+&3F7vNP)cvkPhj%|;NzYoZgT?;1G9TU zoYufZxbe(5WX4qO_jRj9BlVvQlM%8-cl~5#WoCW(l~f)>WRK8KDv>h0ErRr)>whG1eq42SBP}I01X|;Uc zZ~C3~Kg?9{U&W#=CSAhRHT->Kt?WExF?}!KPH|at;@+$1lB#_P1sX-i`0m+EtyI!C zSp257x~8hD&dEDt>}J0UG5s|Deq!#88yq<_MpVCio;T{Y@wn2D^1-B~V8@Qx@6+Y! z8tmABK|JTo8RzJ0tRjuL{bQ4JhjbTMd(r=JvJtq)t*Oy+(x<4?1*dSc_%pRT_)H^C zrZLx9+vOgDx}N74i(@_=|3~$1j@ew7Docj) za2W)cTlB9^o6(@K%v+?vDg)5}aJnsh%GYwMT7u7aKc`z_{ASsd_plIg4k_2^E_Hw| z^6Byakfp);| z#PhMW2JR%gw2ga*q{~qT6bDxsBWpm@eqx+po5qum}((Un9Tqw1B+Z8K|( zs2?o6i7kH%1w#v~8$-NY19JhvI{)`ye`%PTfo(VVx{{Q9l`>p<&lLk#{;!Y_dx;DL^ZW|T@Z`6VMZ0o&u2Dl4f!&7<8im* zndvcvwTML(Shhw8o_6|Fel0J!DZYQ?BeU(WhCn7Nj9Q(uO$KacBb6f>u^jrn-IoGF zjO4m7Ql3O0P1P(&LBaXJ1F=aTPiupugE6JXAUhlS`|MQSph+0%uavwqA<~Cww9@+D z>3P;*opkBGu0IBoP(;+aU1Y--sSOxkP%XD23({o(qj4r&{? z6)Ca+L8Qaq8dMCF+%E>e^alL-N4z}_JamPwA4jRil+;yFk9W#2%b?90FntFxUv7;%SudlLnH z9&WSbMB(>DyNTp-Jyp@rAj(i#WSWp^X&f zt8ByX9rx*2q^nrwfLXw;UBuVY-qTXBa!*DHKp2eE!?&`17p0TbkJV$mT?a~V7Xr$n ztu!r@<8E0L7Qrv`splyS%YM1 zo@;bE((TBwrN9sq;C0tY&-XxKLahxhbcz^1X{@LpzD`BwK+ggw2;2>lsd?NCB}|jB z@X$~-@jXvrj774FuGuC4c2hxNK)<-2pdStH2wc-T_mKdvyMGV8uEwrl;(El*&?>2y za85k2x2c)t`toF+gfMm$te;&^4bH$tY~ocFD#mKN`sx6mEOcZ6Ax3KQPd^vec}ZNS!fjF6?|P)t1HO6hdqr*hG}tdmn1=2v|2~%UQfb6 z;m+`04t}44kx~m9`Wk&UDjd4S5uapLOgR!2B`SZuOrq_B#f8DUnN>`cGUkxh?^liC zr_aveh(8W~H?Cj)`1Pmg-Qd&lSrs$&<&Ud>OFq-51VOKH(ICU+qicBq_ zquMw6pAu4ObO*<;Slmhx0--O?lJq+nYkYW*uuEouWGf~;2vTs5B3dDXW|(dz{pSSn z+yBf|`_KhM%2}%$(a!@|c>(UeiSwWBbEF0SfUGyFI>%qN=rRE05pO-eMezqO zAZan-FHy`3*3S|zQwggzfYwKFsq?_4TA%kHgYf-75&*_js~`CY00000NkvXXu0mjf D2zY)l literal 0 HcmV?d00001 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