added file size

src/components/DirectoryElement.tsx

@@ -10,10 +10,10 @@ const DirectoryElement: React.FC<Props> = (props) => {
 	return (
 		<>
 			<td>
-				📂
+				📂 {props.dir.name}
 			</td>
 			<td>
-				{props.dir.name}
+				
 			</td>
 		</>
 	)

src/components/FileBrowser.tsx

@@ -16,15 +16,14 @@ const FileBrowser: React.FC = () => {
 	return (
 		<div>
 			<Breadcrum path={path} onDirClick={(newPath)=>{
-				console.debug(newPath)
 				setPath(newPath)
 			}}/>
 			<div>
 				<table className="table table-striped table-hover">
 					<thead>
 						<tr>
-							<th>Icon</th>
 							<th>Name</th>
+							<th>Size</th>
 						</tr>
 					</thead>
 					<tbody>

src/components/FileElement.tsx

@@ -1,6 +1,7 @@
 import React from "react"
 import PropTypes from "prop-types"
 import { File } from "../generated/graphql"
+import sizeToReadable from "../functions/sizeToReadable"
 
 interface Props {
     file: File
@@ -10,10 +11,10 @@ const FileElement: React.FC<Props> = (props) => {
 	return (
 		<>
 			<td>
-				📄
+				📄 {props.file.name}
 			</td>
 			<td>
-				{props.file.name}
+				{sizeToReadable(props.file.size)}
 			</td>
 		</>
 	)

src/functions/sizeToReadable.ts

@@ -0,0 +1,7 @@
+function sizeToReadable(size: number): string {
+	const i = Math.floor(Math.log(size) / Math.log(1024))
+	return (size / Math.pow(1024, i)).toFixed(2) + " " + ["B", "kB", "MB", "GB", "TB"][i]
+
+}
+
+export default sizeToReadable

src/generated/graphql.tsx

@@ -33,7 +33,7 @@ export type File = {
   id: Scalars["ID"];
   name?: Maybe<Scalars["String"]>;
   parent?: Maybe<Directory>;
-  size?: Maybe<Scalars["Int"]>;
+  size: Scalars["Int"];
 };
 
 export type RootQuery = {
@@ -67,7 +67,7 @@ export type OpenDirQuery = (
   { __typename?: "RootQuery" }
   & { files: Array<Maybe<(
     { __typename?: "File" }
-    & Pick<File, "id" | "name">
+    & Pick<File, "id" | "name" | "size">
   )>>, directorys: Array<Maybe<(
     { __typename?: "Directory" }
     & Pick<Directory, "id" | "name">
@@ -80,6 +80,7 @@ export const OpenDirDocument = gql`
   files(path: $path) {
     id
     name
+    size
   }
   directorys(path: $path) {
     id

src/graphql/openDir.graphql

@@ -2,6 +2,7 @@ query openDir($path: String!) {
   files(path:$path){
     id
     name
+    size
   }
   directorys(path: $path){
     id