From 0ac2fb097826a7d1018a77f3cc25880a5f779ada Mon Sep 17 00:00:00 2001 From: Luccas Mateus Date: Wed, 18 Dec 2024 10:57:02 -0300 Subject: [PATCH] ODP-399 (#614) * ODP-399 * Fix build --- .../components/home/ApplicationCarousel.tsx | 108 ++++++++ .../frontend/src/pages/applications/index.tsx | 2 +- deployment/frontend/src/pages/index.tsx | 235 +++++++++++++----- .../src/server/api/routers/applications.ts | 16 -- 4 files changed, 280 insertions(+), 81 deletions(-) create mode 100644 deployment/frontend/src/components/home/ApplicationCarousel.tsx diff --git a/deployment/frontend/src/components/home/ApplicationCarousel.tsx b/deployment/frontend/src/components/home/ApplicationCarousel.tsx new file mode 100644 index 00000000..ee93cecf --- /dev/null +++ b/deployment/frontend/src/components/home/ApplicationCarousel.tsx @@ -0,0 +1,108 @@ +import { Navigation } from 'swiper/modules' +import { Swiper, SwiperSlide } from 'swiper/react' +import 'swiper/css' +import 'swiper/css/navigation' +import 'swiper/css/pagination' +import CarouselNavButton from '../_shared/CarouselNavButton' +import Image from 'next/image' +import { AutoCarousel } from '../_shared/AutoCarousel' +import Link from 'next/link' +import { api } from '@/utils/api' +import { ErrorAlert } from '../_shared/Alerts' +import Spinner from '../_shared/Spinner' +import { Application, GroupTree, GroupsmDetails } from '@/schema/ckan.schema' +import { Group } from '@portaljs/ckan' + +function ApplicationCard({ + application, +}: { + application: Application +}) { + const datasetCount = application.package_count + return ( + +
+ {`Application +
+

+ {application.title} +

+

+ {datasetCount && datasetCount > 1 + ? `${datasetCount} datasets` + : `${datasetCount} dataset`} +

+ + ) +} + +export function ApplicationsCarousel() { + const { data, isLoading, error } = api.applications.getAllApplications.useQuery() + return ( +
+
+ } + nextButton={} + > + {error && ( + + )} + + {isLoading && ( +
+ +
+ )} + + {data && data + .filter((application) => { + const datasetCount = application.package_count + return datasetCount > 0 + }) + .map((application, index) => ( + +
+ +
+ + ))} + +
+
+ ) +} + +const PrevButton = () => ( + +) + +const NextButton = () => ( + +) diff --git a/deployment/frontend/src/pages/applications/index.tsx b/deployment/frontend/src/pages/applications/index.tsx index 79176466..470564c0 100644 --- a/deployment/frontend/src/pages/applications/index.tsx +++ b/deployment/frontend/src/pages/applications/index.tsx @@ -27,7 +27,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) { ctx: { session }, transformer: superjson, }) - await Promise.all([await helpers.applications.list.prefetch()]) + await Promise.all([await helpers.applications.getAllApplications.prefetch()]) return { props: { diff --git a/deployment/frontend/src/pages/index.tsx b/deployment/frontend/src/pages/index.tsx index b953cb3b..82d6c749 100644 --- a/deployment/frontend/src/pages/index.tsx +++ b/deployment/frontend/src/pages/index.tsx @@ -16,6 +16,11 @@ import { appRouter } from '@/server/api/root' import { getServerAuthSession } from '@/server/auth' import dynamic from 'next/dynamic' import Spinner from '@/components/_shared/Spinner' +import { Tab } from '@headlessui/react' +import { Fragment } from 'react' +import { ArrowLeftStartOnRectangleIcon } from '@heroicons/react/20/solid' +import classNames from '@/utils/classnames' +import { ApplicationsCarousel } from '@/components/home/ApplicationCarousel' const ErrorAlert = dynamic<{ text: string; title?: string }>( () => @@ -79,6 +84,18 @@ export default function Home( sortBy: 'metadata_modified desc', removeUnecessaryDataInResources: true, }) + const { + data: featuredDatasets, + isLoading: isLoadingFeaturedDatasets, + error: errorFeaturedDatasets, + } = api.dataset.getFeaturedDatasets.useQuery({ + removeUnecessaryDataInResources: true, + }) + const { + data: application, + isLoading, + error, + } = api.applications.getAllApplications.useQuery() return ( <> @@ -148,70 +165,160 @@ export default function Home( -
-
-

- Explore Topic -

-
- -
-
-
-
-

- Highlights -

-
- -
-
- {isLoadingRecentlyAdded ? ( -
- -
- ) : errorRecentlyAdded ? ( - - ) : ( -
-

- Recently Added -

- -
- )} - {isLoadingRecentlyUpdated ? ( -
- -
- ) : errorRecentlyUpdated ? ( - - ) : ( -
-

- Recently Updated -

- -
- )} +
+ + + + {({ selected }) => ( +
+ Explore by Topic +
+ )} + + {application && application.length > 0 && ( + + {({ selected }) => ( +
+ Explore by application +
+ )} + + )} + + + + + + + + + + + + + + {({ selected }) => ( +
+ Dataset Highlights +
+ )} + + + {({ selected }) => ( +
+ Recently added +
+ )} + + + {({ selected }) => ( +
+ Recently updated +
+ )} + + + + + {isLoadingFeaturedDatasets ? ( +
+ +
+ ) : errorFeaturedDatasets ? ( + + ) : ( +
+ +
+ )} + + + {isLoadingRecentlyAdded ? ( +
+ +
+ ) : errorRecentlyAdded ? ( + + ) : ( +
+ +
+ )} + + + {isLoadingRecentlyUpdated ? ( +
+ +
+ ) : errorRecentlyUpdated ? ( + + ) : ( +
+ +
+ )} + + +
diff --git a/deployment/frontend/src/server/api/routers/applications.ts b/deployment/frontend/src/server/api/routers/applications.ts index c2fd4739..5c714c85 100644 --- a/deployment/frontend/src/server/api/routers/applications.ts +++ b/deployment/frontend/src/server/api/routers/applications.ts @@ -170,20 +170,4 @@ export const applicationRouter = createTRPCRouter({ throw Error(replaceNames(data.error.message)) return data }), - list: publicProcedure.query(async ({ ctx, input }) => { - const applicationRes = await fetch( - `${env.CKAN_URL}/api/action/group_list?all_fields=True`, - { - headers: { - 'Content-Type': 'application/json', - }, - } - ) - const application: CkanResponse = await applicationRes.json() - if (!application.success && application.error) - throw Error(replaceNames(application.error.message)) - return { - applications: application.result, - } - }), })