feat(web): channel settings

apps/web/src/app/c/[slug]/settings/channels/controller.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { Button } from "@spek/ui";
+import Link from "next/link";
+import { useState } from "react";
+
+import { CreateChannelModal } from "@/components/communitySettings/CreateChannelModal";
+import { Header } from "@/components/communitySettings/Header";
+import { useTypeSafeQuery } from "@/hooks/useTypeSafeQuery";
+
+interface PageProps {
+  slug: string;
+}
+
+const Page: React.FC<PageProps> = ({ slug }) => {
+  const { data, isLoading } = useTypeSafeQuery(
+    ["getCommunity", slug],
+    { enabled: false },
+    [slug]
+  );
+
+  if (isLoading) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      {data?.channels.map((channel) => (
+        <div
+          key={channel.id}
+          className="rounded-md border border-primary-700 px-4 py-1"
+        >
+          <Link href={`/c/${slug}/${channel.id}`} className="font-semibold">
+            {channel.name}
+          </Link>
+          <p className="text-primary-300">{channel.description}</p>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export const ChannelsSettingsController: React.FC<{ slug: string }> = ({
+  slug,
+}) => {
+  const { data } = useTypeSafeQuery(
+    ["getCommunity", slug],
+    { enabled: false },
+    [slug]
+  );
+
+  const [openModal, setOpenModal] = useState(false);
+
+  const handleOpenModal = () => {
+    setOpenModal(!openModal);
+  };
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Header heading="Channels" communitySlug={slug} />
+      <div>
+        <Button onClick={handleOpenModal}>Create channel</Button>
+      </div>
+      <Page slug={slug} />
+      <CreateChannelModal
+        communityId={data?.community.id}
+        onRequestClose={handleOpenModal}
+        open={openModal}
+      />
+    </div>
+  );
+};

apps/web/src/app/c/[slug]/settings/channels/page.tsx

@@ -1,19 +1,21 @@
-"use client";
-
 import { WaitForWsAndAuth } from "@/components/auth/WaitForWsAndAuth";
 import { CommunitySettingsLayout } from "@spek/ui";
+import { Metadata } from "next";
+import { ChannelsSettingsController } from "./controller";
 
 interface PageProps {
   params: { slug: string };
 }
 
+export const metadata: Metadata = {
+  title: "Channels",
+};
+
 export default function CommunityChannelsPage({ params }: PageProps) {
   return (
     <WaitForWsAndAuth>
       <CommunitySettingsLayout communitySlug={params.slug}>
-        <div>
-          <p>Channels</p>
-        </div>
+        <ChannelsSettingsController slug={params.slug} />
       </CommunitySettingsLayout>
     </WaitForWsAndAuth>
   );

apps/web/src/app/c/[slug]/settings/controller.tsx

@@ -5,6 +5,7 @@ import { useRouter } from "next/navigation";
 import { Overview } from "@/components/communitySettings/Overview";
 import { useTypeSafeQuery } from "@/hooks/useTypeSafeQuery";
 import { Header } from "@/components/communitySettings/Header";
+import { CenterLoader } from "@/components/CenterLoader";
 
 interface PageControllerProps {
   slug: string;
@@ -17,7 +18,7 @@ export const PageController: React.FC<PageControllerProps> = ({ slug }) => {
   ]);
 
   if (isLoading || !data) {
-    return <div>loading...</div>;
+    return <CenterLoader />;
   }
 
   if (!data.community.isAdmin) {
@@ -26,7 +27,7 @@ export const PageController: React.FC<PageControllerProps> = ({ slug }) => {
 
   return (
     <div>
-      <Header heading="Overview" />
+      <Header heading="Overview" communitySlug={data.community.slug} />
       <Overview
         channels={data.channels}
         community={data.community}

apps/web/src/components/communitySettings/CreateChannelModal.tsx

@@ -8,7 +8,7 @@ import { Button } from "@/ui/button";
 import { useTypeSafeMutation } from "@/hooks/useTypeSafeMutation";
 
 interface CreateChannelModalProps {
-  communityId: string;
+  communityId: string | undefined;
   open: boolean;
   onRequestClose: () => void;
 }
@@ -36,14 +36,16 @@ export const CreateChannelModal: React.FC<CreateChannelModalProps> = ({
         <Formik<InitialFormValues>
           initialValues={{ description: "", name: "" }}
           onSubmit={async (values, { setFieldError }) => {
-            const resp = await mutateAsync([
-              { communityId: communityId, ...values },
-            ]);
+            if (communityId) {
+              const resp = await mutateAsync([
+                { communityId: communityId, ...values },
+              ]);
 
-            if (!resp.error) {
-              push(`/c/${resp.channel.community.slug}/${resp.channel.id}`);
-            } else {
-              setFieldError("name", resp.error);
+              if (!resp.error) {
+                push(`/c/${resp.channel.community.slug}/${resp.channel.id}`);
+              } else {
+                setFieldError("name", resp.error);
+              }
             }
           }}
         >

apps/web/src/components/communitySettings/Header.tsx

@@ -1,22 +1,21 @@
 import { Icon } from "@spek/ui";
-import { useRouter } from "next/navigation";
+import Link from "next/link";
 
 interface HeaderProps {
   heading: string;
+  communitySlug: string;
 }
 
-export const Header: React.FC<HeaderProps> = ({ heading }) => {
-  const router = useRouter();
-
+export const Header: React.FC<HeaderProps> = ({ heading, communitySlug }) => {
   return (
     <div className="flex justify-between py-3 items-center">
       <h2>{heading}</h2>
-      <div
+      <Link
         className="h-10 w-10 hover:bg-primary-800 hover:ring-2 cursor-pointer transition-all border border-primary-800 ring-primary-400 flex justify-center items-center rounded-full"
-        onClick={() => router.back()}
+        href={`/c/${communitySlug}`}
       >
         <Icon name="plus" className="rotate-45" />
-      </div>
+      </Link>
     </div>
   );
 };

packages/ui/layouts/CommunitySettingsLayout.tsx

@@ -38,12 +38,6 @@ export const CommunitySettingsLayout: React.FC<
             >
               <li>Channels</li>
             </Link>
-            <Link
-              className={`${pathname == `/c/${communitySlug}/settings/members` ? "px-3 py-1 bg-primary-800 rounded-md" : ""}`}
-              href={`/c/${communitySlug}/settings/members`}
-            >
-              <li>Members</li>
-            </Link>
           </ul>
         </div>
       </div>