added last modified field

codegen.yml

@@ -11,4 +11,6 @@ generates:
       - "typescript-operations"
       - "typescript-react-apollo"
     config:
-      withHooks: true
+      withHooks: true
+      scalars:
+        DateTime: string

src/components/DirectoryElement.tsx

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

src/components/FileBrowser.tsx

@@ -1,5 +1,6 @@
 import React from "react"
 import { useState } from "react"
+import uploadFile from "../functions/uploadFile"
 import { useOpenDirQuery } from "../generated/graphql"
 import Breadcrum from "./Breadcrum"
 import DragAndDrop from "./DragAndDrop"
@@ -17,17 +18,22 @@ const FileBrowser: React.FC = () => {
 		}
 	})
 
-	function handleDrop(files:FileList) {
+	async function handleDrop(files:FileList) {
+		const wait: Promise<boolean>[] = []
 		for (let i = 0; i < files.length; i++) {
 			const file = files[i]
-			console.debug(file) // TODO
+			wait.push(uploadFile(file, path + file.name))
 		}
+
+		await Promise.all(wait)
 	}
 
 	return (
 		<div>
 			<DragAndDrop
-				handleDrop={handleDrop}
+				handleDrop={async (files)=>{
+					await handleDrop(files)
+				}}
 			>
 				<Breadcrum path={path} onDirClick={(newPath)=>{
 					setPath(newPath)
@@ -40,6 +46,7 @@ const FileBrowser: React.FC = () => {
 						<thead>
 							<tr>
 								<th>Name</th>
+								<th>Last Modified</th>
 								<th>Size</th>
 							</tr>
 						</thead>

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) => {
 			<td>
 				📄 {props.file.name}
 			</td>
+			<td>
+				{dateFormat(props.file.lastModified)}
+			</td>
 			<td>
 				{sizeToReadable(props.file.size)}
 			</td>
+
 		</>
 	)
 }

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

src/functions/uploadFile.ts

@@ -0,0 +1,17 @@
+async function uploadFile(file:File,id: string): Promise<boolean> {
+	
+	console.debug(file)
+
+
+	const res = await fetch(`/api/file?${new URLSearchParams({id:id}).toString()}`,{
+		method: "POST",
+		headers: {
+			"Content-Type": file.type
+		},
+		body: file
+	})
+
+	return res.status == 200
+}
+
+export default uploadFile

src/generated/graphql.tsx

@@ -12,8 +12,11 @@ export type Scalars = {
   Boolean: boolean;
   Int: number;
   Float: number;
+  /** DateTime is a DateTime in ISO 8601 format */
+  DateTime: string;
 };
 
+
 /** Represents a directory */
 export type Directory = {
   __typename?: "Directory";
@@ -31,6 +34,7 @@ export type File = {
   etag?: Maybe<Scalars["String"]>;
   /** The uniqe ID of the file. Represents the path and the s3 key. */
   id: Scalars["ID"];
+  lastModified?: Maybe<Scalars["DateTime"]>;
   name?: Maybe<Scalars["String"]>;
   parent?: Maybe<Directory>;
   size: Scalars["Int"];
@@ -80,7 +84,7 @@ export type OpenDirQuery = (
   { __typename?: "RootQuery" }
   & { files: Array<Maybe<(
     { __typename?: "File" }
-    & Pick<File, "id" | "name" | "size">
+    & Pick<File, "id" | "name" | "size" | "lastModified">
   )>>, directorys: Array<Maybe<(
     { __typename?: "Directory" }
     & Pick<Directory, "id" | "name">
@@ -133,6 +137,7 @@ export const OpenDirDocument = gql`
     id
     name
     size
+    lastModified
   }
   directorys(path: $path) {
     id

src/graphql/openDir.graphql

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