Merge pull request #192 from Arquisoft/feature-view-shared-routes

Feature view shared routes

src/components/navBar/navBar.js

@@ -22,6 +22,7 @@ import viadeLogo from './../../assets/logo/logo_alt.jpeg';
 import viadeText from './../../assets/logo/logo_letters.jpeg';
 import RouteManager from "./../../model/RouteManager";
 import ShareView from '../../pages/ShareView';
+import RouteSharedList from "../../pages/RouteSharedList";
 
 const routeManager = RouteManager;
 
@@ -63,6 +64,8 @@ function MyNavBar(props) {
               <NavDropdown.Item href="#routes/list">{t('navBarMyRoutes')}</NavDropdown.Item>
               <NavDropdown.Item href="#routes/add">{t('navBarCreateRoute')}</NavDropdown.Item>
               <NavDropdown.Divider />
+              <NavDropdown.Item href="#routes/shared">{t('navBarSharedRoutes')}</NavDropdown.Item>
+              <NavDropdown.Divider />
               <NavDropdown.Item href="#routes/example">{t('navBarRouteHelp')}</NavDropdown.Item>
             </NavDropdown>
           </Nav>
@@ -87,6 +90,7 @@ function MyNavBar(props) {
       <Route exact path="/register" component={SignUp} />
       <Route exact path="/routes/add" render={() => <RouteCreation routeManager={routeManager} />} />
       <Route exact path="/routes/list" render={() => <RouteList routeManager={routeManager} />} />
+      <Route exact path="/routes/shared" render={() => <RouteSharedList routeManager={routeManager} />} />
       <Route exact path="/routes/example" render={() => <RouteHelp/>} />
       <Route exact path="/home" component={Home} />
       <Route exact path="/profile" render={() => <Profile routeManager={routeManager} />} />

src/components/podService/podStoreHandler.js

@@ -14,6 +14,7 @@ export default class PodStorageHandler extends PodHandler{
      */
     constructor(currentSession) {
         super(currentSession);
+        this.sharedRoutesToAdd = [];
     }
 
     /**
@@ -115,7 +116,6 @@ export default class PodStorageHandler extends PodHandler{
     }
 
     async getRoutesSharedToMe(forEachRoute = () => {}){
-        let result = [];
         await this._getSharedFolder(async function (file) {
             // Transform file to JSON
             let fileAsJSON = JSON.parse(file);
@@ -125,17 +125,14 @@ export default class PodStorageHandler extends PodHandler{
             sharedRoutes = sharedRoutes.map((j) => { return j["@id"]; });
             for (let i = 0; i < sharedRoutes.length; i++){
                 let fileUrl = sharedRoutes[i];
-                console.log(fileUrl);
                 await this.getFile(fileUrl).then( function(content) {
                         // Create routes from JSON
                         let routeObject = new MyRoute();
                         routeObject.modifyFromJsonLd(JSON.parse(content));
                         forEachRoute(routeObject);
-                        result.push(routeObject);
-                }, (error) => {} );
+                }, (error) => {forEachRoute(null);} );
             }
         }.bind(this));
-        return result;
     }
 
     /**
@@ -152,25 +149,21 @@ export default class PodStorageHandler extends PodHandler{
                             const parser = new N3.Parser();
                             parser.parse(content, function (error, quad, prefixes) { // parse the content of the message
                                 if (quad) {
-                                    if ( quad.predicate.id == "http://schema.org/text" ) { // If the quad is the url of the route
+                                    if ( quad.predicate.id === "http://schema.org/text" && quad.object.id.includes("/viade/routes/") ) { // If the quad is the url of the route
                                         forEachMail(quad.object.id);
-                                        console.log("PUSHED " + quad.object.id);
-                                        //newRoutes.push(quad.object.id);
-                                        this.addRoutesAsShared([quad.object.id.split("\"").join("")]);
-                                        this._markEmailAsRead(url);
+                                        this.sharedRoutesToAdd.push(quad.object.id.split("\"").join(""));
                                     }
                                 }
                             }.bind(this));
-                    }.bind(this),
-                        (error) => {}
+                        }.bind(this),
+                            (error) => {}
                     );
                 }.bind(this));
 
-                //await this.addRoutesAsShared(newRoutes);
-
             }.bind(this),
             (error) => {  }
         );
+        this.addRoutesAsShared(this.sharedRoutesToAdd);
     }
 
     /**
@@ -195,31 +188,44 @@ export default class PodStorageHandler extends PodHandler{
     }
 
     async addRoutesAsShared(urls){
-        console.log("HasBeenShared! " + urls);
-
-        let content = JSON.stringify(
-        {
-            "@context": {
-            "@version": 1.1,
-                "routes": {
-                "@container": "@list",
-                    "@id": "viade:routes"
-            },
-            "viade": "http://arquisoft.github.io/viadeSpec/"
-        },
-            "routes": urls.map((url) => {return {"@id": url.toString()}})
-        });
+        let file = null;
+        let filename = "en3a.json";
+
+        // 1.- Get a shared File
+        try {
+            file = await this.getFile(this.repository + this.defaultFolder + this.sharedDirectory + filename);
+            file = JSON.parse(file);
+        } catch (e) {
+            if (e.status !== 404) {
+                throw e;
+            } else {
+                file = {
+                    "@context": {
+                        "@version": 1.1,
+                        "routes": {
+                            "@container": "@list",
+                            "@id": "viade:routes"
+                        },
+                        "viade": "http://arquisoft.github.io/viadeSpec/"
+                    },
+                    "routes": []
+                };
+            }
+        }
 
-        //console.log(urls);
-        //console.log(urls.map((url) => {return {"@id": url}}));
-        //console.log(content);
+        // 2.- Remove duplicated routes
+        let alreadyRoutes = file["routes"].map((url) => {return url["@id"];});
+        urls.forEach((url) => {
+           if (alreadyRoutes.indexOf(url) === -1) {
+               alreadyRoutes.push( url );
+           }
+        });
+        urls = [];
 
-        let filename = Date.now() + ".json";
-        this.storeFile(this.repository + this.defaultFolder + this.sharedDirectory + filename, content);
-    }
+        // 3.- Rewrite file
+        file["routes"] = alreadyRoutes.map((url) => {return {"@id": url.toString()}});
 
-    _markEmailAsRead(url) {
-        //console.log("READ! " + url);
+        this.storeFile(this.repository + this.defaultFolder + this.sharedDirectory + filename, JSON.stringify(file));
     }
 
     async getFolder(url) {

src/components/routeList/RouteCard.js

@@ -16,9 +16,24 @@ class RouteCard extends React.Component {
                 style={{ borderRadius: "5px", margin: "0", height: "100%", width: "100%" }}
             />
         };
+        this.showShareButton = true;
+        if (props.showShareButton !== undefined) {
+            this.showShareButton = props.showShareButton;
+        }
+
+        this.showInfoButton = true;
+        if (props.showInfoButton !== undefined) {
+            this.showInfoButton = props.showInfoButton;
+        }
     }
 
     render() {
+
+        let buttons = [
+            this.showInfoButton && <Button variant="dark" href={`#routes/info/${this.route.id}`}>Info</Button>,
+            this.showShareButton && <Button variant="dark" style={{ margin: "16px" }} href={`#routes/share/${this.route.id}`}>Share</Button>
+        ];
+
         return (
             <Card text="dark">
                 <Card.Header style={{ minHeight: "100px", height: "300px", padding: "0" }}>
@@ -29,8 +44,7 @@ class RouteCard extends React.Component {
                 <Card.Body>
                     <Card.Title style={{ fontSize: "24px" }}>{this.route.name}</Card.Title>
                     <Card.Text style={{ fontSize: "18px" }}>{this.route.description}</Card.Text>
-                    <Button variant="dark" href={`#routes/info/${this.route.id}`}>Info</Button>
-                    <Button variant="dark" style={{ margin: "16px" }} href={`#routes/share/${this.route.id}`}>Share</Button>
+                    {buttons}
                 </Card.Body>
             </Card >
         );
@@ -40,6 +54,9 @@ class RouteCard extends React.Component {
         this.setState({ mapComponent: this.state.mapComponent });
     }
 
+    toggleShareButton(){
+        this.showShareButton = !this.showShareButton;
+    }
 }
 
 

src/i18n.js

@@ -22,6 +22,7 @@ const resources = {
       "navBarRoutes": "Route management",
       "navBarMyRoutes": "My routes",
       "navBarCreateRoute": "Create a new route",
+      "navBarSharedRoutes" : "Shared to Me",
       "navBarRouteHelp": "How do routes work?",
       "routeListText": "Route List",
       "friendCardDelete": "Delete",
@@ -110,6 +111,7 @@ const resources = {
       "navBarRoutes": "Gestión de rutas",
       "navBarMyRoutes": "Mis rutas",
       "navBarCreateRoute": "Crear una nueva ruta",
+      "navBarSharedRoutes" : "Compartidas conmigo",
       "navBarRouteHelp": "¿Cómo funcionan las rutas?",
       "routeListText": "Lista de rutas",
       "friendCardDelete": "Borrar",

src/model/RouteManager.js

@@ -1,7 +1,7 @@
 class RouteManager {
 
     constructor() {
-        this.routes = [];
+        this.resetRoutes();
     }
 
     getRoutes() {
@@ -16,8 +16,17 @@ class RouteManager {
         this.routes.push(route);
     }
 
+    addSharedRoute(route){
+        this.routesSharedToMe.push(route);
+    }
+
+    getSharedRouteById(id) {
+        return this.routesSharedToMe.find((route) => route.getId() === id);
+    }
+
     resetRoutes() {
         this.routes = [];
+        this.routesSharedToMe = [];
     }
 
 }

src/pages/Home.js

@@ -37,19 +37,6 @@ class Home extends Component {
                 <h3>V 1.0</h3>
             </div>
         );
-
-        // <!-- <button onClick={this.getEmail}>Check EMAIL!</button> -->
-        // <!-- <button onClick={this.getSharedToMe}>You were shared:</button> -->
-    }
-
-    async getEmail(){
-        await new PodStorageHandler(await auth.currentSession()).checkInbox((r) => {}); // console.log("Callback called:"); console.log(r);
-    }
-
-    async getSharedToMe(){
-        let routes = await new PodStorageHandler(await auth.currentSession()).getRoutesSharedToMe((r) => {console.log("Callback called:"); console.log(r);});
-        console.log("Function finished");
-        console.log(routes);
     }
 
     async printName() {

src/pages/RouteList.js

@@ -10,24 +10,28 @@ import MyRoute from "../model/MyRoute";
 import $ from "jquery";
 
 import 'react-toastify/dist/ReactToastify.css';
+import RouteManager from "../model/RouteManager";
 
 const auth = require('solid-auth-client');
 
 class RouteList extends React.Component {
 
     constructor(props) {
         super(props);
-        this.routeManager = props.routeManager;
+        this.routeManager = RouteManager;
         this.cardDeckSize = 4;
         this.state = {
             routes: [],
-            spinnerHidden: false
+            sharedRoutes : [],
+            spinnerHidden: false,
         };
-        this.syncRoutesWithPod().then(() => {
-            this.state.spinnerHidden = true;
-        });
-        this.processedRoutes = 0;
-        this.retrievedRoutes = 0;
+        if (props.sync == undefined || props.sync == true) {
+            this.syncRoutesWithPod().then(() => {
+                this.state.spinnerHidden = true;
+            });
+            this.processedRoutes = 0;
+            this.retrievedRoutes = 0;
+        }
     }
 
     render() {
@@ -75,6 +79,8 @@ class RouteList extends React.Component {
         let session = await auth.currentSession();
         if (session !== null && session !== undefined) {
             let storageHandler = new PodStorageHandler(session);
+
+            // Handle my Routes
             storageHandler.getRoutes((routeJson, error) => {
                 if (routeJson === null) {
                     toast.error(i18n.t('alertAccessPOD'));
@@ -107,6 +113,19 @@ class RouteList extends React.Component {
                     }
                 }
             );
+
+            // Handle Shared Routes
+            storageHandler.getRoutesSharedToMe( (route) => {
+                if (route === undefined || route == null) {
+                    toast.error("We can't access your POD. Please, review its permissions");
+                } else {
+                    this.routeManager.addSharedRoute(route);
+                    let tempList = this.state.sharedRoutes;
+                    tempList.push(route);
+                    this.setState({ sharedRoutes: tempList });
+                    $("#messageArea").empty();
+                }
+            });
         }
     }
 

src/pages/RouteSharedList.js

@@ -0,0 +1,64 @@
+import React from "react";
+import RouteManager from "../model/RouteManager";
+import {CardDeck, Spinner} from "react-bootstrap";
+import RouteCard from "../components/routeList/RouteCard";
+import {toast, ToastContainer} from "react-toastify";
+import {Translation} from "react-i18next";
+import PodStorageHandler from "../components/podService/podStoreHandler";
+import MyRoute from "../model/MyRoute";
+import $ from "jquery";
+import RouteList from "./RouteList";
+const auth = require('solid-auth-client');
+
+export default class RouteSharedList extends RouteList {
+
+    constructor(props) {
+        super(props);
+        if (props.sync === undefined || props.sync == true)
+            this.readInbox();
+    }
+
+    async readInbox() {
+        new PodStorageHandler(await auth.currentSession()).checkInbox();
+    }
+
+    render() {
+        let routesForCardDecks = [];
+        let counter = 0;
+        while (counter <= this.state.sharedRoutes.length) {
+            routesForCardDecks.push(
+                <CardDeck style={{ padding: "1% 0% 1% 2%", width: "100%" }}>
+                    {this.state.sharedRoutes.slice(counter, counter + this.cardDeckSize).map(
+                        (r) => {return <RouteCard route={r} showShareButton={false} />;}
+                    )}
+                </CardDeck>
+            );
+            counter += this.cardDeckSize;
+        }
+
+        return (
+            <div>
+                <ToastContainer
+                    position={toast.POSITION.TOP_CENTER}
+                    autoClose={5000}
+                />
+                <Translation>
+                    {
+                        (t) => <h1 style={{ padding: "1%" }}>{t('routeListText')}</h1>
+                    }
+                </Translation>
+                <Translation>
+                    {
+                        (t) => <h2 style={{ padding: "1%" }} hidden={this.state.spinnerHidden}>{t('routeListLoadingMessage')}</h2>
+                    }
+                </Translation>
+
+                <Spinner id={"spinner"} hidden={this.state.spinnerHidden} animation="border" />
+                {routesForCardDecks}
+                <div id="messageArea">
+                    {this.state.message}
+                </div>
+            </div>
+        );
+    }
+}