fix: encode URI components in API calls and links to ensure proper formatting

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

@@ -14,7 +14,9 @@ type TParameters = {
 export const getNewsBySlug = async (parameters: TParameters) => {
   const { slug, ...restParameters } = parameters
   try {
-    const { data } = await HttpServer(restParameters).get(`/api/news/${slug}`)
+    const { data } = await HttpServer(restParameters).get(
+      `/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,3 +1,4 @@
+import { Input } from '@headlessui/react'
 import {
   ArrowUturnLeftIcon,
   ArrowUturnRightIcon,
@@ -6,6 +7,7 @@ import {
   Bars3Icon,
   Bars4Icon,
   BoldIcon,
+  CloudArrowUpIcon,
   CodeBracketIcon,
   DocumentTextIcon,
   H1Icon,
@@ -27,9 +29,12 @@ 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'
 
@@ -43,16 +48,30 @@ type TProperties = {
 }
 
 export const EditorMenuBar = (properties: TProperties) => {
-  const {
-    editor,
-    setIsPlainHTML,
-    // category,
-    disabled = false,
-  } = properties
-  // const [isOpenImage, setIsOpenImage] = useState(false)
+  const { editor, setIsPlainHTML, category, disabled = false } = properties
+  const { setIsUploadOpen, uploadedFile, setUploadedFile, isUploadOpen } =
+    useAdminContext()
+  const [isOpenImage, setIsOpenImage] = useState(false)
+  const [imageUrl, setImageUrl] = useState('')
   const [isOpenColor, setIsOpenColor] = useState(false)
   const popover = useRef<HTMLDivElement>(null)
-  const close = useCallback(() => setIsOpenColor(false), [])
+  const close = useCallback(() => {
+    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)
 
@@ -96,167 +115,150 @@ 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">
+    <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">
+          <EditorButton
+            onClick={() => editor.chain().focus().toggleBold().run()}
+            disabled={
+              disabled || !editor.can().chain().focus().toggleBold().run()
+            }
+            isActive={editor.isActive('bold')}
+            title="Bold"
+          >
+            <BoldIcon />
+          </EditorButton>
+          <EditorButton
+            onClick={() => editor.chain().focus().toggleItalic().run()}
+            disabled={
+              disabled || !editor.can().chain().focus().toggleItalic().run()
+            }
+            isActive={editor.isActive('italic')}
+            title="Italic"
+          >
+            <ItalicIcon />
+          </EditorButton>
+          <EditorButton
+            onClick={() => editor.chain().focus().toggleStrike().run()}
+            disabled={
+              disabled || !editor.can().chain().focus().toggleStrike().run()
+            }
+            isActive={editor.isActive('strike')}
+            title="Strike"
+          >
+            <StrikethroughIcon />
+          </EditorButton>
+          <div className="relative">
             <EditorButton
-              onClick={() => editor.chain().focus().toggleBold().run()}
-              disabled={
-                disabled || !editor.can().chain().focus().toggleBold().run()
-              }
-              isActive={editor.isActive('bold')}
-              title="Bold"
+              onClick={() => setIsOpenColor(true)}
+              title="Text Color"
+              style={{
+                color: rgbColor,
+              }}
+              isActive={true}
+              disabled={disabled}
             >
-              <BoldIcon />
+              <SwatchIcon />
             </EditorButton>
-            <EditorButton
-              onClick={() => editor.chain().focus().toggleItalic().run()}
-              disabled={
-                disabled || !editor.can().chain().focus().toggleItalic().run()
-              }
-              isActive={editor.isActive('italic')}
-              title="Italic"
-            >
-              <ItalicIcon />
-            </EditorButton>
-            <EditorButton
-              onClick={() => editor.chain().focus().toggleStrike().run()}
-              disabled={
-                disabled || !editor.can().chain().focus().toggleStrike().run()
-              }
-              isActive={editor.isActive('strike')}
-              title="Strike"
-            >
-              <StrikethroughIcon />
-            </EditorButton>
-            <div className="relative">
-              <EditorButton
-                onClick={() => setIsOpenColor(true)}
-                title="Text Color"
-                style={{
-                  color: rgbColor,
-                }}
-                isActive={true}
-                disabled={disabled}
+            {isOpenColor && (
+              <div
+                className="border-md absolute top-8 left-0"
+                ref={popover}
               >
-                <SwatchIcon />
-              </EditorButton>
-              {isOpenColor && (
-                <div
-                  className="border-md absolute top-8 left-0"
-                  ref={popover}
-                >
-                  <HexColorPicker
-                    className="z-10"
+                <HexColorPicker
+                  className="z-10 rounded-lg shadow"
+                  color={rgbColor}
+                  onChange={handleChangeColor}
+                />
+                <div className="">
+                  <HexColorInput
                     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"
                   />
-                  <div className="">
-                    <HexColorInput
-                      color={rgbColor}
-                      onChange={handleChangeColor}
-                      prefixed
-                      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>
-              )}
-            </div>
-            <EditorButton
-              onClick={() => editor.chain().focus().setTextAlign('left').run()}
-              disabled={
-                disabled ||
-                !editor.can().chain().focus().setTextAlign('left').run()
-              }
-              isActive={editor.isActive({ textAlign: 'left' })}
-              title="Align Left"
-            >
-              <Bars3BottomLeftIcon />
-            </EditorButton>
-            <EditorButton
-              onClick={() =>
-                editor.chain().focus().setTextAlign('center').run()
-              }
-              disabled={
-                disabled ||
-                !editor.can().chain().focus().setTextAlign('center').run()
-              }
-              isActive={editor.isActive({ textAlign: 'center' })}
-              title="Align Center"
-            >
-              <Bars3Icon />
-            </EditorButton>
-            <EditorButton
-              onClick={() => editor.chain().focus().setTextAlign('right').run()}
-              disabled={
-                disabled ||
-                !editor.can().chain().focus().setTextAlign('right').run()
-              }
-              isActive={editor.isActive({ textAlign: 'right' })}
-              title="Align Right"
-            >
-              <Bars3BottomRightIcon />
-            </EditorButton>
-            <EditorButton
-              onClick={() =>
-                editor.chain().focus().setTextAlign('justify').run()
-              }
-              disabled={
-                disabled ||
-                !editor.can().chain().focus().setTextAlign('justify').run()
-              }
-              isActive={editor.isActive({ textAlign: 'justify' })}
-              title="Align Justify"
-            >
-              <Bars4Icon />
-            </EditorButton>
+              </div>
+            )}
           </div>
-          <div className="flex max-w-[150px] flex-wrap items-start gap-1 px-1">
-            <EditorButton
-              onClick={() =>
-                editor.chain().focus().toggleHeading({ level: 1 }).run()
-              }
-              isActive={editor.isActive('heading', { level: 1 })}
-              title="Heading 1"
-              disabled={disabled}
-            >
-              <H1Icon />
-            </EditorButton>
-            <EditorButton
-              onClick={() =>
-                editor.chain().focus().toggleHeading({ level: 2 }).run()
-              }
-              isActive={editor.isActive('heading', { level: 2 })}
-              title="Heading 2"
-              disabled={disabled}
-            >
-              <H2Icon />
-            </EditorButton>
-            <EditorButton
-              onClick={() =>
-                editor.chain().focus().toggleHeading({ level: 3 }).run()
-              }
-              isActive={editor.isActive('heading', { level: 3 })}
-              title="Heading 3"
-              disabled={disabled}
-            >
-              <H3Icon />
-            </EditorButton>
-            {/* <EditorButton
+          <EditorButton
+            onClick={() => editor.chain().focus().setTextAlign('left').run()}
+            disabled={
+              disabled ||
+              !editor.can().chain().focus().setTextAlign('left').run()
+            }
+            isActive={editor.isActive({ textAlign: 'left' })}
+            title="Align Left"
+          >
+            <Bars3BottomLeftIcon />
+          </EditorButton>
+          <EditorButton
+            onClick={() => editor.chain().focus().setTextAlign('center').run()}
+            disabled={
+              disabled ||
+              !editor.can().chain().focus().setTextAlign('center').run()
+            }
+            isActive={editor.isActive({ textAlign: 'center' })}
+            title="Align Center"
+          >
+            <Bars3Icon />
+          </EditorButton>
+          <EditorButton
+            onClick={() => editor.chain().focus().setTextAlign('right').run()}
+            disabled={
+              disabled ||
+              !editor.can().chain().focus().setTextAlign('right').run()
+            }
+            isActive={editor.isActive({ textAlign: 'right' })}
+            title="Align Right"
+          >
+            <Bars3BottomRightIcon />
+          </EditorButton>
+          <EditorButton
+            onClick={() => editor.chain().focus().setTextAlign('justify').run()}
+            disabled={
+              disabled ||
+              !editor.can().chain().focus().setTextAlign('justify').run()
+            }
+            isActive={editor.isActive({ textAlign: 'justify' })}
+            title="Align Justify"
+          >
+            <Bars4Icon />
+          </EditorButton>
+        </div>
+        <div className="flex max-w-[150px] flex-wrap items-start gap-1 px-1">
+          <EditorButton
+            onClick={() =>
+              editor.chain().focus().toggleHeading({ level: 1 }).run()
+            }
+            isActive={editor.isActive('heading', { level: 1 })}
+            title="Heading 1"
+            disabled={disabled}
+          >
+            <H1Icon />
+          </EditorButton>
+          <EditorButton
+            onClick={() =>
+              editor.chain().focus().toggleHeading({ level: 2 }).run()
+            }
+            isActive={editor.isActive('heading', { level: 2 })}
+            title="Heading 2"
+            disabled={disabled}
+          >
+            <H2Icon />
+          </EditorButton>
+          <EditorButton
+            onClick={() =>
+              editor.chain().focus().toggleHeading({ level: 3 }).run()
+            }
+            isActive={editor.isActive('heading', { level: 3 })}
+            title="Heading 3"
+            disabled={disabled}
+          >
+            <H3Icon />
+          </EditorButton>
+          {/* <EditorButton
               onClick={() => editor.chain().focus().setParagraph().run()}
               isActive={editor.isActive('paragraph')}
               title="Paragraph"
@@ -264,32 +266,32 @@ export const EditorMenuBar = (properties: TProperties) => {
             >
               <RiParagraph />
             </EditorButton> */}
-            <EditorButton
-              onClick={() => editor.chain().focus().toggleBulletList().run()}
-              isActive={editor.isActive('bulletList')}
-              title="Bullet List"
-              disabled={disabled}
-            >
-              <ListBulletIcon />
-            </EditorButton>
-            <EditorButton
-              onClick={() => editor.chain().focus().toggleOrderedList().run()}
-              isActive={editor.isActive('orderedList')}
-              title="Ordered List"
-              disabled={disabled}
-            >
-              <NumberedListIcon />
-            </EditorButton>
-            <EditorButton
-              onClick={() => editor.chain().focus().toggleCodeBlock().run()}
-              isActive={editor.isActive('codeBlock')}
-              title="Code Block"
-              disabled={disabled}
-            >
-              <CodeBracketIcon />
-            </EditorButton>
-          </div>
-          {/* <div className="flex items-start gap-1 px-1">
+          <EditorButton
+            onClick={() => editor.chain().focus().toggleBulletList().run()}
+            isActive={editor.isActive('bulletList')}
+            title="Bullet List"
+            disabled={disabled}
+          >
+            <ListBulletIcon />
+          </EditorButton>
+          <EditorButton
+            onClick={() => editor.chain().focus().toggleOrderedList().run()}
+            isActive={editor.isActive('orderedList')}
+            title="Ordered List"
+            disabled={disabled}
+          >
+            <NumberedListIcon />
+          </EditorButton>
+          <EditorButton
+            onClick={() => editor.chain().focus().toggleCodeBlock().run()}
+            isActive={editor.isActive('codeBlock')}
+            title="Code Block"
+            disabled={disabled}
+          >
+            <CodeBracketIcon />
+          </EditorButton>
+        </div>
+        {/* <div className="flex items-start gap-1 px-1">
             <EditorButton
               onClick={() => editor.chain().focus().toggleBlockquote().run()}
               isActive={editor.isActive('blockquote')}
@@ -306,7 +308,7 @@ export const EditorMenuBar = (properties: TProperties) => {
               <RiSeparator />
             </EditorButton>
           </div> */}
-          {/* <div className="flex items-start gap-1 px-1">
+        {/* <div className="flex items-start gap-1 px-1">
             <EditorButton
               onClick={() => editor.chain().focus().setHardBreak().run()}
               title="Hard Break"
@@ -325,89 +327,96 @@ export const EditorMenuBar = (properties: TProperties) => {
               <RiFormatClear />
             </EditorButton>
           </div> */}
-          <div className="flex items-start gap-1 px-1">
+        <div className="flex items-start gap-1 px-1">
+          <div className="relative">
             <EditorButton
-              onClick={() => toggleUpload()}
+              onClick={() => setIsOpenImage(true)}
               title="Insert Image"
               disabled={disabled}
             >
               <PhotoIcon />
             </EditorButton>
-            <EditorButton
-              onClick={() => setLink()}
-              disabled={
-                disabled ||
-                !editor
-                  .can()
-                  .chain()
-                  .focus()
-                  .extendMarkRange('link')
-                  .setLink({ href: '' })
-                  .run()
-              }
-              isActive={editor.isActive('link')}
-              title="Set Link"
-            >
-              <LinkIcon />
-            </EditorButton>
-            <EditorButton
-              onClick={() => editor.chain().focus().unsetLink().run()}
-              disabled={disabled || !editor.isActive('link')}
-              title="Unset Link"
-            >
-              <LinkSlashIcon />
-            </EditorButton>
-          </div>
-          <div className="flex items-start gap-1 px-1">
-            <EditorButton
-              onClick={() => editor.chain().focus().undo().run()}
-              disabled={disabled || !editor.can().chain().focus().undo().run()}
-              title="Undo"
-            >
-              <ArrowUturnLeftIcon />
-            </EditorButton>
-            <EditorButton
-              onClick={() => editor.chain().focus().redo().run()}
-              disabled={disabled || !editor.can().chain().focus().redo().run()}
-              title="Redo"
-            >
-              <ArrowUturnRightIcon />
-            </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={
+              disabled ||
+              !editor
+                .can()
+                .chain()
+                .focus()
+                .extendMarkRange('link')
+                .setLink({ href: '' })
+                .run()
+            }
+            isActive={editor.isActive('link')}
+            title="Set Link"
+          >
+            <LinkIcon />
+          </EditorButton>
+          <EditorButton
+            onClick={() => editor.chain().focus().unsetLink().run()}
+            disabled={disabled || !editor.isActive('link')}
+            title="Unset Link"
+          >
+            <LinkSlashIcon />
+          </EditorButton>
         </div>
-        <div>
-          <div className="flex gap-1 px-1">
-            <EditorButton
-              onClick={() => setIsPlainHTML(true)}
-              title="Switch to Plain Text"
-            >
-              <DocumentTextIcon />
-            </EditorButton>
-          </div>
+        <div className="flex items-start gap-1 px-1">
+          <EditorButton
+            onClick={() => editor.chain().focus().undo().run()}
+            disabled={disabled || !editor.can().chain().focus().undo().run()}
+            title="Undo"
+          >
+            <ArrowUturnLeftIcon />
+          </EditorButton>
+          <EditorButton
+            onClick={() => editor.chain().focus().redo().run()}
+            disabled={disabled || !editor.can().chain().focus().redo().run()}
+            title="Redo"
+          >
+            <ArrowUturnRightIcon />
+          </EditorButton>
         </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> */}
-    </>
+      <div>
+        <div className="flex gap-1 px-1">
+          <EditorButton
+            onClick={() => setIsPlainHTML(true)}
+            title="Switch to Plain Text"
+          >
+            <DocumentTextIcon />
+          </EditorButton>
+        </div>
+      </div>
+    </div>
   )
 }

app/components/ui/input-file.tsx

@@ -11,7 +11,7 @@ import {
 import { useRemixFormContext } from 'remix-hook-form'
 import { twMerge } from 'tailwind-merge'
 
-import { useAdminContext } from '~/contexts/admin'
+import { useAdminContext, type TUpload } from '~/contexts/admin'
 
 import { Button } from './button'
 
@@ -42,7 +42,8 @@ export const InputFile = <TFormValues extends Record<string, unknown>>(
     labelClassName,
     ...restProperties
   } = properties
-  const { setIsUploadOpen, uploadedFile, setUploadedFile } = useAdminContext()
+  const { setIsUploadOpen, uploadedFile, setUploadedFile, isUploadOpen } =
+    useAdminContext()
 
   const {
     register,
@@ -53,9 +54,10 @@ export const InputFile = <TFormValues extends Record<string, unknown>>(
   const error: FieldError = get(errors, name)
 
   useEffect(() => {
-    if (uploadedFile) {
+    if (uploadedFile && isUploadOpen === name) {
       setValue(name as string, uploadedFile)
       setUploadedFile(undefined)
+      setIsUploadOpen(undefined)
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [uploadedFile])
@@ -84,7 +86,7 @@ export const InputFile = <TFormValues extends Record<string, unknown>>(
         size="fit"
         className="absolute right-3 h-[42px]"
         onClick={() => {
-          setIsUploadOpen('featured_image')
+          setIsUploadOpen(name as TUpload)
         }}
       >
         <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()
 
-type TUpload = z.infer<typeof uploadCategorySchema>
+export 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, setIsUploadOpen } = useAdminContext()
+  const { isUploadOpen, setUploadedFile } = useAdminContext()
   const fetcher = useFetcher()
   const [disabled, setDisabled] = useState(false)
   const [error, setError] = useState<string>()
-  const maxFileSize = 1024 // 1MB
+  const maxFileSize = 10 * 1024 // 10MB
 
   const formMethods = useRemixForm<TUploadSchema>({
     mode: 'onSubmit',
@@ -37,7 +37,6 @@ export const FormUpload = () => {
     }
 
     setUploadedFile(fetcher.data.uploadData.data.file_url)
-    setIsUploadOpen(undefined)
 
     setDisabled(true)
     setError(undefined)

app/layouts/admin/menu.ts

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

app/pages/dashboard-contents/index.tsx

@@ -83,7 +83,7 @@ export const ContentsPage = () => {
     7: (value: string) => (
       <Button
         as="a"
-        href={`/lg-admin/contents/update/${value}`}
+        href={`/lg-admin/contents/update/${encodeURIComponent(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/${slug}`,
+    to: `/detail/${encodeURIComponent(slug)}`,
   }
 }