Merge remote-tracking branch 'origin/master' into feature/slicing

app/pages/dashboard-contents/index.tsx

@@ -60,7 +60,9 @@ export const ContentsPage = () => {
     2: (_value: unknown, _type: unknown, data: TNewsResponse) => (
       <div>
         <div>{data.author.name}</div>
-        <div className="text-sm text-[#7C7C7C]">ID: {data.id.slice(0, 8)}</div>
+        <div className="text-sm text-[#7C7C7C]">
+          ID: {data.author.id.slice(0, 8)}
+        </div>
       </div>
     ),
     3: (value: string) => <span className="text-sm">{value}</span>,

app/pages/form-category/index.tsx

@@ -39,7 +39,6 @@ export const FormCategoryPage = (properties: TProperties) => {
     },
   })
   const [error, setError] = useState<string>()
-  const [disabled, setDisabled] = useState(false)
 
   const { handleSubmit, watch, setValue } = formMethods
   const watchName = watch('name')
@@ -47,11 +46,9 @@ export const FormCategoryPage = (properties: TProperties) => {
   useEffect(() => {
     if (!fetcher.data?.success) {
       setError(fetcher.data?.message)
-      setDisabled(false)
       return
     }
     navigate('/lg-admin/categories')
-    setDisabled(true)
     setError(undefined)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fetcher])
@@ -96,7 +93,8 @@ export const FormCategoryPage = (properties: TProperties) => {
                 containerClassName="flex-1"
               />
               <Button
-                disabled={disabled}
+                isLoading={fetcher.state !== 'idle'}
+                disabled={fetcher.state !== 'idle'}
                 type="submit"
                 size="lg"
                 className="text-md h-[42px] rounded-md"

app/pages/form-contents/index.tsx

@@ -73,7 +73,6 @@ export const FormContentsPage = (properties: TProperties) => {
   const { categoriesData: categories } = loaderData || {}
   const { tagsData: tags } = loaderData || {}
   const [error, setError] = useState<string>()
-  const [disabled, setDisabled] = useState(false)
 
   const formMethods = useRemixForm<TContentSchema>({
     mode: 'onSubmit',
@@ -100,12 +99,10 @@ export const FormContentsPage = (properties: TProperties) => {
   useEffect(() => {
     if (!fetcher.data?.success) {
       setError(fetcher.data?.message)
-      setDisabled(false)
       return
     }
 
     navigate('/lg-admin/contents')
-    setDisabled(true)
     setError(undefined)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fetcher])
@@ -144,7 +141,8 @@ export const FormContentsPage = (properties: TProperties) => {
               containerClassName="flex-1"
             />
             <Button
-              disabled={disabled}
+              isLoading={fetcher.state !== 'idle'}
+              disabled={fetcher.state !== 'idle'}
               type="submit"
               size="lg"
               className="text-md h-[42px] rounded-md"

app/pages/form-subscriptions-plan/index.tsx

@@ -41,7 +41,6 @@ export const FormSubscribePlanPage = (properties: TProperties) => {
     },
   })
   const [error, setError] = useState<string>()
-  const [disabled, setDisabled] = useState(false)
 
   const { handleSubmit, watch, setValue } = formMethods
   const watchName = watch('name')
@@ -49,11 +48,9 @@ export const FormSubscribePlanPage = (properties: TProperties) => {
   useEffect(() => {
     if (!fetcher.data?.success) {
       setError(fetcher.data?.message)
-      setDisabled(false)
       return
     }
     navigate('/lg-admin/subscribe-plan')
-    setDisabled(true)
     setError(undefined)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fetcher])
@@ -100,7 +97,8 @@ export const FormSubscribePlanPage = (properties: TProperties) => {
                 containerClassName="flex-1"
               />
               <Button
-                disabled={disabled}
+                disabled={fetcher.state !== 'idle'}
+                isLoading={fetcher.state !== 'idle'}
                 type="submit"
                 size="lg"
                 className="text-md h-[42px] rounded-md"

app/pages/form-tag/index.tsx

@@ -35,7 +35,6 @@ export const FormTagPage = (properties: TProperties) => {
     },
   })
   const [error, setError] = useState<string>()
-  const [disabled, setDisabled] = useState(false)
 
   const { handleSubmit, watch, setValue } = formMethods
   const watchName = watch('name')
@@ -43,11 +42,9 @@ export const FormTagPage = (properties: TProperties) => {
   useEffect(() => {
     if (!fetcher.data?.success) {
       setError(fetcher.data?.message)
-      setDisabled(false)
       return
     }
     navigate('/lg-admin/tags')
-    setDisabled(true)
     setError(undefined)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fetcher])
@@ -92,7 +89,8 @@ export const FormTagPage = (properties: TProperties) => {
                 containerClassName="flex-1"
               />
               <Button
-                disabled={disabled}
+                isLoading={fetcher.state !== 'idle'}
+                disabled={fetcher.state !== 'idle'}
                 type="submit"
                 size="lg"
                 className="text-md h-[42px] rounded-md"

app/pages/staff-login/index.tsx

@@ -23,14 +23,12 @@ export const AdminLoginPage = () => {
     resolver: zodResolver(loginSchema),
   })
   const [error, setError] = useState<string>()
-  const [disabled, setDisabled] = useState(false)
 
   const { handleSubmit } = formMethods
 
   useEffect(() => {
     if (!fetcher.data?.success) {
       setError(fetcher.data?.message)
-      setDisabled(false)
       return
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -81,18 +79,21 @@ export const AdminLoginPage = () => {
               {/* Lupa Kata Sandi */}
               <div className="mb-4 flex justify-between">
                 <span className="text-gray-600">Lupa Kata Sandi?</span>
-                <Link
+                <Button
+                  as={Link}
+                  variant={'link'}
+                  size="fit"
                   to="/lg-admin/auth/reset-password"
-                  className="font-semibold text-[#2E2F7C]"
                 >
                   Reset Kata Sandi
-                </Link>
+                </Button>
               </div>
 
               <Button
-                disabled={disabled}
+                isLoading={fetcher.state !== 'idle'}
+                disabled={fetcher.state !== 'idle'}
                 type="submit"
-                className="w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800"
+                className="w-full rounded-md py-2"
               >
                 Masuk
               </Button>