temp_codescript.txt

// src/databases/products.ts:

import { sql } from '../utils/connect';
import { Product } from '../types/Product';

export async function getAllProducts(): Promise<Product[]> {
  try {
    const products = await sql<Product[]>`
  SELECT id, name, type, description, price, shader_path AS "shaderPath" FROM products LIMIT 10
  `;
    return products;
  } catch (error) {
    console.error('Error fetching products from database:', error);
    return [];
  }
}

export async function getProductById(id: number): Promise<Product | null> {
  try {
    const [product] = await sql<Product[]>`
      SELECT id, name, type, description, price, shader_path AS "shaderPath" FROM products WHERE id = ${id}
    `;
    return product || null;
  } catch (error) {
    console.error('Error fetching product by ID from database:', error);
    return null;
  }
}

----------------------------------------

// src/app/product/[id]/page.tsx:

import Image from 'next/image';
import { getProductById } from '../../../databases/products';
import { Product } from '../../../types/Product';
import ShaderImage1 from '../../../components/ShaderImage1';
import ShaderImage2 from '../../../components/ShaderImage2';
import ShaderImage3 from '../../../components/ShaderImage3';
import ShaderImage4 from '../../../components/ShaderImage4';
import AddToCartButton from '../../../components/AddToCartButton';

interface ProductPageProps {
  params: { id: string };
}

export default async function ProductPage({ params }: ProductPageProps) {
  const product: Product | null = await getProductById(Number(params.id));

  if (!product) {
    return (
      <div className="container mx-auto p-7 pt-0">
        <p>Product not found</p>
      </div>
    );
  }

  return (
    <div className="container mx-auto p-6 pt-0">
      <div className="rounded-lg bg-yellow-50 bg-opacity-60 overflow-hidden shadow-md p-6 flex">
        {product.shaderPath && (
          <div className="mr-8">
            {product.shaderPath === 'ShaderImage1' && (
              <ShaderImage1 width={300} height={300} />
            )}
            {product.shaderPath === 'ShaderImage2' && (
              <ShaderImage2 width={300} height={300} />
            )}
            {product.shaderPath === 'ShaderImage3' && (
              <ShaderImage3 width={300} height={300} />
            )}
            {product.shaderPath === 'ShaderImage4' && (
              <ShaderImage4 width={300} height={300} />
            )}
          </div>
        )}
        {!product.shaderPath && (
          <Image
            src={product.image}
            alt={product.name}
            className="mr-8"
            style={{ width: '300px', height: '300px', objectFit: 'cover' }}
            data-test-id="product-image"
          />
        )}
        <div>
          <h1 className="text-2xl font-bold mb-4">{product.name}</h1>
          <p
            className="text-xl font-semibold mb-4"
            data-test-id="product-price"
          >
            ${product.price}
          </p>
          <p className="mb-8">{product.description}</p>
          <AddToCartButton product={product} />
        </div>
      </div>
    </div>
  );
}

----------------------------------------

// src/app/productspage/page.tsx:

import Image from 'next/image';
import Link from 'next/link';
import { getAllProducts } from '../../databases/products';
import { Product } from '../../types/Product';
import ShaderImage1 from '../../components/ShaderImage1';
import ShaderImage2 from '../../components/ShaderImage2';
import ShaderImage3 from '../../components/ShaderImage3';
import ShaderImage4 from '../../components/ShaderImage4';

type ProductLinkProps = {
  product: Product;
};

const ProductLink: React.FC<ProductLinkProps> = ({ product }) => {
  return (
    <Link
      href={`/product/${product.id.toString()}`}
      key={product.id}
      data-test-id={`product-${product.id}`}
      className="product-card"
    >
      <div style={{ cursor: 'pointer' }}>
        {product.shaderPath ? (
          <div className="rounded-lg overflow-hidden">
            {product.shaderPath === 'ShaderImage1' && (
              <ShaderImage1 width={300} height={300} />
            )}
            {product.shaderPath === 'ShaderImage2' && (
              <ShaderImage2 width={300} height={300} />
            )}
            {product.shaderPath === 'ShaderImage3' && (
              <ShaderImage3 width={300} height={300} />
            )}
            {product.shaderPath === 'ShaderImage4' && (
              <ShaderImage4 width={300} height={300} />
            )}
          </div>
        ) : (
          <Image
            src={product.image}
            alt={product.name}
            width={300}
            height={300}
            className="rounded-lg mb-4"
          />
        )}
        <h2>{product.name}</h2>
      </div>
    </Link>
  );
};

const ProductsPage: React.FC = async () => {
  try {
    const products: Product[] = await getAllProducts();
    console.log('Obtained products:', products);

    if (!products || products.length === 0) {
      console.log('Products not found');
    }

    return (
      <div className="container mx-auto p-6 pt-0">
        <div className="product-list">
          {products.length === 0 ? (
            <p>No products found.</p>
          ) : (
            products.map((product) => (
              <ProductLink product={product} key={product.id} />
            ))
          )}
        </div>
      </div>
    );
  } catch (error) {
    console.error('Error fetching products:', error);
    return (
      <div className="container mx-auto p-7 pt-0">
        <p>Error fetching products</p>
      </div>
    );
  }
};

export default ProductsPage;

----------------------------------------

// src/types/Params.ts:

export interface Params {
  id: string;
}

----------------------------------------

// src/types/Product.ts:

export interface Product {
  id: number;
  name: string;
  type: string;
  description: string;
  image: string;
  price: number;
  shaderPath: string | null;
}

----------------------------------------

// src/utils/__tests__/cartSum.test.ts:

const calculateCartTotal = (cart: { price: number; quantity: number }[]) => {
  return cart.reduce(
    (total, product) => total + product.price * product.quantity,
    0,
  );
};

test('calculates the total price of the cart', () => {
  const cart = [
    { id: 1, price: 10, quantity: 2 },
    { id: 2, price: 20, quantity: 1 },
  ];
  const total = calculateCartTotal(cart);
  expect(total).toBe(40);
});

----------------------------------------

// src/utils/__tests__/combineProdutData.test.ts:

import { getProducts } from '../../databases/products';
import { getCartFromCookies } from '../cookies';
import { Product } from '../../types/Product';

jest.mock('../../databases/products', () => ({
  getProducts: jest.fn(),
}));

jest.mock('../cookies', () => ({
  getCartFromCookies: jest.fn(),
}));

const combineProductData = async () => {
  const products: Product[] = await getProducts();
  const cart = getCartFromCookies();

  return cart.map((cartItem: { id: number; quantity: number }) => {
    const product = products.find((product) => product.id === cartItem.id);
    return {
      ...product,
      quantity: cartItem.quantity,
    };
  });
};

test('combines product data with quantity data', async () => {
  const mockProducts = [
    {
      id: 1,
      name: 'Product 1',
      type: 'Type 1',
      description: 'Description 1',
      price: 10,
      shaderPath: null,
    },
    {
      id: 2,
      name: 'Product 2',
      type: 'Type 2',
      description: 'Description 2',
      price: 20,
      shaderPath: null,
    },
  ];

  const mockCart = [
    { id: 1, quantity: 2 },
    { id: 2, quantity: 3 },
  ];

  (getProducts as jest.Mock).mockResolvedValue(mockProducts);
  (getCartFromCookies as jest.Mock).mockReturnValue(mockCart);

  const combinedData = await combineProductData();

  expect(combinedData).toBeDefined();
  expect(combinedData[0]).toHaveProperty('id');
  expect(combinedData[0]).toHaveProperty('quantity');
  expect(combinedData[0].quantity).toBe(2);
});

----------------------------------------

// src/utils/__tests__/updateCartItemQuantity.test.ts:

import { getCartFromCookies, saveCartToCookies } from '../cookies';

const updateCartItemQuantity = (id: number, quantity: number) => {
  const cart = getCartFromCookies();
  const updatedCart = cart.map((item: { id: number; quantity: number }) =>
    item.id === id ? { ...item, quantity } : item,
  );
  saveCartToCookies(updatedCart);
};

test('updates the quantity of an existing cart item', () => {
  // Mock initial cart data
  const initialCart = [{ id: 1, quantity: 1 }];
  document.cookie = `cart=${JSON.stringify(initialCart)}`;

  updateCartItemQuantity(1, 3);

  const updatedCart = getCartFromCookies();
  expect(updatedCart[0].quantity).toBe(3);
});

----------------------------------------

// src/utils/config.js:

import postgres from 'postgres';
import { config } from 'dotenv-safe';

export const postgresConfig = {
  ssl: Boolean(process.env.POSTGRES_URL),
  transform: {
    ...postgres.camel,
    undefined: null,
  },
};

export function setEnvironmentVariables() {
  if (process.env.NODE_ENV === 'production' || process.env.CI) {
    if (process.env.POSTGRES_URL) {
      process.env.PGHOST = process.env.POSTGRES_HOST;
      process.env.PGDATABASE = process.env.POSTGRES_DATABASE;
      process.env.PGUSERNAME = process.env.POSTGRES_USER;
      process.env.PGPASSWORD = process.env.POSTGRES_PASSWORD;
    }
    return;
  }
  config();
}

----------------------------------------

// src/utils/connect.ts:

import 'server-only';
import postgres, { Sql } from 'postgres';
import postgresConfig from '../../ley.config.js';
import { setEnvironmentVariables } from './config.js';

setEnvironmentVariables();

declare global {
  var postgresSqlClient: Sql | undefined;
}

function connectOneTimeToDatabase() {
  if (!globalThis.postgresSqlClient) {
    globalThis.postgresSqlClient = postgres(postgresConfig);
  }

  return ((
    ...sqlParameters: Parameters<typeof globalThis.postgresSqlClient>
  ) => {
    return globalThis.postgresSqlClient!(...sqlParameters);
  }) as typeof globalThis.postgresSqlClient;
}

export const sql = connectOneTimeToDatabase();

----------------------------------------

// src/utils/cookies.js:

import secureJsonParse from 'secure-json-parse';

export const getCartFromCookies = () => {
  if (typeof document !== 'undefined') {
    const name = 'cart=';
    const decodedCookie = decodeURIComponent(document.cookie);
    const ca = decodedCookie.split(';');
    for (let i = 0; i < ca.length; i++) {
      let c = ca[i];
      while (c.charAt(0) === ' ') {
        c = c.substring(1);
      }
      if (c.indexOf(name) === 0) {
        return secureJsonParse(c.substring(name.length, c.length));
      }
    }
  }
  return [];
};

export const saveCartToCookies = (cart) => {
  if (typeof document !== 'undefined') {
    const expires = new Date();
    expires.setTime(expires.getTime() + 24 * 60 * 60 * 1000); // 1 day
    document.cookie = `cart=${JSON.stringify(cart)};expires=${expires.toUTCString()};path=/`;
  }
};

export const removeCartFromCookies = () => {
  if (typeof document !== 'undefined') {
    document.cookie = 'cart=; Max-Age=0; path=/';
  }
};

----------------------------------------

// src/utils/serverCookies.js:

// src/utils/serverCookies.js
import { cookies } from 'next/headers';

export const getCartFromCookies = () => {
  const cookieStore = cookies();
  const cartCookie = cookieStore.get('cart');
  if (cartCookie) {
    return JSON.parse(cartCookie.value);
  }
  return [];
};

----------------------------------------