Merge pull request #12 from severo/4-fix-file-size

fix file size

Author: severo

src/components/viewers/ContentHeader.tsx

@@ -1,8 +1,16 @@
 import React, { ReactNode } from 'react'
 import { getFileSize } from '../../files.js'
 
+export interface ContentSize {
+  fileSize?: number
+}
+
+export interface TextContent extends ContentSize {
+  text: string
+}
+
 interface ContentHeaderProps {
-  content?: { fileSize?: number }
+  content?: ContentSize
   headers?: ReactNode
   children?: ReactNode
 }

src/components/viewers/ImageView.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import ContentHeader, { parseFileSize } from './ContentHeader.js'
+import ContentHeader, { ContentSize, parseFileSize } from './ContentHeader.js'
 
 enum LoadingState {
   NotLoaded,
@@ -12,9 +12,8 @@ interface ViewerProps {
   setError: (error: Error) => void
 }
 
-interface Content {
+interface Content extends ContentSize {
   dataUri: string
-  fileSize?: number
 }
 
 /**

src/components/viewers/MarkdownView.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { useEffect, useState } from 'react'
 import Markdown from '../Markdown.js'
-import ContentHeader from './ContentHeader.js'
+import ContentHeader, { parseFileSize, TextContent } from './ContentHeader.js'
 
 enum LoadingState {
   NotLoaded,
@@ -19,7 +19,7 @@ interface ViewerProps {
  */
 export default function MarkdownView({ file, setError }: ViewerProps) {
   const [loading, setLoading] = useState(LoadingState.NotLoaded)
-  const [text, setText] = useState<string | undefined>()
+  const [content, setContent] = useState<TextContent>()
 
   const isUrl = file.startsWith('http://') || file.startsWith('https://')
   const url = isUrl ? file : '/api/store/get?key=' + file
@@ -29,7 +29,8 @@ export default function MarkdownView({ file, setError }: ViewerProps) {
       try {
         const res = await fetch(url)
         const text = await res.text()
-        setText(text)
+        const fileSize = parseFileSize(res.headers) ?? text.length
+        setContent({ text, fileSize })
       } catch (error) {
         setError(error as Error)
       } finally {
@@ -45,7 +46,7 @@ export default function MarkdownView({ file, setError }: ViewerProps) {
     })
   }, [url, loading, setError])
 
-  return <ContentHeader content={{ fileSize: text?.length }}>
-    <Markdown className='markdown' text={text || ''} />
+  return <ContentHeader content={content}>
+    <Markdown className='markdown' text={content?.text ?? ''} />
   </ContentHeader>
 }

src/components/viewers/ParquetView.tsx

@@ -2,7 +2,7 @@ import HighTable, { DataFrame, rowCache } from 'hightable'
 import React, { useCallback, useEffect, useState } from 'react'
 import { parquetDataFrame } from '../../tableProvider.js'
 import { Spinner } from '../Layout.js'
-import ContentHeader from './ContentHeader.js'
+import ContentHeader, {ContentSize} from './ContentHeader.js'
 import { asyncBufferFromUrl, parquetMetadataAsync } from 'hyparquet'
 
 enum LoadingState {
@@ -17,9 +17,8 @@ interface ViewerProps {
   setError: (error: Error) => void
 }
 
-interface Content {
+interface Content extends ContentSize {
   dataframe: DataFrame
-  fileSize?: number
 }
 
 /**

src/components/viewers/TextView.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react'
 import React from 'react'
 import { Spinner } from '../Layout.js'
-import ContentHeader from './ContentHeader.js'
+import ContentHeader, { parseFileSize, TextContent } from './ContentHeader.js'
 
 enum LoadingState {
   NotLoaded,
@@ -20,7 +20,7 @@ interface ViewerProps {
  */
 export default function TextView({ file, setError }: ViewerProps) {
   const [loading, setLoading] = useState(LoadingState.NotLoaded)
-  const [text, setText] = useState<string | undefined>()
+  const [content, setContent] = useState<TextContent>()
   const textRef = useRef<HTMLPreElement>(null)
 
   const isUrl = file.startsWith('http://') || file.startsWith('https://')
@@ -32,7 +32,8 @@ export default function TextView({ file, setError }: ViewerProps) {
       try {
         const res = await fetch(url)
         const text = await res.text()
-        setText(text)
+        const fileSize = parseFileSize(res.headers) ?? text.length
+        setContent({ text, fileSize })
       } catch (error) {
         setError(error as Error)
       } finally {
@@ -49,13 +50,13 @@ export default function TextView({ file, setError }: ViewerProps) {
   }, [file, loading, setError])
 
   const headers = <>
-    <span>{text ? newlines(text) : 0} lines</span>
+    <span>{newlines(content?.text ?? "")} lines</span>
   </>
 
   // Simple text viewer
-  return <ContentHeader content={{ fileSize: text?.length }} headers={headers}>
+  return <ContentHeader content={content} headers={headers}>
     <code className='text' ref={textRef}>
-      {text}
+      {content?.text}
     </code>
 
     {loading && <Spinner className='center' />}