Fix various bugs and improve code quality

IhsenBouallegue · Nov 14, 2023 · 508487f · 508487f · vercel · Nov 14, 2023
1 parent 397684e
commit 508487f
Show file tree

Hide file tree

Showing 14 changed files with 72 additions and 38 deletions.
diff --git a/auth.ts b/auth.ts
@@ -53,7 +53,7 @@ export const {
 });
 
 async function createPersonalOrganization(user: User) {
-  const newOrganizationId = ORGANIZATION_KEY;
+  const newOrganizationId = ORGANIZATION_KEY();
   const organization = insertOrganizationSchema.parse({
     id: newOrganizationId,
     name: "Personal Organization",

diff --git a/src/app/api/hubs/[id]/route.ts b/src/app/api/hubs/[id]/route.ts
@@ -1,5 +1,6 @@
 import db from "@/lib/db";
 import { hubs } from "@/lib/schema/app";
+import { insertHubsSchema } from "@/lib/validations/hubs";
 import { eq } from "drizzle-orm";
 import { NextRequest, NextResponse } from "next/server";
 
@@ -23,12 +24,17 @@ export async function PATCH(
 ) {
   try {
     const body = await req.json();
+    const hub = insertHubsSchema.parse(body);
+    console.log(hub);
+
     const item = await db
       .update(hubs)
       .set(body)
       .where(eq(hubs.id, context.params.id));
     return NextResponse.json(item);
   } catch (error) {
-    return NextResponse.json({ error });
+    console.log(error);
+
+    return NextResponse.json({ error }, { status: 500 });
   }
 }
diff --git a/src/app/api/linkgroups/route.ts b/src/app/api/linkgroups/route.ts
@@ -2,6 +2,8 @@ import db from "@/lib/db";
 import { linkGroups } from "@/lib/schema/app";
 import { eq } from "drizzle-orm";
 import { NextRequest, NextResponse } from "next/server";
+import { ZodError } from "zod";
+import { fromZodError } from "zod-validation-error";
 
 export async function GET(req: NextRequest) {
   const hubId = req.nextUrl.searchParams.get("hubId");
@@ -26,6 +28,19 @@ export async function POST(req: NextRequest) {
     await db.insert(linkGroups).values(linkGroup);
     return NextResponse.json({ message: "ok" }, { status: 200 });
   } catch (error) {
-    return NextResponse.json({ error }, { status: 500 });
+    if (error instanceof ZodError) {
+      const validationError = fromZodError(error);
+      return NextResponse.json(
+        { error: validationError.message },
+        { status: 500 }
+      );
+    }
+    if (error instanceof Error) {
+      return NextResponse.json({ error: error.message }, { status: 500 });
+    }
+    return NextResponse.json(
+      { error: "Something went wrong." },
+      { status: 500 }
+    );
   }
 }
diff --git a/src/app/hubspaces/[domain]/[[...slugs]]/page.tsx b/src/app/hubspaces/[domain]/[[...slugs]]/page.tsx
@@ -47,9 +47,11 @@ export default async function Page({
     with: { links: true, linkGroups: true, footerLinks: true },
   });
 
-  const hubSpaceHubs = await db.query.hubs.findMany({
-    where: eq(hubs.hubSpaceId, hubSpace.id),
-  });
+  const hubSpaceHubs = await db
+    .select()
+    .from(hubs)
+    .where(eq(hubs.hubSpaceId, hubSpace.id))
+    .orderBy(hubs.createdAt);
 
   if (!hub) return <HubNotFound />;
 

diff --git a/src/components/app/header/header-logo.tsx b/src/components/app/header/header-logo.tsx
@@ -8,7 +8,9 @@ export function HeaderLogo() {
       <ResponsiveLogo />
       <Icons.close size={20} strokeWidth={2} />
       <div className="h-10 w-10">
-        <HubLogo />
+        <div className="h-10 w-10 absolute rounded-md overflow-hidden">
+          <HubLogo />
+        </div>
       </div>
     </div>
   );

diff --git a/src/components/app/hub-logo/hub-logo.tsx b/src/components/app/hub-logo/hub-logo.tsx
@@ -6,14 +6,13 @@ import { useFetchItem } from "@/lib/useQueries";
 import Image from "next/image";
 import { DefaultHubLogo } from "./default-hub-logo";
 
-export function HubLogo({ name }: { name?: string }) {
+export function HubLogo({ hub }: { hub?: Hub }) {
   const hubId = useHubOneStore((state) => state.hubId);
-  const { data: hub } = useFetchItem<Hub>("hubs", hubId!);
-  const { name: currentname, logo } = hub!;
-
-  return logo ? (
-    <Image height={28} width={28} alt="hub logo" src={logo} />
+  const { data: currentHub } = useFetchItem<Hub>("hubs", hubId!);
+  const hubToShow = hub || currentHub!;
+  return hubToShow?.logo ? (
+    <Image fill alt="hub logo" src={hubToShow.logo} />
   ) : (
-    <DefaultHubLogo name={name || currentname} />
+    <DefaultHubLogo name={hubToShow?.name} />
   );
 }
diff --git a/src/components/dashboard/organization-switcher/organization-switcher.actions.ts b/src/components/dashboard/organization-switcher/organization-switcher.actions.ts
@@ -23,7 +23,7 @@ export async function createOrganization(formData: FormData) {
     if (organizationsCounts.length === 3)
       throw new Error("You can't have more than 3 organizations.");
 
-    const newOrganizationId = ORGANIZATION_KEY;
+    const newOrganizationId = ORGANIZATION_KEY();
     const organization = insertOrganizationSchema.parse({
       id: newOrganizationId,
       name: formData.get("name"),

diff --git a/src/lib/constants.ts b/src/lib/constants.ts
@@ -1,9 +1,9 @@
 import { createId } from "@paralleldrive/cuid2";
 
-export const HUB_KEY = `hub_${createId()}`;
-export const LINK_KEY = `link_${createId()}`;
-export const FOOTERLINK_KEY = `flink_${createId()}`;
-export const LINKGROUP_KEY = `lgrp_${createId()}`;
-export const HUBSPACE_KEY = `hs_${createId()}`;
+export const HUB_KEY = () => `hub_${createId()}`;
+export const LINK_KEY = () => `link_${createId()}`;
+export const FOOTERLINK_KEY = () => `flink_${createId()}`;
+export const LINKGROUP_KEY = () => `lgrp_${createId()}`;
+export const HUBSPACE_KEY = () => `hs_${createId()}`;
 
-export const ORGANIZATION_KEY = `org_${createId()}`;
+export const ORGANIZATION_KEY = () => `org_${createId()}`;
diff --git a/src/lib/schema/app.ts b/src/lib/schema/app.ts
@@ -18,9 +18,7 @@ import {
 export const hubSpaces = mysqlTable(
   "hubspaces",
   {
-    id: varchar("id", { length: 256 })
-      .primaryKey()
-      .$defaultFn(() => HUBSPACE_KEY),
+    id: varchar("id", { length: 256 }).primaryKey().$defaultFn(HUBSPACE_KEY),
     name: varchar("name", { length: 256 }).notNull(),
     domain: varchar("domain", { length: 256 }).notNull(),
     ownerId: varchar("owner_id", { length: 256 }).notNull(),
@@ -35,9 +33,7 @@ export const hubSpaces = mysqlTable(
 export const hubs = mysqlTable(
   "hubs",
   {
-    id: varchar("id", { length: 256 })
-      .primaryKey()
-      .$defaultFn(() => HUB_KEY),
+    id: varchar("id", { length: 256 }).primaryKey().$defaultFn(HUB_KEY),
     name: varchar("name", { length: 256 }).notNull(),
     logo: varchar("logo", { length: 1024 }).default("").notNull(),
     slug: varchar("slug", { length: 256 }).default("/").notNull(),
@@ -63,7 +59,7 @@ export const hubs = mysqlTable(
 export const links = mysqlTable("links", {
   id: varchar("id", { length: 256 })
     .primaryKey()
-    .$defaultFn(() => LINK_KEY)
+    .$defaultFn(LINK_KEY)
     .notNull(),
   title: varchar("title", { length: 256 }).notNull(),
   description: text("description").notNull(),
@@ -77,7 +73,7 @@ export const links = mysqlTable("links", {
 export const footerLinks = mysqlTable("footer_links", {
   id: varchar("id", { length: 256 })
     .primaryKey()
-    .$defaultFn(() => FOOTERLINK_KEY)
+    .$defaultFn(FOOTERLINK_KEY)
     .notNull(),
   title: varchar("title", { length: 256 }).notNull(),
   url: varchar("url", { length: 256 }).notNull(),
@@ -88,7 +84,7 @@ export const footerLinks = mysqlTable("footer_links", {
 export const linkGroups = mysqlTable("link_groups", {
   id: varchar("id", { length: 256 })
     .primaryKey()
-    .$defaultFn(() => LINKGROUP_KEY)
+    .$defaultFn(LINKGROUP_KEY)
     .notNull(),
   title: varchar("title", { length: 256 }).notNull(),
   createdAt: timestamp("created_at").defaultNow(),

diff --git a/src/lib/schema/orgaizations.ts b/src/lib/schema/orgaizations.ts
@@ -18,7 +18,7 @@ export const organizations = mysqlTable(
   "organization",
   {
     id: varchar("id", { length: 128 })
-      .$defaultFn(() => ORGANIZATION_KEY)
+      .$defaultFn(ORGANIZATION_KEY)
       .primaryKey(),
     name: varchar("name", { length: 255 }).notNull(),
     slug: varchar("slug", { length: 255 }).notNull(),

diff --git a/src/modals/hub-modals/hub-create-modal/hub-create-modal.tsx b/src/modals/hub-modals/hub-create-modal/hub-create-modal.tsx
@@ -34,9 +34,9 @@ export function HubCreateModal({
     },
   });
 
-  const mutate = usePost<z.infer<typeof hubsSchema>>("hubs");
+  const post = usePost<z.infer<typeof hubsSchema>>("hubs");
   const onSubmit = (values: z.infer<typeof hubsSchema>) => {
-    mutate(values);
+    post(values);
     form.reset();
     setOpened(false);
   };

diff --git a/src/modals/hub-modals/hub-edit-modal/hub-edit-modal.tsx b/src/modals/hub-modals/hub-edit-modal/hub-edit-modal.tsx
@@ -30,7 +30,14 @@ export function HubEditModal({
   const form = useForm<z.infer<typeof insertHubsSchema>>({
     resolver: zodResolver(insertHubsSchema),
     defaultValues: {
-      ...hub,
+      id: hub!.id,
+      hubSpaceId: hub!.hubSpaceId,
+      name: hub!.name,
+      slug: hub!.slug,
+      logo: hub!.logo,
+      description: hub!.description,
+      secondaryColor: hub!.secondaryColor,
+      primaryColor: hub!.primaryColor,
     },
   });
   const update = useUpdate<z.infer<typeof insertHubsSchema>>("hubs");
@@ -56,9 +63,14 @@ export function HubEditModal({
 
         <TabsContent value="Hub">
           <Form {...form}>
-            <form onSubmit={form.handleSubmit(onSubmit)}>
+            <form
+              onSubmit={form.handleSubmit(onSubmit)}
+              className="space-y-8 flex flex-col"
+            >
               <HubFormFields form={form} />
-              <Button type="submit">Create</Button>
+              <Button type="submit" className="ml-auto">
+                Confirm
+              </Button>
             </form>
           </Form>
         </TabsContent>

diff --git a/src/modals/hubspace-modals/hubspace-create-modal/hubspace.actions.ts b/src/modals/hubspace-modals/hubspace-create-modal/hubspace.actions.ts
@@ -16,7 +16,7 @@ export async function createHubSpace(formData: FormData) {
     const session = await auth();
     if (!session) throw new Error("Not authenticated");
 
-    const newHubSpaceId = HUBSPACE_KEY;
+    const newHubSpaceId = HUBSPACE_KEY();
     const hubSpace = insertHubSpaceSchema.parse({
       id: newHubSpaceId,
       name: formData.get("name"),

diff --git a/src/sections/app/hub-menu/hub-menu.tsx b/src/sections/app/hub-menu/hub-menu.tsx
@@ -40,7 +40,9 @@ export function HubMenu({ hubs }: { hubs: Hub[] }) {
                 <Link href={hub.slug}>
                   <div className="flex flex-col h-32 w-16">
                     <div className="w-full h-1/2 p-1">
-                      <HubLogo name={hub.name} />
+                      <div className="absolute h-14 w-14 overflow-hidden rounded-md">
+                        <HubLogo hub={hub} />
+                      </div>
                     </div>
                     <div className="w-full h-1/2">
                       <p className="text-sm text-center line-clamp-3">