basic members table

Author: alanagoyal

.env

@@ -1 +1 @@
-SITE_URL="https://getdocbase.com"
+SITE_URL="https://getrebase.com"

.env.example

@@ -26,6 +26,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel

.env.local.example

@@ -8,10 +8,10 @@ import { siteConfig } from "@/config/site";
 
 export const metadata: Metadata = {
   title: {
-    default: "Project Name",
-    template: "%s | Project Name",
+    default: siteConfig.name,
+    template: `%s | ${siteConfig.name}`,
   },
-  description: "Project description",
+  description: siteConfig.description,
   themeColor: [
     { media: "(prefers-color-scheme: light)", color: "white" },
     { media: "(prefers-color-scheme: dark)", color: "black" },

.gitignore

@@ -0,0 +1,3 @@
+export default function Mailbox() {
+  return <div>Mailbox</div>;
+}

app/favicon.ico

@@ -0,0 +1,31 @@
+import MemberForm from "@/components/member-form";
+import { MembersTable } from "@/components/members-table";
+import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
+import { cookies } from "next/headers";
+import { redirect } from "next/navigation";
+
+export default async function Members() {
+  const supabase = createServerComponentClient({ cookies });
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+
+  if (!user) {
+    redirect("/");
+  }
+
+  const {
+    data: members,
+    error,
+    status,
+  } = await supabase.from("members").select("*").eq("created_by", user.id);
+
+  console.log(members);
+
+  return (
+    <div>
+      <MemberForm user={user} />
+      <MembersTable members={members} />
+    </div>
+  );
+}

app/layout.tsx

@@ -16,7 +16,7 @@ export default async function handler() {
           alignItems: "center",
         }}
       >
-        Project Name 🤗
+        Re:base 📧
       </div>
     ),
     {

app/mailbox/page.tsx

@@ -0,0 +1,143 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import * as z from "zod";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { Button } from "@/components/ui/button";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { toast } from "@/components/ui/use-toast";
+import { createClientComponentClient } from "@supabase/auth-helpers-nextjs";
+
+const memberFormSchema = z.object({
+  email: z.string().optional(),
+  first_name: z.string().optional(),
+  last_name: z.string().optional(),
+});
+
+type MemberFormValues = z.infer<typeof memberFormSchema>;
+
+export default function MemberForm({ user }: { user: any }) {
+  const supabase = createClientComponentClient();
+  const form = useForm<MemberFormValues>({
+    resolver: zodResolver(memberFormSchema),
+    defaultValues: {
+      email: "",
+      first_name: "",
+      last_name: "",
+    },
+  });
+
+  async function onSubmit(data: MemberFormValues) {
+    try {
+      const updates = {
+        email: data.email,
+        first_name: data.first_name,
+        last_name: data.last_name,
+        created_by: user?.id,
+      };
+
+      let { error } = await supabase.from("members").insert(updates);
+      if (error) throw error;
+      toast({
+        description: "Your member has been added",
+      });
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  return (
+    <div>
+      <div className="grid gap-4 py-4">
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+            <Dialog>
+              <DialogTrigger asChild>
+                <Button variant="outline">Add Member</Button>
+              </DialogTrigger>
+              <DialogContent className="sm:max-w-[425px]">
+                <DialogHeader>
+                  <DialogTitle>New Member</DialogTitle>
+                  <DialogDescription>
+                    Please enter the first name, last name, and email
+                  </DialogDescription>
+                </DialogHeader>{" "}
+                <FormField
+                  control={form.control}
+                  name="email"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+                      <div className="space-y-0.5">
+                        <FormLabel className="text-base mx-2">Email</FormLabel>
+                      </div>
+                      <FormControl>
+                        <Input {...field} />
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="first_name"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+                      <div className="space-y-0.5">
+                        <FormLabel className="text-base mx-2">
+                          First Name
+                        </FormLabel>
+                      </div>
+                      <FormControl>
+                        <Input {...field} />
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="last_name"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+                      <div className="space-y-0.5">
+                        <FormLabel className="text-base mx-2">
+                          Last Name
+                        </FormLabel>
+                      </div>
+                      <FormControl>
+                        <Input {...field} />
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+                <div className="py-1 flex justify-center">
+                  <Button
+                    type="submit"
+                    className="bg-[#9FACE6] text-white font-bold py-2 px-4 rounded w-full"
+                  >
+                    Add
+                  </Button>
+                </div>
+              </DialogContent>
+            </Dialog>
+          </form>
+        </Form>
+      </div>
+    </div>
+  );
+}