From 636e94bf8f7de38ae4daaf4d59ddaa8958283710 Mon Sep 17 00:00:00 2001 From: Cherik Date: Mon, 6 May 2024 23:06:52 +0330 Subject: [PATCH 01/12] show-static-page-speed --- pages/projects/[slug].tsx | 142 ------------------------------------ pages/projects/all.tsx | 99 +++++++++++++++++++++++++ pages/qf-archive/[slug].tsx | 2 +- pages/qf/[slug].tsx | 2 +- 4 files changed, 101 insertions(+), 144 deletions(-) delete mode 100644 pages/projects/[slug].tsx create mode 100644 pages/projects/all.tsx diff --git a/pages/projects/[slug].tsx b/pages/projects/[slug].tsx deleted file mode 100644 index 0188c50efd..0000000000 --- a/pages/projects/[slug].tsx +++ /dev/null @@ -1,142 +0,0 @@ -import { GetServerSideProps } from 'next/types'; -import { IMainCategory, IProject, IQFRound } from '@/apollo/types/types'; -import { transformGraphQLErrorsToStatusCode } from '@/helpers/requests'; -import { initializeApollo } from '@/apollo/apolloClient'; -import { OPTIONS_HOME_PROJECTS } from '@/apollo/gql/gqlOptions'; -import { - FETCH_ALL_PROJECTS, - FETCH_MAIN_CATEGORIES, -} from '@/apollo/gql/gqlProjects'; -import { GeneralMetatags } from '@/components/Metatag'; -import ProjectsIndex from '@/components/views/projects/ProjectsIndex'; -import { useReferral } from '@/hooks/useReferral'; -import { projectsMetatags } from '@/content/metatags'; -import { ProjectsProvider } from '@/context/projects.context'; -import { FETCH_QF_ROUNDS } from '@/apollo/gql/gqlQF'; -import { getMainCategorySlug } from '@/helpers/projects'; -import { EProjectsSortBy } from '@/apollo/types/gqlEnums'; - -export interface IProjectsRouteProps { - projects: IProject[]; - totalCount: number; - mainCategories: IMainCategory[]; - qfRounds: IQFRound[]; -} - -export const allCategoriesItem = { - title: 'All', - description: '', - banner: '', - slug: 'all', - categories: [], - selected: false, -}; - -interface IProjectsCategoriesRouteProps extends IProjectsRouteProps { - selectedMainCategory: IMainCategory; -} - -const ProjectsCategoriesRoute = (props: IProjectsCategoriesRouteProps) => { - const { - projects, - mainCategories, - selectedMainCategory, - totalCount, - qfRounds, - } = props; - - useReferral(); - - return ( - - - - - ); -}; - -export const getServerSideProps: GetServerSideProps = async context => { - const apolloClient = initializeApollo(); - const { variables, notifyOnNetworkStatusChange } = OPTIONS_HOME_PROJECTS; - try { - const { query } = context; - const slug = query.slug; - - const { - data: { mainCategories }, - }: { - data: { mainCategories: IMainCategory[] }; - } = await apolloClient.query({ - query: FETCH_MAIN_CATEGORIES, - fetchPolicy: 'network-only', - }); - - const updatedMainCategory = [allCategoriesItem, ...mainCategories]; - const selectedMainCategory = updatedMainCategory.find(mainCategory => { - return mainCategory.slug === slug; - }); - - if (selectedMainCategory) { - const updatedSelectedMainCategory = { - ...selectedMainCategory, - selected: true, - }; - const apolloClient = initializeApollo(); - const { data } = await apolloClient.query({ - query: FETCH_ALL_PROJECTS, - variables: { - ...variables, - sortingBy: query.sort || EProjectsSortBy.INSTANT_BOOSTING, - searchTerm: query.searchTerm, - filters: query.filter - ? Array.isArray(query.filter) - ? query.filter - : [query.filter] - : null, - campaignSlug: query.campaignSlug, - category: query.category, - mainCategory: getMainCategorySlug( - updatedSelectedMainCategory, - ), - notifyOnNetworkStatusChange, - }, - fetchPolicy: 'network-only', - }); - const { projects, totalCount } = data.allProjects; - const { - data: { qfRounds }, - } = await apolloClient.query({ - query: FETCH_QF_ROUNDS, - fetchPolicy: 'network-only', - }); - return { - props: { - projects, - mainCategories: updatedMainCategory, - selectedMainCategory: updatedSelectedMainCategory, - totalCount, - qfRounds, - }, - }; - } - return { - notFound: true, - }; - } catch (error: any) { - const statusCode = transformGraphQLErrorsToStatusCode( - error?.graphQLErrors, - ); - return { - props: { - errorStatus: statusCode, - }, - }; - } -}; - -export default ProjectsCategoriesRoute; diff --git a/pages/projects/all.tsx b/pages/projects/all.tsx new file mode 100644 index 0000000000..8579ca72a2 --- /dev/null +++ b/pages/projects/all.tsx @@ -0,0 +1,99 @@ +import { GetStaticProps } from 'next/types'; +import { IMainCategory, IProject, IQFRound } from '@/apollo/types/types'; +import { initializeApollo } from '@/apollo/apolloClient'; +import { + FETCH_ALL_PROJECTS, + FETCH_MAIN_CATEGORIES, +} from '@/apollo/gql/gqlProjects'; +import { GeneralMetatags } from '@/components/Metatag'; +import ProjectsIndex from '@/components/views/projects/ProjectsIndex'; +import { projectsMetatags } from '@/content/metatags'; +import { ProjectsProvider } from '@/context/projects.context'; +import { EProjectsSortBy } from '@/apollo/types/gqlEnums'; +import { FETCH_QF_ROUNDS } from '@/apollo/gql/gqlQF'; + +export interface IProjectsRouteProps { + projects: IProject[]; + totalCount: number; + mainCategories: IMainCategory[]; + qfRounds: IQFRound[]; +} + +export const allCategoriesItem = { + title: 'All', + description: '', + banner: '', + slug: 'all', + categories: [], + selected: false, +}; + +interface IProjectsCategoriesRouteProps extends IProjectsRouteProps { + selectedMainCategory: IMainCategory; +} + +const ProjectsCategoriesRoute = (props: IProjectsCategoriesRouteProps) => { + const { + projects, + mainCategories, + selectedMainCategory, + totalCount, + qfRounds, + } = props; + console.log('props', props); + + return ( + + + + + ); +}; + +export const getStaticProps: GetStaticProps = async () => { + const apolloClient = initializeApollo(); + + try { + // Fetch main categories + const { data: mainCategoriesData } = await apolloClient.query({ + query: FETCH_MAIN_CATEGORIES, + fetchPolicy: 'no-cache', // Adjust based on your caching policy needs + }); + + // Fetch projects with a predefined sorting + const { data: projectsData } = await apolloClient.query({ + query: FETCH_ALL_PROJECTS, + variables: { sortingBy: EProjectsSortBy.INSTANT_BOOSTING }, + fetchPolicy: 'no-cache', + }); + + // Fetch qualification rounds + const { data: qfRoundsData } = await apolloClient.query({ + query: FETCH_QF_ROUNDS, + fetchPolicy: 'no-cache', + }); + + return { + props: { + projects: projectsData.allProjects.projects, + totalCount: projectsData.allProjects.totalCount, + mainCategories: [ + allCategoriesItem, + ...mainCategoriesData.mainCategories, + ], + qfRounds: qfRoundsData.qfRounds, + }, + revalidate: 3600, // Optionally, revalidate at most once per hour + }; + } catch (error) { + console.error('Failed to fetch API:', error); + return { props: { hasError: true } }; + } +}; + +export default ProjectsCategoriesRoute; diff --git a/pages/qf-archive/[slug].tsx b/pages/qf-archive/[slug].tsx index 60edda6f56..ca00c69e6f 100644 --- a/pages/qf-archive/[slug].tsx +++ b/pages/qf-archive/[slug].tsx @@ -13,7 +13,7 @@ import { projectsMetatags } from '@/content/metatags'; import { ProjectsProvider } from '@/context/projects.context'; import { FETCH_QF_ROUNDS } from '@/apollo/gql/gqlQF'; import { useReferral } from '@/hooks/useReferral'; -import { IProjectsRouteProps, allCategoriesItem } from 'pages/projects/[slug]'; +import { IProjectsRouteProps, allCategoriesItem } from 'pages/projects/all'; import { EProjectsSortBy } from '@/apollo/types/gqlEnums'; interface IProjectsCategoriesRouteProps extends IProjectsRouteProps { diff --git a/pages/qf/[slug].tsx b/pages/qf/[slug].tsx index 9221a38b10..304e8bc151 100644 --- a/pages/qf/[slug].tsx +++ b/pages/qf/[slug].tsx @@ -13,7 +13,7 @@ import { projectsMetatags } from '@/content/metatags'; import { ProjectsProvider } from '@/context/projects.context'; import { FETCH_QF_ROUNDS } from '@/apollo/gql/gqlQF'; import { useReferral } from '@/hooks/useReferral'; -import { IProjectsRouteProps, allCategoriesItem } from 'pages/projects/[slug]'; +import { IProjectsRouteProps, allCategoriesItem } from 'pages/projects/all'; import { getMainCategorySlug } from '@/helpers/projects'; import { EProjectsSortBy } from '@/apollo/types/gqlEnums'; From d054b1be9a9b29fbeaa45b40d14c0858a04af21b Mon Sep 17 00:00:00 2001 From: Cherik Date: Mon, 13 May 2024 19:18:29 +0330 Subject: [PATCH 02/12] fix apollo client config --- src/apollo/apolloClient.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/apollo/apolloClient.ts b/src/apollo/apolloClient.ts index d89253265c..244301e0ff 100644 --- a/src/apollo/apolloClient.ts +++ b/src/apollo/apolloClient.ts @@ -151,7 +151,7 @@ function createApolloClient() { return new ApolloClient({ ssrMode, - link: errorLink.concat(authLink.concat(httpLink.concat(retryLink))), + link: ApolloLink.from([errorLink, authLink, retryLink, httpLink]), cache: new InMemoryCache({ addTypename: false, }), From 2159302f3a7ad3ca0a39b7a6a9f6e9abd5f52f35 Mon Sep 17 00:00:00 2001 From: Cherik Date: Mon, 13 May 2024 19:34:16 +0330 Subject: [PATCH 03/12] fix abi error --- src/components/cards/MintCard.tsx | 5 ++++- src/components/modals/Mint/MintModal.tsx | 4 +++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/cards/MintCard.tsx b/src/components/cards/MintCard.tsx index 910432237a..f7d5da3941 100644 --- a/src/components/cards/MintCard.tsx +++ b/src/components/cards/MintCard.tsx @@ -18,12 +18,15 @@ import { readContracts, readContract } from '@wagmi/core'; import { MintModal } from '../modals/Mint/MintModal'; import { formatWeiHelper } from '@/helpers/number'; import config from '@/configuration'; -import { abi as PFP_ABI } from '@/artifacts/pfpGiver.json'; +import pfpJson from '@/artifacts/pfpGiver.json'; import { InsufficientFundModal } from '../modals/InsufficientFund'; import { usePFPMintData } from '@/context/pfpmint.context'; import { useGeneralWallet } from '@/providers/generalWalletProvider'; import { wagmiConfig } from '@/wagmiConfigs'; import { getReadContractResult } from '@/lib/contracts'; + +const { abi: PFP_ABI } = pfpJson; + const MIN_NFT_QTY = 1; interface IpfpContractData { diff --git a/src/components/modals/Mint/MintModal.tsx b/src/components/modals/Mint/MintModal.tsx index d6ea0d3e65..713bf897b7 100644 --- a/src/components/modals/Mint/MintModal.tsx +++ b/src/components/modals/Mint/MintModal.tsx @@ -18,7 +18,7 @@ import { formatWeiHelper } from '@/helpers/number'; import { waitForTransaction } from '@/lib/transaction'; import { approveERC20tokenTransfer } from '@/lib/stakingPool'; import config from '@/configuration'; -import { abi as PFP_ABI } from '@/artifacts/pfpGiver.json'; +import pfpJson from '@/artifacts/pfpGiver.json'; import { EPFPMinSteps, usePFPMintData } from '@/context/pfpmint.context'; import { MintSteps } from './MintSteps'; import { wagmiConfig } from '@/wagmiConfigs'; @@ -29,6 +29,8 @@ export enum MintStep { MINTING, } +const { abi: PFP_ABI } = pfpJson; + interface IMintModalProps extends IModal { qty: number; nftPrice?: bigint; From 7fc9d1466a8af858359ff5e951fcca2814baa3e6 Mon Sep 17 00:00:00 2001 From: Cherik Date: Mon, 13 May 2024 19:34:31 +0330 Subject: [PATCH 04/12] add slug page --- pages/projects/{all.tsx => [slug].tsx} | 34 +++++++++++++++++++++++--- pages/qf-archive/[slug].tsx | 2 +- pages/qf/[slug].tsx | 2 +- 3 files changed, 32 insertions(+), 6 deletions(-) rename pages/projects/{all.tsx => [slug].tsx} (71%) diff --git a/pages/projects/all.tsx b/pages/projects/[slug].tsx similarity index 71% rename from pages/projects/all.tsx rename to pages/projects/[slug].tsx index 8579ca72a2..94079053a1 100644 --- a/pages/projects/all.tsx +++ b/pages/projects/[slug].tsx @@ -40,7 +40,6 @@ const ProjectsCategoriesRoute = (props: IProjectsCategoriesRouteProps) => { totalCount, qfRounds, } = props; - console.log('props', props); return ( { ); }; -export const getStaticProps: GetStaticProps = async () => { +// This function gets called at build time +export async function getStaticPaths() { + const apolloClient = initializeApollo(); + + // Call an external API endpoint to get posts + const { data } = await apolloClient.query({ + query: FETCH_MAIN_CATEGORIES, + fetchPolicy: 'no-cache', // Adjust based on your caching policy needs + }); + + const mainCategories = data.mainCategories as IMainCategory[]; + + // Get the paths we want to pre-render based on posts + const _paths = mainCategories.map(category => ({ + params: { slug: category.slug }, + })); + + const paths = [{ params: { slug: 'all' } }, ..._paths]; + + // We'll pre-render only these paths at build time. + // { fallback: false } means other routes should 404. + return { paths, fallback: false }; +} + +export const getStaticProps: GetStaticProps = async ({ params }) => { const apolloClient = initializeApollo(); try { @@ -68,7 +91,10 @@ export const getStaticProps: GetStaticProps = async () => { // Fetch projects with a predefined sorting const { data: projectsData } = await apolloClient.query({ query: FETCH_ALL_PROJECTS, - variables: { sortingBy: EProjectsSortBy.INSTANT_BOOSTING }, + variables: { + sortingBy: EProjectsSortBy.INSTANT_BOOSTING, + mainCategory: params?.slug, + }, fetchPolicy: 'no-cache', }); @@ -88,7 +114,7 @@ export const getStaticProps: GetStaticProps = async () => { ], qfRounds: qfRoundsData.qfRounds, }, - revalidate: 3600, // Optionally, revalidate at most once per hour + revalidate: 300, // Optionally, revalidate at most once per hour }; } catch (error) { console.error('Failed to fetch API:', error); diff --git a/pages/qf-archive/[slug].tsx b/pages/qf-archive/[slug].tsx index ca00c69e6f..60edda6f56 100644 --- a/pages/qf-archive/[slug].tsx +++ b/pages/qf-archive/[slug].tsx @@ -13,7 +13,7 @@ import { projectsMetatags } from '@/content/metatags'; import { ProjectsProvider } from '@/context/projects.context'; import { FETCH_QF_ROUNDS } from '@/apollo/gql/gqlQF'; import { useReferral } from '@/hooks/useReferral'; -import { IProjectsRouteProps, allCategoriesItem } from 'pages/projects/all'; +import { IProjectsRouteProps, allCategoriesItem } from 'pages/projects/[slug]'; import { EProjectsSortBy } from '@/apollo/types/gqlEnums'; interface IProjectsCategoriesRouteProps extends IProjectsRouteProps { diff --git a/pages/qf/[slug].tsx b/pages/qf/[slug].tsx index 304e8bc151..9221a38b10 100644 --- a/pages/qf/[slug].tsx +++ b/pages/qf/[slug].tsx @@ -13,7 +13,7 @@ import { projectsMetatags } from '@/content/metatags'; import { ProjectsProvider } from '@/context/projects.context'; import { FETCH_QF_ROUNDS } from '@/apollo/gql/gqlQF'; import { useReferral } from '@/hooks/useReferral'; -import { IProjectsRouteProps, allCategoriesItem } from 'pages/projects/all'; +import { IProjectsRouteProps, allCategoriesItem } from 'pages/projects/[slug]'; import { getMainCategorySlug } from '@/helpers/projects'; import { EProjectsSortBy } from '@/apollo/types/gqlEnums'; From 53a7cc70fde0b458f455dc12dbe2a007b2d2988c Mon Sep 17 00:00:00 2001 From: Cherik Date: Tue, 14 May 2024 12:41:12 +0330 Subject: [PATCH 05/12] update context --- .../views/projects/ProjectsSearchDesktop.tsx | 8 +- .../views/projects/ProjectsSearchTablet.tsx | 8 +- src/context/projects.context.tsx | 79 +++++++++++-------- 3 files changed, 52 insertions(+), 43 deletions(-) diff --git a/src/components/views/projects/ProjectsSearchDesktop.tsx b/src/components/views/projects/ProjectsSearchDesktop.tsx index 5977282f8a..02644a2856 100644 --- a/src/components/views/projects/ProjectsSearchDesktop.tsx +++ b/src/components/views/projects/ProjectsSearchDesktop.tsx @@ -15,7 +15,7 @@ import useFocus from '@/hooks/useFocus'; const ProjectsSearchDesktop = () => { const { variables } = useProjectsContext(); - const [searchValue, setSearchValue] = useState(variables.searchTerm); + const [searchValue, setSearchValue] = useState(variables?.searchTerm); const router = useRouter(); const { formatMessage } = useIntl(); @@ -46,8 +46,8 @@ const ProjectsSearchDesktop = () => { }; useEffect(() => { - setSearchValue(variables.searchTerm); - }, [variables.searchTerm]); + setSearchValue(variables?.searchTerm); + }, [variables?.searchTerm]); return ( @@ -67,7 +67,7 @@ const ProjectsSearchDesktop = () => { ref={inputRef} /> - {variables.searchTerm ? ( + {variables?.searchTerm ? ( {formatMessage({ id: 'label.clear' })} diff --git a/src/components/views/projects/ProjectsSearchTablet.tsx b/src/components/views/projects/ProjectsSearchTablet.tsx index 38f02d9d67..c881371cf2 100644 --- a/src/components/views/projects/ProjectsSearchTablet.tsx +++ b/src/components/views/projects/ProjectsSearchTablet.tsx @@ -7,7 +7,7 @@ import { useProjectsContext } from '@/context/projects.context'; const ProjectsSearchTablet = () => { const { variables } = useProjectsContext(); - const [searchValue, setSearchValue] = useState(variables.searchTerm); + const [searchValue, setSearchValue] = useState(variables?.searchTerm); const router = useRouter(); const handleSearch = (searchTerm?: string) => { @@ -34,8 +34,8 @@ const ProjectsSearchTablet = () => { }; useEffect(() => { - setSearchValue(variables.searchTerm); - }, [variables.searchTerm]); + setSearchValue(variables?.searchTerm); + }, [variables?.searchTerm]); return ( @@ -51,7 +51,7 @@ const ProjectsSearchTablet = () => { onChange={e => setSearchValue(e.target.value)} /> - {variables.searchTerm ? ( + {variables?.searchTerm ? ( diff --git a/src/context/projects.context.tsx b/src/context/projects.context.tsx index 33ca932a15..0ce35e57d6 100644 --- a/src/context/projects.context.tsx +++ b/src/context/projects.context.tsx @@ -5,6 +5,7 @@ import { SetStateAction, useContext, useState, + useEffect, } from 'react'; import { useRouter } from 'next/router'; import { EProjectsFilter, IMainCategory, IQFRound } from '@/apollo/types/types'; @@ -21,7 +22,7 @@ interface IVariables { } interface IProjectsContext { - variables: IVariables; + variables?: IVariables; mainCategories: IMainCategory[]; selectedMainCategory?: IMainCategory; qfRounds: IQFRound[]; @@ -30,13 +31,8 @@ interface IProjectsContext { setIsQF: Dispatch>; } -const variablesDefaultValue = { - sortingBy: EProjectsSortBy.INSTANT_BOOSTING, - filters: undefined, -}; - const ProjectsContext = createContext({ - variables: variablesDefaultValue, + variables: undefined, mainCategories: [], qfRounds: [], isQF: false, @@ -63,42 +59,55 @@ export const ProjectsProvider = (props: { qfRounds, } = props; - const [_isQF, setIsQF] = useState(isQF); const router = useRouter(); + const [_isQF, setIsQF] = useState(props.isQF); + const [variables, setVariables] = useState(); - let sort = EProjectsSortBy.INSTANT_BOOSTING; - const sortValue = router.query.sort as string; - if (sortValue) sort = sortMap[sortValue.toLowerCase()]; + useEffect(() => { + if (!router.isReady) return; + let sort = EProjectsSortBy.INSTANT_BOOSTING; + const sortValue = router.query.sort as string; + if (sortValue && sortMap[sortValue.toLowerCase()]) { + sort = sortMap[sortValue.toLowerCase()]; + } - let filters: EProjectsFilter[] | undefined; - if (router.query.filter) { - filters = ( - Array.isArray(router.query.filter) - ? router.query.filter - : [router.query.filter] - ) as EProjectsFilter[]; - } - if (_isQF) { - filters - ? filters.push(EProjectsFilter.ACTIVE_QF_ROUND) - : (filters = [EProjectsFilter.ACTIVE_QF_ROUND]); - } + let filters: EProjectsFilter[] | undefined; + if (router.query.filter) { + filters = ( + Array.isArray(router.query.filter) + ? router.query.filter + : [router.query.filter] + ) as EProjectsFilter[]; + } + if (_isQF) { + filters + ? filters.push(EProjectsFilter.ACTIVE_QF_ROUND) + : (filters = [EProjectsFilter.ACTIVE_QF_ROUND]); + } + + let searchTerm = router.query.searchTerm as string; + let campaignSlug = router.query.campaign as string; + let category = router.query.category as string; + + // After setting initial params based on URL + setVariables({ + sortingBy: sort, + searchTerm, + filters, + campaignSlug, + mainCategory: router.query?.slug?.toString(), + category, + }); - let searchTerm = router.query.searchTerm as string; - let campaignSlug = router.query.campaign as string; - let category = router.query.category as string; + return () => { + setVariables(undefined); // Reset on component unmount if needed + }; + }, [_isQF, router.query, router.isReady]); return ( Date: Tue, 14 May 2024 12:41:43 +0330 Subject: [PATCH 06/12] add more logs and separate fetch --- .../views/projects/ProjectsIndex.tsx | 50 +++++++++++++++++-- 1 file changed, 45 insertions(+), 5 deletions(-) diff --git a/src/components/views/projects/ProjectsIndex.tsx b/src/components/views/projects/ProjectsIndex.tsx index 1f62d6ddce..3f377bf8f3 100644 --- a/src/components/views/projects/ProjectsIndex.tsx +++ b/src/components/views/projects/ProjectsIndex.tsx @@ -82,11 +82,12 @@ const ProjectsIndex = (props: IProjectsView) => { const fetchProjects = useCallback( (isLoadMore?: boolean, loadNum?: number, userIdChanged = false) => { + console.log('Fetching-filteredProjects', filteredProjects.length); const variables: IQueries = { limit: userIdChanged ? filteredProjects.length > 50 ? BACKEND_QUERY_LIMIT - : filteredProjects.length + : filteredProjects.length || BACKEND_QUERY_LIMIT : projects.length, skip: userIdChanged ? 0 : projects.length * (loadNum || 0), }; @@ -97,7 +98,8 @@ const ProjectsIndex = (props: IProjectsView) => { setIsLoading(true); if ( - contextVariables.mainCategory !== router.query?.slug?.toString() + contextVariables?.mainCategory !== + router.query?.slug?.toString() ) return; @@ -138,7 +140,7 @@ const ProjectsIndex = (props: IProjectsView) => { }, [ contextVariables, - filteredProjects.length, + filteredProjects?.length, isArchivedQF, projects.length, router.query.slug, @@ -148,14 +150,52 @@ const ProjectsIndex = (props: IProjectsView) => { ); useEffect(() => { + console.log('Fetching-User?.id', user?.id); pageNum.current = 0; fetchProjects(false, 0, true); }, [user?.id]); useEffect(() => { + if (!contextVariables) return; + console.log('Fetching-campaignSlug', contextVariables.campaignSlug); pageNum.current = 0; - fetchProjects(false, 0); - }, [contextVariables]); + fetchProjects(false, 0, true); + }, [contextVariables?.campaignSlug]); + + useEffect(() => { + if (!contextVariables) return; + console.log('Fetching-mainCategory', contextVariables.mainCategory); + pageNum.current = 0; + fetchProjects(false, 0, true); + }, [contextVariables?.mainCategory]); + + useEffect(() => { + if (!contextVariables) return; + console.log('Fetching-category', contextVariables.category); + pageNum.current = 0; + fetchProjects(false, 0, true); + }, [contextVariables?.category]); + + useEffect(() => { + if (!contextVariables) return; + console.log('Fetching-filters', contextVariables.filters); + pageNum.current = 0; + fetchProjects(false, 0, true); + }, [contextVariables?.filters]); + + useEffect(() => { + if (!contextVariables) return; + console.log('Fetching-searchTerm', contextVariables.searchTerm); + pageNum.current = 0; + fetchProjects(false, 0, true); + }, [contextVariables?.searchTerm]); + + useEffect(() => { + if (!contextVariables) return; + console.log('Fetching-sortingBy', contextVariables.sortingBy); + pageNum.current = 0; + fetchProjects(false, 0, true); + }, [contextVariables?.sortingBy]); const loadMore = useCallback(() => { if (isLoading) return; From 3fae17017eba78ae03e0f07bd2a11372af5af0e3 Mon Sep 17 00:00:00 2001 From: Cherik Date: Tue, 14 May 2024 14:07:04 +0330 Subject: [PATCH 07/12] handle undefined project --- src/components/views/projects/ProjectsIndex.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/projects/ProjectsIndex.tsx b/src/components/views/projects/ProjectsIndex.tsx index 3f377bf8f3..0566743ede 100644 --- a/src/components/views/projects/ProjectsIndex.tsx +++ b/src/components/views/projects/ProjectsIndex.tsx @@ -142,7 +142,7 @@ const ProjectsIndex = (props: IProjectsView) => { contextVariables, filteredProjects?.length, isArchivedQF, - projects.length, + projects?.length, router.query.slug, selectedMainCategory, user?.id, From 81ba0d2c63a7162a78b7b7c51165abe132c0f11e Mon Sep 17 00:00:00 2001 From: Cherik Date: Tue, 14 May 2024 14:49:21 +0330 Subject: [PATCH 08/12] make qf pages ssg --- pages/qf/[slug].tsx | 132 +++++++++++++++++++------------------------- 1 file changed, 56 insertions(+), 76 deletions(-) diff --git a/pages/qf/[slug].tsx b/pages/qf/[slug].tsx index 9221a38b10..6bdea1c0f1 100644 --- a/pages/qf/[slug].tsx +++ b/pages/qf/[slug].tsx @@ -1,8 +1,6 @@ -import { GetServerSideProps } from 'next/types'; +import { GetStaticProps } from 'next/types'; import { EProjectsFilter, IMainCategory } from '@/apollo/types/types'; -import { transformGraphQLErrorsToStatusCode } from '@/helpers/requests'; import { initializeApollo } from '@/apollo/apolloClient'; -import { OPTIONS_HOME_PROJECTS } from '@/apollo/gql/gqlOptions'; import { FETCH_ALL_PROJECTS, FETCH_MAIN_CATEGORIES, @@ -14,8 +12,7 @@ import { ProjectsProvider } from '@/context/projects.context'; import { FETCH_QF_ROUNDS } from '@/apollo/gql/gqlQF'; import { useReferral } from '@/hooks/useReferral'; import { IProjectsRouteProps, allCategoriesItem } from 'pages/projects/[slug]'; -import { getMainCategorySlug } from '@/helpers/projects'; -import { EProjectsSortBy } from '@/apollo/types/gqlEnums'; +import { OPTIONS_HOME_PROJECTS } from '@/apollo/gql/gqlOptions'; interface IProjectsCategoriesRouteProps extends IProjectsRouteProps { selectedMainCategory: IMainCategory; @@ -45,89 +42,72 @@ const QFProjectsCategoriesRoute = (props: IProjectsCategoriesRouteProps) => { ); }; -export const getServerSideProps: GetServerSideProps = async context => { +// This function gets called at build time +export async function getStaticPaths() { const apolloClient = initializeApollo(); - const { variables, notifyOnNetworkStatusChange } = OPTIONS_HOME_PROJECTS; - try { - const { query } = context; - const slug = query.slug; - const { - data: { mainCategories }, - }: { - data: { mainCategories: IMainCategory[] }; - } = await apolloClient.query({ + // Call an external API endpoint to get posts + const { data } = await apolloClient.query({ + query: FETCH_MAIN_CATEGORIES, + fetchPolicy: 'no-cache', // Adjust based on your caching policy needs + }); + + const mainCategories = data.mainCategories as IMainCategory[]; + + // Get the paths we want to pre-render based on posts + const _paths = mainCategories.map(category => ({ + params: { slug: category.slug }, + })); + + const paths = [{ params: { slug: 'all' } }, ..._paths]; + + // We'll pre-render only these paths at build time. + // { fallback: false } means other routes should 404. + return { paths, fallback: false }; +} + +export const getStaticProps: GetStaticProps = async ({ params }) => { + const apolloClient = initializeApollo(); + const { variables } = OPTIONS_HOME_PROJECTS; + try { + // Fetch main categories + const { data: mainCategoriesData } = await apolloClient.query({ query: FETCH_MAIN_CATEGORIES, - fetchPolicy: 'network-only', + fetchPolicy: 'no-cache', // Adjust based on your caching policy needs }); - const updatedMainCategory = [allCategoriesItem, ...mainCategories]; - const selectedMainCategory = updatedMainCategory.find(mainCategory => { - return mainCategory.slug === slug; + // Fetch projects with a predefined sorting + const { data: projectsData } = await apolloClient.query({ + query: FETCH_ALL_PROJECTS, + variables: { + ...variables, + mainCategory: params?.slug === 'all' ? null : params?.slug, + filters: [EProjectsFilter.ACTIVE_QF_ROUND], + }, + fetchPolicy: 'no-cache', }); - if (selectedMainCategory) { - const updatedSelectedMainCategory = { - ...selectedMainCategory, - selected: true, - }; - const apolloClient = initializeApollo(); - - let _filters = query.filter - ? Array.isArray(query.filter) - ? query.filter - : [query.filter] - : undefined; - - _filters - ? _filters.push(EProjectsFilter.ACTIVE_QF_ROUND) - : (_filters = [EProjectsFilter.ACTIVE_QF_ROUND]); + // Fetch QF rounds + const { data: qfRoundsData } = await apolloClient.query({ + query: FETCH_QF_ROUNDS, + fetchPolicy: 'no-cache', + }); - const { data } = await apolloClient.query({ - query: FETCH_ALL_PROJECTS, - variables: { - ...variables, - sortingBy: query.sort || EProjectsSortBy.INSTANT_BOOSTING, - searchTerm: query.searchTerm, - filters: _filters, - campaignSlug: query.campaignSlug, - category: query.category, - mainCategory: getMainCategorySlug( - updatedSelectedMainCategory, - ), - notifyOnNetworkStatusChange, - }, - fetchPolicy: 'network-only', - }); - const { projects, totalCount } = data.allProjects; - const { - data: { qfRounds }, - } = await apolloClient.query({ - query: FETCH_QF_ROUNDS, - fetchPolicy: 'network-only', - }); - return { - props: { - projects, - mainCategories: updatedMainCategory, - selectedMainCategory: updatedSelectedMainCategory, - totalCount, - qfRounds, - }, - }; - } - return { - notFound: true, - }; - } catch (error: any) { - const statusCode = transformGraphQLErrorsToStatusCode( - error?.graphQLErrors, - ); return { props: { - errorStatus: statusCode, + projects: projectsData.allProjects.projects, + totalCount: projectsData.allProjects.totalCount, + mainCategories: [ + allCategoriesItem, + ...mainCategoriesData.mainCategories, + ], + qfRounds: qfRoundsData.qfRounds, }, + revalidate: 300, // Optionally, revalidate at most once per hour }; + } catch (error) { + console.error('Failed to fetch API:', error); + return { props: { hasError: true } }; } }; From 9aa5ef8859baca6d34e920f10940b50fb156a7bd Mon Sep 17 00:00:00 2001 From: Cherik Date: Tue, 14 May 2024 14:49:28 +0330 Subject: [PATCH 09/12] handle all route --- pages/projects/[slug].tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/pages/projects/[slug].tsx b/pages/projects/[slug].tsx index 94079053a1..ef546ec53b 100644 --- a/pages/projects/[slug].tsx +++ b/pages/projects/[slug].tsx @@ -9,8 +9,8 @@ import { GeneralMetatags } from '@/components/Metatag'; import ProjectsIndex from '@/components/views/projects/ProjectsIndex'; import { projectsMetatags } from '@/content/metatags'; import { ProjectsProvider } from '@/context/projects.context'; -import { EProjectsSortBy } from '@/apollo/types/gqlEnums'; import { FETCH_QF_ROUNDS } from '@/apollo/gql/gqlQF'; +import { OPTIONS_HOME_PROJECTS } from '@/apollo/gql/gqlOptions'; export interface IProjectsRouteProps { projects: IProject[]; @@ -80,6 +80,7 @@ export async function getStaticPaths() { export const getStaticProps: GetStaticProps = async ({ params }) => { const apolloClient = initializeApollo(); + const { variables } = OPTIONS_HOME_PROJECTS; try { // Fetch main categories @@ -92,13 +93,13 @@ export const getStaticProps: GetStaticProps = async ({ params }) => { const { data: projectsData } = await apolloClient.query({ query: FETCH_ALL_PROJECTS, variables: { - sortingBy: EProjectsSortBy.INSTANT_BOOSTING, - mainCategory: params?.slug, + ...variables, + mainCategory: params?.slug === 'all' ? null : params?.slug, }, fetchPolicy: 'no-cache', }); - // Fetch qualification rounds + // Fetch QF rounds const { data: qfRoundsData } = await apolloClient.query({ query: FETCH_QF_ROUNDS, fetchPolicy: 'no-cache', From 4622da2e7ee94416c403faf35bae1f3bfc1fba58 Mon Sep 17 00:00:00 2001 From: Cherik Date: Tue, 14 May 2024 14:49:42 +0330 Subject: [PATCH 10/12] limit projects --- src/components/views/projects/ProjectsIndex.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/projects/ProjectsIndex.tsx b/src/components/views/projects/ProjectsIndex.tsx index 0566743ede..0bb8ceabf8 100644 --- a/src/components/views/projects/ProjectsIndex.tsx +++ b/src/components/views/projects/ProjectsIndex.tsx @@ -88,7 +88,7 @@ const ProjectsIndex = (props: IProjectsView) => { ? filteredProjects.length > 50 ? BACKEND_QUERY_LIMIT : filteredProjects.length || BACKEND_QUERY_LIMIT - : projects.length, + : projects.length || BACKEND_QUERY_LIMIT, skip: userIdChanged ? 0 : projects.length * (loadNum || 0), }; From 606c1da84f75d71da151d543d171035a79a60004 Mon Sep 17 00:00:00 2001 From: Cherik Date: Tue, 14 May 2024 14:53:25 +0330 Subject: [PATCH 11/12] make projects page priority --- src/components/views/projects/ProjectsBanner.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/views/projects/ProjectsBanner.tsx b/src/components/views/projects/ProjectsBanner.tsx index 3fe016f021..c8b12cd496 100644 --- a/src/components/views/projects/ProjectsBanner.tsx +++ b/src/components/views/projects/ProjectsBanner.tsx @@ -36,6 +36,7 @@ export const ProjectsBanner: FC = ({ mainCategory }) => { } fill alt={_mainCategory.title} + priority /> {formatMessage({ id: `projects_${_mainCategory.slug}` })} From 00f815c62aa2ced8d0dfd47e1bd08919109d7281 Mon Sep 17 00:00:00 2001 From: Cherik <Pourcheriki@gmail.com> Date: Tue, 14 May 2024 15:45:11 +0330 Subject: [PATCH 12/12] add selectedMainCategory to route --- pages/projects/[slug].tsx | 15 +++++++++++---- pages/qf/[slug].tsx | 15 +++++++++++---- 2 files changed, 22 insertions(+), 8 deletions(-) diff --git a/pages/projects/[slug].tsx b/pages/projects/[slug].tsx index ef546ec53b..e502ae6c9a 100644 --- a/pages/projects/[slug].tsx +++ b/pages/projects/[slug].tsx @@ -105,15 +105,22 @@ export const getStaticProps: GetStaticProps = async ({ params }) => { fetchPolicy: 'no-cache', }); + const updatedMainCategory = [ + allCategoriesItem, + ...mainCategoriesData.mainCategories, + ]; + + const selectedMainCategory = updatedMainCategory.find(mainCategory => { + return mainCategory.slug === params?.slug; + }); + return { props: { projects: projectsData.allProjects.projects, totalCount: projectsData.allProjects.totalCount, - mainCategories: [ - allCategoriesItem, - ...mainCategoriesData.mainCategories, - ], + mainCategories: updatedMainCategory, qfRounds: qfRoundsData.qfRounds, + selectedMainCategory, }, revalidate: 300, // Optionally, revalidate at most once per hour }; diff --git a/pages/qf/[slug].tsx b/pages/qf/[slug].tsx index 6bdea1c0f1..91e6aa886f 100644 --- a/pages/qf/[slug].tsx +++ b/pages/qf/[slug].tsx @@ -93,15 +93,22 @@ export const getStaticProps: GetStaticProps = async ({ params }) => { fetchPolicy: 'no-cache', }); + const updatedMainCategory = [ + allCategoriesItem, + ...mainCategoriesData.mainCategories, + ]; + + const selectedMainCategory = updatedMainCategory.find(mainCategory => { + return mainCategory.slug === params?.slug; + }); + return { props: { projects: projectsData.allProjects.projects, totalCount: projectsData.allProjects.totalCount, - mainCategories: [ - allCategoriesItem, - ...mainCategoriesData.mainCategories, - ], + mainCategories: updatedMainCategory, qfRounds: qfRoundsData.qfRounds, + selectedMainCategory, }, revalidate: 300, // Optionally, revalidate at most once per hour };