Feature share routes - Notifications

package.json

@@ -26,6 +26,7 @@
     "react-router-dom": "^5.1.2",
     "react-scripts": "^3.4.0",
     "shx": "0.3.2",
+    "solid-auth-client": "^2.4.1",
     "solid-file-client": "^1.0.2",
     "uuid": "^7.0.2"
   },

src/components/navBar/navBar.js

@@ -17,6 +17,7 @@ import gitHubLogo from './../../assets/githubLogo/github.png';
 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';
 
 const routeManager = new RouteManager();
 
@@ -78,6 +79,7 @@ function MyNavBar(props) {
       <Route exact path="/friends" component={Friends} />
       <Route exact path="/editProfile" component={EditProfile} />
       <Route exact path="/routes/info/:id" render={(props) => <InfoView routeManager={routeManager} {...props} />} />
+      <Route exact path="/routes/share/:id" render={(props) => <ShareView {...props} />} />
       <Redirect path="/" exact to="/home" />
     </HashRouter>
   );

src/components/routeList/RouteCard.js

@@ -15,6 +15,7 @@ function RouteCard(props) {
                 <Card.Title style={{ fontSize: "24px" }}>{props.route.name}</Card.Title>
                 <Card.Text style={{ fontSize: "18px" }}>{props.route.description}</Card.Text>
                 <Button variant="dark" href={`#routes/info/${props.route.id}`}>Info</Button>
+                <Button variant="dark" style={{margin:"16px"}}href={`#routes/share/${props.route.id}`}>Share</Button>
             </Card.Body>
         </Card>
     );

src/model/MyRoute.js

@@ -54,7 +54,7 @@ class MyRoute {
 	}
 
 	getFileName() {
-		return this.name + "_" + this.id + ".json";
+		return this.id + ".json";
 	}
 
 	getComparableString() {

src/pages/ShareView.js

@@ -0,0 +1,117 @@
+import React from "react";
+import * as auth from 'solid-auth-client';
+import data from '@solid/query-ldflex';
+import Card from 'react-bootstrap/Card';
+import Button from 'react-bootstrap/Button';
+import { namedNode } from '@rdfjs/data-model';
+class ShareView extends React.Component {
+
+    constructor(props) {
+        super();
+        this.state = {
+            friends: []
+        };
+        this.readFriends();
+        this.webId = null;
+        this.id = props.match.params.id;
+    }
+
+    render() {
+        return (
+            <div className="App-header">
+            <div style={{backgroundColor: "#282c34", 
+            display:"flex", 
+            flexDirection: "row",
+            justifyContent:"center",
+            color:"black"}}>
+                {
+                    this.state.friends.map((friend) => {
+                        return <div> 
+                        <Card style={{ width: '18rem' , margin: "10px"}}>
+                            <Card.Img variant="top" src={friend.image} />
+                            <Card.Body>
+                                <Card.Title>{friend.name}</Card.Title>
+                                <Button variant="primary" 
+                                onClick={() => {this.send(friend.inbox);}}>Share</Button>
+                            </Card.Body>
+                        </Card>
+                        </div>;
+                    })
+                }
+            </div>
+            </div>
+        );
+    }
+
+    async readFriends() {
+        let session = await auth.currentSession(); 
+        this.webId = session.webId;
+        let friends = [];
+        for await (const friend of data.user.friends) {
+            const f = {};
+            const n = await data[friend].vcard$fn;
+            const inbox = await data[friend].inbox;
+            const imageLd = await data[friend].vcard_hasPhoto;
+
+            if (imageLd && imageLd.value) {
+                f.image = imageLd.value;
+            } else {
+                f.image = "";
+            }
+
+            f.webId = `${friend}`;
+            f.name = `${n}`;
+            f.inbox = `${inbox}`;
+            if (n === undefined) {
+                f.name = `${friend}`;
+            }
+            friends = [...friends, f];
+        }
+        this.setState({ friends });
+    }
+
+
+    async send(destination) {
+        var message = {};
+        message.date = new Date(Date.now());
+        message.id = message.date.getTime();
+        message.sender = this.webId;
+        message.recipient = destination;
+
+        let folder = "/viade/routes/";
+        message.content = this.getWebIdWithoutProfile() + folder + this.id + ".json";
+
+        message.title = "Check out this route shared to you by " + this.getSessionName();
+        message.url = message.recipient + message.id + ".json";
+
+        await this.buildMessage(message);
+        alert ("Your friend has received a notification with your route!");
+
+    }
+
+    async buildMessage(message) {
+        var mess = message.url;
+        //message
+        await data[mess].schema$text.add(message.content);
+        await data[mess].rdfs$label.add("routeShared: message.title");
+        await data[mess].schema$dateSent.add(message.date.toISOString());
+        await data[mess].rdf$type.add(namedNode('https://schema.org/Message'));
+        await data[mess].schema$sender.add(namedNode(this.webId));
+    } 
+
+    getSessionName(){
+        var session = this.webId;
+        var tmp = session.split(".")[0];
+        return tmp.split("//")[1];
+    }
+
+    getWebIdWithoutProfile(){
+        let wId = this.webId;
+        let tmp = wId.split("profile")[0];
+        return tmp;
+
+    }
+
+}
+
+export default ShareView;