Fix/remove client check (#322)

* add nextjs example with root layout (this looks like dog shit rn)

* adjust conditions for rendering with persistence

* add "use client" directive to react modules (doesn't actually work tho)

* update lib version

Author: dayhaysoos

examples/nextjs-root-layout/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

examples/nextjs-root-layout/.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/nextjs-root-layout/README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

examples/nextjs-root-layout/jsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

examples/nextjs-root-layout/next.config.js

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {}
+
+module.exports = nextConfig

examples/nextjs-root-layout/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "nextjs-root-layout",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "autoprefixer": "10.4.14",
+    "eslint": "8.40.0",
+    "eslint-config-next": "13.4.1",
+    "next": "13.4.1",
+    "postcss": "8.4.23",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "tailwindcss": "3.3.2",
+    "use-shopping-cart": "workspace:^3.1.5"
+  }
+}
+

examples/nextjs-root-layout/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

examples/nextjs-root-layout/src/app/components/CartItem.js

@@ -0,0 +1,30 @@
+import { useShoppingCart } from "use-shopping-cart";
+import { formatCurrencyString } from "use-shopping-cart";
+import Image from "next/image";
+
+export default function CartItem({ item }) {
+  const { name, emoji, quantity, price } = item;
+  const { removeItem } = useShoppingCart();
+
+  const removeItemFromCart = () => {
+    removeItem(item.id);
+  };
+
+  return (
+    <div className="flex items-center gap-4 mb-3">
+      <p className="text-4xl">{emoji}</p>
+      <div>
+        {name} <span className="text-xs">({quantity})</span>
+      </div>
+      <div className="ml-auto">
+        {formatCurrencyString({ value: price, currency: "GBP" })}
+      </div>
+      <button
+        onClick={() => removeItemFromCart()}
+        className="hover:bg-emerald-50 transition-colors rounded-full duration-500 p-1"
+      >
+        <Image alt="delete icon" src="./trash.svg" width={20} height={20} />
+      </button>
+    </div>
+  );
+}

examples/nextjs-root-layout/src/app/components/CheckoutButton.js

@@ -0,0 +1,55 @@
+import { useState } from "react";
+import { useShoppingCart } from "use-shopping-cart";
+
+export default function CheckoutButton() {
+  const [status, setStatus] = useState("idle");
+  const { redirectToCheckout, cartCount, totalPrice } = useShoppingCart();
+
+  async function handleClick(event) {
+    event.preventDefault();
+    if (cartCount > 0) {
+      setStatus("loading");
+      try {
+        const result = await redirectToCheckout();
+        if (result?.error) {
+          console.error(result);
+          setStatus("redirect-error");
+        }
+      } catch (error) {
+        console.error(error);
+        setStatus("redirect-error");
+      }
+    } else {
+      setStatus("no-items");
+    }
+  }
+
+  return (
+    <article className="mt-3 flex flex-col">
+      <div className="text-red-700 text-xs mb-3 h-5 text-center">
+        {totalPrice && totalPrice < 30
+          ? "You must have at least £0.30 in your basket"
+          : cartCount && cartCount > 20
+          ? "You cannot have more than 20 items"
+          : status === "redirect-error"
+          ? "Unable to redirect to Stripe checkout page"
+          : status === "no-items"
+          ? "Please add some items to your cart"
+          : null}
+      </div>
+      <button
+        onClick={handleClick}
+        className="bg-emerald-50 hover:bg-emerald-500 hover:text-white transition-colors duration-500 text-emerald-500 py-3 px-5 rounded-md w-100 disabled:bg-slate-300 disabled:cursor-not-allowed disabled:text-white"
+        disabled={
+          (totalPrice && totalPrice < 30) ||
+          (cartCount && cartCount > 20) ||
+          status == "no-items"
+            ? true
+            : false
+        }
+      >
+        {status !== "loading" ? "Proceed to checkout" : "Loading..."}
+      </button>
+    </article>
+  );
+}

examples/nextjs-root-layout/src/app/components/Layout.js

@@ -0,0 +1,24 @@
+'use client'
+
+import Head from 'next/head'
+import NavBar from './NavBar'
+
+export default function Layout({ children }) {
+  return (
+    <>
+      <Head>
+        <title>fresh</title>
+        <meta
+          name="description"
+          content="A simple website to show how to use use-shopping-cart"
+        />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <NavBar />
+      <main className="bg-[#f8f7f5] min-h-[calc(100vh-76px)] px-10 py-8">
+        <div className="container md:mx-auto md:max-w-[850px]">{children}</div>
+      </main>
+    </>
+  )
+}