legalgonews/legalgo-FE-reactrouter
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: legalgonews:54a8a97c099ee63983417a52db7c62e0c0ccc0fe
Branches Tags
legalgonews:master
legalgonews:dev
..
compare: legalgonews:2e13e11673f2ff91cf65adc35f012b06ec4d7d6b
Branches Tags
legalgonews:dev
legalgonews:master

No commits in common. "54a8a97c099ee63983417a52db7c62e0c0ccc0fe" and "2e13e11673f2ff91cf65adc35f012b06ec4d7d6b" have entirely different histories.
54a8a97c09 ... 2e13e11673

8 changed files with 273 additions and 289 deletions
Show Stats Expand all files Collapse all files

4
app/apis/common/get-news-by-slug.ts
View File

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

115
app/components/text-editor/editor-menubar.tsx
View File

@ -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 { setIsUploadOpen, uploadedFile, setUploadedFile, isUploadOpen } =
useAdminContext()
const [isOpenImage, setIsOpenImage] = useState(false)
const [imageUrl, setImageUrl] = useState('')
const {
editor,
setIsPlainHTML,
// category,
disabled = false,
} = properties
// const [isOpenImage, setIsOpenImage] = useState(false)
const [isOpenColor, setIsOpenColor] = useState(false)
const popover = useRef<HTMLDivElement>(null)
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])
const close = useCallback(() => setIsOpenColor(false), [])
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> */}
</>
)
}

10
app/components/ui/input-file.tsx
View File

@ -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 } =
useAdminContext()
const { setIsUploadOpen, uploadedFile, setUploadedFile } = 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" />

2
app/contexts/admin.tsx
View File

@ -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

5
app/layouts/admin/form-upload.tsx
View File

@ -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)

8
app/layouts/admin/menu.ts
View File

@ -1,8 +1,4 @@
import {
ClipboardDocumentCheckIcon,
DocumentCurrencyDollarIcon,
TagIcon,
} from '@heroicons/react/20/solid'
import { ClipboardDocumentCheckIcon, 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,
},
],
},

2
app/pages/dashboard-contents/index.tsx
View File

@ -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"
>

2
app/utils/render.tsx
View File

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