feat(Projects): add projects fetch

BenedictLang · BenedictLang · commit 20f506f1e855 · 2024-08-17T13:05:17.000+02:00
diff --git a/src/components/Buttons/ButtonGlow/ButtonGlow.js b/src/components/Buttons/ButtonGlow/ButtonGlow.js
@@ -1,12 +1,8 @@
 import stylesBtn from '../Button/Button.module.scss';
 import styles from './ButtonGlow.module.scss';
 import CustomLink from '../../Link';
-import { useEffect } from 'react';
 
 const ButtonGlow = ({ onClick, children, className, href, overglow, scroll, ...rest }) => {
-	useEffect(() => {
-		console.log('Rendering ButtonGlow');
-	}, []);
 	const handleClick = (event) => {
 		event.preventDefault();
 		if (onClick) {
diff --git a/src/components/Slider/CardSlider/CardSlider.js b/src/components/Slider/CardSlider/CardSlider.js
@@ -116,9 +116,9 @@ const CardSlider = ({ cards }) => {
 						onClick={() => handleCardClick(index)}
 					>
 						<div className={styles['carousel-box']}>
-							<div className={styles.title}>{card.title}</div>
+							<div className={styles.title}>{card.name}</div>
 							<div className={styles.num}>{String(index + 1).padStart(2, '0')}</div>
-							<Image src={card.image} alt={card.title} width={200} height={400} />
+							<Image src={card.thumbnail.url} alt={card.thumbnail.alt} width={200} height={400} />
 						</div>
 					</div>
 				);
@@ -131,8 +131,8 @@ CardSlider.propTypes = {
 	cards: PropTypes.arrayOf(
 		PropTypes.shape({
 			id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-			title: PropTypes.string.isRequired,
-			image: PropTypes.string.isRequired,
+			name: PropTypes.string.isRequired,
+			thumbnail: PropTypes.object.isRequired,
 		}),
 	).isRequired,
 };
diff --git a/src/components/Slider/CardSlider/CardSlider.module.css b/src/components/Slider/CardSlider/CardSlider.module.css
diff --git a/src/components/Slider/CardSlider/CardSlider.module.css.map b/src/components/Slider/CardSlider/CardSlider.module.css.map
diff --git a/src/components/Slider/CardSlider/CardSlider.module.scss b/src/components/Slider/CardSlider/CardSlider.module.scss
@@ -44,7 +44,6 @@
 		height: 100%;
 		transition: opacity 0.8s cubic-bezier(0, 0.02, 0, 1);
 		opacity: var(--opacity);
-		font-family: 'Orelo-sw-db', serif;
 
 		&:before {
 			content: '';
@@ -71,18 +70,20 @@
 		bottom: 20px;
 		left: 20px;
 		transition: opacity 0.8s cubic-bezier(0, 0.02, 0, 1);
-		font-size: clamp(20px, 3vw, 30px);
+		font-size: $font-size-h4;
+		font-weight: bold;
 		text-shadow: 04px 4px rgba(0, 0, 0, 0.1);
 	}
 
 	.num {
 		position: absolute;
 		z-index: 1;
-		color: #fff;
+		color: $color-text-transparent-light;
 		top: 10px;
 		left: 20px;
 		transition: opacity 0.8s cubic-bezier(0, 0.02, 0, 1);
-		font-size: clamp(20px, 10vw, 80px);
+		font-size: $font-size-h1;
+		font-weight: bold;
 	}
 
 	img {
diff --git a/src/data/customers.js b/src/data/customers.js
@@ -2,7 +2,7 @@ import { gql } from '@apollo/client';
 
 export const QUERY_ALL_CUSTOMERS = gql`
 	query AllCustomers {
-		customers(where: { orderby: { field: DATE, order: ASC } }, first: 1000) {
+		customers(where: { orderby: { field: DATE, order: ASC } }, first: 100) {
 			edges {
 				node {
 					id
diff --git a/src/data/projects.js b/src/data/projects.js
@@ -0,0 +1,57 @@
+import { gql } from '@apollo/client';
+
+export const QUERY_BEST_PROJECTS = gql`
+	query BestProjects {
+		projects(where: { orderby: { field: DATE, order: ASC } }, first: 10) {
+			edges {
+				node {
+					id
+					tags {
+						nodes {
+							name
+						}
+					}
+					projectFieldGroup {
+						name
+						tags
+						thumbnail {
+							node {
+								altText
+								mediaItemUrl
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+`;
+
+export const QUERY_ALL_PROJECTS = gql`
+	query BestProjects {
+		projects(where: { orderby: { field: DATE, order: ASC } }, first: 100) {
+			edges {
+				node {
+					id
+					tags {
+						nodes {
+							name
+						}
+					}
+					projectFieldGroup {
+						name
+						tags
+						description
+						url
+						thumbnail {
+							node {
+								altText
+								mediaItemUrl
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+`;
diff --git a/src/lib/projects.js b/src/lib/projects.js
@@ -0,0 +1,142 @@
+import { getApolloClient } from 'lib/apollo-client';
+
+import parameterize from 'parameterize';
+
+import { QUERY_ALL_PROJECTS, QUERY_BEST_PROJECTS } from 'data/projects';
+
+/**
+ * projectPathBySlug
+ */
+
+export function projectPathBySlug(slug) {
+	return `/project/${slug}`;
+}
+
+/**
+ * getProjectBySlug
+ */
+
+export async function getProjectBySlug(slug) {
+	const { projects } = await getAllProjects();
+
+	const project = projects.find((project) => project.slug === slug);
+
+	return {
+		project,
+	};
+}
+
+/**
+ * projectPathByName
+ */
+
+export function projectPathByName(name) {
+	return `/project/${parameterize(name)}`;
+}
+
+/**
+ * getCustomerByNameSlug
+ */
+
+export async function getProjectByNameSlug(name) {
+	const { projects } = await getAllProjects();
+
+	const project = projects.find((project) => parameterize(project.name) === name);
+
+	return {
+		project,
+	};
+}
+
+/**
+ * projectSlugByName
+ */
+
+export function projectSlugByName(name) {
+	return parameterize(name);
+}
+
+/**
+ * getAllProjects
+ */
+
+export async function getAllProjects() {
+	const apolloClient = getApolloClient();
+
+	let projectsData;
+
+	try {
+		projectsData = await apolloClient.query({
+			query: QUERY_ALL_PROJECTS,
+		});
+	} catch (e) {
+		console.log(`[projects][getAllProjects] Failed to query project data: ${e.message}`);
+		throw e;
+	}
+
+	let projects = projectsData?.data.projects.edges.map(({ node = {} }) => node).map(mapProjectData);
+
+	return {
+		projects,
+	};
+}
+
+/**
+ * getBestProjects
+ */
+export async function getBestProjects() {
+	const apolloClient = getApolloClient();
+
+	let projectsData;
+
+	try {
+		projectsData = await apolloClient.query({
+			query: QUERY_BEST_PROJECTS,
+		});
+	} catch (e) {
+		console.log(`[projects][getBestProjects] Failed to query project data: ${e.message}`);
+		throw e;
+	}
+	let projects = projectsData?.data.projects.edges.map(({ node = {} }) => node).map(mapBestProjectData);
+
+	return {
+		projects,
+	};
+}
+
+/**
+ * mapProjectData
+ */
+
+export function mapProjectData(project) {
+	const { id, tags, projectFieldGroup } = project;
+	return {
+		id,
+		name: projectFieldGroup?.name || '',
+		description: projectFieldGroup?.description || '',
+		tags: tags?.nodes?.map((tag) => tag.name) || [],
+		liveDemo: projectFieldGroup?.url || '',
+		thumbnail: {
+			alt: projectFieldGroup?.thumbnail?.node.altText || '',
+			url: projectFieldGroup?.thumbnail?.node.mediaItemUrl || '',
+		},
+	};
+}
+
+/**
+ * mapProjectData
+ */
+
+export function mapBestProjectData(project) {
+	const { id, tags, projectFieldGroup } = project;
+	return {
+		id,
+		name: projectFieldGroup?.name || '',
+		tags: tags?.nodes?.map((tag) => tag.name) || [],
+		liveDemo: projectFieldGroup?.url || '',
+		thumbnail: {
+			alt: projectFieldGroup?.thumbnail?.node.altText || '',
+			url: projectFieldGroup?.thumbnail?.node.mediaItemUrl || '',
+		},
+	};
+}
diff --git a/src/pages/home.js b/src/pages/home.js
@@ -18,52 +18,15 @@ import Button from '../components/Buttons/Button';
 import { IoArchiveOutline, IoMailUnreadOutline } from 'react-icons/io5';
 import CardSlider from '../components/Slider/CardSlider';
 import GradientText from '../components/Text/GradientText';
+import { getBestProjects } from '../lib/projects';
 
-export default function Home({ customers }) {
+export default function Home({ customers, bestProjects }) {
 	const { metadata = {} } = useSite();
 	const { title } = metadata;
 	const { isMobile } = useViewport();
 	const { setCameraTarget } = useContext(ThreeSceneContext);
 	const clientsRef = useRef(null);
 	const currentYear = new Date().getFullYear();
-	const projectCards = [
-		{
-			id: 1,
-			title: 'Paris',
-			image:
-				'https://media.istockphoto.com/id/184619832/it/foto/distretto-finanziario-al-crepuscolo-londra.jpg?s=612x612&w=0&k=20&c=RAThrJOBY6vhlT6-kQpu9-9jLEzWToYfdw46S8B0Mu0=',
-		},
-		{
-			id: 2,
-			title: 'Warsaw',
-			image:
-				'https://media.istockphoto.com/id/184619832/it/foto/distretto-finanziario-al-crepuscolo-londra.jpg?s=612x612&w=0&k=20&c=RAThrJOBY6vhlT6-kQpu9-9jLEzWToYfdw46S8B0Mu0=',
-		},
-		{
-			id: 3,
-			title: 'Madrid',
-			image:
-				'https://media.istockphoto.com/id/184619832/it/foto/distretto-finanziario-al-crepuscolo-londra.jpg?s=612x612&w=0&k=20&c=RAThrJOBY6vhlT6-kQpu9-9jLEzWToYfdw46S8B0Mu0=',
-		},
-		{
-			id: 4,
-			title: 'Sydney',
-			image:
-				'https://media.istockphoto.com/id/184619832/it/foto/distretto-finanziario-al-crepuscolo-londra.jpg?s=612x612&w=0&k=20&c=RAThrJOBY6vhlT6-kQpu9-9jLEzWToYfdw46S8B0Mu0=',
-		},
-		{
-			id: 5,
-			title: 'Istanbul',
-			image:
-				'https://media.istockphoto.com/id/184619832/it/foto/distretto-finanziario-al-crepuscolo-londra.jpg?s=612x612&w=0&k=20&c=RAThrJOBY6vhlT6-kQpu9-9jLEzWToYfdw46S8B0Mu0=',
-		},
-		{
-			id: 6,
-			title: 'Prague',
-			image:
-				'https://media.istockphoto.com/id/184619832/it/foto/distretto-finanziario-al-crepuscolo-londra.jpg?s=612x612&w=0&k=20&c=RAThrJOBY6vhlT6-kQpu9-9jLEzWToYfdw46S8B0Mu0=',
-		},
-	];
 
 	useEffect(() => {
 		const newTarget = new Vector3();
@@ -142,7 +105,7 @@ export default function Home({ customers }) {
 			</Section>
 			<Section className={styles.portfolioSection}>
 				<Content className={styles.portfolioContent}>
-					<CardSlider className={styles.cardSlider} cards={projectCards} />
+					<CardSlider cards={bestProjects} />
 					<div className={styles.portfolioTextBlock}>
 						<h3>My Projects</h3>
 						<p>
@@ -174,9 +137,11 @@ export default function Home({ customers }) {
 
 export async function getStaticProps() {
 	const { customers } = await getAllCustomers();
+	const { projects: bestProjects = [] } = await getBestProjects();
 	return {
 		props: {
 			customers,
+			bestProjects,
 		},
 	};
 }
