Skip to content

Commit 05a34b6

Browse files
ajjswiftajjswift
authored
Merge pull request #6 from Solstice-Hosting/alexx-changes-0017-25042024
Change header and fix store route to use getServerSideProps
2 parents 3ec9f01 + c4b0dbc commit 05a34b6

File tree

2 files changed

+65
-98
lines changed

2 files changed

+65
-98
lines changed

‎components/main/Header.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
99
import { faBlackTie } from '@fortawesome/free-brands-svg-icons';
1010
import { faShoppingCart, faUser, faUserSecret } from '@fortawesome/free-solid-svg-icons';
1111
import { useRouter } from 'next/router';
12+
import Link from 'next/link';
1213
import {
1314
Sheet,
1415
SheetContent,
@@ -80,7 +81,7 @@ export default function Header({ categories }) {
8081
}`}
8182
style={{ zIndex: 60 }}
8283
>
83-
<Image src="/assets/solstice.svg" alt="Solstice Logo" width={200} height={100} />
84+
<Link href={'https://solsticehosting.co.uk'}><Image src="/assets/solstice.svg" alt="Solstice Logo" width={200} height={100} /></Link>
8485
<ul className='flex text-gray-200 gap-x-12 gap-y-2 items-center flex-wrap justify-center' style={{ zIndex: 60 }}>
8586
<HeaderLink special={true} category={{ name: 'Home', slug: '/' }} />
8687
{headings.map((heading, index) => (

‎pages/store/[page].js

Lines changed: 63 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -1,119 +1,85 @@
11
import { useRouter } from 'next/router';
2-
import { Suspense, useEffect, useState } from 'react';
2+
import { useEffect, useState } from 'react';
33
import Header from "@/components/main/Header";
44
import { ShopCard, ShopSpecialCard } from "@/components/cards";
55
import Footer from "@/components/main/Footer";
66
import Head from "next/head";
77
import PocketBase from "pocketbase";
88

9-
export default function StorePage() {
10-
const pb = new PocketBase('https://pb.solsticehosting.co.uk');
9+
export default function StorePage({ categoryInformation, products }) {
1110
const router = useRouter();
12-
const [products, setProducts] = useState([]);
13-
const [categoryInformation, setCategoryInformation] = useState(null);
14-
const [slug, setSlug] = useState(null);
15-
16-
useEffect(() => {
17-
const pathname = window.location.pathname;
18-
const slug = pathname.substring(pathname.lastIndexOf('/') + 1);
19-
setSlug(slug);
20-
if (!slug) {
21-
console.error(`Category slug is empty or not provided.`);
22-
return;
23-
}
24-
}, []);
25-
26-
useEffect(() => {
27-
const fetchCategoryAndProducts = async () => {
28-
try {
29-
const newCategoryInformation = await pb.collection('categories').getFullList({
30-
filter: `slug="${slug}"`
31-
});
32-
const newProducts = await pb.collection('products').getFullList({
33-
filter: `category.id="${newCategoryInformation[0].id}"`,
34-
sort: 'price',
35-
});
36-
setCategoryInformation(newCategoryInformation[0]);
37-
setProducts(newProducts);
38-
console.log(`Successfully pulled products for ${slug}`);
39-
} catch (error) {
40-
console.error(`An error occurred: ${error.message}`);
41-
}
42-
};
4311

44-
if (slug) {
45-
fetchCategoryAndProducts();
46-
}
47-
}, [slug]);
48-
49-
useEffect(() => {
50-
const handleRouteChange = (url) => {
51-
const newSlug = url.substring(url.lastIndexOf('/') + 1);
52-
setSlug(newSlug);
53-
};
54-
55-
router.events.on('routeChangeComplete', handleRouteChange);
56-
57-
return () => {
58-
router.events.off('routeChangeComplete', handleRouteChange);
59-
};
60-
}, []);
12+
if (router.isFallback) {
13+
return <div>Loading...</div>;
14+
}
6115

6216
return (
6317
<>
64-
{categoryInformation && (
65-
<>
66-
<Suspense>
67-
{categoryInformation &&
6818
<Head>
69-
<title>{categoryInformation ? categoryInformation.categoryNameLong : 'Loading'} - SolsticeHosting</title>
70-
<meta name="description" content={categoryInformation && categoryInformation.metaDescription} />
71-
<meta name="keywords" content={categoryInformation && categoryInformation.keywords} />
72-
</Head>}
73-
</Suspense>
19+
<title>{categoryInformation.categoryNameLong} - SolsticeHosting</title>
20+
<meta name="description" content={categoryInformation.metaDescription} />
21+
<meta name="keywords" content={categoryInformation.keywords} />
22+
</Head>
7423
<Header />
75-
<Suspense>
7624
<div className="w-full flex items-center p-12 flex-col bg-gray-950 gap-8">
77-
{categoryInformation && (
78-
<div className="flex flex-col gap-2 items-center p-4 lg:p-10 text-center">
79-
<h1 className="font-extrabold text-5xl text-gray-100 whitespace-nowrap">
80-
<span className="hidden lg:block">{categoryInformation.categoryWhamWord}</span>
81-
<span className="bg-gradient-to-r from-orange-400 transition-all duration-200 to-purple-500 bg-clip-text text-transparent hover:saturate-150 hover:to-orange-400 hover:from-purple-500">
82-
{categoryInformation.categoryNameLong}
83-
</span>
84-
</h1>
85-
<span className="text-2xl text-gray-50">{categoryInformation.categoryTagline}</span>
86-
</div>
87-
)}
25+
<div className="flex flex-col gap-2 items-center p-4 lg:p-10 text-center">
26+
<h1 className="font-extrabold text-5xl text-gray-100 whitespace-nowrap">
27+
<span className="hidden lg:block">{categoryInformation.categoryWhamWord}</span>
28+
<span className="bg-gradient-to-r from-orange-400 transition-all duration-200 to-purple-500 bg-clip-text text-transparent hover:saturate-150 hover:to-orange-400 hover:from-purple-500">
29+
{categoryInformation.categoryNameLong}
30+
</span>
31+
</h1>
32+
<span className="text-2xl text-gray-50">{categoryInformation.categoryTagline}</span>
33+
</div>
8834
<div className="grid grid-cols-2 lg:grid-cols-8 gap-24">
89-
{products.length > 0 ? (
90-
products.map((product, index) => (
91-
((index + 1) % 5 === 2) ? (
92-
<ShopSpecialCard
93-
key={product.id}
94-
title={product.name}
95-
price={parseFloat(product.price).toFixed(2)}
96-
items={product.features}
97-
link={`https://billing.solsticehosting.co.uk/store/${categoryInformation?.billingSlug}/${product.itemId}`}
98-
/>
99-
) : (
100-
<ShopCard
101-
key={product.id}
102-
title={product.name}
103-
price={parseFloat(product.price).toFixed(2)}
104-
items={product.features}
105-
link={`https://billing.solsticehosting.co.uk/store/${categoryInformation?.billingSlug}/${product.itemId}`}
106-
/>
107-
)
108-
))
109-
) : (
110-
<main className="bg-gray-950 h-screen w-screen" />
111-
)}
35+
{products.map((product, index) => (
36+
((index + 1) % 5 === 2) ? (
37+
<ShopSpecialCard
38+
key={product.id}
39+
title={product.name}
40+
price={parseFloat(product.price).toFixed(2)}
41+
items={product.features}
42+
link={`https://billing.solsticehosting.co.uk/store/${categoryInformation.billingSlug}/${product.itemId}`}
43+
/>
44+
) : (
45+
<ShopCard
46+
key={product.id}
47+
title={product.name}
48+
price={parseFloat(product.price).toFixed(2)}
49+
items={product.features}
50+
link={`https://billing.solsticehosting.co.uk/store/${categoryInformation.billingSlug}/${product.itemId}`}
51+
/>
52+
)
53+
))}
11254
</div>
11355
</div>
114-
</Suspense>
11556
<Footer />
116-
</>)}
11757
</>
11858
);
11959
}
60+
61+
export async function getServerSideProps(context) {
62+
const pb = new PocketBase('https://pb.solsticehosting.co.uk');
63+
const slug = context.params.page;
64+
65+
try {
66+
const newCategoryInformation = await pb.collection('categories').getFullList({
67+
filter: `slug="${slug}"`
68+
});
69+
const newProducts = await pb.collection('products').getFullList({
70+
filter: `category.id="${newCategoryInformation[0].id}"`,
71+
sort: 'price',
72+
});
73+
return {
74+
props: {
75+
categoryInformation: newCategoryInformation[0],
76+
products: newProducts
77+
}
78+
};
79+
} catch (error) {
80+
console.error(`An error occurred: ${error.message}`);
81+
return {
82+
notFound: true
83+
};
84+
}
85+
}

0 commit comments

Comments
 (0)