From 797bcae932d240cd70a827bb9be3ea91aa28af57 Mon Sep 17 00:00:00 2001
From: Kars Rhyder <karsrhyder@gmail.com>
Date: Fri, 7 Jun 2019 17:54:09 +0200
Subject: [PATCH] Updtes

---
 src/pages/Account/AccountRoot.jsx             |  2 +-
 src/pages/Files/Files.jsx                     | 85 ++++++++++++-------
 .../fetchFunctions/getDirectoryList.js        | 15 +++-
 src/services/filebrowser/sagas.js             | 10 +--
 4 files changed, 72 insertions(+), 40 deletions(-)

diff --git a/src/pages/Account/AccountRoot.jsx b/src/pages/Account/AccountRoot.jsx
index 75c469d..4dcfea9 100644
--- a/src/pages/Account/AccountRoot.jsx
+++ b/src/pages/Account/AccountRoot.jsx
@@ -25,7 +25,7 @@ class Account extends React.Component {
             </NavLink>
             <a
               className={styles.createnew}
-              href="https://api.put.io/v2/oauth2/authenticate?client_id=4051&response_type=token&redirect_uri=http://localhost:3000/t/"
+              href="https://api.put.io/v2/oauth2/authenticate?client_id=4051&response_type=token&redirect_uri=https://fairdrive.netlify.com/t/"
             >
               Authenticate with Put.io
             </a>
diff --git a/src/pages/Files/Files.jsx b/src/pages/Files/Files.jsx
index 0609b6d..2039aa8 100644
--- a/src/pages/Files/Files.jsx
+++ b/src/pages/Files/Files.jsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { Route, match } from "react-router-dom";
+import { Route, Redirect, match } from "react-router-dom";
 import styles from "styles.module.css";
 import { NavLink } from "react-router-dom";
 import { connect } from "react-redux";
@@ -9,44 +9,71 @@ import PropTypes from "prop-types";
 import { getDirectoryList } from "services/filebrowser/selectors";
 import { fetchDirectoryList } from "services/filebrowser/actions";
 
-function Files({ directoryList, fetchDirectoryList, dirId, match }) {
-  useEffect(
-    dirId => {
-      fetchDirectoryList(match.params.dirId);
-    },
-    [match]
-  );
-  return (
-    <div className={styles.container}>
-      <div className={styles.topbar}>
-        <NavLink to="/w">
-          <div className={styles.myaccount}>
-            <div className={styles.handlebalance}>
-              <div className={styles.handle}>Kars</div>
-              <div className={styles.balance}>124.21 FDT</div>
+function Files({ directoryList, fetchDirectoryList, match }) {
+  const dirId = match.params.dirId;
+  useEffect(() => {
+    fetchDirectoryList(dirId);
+  }, [dirId]);
+  console.log(directoryList);
+  let files = directoryList.files;
+  let meta = directoryList.meta;
+  console.log(files);
+  console.log(meta);
+  if (files) {
+    return (
+      <div className={styles.container}>
+        <div className={styles.topbar}>
+          <NavLink to="/w">
+            <div className={styles.myaccount}>
+              <div className={styles.handlebalance}>
+                <div className={styles.handle}>Kars</div>
+                <div className={styles.balance}>124.21 FDT</div>
+              </div>
             </div>
+          </NavLink>
+          <div className={styles.location}>
+            <div className={styles.breadcrumb}>{meta.name} </div>
+            <div className={styles.breadcrumbpath}>{meta.size}kb</div>
           </div>
-        </NavLink>
-        <div className={styles.location}>
-          <div className={styles.breadcrumb}>FairDrive / </div>
-          <div className={styles.breadcrumbpath}>~122GB {dirId}</div>
+        </div>
+        <div className={styles.innercontainer}>
+          {files.map(item => (
+            <NavLink to={"/d/" + item.id} key={item.id}>
+              <div className={styles.directoryrow}>
+                <RowFile item={item} key={item.id} />
+              </div>
+            </NavLink>
+          ))}
         </div>
       </div>
-      <div className={styles.innercontainer}>
-        {directoryList.map(item => (
-          <NavLink to={"/d/" + item.id} key={item.id}>
-            <div className={styles.directoryrow}>
-              <RowFile item={item} key={item.id} />
+    );
+  } else {
+    return (
+      <div className={styles.container}>
+        <div className={styles.topbar}>
+          <NavLink to="/w">
+            <div className={styles.myaccount}>
+              <div className={styles.handlebalance}>
+                <div className={styles.handle}>Kars</div>
+                <div className={styles.balance}>124.21 FDT</div>
+              </div>
             </div>
           </NavLink>
-        ))}
+          <div className={styles.location}>
+            <div className={styles.breadcrumb}>Loading </div>
+            <div className={styles.breadcrumbpath}>0 kb</div>
+          </div>
+        </div>
+        <div className={styles.innercontainer}>
+          <div className={styles.directoryrow}>Loading</div>
+        </div>
       </div>
-    </div>
-  );
+    );
+  }
 }
 
 Files.propTypes = {
-  directoryList: PropTypes.array.isRequired
+  files: PropTypes.array.isRequired
 };
 
 const mapStateToProps = (_, ownProps) => {
diff --git a/src/services/filebrowser/fetchFunctions/getDirectoryList.js b/src/services/filebrowser/fetchFunctions/getDirectoryList.js
index e1ed121..9938faa 100644
--- a/src/services/filebrowser/fetchFunctions/getDirectoryList.js
+++ b/src/services/filebrowser/fetchFunctions/getDirectoryList.js
@@ -15,9 +15,18 @@ export default async function getDirectoryList({ dirId }) {
   //             .Info()
   //             .then(res => console.log('Res: ', res.data.info)
   //                 .catch(err => console.log('Error occured while fetching user info: ', err))
-  const directoryList = await Api.Files.Query(dirId, {});
+  const res = await Api.Files.Query(dirId, {});
+  //const directoryList = res.body.files;
 
-  // treat data HERE!!
+  console.log(res);
+  const directoryMeta = res.body.parent;
 
-  return directoryList.data.files;
+  const directoryList = {
+    files: res.body.files,
+    meta: directoryMeta
+  };
+
+  console.log(directoryList);
+
+  return directoryList;
 }
diff --git a/src/services/filebrowser/sagas.js b/src/services/filebrowser/sagas.js
index 5c8739e..3adf26d 100644
--- a/src/services/filebrowser/sagas.js
+++ b/src/services/filebrowser/sagas.js
@@ -4,17 +4,13 @@ import * as t from "./actionTypes";
 
 import getDirectoryList from "./fetchFunctions/getDirectoryList";
 
-console.log("sagas");
-
 function* fetchDirectoryList({ dirId }) {
   try {
-    const directoryList = yield call(getDirectoryList, { dirId });
-
-    console.log("sagas dirlist:", directoryList);
-    console.log("fetchung dir", dirId);
+    const directoryList = yield call(getDirectoryList, {
+      dirId
+    });
 
     yield put(a.updateDirectoryList(directoryList));
-    console.log("Saga starging DirectoryList", directoryList);
     return directoryList;
   } catch (e) {
     console.error(`Error on fetchGetDirSaga: ${e.stack}`);