implemneted feature SolidOS#8

.gitignore

@@ -1,2 +1,4 @@
 lib
-node_modules
+node_modules
+.history
+.vscode

src/ProfileView.ts

@@ -12,6 +12,7 @@ import { presentProfile } from "./presenter";
 import { presentCV } from './CVPresenter' // 20210527
 import { ProfileCard } from "./ProfileCard";
 import { CVCard } from "./CVCard";
+import { addMeToYourFriendsHtml } from "./addMeToYourFriends";
 
 export const ProfileView = (
   subject: NamedNode,
@@ -37,6 +38,7 @@ export const ProfileView = (
       <div>
         <div data-testid="profile-card" style="${styles.card}">
           ${ProfileCard(profileBasics)}
+          ${addMeToYourFriendsHtml(subject, context)}
         </div>
       </div>
       <div data-testid="friend-list" style="${styles.card}">

src/addMeToYourFriends.ts

@@ -0,0 +1,95 @@
+import { html, TemplateResult } from "lit-html";
+import { styleMap } from "lit-html/directives/style-map";
+import { DataBrowserContext } from "pane-registry";
+import * as $rdf from "rdflib";
+import * as UI from "solid-ui";
+import { padding, textCenter } from "./baseStyles";
+
+const styles = {
+  button: styleMap({ ...textCenter(), ...padding() }),
+};
+
+let buttonContainer = <HTMLDivElement>document.createElement("div");
+const messageDiv = <HTMLDivElement>document.createElement("div");
+messageDiv.setAttribute(
+  "style",
+  "margin: 0.1em; padding: 0.5em; border: 0.05em solid gray; background-color: #efe; color:black;"
+);
+
+export const addMeToYourFriendsHtml = (
+  subject: $rdf.NamedNode,
+  context: DataBrowserContext
+): TemplateResult => {
+  buttonContainer = context.dom.createElement("div");
+  buttonContainer.appendChild(createAddMeToYourFriendsButton(subject, context));
+  return html` <div style="${styles.button}">${buttonContainer}</div> `;
+};
+
+const createAddMeToYourFriendsButton = (
+  subject: $rdf.NamedNode,
+  context: DataBrowserContext
+): HTMLButtonElement => {
+  const button = UI.widgets.button(context.dom, undefined, "Add me to your friends", undefined, {
+    needsBorder: true,
+  });
+  button.addEventListener(
+    "click",
+    async () =>
+      await saveNewFriend(subject, context)
+        .then(() => reportToFrontend(true, context, "Friend was added!"))
+        .catch((error) => reportToFrontend(false, context, error)),
+    false
+  );
+  return button;
+};
+
+async function saveNewFriend(subject: $rdf.NamedNode, context: DataBrowserContext): Promise<void> {
+  const loggedInContext = await UI.authn.logInLoadProfile(context).catch(() => {
+    //For error text consistency reasons, we need to chatch this here.
+    //Now it shows the same message like in the error upon clicking the chat button.
+    throw new Error("Current user not found! Not logged in?");
+  });
+  const me = loggedInContext.me;
+  const profileDoc = me.doc();
+  const store = context.session.store;
+  const updater = store.updater;
+  const toBeInserted = [UI.rdf.st(me, UI.ns.foaf("knows"), subject, profileDoc)];
+  try {
+    await updater.update([], toBeInserted);
+  } catch (error) {
+    let errorMessage = error;
+    if (errorMessage.toString().includes("Unauthenticated"))
+      errorMessage = "Current user not found! Not logged in?";
+    throw new Error(errorMessage);
+  }
+}
+
+function reportToFrontend(possitive: boolean, context: DataBrowserContext, message: string) {
+  clearMessage();
+  if (possitive) reportPositive(context, message);
+  else complain(context, message);
+}
+
+function complain(context: DataBrowserContext, error: string) {
+  buttonContainer.appendChild(UI.widgets.errorMessageBlock(context.dom, error));
+}
+
+function reportPositive(context: DataBrowserContext, message: string) {
+  messageDiv.innerHTML = message;
+  buttonContainer.appendChild(messageDiv);
+}
+function clearMessage() {
+  while (buttonContainer.childNodes.length > 1) {
+    buttonContainer.removeChild(buttonContainer.lastChild);
+  }
+}
+//Because the code has unhandled Promises we still want to signal the user a message.
+//Console will contain actual error.
+window.addEventListener("unhandledrejection", function () {
+  clearMessage();
+  buttonContainer.appendChild(
+    UI.widgets.errorMessageBlock(window.document, "An internal error occured!")
+  );
+});
+
+export { saveNewFriend, createAddMeToYourFriendsButton };

src/CVPresenter.spec.ts → src/integration-tests/CVPresenter.spec.ts

@@ -1,4 +1,4 @@
-import { presentCV} from "./CVPresenter";
+import { presentCV} from "../CVPresenter";
 import { blankNode, sym } from "rdflib";
 import { ns, store } from "solid-ui";
 

src/integration-tests/add-me-to-friend-setup.ts

@@ -0,0 +1,28 @@
+import {DataBrowserContext, PaneRegistry} from "pane-registry";
+import {sym} from "rdflib";
+import {SolidLogic} from "solid-logic";
+import {store} from "solid-ui"
+
+export const subject = sym("https://testingsolidos.solidcommunity.net/profile/card#me");
+export const doc = subject.doc();
+
+export const context = {
+    dom: document,
+    getOutliner: () => null,
+    session: {
+        paneRegistry: {
+            byName: (name: string) => {
+                return {
+                    render: () => {
+                        return document.createElement('div')
+                            .appendChild(
+                                document.createTextNode(`mock ${name} pane`)
+                            );
+                    }
+                }
+            }
+        } as PaneRegistry,
+        store,
+        logic: {} as SolidLogic,
+    },
+} as unknown as DataBrowserContext;

src/integration-tests/add-me-to-your-friends.test.ts

@@ -0,0 +1,56 @@
+import { context, doc, subject } from "./setup";
+import pane from "../";
+import { findByText, fireEvent } from "@testing-library/dom";
+import { parse } from "rdflib";
+import { ns } from "solid-ui";
+
+describe("add-me-to-your-friends", () => {
+  describe("saveNewFriend with NO logged in user", () => {
+    let result;
+    beforeAll(() => {
+      result = pane.render(subject, context);
+    });
+
+    it("renders the Add me to friends button", async () => {
+      const button = await findByText(result, "ADD ME TO YOUR FRIENDS");
+      expect(button).not.toBeNull();
+    });
+
+    it("saveNewFriend with user NOT logged in", async () => {
+      const button = await findByText(result, "ADD ME TO YOUR FRIENDS");
+      fireEvent.click(button);
+      const errorMessage = await findByText(result, "Current user not found! Not logged in?");
+      expect(errorMessage).not.toBeNull();
+      expect(button).toThrowError;
+    });
+  });
+
+  /* describe("saveNewFriend with user logged in", () => {
+    let result;
+    beforeEach(() => {
+      context.session.store.removeDocument(doc);
+      const turtle = `
+        @prefix : <#>.
+        @prefix foaf: <http://xmlns.com/foaf/0.1/> .
+        @prefix vcard: <http://www.w3.org/2006/vcard/ns#> .
+        :me foaf:name "Testing Solidos";
+        .
+        `;
+      parse(turtle, context.session.store, doc.uri);
+      result = pane.render(subject, context);
+    });
+
+    it("renders the Add me to friends button", async () => {
+      const button = await findByText(result, "ADD ME TO YOUR FRIENDS");
+      expect(button).not.toBeNull();
+    });
+
+    it("verify added triple", async () => {
+      const button = await findByText(result, "ADD ME TO YOUR FRIENDS");
+      fireEvent.click(button);
+      console.dir(context.session.store.statements)
+      const triple = context.session.store.any(subject, ns.foaf("knows"), null, doc);
+      expect(triple).not.toBeNull();
+    });
+  }); */
+});

src/presenter.spec.ts → src/integration-tests/presenter.spec.ts

@@ -1,4 +1,4 @@
-import { presentProfile } from "./presenter";
+import { presentProfile } from "../presenter";
 import { blankNode, sym } from "rdflib";
 import { ns, store } from "solid-ui";
 

src/integration-tests/profile-card.spec.ts

@@ -73,7 +73,7 @@ describe("profile-pane", () => {
     });
 
     it("renders only a makeshift name based on URI", () => {
-      expect(card.textContent.trim()).toBe("janedoe.example");
+      expect(card.textContent.trim()).toContain("janedoe.example");
     });
 
     it("does not render broken profile image", () => {