feat: create workspace

src/app/boards/[...boardId]/page.tsx

@@ -22,6 +22,7 @@ import BoardDropdown from "./components/BoardDropdown";
 import { DeleteBoardConfirmation } from "./components/DeleteBoardConfirmation";
 import { DeleteListConfirmation } from "./components/DeleteListConfirmation";
 import List from "./components/List";
+import { NewWorkspaceForm } from "~/app/components/NewWorkspaceForm";
 import { NewCardForm } from "./components/NewCardForm";
 import { NewListForm } from "./components/NewListForm";
 
@@ -304,6 +305,7 @@ export default function BoardPage() {
         {modalContentType === "NEW_LIST" && (
           <NewListForm boardPublicId={boardId} />
         )}
+        {modalContentType === "NEW_WORKSPACE" && <NewWorkspaceForm />}
       </Modal>
     </div>
   );

src/app/boards/page.tsx

@@ -8,6 +8,7 @@ import Modal from "~/app/components/modal";
 
 import { ImportBoardsForm } from "./components/ImportBoardsForm";
 import { NewBoardForm } from "./components/NewBoardForm";
+import { NewWorkspaceForm } from "~/app/components/NewWorkspaceForm";
 
 export default function BoardsPage() {
   const { openModal, modalContentType } = useModal();
@@ -48,6 +49,7 @@ export default function BoardsPage() {
       <Modal>
         {modalContentType === "NEW_BOARD" && <NewBoardForm />}
         {modalContentType === "IMPORT_BOARDS" && <ImportBoardsForm />}
+        {modalContentType === "NEW_WORKSPACE" && <NewWorkspaceForm />}
       </Modal>
 
       <div className="flex flex-row">

src/app/cards/[cardId]/page.tsx

@@ -12,6 +12,7 @@ import LabelSelector from "./components/LabelSelector";
 import ListSelector from "./components/ListSelector";
 import MemberSelector from "./components/MemberSelector";
 import { NewLabelForm } from "./components/NewLabelForm";
+import { NewWorkspaceForm } from "~/app/components/NewWorkspaceForm";
 
 import Modal from "~/app/components/modal";
 import { useModal } from "~/app/providers/modal";
@@ -162,6 +163,7 @@ export default function CardPage() {
             cardPublicId={cardId}
           />
         )}
+        {modalContentType === "NEW_WORKSPACE" && <NewWorkspaceForm />}
       </Modal>
     </div>
   );

src/app/components/NewWorkspaceForm.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { api } from "~/trpc/react";
+
+import { HiXMark } from "react-icons/hi2";
+
+import { useModal } from "~/app/providers/modal";
+import { useWorkspace } from "~/app/providers/workspace";
+
+import { Formik, Form, Field } from "formik";
+
+interface FormValues {
+  name: string;
+}
+
+export function NewWorkspaceForm() {
+  const { closeModal } = useModal();
+  const { switchWorkspace } = useWorkspace();
+
+  const createWorkspace = api.workspace.create.useMutation({
+    onSuccess: (values) => {
+      try {
+        if (values?.publicId) {
+          switchWorkspace({ publicId: values.publicId, name: values.name });
+          closeModal();
+        }
+      } catch (e) {
+        console.log(e);
+      }
+    },
+  });
+
+  return (
+    <>
+      <div className="flex w-full justify-between pb-4">
+        <h2 className="text-sm font-bold text-dark-1000">New workspace</h2>
+        <button
+          className="rounded p-1 hover:bg-dark-300 focus:outline-none"
+          onClick={() => closeModal()}
+        >
+          <HiXMark size={18} className="text-dark-900" />
+        </button>
+      </div>
+
+      <Formik
+        initialValues={{
+          name: "",
+        }}
+        onSubmit={(values: FormValues) => {
+          createWorkspace.mutate({
+            name: values.name,
+          });
+        }}
+      >
+        <Form>
+          <label
+            htmlFor="name"
+            className="block pb-2 text-sm font-normal leading-6 text-dark-1000"
+          >
+            Name
+          </label>
+          <Field
+            id="name"
+            name="name"
+            className="block w-full rounded-md border-0 bg-dark-300 bg-white/5 py-1.5 text-dark-1000 shadow-sm ring-1 ring-inset ring-dark-700 focus:ring-2 focus:ring-inset focus:ring-dark-700 sm:text-sm sm:leading-6"
+          />
+          <div className="mt-5 sm:mt-6">
+            <button
+              type="submit"
+              className="inline-flex w-full justify-center rounded-md bg-dark-1000 px-3 py-2 text-sm font-semibold text-dark-50 shadow-sm focus-visible:outline-none"
+            >
+              Create workspace
+            </button>
+          </div>
+        </Form>
+      </Formik>
+    </>
+  );
+}

src/app/components/SideNavigation.tsx

@@ -33,23 +33,28 @@ export default function SideNavigation({ user }: SideNavigationProps) {
   ];
 
   return (
-    <nav className="flex w-72 flex-col justify-between border-r border-dark-600 px-3 pb-3 pt-5">
-      <div>
-        <WorkspaceMenu />
-        <ul role="list" className="space-y-1">
-          {navigation.map((item) => (
-            <li key={item.name}>
-              <ReactiveButton
-                href={item.href}
-                current={pathname.includes(item.href)}
-                name={item.name}
-                json={item.icon}
-              />
-            </li>
-          ))}
-        </ul>
-      </div>
-      <UserMenu email={user?.email ?? ""} imageUrl={user?.image ?? undefined} />
-    </nav>
+    <>
+      <nav className="flex w-72 flex-col justify-between border-r border-dark-600 px-3 pb-3 pt-5">
+        <div>
+          <WorkspaceMenu />
+          <ul role="list" className="space-y-1">
+            {navigation.map((item) => (
+              <li key={item.name}>
+                <ReactiveButton
+                  href={item.href}
+                  current={pathname.includes(item.href)}
+                  name={item.name}
+                  json={item.icon}
+                />
+              </li>
+            ))}
+          </ul>
+        </div>
+        <UserMenu
+          email={user?.email ?? ""}
+          imageUrl={user?.image ?? undefined}
+        />
+      </nav>
+    </>
   );
 }

src/app/components/WorkspaceMenu.tsx

@@ -3,10 +3,14 @@
 import { Fragment } from "react";
 import { Menu, Transition } from "@headlessui/react";
 
+import { useModal } from "~/app/providers/modal";
 import { useWorkspace } from "~/app/providers/workspace";
 
-export default function UserMenu() {
+import { HiCheck } from "react-icons/hi2";
+
+export default function WorkspaceMenu() {
   const { workspace, availableWorkspaces, switchWorkspace } = useWorkspace();
+  const { openModal } = useModal();
 
   return (
     <Menu as="div" className="relative inline-block w-full pb-3 text-left">
@@ -32,26 +36,45 @@ export default function UserMenu() {
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Menu.Items className="absolute left-0 z-10 w-full origin-top-left rounded-md border border-dark-500 bg-dark-300 p-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-          {availableWorkspaces.map((availableWorkspace) => (
-            <div key={availableWorkspace.publicId} className="flex">
-              <Menu.Item>
-                <button
-                  onClick={() => switchWorkspace(availableWorkspace)}
-                  className="flex w-full items-center rounded-[5px] px-3 py-2 text-left text-sm text-dark-1000 hover:bg-dark-400"
-                >
-                  <span className="inline-flex h-5 w-5 items-center justify-center rounded-[5px] bg-indigo-700">
-                    <span className="text-xs font-medium leading-none text-white">
-                      {availableWorkspace?.name.charAt(0).toUpperCase()}
-                    </span>
-                  </span>
-                  <span className="ml-2 text-xs font-medium text-dark-1000">
-                    {availableWorkspace?.name}
-                  </span>
-                </button>
-              </Menu.Item>
-            </div>
-          ))}
+        <Menu.Items className="absolute left-0 z-10 w-full origin-top-left rounded-md border border-dark-500 bg-dark-300 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+          <div className="p-1">
+            {availableWorkspaces.map((availableWorkspace) => (
+              <div key={availableWorkspace.publicId} className="flex">
+                <Menu.Item>
+                  <button
+                    onClick={() => switchWorkspace(availableWorkspace)}
+                    className="flex w-full items-center justify-between rounded-[5px] px-3 py-2 text-left text-sm text-dark-1000 hover:bg-dark-400"
+                  >
+                    <div>
+                      <span className="inline-flex h-5 w-5 items-center justify-center rounded-[5px] bg-indigo-700">
+                        <span className="text-xs font-medium leading-none text-white">
+                          {availableWorkspace?.name.charAt(0).toUpperCase()}
+                        </span>
+                      </span>
+                      <span className="ml-2 text-xs font-medium text-dark-1000">
+                        {availableWorkspace?.name}
+                      </span>
+                    </div>
+                    {workspace?.name === availableWorkspace?.name && (
+                      <span>
+                        <HiCheck className="h-4 w-4" aria-hidden="true" />
+                      </span>
+                    )}
+                  </button>
+                </Menu.Item>
+              </div>
+            ))}
+          </div>
+          <div className="border-t-[1px] border-dark-500 p-1">
+            <Menu.Item>
+              <button
+                onClick={() => openModal("NEW_WORKSPACE")}
+                className="flex w-full items-center justify-between rounded-[5px] px-3 py-2 text-left text-xs text-dark-1000 hover:bg-dark-400"
+              >
+                Create workspace
+              </button>
+            </Menu.Item>
+          </div>
         </Menu.Items>
       </Transition>
     </Menu>

src/app/members/page.tsx

@@ -7,6 +7,7 @@ import Modal from "~/app/components/modal";
 
 import { ImportBoardsForm } from "~/app/boards/components/ImportBoardsForm";
 import { NewBoardForm } from "~/app/boards/components/NewBoardForm";
+import { NewWorkspaceForm } from "~/app/components/NewWorkspaceForm";
 
 import MemberDropdown from "./components/MemberDropdown";
 
@@ -85,6 +86,7 @@ export default function MembersPage() {
       <Modal>
         {modalContentType === "NEW_BOARD" && <NewBoardForm />}
         {modalContentType === "IMPORT_BOARDS" && <ImportBoardsForm />}
+        {modalContentType === "NEW_WORKSPACE" && <NewWorkspaceForm />}
       </Modal>
     </div>
   );

src/app/providers/workspace.tsx

@@ -45,8 +45,6 @@ export const WorkspaceProvider: React.FC<{ children: ReactNode }> = ({
 
   const { data } = api.workspace.all.useQuery();
 
-  console.log({ data });
-
   const switchWorkspace = (_workspace: Workspace) => {
     localStorage.setItem("workspacePublicId", _workspace.publicId);
 

src/server/api/routers/board.ts

@@ -122,8 +122,6 @@ export const boardRouter = createTRPCRouter({
         where: eq(workspaces.publicId, input.workspacePublicId),
       })
 
-      console.log({ workspace })
-
       if (!workspace) return;
 
       return ctx.db.insert(boards).values({

src/server/api/routers/card.ts

@@ -109,8 +109,6 @@ export const cardRouter = createTRPCRouter({
           
           if (!card || !member) return;
 
-          console.log({ member })
-
           const memberExists = await tx.query.cardToWorkspaceMembers.findFirst({
             where: and(eq(cardToWorkspaceMembers.cardId, card.id), eq(cardToWorkspaceMembers.workspaceMemberId, member.id)),
           });

src/server/api/routers/workspace.ts

@@ -3,6 +3,8 @@ import { and, eq, isNull } from "drizzle-orm";
 
 import { workspaces, workspaceMembers } from "~/server/db/schema";
 
+import { generateUID } from "~/utils/generateUID";
+
 import {
   createTRPCRouter,
   publicProcedure,
@@ -61,4 +63,38 @@ export const workspaceRouter = createTRPCRouter({
         }
       });
     }),
+  create: publicProcedure
+    .input(
+      z.object({
+        name: z.string().min(1),
+      }),
+    )
+    .mutation(async ({ ctx, input }) => {
+      const userId = ctx.session?.user.id;
+
+      if (!userId) return;
+
+      const workspace = await ctx.db.insert(workspaces).values({
+        publicId: generateUID(),
+        name: input.name,
+        slug: input.name.toLowerCase(),
+        createdBy: userId,
+      });
+
+      await ctx.db.insert(workspaceMembers).values({
+        publicId: generateUID(),
+        userId,
+        workspaceId: Number(workspace.insertId),
+        createdBy: userId,
+        role: 'admin'
+      })
+
+      return ctx.db.query.workspaces.findFirst({
+        where: eq(workspaces.id, Number(workspace.insertId)),
+        columns: {
+          publicId: true,
+          name: true,
+        },
+      });
+    }),
 });