simple implemetation for create dir

src/components/CreateDirButton.tsx

@@ -0,0 +1,38 @@
+import React from "react"
+import { useState } from "react"
+
+interface Props {
+    onPressed?: (dirName: string)=>void
+}
+
+const CreateDirButton: React.FC<Props> = (props) => {
+    
+	const [name,setName] = useState("")
+
+	return (
+		<div>
+			<button>
+                Create Dir
+			</button>
+			<div>
+				<input
+					type="text"
+					onChange={(e)=>{
+						setName(e.target.value)
+					}}
+					value={name}
+				/>
+				<button 
+					onClick={()=>{
+						props.onPressed?.(name)
+						setName("")
+					}}
+				>
+                    Create
+				</button>
+			</div>
+		</div>
+	)
+}
+
+export default CreateDirButton

src/components/FileBrowser.tsx

@@ -2,8 +2,9 @@ import React from "react"
 import { useState } from "react"
 import { useContextMenu } from "react-contexify"
 import uploadFile from "../functions/uploadFile"
-import { useCopyMutation, useDeleteFileMutation, useMoveMutation, useOpenDirQuery } from "../generated/graphql"
+import { useCopyMutation, useCreateDirMutation, useDeleteFileMutation, useMoveMutation, useOpenDirQuery } from "../generated/graphql"
 import Breadcrum from "./Breadcrum"
+import CreateDirButton from "./CreateDirButton"
 import DragAndDrop from "./DragAndDrop"
 import FileBrowserContextMenu, { Action, CONTEXT_MENU_DIR, CONTEXT_MENU_FILE } from "./FileBrowserContextMenu"
 import FileBrowserElement from "./FileBrowserElement"
@@ -21,6 +22,7 @@ const FileBrowser: React.FC = () => {
 	const [deleteMutation] = useDeleteFileMutation()
 	const [copyMutation] = useCopyMutation()
 	const [moveMutation] = useMoveMutation()
+	const [createDirMutation] = useCreateDirMutation()
 
 	const { show: showFileContext } = useContextMenu({
 		id: CONTEXT_MENU_FILE,
@@ -106,6 +108,12 @@ const FileBrowser: React.FC = () => {
 				<FileUploadButton 
 					onUpload={(files)=>handleDrop(files)}
 				/>
+				<CreateDirButton 
+					onPressed={async (dirName)=>{
+						await createDirMutation({variables:{path:dirName}})
+						refetchDir()
+					}}
+				/>
 				<Breadcrum path={path} onDirClick={(newPath)=>{
 					setPath(newPath)
 				}}/>

src/functions/sizeToReadable.ts

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

src/generated/graphql.tsx

@@ -43,6 +43,7 @@ export type File = {
 export type RootMutation = {
   __typename?: "RootMutation";
   copy?: Maybe<File>;
+  createDir: Directory;
   delete?: Maybe<Scalars["String"]>;
   move?: Maybe<File>;
 };
@@ -54,14 +55,19 @@ export type RootMutationCopyArgs = {
 };
 
 
+export type RootMutationCreateDirArgs = {
+  path: Scalars["ID"];
+};
+
+
 export type RootMutationDeleteArgs = {
   id: Scalars["ID"];
 };
 
 
 export type RootMutationMoveArgs = {
-  dest: Scalars["ID"];
   src: Scalars["ID"];
+  dest: Scalars["ID"];
 };
 
 export type RootQuery = {
@@ -100,6 +106,19 @@ export type CopyMutation = (
   )> }
 );
 
+export type CreateDirMutationVariables = Exact<{
+  path: Scalars["ID"];
+}>;
+
+
+export type CreateDirMutation = (
+  { __typename?: "RootMutation" }
+  & { createDir: (
+    { __typename?: "Directory" }
+    & Pick<Directory, "id">
+  ) }
+);
+
 export type DeleteFileMutationVariables = Exact<{
   id: Scalars["ID"];
 }>;
@@ -188,6 +207,39 @@ export function useCopyMutation(baseOptions?: Apollo.MutationHookOptions<CopyMut
 export type CopyMutationHookResult = ReturnType<typeof useCopyMutation>;
 export type CopyMutationResult = Apollo.MutationResult<CopyMutation>;
 export type CopyMutationOptions = Apollo.BaseMutationOptions<CopyMutation, CopyMutationVariables>;
+export const CreateDirDocument = gql`
+    mutation createDir($path: ID!) {
+  createDir(path: $path) {
+    id
+  }
+}
+    `
+export type CreateDirMutationFn = Apollo.MutationFunction<CreateDirMutation, CreateDirMutationVariables>;
+
+/**
+ * __useCreateDirMutation__
+ *
+ * To run a mutation, you first call `useCreateDirMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useCreateDirMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [createDirMutation, { data, loading, error }] = useCreateDirMutation({
+ *   variables: {
+ *      path: // value for 'path'
+ *   },
+ * });
+ */
+export function useCreateDirMutation(baseOptions?: Apollo.MutationHookOptions<CreateDirMutation, CreateDirMutationVariables>) {
+	const options = {...defaultOptions, ...baseOptions}
+	return Apollo.useMutation<CreateDirMutation, CreateDirMutationVariables>(CreateDirDocument, options)
+}
+export type CreateDirMutationHookResult = ReturnType<typeof useCreateDirMutation>;
+export type CreateDirMutationResult = Apollo.MutationResult<CreateDirMutation>;
+export type CreateDirMutationOptions = Apollo.BaseMutationOptions<CreateDirMutation, CreateDirMutationVariables>;
 export const DeleteFileDocument = gql`
     mutation deleteFile($id: ID!) {
   delete(id: $id)

src/graphql/createDir.graphql

@@ -0,0 +1,5 @@
+mutation createDir($path: ID!){
+  createDir(path:$path){
+    id
+  }
+}