Sam
Sam
Explore posts from servers
RRailwayTTCTheo's Typesafe Cult
PostsComments
TTCTheo's Typesafe Cult
Created by Sam on 8/3/2023 in #questions
Submitting form on main page from within dialog
Hi there, I'm using shadcn/ui for my UI and i'm trying to figure out how to make a form confirmation dialog. The <Button type="submit">Upgrade</Button> doesn't seem to submit the form on the outside of the dialog. Here is my code: 
<Form {...ratingForm}>
          <form
            onSubmit={ratingForm.handleSubmit((v) => {
              startTransition(() =>
                updateRating(member.id, {
                  comment: v.comment,
                  rating: v.rating,
                })
              );
            })}
            className="space-y-2"
          >
            <FormField
              control={ratingForm.control}
              name="rating"
              render={({ field }) => (
                <FormItem>
                  <FormLabel className="text-md">
                    Member: {member.name_first} {member.name_last}
                  </FormLabel>
                  <Select
                    onValueChange={field.onChange}
                    defaultValue={member.rating.toString()}
                  >
                    <FormControl>
                      <SelectTrigger className="w-[180px]">
                        <SelectValue />
                      </SelectTrigger>
                    </FormControl>
                    <SelectContent>
                      <SelectItem value="1">OBS</SelectItem>
                      <SelectItem value="2">S1</SelectItem>
                      <SelectItem value="3">S2</SelectItem>
                      <SelectItem value="4">S3</SelectItem>
                      <SelectItem value="5">C1</SelectItem>
                      <SelectItem value="7">C3</SelectItem>
                      <SelectItem value="8">I1</SelectItem>
                      <SelectItem value="10">I3</SelectItem>
                    </SelectContent>
                  </Select>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={ratingForm.control}
              name="comment"
              render={({ field }) => (
                <FormItem>
                  <FormControl>
                    <Input placeholder="Comment..." {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <Dialog>
              <DialogContent>
                <DialogHeader>
                  <DialogTitle>Are you sure absolutely sure?</DialogTitle>
                  <DialogDescription>
                    This action cannot be undone. This will permanently upgrade
                    the member&apos;s rating without any possibility to reverse
                    it.
                  </DialogDescription>
                </DialogHeader>
                <DialogFooter>
                  <Button type="submit">Upgrade</Button>
                </DialogFooter>
              </DialogContent>
              <DialogTrigger asChild>
                <Button>Upgrade</Button>
              </DialogTrigger>
            </Dialog>
          </form>
        </Form>
<Form {...ratingForm}>
          <form
            onSubmit={ratingForm.handleSubmit((v) => {
              startTransition(() =>
                updateRating(member.id, {
                  comment: v.comment,
                  rating: v.rating,
                })
              );
            })}
            className="space-y-2"
          >
            <FormField
              control={ratingForm.control}
              name="rating"
              render={({ field }) => (
                <FormItem>
                  <FormLabel className="text-md">
                    Member: {member.name_first} {member.name_last}
                  </FormLabel>
                  <Select
                    onValueChange={field.onChange}
                    defaultValue={member.rating.toString()}
                  >
                    <FormControl>
                      <SelectTrigger className="w-[180px]">
                        <SelectValue />
                      </SelectTrigger>
                    </FormControl>
                    <SelectContent>
                      <SelectItem value="1">OBS</SelectItem>
                      <SelectItem value="2">S1</SelectItem>
                      <SelectItem value="3">S2</SelectItem>
                      <SelectItem value="4">S3</SelectItem>
                      <SelectItem value="5">C1</SelectItem>
                      <SelectItem value="7">C3</SelectItem>
                      <SelectItem value="8">I1</SelectItem>
                      <SelectItem value="10">I3</SelectItem>
                    </SelectContent>
                  </Select>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={ratingForm.control}
              name="comment"
              render={({ field }) => (
                <FormItem>
                  <FormControl>
                    <Input placeholder="Comment..." {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <Dialog>
              <DialogContent>
                <DialogHeader>
                  <DialogTitle>Are you sure absolutely sure?</DialogTitle>
                  <DialogDescription>
                    This action cannot be undone. This will permanently upgrade
                    the member&apos;s rating without any possibility to reverse
                    it.
                  </DialogDescription>
                </DialogHeader>
                <DialogFooter>
                  <Button type="submit">Upgrade</Button>
                </DialogFooter>
              </DialogContent>
              <DialogTrigger asChild>
                <Button>Upgrade</Button>
              </DialogTrigger>
            </Dialog>
          </form>
        </Form>
1 replies
TTCTheo's Typesafe Cult
Created by Sam on 5/4/2023 in #questions
Clerk + Next.js app router <SignedOut> children not rendered after <UserButton> sign out
Hi there! I'm currently building an app with Clerk and I've got signing in working however when I sign out using the <UserButton> component however after the redirect, my sign in button isn't rendered until a refresh of the page. Here's my code: 
<SignedOut>
          <SignInButton />
        </SignedOut>
        <SignedIn>
          <div className="flex h-12 w-12 items-center">
            <UserButton
              afterSignOutUrl="/"
              appearance={{
                layout: {
                  logoPlacement: "none",
                },
                elements: {
                  userButtonAvatarBox: "h-8 w-8 sm:h-12 sm:w-12",
                },
              }}
            />
          </div>
        </SignedIn
<SignedOut>
          <SignInButton />
        </SignedOut>
        <SignedIn>
          <div className="flex h-12 w-12 items-center">
            <UserButton
              afterSignOutUrl="/"
              appearance={{
                layout: {
                  logoPlacement: "none",
                },
                elements: {
                  userButtonAvatarBox: "h-8 w-8 sm:h-12 sm:w-12",
                },
              }}
            />
          </div>
        </SignedIn
Thanks in advance!
6 replies
TTCTheo's Typesafe Cult
Created by Sam on 5/3/2023 in #questions
Clerk re-render parent server component on sign out with custom sign out button.
Hi I'm probably being a little stupid here but I'm just wondering what the best and most simple way to create a custom sign out button when using Clerk? I was able to create a Sign out button with the following code but the parent server component wouldn't rerender so I needed to refresh for it to show me as logged out: 
export const CustomSignOut = () => {
  const { signOut } = useClerk();

  return (
    <div>
      <Button onClick={() => signOut()} variant={"outline"}>
        Sign Out
      </Button>
    </div>
  );
};
export const CustomSignOut = () => {
  const { signOut } = useClerk();

  return (
    <div>
      <Button onClick={() => signOut()} variant={"outline"}>
        Sign Out
      </Button>
    </div>
  );
};
How can I get the parent server component to re-render on sign out? Thanks in advance!
6 replies