Feature/sort file view (#28) (#29)

* Added Sort function for File View

* Connected SortFiles logic to UI

* Fixed warning

* Fixed some old code smells

* Very important feature

Co-authored-by: Gimleux <[email protected]>

Author: qvalentin

webapp_frontend/src/background/api/auth.ts

@@ -7,7 +7,7 @@ import {UserState} from "../redux/actions/userTypes";
 import store from "../redux/store";
 import {addAccessToken, addRefreshToken, checkedCookies, removeTokens} from "../redux/actions/tokens";
 import {addUser} from "../redux/actions/user";
-import {AccessToken, RemoveTokens, TokensState} from "../redux/actions/tokenTypes";
+import {AccessToken} from "../redux/actions/tokenTypes";
 import {deleteCookie, getCookie, setCookie} from "../methods/cookies";
 
 
@@ -71,7 +71,7 @@ console.log("[Auth] loginWithUsernameAndPassword")
 export const getAccessTokenWithRefreshToken = () => {
     console.log("getAccessTokenWithRefreshToken")
 
-    let refreshToken: string|null = (store.getState().tokens as TokensState).refreshToken;
+    let refreshToken: string|null = (store.getState().tokens).refreshToken;
 
     let config = {
         headers: {
@@ -92,7 +92,7 @@ export const getAccessTokenWithRefreshToken = () => {
 
         })
         .catch(((error) => {
-            store.dispatch(removeTokens()as RemoveTokens);
+            store.dispatch(removeTokens());
 
             console.log(error)
             //you probably want to notify the user, maybe with a toast or similar

webapp_frontend/src/background/methods/ObjectKeysTS.ts

@@ -0,0 +1,9 @@
+// `keyof any` is short for "string | number | symbol"
+// since an object key can be any of those types, our key can too
+// in TS 3.0+, putting just "string" raises an error
+// since an object key can be any of those types, our key can too
+// in TS 3.0+, putting just "string" raises an error
+// https://dev.to/kingdaro/indexing-objects-in-typescript-1cgi
+export function hasKey<O>(obj: O, key: keyof any): key is keyof O {
+    return key in obj
+}

webapp_frontend/src/background/methods/objects/compareObjects.ts renamed to webapp_frontend/src/background/methods/compareObjects.ts

@@ -35,7 +35,7 @@ const connector = connect(mapState, mapDispatch)
 type PropsFromRedux = ConnectedProps<typeof connector>
 
 // this defines the component props and also adds the redux imported props
-type Props = PropsFromRedux & {}
+type Props = PropsFromRedux
 
 function App(props: Props): ReactElement {
 

webapp_frontend/src/components/App.tsx

@@ -3,7 +3,7 @@ import React, {ReactElement} from "react";
 export default function PermanentAssets(): ReactElement {
     return (
         <div>
-            <audio id={"audio_viking"} preload={"metadata"}>
+            <audio id={"audio_viking"} preload={"metadata"} loop>
                 <source src="/assets/audio/2017-04-01_-_Viking_Ship_-_David_Fesliyan.mp3"/>
             </audio>
         </div>

webapp_frontend/src/components/basicElements/PermanentAssets.tsx

@@ -7,6 +7,7 @@ import FileListFolder from "./FileListFolder";
 import FileListFile from "./FileListFile";
 import {FilesBreadcrumb} from "./FilesBreadcrumb";
 import {filesBaseUrl} from "./Filesystem";
+import {sortObjectsInArrayByProperty} from "./sortFilesAndFolders";
 
 
 type Props = {}
@@ -19,6 +20,8 @@ export default function FileList(props: Props): ReactElement {
     const [files, setFiles] = useState<File[] | null>(null)
     const [folders, setFolders] = useState<Folder[] | null>(null)
     const [error, setError] = useState<string>("");
+    const [sortedBy, setSortedBy] = useState<keyof File | keyof Folder | null>(null)
+    const [sortIncreasing, setSortIncreasing] = useState<boolean>(false)
 
 
     console.log("[FileList path]" + path)
@@ -33,8 +36,8 @@ export default function FileList(props: Props): ReactElement {
                         setError("")
                     }
                 )
-                .catch(error => {
-                    setError(error.response?.data.message)
+                .catch(err => {
+                    setError(err.response?.data.message)
                     setFiles([])
                     setFolders([])
                 });
@@ -46,7 +49,27 @@ export default function FileList(props: Props): ReactElement {
 
     }, [path, location]);
 
-
+    function handleSortClick(property: keyof File | keyof Folder) {
+        if (sortedBy === property) setSortIncreasing(!sortIncreasing);
+        else {
+            setSortedBy(property);
+            setSortIncreasing(true)
+        }
+        setFolders(sortObjectsInArrayByProperty(folders, property, sortIncreasing));
+        setFiles(sortObjectsInArrayByProperty(files, property, sortIncreasing));
+    }
+
+// console.log("--------------------------------------------------------------------------------------")
+//     console.log(folders)
+//     let foldersa = folders ? [...folders] : []
+//     let filesa = files ? [...files] : []
+//     let sortedFoldersa = sortObjectsInArrayByProperty(foldersa, "name")
+//     let sortedFilesa = sortObjectsInArrayByProperty(filesa, "name")
+//     console.log(sortedFoldersa)
+//     console.log("---------")
+//     console.log(filesa)
+//     console.log()
+// console.log("--------------------------------------------------------------------------------------")
 
 
     return (
@@ -56,13 +79,13 @@ export default function FileList(props: Props): ReactElement {
                 <Col xs={1}> <Form.Group controlId="formBasicCheckbox">
                     <Form.Check type="checkbox" onChange={() => console.log(`selected all files` /*TODO*/)}/>
                 </Form.Group></Col>
-                <Col xs={1}>{"Type"}</Col>
+                <Col xs={1} onClick={() => handleSortClick("type")}>{"Type"}</Col>
                 <Col xs={1}>{}</Col>
                 <Col xs={1}>{"Share"}</Col>
-                <Col xs={3}>{"Name"}</Col>
-                <Col xs={3}>{"Owner"}</Col>
-                <Col xs={1}>{"Last changes"}</Col>
-                <Col xs={1}>{"Size"}</Col>
+                <Col xs={3} onClick={() => handleSortClick("name")}>{"Name"}</Col>
+                <Col xs={3} onClick={() => handleSortClick("createdByUserId")}>{"Owner"}</Col>
+                <Col xs={1} onClick={() => handleSortClick("lastUpdated")}>{"Last changes"}</Col>
+                <Col xs={1} onClick={() => handleSortClick("size")}>{"Size"}</Col>
             </Row>
             <hr/>
             <Row>

webapp_frontend/src/components/pages/filesytem/FileList.tsx

@@ -34,8 +34,6 @@ export interface FileListEntity {
     type: string;
     isFolder: boolean
     path?: string
-
-
 }
 
 export default function FileListItem(props: Props): ReactElement {

webapp_frontend/src/components/pages/filesytem/FileListItem.tsx

@@ -14,7 +14,7 @@ export function FilesBreadcrumb(props: Props): ReactElement {
     return (
         <Breadcrumb>
         <Link className={'breadcrumb-item active'} to={filesBaseUrl + '/'} onClick={() => props.setPath("/")}>root </Link>
-        {props.path.split('/').filter((s: String) => s).map((folder: string, i: number) => {
+        {props.path.split('/').filter((s: string) => s).map((folder: string, i: number) => {
             return (<Link className={'breadcrumb-item active'} to={filesBaseUrl + props.path.split('/').slice(0, i + 2).join("/")}
                           onClick={() => props.setPath(props.path.split('/').slice(0, i + 2).join("/"))} key={i}>{folder} </Link>)
         })}

webapp_frontend/src/components/pages/filesytem/FilesBreadcrumb.tsx

@@ -0,0 +1,48 @@
+import {Folder, PermissionSet} from "../../../background/api/filesystemTypes";
+
+function mergeObjectArraysByProperty(leftArray: any, rightArray: any, propertyName: keyof File | keyof Folder, sortIncreasing: boolean): File[] & Folder[] {
+    let arr: any = []
+    // Break out of loop if any one of the array gets empty
+    while (leftArray.length && rightArray.length) {
+        // Pick the smaller among the smallest element of left and right sub arrays
+
+        if (rightArray[0] === undefined || rightArray[0][propertyName] === undefined || !rightArray[0].hasOwnProperty(propertyName)) {
+            let help: File | Folder | undefined = leftArray.shift();
+            if (help) arr.push(help)
+            continue;
+        } else if (leftArray[0] === undefined || leftArray[0][propertyName] === undefined || !leftArray[0].hasOwnProperty(propertyName)) {
+            let help: (File | Folder) | undefined = rightArray.shift();
+            if (help) arr.push(help)
+            continue;
+        }
+
+        //at this point both elements should have property
+        let firstLeftElement: string | number | boolean | PermissionSet | undefined = leftArray[0][propertyName];
+        let firstRightElement: string | number | boolean | PermissionSet | undefined = rightArray[0][propertyName];
+        if (typeof firstLeftElement === "string") firstLeftElement = firstLeftElement.toLowerCase();
+        if (typeof firstRightElement === "string") firstRightElement = firstRightElement.toLowerCase();
+        if (
+            (firstLeftElement !== undefined && firstRightElement !== undefined && firstLeftElement <= firstRightElement && sortIncreasing)
+        ) {
+            let help: (File | Folder) | undefined = leftArray.shift();
+            if (help) arr.push(help)
+        } else {
+            let help: (File | Folder) | undefined = rightArray.shift();
+            if (help) arr.push(help)
+        }
+    }
+
+    // Concatenating leftover elements
+    return [...arr, ...leftArray, ...rightArray]
+}
+
+export function sortObjectsInArrayByProperty(originalArray: any, propertyName: keyof File | keyof Folder, sortIncreasing: boolean): any {
+    const array = [...originalArray]
+    if (!array || array.length <= 1) return array ?? [];
+
+    const half = array.length / 2
+    const left = array.splice(0, half)
+
+
+    return mergeObjectArraysByProperty(sortObjectsInArrayByProperty(left, propertyName, sortIncreasing), sortObjectsInArrayByProperty(array, propertyName, sortIncreasing), propertyName, sortIncreasing);
+}