mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
refactor/fix: lift file select logic into its own component block
This commit is contained in:
Chris Holland
parent
eedc5ab329
commit
69468d34c8
4 changed files with 124 additions and 143 deletions
|
|
@ -1,15 +1,14 @@
|
|||
import { NodeViewWrapper } from '@tiptap/react'
|
||||
import React, { useEffect } from 'react'
|
||||
import styled from 'styled-components'
|
||||
import { Resizable } from 're-resizable'
|
||||
import { AlertTriangle, Image, Loader } from 'lucide-react'
|
||||
import { AlertTriangle, Image } from 'lucide-react'
|
||||
import { uploadNewImageFile } from '../../../../../services/blocks/Image/images'
|
||||
import { UploadIcon } from '@radix-ui/react-icons'
|
||||
import { getActivityBlockMediaDirectory } from '@services/media/media'
|
||||
import { useOrg } from '@components/Contexts/OrgContext'
|
||||
import { useCourse } from '@components/Contexts/CourseContext'
|
||||
import { useEditorProvider } from '@components/Contexts/Editor/EditorContext'
|
||||
import { useLHSession } from '@components/Contexts/LHSessionContext'
|
||||
import { FileUploadBlock, FileUploadBlockButton, FileUploadBlockInput } from '../../FileUploadBlock'
|
||||
|
||||
function ImageBlockComponent(props: any) {
|
||||
const org = useOrg() as any
|
||||
|
|
@ -53,39 +52,11 @@ function ImageBlockComponent(props: any) {
|
|||
|
||||
return (
|
||||
<NodeViewWrapper className="block-image">
|
||||
{!blockObject && isEditable && (
|
||||
<BlockImageWrapper
|
||||
className="flex items-center space-x-3 py-7 bg-gray-50 rounded-xl text-gray-900 px-3 border-dashed border-gray-150 border-2"
|
||||
contentEditable={isEditable}
|
||||
>
|
||||
{isLoading ? (
|
||||
<Loader
|
||||
className="animate-spin animate-pulse text-gray-200"
|
||||
size={50}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<div>
|
||||
<Image className="text-gray-200" size={50} />
|
||||
</div>
|
||||
<input
|
||||
className="p-3 rounded-lg file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 hover:file:cursor-pointer file:bg-gray-200 cursor-pointer file:text-gray-500"
|
||||
onChange={handleImageChange}
|
||||
type="file"
|
||||
name=""
|
||||
id=""
|
||||
/>
|
||||
<button
|
||||
className="p-2 px-3 bg-gray-200 rounded-lg text-gray-500 hover:bg-gray-300 transition space-x-2 items-center flex"
|
||||
onClick={handleSubmit}
|
||||
>
|
||||
<UploadIcon></UploadIcon>
|
||||
<p>Submit</p>
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</BlockImageWrapper>
|
||||
)}
|
||||
<FileUploadBlock isEditable={isEditable} isLoading={isLoading} isEmpty={!blockObject} Icon={Image}>
|
||||
<FileUploadBlockInput onChange={handleImageChange} accept="image/*" />
|
||||
<FileUploadBlockButton onClick={handleSubmit} disabled={!image}/>
|
||||
</FileUploadBlock>
|
||||
|
||||
{blockObject && (
|
||||
<Resizable
|
||||
defaultSize={{ width: imageSize.width, height: '100%' }}
|
||||
|
|
@ -145,21 +116,4 @@ function ImageBlockComponent(props: any) {
|
|||
)
|
||||
}
|
||||
|
||||
export default ImageBlockComponent
|
||||
|
||||
const BlockImageWrapper = styled.div`
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
`
|
||||
|
||||
const BlockImage = styled.div`
|
||||
display: flex;
|
||||
|
||||
// center
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
`
|
||||
export default ImageBlockComponent
|
||||
|
|
@ -1,14 +1,14 @@
|
|||
import { NodeViewWrapper } from '@tiptap/react'
|
||||
import React, { useEffect } from 'react'
|
||||
import styled from 'styled-components'
|
||||
import { AlertTriangle, FileText, Loader } from 'lucide-react'
|
||||
import { AlertTriangle, FileText } from 'lucide-react'
|
||||
import { uploadNewPDFFile } from '../../../../../services/blocks/Pdf/pdf'
|
||||
import { UploadIcon } from '@radix-ui/react-icons'
|
||||
import { getActivityBlockMediaDirectory } from '@services/media/media'
|
||||
import { useOrg } from '@components/Contexts/OrgContext'
|
||||
import { useCourse } from '@components/Contexts/CourseContext'
|
||||
import { useEditorProvider } from '@components/Contexts/Editor/EditorContext'
|
||||
import { useLHSession } from '@components/Contexts/LHSessionContext'
|
||||
import { FileUploadBlock, FileUploadBlockButton, FileUploadBlockInput } from '../../FileUploadBlock'
|
||||
|
||||
function PDFBlockComponent(props: any) {
|
||||
const org = useOrg() as any
|
||||
|
|
@ -48,39 +48,11 @@ function PDFBlockComponent(props: any) {
|
|||
|
||||
return (
|
||||
<NodeViewWrapper className="block-pdf">
|
||||
{!blockObject && (
|
||||
<BlockPDFWrapper
|
||||
className="flex items-center space-x-3 py-7 bg-gray-50 rounded-xl text-gray-900 px-3 border-dashed border-gray-150 border-2"
|
||||
contentEditable={isEditable}
|
||||
>
|
||||
{isLoading ? (
|
||||
<Loader
|
||||
className="animate-spin animate-pulse text-gray-200"
|
||||
size={50}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<div>
|
||||
<FileText className="text-gray-200" size={50} />
|
||||
</div>
|
||||
<input
|
||||
className="p-3 rounded-lg file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 hover:file:cursor-pointer file:bg-gray-200 cursor-pointer file:text-gray-500"
|
||||
onChange={handlePDFChange}
|
||||
type="file"
|
||||
name=""
|
||||
id=""
|
||||
/>
|
||||
<button
|
||||
className="p-2 px-3 bg-gray-200 rounded-lg text-gray-500 hover:bg-gray-300 transition space-x-2 items-center flex"
|
||||
onClick={handleSubmit}
|
||||
>
|
||||
<UploadIcon></UploadIcon>
|
||||
<p>Submit</p>
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</BlockPDFWrapper>
|
||||
)}
|
||||
<FileUploadBlock isEditable={isEditable} isLoading={isLoading} isEmpty={!blockObject} Icon={FileText}>
|
||||
<FileUploadBlockInput onChange={handlePDFChange} accept="application/pdf" />
|
||||
<FileUploadBlockButton onClick={handleSubmit} disabled={!pdf}/>
|
||||
</FileUploadBlock>
|
||||
|
||||
{blockObject && (
|
||||
<BlockPDF>
|
||||
<iframe
|
||||
|
|
@ -107,14 +79,6 @@ function PDFBlockComponent(props: any) {
|
|||
|
||||
export default PDFBlockComponent
|
||||
|
||||
const BlockPDFWrapper = styled.div`
|
||||
// center
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
`
|
||||
|
||||
const BlockPDF = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
import { NodeViewWrapper } from '@tiptap/react'
|
||||
import { Loader, Video } from 'lucide-react'
|
||||
import { Video } from 'lucide-react'
|
||||
import React, { useEffect } from 'react'
|
||||
import styled from 'styled-components'
|
||||
import { uploadNewVideoFile } from '../../../../../services/blocks/Video/video'
|
||||
import { getActivityBlockMediaDirectory } from '@services/media/media'
|
||||
import { UploadIcon } from '@radix-ui/react-icons'
|
||||
import { useOrg } from '@components/Contexts/OrgContext'
|
||||
import { useCourse } from '@components/Contexts/CourseContext'
|
||||
import { useEditorProvider } from '@components/Contexts/Editor/EditorContext'
|
||||
import { useLHSession } from '@components/Contexts/LHSessionContext'
|
||||
import { FileUploadBlock, FileUploadBlockButton, FileUploadBlockInput } from '../../FileUploadBlock'
|
||||
|
||||
function VideoBlockComponents(props: any) {
|
||||
const org = useOrg() as any
|
||||
|
|
@ -46,41 +46,15 @@ function VideoBlockComponents(props: any) {
|
|||
|
||||
useEffect(() => { }, [course, org])
|
||||
|
||||
console.log(blockObject)
|
||||
|
||||
return (
|
||||
<NodeViewWrapper className="block-video">
|
||||
{!blockObject && (
|
||||
<BlockVideoWrapper
|
||||
className="flex items-center space-x-3 py-7 bg-gray-50 rounded-xl text-gray-900 px-3 border-dashed border-gray-150 border-2"
|
||||
contentEditable={isEditable}
|
||||
>
|
||||
{isLoading ? (
|
||||
<Loader
|
||||
className="animate-spin animate-pulse text-gray-200"
|
||||
size={50}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<div>
|
||||
<Video className="text-gray-200" size={50} />
|
||||
</div>
|
||||
<input
|
||||
className="p-3 rounded-lg file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 hover:file:cursor-pointer file:bg-gray-200 cursor-pointer file:text-gray-500"
|
||||
onChange={handleVideoChange}
|
||||
type="file"
|
||||
name=""
|
||||
id=""
|
||||
/>
|
||||
<button
|
||||
className="p-2 px-3 bg-gray-200 rounded-lg text-gray-500 hover:bg-gray-300 transition space-x-2 items-center flex"
|
||||
onClick={handleSubmit}
|
||||
>
|
||||
<UploadIcon></UploadIcon>
|
||||
<p>Submit</p>
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</BlockVideoWrapper>
|
||||
)}
|
||||
<NodeViewWrapper className="block-video">
|
||||
<FileUploadBlock isEditable={isEditable} isLoading={isLoading} isEmpty={!blockObject} Icon={Video}>
|
||||
<FileUploadBlockInput onChange={handleVideoChange} accept="video/*" />
|
||||
<FileUploadBlockButton onClick={handleSubmit} disabled={!video}/>
|
||||
</FileUploadBlock>
|
||||
|
||||
{blockObject && (
|
||||
<BlockVideo>
|
||||
<video
|
||||
|
|
@ -100,16 +74,6 @@ function VideoBlockComponents(props: any) {
|
|||
</NodeViewWrapper>
|
||||
)
|
||||
}
|
||||
const BlockVideoWrapper = styled.div`
|
||||
border: ${(props) =>
|
||||
props.contentEditable ? '2px dashed #713f1117' : 'none'};
|
||||
|
||||
// center
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
`
|
||||
|
||||
const BlockVideo = styled.div`
|
||||
display: flex;
|
||||
|
|
|
|||
99
apps/web/components/Objects/Editor/FileUploadBlock.tsx
Normal file
99
apps/web/components/Objects/Editor/FileUploadBlock.tsx
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
import { Loader } from 'lucide-react'
|
||||
import { UploadIcon } from '@radix-ui/react-icons'
|
||||
import React, {
|
||||
ButtonHTMLAttributes,
|
||||
HTMLAttributes,
|
||||
InputHTMLAttributes,
|
||||
} from 'react'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const FileUploadBlockInput: React.FC<InputHTMLAttributes<HTMLInputElement>> = ({
|
||||
onChange,
|
||||
className,
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<input
|
||||
className={cn(
|
||||
'p-3 rounded-lg file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 hover:file:cursor-pointer file:file:bg-gray-200 cursor-pointer file:text-gray-500',
|
||||
className
|
||||
)}
|
||||
onChange={onChange}
|
||||
type="file"
|
||||
required
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const FileUploadBlockButton: React.FC<
|
||||
ButtonHTMLAttributes<HTMLButtonElement>
|
||||
> = ({ onClick, className, ...props }) => {
|
||||
return (
|
||||
<button
|
||||
className={cn(
|
||||
'p-2 px-3 bg-gray-200 rounded-lg text-gray-500 enabled:hover:bg-gray-300 transition space-x-2 items-center flex disabled:opacity-50 disabled:cursor-not-allowed',
|
||||
className
|
||||
)}
|
||||
onClick={onClick}
|
||||
{...props}
|
||||
>
|
||||
<UploadIcon />
|
||||
<p>Submit</p>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
interface UploadBlockComponentProps extends HTMLAttributes<HTMLDivElement> {
|
||||
isLoading: boolean
|
||||
isEditable: boolean
|
||||
isEmpty: boolean
|
||||
Icon: any
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
||||
function FileUploadBlock({
|
||||
isLoading,
|
||||
isEditable,
|
||||
isEmpty,
|
||||
Icon,
|
||||
children,
|
||||
}: UploadBlockComponentProps) {
|
||||
if (isLoading)
|
||||
return <Loader className="animate-spin text-gray-200" size={50} />
|
||||
|
||||
if (!isEditable && isEmpty)
|
||||
return (
|
||||
<div className="flex items-center gap-5">
|
||||
{<Icon className="text-gray-200" size={50} />}
|
||||
<p>No file available for preview.</p>
|
||||
</div>
|
||||
)
|
||||
|
||||
return (
|
||||
<>
|
||||
{<Icon className="text-gray-200" size={50} />}
|
||||
{children}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function FileUploadBlockWrapper({
|
||||
children,
|
||||
isEmpty,
|
||||
...props
|
||||
}: UploadBlockComponentProps) {
|
||||
return (
|
||||
isEmpty && (
|
||||
<div className="flex items-center justify-center space-x-3 py-7 bg-gray-50 rounded-xl text-gray-900 px-3 border-dashed border-gray-150 border-2 text-sm" contentEditable={false}>
|
||||
<FileUploadBlock isEmpty {...props}>{children}</FileUploadBlock>
|
||||
</div>
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
FileUploadBlockWrapper as FileUploadBlock,
|
||||
FileUploadBlockInput,
|
||||
FileUploadBlockButton,
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue