feat(gallery): ✨ Sort by Date

BuildTheEarth · Dec 2, 2023 · 0d7e7be · 0d7e7be
1 parent 016edce
commit 0d7e7be
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 14 deletions.
diff --git a/src/pages/gallery.tsx b/src/pages/gallery.tsx
@@ -1,12 +1,14 @@
-import { Box, Container } from '@mantine/core';
+import { Box, Container, Group, Pagination } from '@mantine/core';
 
-import GalleryGrid from '../components/GalleryGrid';
 import { NextPage } from 'next';
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+import { useState } from 'react';
+import GalleryGrid from '../components/GalleryGrid';
 import Page from '../components/Page';
 import fetcher from '../utils/Fetcher';
-import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 
 const MePage: NextPage = ({ data }: any) => {
+	const [activePage, setPage] = useState(1);
 	return (
 		<Page
 			head={{
@@ -21,17 +23,34 @@ const MePage: NextPage = ({ data }: any) => {
 					<GalleryGrid
 						gap={0}
 						images={
-							data?.slice(0, 10).map((d: any) => ({
-								name: d?.title,
-								src: `https://cdn.buildtheearth.net/upload/${d?.image?.name}`,
-								date: d?.createdAt,
-								team: { name: d?.buildTeam.name, slug: d?.buildTeam.slug, logo: d?.buildTeam.icon },
-								href: `/teams/${d?.buildTeam.slug}`,
-							})) || [{}]
+							data
+								?.sort((a: any, b: any) => new Date(b.date).getTime() - new Date(a.date).getTime())
+								.slice(activePage * 4 - 4, activePage * 4)
+								.map((d: any) => ({
+									name: d?.title,
+									src: `https://cdn.buildtheearth.net/upload/${d?.image?.name}`,
+									date: d?.createdAt,
+									team: {
+										name: d?.buildTeam.name,
+										slug: d?.buildTeam.slug,
+										logo: d?.buildTeam.icon,
+									},
+									href: `/teams/${d?.buildTeam.slug}`,
+								})) || [{}]
 						}
 						showTooltipOnHover={true}
 					/>
 				</Container>
+				<Group justify="center" pt="md">
+					<Pagination
+						my="md"
+						total={Math.floor(data.length / 4)}
+						radius="xs"
+						value={activePage}
+						onChange={setPage}
+						siblings={1}
+					/>
+				</Group>
 			</Box>
 		</Page>
 	);

diff --git a/src/pages/teams/index.tsx b/src/pages/teams/index.tsx
@@ -2,14 +2,14 @@ import { Avatar, Badge, Grid, Group, Pagination, Text, useMantineColorScheme, us
 import { Pin, Users } from 'tabler-icons-react';
 
 import { NextPage } from 'next';
+import { useTranslation } from 'next-i18next';
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+import { useRouter } from 'next/router';
+import { useState } from 'react';
 import Page from '../../components/Page';
 import SearchInput from '../../components/SearchInput';
 import fetcher from '../../utils/Fetcher';
 import getCountryName from '../../utils/ISOCountries';
-import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
-import { useRouter } from 'next/router';
-import { useState } from 'react';
-import { useTranslation } from 'next-i18next';
 
 const Teams: NextPage = ({ data }: any) => {
 	const router = useRouter();