Merge pull request #26 from comimafun/dev

sync: dev to master

.env.example

@@ -2,5 +2,6 @@
 NEXT_PUBLIC_APP_STAGE=local
 
 NEXT_PUBLIC_API_BASE_URL=http://localhost:8080/api
+NEXT_PUBLIC_DOMAIN=localhost:3000
 
 NEXT_PUBLIC_GOOGLE_CLIENT_ID=

.github/workflows/deploy-dev.yaml

@@ -1,4 +1,4 @@
-name: Build and Deploy to dev environment
+name: Dev Deployment
 
 on:
   push:
@@ -35,9 +35,11 @@ jobs:
       - name: Docker auth
         run: |
           gcloud auth configure-docker ${{ vars.DOCKER_REGISTRY_LOCATION }} --quiet
+
       - name: Build and push Docker image
         run: |
-          docker buildx build --tag ${{ vars.DOCKER_REGISTRY_LOCATION }}/${{ secrets.GOOGLE_PROJECT }}/inner-catalog/catalog-ui:dev-${{ github.run_id }} --push --no-cache .
+          docker buildx build --tag ${{ vars.DOCKER_REGISTRY_LOCATION }}/${{ secrets.GOOGLE_PROJECT }}/inner-catalog/catalog-ui:dev-${{ github.run_id }} --push .
+
   deploy:
     needs: [build]
     runs-on: ubuntu-latest

.github/workflows/lint.yml

@@ -35,8 +35,12 @@ jobs:
         uses: pnpm/action-setup@v4
         with:
           version: 9
+          run_install: true
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
       - name: install deps
         run: pnpm install
       - name: run linter

.gitignore

@@ -28,6 +28,9 @@ yarn-error.log*
 # local env files
 .env*.local
 
+
+.env
+
 # vercel
 .vercel
 

README.md

@@ -1,6 +1,8 @@
 # Project catalog-ui 📚
 
-Nextjs application for `Inner Catalog`
+Nextjs web application for `Inner Catalog`
+
+![logo](./public/flat-logo.png)
 
 ## Description
 
@@ -19,6 +21,7 @@ This is an alternatives from `comifuro` catalog but not solely for comifuro. I w
 
 - Node v20.9.0
 - pnpm v9.2.0
+- Docker
 - Google Client ID (for Google OAuth2)
 
 ### Installation

env.d.ts

@@ -3,5 +3,6 @@ declare namespace NodeJS {
     NEXT_PUBLIC_APP_STAGE: 'development' | 'production';
     NEXT_PUBLIC_API_BASE_URL?: string;
     NEXT_PUBLIC_GOOGLE_CLIENT_ID?: string;
+    NEXT_PUBLIC_DOMAIN?: string;
   }
 }

package.json

@@ -36,6 +36,7 @@
     "react-dom": "^18",
     "react-hook-form": "^7.51.5",
     "react-hot-toast": "^2.4.1",
+    "react-viewport-list": "^7.1.2",
     "swiper": "^11.1.4",
     "tailwind-merge": "^2.3.0",
     "vaul": "^0.9.1",

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,14 +13,15 @@ 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
         href={{
           pathname: '/[circleSlug]',
           query: { circleSlug: circle.slug },
         }}
+        shallow
         className="flex h-full w-full flex-col"
       >
         <div className="relative flex aspect-[7/10] min-h-[262px] w-full items-center justify-center overflow-hidden border-b border-neutral-900 md:min-h-[273px]">
@@ -41,6 +42,9 @@ function CircleCard(circle: CircleCard) {
         </div>
         <div className="h-full w-full space-y-1.5 p-2 font-medium">
           <p className="break-all text-base font-semibold">{circle.name}</p>
+          {!!circle.rating && (
+            <div className="text-xs">Rated: {circle.rating}</div>
+          )}
           {circle.fandom.length > 0 && (
             <p className="text-xs">
               Fandom: {circle.fandom.map((x) => x.name).join(', ')}
@@ -52,6 +56,17 @@ function CircleCard(circle: CircleCard) {
               Work Type: {circle.work_type.map((x) => x.name).join(', ')}
             </p>
           )}
+
+          {!!circle.event && (
+            <>
+              <p className="text-xs">Convention: {circle.event.name}</p>
+              {!!circle.day && (
+                <p className="text-xs">
+                  Day: <span className="capitalize">{circle.day}</span> day(s)
+                </p>
+              )}
+            </>
+          )}
         </div>
       </Link>
     </li>

src/components/circle/FilterDrawer.tsx

@@ -1,13 +1,11 @@
 import { useDebounce } from '@/hooks/common/useDebounce';
 import { useDrawerFilterStore } from '@/store/circle';
-import { circlesQueryParamsClient } from '@/types/circle';
 import {
   Controller,
   FormProvider,
   useForm,
   useFormContext,
 } from 'react-hook-form';
-import { z } from 'zod';
 import { Drawer, DrawerContent } from '../general/Drawer';
 import {
   Button,
@@ -23,14 +21,9 @@ import { motion } from 'framer-motion';
 import { useGetWorkType } from '@/hooks/circle/useGetWorkType';
 import { prettifyError } from '@/utils/helper';
 import { useRouter } from 'next/router';
+import { useEffect } from 'react';
+import { CircleFilterWithNoSearch, RATING_ENUM } from '@/types/circle';
 import { useParseCircleQueryToParams } from '@/hooks/circle/useParseClientQueryToParams';
-import { useEffect, useState } from 'react';
-
-const circleFilterWithNoSearch = circlesQueryParamsClient.omit({
-  search: true,
-});
-
-type CircleFilterWithNoSearch = z.infer<typeof circleFilterWithNoSearch>;
 
 const WorkTypeSection = () => {
   const filterForm = useFormContext<CircleFilterWithNoSearch>();
@@ -231,25 +224,54 @@ const MainFilter = () => {
     (state) => state.setDrawerFilterStep,
   );
   const filterForm = useFormContext<CircleFilterWithNoSearch>();
+  const { filter } = useParseCircleQueryToParams();
 
   return (
     <>
+      {!!filter.event && (
+        <Controller
+          control={filterForm.control}
+          name="day"
+          render={({ field: { disabled, onChange, ...fields } }) => {
+            return (
+              <RadioGroup
+                label={<div className="font-medium">Day</div>}
+                orientation="horizontal"
+                isDisabled={disabled}
+                {...fields}
+                onValueChange={(a) => onChange(a)}
+              >
+                <Radio value="first">First Day</Radio>
+                <Radio value="second">Second Day</Radio>
+                <Radio value="both">Both Days</Radio>
+              </RadioGroup>
+            );
+          }}
+        />
+      )}
+
       <Controller
         control={filterForm.control}
-        name="day"
-        render={({ field: { disabled, onChange, ...fields } }) => {
+        name="rating"
+        render={({ field }) => {
           return (
-            <RadioGroup
-              label={<div className="font-medium">Day</div>}
-              orientation="horizontal"
-              isDisabled={disabled}
-              {...fields}
-              onValueChange={(a) => onChange(a)}
+            <CheckboxGroup
+              name={field.name}
+              ref={field.ref}
+              value={(field?.value ?? []).map(String)}
+              onChange={(val) => field.onChange(val)}
+              label={<div className="font-medium">Rating</div>}
             >
-              <Radio value="first">First Day</Radio>
-              <Radio value="second">Second Day</Radio>
-              <Radio value="both">Both Days</Radio>
-            </RadioGroup>
+              <div className="flex gap-2">
+                {RATING_ENUM.map((x) => {
+                  return (
+                    <Checkbox key={x} value={x}>
+                      {x}
+                    </Checkbox>
+                  );
+                })}
+              </div>
+            </CheckboxGroup>
           );
         }}
       />
@@ -314,26 +336,21 @@ const FilterDrawer = () => {
   );
   const reset = useDrawerFilterStore((state) => state.reset);
   const router = useRouter();
-  const params = useParseCircleQueryToParams();
-  const [initalized, setInitalized] = useState(false);
-
-  const filterForm = useForm<CircleFilterWithNoSearch>({
-    defaultValues: {
-      fandom_id: [],
-      work_type_id: [],
-    },
-  });
 
-  useEffect(() => {
-    if (initalized) return;
+  const { filter } = useParseCircleQueryToParams();
 
-    filterForm.reset({
-      day: params.day,
-      fandom_id: params.fandom_id,
-      work_type_id: params.work_type_id,
-    });
-    setInitalized(true);
-  }, [params.day, params.fandom_id, params.work_type_id]);
+  const filterForm = useForm<CircleFilterWithNoSearch>();
+
+  useEffect(() => {
+    if (open) {
+      filterForm.reset({
+        day: filter.day,
+        fandom_id: filter.fandom_id,
+        work_type_id: filter.work_type_id,
+        rating: filter.rating,
+      });
+    }
+  }, [open]);
 
   return (
     <Drawer
@@ -356,6 +373,7 @@ const FilterDrawer = () => {
                     day: '',
                     fandom_id: [],
                     work_type_id: [],
+                    rating: [],
                   },
                   {
                     keepTouched: true,
@@ -372,7 +390,10 @@ const FilterDrawer = () => {
             className="flex flex-col gap-3"
             onSubmit={filterForm.handleSubmit((formData) => {
               Object.entries(formData).forEach(([key, values]) => {
-                if (values?.length !== 0 || typeof values !== 'undefined') {
+                if (
+                  !!values &&
+                  (values?.length !== 0 || typeof values !== 'undefined')
+                ) {
                   router.query[key] = values as string | string[];
                 } else {
                   delete router.query[key];

src/components/circle/Search.tsx

@@ -6,7 +6,7 @@ import { useEffect } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 
 function SearchInput() {
-  const params = useParseCircleQueryToParams();
+  const { filter: params } = useParseCircleQueryToParams();
 
   const searchForm = useForm<{ search: string }>({
     mode: 'onSubmit',

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;
     }