👌

【Convex】NextJs14 と Convex【#１８ Convex Dialog】

2024/04/29に公開

Next.js

clerk

convex

tech

【#１８ Convex Dialog】

YouTube: https://youtu.be/ttzWTj2DosA

https://youtu.be/ttzWTj2DosA

今回は前回作成したモーダル用のストアを使用して、
ShadcnのDialogを実装します。

npx shadcn-ui@latest add dialog

まずはモーダル用のプロバイダーを作成します。

components/providers/modal-provider.tsx

"use client";

import { useEffect, useState } from "react";
import { CreateCardModal } from "@/components/modals/create-card-modal";

export const ModalProvider = () => {
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    setIsMounted(true);
  }, []);

  if (!isMounted) {
    return null;
  }

  return (
    <>
      <CreateCardModal />
    </>
  );
};

次は「components」フォルダ内に「modals」フォルダを作成して、
「create-card-modal.tsx」ファイルを作成します。

components/modals/create-card-modal.tsx

"use client";

import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";

import { useCreateCardModal } from "@/store/use-create-card-modals";

export const CreateCardModal = () => {
  const { isOpen, onClose, initialValues } = useCreateCardModal();

  return (
    <Dialog open={true} onOpenChange={onClose}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Create Card</DialogTitle>
          <DialogDescription>
            Select card type & Enter card title
          </DialogDescription>
        </DialogHeader>
        <DialogFooter></DialogFooter>
      </DialogContent>
    </Dialog>
  );
};

ここまで出来ましたら、
プロバイダーを「layout.tsx」に設定します。

今回はconvexのライブラリを使用していますので、
プロバイダー以下に設定する必要があります。

プロバイダーは「(main)」フォルダ内の
「layout.tsx」に設定します。

app/(main)/layout.tsx

import { ModalProvider } from "@/components/providers/modal-provider";
import { Navbar } from "./_components/navbar";
import { Sidebar } from "./_components/sidebar";

interface Props {
  children: React.ReactNode;
}

const MainLayout = ({ children }: Props) => {
  return (
    <>
      <ModalProvider />
      <div className="w-full h-full">
        <Sidebar />
        <div className="pl-[60px] overflow-hidden">
          <Navbar />
          {children}
        </div>
      </div>
    </>
  );
};

export default MainLayout;

【#１８ Convex Dialog】

Discussion