Merge pull request #336 from chrishollandaise/fix/upload-file-block-component

[Fix & Refactor] [Editor] Patches several file input edge cases, refactors upload components to use FileUploadBlock

apps/web/components/Objects/Editor/Extensions/Image/ImageBlockComponent.tsx

@@ -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 && (
+     <FileUploadBlock isEditable={isEditable} isLoading={isLoading} isEmpty={!blockObject} Icon={Image}>
-        <BlockImageWrapper
+        <FileUploadBlockInput onChange={handleImageChange} accept="image/*" />
-          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"
+        <FileUploadBlockButton onClick={handleSubmit} disabled={!image}/>
-          contentEditable={isEditable}
+      </FileUploadBlock>
-        >
+      
-          {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>
-      )}
       {blockObject && (
         <Resizable
           defaultSize={{ width: imageSize.width, height: '100%' }}
@@ -145,21 +116,4 @@ function ImageBlockComponent(props: any) {
   )
 }
 
-export default ImageBlockComponent
+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;
-`

apps/web/components/Objects/Editor/Extensions/PDF/PDFBlockComponent.tsx

@@ -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 && (
+      <FileUploadBlock isEditable={isEditable} isLoading={isLoading} isEmpty={!blockObject} Icon={FileText}>
-        <BlockPDFWrapper
+        <FileUploadBlockInput onChange={handlePDFChange} accept="application/pdf" />
-          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"
+        <FileUploadBlockButton onClick={handleSubmit} disabled={!pdf}/>
-          contentEditable={isEditable}
+      </FileUploadBlock>
-        >
+      
-          {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>
-      )}
       {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;

apps/web/components/Objects/Editor/Extensions/Video/VideoBlockComponent.tsx

@@ -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">
+    <NodeViewWrapper className="block-video">    
-      {!blockObject && (
+      <FileUploadBlock isEditable={isEditable} isLoading={isLoading} isEmpty={!blockObject} Icon={Video}>
-        <BlockVideoWrapper
+        <FileUploadBlockInput onChange={handleVideoChange} accept="video/*" />
-          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"
+        <FileUploadBlockButton onClick={handleSubmit} disabled={!video}/>
-          contentEditable={isEditable}
+      </FileUploadBlock>
-        >
+
-          {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>
-      )}
       {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;

apps/web/components/Objects/Editor/FileUploadBlock.tsx

@@ -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,
+}