rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor/fix: lift file select logic into its own component block

Browse source
This commit is contained in:
Chris Holland 2024-10-12 13:55:13 -07:00
parent eedc5ab329
commit 69468d34c8
No known key found for this signature in database
GPG key ID: 68B0A864B1B0A0D2
4 changed files with 124 additions and 143 deletions
Download patch file Download diff file Expand all files Collapse all files

62
apps/web/components/Objects/Editor/Extensions/Image/ImageBlockComponent.tsx
View file

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

50
apps/web/components/Objects/Editor/Extensions/PDF/PDFBlockComponent.tsx
View file

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

56
apps/web/components/Objects/Editor/Extensions/Video/VideoBlockComponent.tsx
View file

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