|
1 | | -// Components |
2 | | -import DisplayProducts from '@/components/Product/DisplayProducts.component'; |
| 1 | +import Head from 'next/head'; |
3 | 2 | import Layout from '@/components/Layout/Layout.component'; |
4 | | - |
5 | | -// GraphQL |
6 | | -import { FETCH_ALL_PRODUCTS_QUERY } from '@/utils/gql/GQL_QUERIES'; |
7 | | - |
8 | | -// Utilities |
| 3 | +import ProductList from '@/components/Product/ProductList.component'; |
9 | 4 | import client from '@/utils/apollo/ApolloClient'; |
10 | | - |
11 | | -// Types |
| 5 | +import { FETCH_ALL_PRODUCTS_QUERY } from '@/utils/gql/GQL_QUERIES'; |
12 | 6 | import type { NextPage, GetStaticProps, InferGetStaticPropsType } from 'next'; |
13 | 7 |
|
14 | | -/** |
15 | | - * Displays all of the products. |
16 | | - * @function HomePage |
17 | | - * @param {InferGetStaticPropsType<typeof getStaticProps>} products |
18 | | - * @returns {JSX.Element} - Rendered component |
19 | | - */ |
20 | | - |
21 | 8 | const Produkter: NextPage = ({ |
22 | 9 | products, |
23 | | -}: InferGetStaticPropsType<typeof getStaticProps>) => ( |
24 | | - <Layout title="Produkter"> |
25 | | - {products && <DisplayProducts products={products} />} |
26 | | - </Layout> |
27 | | -); |
| 10 | + loading, |
| 11 | +}: InferGetStaticPropsType<typeof getStaticProps>) => { |
| 12 | + if (loading) |
| 13 | + return ( |
| 14 | + <Layout title="Produkter"> |
| 15 | + <div className="flex justify-center items-center min-h-screen"> |
| 16 | + <div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-gray-900"></div> |
| 17 | + </div> |
| 18 | + </Layout> |
| 19 | + ); |
| 20 | + |
| 21 | + if (!products) |
| 22 | + return ( |
| 23 | + <Layout title="Produkter"> |
| 24 | + <div className="flex justify-center items-center min-h-screen"> |
| 25 | + <p className="text-red-500">Ingen produkter funnet</p> |
| 26 | + </div> |
| 27 | + </Layout> |
| 28 | + ); |
| 29 | + |
| 30 | + return ( |
| 31 | + <Layout title="Produkter"> |
| 32 | + <Head> |
| 33 | + <title>Produkter | WooCommerce Next.js</title> |
| 34 | + </Head> |
| 35 | + |
| 36 | + <div className="container mx-auto px-4 py-8"> |
| 37 | + <ProductList products={products} title="Herreklær" /> |
| 38 | + </div> |
| 39 | + </Layout> |
| 40 | + ); |
| 41 | +}; |
28 | 42 |
|
29 | 43 | export default Produkter; |
30 | 44 |
|
|
0 commit comments