"addMeToYourFriends button v1. SolidOS#8"

timea-solid · Aug 13, 2021 · b5ef441 · b5ef441
1 parent 8b9cb83
commit b5ef441
Show file tree

Hide file tree

Showing 2 changed files with 113 additions and 52 deletions.
diff --git a/src/AddMeToYourFriends.ts b/src/AddMeToYourFriends.ts
@@ -0,0 +1,59 @@
+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() }),
+};
+
+export const AddMeToYourFriends = (
+  subject: $rdf.NamedNode,
+  context: DataBrowserContext
+): TemplateResult => {
+  return html` <div style="${styles.button}">${createAddMeToYourFriensdButton(subject, context)}</div> `;
+};
+
+const createAddMeToYourFriensdButton = (subject: $rdf.NamedNode, context: DataBrowserContext) => {
+  const buttonContainer = context.dom.createElement("div");
+  const button = UI.widgets.button(context.dom, undefined, "Add me to your friends", undefined, {
+    needsBorder: true,
+  });
+  button.addEventListener(
+    "click",
+    async (_event) =>
+      await saveNewFriend(subject, context).catch((error) => {
+        buttonContainer.appendChild(UI.widgets.errorMessageBlock(context.dom, error));
+      }),
+    false
+  );
+  buttonContainer.appendChild(button);
+  return buttonContainer;
+};
+
+async function saveNewFriend(subject: $rdf.NamedNode, context: DataBrowserContext) {
+  try {
+    await UI.authn.logInLoadProfile(context).then((loggedInContext) => {
+      const me = loggedInContext.me!;
+      const profileDoc = me.doc();
+
+      const kb = context.session.store;
+      const updater = kb.updater;
+      //const editable = updater.editable(profileDoc.uri, kb);
+      //if (editable) {
+        const toBeInserted = [$rdf.st(me, UI.ns.foaf("knows"), subject, profileDoc)];
+        updater.update([], toBeInserted, function (uri, ok, err) {
+          if (!ok) {
+            alert("Error adding: " + err);
+          } else {
+            alert("worked");
+          }
+        });
+      //}
+    });
+  } catch (error) {
+    throw new Error(error + " or Current user not found! Not logged in?");
+  }
+}
diff --git a/src/ProfileView.ts b/src/ProfileView.ts
@@ -1,52 +1,54 @@
-/*  Profile View
-*/
-
-import { html, TemplateResult } from "lit-html";
-import { styleMap } from "lit-html/directives/style-map.js";
-import { DataBrowserContext } from "pane-registry";
-import { NamedNode, Store } from "rdflib";
-import { card, padding, paddingSmall, responsiveGrid } from "./baseStyles";
-import { ChatWithMe } from "./ChatWithMe";
-import { FriendList } from "./FriendList";
-import { presentProfile } from "./presenter";
-import { presentCV } from './CVPresenter' // 20210527
-import { ProfileCard } from "./ProfileCard";
-import { CVCard } from "./CVCard";
-
-export const ProfileView = (
-  subject: NamedNode,
-  context: DataBrowserContext
-): TemplateResult => {
-  const profileBasics = presentProfile(subject, context.session.store as Store); // rdflib rdfs type problems
-  const rolesByType = presentCV (subject, context.session.store as Store)
-  const styles = {
-    grid: styleMap({
-      ...responsiveGrid(),
-      ...paddingSmall(),
-      background: `radial-gradient(circle, ${profileBasics.backgroundColor} 80%, ${profileBasics.highlightColor} 100%)`,
-    }),
-    card: styleMap(card()),
-    chat: styleMap({
-      ...card(),
-      ...padding(),
-    }),
-  };
-
-  return html`
-    <div style="${styles.grid}">
-      <div>
-        <div data-testid="profile-card" style="${styles.card}">
-          ${ProfileCard(profileBasics)}
-        </div>
-      </div>
-      <div data-testid="friend-list" style="${styles.card}">
-        ${FriendList(subject, context)}
-      </div>
-      <div data-testid="curriculum-vitae" style="${styles.card}">
-        ${CVCard(profileBasics, rolesByType)}
-      </div>
-      <div style="${styles.chat}">${ChatWithMe(subject, context)}</div>
-
-    </div>
-  `;
-};
+/*  Profile View
+*/
+
+import { html, TemplateResult } from "lit-html";
+import { styleMap } from "lit-html/directives/style-map.js";
+import { DataBrowserContext } from "pane-registry";
+import { NamedNode, Store } from "rdflib";
+import { card, padding, paddingSmall, responsiveGrid } from "./baseStyles";
+import { ChatWithMe } from "./ChatWithMe";
+import { FriendList } from "./FriendList";
+import { presentProfile } from "./presenter";
+import { presentCV } from './CVPresenter' // 20210527
+import { ProfileCard } from "./ProfileCard";
+import { CVCard } from "./CVCard";
+import { AddMeToYourFriends } from "./AddMeToYourFriends";
+
+export const ProfileView = (
+  subject: NamedNode,
+  context: DataBrowserContext
+): TemplateResult => {
+  const profileBasics = presentProfile(subject, context.session.store as Store); // rdflib rdfs type problems
+  const rolesByType = presentCV (subject, context.session.store as Store)
+  const styles = {
+    grid: styleMap({
+      ...responsiveGrid(),
+      ...paddingSmall(),
+      background: `radial-gradient(circle, ${profileBasics.backgroundColor} 80%, ${profileBasics.highlightColor} 100%)`,
+    }),
+    card: styleMap(card()),
+    chat: styleMap({
+      ...card(),
+      ...padding(),
+    }),
+  };
+
+  return html`
+    <div style="${styles.grid}">
+      <div>
+        <div data-testid="profile-card" style="${styles.card}">
+          ${ProfileCard(profileBasics)}
+          ${AddMeToYourFriends(subject, context)}
+        </div>
+      </div>
+      <div data-testid="friend-list" style="${styles.card}">
+        ${FriendList(subject, context)}
+      </div>
+      <div data-testid="curriculum-vitae" style="${styles.card}">
+        ${CVCard(profileBasics, rolesByType)}
+      </div>
+      <div style="${styles.chat}">${ChatWithMe(subject, context)}</div>
+
+    </div>
+  `;
+};