app/apis/common/get-news-by-slug.ts

@@ -14,9 +14,7 @@ type TParameters = {
 export const getNewsBySlug = async (parameters: TParameters) => {
   const { slug, ...restParameters } = parameters
   try {
-    const { data } = await HttpServer(restParameters).get(
+    const { data } = await HttpServer(restParameters).get(`/api/news/${slug}`)
-      `/api/news/${encodeURIComponent(slug)}`,
-    )
     return dataResponseSchema.parse(data)
   } catch (error) {
     // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject

app/components/text-editor/editor-menubar.tsx

@@ -1,4 +1,3 @@
-import { Input } from '@headlessui/react'
 import {
   ArrowUturnLeftIcon,
   ArrowUturnRightIcon,
@@ -7,7 +6,6 @@ import {
   Bars3Icon,
   Bars4Icon,
   BoldIcon,
-  CloudArrowUpIcon,
   CodeBracketIcon,
   DocumentTextIcon,
   H1Icon,
@@ -29,12 +27,9 @@ import {
   useState,
   useRef,
   useCallback,
-  useEffect,
 } from 'react'
 import { HexColorInput, HexColorPicker } from 'react-colorful'
 
-import { Button } from '~/components/ui/button'
-import { useAdminContext } from '~/contexts/admin'
 import { useClickOutside } from '~/hooks/use-click-outside'
 import { isHexCompatible, rgbToHex } from '~/utils/color'
 
@@ -48,30 +43,16 @@ type TProperties = {
 }
 
 export const EditorMenuBar = (properties: TProperties) => {
-  const { editor, setIsPlainHTML, category, disabled = false } = properties
+  const {
-  const { setIsUploadOpen, uploadedFile, setUploadedFile, isUploadOpen } =
+    editor,
-    useAdminContext()
+    setIsPlainHTML,
-  const [isOpenImage, setIsOpenImage] = useState(false)
+    // category,
-  const [imageUrl, setImageUrl] = useState('')
+    disabled = false,
+  } = properties
+  // const [isOpenImage, setIsOpenImage] = useState(false)
   const [isOpenColor, setIsOpenColor] = useState(false)
   const popover = useRef<HTMLDivElement>(null)
-  const close = useCallback(() => {
+  const close = useCallback(() => setIsOpenColor(false), [])
-    setIsOpenColor(false)
-    setIsOpenImage(false)
-    if (imageUrl) {
-      addImage(imageUrl)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
-  useEffect(() => {
-    if (uploadedFile && isUploadOpen === category) {
-      addImage(uploadedFile)
-      setUploadedFile(undefined)
-      setIsUploadOpen(undefined)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [uploadedFile])
 
   useClickOutside(popover, close)
 
@@ -115,7 +96,20 @@ export const EditorMenuBar = (properties: TProperties) => {
     }
   }
 
+  const uploadEnabled = false
+  const toggleUpload = () => {
+    if (uploadEnabled) {
+      // setIsOpenImage(true)
+    } else {
+      const urlImage = globalThis.prompt('URL')
+      if (urlImage) {
+        addImage(urlImage)
+      }
+    }
+  }
+
   return (
+    <>
       <div className="flex items-start justify-between gap-4 px-4 py-3">
         <div className="flex divide-x">
           <div className="flex max-w-[150px] flex-wrap items-start gap-1 px-1">
@@ -167,7 +161,7 @@ export const EditorMenuBar = (properties: TProperties) => {
                   ref={popover}
                 >
                   <HexColorPicker
-                  className="z-10 rounded-lg shadow"
+                    className="z-10"
                     color={rgbColor}
                     onChange={handleChangeColor}
                   />
@@ -176,7 +170,7 @@ export const EditorMenuBar = (properties: TProperties) => {
                       color={rgbColor}
                       onChange={handleChangeColor}
                       prefixed
-                    className="relative z-10 mt-1 flex w-full rounded-lg border-0 bg-white px-3 py-2 text-sm shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none focus-visible:outline-0 disabled:bg-gray-100"
+                      className="relative z-10 mt-1 flex w-full rounded-lg border px-3 py-2 text-sm focus:ring-0 focus-visible:outline-0"
                     />
                   </div>
                 </div>
@@ -194,7 +188,9 @@ export const EditorMenuBar = (properties: TProperties) => {
               <Bars3BottomLeftIcon />
             </EditorButton>
             <EditorButton
-            onClick={() => editor.chain().focus().setTextAlign('center').run()}
+              onClick={() =>
+                editor.chain().focus().setTextAlign('center').run()
+              }
               disabled={
                 disabled ||
                 !editor.can().chain().focus().setTextAlign('center').run()
@@ -216,7 +212,9 @@ export const EditorMenuBar = (properties: TProperties) => {
               <Bars3BottomRightIcon />
             </EditorButton>
             <EditorButton
-            onClick={() => editor.chain().focus().setTextAlign('justify').run()}
+              onClick={() =>
+                editor.chain().focus().setTextAlign('justify').run()
+              }
               disabled={
                 disabled ||
                 !editor.can().chain().focus().setTextAlign('justify').run()
@@ -328,43 +326,13 @@ export const EditorMenuBar = (properties: TProperties) => {
             </EditorButton>
           </div> */}
           <div className="flex items-start gap-1 px-1">
-          <div className="relative">
             <EditorButton
-              onClick={() => setIsOpenImage(true)}
+              onClick={() => toggleUpload()}
               title="Insert Image"
               disabled={disabled}
             >
               <PhotoIcon />
             </EditorButton>
-            {isOpenImage && (
-              <div
-                className="border-md absolute top-8 left-0 w-50"
-                ref={popover}
-              >
-                <div className="relative">
-                  <Input
-                    placeholder="Masukkan URL Gambar"
-                    color={rgbColor}
-                    onChange={(event) => {
-                      setImageUrl(event.target.value)
-                    }}
-                    className="z-10 flex h-[42px] w-full rounded-lg border-0 bg-white p-2 pr-8 text-sm shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none focus-visible:outline-0 disabled:bg-gray-100"
-                  />
-                  <Button
-                    type="button"
-                    variant="icon"
-                    size="fit"
-                    className="absolute top-0 right-3 h-[42px]"
-                    onClick={() => {
-                      setIsUploadOpen('content')
-                    }}
-                  >
-                    <CloudArrowUpIcon className="h-4 w-4 text-gray-500/50" />
-                  </Button>
-                </div>
-              </div>
-            )}
-          </div>
             <EditorButton
               onClick={() => setLink()}
               disabled={
@@ -418,5 +386,28 @@ export const EditorMenuBar = (properties: TProperties) => {
           </div>
         </div>
       </div>
+
+      {/* <Dialog
+        isOpen={isOpenImage}
+        setIsOpen={setIsOpenImage}
+        title="Insert Image"
+        showCloseButton={true}
+      >
+        <UploadProvider
+          data={{
+            onCancel: () => setIsOpenImage(false),
+            onSave: (file) => {
+              addImage(file)
+              setIsOpenImage(false)
+            },
+            category: category,
+            maxFileSize: 300,
+            selectedFile: '',
+          }}
+        >
+          <Upload />
+        </UploadProvider>
+      </Dialog> */}
+    </>
   )
 }

app/components/ui/input-file.tsx

@@ -11,7 +11,7 @@ import {
 import { useRemixFormContext } from 'remix-hook-form'
 import { twMerge } from 'tailwind-merge'
 
-import { useAdminContext, type TUpload } from '~/contexts/admin'
+import { useAdminContext } from '~/contexts/admin'
 
 import { Button } from './button'
 
@@ -42,8 +42,7 @@ export const InputFile = <TFormValues extends Record<string, unknown>>(
     labelClassName,
     ...restProperties
   } = properties
-  const { setIsUploadOpen, uploadedFile, setUploadedFile, isUploadOpen } =
+  const { setIsUploadOpen, uploadedFile, setUploadedFile } = useAdminContext()
-    useAdminContext()
 
   const {
     register,
@@ -54,10 +53,9 @@ export const InputFile = <TFormValues extends Record<string, unknown>>(
   const error: FieldError = get(errors, name)
 
   useEffect(() => {
-    if (uploadedFile && isUploadOpen === name) {
+    if (uploadedFile) {
       setValue(name as string, uploadedFile)
       setUploadedFile(undefined)
-      setIsUploadOpen(undefined)
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [uploadedFile])
@@ -86,7 +84,7 @@ export const InputFile = <TFormValues extends Record<string, unknown>>(
         size="fit"
         className="absolute right-3 h-[42px]"
         onClick={() => {
-          setIsUploadOpen(name as TUpload)
+          setIsUploadOpen('featured_image')
         }}
       >
         <CloudArrowUpIcon className="h-4 w-4 text-gray-500/50" />

app/contexts/admin.tsx

@@ -12,7 +12,7 @@ export const uploadCategorySchema = z
   .enum(['featured_image', 'ads', 'content', 'profile_picture'])
   .optional()
 
-export type TUpload = z.infer<typeof uploadCategorySchema>
+type TUpload = z.infer<typeof uploadCategorySchema>
 
 type AdminContextProperties = {
   isUploadOpen: TUpload

app/layouts/admin/form-upload.tsx

@@ -15,11 +15,11 @@ export const uploadSchema = z.object({
 export type TUploadSchema = z.infer<typeof uploadSchema>
 
 export const FormUpload = () => {
-  const { isUploadOpen, setUploadedFile } = useAdminContext()
+  const { isUploadOpen, setUploadedFile, setIsUploadOpen } = useAdminContext()
   const fetcher = useFetcher()
   const [disabled, setDisabled] = useState(false)
   const [error, setError] = useState<string>()
-  const maxFileSize = 10 * 1024 // 10MB
+  const maxFileSize = 1024 // 1MB
 
   const formMethods = useRemixForm<TUploadSchema>({
     mode: 'onSubmit',
@@ -37,6 +37,7 @@ export const FormUpload = () => {
     }
 
     setUploadedFile(fetcher.data.uploadData.data.file_url)
+    setIsUploadOpen(undefined)
 
     setDisabled(true)
     setError(undefined)

app/layouts/admin/menu.ts

@@ -1,8 +1,4 @@
-import {
+import { ClipboardDocumentCheckIcon, TagIcon } from '@heroicons/react/20/solid'
-  ClipboardDocumentCheckIcon,
-  DocumentCurrencyDollarIcon,
-  TagIcon,
-} from '@heroicons/react/20/solid'
 import type { SVGProps } from 'react'
 
 import { ChartIcon } from '~/components/icons/chart'
@@ -66,7 +62,7 @@ export const MENU: TMenu[] = [
       {
         title: 'Subscribe Plan',
         url: '/lg-admin/subscribe-plan',
-        icon: DocumentCurrencyDollarIcon,
+        icon: TagIcon,
       },
     ],
   },

app/pages/dashboard-contents/index.tsx

@@ -83,7 +83,7 @@ export const ContentsPage = () => {
     7: (value: string) => (
       <Button
         as="a"
-        href={`/lg-admin/contents/update/${encodeURIComponent(value)}`}
+        href={`/lg-admin/contents/update/${value}`}
         className="text-md rounded-md"
         size="sm"
       >

app/utils/render.tsx

@@ -24,6 +24,6 @@ export const getPremiumAttribute = (parameters: TGetPremiumAttribute) => {
 
   return {
     as: Link,
-    to: `/detail/${encodeURIComponent(slug)}`,
+    to: `/detail/${slug}`,
   }
 }