feat(core): server actions

move to server actions and new auth helpers

BREAKING CHANGE: implicit auth -> pkce

Author: imbhargav5

.eslintrc.cjs

@@ -17,14 +17,9 @@ module.exports = {
       },
       plugins: ['@typescript-eslint', 'prettier'],
       rules: {
-        'prettier/prettier': 'error',
+        'prettier/prettier': 1,
       },
-      files: [
-        'src/**/*.ts',
-        'src/**/*.tsx',
-        'emails/**/*.ts',
-        'emails/**/*.tsx',
-      ],
+      files: ['src/**/*.ts', 'src/**/*.tsx'],
     },
     {
       extends: [
@@ -38,8 +33,8 @@ module.exports = {
       },
       plugins: [
         '@typescript-eslint',
-        'prettier',
         'plugin:playwright/playwright-test',
+        'prettier',
       ],
       rules: {
         'prettier/prettier': 'error',
@@ -51,11 +46,26 @@ module.exports = {
       files: '*.mjs',
       rules: ruleOverrides,
     },
+    // make nextconfig.mjs node environment
+    {
+      extends: ['eslint:recommended', 'prettier', 'node'],
+      files: 'next.config.mjs',
+      rules: ruleOverrides,
+    },
     {
       extends: ['prettier'],
       files: '*.js',
       rules: ruleOverrides,
     },
+    {
+      extends: ['prettier'],
+      files: '*.cjs',
+      rules: ruleOverrides,
+      parserOptions: {
+        ecmaVersion: 2020,
+        sourceType: 'module',
+      },
+    },
   ],
   root: true,
 };

next-env.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference types="next/navigation-types/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.mjs

@@ -1,6 +1,7 @@
 export default {
   experimental: {
     appDir: true,
+    serverActions: true,
   },
   images: {
     remotePatterns: [

package.json

@@ -24,17 +24,33 @@
     "@commitlint/config-conventional": "^17.4.4",
     "@headlessui/react": "^1.7.11",
     "@heroicons/react": "^2.0.16",
-    "@supabase/auth-helpers-nextjs": "^0.5.4",
+    "@radix-ui/react-context-menu": "^2.1.3",
+    "@radix-ui/react-dialog": "^1.0.2",
+    "@radix-ui/react-dropdown-menu": "^2.0.2",
+    "@radix-ui/react-hover-card": "^1.0.5",
+    "@radix-ui/react-label": "^2.0.0",
+    "@radix-ui/react-navigation-menu": "^1.1.1",
+    "@radix-ui/react-popover": "^1.0.5",
+    "@radix-ui/react-select": "^1.2.0",
+    "@radix-ui/react-slider": "^1.1.1",
+    "@radix-ui/react-switch": "^1.0.2",
+    "@supabase/auth-helpers-nextjs": "^0.7.3",
     "@supabase/auth-helpers-react": "^0.3.1",
-    "@supabase/supabase-js": "^2.8.0",
+    "@supabase/supabase-js": "^2.31.0",
+    "@tailwindcss/typography": "^0.5.9",
     "@tanstack/react-query": "^4.24.10",
-    "next": "^13.2.1",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0",
+    "lucide-react": "0.206.0",
+    "next": "^13.4.12",
     "next-seo": "^5.15.0",
     "next-sitemap": "^3.1.52",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.0",
+    "tailwind-merge": "^1.14.0",
     "tailwindcss": "^3.2.7",
+    "tailwindcss-animate": "^1.0.6",
     "url-join": "^5.0.0"
   },
   "devDependencies": {
@@ -56,6 +72,7 @@
     "env-cmd": "^10.1.0",
     "eslint": "^8.34.0",
     "eslint-config-esnext": "^4.1.0",
+    "eslint-config-node": "^4.1.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-playwright": "^0.12.0",

src/app/ItemsList.tsx

@@ -1,14 +1,8 @@
 'use client';
 import { Table } from '@/types';
 import Link from 'next/link';
-import { useItems } from './utils/react-query-hooks';
 
-export const ItemsList = ({
-  initialItems,
-}: {
-  initialItems: Table<'items'>[];
-}) => {
-  const { data: items } = useItems(initialItems);
+export const ItemsList = ({ items }: { items: Table<'items'>[] }) => {
   return (
     <div className="space-y-8">
       <div className="flex justify-between items-baseline">

src/app/actions.ts

@@ -0,0 +1,48 @@
+'use server';
+
+import { createSupabaseServerActionClient } from '@/supabase-clients/createSupabaseServerActionClient';
+import {
+  deleteItem,
+  getAllItems,
+  getItem,
+  insertItem,
+  updateItem,
+} from '../utils/supabase-queries';
+import { revalidatePath } from 'next/cache';
+
+export async function insertItemAction(payload: {
+  name: string;
+  description: string;
+}) {
+  const supabaseClient = createSupabaseServerActionClient();
+  const data = await insertItem(supabaseClient, payload);
+  revalidatePath('/');
+  return data.id;
+}
+
+export async function getAllItemsAction() {
+  const supabaseClient = createSupabaseServerActionClient();
+  return await getAllItems(supabaseClient);
+}
+
+export async function getItemAction(id: string) {
+  const supabaseClient = createSupabaseServerActionClient();
+  return await getItem(supabaseClient, id);
+}
+
+export async function updateItemAction(payload: {
+  id: string;
+  name: string;
+  description: string;
+}) {
+  const supabaseClient = createSupabaseServerActionClient();
+  const data = await updateItem(supabaseClient, payload);
+  revalidatePath('/');
+  return data;
+}
+
+export const deleteItemAction = async (id: string) => {
+  const supabaseClient = createSupabaseServerActionClient();
+  await deleteItem(supabaseClient, id);
+  revalidatePath('/');
+};

src/app/globals.css

@@ -1,5 +1,6 @@
 @tailwind base;
 @tailwind components;
+@tailwind utilities;
 
 html,
 body {
@@ -14,7 +15,6 @@ body {
   width: 100%;
 }
 
-@tailwind utilities;
 
 .swiper {
   width: 640px;
@@ -29,3 +29,81 @@ body {
   font-weight: bold;
 
 }
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 47.4% 11.2%;
+
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 47.4% 11.2%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 47.4% 11.2%;
+
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    --destructive: 0 100% 50%;
+    --destructive-foreground: 210 40% 98%;
+
+    --ring: 215 20.2% 65.1%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 224 71% 4%;
+    --foreground: 213 31% 91%;
+
+    --muted: 223 47% 11%;
+    --muted-foreground: 215.4 16.3% 56.9%;
+
+    --accent: 216 34% 17%;
+    --accent-foreground: 210 40% 98%;
+
+    --popover: 224 71% 4%;
+    --popover-foreground: 215 20.2% 65.1%;
+
+    --border: 216 34% 17%;
+    --input: 216 34% 17%;
+
+    --card: 224 71% 4%;
+    --card-foreground: 213 31% 91%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 1.2%;
+
+    --secondary: 222.2 47.4% 11.2%;
+    --secondary-foreground: 210 40% 98%;
+
+    --destructive: 0 63% 31%;
+    --destructive-foreground: 210 40% 98%;
+
+    --ring: 216 34% 17%;
+
+    --radius: 0.5rem;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+}

src/app/item/ItemIdLayoutContext.tsx

@@ -0,0 +1,93 @@
+'use client';
+import { Button } from '@/components/ui/Button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/Dialog';
+import { useMutation } from '@tanstack/react-query';
+import { useRouter } from 'next/navigation';
+import { useRef, useState } from 'react';
+import { toast } from 'react-hot-toast';
+import Trash from 'lucide-react/dist/esm/icons/trash';
+
+type Props = {
+  itemId: string;
+  deleteItemAction: (itemId: string) => Promise<void>;
+};
+
+export const ConfirmDeleteItemDialog = ({
+  itemId,
+  deleteItemAction,
+}: Props) => {
+  const [open, setOpen] = useState(false);
+  const toastRef = useRef<string | null>(null);
+  const router = useRouter();
+  const { mutate, isLoading } = useMutation(
+    async (id: string) => {
+      return deleteItemAction(id);
+    },
+    {
+      onMutate: () => {
+        const toastId = toast.loading('Deleting item');
+        toastRef.current = toastId;
+      },
+      onSuccess: () => {
+        toast.success('Item deleted', { id: toastRef.current });
+        toastRef.current = null;
+        router.refresh();
+        router.push('/');
+      },
+      onError: () => {
+        toast.error('Failed to delete item', { id: toastRef.current });
+        toastRef.current = null;
+      },
+      onSettled: () => {
+        setOpen(false);
+      },
+    }
+  );
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button variant="destructive">
+          <Trash className="mr-1" /> Delete Item
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Delete Item</DialogTitle>
+          <DialogDescription>
+            Are you sure you want to delete this item?
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button
+            type="button"
+            variant="destructive"
+            disabled={isLoading}
+            onClick={() => {
+              mutate(itemId);
+            }}
+          >
+            {isLoading ? `Deleting item...` : `Yes, delete`}
+          </Button>
+          <Button
+            disabled={isLoading}
+            type="button"
+            variant="outline"
+            onClick={() => {
+              setOpen(false);
+            }}
+          >
+            Cancel
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};