Basic UI and functions for making test community (#309)

* rebase and update * add skelton * add schma and server actions * am i the only one with keysley tyoe formating issues * freaking out jkjk added basic server action for creating community * add ui * toast or no toast * returning false is hacky * rmv that * rmv that * rmv that * remove seed data git push * chore: fix cache issue * can view community table * cant replace inserts to db * add dev env * clean up code * gen types * clean up code * clean up pt3 * use kysely * check for seed data * delete on cascade * run fix * can update community * add pub type and pubs and stages from seed script * change to communites --------- Co-authored-by: qweliant <[email protected]> Co-authored-by: Thomas F. K. Jorna <[email protected]>
pubpub · Apr 17, 2024 · 02fbc01 · 02fbc01
1 parent fb9f183
commit 02fbc01
Show file tree

Hide file tree

Showing 19 changed files with 849 additions and 140 deletions.
diff --git a/core/.env.development b/core/.env.development
@@ -3,6 +3,8 @@ MAILGUN_SMTP_PORT=54325
 API_KEY="super_secret_key"
 DATABASE_URL="postgresql://postgres:postgres@localhost:54322/postgres"
 SUPABASE_URL="http://localhost:54321"
+NEXT_PUBLIC_SUPABASE_URL="http://localhost:54321"
+NEXT_PUBLIC_PUBPUB_URL="http://localhost:3000"
 PUBPUB_URL="http://localhost:3000"
 ASSETS_BUCKET_NAME="assets.v7.pubpub.org"
 ASSETS_REGION="us-east-1"

diff --git a/core/app/(user)/communities/AddCommunityDialog.tsx b/core/app/(user)/communities/AddCommunityDialog.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import React from "react";
+
+import { Button } from "ui/button";
+import { Dialog, DialogContent, DialogTrigger } from "ui/dialog";
+import { ListPlus } from "ui/icon";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "ui/tooltip";
+
+import { AddCommunityForm } from "./AddCommunityForm";
+
+type Props = { user: any };
+export const AddCommunity = (props: Props) => {
+	return (
+		<Dialog>
+			<TooltipProvider>
+				<Tooltip>
+					<TooltipContent> Create a new community</TooltipContent>
+					<TooltipTrigger asChild>
+						<DialogTrigger asChild>
+							<Button variant="outline" className="flex items-center gap-x-2">
+								<ListPlus size="16" /> Create Community
+							</Button>
+						</DialogTrigger>
+					</TooltipTrigger>
+				</Tooltip>
+			</TooltipProvider>
+			<DialogContent>
+				<AddCommunityForm user={props.user} />
+			</DialogContent>
+		</Dialog>
+	);
+};
diff --git a/core/app/(user)/communities/AddCommunityForm.tsx b/core/app/(user)/communities/AddCommunityForm.tsx
@@ -0,0 +1,105 @@
+"use client";
+
+import React from "react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { Button } from "ui/button";
+import { Form, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "ui/form";
+import { Loader2 } from "ui/icon";
+import { Input } from "ui/input";
+import { toast } from "ui/use-toast";
+
+import { didSucceed, useServerAction } from "~/lib/serverActions";
+import { createCommunity } from "./actions";
+
+export const communityCreateFormSchema = z.object({
+	name: z.string().min(1),
+	slug: z.string().min(1),
+	avatar: z.string().url().optional().or(z.literal("")),
+});
+
+type Props = {
+	user: any;
+};
+
+export const AddCommunityForm = (props: Props) => {
+	const runCreateCommunity = useServerAction(createCommunity);
+
+	async function onSubmit(data: z.infer<typeof communityCreateFormSchema>) {
+		const result = await runCreateCommunity({ ...data, user: props.user });
+		if (didSucceed(result)) {
+			toast({
+				title: "Success",
+				description: "Community created",
+			});
+		}
+	}
+	const form = useForm<z.infer<typeof communityCreateFormSchema>>({
+		resolver: zodResolver(communityCreateFormSchema),
+		defaultValues: {
+			name: "",
+			slug: "",
+			avatar: "",
+		},
+	});
+
+	return (
+		<>
+			<Form {...form}>
+				<form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-y-4">
+					<FormField
+						control={form.control}
+						name="name"
+						render={({ field }) => (
+							<FormItem>
+								<FormLabel>Name</FormLabel>
+								<Input {...field} />
+								<FormDescription>
+									What is the name of your community
+								</FormDescription>
+								<FormMessage />
+							</FormItem>
+						)}
+					/>
+					<FormField
+						control={form.control}
+						name="slug"
+						render={({ field }) => (
+							<FormItem>
+								<FormLabel>Slug</FormLabel>
+								<Input {...field} />
+								<FormDescription>
+									Name the string you want your community to route to
+								</FormDescription>
+								<FormMessage />
+							</FormItem>
+						)}
+					/>
+					<FormField
+						control={form.control}
+						name="avatar"
+						render={({ field }) => (
+							<FormItem>
+								<FormLabel>Avatar</FormLabel>
+								<Input {...field} />
+								<FormDescription>
+									What is the url path to the avatar for your community (optional)
+								</FormDescription>
+								<FormMessage />
+							</FormItem>
+						)}
+					/>
+					<Button type="submit" disabled={form.formState.isSubmitting}>
+						{form.formState.isSubmitting ? (
+							<Loader2 />
+						) : (
+							<div className="flex items-center gap-x-2">Create Community</div>
+						)}
+					</Button>
+				</form>
+			</Form>
+		</>
+	);
+};
diff --git a/core/app/(user)/communities/CommunityTable.tsx b/core/app/(user)/communities/CommunityTable.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import React from "react";
+
+import type { TableCommunity } from "./getCommunityTableColumns";
+import type { UserAndMemberships } from "~/lib/types";
+import { DataTable } from "~/app/components/DataTable";
+import { getCommunityTableColumns } from "./getCommunityTableColumns";
+
+export const CommunityTable = ({
+	communities,
+	user,
+}: {
+	communities: TableCommunity[];
+	user: UserAndMemberships;
+}) => {
+	const communityTableColumns = getCommunityTableColumns({ user });
+	return <DataTable columns={communityTableColumns} data={communities} searchBy="slug" />;
+};
diff --git a/core/app/(user)/communities/RemoveCommunityButton.tsx b/core/app/(user)/communities/RemoveCommunityButton.tsx
@@ -0,0 +1,74 @@
+"use client";
+
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTrigger,
+} from "ui/alert-dialog";
+import { Button } from "ui/button";
+import { Trash } from "ui/icon";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "ui/tooltip";
+import { toast } from "ui/use-toast";
+
+import { didSucceed, useServerAction } from "~/lib/serverActions";
+import { removeCommunity } from "./actions";
+import { TableCommunity } from "./getCommunityTableColumns";
+
+export const RemoveCommunityButton = ({
+	community,
+	user,
+}: {
+	community: TableCommunity;
+	user: any;
+}) => {
+	const runRemoveCommunity = useServerAction(removeCommunity);
+	return (
+		<AlertDialog>
+			<TooltipProvider>
+				<Tooltip>
+					<TooltipContent>
+						<span>Remove Community</span>
+					</TooltipContent>
+					<TooltipTrigger asChild>
+						<AlertDialogTrigger asChild>
+							<Button variant="ghost">
+								Remove community <Trash size="14" className="ml-2" />
+							</Button>
+						</AlertDialogTrigger>
+					</TooltipTrigger>
+				</Tooltip>
+			</TooltipProvider>
+			<AlertDialogContent>
+				<AlertDialogHeader>Remove Member</AlertDialogHeader>
+				<p>
+					Are you sure you want to delete the community <strong>{community.name}?</strong>{" "}
+					All stages and pubs associated with this community will be deleted.
+				</p>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<Button asChild variant="destructive">
+						<AlertDialogAction
+							onClick={async () => {
+								const response = await runRemoveCommunity({ user, community });
+								if (didSucceed(response)) {
+									toast({
+										title: "Success",
+										description: "Community successfully removed",
+										variant: "default",
+									});
+								}
+							}}
+						>
+							<Trash size="16" className="mr-2" />
+							Remove
+						</AlertDialogAction>
+					</Button>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
+};