Add BGG profile link and 'About Me' option

src/components/Player.js

@@ -7,6 +7,9 @@ import { useStorageState } from "react-use-storage-state";
 import { Auth } from "aws-amplify";
 import { API_ENDPOINT_AUTH } from "../config";
 import { Helmet } from "react-helmet-async";
+import { ReactMarkdown } from "react-markdown/lib/react-markdown";
+import remarkGfm from "remark-gfm";
+import rehypeRaw from "rehype-raw";
 import Spinner from "./Spinner";
 import Flag from "./Flag";
 import ActivityMarker from "./ActivityMarker";
@@ -88,6 +91,7 @@ function Player() {
     if (allUsers !== null) {
       const rec = allUsers.find((u) => u.id === userid);
       if (rec !== undefined && rec !== null) {
+        console.log(rec);
         userSetter(rec);
       } else {
         userSetter(null);
@@ -193,7 +197,27 @@ function Player() {
               </>
             )}
             <ActivityMarker lastSeen={user.lastSeen} />
+            {user.bggid === undefined ? null : (
+              <span style={{ fontSize: "smaller", marginLeft: "1em" }}>
+                <a
+                  href={`https://boardgamegeek.com/user/${user.bggid}`}
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  BGG profile
+                </a>
+              </span>
+            )}
           </div>
+          {user.about === undefined ? null : (
+            <ReactMarkdown
+              remarkPlugins={[remarkGfm]}
+              rehypePlugins={[rehypeRaw]}
+              className="content has-text-centered"
+            >
+              {user.about}
+            </ReactMarkdown>
+          )}
           <div
             className="content has-text-centered"
             style={{ fontSize: "smaller" }}

src/components/UserSettingsModal.js

@@ -4,7 +4,10 @@ import Spinner from "./Spinner";
 import { cloneDeep } from "lodash";
 import { API_ENDPOINT_AUTH, API_ENDPOINT_OPEN } from "../config";
 import { Auth } from "aws-amplify";
-import { MeContext } from "../pages/Skeleton";
+import { ReactMarkdown } from "react-markdown/lib/react-markdown";
+import remarkGfm from "remark-gfm";
+import rehypeRaw from "rehype-raw";
+import { MeContext, UsersContext } from "../pages/Skeleton";
 import Modal from "./Modal";
 import { useStorageState } from "react-use-storage-state";
 import { countryCodeList } from "../lib/countryCodeList";
@@ -29,7 +32,9 @@ function UserSettingsModal(props) {
   const [emailCode, emailCodeSetter] = useState("");
   const [language, languageSetter] = useState("");
   const [country, countrySetter] = useState("");
-  const [users, usersSetter] = useState([]);
+  const [bggid, bggidSetter] = useState("");
+  const [aboutMe, aboutMeSetter] = useState("");
+  const [users, usersSetter] = useContext(UsersContext);
   const [user, userSetter] = useState(null);
   const [updated, updatedSetter] = useState(0);
   const [notifications, notificationsSetter] = useState(null);
@@ -128,21 +133,15 @@ function UserSettingsModal(props) {
       if (globalMe?.country !== undefined) {
         countrySetter(globalMe.country);
       }
+      if (globalMe?.bggid !== undefined && globalMe?.bggid !== null) {
+        bggidSetter(globalMe.bggid);
+      }
+      if (globalMe?.about !== undefined && globalMe?.about !== null) {
+        aboutMeSetter(globalMe.about);
+      }
     }
   }, [show, globalMe, notificationsSetter, explorationSetter]);
 
-  useEffect(() => {
-    async function fetchData() {
-      var url = new URL(API_ENDPOINT_OPEN);
-      url.searchParams.append("query", "user_names");
-      const res = await fetch(url);
-      const result = await res.json();
-      console.log("user_names: ", result);
-      usersSetter(result.map((u) => u.name));
-    }
-    if (show && users.length === 0) fetchData();
-  }, [show, users]);
-
   const handleNameChangeClick = () => {
     nameSetter(globalMe.name);
     changingNameSetter(true);
@@ -205,6 +204,21 @@ function UserSettingsModal(props) {
     });
   };
 
+  const saveBGGid = () => {
+    handleSettingChangeSubmit("bggid", bggid);
+    globalMeSetter((val) => ({ ...val, bggid }));
+    usersSetter((val) =>
+      val.map((u) => (u.id === globalMe?.id ? { ...u, bggid } : u))
+    );
+  };
+  const saveAbout = () => {
+    handleSettingChangeSubmit("about", aboutMe);
+    globalMeSetter((val) => ({ ...val, about: aboutMe }));
+    usersSetter((val) =>
+      val.map((u) => (u.id === globalMe?.id ? { ...u, about: aboutMe } : u))
+    );
+  };
+
   const handleEMailChangeClick = () => {
     emailSetter(user.signInUserSession.idToken.payload.email);
     changingEMailSetter(true);
@@ -782,6 +796,85 @@ function UserSettingsModal(props) {
               </div>
             </div>
           </div>
+          {/********************* BGG ID *********************/}
+          {globalMe === null ? null : (
+            <div className="field" key="bggid">
+              <label className="label" htmlFor="bggid">
+                BGG user id (optional)
+              </label>
+              <div className="control">
+                <input
+                  className="input"
+                  name="bggid"
+                  type="text"
+                  value={bggid}
+                  onChange={(e) => bggidSetter(e.target.value)}
+                />
+                <p className="help">
+                  <a
+                    style={{ textDecoration: "underline" }}
+                    href={`https://boardgamegeek.com/user/${bggid}`}
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    Test link
+                  </a>
+                </p>
+              </div>
+              {globalMe === undefined || globalMe.bggid === bggid ? null : (
+                <div className="control">
+                  <button
+                    className="button is-small apButton"
+                    onClick={saveBGGid}
+                  >
+                    Save BGG id
+                  </button>
+                </div>
+              )}
+            </div>
+          )}
+          {/********************* About Me *********************/}
+          {globalMe === null ? null : (
+            <div className="field" key="aboutme">
+              <label className="label" htmlFor="aboutme">
+                Tell others about yourself (optional;{" "}
+                <a
+                  href="https://github.github.com/gfm/"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  Markdown enabled
+                </a>
+                )
+              </label>
+              <div className="control">
+                <textarea
+                  className="textarea"
+                  rows={5}
+                  value={aboutMe}
+                  onChange={(e) => aboutMeSetter(e.target.value)}
+                ></textarea>
+                <ReactMarkdown
+                  remarkPlugins={[remarkGfm]}
+                  rehypePlugins={[rehypeRaw]}
+                  className="content help"
+                >
+                  {aboutMe}
+                </ReactMarkdown>
+              </div>
+              {globalMe === undefined || globalMe.about === aboutMe ? null : (
+                <div className="control">
+                  <button
+                    className="button is-small apButton"
+                    onClick={saveAbout}
+                  >
+                    Save about me
+                  </button>
+                </div>
+              )}
+            </div>
+          )}
+
           {/********************* notifications *********************/}
           <div className="field" key="notifications">
             <label className="label">{t("NotificationSettings")}</label>

src/pages/Skeleton.js

@@ -158,6 +158,7 @@ function Bones(props) {
         const res = await fetch(url);
         const result = await res.json();
         usersSetter(result);
+        console.log(result);
       } catch (error) {
         usersSetter(null);
       }