chore: uniform types name (#24)

* chore: cleaning up types name

* fix: file name

* ci: lint

src/components/circle/Card.tsx

@@ -1,5 +1,5 @@
 import StopIcon from '@/icons/StopIcon';
-import type { CircleCard } from '@/types/circle';
+import type { CirclePaginationSchema } from '@/types/circle';
 import Link from 'next/link';
 import CircleBookmarkButton from './CircleBookmarkButton';
 import ExtendedImage from '../general/ExtendedImage';
@@ -13,7 +13,7 @@ const NoImage = () => {
   );
 };
 
-function CircleCard(circle: CircleCard) {
+function CircleCard(circle: CirclePaginationSchema) {
   return (
     <li className="flex flex-col overflow-hidden rounded-lg border border-neutral-950 shadow-md">
       <Link

src/components/circle/detail-page/EditDescriptionSection.tsx

@@ -13,18 +13,17 @@ import { Controller, useForm } from 'react-hook-form';
 import toast from 'react-hot-toast';
 import { z } from 'zod';
 
-const updateDescriptionSchema = z.object({
+const updateDescriptionFormSchema = z.object({
   description: z.string(),
 });
-
-type UpdateDescriptionPayload = z.infer<typeof updateDescriptionSchema>;
+type UpdateDescriptionFormSchema = z.infer<typeof updateDescriptionFormSchema>;
 
 function EditDescriptionSection() {
   const [initalized, setInitalized] = useState(false);
   const { data } = useGetCircleBySlug();
   const router = useRouter();
-  const form = useForm<UpdateDescriptionPayload>({
-    resolver: zodResolver(updateDescriptionSchema),
+  const form = useForm<UpdateDescriptionFormSchema>({
+    resolver: zodResolver(updateDescriptionFormSchema),
     defaultValues: {
       description: data?.description ? sanitize(data?.description) : '',
     },

src/components/circle/detail-page/EditEventSection.tsx

@@ -30,7 +30,7 @@ import { Controller, FormProvider, useForm } from 'react-hook-form';
 import toast from 'react-hot-toast';
 import { z } from 'zod';
 
-const editEventSchema = z.object({
+const editEventFormSchema = z.object({
   event: eventEntity,
   day: dayEnum.or(z.literal('')).nullish(),
   block: z
@@ -71,8 +71,7 @@ const editEventSchema = z.object({
     .or(z.literal(''))
     .nullish(),
 });
-
-type EditEventForm = z.infer<typeof editEventSchema>;
+type EditEventFormSchema = z.infer<typeof editEventFormSchema>;
 
 const ConfirmationButton = () => {
   const { isOpen, onOpenChange } = useDisclosure();
@@ -156,14 +155,14 @@ function EditEventSection() {
   const { data: circle } = useGetCircleBySlug();
   const { data, isLoading } = useGetEvents({ limit: 20, page: 1 });
   const [initalized, setInitalized] = useState(false);
-  const form = useForm<EditEventForm>({
-    resolver: zodResolver(editEventSchema),
+  const form = useForm<EditEventFormSchema>({
+    resolver: zodResolver(editEventFormSchema),
   });
   const updateEvent = useUpdateEventByCircleID();
 
   useEffect(() => {
     if (initalized || !circle) return;
-    const values = {} as EditEventForm;
+    const values = {} as EditEventFormSchema;
     if (circle?.event) {
       values.event = circle.event;
     }

src/components/circle/detail-page/EditFandomWorkTypeSection.tsx

@@ -34,22 +34,22 @@ const TABS = [
   },
 ] as const;
 
-const updateFandomsSchema = z.object({
+const updateFandomsFormSchema = z.object({
   fandom: z
     .array(z.object({ id: z.coerce.number(), name: z.string() }))
     .max(5, { message: 'You can only select up to 5 fandoms' })
     .default([]),
 });
 
-const updateWorkTypesSchema = z.object({
+const updateWorkTypesFormSchema = z.object({
   work_type: z
     .array(z.object({ id: z.coerce.number(), name: z.string() }))
     .max(5, { message: 'You can only select up to 5 fandoms' })
     .default([]),
 });
 
-type UpdateFandomsSchema = z.infer<typeof updateFandomsSchema>;
-type UpdateWorkTypesSchema = z.infer<typeof updateWorkTypesSchema>;
+type UpdateFandomsFormSchema = z.infer<typeof updateFandomsFormSchema>;
+type UpdateWorkTypesFormSchema = z.infer<typeof updateWorkTypesFormSchema>;
 
 const Skeletons = () => (
   <ul className="mt-4 grid grid-cols-2 gap-2.5">
@@ -65,7 +65,7 @@ const Skeletons = () => (
 );
 
 const WorkTypeSection = () => {
-  const form = useFormContext<UpdateWorkTypesSchema>();
+  const form = useFormContext<UpdateWorkTypesFormSchema>();
   const { data: circle } = useGetCircleBySlug();
   const { data: workTypes } = useGetWorkType();
   const updateWorkType = useUpdateCircle();
@@ -218,7 +218,7 @@ const FandomSection = () => {
     search,
   });
   const createFandom = usePostFandom();
-  const form = useFormContext<UpdateFandomsSchema>();
+  const form = useFormContext<UpdateFandomsFormSchema>();
   const updateFandom = useUpdateCircle();
 
   return (
@@ -382,15 +382,15 @@ function EditFandomWorkTypeSection() {
   const setTab = useEditFandomWorkTypeStore((s) => s.setTab);
   const reset = useEditFandomWorkTypeStore((s) => s.reset);
   const { data } = useGetCircleBySlug();
-  const fandomForm = useForm<UpdateFandomsSchema>({
-    resolver: zodResolver(updateFandomsSchema),
+  const fandomForm = useForm<UpdateFandomsFormSchema>({
+    resolver: zodResolver(updateFandomsFormSchema),
     defaultValues: {
       fandom: data?.fandom ?? [],
     },
   });
 
-  const workTypeForm = useForm<UpdateWorkTypesSchema>({
-    resolver: zodResolver(updateWorkTypesSchema),
+  const workTypeForm = useForm<UpdateWorkTypesFormSchema>({
+    resolver: zodResolver(updateWorkTypesFormSchema),
     defaultValues: {
       work_type: data?.work_type ?? [],
     },

src/components/circle/detail-page/EditGeneralInfoSection.tsx

@@ -9,8 +9,8 @@ import ChevronUpIcon from '@/icons/ChevronUpIcon';
 import ImageIcon from '@/icons/ImageIcon';
 import { uploadService } from '@/services/upload';
 import {
-  EditGeneralInfoPayload,
-  editGeneralInfoPayload,
+  EditGeneralInfoFormSchema,
+  editGeneralInfoFormSchema,
   RATING_ENUM,
   updateCirclePayload,
 } from '@/types/circle';
@@ -27,8 +27,8 @@ function EditGeneralInfoSection() {
   const [isUploading, setIsUploading] = useState(false);
   const { data, isLoading, error } = useGetCircleBySlug();
   const router = useRouter();
-  const form = useForm<EditGeneralInfoPayload>({
-    resolver: zodResolver(editGeneralInfoPayload),
+  const form = useForm<EditGeneralInfoFormSchema>({
+    resolver: zodResolver(editGeneralInfoFormSchema),
   });
   const { handleSubmit, register, control } = form;
   const { mutateAsync, isPending } = useUpdateCircle();

src/components/circle/detail-page/EditProducts.tsx

@@ -15,7 +15,7 @@ import TrashIcon from '@/icons/TrashIcon';
 import XCircleIcon from '@/icons/XCircleIcon';
 import { productService } from '@/services/product';
 import { uploadService } from '@/services/upload';
-import { Product } from '@/types/product';
+import { ProductEntity } from '@/types/product';
 import { classNames } from '@/utils/classNames';
 import { prettifyError } from '@/utils/helper';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -40,7 +40,7 @@ import {
 import toast from 'react-hot-toast';
 import { z } from 'zod';
 
-const schema = z.object({
+const updateProductFormSchema = z.object({
   id: z.number().min(1).optional(),
   name: z.string().trim().min(5).max(100),
   image_url: z
@@ -51,16 +51,15 @@ const schema = z.object({
     })
     .url(),
 });
-
-type FormValues = z.infer<typeof schema>;
+type UpdateProductFormSchema = z.infer<typeof updateProductFormSchema>;
 
 const useUpdateProduct = () => {
   const queryClient = useQueryClient();
   return useMutation({
     mutationFn: async ({
       circleID,
       ...payload
-    }: FormValues & { circleID: number }) => {
+    }: UpdateProductFormSchema & { circleID: number }) => {
       const { data } =
         await productService.putUpdateOneProductByCircleIDProductID({
           circleID,
@@ -83,7 +82,7 @@ const useUpdateProduct = () => {
 
       queryClient.setQueryData(
         getProductsOptions({ circleID: payload.circleID }).queryKey,
-        (oldData: Array<Product>) => {
+        (oldData: Array<ProductEntity>) => {
           return oldData?.map((x) => {
             if (x.id === payload.id) {
               return {
@@ -116,7 +115,7 @@ const useAddProduct = () => {
     mutationFn: async ({
       circleID,
       ...payload
-    }: FormValues & { circleID: number }) => {
+    }: UpdateProductFormSchema & { circleID: number }) => {
       const { data } = await productService.postAddProductByCircleID(
         circleID,
         payload,
@@ -134,7 +133,7 @@ const useAddProduct = () => {
 
       queryClient.setQueryData(
         getProductsOptions({ circleID: payload.circleID }).queryKey,
-        (oldData: Array<Product>) => {
+        (oldData: Array<ProductEntity>) => {
           return [
             ...(oldData ?? []),
             {
@@ -171,11 +170,13 @@ const ProductList = () => {
   const { data: products } = useGetProducts({
     circleID: data?.id,
   });
-  const [deleteSelected, setDeleteSelected] = useState<Product | null>(null);
+  const [deleteSelected, setDeleteSelected] = useState<ProductEntity | null>(
+    null,
+  );
   const { isOpen, onOpenChange } = useDisclosure();
   const [isLoading, setIsLoading] = useState(false);
   const queryClient = useQueryClient();
-  const form = useFormContext<FormValues>();
+  const form = useFormContext<UpdateProductFormSchema>();
   return (
     <ul className="mt-4 flex flex-col gap-2">
       <Modal
@@ -306,8 +307,8 @@ function EditProducts() {
   const { data: products } = useGetProducts({ circleID: data?.id });
   const addMutation = useAddProduct();
   const updateMutation = useUpdateProduct();
-  const form = useForm<FormValues>({
-    resolver: zodResolver(schema),
+  const form = useForm<UpdateProductFormSchema>({
+    resolver: zodResolver(updateProductFormSchema),
     defaultValues: {
       name: '',
       image_url: '',

src/components/circle/detail-page/ProductSection.tsx

@@ -6,7 +6,7 @@ import {
 import { useGetProducts } from '@/hooks/circle/useGetProducts';
 import SearchIcon from '@/icons/SearchIcon';
 import XCircleIcon from '@/icons/XCircleIcon';
-import { Product } from '@/types/product';
+import { ProductEntity } from '@/types/product';
 import { classNames } from '@/utils/classNames';
 import {
   Modal,
@@ -52,7 +52,7 @@ const ModalImageViewer = ({
   products,
   onOpenChange,
 }: {
-  products: Array<Product>;
+  products: Array<ProductEntity>;
   onOpenChange: () => void;
 }) => {
   const product = useCirclePageStore((state) => state.selectedProduct);
@@ -132,7 +132,7 @@ const ModalImageViewer = ({
   );
 };
 
-const ProductList = ({ products }: { products: Array<Product> }) => {
+const ProductList = ({ products }: { products: Array<ProductEntity> }) => {
   const [activeIndex, setActiveIndex] = useState(0);
   const setProduct = useCirclePageStore((state) => state.setSelectedProduct);
   const { onOpenChange } = useDisclosure();

src/components/general/Editor/index.tsx

@@ -143,7 +143,9 @@ const EditorProvider = ({
   };
   const editor = useEditor({
     content,
-    onUpdate: (c) => onChange?.(c.editor.getHTML()),
+    onUpdate: (c) => {
+      onChange?.(c.editor.getHTML());
+    },
     extensions,
     editorProps: {
       attributes: {
@@ -305,7 +307,7 @@ const ImageMenu = () => {
   return (
     <Uploader
       accept={Array.from(ACCEPTED_IMAGE_TYPES_SET).join(',')}
-      className="'flex text-neutral-500', items-center rounded border border-neutral-500 bg-white p-1"
+      className="'flex items-center rounded border border-neutral-500 bg-white p-1 text-neutral-500"
       customRequest={async (files) => {
         try {
           setLoading(true);

src/hooks/auth/useLogin.ts

@@ -1,5 +1,5 @@
 import { authService } from '@/services/auth';
-import { onSuccessGoogleSchema } from '@/types/auth';
+import { onSuccessGoogleResponseSchema } from '@/types/auth';
 import { prettifyError, setAccessToken } from '@/utils/helper';
 import { useGoogleLogin } from '@react-oauth/google';
 import { useQueryClient } from '@tanstack/react-query';
@@ -15,7 +15,7 @@ export const useLogin = () => {
     ux_mode: 'popup',
     onSuccess: async (response) => {
       try {
-        const parsed = onSuccessGoogleSchema.parse(response);
+        const parsed = onSuccessGoogleResponseSchema.parse(response);
         const { data } = await authService.googleCallback(parsed.code);
 
         setAccessToken(data.access_token, data.access_token_expired_at);

src/hooks/circle/useGetBookmarkedCirclesInfinite.ts

@@ -1,10 +1,10 @@
 import { useSession } from '@/components/providers/SessionProvider';
 import { circleService } from '@/services/circle';
-import { GetCircleQueryParamsClient } from '@/types/circle';
+import { CircleRouterQueryParamsSchema } from '@/types/circle';
 import { infiniteQueryOptions, useInfiniteQuery } from '@tanstack/react-query';
 
 export const getBookmarkedCirclesOptions = (
-  params: Partial<GetCircleQueryParamsClient>,
+  params: Partial<CircleRouterQueryParamsSchema>,
   options?: Partial<{
     enabled: boolean;
   }>,
@@ -30,7 +30,7 @@ export const getBookmarkedCirclesOptions = (
 };
 
 export const useGetBookmarkedCirclesInfinite = (
-  params: Partial<GetCircleQueryParamsClient>,
+  params: Partial<CircleRouterQueryParamsSchema>,
 ) => {
   const { session } = useSession();
   const res = useInfiniteQuery(

src/hooks/circle/useGetCirclesInfinite.ts

@@ -1,12 +1,12 @@
 import { circleService } from '@/services/circle';
-import { GetCircleQueryParamsClient } from '@/types/circle';
+import { CircleRouterQueryParamsSchema } from '@/types/circle';
 import { infiniteQueryOptions, useInfiniteQuery } from '@tanstack/react-query';
 import { useMediaQuery } from '../common/useMediaQuery';
 import { useMemo } from 'react';
 import { chunk } from '@/utils/helper';
 
 export const getCirclesOptions = (
-  params: Partial<GetCircleQueryParamsClient>,
+  params: Partial<CircleRouterQueryParamsSchema>,
 ) => {
   return infiniteQueryOptions({
     initialPageParam: 1,
@@ -30,7 +30,7 @@ export const getCirclesOptions = (
 };
 
 export const useGetCirclesInfinite = (
-  params: Partial<GetCircleQueryParamsClient>,
+  params: Partial<CircleRouterQueryParamsSchema>,
 ) => {
   const res = useInfiniteQuery(getCirclesOptions(params));
   const result = res.data?.pages.flatMap((page) => page.data) ?? [];

src/hooks/circle/useOnboarding.ts

@@ -1,6 +1,6 @@
 import { authService } from '@/services/auth';
 import { circleService } from '@/services/circle';
-import { OnboardingPayload, onboardingPayloadSchema } from '@/types/circle';
+import { OnboardingPayload, onboardingPayload } from '@/types/circle';
 import { prettifyError, setAccessToken } from '@/utils/helper';
 import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -17,9 +17,7 @@ export const useOnboarding = () => {
   const handleOnboarding = async (payload: OnboardingPayload) => {
     try {
       setIsLoading(true);
-      const { data } = await mutateAsync(
-        onboardingPayloadSchema.parse(payload),
-      );
+      const { data } = await mutateAsync(onboardingPayload.parse(payload));
       const { data: refresh } = await authService.getRefreshToken();
       setAccessToken(refresh.access_token, refresh.access_token_expired_at);
       toast.success('Circle created, redirecting to your page');