[WEB-31] Bug renaming reordering issue (and also WEB-68) (#377)

* temp fix to rename input field not updating after 1st refresh

* possible workaround of having files displayed in alphabetical order

* added code to add priority to folders

* capitalised type names in comparator

* removed debugging console statements

* removed more dangling debugging comments

* revereded renameFileEntity to its original format

---------

Co-authored-by: Josh Ramos <josh.ramos@student.unsw.edu.au>

Author: josh-ramos-22

frontend/src/packages/dashboard/components/FileRenderer/FolderContainer.tsx

@@ -54,7 +54,6 @@ export default function FolderContainer({
     console.log(id);
     dispatch(traverseIntoFolder(id));
   };
-
   return (
     <IconContainer>
       <FolderIcon

frontend/src/packages/dashboard/components/FileRenderer/Renamable.tsx

@@ -17,7 +17,7 @@ interface Props {
 
 export default function Renamable({ name, id }: Props) {
   const [toggle, setToggle] = useState(true);
-  const [inputName, setInputName] = useState(name);
+  const [inputName, setInputName] = useState<string>(name);
 
   const dispatch = useDispatch();
 
@@ -30,7 +30,12 @@ export default function Renamable({ name, id }: Props) {
   return (
     <>
       {toggle ? (
-        <div onDoubleClick={() => setToggle(false)}>{name}</div>
+        <div onDoubleClick={() => {
+          setToggle(false);
+          // required as browser doesn't update inputName
+          // after first refresh of page after renaming
+          setInputName(name); 
+        }}>{name}</div>
       ) : (
         <input
           style={{

frontend/src/packages/dashboard/components/FileRenderer/Renderer.tsx

@@ -4,6 +4,7 @@ import { RootState } from 'src/redux-state/reducers';
 import { folderSelectors } from '../../state/folders/index';
 import FileContainer from './FileContainer';
 import FolderContainer from './FolderContainer';
+import { FileEntity } from '../../state/folders/types';
 
 type Props = {
   selectedFile: string | null;
@@ -17,8 +18,29 @@ export default function Renderer({ selectedFile, setSelectedFile }: Props) {
 
   const folderItems = folders.items;
 
-  const renderItems = () =>
-    folderItems.map((item, index) => {
+  // folderItems
+
+  const fileComparator = (a : FileEntity, b : FileEntity) => {
+    if (a.type === b.type) {
+      return (
+        a.name.toLowerCase() < b.name.toLowerCase() 
+        ? -1
+        : ( a.name.toLowerCase() > b.name.toLowerCase() 
+            ? 1 
+            : 0
+          )
+        );
+    } else if (a.type === "File") {
+      return 1
+    }
+    return -1;
+  };
+
+  const renderItems = () => 
+
+  [...folderItems]
+  .sort(fileComparator)
+  .map((item, index) => {
       switch (item.type) {
         case 'Folder':
           return (

frontend/src/packages/dashboard/state/folders/reducers.ts

@@ -58,6 +58,7 @@ export function renameFileEntity(
   state: sliceState,
   action: PayloadAction<RenamePayloadType>
 ) {
+
   const { id, newName } = action.payload;
   return {
     ...state,