Implement folder browsing

-import React, { useEffect } from "react";
-import { Switch, Route, Redirect, useHistory } from "react-router-dom";
+import React from "react";
+import { Switch, Route, Redirect } from "react-router-dom";
 
 
 import { Login } from "auth/Login";
 import { Login } from "auth/Login";
 import { useAuth, TokenContext } from "auth/useAuth";
 import { useAuth, TokenContext } from "auth/useAuth";
@@ -10,13 +10,6 @@ import { FileList } from "file/FileList";
 export function App() {
 export function App() {
   const { token, login } = useAuth();
   const { token, login } = useAuth();
   const root = token?.user.rootFolder;
   const root = token?.user.rootFolder;
-  const history = useHistory();
-
-  useEffect(() => {
-    if (root) {
-      history.push(`/folder/${root}`);
-    }
-  }, [history, root]);
 
 
   return (
   return (
     <Switch>
     <Switch>
@@ -31,6 +24,9 @@ export function App() {
                 <Route path="/folder/:id">
                 <Route path="/folder/:id">
                   <FileList />
                   <FileList />
                 </Route>
                 </Route>
+                <Route>
+                  <Redirect to={`/folder/${root}`} />
+                </Route>
               </Switch>
               </Switch>
             </Page>
             </Page>
           </TokenContext.Provider>
           </TokenContext.Provider>

@@ -42,8 +42,16 @@ export function FileList() {
   const id = useParams<{ id: string }>().id;
   const id = useParams<{ id: string }>().id;
   const { data } = useFileList(id);
   const { data } = useFileList(id);
 
 
-  if (data && data.parent !== null) {
-    data.list.unshift(({
+  if (!data) {
+    return null;
+  }
+
+  const list = [...data.list].sort((itemA, itemB) =>
+    itemA.is_folder === itemB.is_folder ? 0 : itemA.is_folder ? -1 : 1
+  );
+
+  if (data.parent !== null) {
+    list.unshift(({
       id: data.parent,
       id: data.parent,
       is_folder: true,
       is_folder: true,
       name: "..",
       name: "..",
@@ -51,5 +59,10 @@ export function FileList() {
     } as unknown) as FileItem);
     } as unknown) as FileItem);
   }
   }
 
 
-  return data && <Table columns={columns} dataSource={data.list} />;
+  return (
+    <div>
+      {data.parent !== null && <h3>{data.name}</h3>}
+      <Table columns={columns} dataSource={list} pagination={false} />
+    </div>
+  );
 }
 }

 import React, { Fragment } from "react";
 import React, { Fragment } from "react";
 import { FileItem } from "./useFileList";
 import { FileItem } from "./useFileList";
+import { Link } from "react-router-dom";
 
 
 export function FileListItem({ item }: { item: FileItem }) {
 export function FileListItem({ item }: { item: FileItem }) {
-  return <Fragment>{item.name}</Fragment>;
+  return (
+    <Fragment>
+      {item.is_folder ? (
+        <Link to={`/folder/${item.id}`}>{item.name}</Link>
+      ) : (
+        item.name
+      )}
+    </Fragment>
+  );
 }
 }