From d57e161fe7c25361f646a6985dcb4f678aa84a75 Mon Sep 17 00:00:00 2001 From: Dominik Stumpf Date: Wed, 27 Nov 2024 17:43:37 +0100 Subject: [PATCH 1/5] chore: extract changes from `add-guild-page` branch --- src/components/GuildImage.tsx | 30 ++++++++++++++++++++++++++ src/components/ImageUploader.tsx | 4 ++-- src/components/ui/Drawer.tsx | 2 +- src/components/ui/Form.tsx | 2 ++ src/components/ui/ResponsiveDialog.tsx | 10 +++++++-- src/lib/schemas/guild.ts | 1 + src/lib/schemas/roleGroup.ts | 5 ++++- src/lib/types.ts | 4 ++++ src/styles/globals.css | 4 ++++ 9 files changed, 56 insertions(+), 6 deletions(-) create mode 100644 src/components/GuildImage.tsx diff --git a/src/components/GuildImage.tsx b/src/components/GuildImage.tsx new file mode 100644 index 0000000000..3ee8f5e1d3 --- /dev/null +++ b/src/components/GuildImage.tsx @@ -0,0 +1,30 @@ +import { cn } from "@/lib/cssUtils"; +import type { Guild } from "@/lib/schemas/guild"; +import { ImageSquare } from "@phosphor-icons/react/dist/ssr"; +import { Avatar, AvatarFallback, AvatarImage } from "@radix-ui/react-avatar"; + +type Props = { + className?: string; + name: Guild["name"]; + imageUrl: Guild["imageUrl"]; +}; + +export const GuildImage = ({ name, imageUrl, className }: Props) => ( + + + + + + +); diff --git a/src/components/ImageUploader.tsx b/src/components/ImageUploader.tsx index 115cd7eb11..37120b4df0 100644 --- a/src/components/ImageUploader.tsx +++ b/src/components/ImageUploader.tsx @@ -79,12 +79,12 @@ export const ImageUploader = ({ return ( - + ), + })} + > + {children} + ); }; From cbd03d16c6f5c770043ebd59a9958bad5ab73382 Mon Sep 17 00:00:00 2001 From: Dominik Stumpf Date: Wed, 27 Nov 2024 20:13:00 +0100 Subject: [PATCH 3/5] refactor: refurbish old hooks --- .../(dashboard)/explorer/components/StickyNavbar.tsx | 4 ++-- .../(dashboard)/explorer/components/StickySearch.tsx | 2 +- src/hooks/useIsStuck.ts | 4 ++-- src/hooks/useScrollSpy.ts | 10 +++------- 4 files changed, 8 insertions(+), 12 deletions(-) diff --git a/src/app/(dashboard)/explorer/components/StickyNavbar.tsx b/src/app/(dashboard)/explorer/components/StickyNavbar.tsx index e794e5e14b..3f0ed56433 100644 --- a/src/app/(dashboard)/explorer/components/StickyNavbar.tsx +++ b/src/app/(dashboard)/explorer/components/StickyNavbar.tsx @@ -1,7 +1,7 @@ "use client"; import { ToggleGroup, ToggleGroupItem } from "@/components/ui/ToggleGroup"; -import useIsStuck from "@/hooks/useIsStuck"; -import useScrollspy from "@/hooks/useScrollSpy"; +import { useIsStuck } from "@/hooks/useIsStuck"; +import { useScrollspy } from "@/hooks/useScrollSpy"; import { cn } from "@/lib/cssUtils"; import { useAtom, useAtomValue, useSetAtom } from "jotai"; import { type PropsWithChildren, useEffect } from "react"; diff --git a/src/app/(dashboard)/explorer/components/StickySearch.tsx b/src/app/(dashboard)/explorer/components/StickySearch.tsx index e67d2facc0..063ed296e1 100644 --- a/src/app/(dashboard)/explorer/components/StickySearch.tsx +++ b/src/app/(dashboard)/explorer/components/StickySearch.tsx @@ -1,7 +1,7 @@ "use client"; import { Input } from "@/components/ui/Input"; -import useIsStuck from "@/hooks/useIsStuck"; +import { useIsStuck } from "@/hooks/useIsStuck"; import { MagnifyingGlass } from "@phosphor-icons/react/dist/ssr"; import { useDebouncedValue } from "foxact/use-debounced-value"; import { useSetAtom } from "jotai"; diff --git a/src/hooks/useIsStuck.ts b/src/hooks/useIsStuck.ts index 9497b81f35..2cfe8c22e7 100644 --- a/src/hooks/useIsStuck.ts +++ b/src/hooks/useIsStuck.ts @@ -40,9 +40,9 @@ const useIsStuck = ( ); observer.observe(cachedRef); return () => observer.unobserve(cachedRef); - }, [ref]); + }, [setIsStuckActive]); return { ref, isStuck: setIsStuck ? undefined : isStuck }; }; -export default useIsStuck; +export { useIsStuck }; diff --git a/src/hooks/useScrollSpy.ts b/src/hooks/useScrollSpy.ts index 7fb5b65864..391f2419cd 100644 --- a/src/hooks/useScrollSpy.ts +++ b/src/hooks/useScrollSpy.ts @@ -1,9 +1,5 @@ import { useLayoutEffect, useState } from "react"; -// Restrict value to be between the range [0, value] -const clamp = (value: number) => Math.max(0, value); - -// Check if number is between two values const isBetween = (value: number, floor: number, ceil: number) => value >= floor && value <= ceil; @@ -21,8 +17,8 @@ const useScrollspy = (ids: string[], offset = 0) => { if (!element) return { id, top: -1, bottom: -1 }; const rect = element.getBoundingClientRect(); - const top = clamp(rect.top + scroll - offset); - const bottom = clamp(rect.bottom + scroll - offset); + const top = Math.max(0, rect.top + scroll - offset); + const bottom = Math.max(0, rect.bottom + scroll - offset); return { id, top, bottom }; }) @@ -45,4 +41,4 @@ const useScrollspy = (ids: string[], offset = 0) => { return activeId; }; -export default useScrollspy; +export { useScrollspy }; From 1fce6dc8ea695b9dd03a7fe69ab6ee223eb2d859 Mon Sep 17 00:00:00 2001 From: Dominik Stumpf <122315398+dominik-stumpf@users.noreply.github.com> Date: Wed, 27 Nov 2024 20:54:26 +0100 Subject: [PATCH 4/5] remove slugify and adjust guild creation to backend (#1569) * chore: remove slugify * chore: remove urlName field from request body * chore: remove email constraint on contact * chore: remove contacts, test defaults * chore: remove test defaults --- package.json | 1 - .../create-guild/components/CreateGuildButton.tsx | 9 +-------- .../create-guild/components/CreateGuildFormProvider.tsx | 3 +-- src/lib/schemas/guild.ts | 2 +- 4 files changed, 3 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index 564104f712..0dfc2cae6a 100644 --- a/package.json +++ b/package.json @@ -52,7 +52,6 @@ "remark-gfm": "^4.0.0", "remark-textr": "^6.1.0", "server-only": "^0.0.1", - "slugify": "^1.6.6", "sonner": "^1.7.0", "tailwind-merge": "^2.5.4", "tailwindcss-animate": "^1.0.7", diff --git a/src/app/(dashboard)/create-guild/components/CreateGuildButton.tsx b/src/app/(dashboard)/create-guild/components/CreateGuildButton.tsx index 741ca7725f..934f469937 100644 --- a/src/app/(dashboard)/create-guild/components/CreateGuildButton.tsx +++ b/src/app/(dashboard)/create-guild/components/CreateGuildButton.tsx @@ -11,7 +11,6 @@ import { CheckCircle, XCircle } from "@phosphor-icons/react/dist/ssr"; import { useMutation } from "@tanstack/react-query"; import { useRouter } from "next/navigation"; import { useFormContext } from "react-hook-form"; -import slugify from "slugify"; import { toast } from "sonner"; const CreateGuildButton = () => { @@ -30,12 +29,6 @@ const CreateGuildButton = () => { const guild = { ...data, contact: undefined, - // TODO: I think we should do it on the backend - urlName: slugify(data.name, { - replacement: "-", - lower: true, - strict: true, - }), }; return fetcher(`${env.NEXT_PUBLIC_API}/guild`, { @@ -52,7 +45,7 @@ const CreateGuildButton = () => { toast("An error occurred", { icon: , }); - console.error(error); + console.warn(error); }, onSuccess: (res) => { confetti.current(); diff --git a/src/app/(dashboard)/create-guild/components/CreateGuildFormProvider.tsx b/src/app/(dashboard)/create-guild/components/CreateGuildFormProvider.tsx index 9ffac2ab90..7d97039832 100644 --- a/src/app/(dashboard)/create-guild/components/CreateGuildFormProvider.tsx +++ b/src/app/(dashboard)/create-guild/components/CreateGuildFormProvider.tsx @@ -8,7 +8,6 @@ import { FormProvider, useForm } from "react-hook-form"; const defaultValues = { name: "", imageUrl: "", - urlName: "test", contact: "", description: "", } satisfies CreateGuildForm; @@ -16,7 +15,7 @@ const defaultValues = { const CreateGuildFormProvider = ({ children }: PropsWithChildren) => { const methods = useForm({ mode: "onTouched", - resolver: zodResolver(CreateGuildSchema), + resolver: zodResolver(CreateGuildSchema.omit({ urlName: true })), defaultValues, }); diff --git a/src/lib/schemas/guild.ts b/src/lib/schemas/guild.ts index 043cdb1e7d..20a66b5228 100644 --- a/src/lib/schemas/guild.ts +++ b/src/lib/schemas/guild.ts @@ -6,7 +6,7 @@ export const CreateGuildSchema = z.object({ urlName: z.string().max(255).optional(), imageUrl: ImageUrlSchema.optional(), description: z.string().optional(), - contact: z.string().email(), + contact: z.string().min(1, "You must specify a contact for your guild"), }); export type CreateGuildForm = z.infer; From 620495384202c8bf9af07ee1b9673b81c120c23e Mon Sep 17 00:00:00 2001 From: Dominik Stumpf Date: Wed, 27 Nov 2024 20:58:03 +0100 Subject: [PATCH 5/5] fix: align page to center --- src/app/(dashboard)/explorer/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/(dashboard)/explorer/page.tsx b/src/app/(dashboard)/explorer/page.tsx index 4b7242db18..c151e5c7c8 100644 --- a/src/app/(dashboard)/explorer/page.tsx +++ b/src/app/(dashboard)/explorer/page.tsx @@ -37,7 +37,7 @@ export default async function Explorer() { return ( <> -
+