Putio integration

lucille-bellepleure · Jun 5, 2019 · 3b344a2 · 3b344a2
1 parent 316ef94
commit 3b344a2
Show file tree

Hide file tree

Showing 16 changed files with 229 additions and 117 deletions.
diff --git a/package.json b/package.json
@@ -3,16 +3,17 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@putdotio/api-client": "^6.6.0",
     "fds.js": "^0.0.15",
     "moment": "^2.24.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-redux": "^6.0.1",
     "react-router-dom": "^5.0.0",
     "react-scripts": "3.0.1",
+    "redux": "^4.0.1",
     "redux-saga": "^1.0.2",
     "redux-starter-kit": "^0.4.3",
-    "redux": "^4.0.1",
     "reselect": "^4.0.0"
   },
   "scripts": {

diff --git a/src/components/RowFile.jsx b/src/components/RowFile.jsx
@@ -5,6 +5,12 @@ export default class RowFile extends React.Component {
   componentWillMount() { }
   componentHasMounted() { }
   render() {
-    return <div className={styles.rowfile}>{this.props.item.dirName}</div>;
+    return <div className={styles.rowfile}>
+      <img src={this.props.item.icon}></img>
+
+      <div className={styles.dirName}>{this.props.item.name}</div>
+
+
+    </div>
   }
 }
diff --git a/src/index.js b/src/index.js
@@ -3,7 +3,7 @@ import { render } from "react-dom";
 import { Provider } from "react-redux";
 
 // Not needed, history.js specifies the use of Hash.
-import { HashRouter as Router } from "react-router-dom";
+import { BrowserRouter as Router } from "react-router-dom";
 // Redux imports
 import store from "./store";
 import App from "./App";

diff --git a/src/pages/Account/PutioToken.jsx b/src/pages/Account/PutioToken.jsx
@@ -0,0 +1,33 @@
+import React from "react";
+import styles from "styles.module.css";
+import { NavLink } from "react-router-dom";
+import { connect } from "react-redux";
+
+class PutioToken extends React.Component {
+  render() {
+    return (
+      <div className={styles.container}>
+        <div className={styles.topbar}>
+          <div className={styles.brand}>{token}</div>
+        </div>
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = (_, ownProps) => {
+  const { token } = (ownProps.match || {}).params || {};
+  // return createStructuredSelector({
+  //   directory: () => directory,
+  //   directories: state => getDirectories(state, directory),
+  // });
+};
+
+const mapDispatchToProps = dispatch => ({
+  //addHashtag: name => dispatch({ type: "ADD_HASHTAG", hashtag: { name } })
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(PutioToken);
diff --git a/src/pages/Account/RegisterRoot.jsx b/src/pages/Account/RegisterRoot.jsx
@@ -3,6 +3,11 @@ import styles from "styles.module.css";
 import { NavLink } from "react-router-dom";
 import { connect } from "react-redux";
 
+
+//const putiourl = 'https://api.put.io/v2/oauth2/authenticate?client_id=4051&response_type=token&redirect_uri=https://fairdrive.netlify.com/putio';
+
+const putiourl = 'https://api.put.io/v2/oauth2/authenticate?client_id=4051&response_type=token&redirect_uri=http://localhost:3000/t/';
+
 class Register extends React.Component {
   render() {
     return (
@@ -19,9 +24,9 @@ class Register extends React.Component {
             <input type="text" placeholder="Handle" />
             <input type="password" placeholder="Password" />
             <input type="password" placeholder="Password check" />
-            <NavLink to="/f">
+            <a href={putiourl}>
               <div className={styles.button}>Register</div>
-            </NavLink>
+            </a>
             <NavLink to="/" className={styles.createnew}>
               <div>Unlock FairDrive</div>
             </NavLink>
@@ -48,3 +53,6 @@ export default connect(
   mapStateToProps,
   mapDispatchToProps
 )(Register);
+
+
+
diff --git a/src/pages/Files/Files.jsx b/src/pages/Files/Files.jsx
@@ -1,58 +1,76 @@
-import React from "react";
+import React, { useEffect } from "react";
 import styles from "styles.module.css";
 import { NavLink } from "react-router-dom";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import RowFile from "components/RowFile";
 import PropTypes from "prop-types";
 import { getDirectoryList } from "services/filebrowser/selectors";
+import { fetchDirectoryList } from "services/filebrowser/actions";
 
-class Files extends React.Component {
-  render() {
-    return (
-      <div className={styles.container}>
-        <div className={styles.topbar}>
-          <NavLink to="/w">
-            <div className={styles.myaccount}>
-              <div className={styles.handlebalance}>
-                <div className={styles.handle}>KarsRhyder</div>
-                <div className={styles.balance}>124.21 FDT</div>
-              </div>
+function Files({
+  directoryList, fetchDirectoryList, dirId
+}) {
+  useEffect(() => {
+    fetchDirectoryList(dirId)
+  }, [])
+  return (
+    <div className={styles.container}>
+      <div className={styles.topbar}>
+        <NavLink to="/w">
+          <div className={styles.myaccount}>
+            <div className={styles.handlebalance}>
+              <div className={styles.handle}>KarsRhyder</div>
+              <div className={styles.balance}>124.21 FDT</div>
             </div>
-          </NavLink>
+          </div>
+        </NavLink>
+        <div className={styles.location}>
           <div className={styles.breadcrumb}>FairDrive / </div>
-          <div className={styles.breadcrumbpath}>~122GB</div>
-        </div>
-        <div className={styles.innercontainer}>
-          {this.props.directoryList.map(item => (
-            <NavLink to={"d/" + item.dirId}>
-              <div className={styles.directoryrow}>
-                <div className={styles.icons8folder} />
-                <RowFile item={item} />
-              </div>
-            </NavLink>
-          ))}
+          <div className={styles.breadcrumbpath}>~122GB {dirId}</div>
         </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} />
+            </div>
+          </NavLink>
+        ))}
+      </div>
+    </div>
+  );
+};
+
 
-  componentDidMount() {
-    console.log('mount', this.props.directories);
-  }
-}
 
 Files.propTypes = {
-  directories: PropTypes.array.isRequired
+  directoryList: PropTypes.array.isRequired
 };
 
-const mapStateToProps = createStructuredSelector({
-  directoryList: getDirectoryList
-});
+const mapStateToProps = (_, ownProps) => {
+  const { dirId } = (ownProps.match || {}).params || {};
+  return createStructuredSelector({
+    dirId: () => dirId,
+    directoryList: dirId => getDirectoryList(dirId),
+  });
+};
+
+const mapDispatchToProps = {
+  fetchDirectoryList
+};
+
+
+// const mapStateToProps = createStructuredSelector({
+//   directoryList: getDirectoryList,
+//   dirId: dirId
+// });
+
+// const mapDispatchToProps = dispatch => ({
+//   getDirectoryList: () => dispatch({ type: "FETCH_DIRECTORY_LIST" })
+// });
 
-const mapDispatchToProps = dispatch => ({
-  //addHashtag: name => dispatch({ type: "ADD_HASHTAG", hashtag: { name } })
-});
 
 export default connect(
   mapStateToProps,

diff --git a/src/pages/index.js b/src/pages/index.js
@@ -9,5 +9,6 @@ export default [
   { path: "/f", exact: true, component: Files },
   { path: "/r", exact: true, component: Register },
   { path: "/w", exact: true, component: Wallet },
-  { path: "/d/:dirId", component: Directory }
+  { path: "/d/:dirId", component: Files },
+  { path: "/cb/:putIo", component: Account }
 ];
diff --git a/src/rootReducer.js b/src/rootReducer.js
@@ -13,18 +13,25 @@ const initialState = {
           mimeType: 'JPEG'
         }
       }
-    }
-  },
-  directoryList: [
-    {
-      dirName: 'DappData',
-      metaHash: '0x...'
     },
-    {
+    '0x2': {
       dirName: 'Images',
-      metaHash: '0x...'
+      metaHash: '0x...',
+      items: {
+        '0': {
+          itemName: 'File 2.jpg',
+          fileSize: 12233,
+          mimeType: 'JPEG'
+        }
+      }
     }
-  ]
+  },
+  directoryList: [],
+  idInfo: {
+    idString: "KarsDrive-1",
+    balanceEth: 1000000000000000000,
+    balanceFdt: 20000000000000000000
+  }
 };
 
 const globalReducer = (state = initialState, action) => {

diff --git a/src/services/filebrowser/actionTypes.js b/src/services/filebrowser/actionTypes.js
@@ -1,3 +1,5 @@
 // Service > user
 
-export const UPDATE_USER_ADDRESS = "UPDATE_USER_ADDRESS";
+export const FETCH_DIRECTORY_LIST = "FETCH_DIRECTORY_LIST";
+export const UPDATE_DIRECTORY_LIST = "UPDATE_DIRECTORY_LIST";
+
diff --git a/src/services/filebrowser/actions.js b/src/services/filebrowser/actions.js
@@ -1,8 +1,14 @@
 import * as t from "./actionTypes";
 
-// Service > user
+console.log("actions")
 
-export const updateWeb3Instance = userAddress => ({
-  type: t.UPDATE_USER_ADDRESS,
-  userAddress
+// Service > user
+export const fetchDirectoryList = dirId => ({
+  type: t.FETCH_DIRECTORY_LIST,
+  dirId
 });
+
+export const updateDirectoryList = directoryList => ({
+  type: t.UPDATE_DIRECTORY_LIST,
+  data: directoryList
+})
diff --git a/src/services/filebrowser/fetchFunctions/getDirectoryList.js b/src/services/filebrowser/fetchFunctions/getDirectoryList.js
@@ -0,0 +1,28 @@
+import PutioAPI from '@putdotio/api-client';
+
+export default async function getDirectoryList({ dirId }) {
+    console.log(localStorage.getItem('putiotoken'));
+    console.log({ dirId });
+    window.putApi = new PutioAPI({
+        clientID: '4051',
+        token: localStorage.getItem('putiotoken'),
+    });
+
+    const Api = await window.putApi;
+
+    //         Api
+    //             .User
+    //             .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, {});
+
+
+    // treat data HERE!!
+
+    return directoryList.data.files
+
+}
diff --git a/src/services/filebrowser/index.js b/src/services/filebrowser/index.js
@@ -2,8 +2,7 @@ import saga from "./sagas";
 import reducer from "./reducer";
 
 // Service > user
-
-export const mountPoint = "filebrowser";
+export const mountPoint = "directoryList";
 
 export default {
   mountPoint,

diff --git a/src/services/filebrowser/reducer.js b/src/services/filebrowser/reducer.js
@@ -1,47 +1,14 @@
 import * as t from "./actionTypes";
 
+
 // Service > Directories
-const initialState = {
-  directories: {
-    '0x1': {
-      dirName: 'DappData',
-      metaHash: '0x...',
-      items: {
-        '0': {
-          itemName: 'File 1.jpg',
-          fileSize: 12233,
-          mimeType: 'JPEG'
-        }
-      }
-    },
-    '0x2': {
-      dirName: 'Images',
-      metaHash: '0x...',
-      items: {
-        '0': {
-          itemName: 'File 2.jpg',
-          fileSize: 12233,
-          mimeType: 'JPEG'
-        }
-      }
-    }
-  },
-  directoryList: [
-    {
-      dirId: '0x1',
-      dirName: 'DappData',
-      metaHash: '0x...'
-    },
-    {
-      dirId: '0x2',
-      dirName: 'Images',
-      metaHash: '0x...'
-    }
-  ]
-};
 
-export default function (state = initialState, action) {
+console.log("reducer")
+
+export default function (state = [], action) {
   switch (action.type) {
+    case t.UPDATE_DIRECTORY_LIST:
+      return action.data;
     default:
       return state;
   }