update,

002_source/cms/src/app/dashboard/lesson_types/[typeId]/page.tsx

@@ -26,19 +26,26 @@ import { PencilSimple as PencilSimpleIcon } from '@phosphor-icons/react/dist/ssr
 import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
 import { ShieldWarning as ShieldWarningIcon } from '@phosphor-icons/react/dist/ssr/ShieldWarning';
 import { User as UserIcon } from '@phosphor-icons/react/dist/ssr/User';
+import type { RecordModel } from 'pocketbase';
+import PocketBase from 'pocketbase';
 import { useTranslation } from 'react-i18next';
 
 import { paths } from '@/paths';
 import { dayjs } from '@/lib/dayjs';
+import { logger } from '@/lib/default-logger';
 import { PropertyItem } from '@/components/core/property-item';
 import { PropertyList } from '@/components/core/property-list';
+import { toast } from '@/components/core/toaster';
 // import { getLessonTypeById } from '@/components/dashboard/lesson_type/http-actions';
 import { LessonTypeDefaultValue, type LessonType } from '@/components/dashboard/lesson_type/ILessonType';
+import { defaultLessonType } from '@/components/dashboard/lesson_type/interfaces';
 import { Notifications } from '@/components/dashboard/lesson_type/notifications';
 import { Payments } from '@/components/dashboard/lesson_type/payments';
 import type { Address } from '@/components/dashboard/lesson_type/shipping-address';
 import { ShippingAddress } from '@/components/dashboard/lesson_type/shipping-address';
 
+const pb = new PocketBase(process.env.NEXT_PUBLIC_POCKETBASE_URL);
+
 export default function Page(): React.JSX.Element {
   const { t } = useTranslation();
   const { typeId } = useParams<{ typeId: string }>();
@@ -51,17 +58,20 @@ export default function Page(): React.JSX.Element {
   }
 
   React.useEffect(() => {
-    // getLessonTypeById(typeId)
+    if (typeId) {
-    //   .then((lessonType: LessonType) => {
+      pb.collection('LessonsTypes')
-    //     setIsLoading(false);
+        .getOne(typeId)
-    //     setShowLessonType(lessonType);
+        .then((lessonType: RecordModel) => {
-    //   })
+          setShowLessonType({ ...defaultLessonType, ...lessonType });
-    //   .catch((err) => {
+          setIsLoading(false);
-    //     // console.error(err);
+        })
-    //     console.error(t('lessonType.load_error'));
+        .catch((err) => {
-    //   });
+          logger.error(err);
-    // console.log('hello');
+          toast(t('dashboard.lessonTypes.list.error'));
-  }, []);
+        });
+    }
+  }, [typeId]);
+
   if (isLoading) return <div>{t('common.loading')}</div>;
 
   return (

002_source/cms/src/app/dashboard/lesson_types/edit/[typeId]/page.tsx

@@ -14,6 +14,11 @@ import { LessonTypeEditForm } from '@/components/dashboard/lesson_type/lesson-ty
 
 export default function Page(): React.JSX.Element {
   const { t } = useTranslation();
+
+  React.useEffect(() => {
+    console.log('helloworld');
+  }, []);
+
   return (
     <Box
       sx={{

002_source/cms/src/app/helloworld/page.tsx

@@ -0,0 +1,14 @@
+'use client';
+
+import * as React from 'react';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+
+function Page(): React.JSX.Element {
+  React.useLayoutEffect(() => {
+    console.log('helloworld');
+  }, []);
+
+  return <>helloworld</>;
+}
+
+export default Page;

002_source/cms/src/components/core/i18n-provider.tsx

@@ -16,7 +16,6 @@ export function I18nProvider({ children, language = 'en' }: I18nProviderProps):
   const { i18n } = useTranslation();
 
   React.useEffect(() => {
-    console.log(`find me ? I18nProvider ${language}`);
     // i18n
     //   .changeLanguage(language)
     //   .then(() => {

002_source/cms/src/components/dashboard/lesson_type/lesson-type-edit-form.tsx

@@ -3,6 +3,7 @@
 import * as React from 'react';
 import RouterLink from 'next/link';
 import { useParams, useRouter } from 'next/navigation';
+import { COL_LESSON_TYPES } from '@/constants';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { LoadingButton } from '@mui/lab';
 import { MenuItem } from '@mui/material';
@@ -23,6 +24,8 @@ import Select from '@mui/material/Select';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import Grid from '@mui/material/Unstable_Grid2';
+import type { RecordModel } from 'pocketbase';
+import PocketBase from 'pocketbase';
 // import { Camera as CameraIcon } from '@phosphor-icons/react/dist/ssr/Camera';
 // import axios from 'axios';
 import { Controller, useForm } from 'react-hook-form';
@@ -37,7 +40,9 @@ import { toast } from '@/components/core/toaster';
 // import { getLessonTypeById, updateLessonType } from './http-actions';
 // TODO: this may be wrong
 import type { LessonType } from './ILessonType';
-import type { LessonTypeEditFormProps } from './interfaces';
+import { defaultLessonType, type LessonTypeEditFormProps } from './interfaces';
+
+const pb = new PocketBase(process.env.NEXT_PUBLIC_POCKETBASE_URL);
 
 // function fileToBase64(file: Blob): Promise<string> {
 //   return new Promise((resolve, reject) => {
@@ -73,6 +78,7 @@ export function LessonTypeEditForm(): React.JSX.Element {
   const { t } = useTranslation();
   const { typeId } = useParams<{ typeId: string }>();
   const [isUpdating, setIsUpdating] = React.useState<boolean>(false);
+  const [isLoading, setIsLoading] = React.useState<boolean>(false);
 
   const {
     control,
@@ -83,8 +89,7 @@ export function LessonTypeEditForm(): React.JSX.Element {
     // watch,
   } = useForm<Values>({ defaultValues, resolver: zodResolver(schema) });
 
-  const onSubmit = React.useCallback(
+  const onSubmit = React.useCallback(async (values: Values): Promise<void> => {
-    async (values: Values): Promise<void> => {
     setIsUpdating(true);
     const tempUpdate: LessonTypeEditFormProps = {
       name: values.name,
@@ -93,21 +98,20 @@ export function LessonTypeEditForm(): React.JSX.Element {
       visible: values.visible_to_user ? 'visible' : 'hidden',
     };
 
-      // updateLessonType(tempUpdate, typeId)
+    pb.collection(COL_LESSON_TYPES)
-      //   .then((res) => {
+      .update(typeId, tempUpdate)
-      //     logger.debug(res);
+      .then((res) => {
-      //     toast.success(t('dashboard.lessonTypes.update.success'));
+        logger.debug(res);
-      //     setIsUpdating(false);
+        toast.success(t('dashboard.lessonTypes.update.success'));
-      //     router.push(paths.dashboard.lesson_types.list);
+        setIsUpdating(false);
-      //   })
+        router.push(paths.dashboard.lesson_types.list);
-      //   .catch((err) => {
+      })
-      //     logger.error(err);
+      .catch((err) => {
-      //     toast.error('Something went wrong!');
+        logger.error(err);
-      //     setIsUpdating(false);
+        toast.error('Something went wrong!');
-      //   });
+        setIsUpdating(false);
-    },
+      });
-    [router]
+  }, []);
-  );
 
   const avatarInputRef = React.useRef<HTMLInputElement>(null);
   // const avatar = watch('avatar');
@@ -124,20 +128,30 @@ export function LessonTypeEditForm(): React.JSX.Element {
     [setValue]
   );
 
+  const handleLoad = React.useCallback(
+    (id: string) => {
+      pb.collection(COL_LESSON_TYPES)
+        .getOne(id)
+        .then((lessonType: RecordModel) => {
+          reset({ ...defaultLessonType, ...lessonType });
+
+          setIsLoading(false);
+        })
+        .catch((err) => {
+          logger.error(err);
+          toast(t('dashboard.lessonTypes.list.error'));
+        });
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [typeId]
+  );
+
   React.useEffect(() => {
-    // getLessonTypeById(typeId)
+    handleLoad(typeId);
-    //   .then((lessonType: LessonType) => {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
-    //     reset({
+  }, [typeId]);
-    //       name: lessonType.name,
+
-    //       type: lessonType.type,
+  if (isLoading) return <>loading</>;
-    //       pos: lessonType.pos,
-    //       visible_to_user: lessonType.visible,
-    //     });
-    //   })
-    //   .catch((err) => {
-    //     // console.error(err);
-    //   });
-  }, []);
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
@@ -223,7 +237,14 @@ export function LessonTypeEditForm(): React.JSX.Element {
                     render={({ field }) => (
                       <FormControl error={Boolean(errors.pos)} fullWidth>
                         <InputLabel required>{t('dashboard.lessonTypes.edit.position')}</InputLabel>
-                        <OutlinedInput {...field} />
+                        <OutlinedInput
+                          {...field}
+                          onChange={(e) => {
+                            field.onChange(parseInt(e.target.value));
+                          }}
+                          type="number"
+                        />
+
                         {errors.pos ? <FormHelperText>{errors.pos.message}</FormHelperText> : null}
                       </FormControl>
                     )}
@@ -237,8 +258,8 @@ export function LessonTypeEditForm(): React.JSX.Element {
                       <FormControl error={Boolean(errors.visible_to_user)} fullWidth>
                         <InputLabel>{t('dashboard.lessonTypes.edit.visibleToUser')}</InputLabel>
                         <Select {...field}>
-                          <MenuItem value={'visible'}>{t('dashboard.lessonTypes.edit.visible')}</MenuItem>
+                          <MenuItem value="visible">{t('dashboard.lessonTypes.edit.visible')}</MenuItem>
-                          <MenuItem value={'hidden'}>{t('dashboard.lessonTypes.edit.hidden')}</MenuItem>
+                          <MenuItem value="hidden">{t('dashboard.lessonTypes.edit.hidden')}</MenuItem>
                         </Select>
 
                         {errors.visible_to_user ? (
@@ -256,7 +277,7 @@ export function LessonTypeEditForm(): React.JSX.Element {
           <Button color="secondary" component={RouterLink} href={paths.dashboard.lesson_types.list}>
             {t('dashboard.lessonTypes.edit.cancelButton')}
           </Button>
-          <LoadingButton disabled={isUpdating} type="submit" variant="contained" loading={isUpdating}>
+          <LoadingButton disabled={isUpdating} loading={isUpdating} type="submit" variant="contained">
             {t('dashboard.lessonTypes.edit.updateButton')}
           </LoadingButton>
         </CardActions>

002_source/cms/src/components/dashboard/lesson_type/lesson-types-table.tsx

@@ -36,7 +36,7 @@ function columns(handleDeleteClick: (testId: string) => void): ColumnDef<LessonT
             <Link
               color="inherit"
               component={RouterLink}
-              href={paths.dashboard.lesson_types.details('1')}
+              href={paths.dashboard.lesson_types.details(row.id)}
               sx={{ whiteSpace: 'nowrap' }}
               variant="subtitle2"
             >

002_source/cms/src/constants.ts

@@ -0,0 +1,3 @@
+const COL_LESSON_TYPES = 'LessonsTypes';
+
+export { COL_LESSON_TYPES };