diff --git a/src/components/DirectoryElement.tsx b/src/components/DirectoryElement.tsx index e8bf59a..4007ac6 100644 --- a/src/components/DirectoryElement.tsx +++ b/src/components/DirectoryElement.tsx @@ -13,7 +13,8 @@ const DirectoryElement: React.FC = (props) => { 📂 {props.dir.name} - + + ) diff --git a/src/components/FileBrowser.tsx b/src/components/FileBrowser.tsx index 0355bf4..2c11421 100644 --- a/src/components/FileBrowser.tsx +++ b/src/components/FileBrowser.tsx @@ -46,6 +46,7 @@ const FileBrowser: React.FC = () => { Name + Last Modified Size diff --git a/src/components/FileElement.tsx b/src/components/FileElement.tsx index 017d7e6..7b43f0d 100644 --- a/src/components/FileElement.tsx +++ b/src/components/FileElement.tsx @@ -2,6 +2,7 @@ import React from "react" import PropTypes from "prop-types" import { File } from "../generated/graphql" import sizeToReadable from "../functions/sizeToReadable" +import dateFormat from "../functions/dateFomat" interface Props { file: File @@ -13,9 +14,13 @@ const FileElement: React.FC = (props) => { 📄 {props.file.name} + + {dateFormat(props.file.lastModified)} + {sizeToReadable(props.file.size)} + ) } diff --git a/src/functions/dateFomat.ts b/src/functions/dateFomat.ts new file mode 100644 index 0000000..aa45778 --- /dev/null +++ b/src/functions/dateFomat.ts @@ -0,0 +1,19 @@ +/** + * Transforms the DateTime given from the api to a human readable format + * @param date Date in ISO 8601 fomat + */ +function dateFormat(date:string | undefined | null): string { + if (!date) return "" + + const parsedDate = new Date(date) + const now = new Date() + + if (parsedDate.toDateString() === now.toDateString()){ + return parsedDate.toLocaleTimeString() + }else{ + return parsedDate.toLocaleDateString() + } + +} + +export default dateFormat diff --git a/src/graphql/openDir.graphql b/src/graphql/openDir.graphql index 459e274..97d7478 100644 --- a/src/graphql/openDir.graphql +++ b/src/graphql/openDir.graphql @@ -3,6 +3,7 @@ query openDir($path: String!) { id name size + lastModified } directorys(path: $path){ id