Tag functionality going live

Perlkonig · Perlkonig · commit 63e9b298a956 · 2023-12-22T07:53:12.000-07:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,7 +15,7 @@
   "dependencies": {
     "@abstractplay/gameslib": "latest",
     "@abstractplay/renderer": "latest",
-    "@tanstack/react-table": "^8.9.3",
+    "@tanstack/react-table": "^8.11.2",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/user-event": "13.5.0",
     "aws-amplify": "5.3.12",
diff --git a/public/locales/en/apfront.json b/public/locales/en/apfront.json
@@ -79,6 +79,7 @@
     "DurationHelp_one": "This challenge will expire after being accepted the first time.",
     "DurationHelp_other": "This challenge will expire after being accepted {{count}} times.",
     "DurationHelpPersistent": "This challenge will remain available until you revoke it.",
+    "EditTags": "Edit Tags",
     "EMail": "Email address",
     "EMailCode": "Emailed code",
     "EMailCodeHelp": "The login system just sent a code to the email address you provided. Please enter it here.",
@@ -201,6 +202,7 @@
     "RevokeChallenge": "Revoke challenge",
     "RotateBoard": "Rotate board",
     "Save": "Save",
+    "SaveChanges": "Save Changes",
     "Search": "Search",
     "Seating": "Seating",
     "Seating1": "I play first",
diff --git a/src/components/MetaContainer.js b/src/components/MetaContainer.js
@@ -14,6 +14,7 @@ function MetaContainer(props) {
   const [counts, countsSetter] = useState(null);
   const [users, usersSetter] = useState(null);
   const [summary, summarySetter] = useState(null);
+  const [updateCounter, updateCounterSetter] = useState(0);
   const { metaGame } = useParams();
   const { i18n } = useTranslation();
   addResource(i18n.language);
@@ -36,7 +37,7 @@ function MetaContainer(props) {
       }
     }
     fetchData();
-  }, []);
+  }, [updateCounter]);
 
   useEffect(() => {
     async function fetchData() {
@@ -163,6 +164,7 @@ function MetaContainer(props) {
         toggleStar={toggleStar.bind(this)}
         handleChallenge={handleNewChallenge.bind(this)}
         users={users}
+        updateSetter={updateCounterSetter}
       />
     </Fragment>
   );
diff --git a/src/components/MetaContainer/Table.js b/src/components/MetaContainer/Table.js
@@ -5,6 +5,7 @@ import React, {
   useMemo,
   Fragment,
   useCallback,
+  useRef,
 } from "react";
 import { Link } from "react-router-dom";
 import { gameinfo } from "@abstractplay/gameslib";
@@ -28,6 +29,8 @@ import Modal from "../Modal";
 import NewChallengeModal from "../NewChallengeModal";
 import ExpandableDiv from "../ExpandableDiv";
 import { useStorageState } from "react-use-storage-state";
+import { Auth } from "aws-amplify";
+import { API_ENDPOINT_AUTH } from "../../config";
 
 const allSize = Number.MAX_SAFE_INTEGER;
 // props:
@@ -37,18 +40,21 @@ const allSize = Number.MAX_SAFE_INTEGER;
 //   - summary
 //   - toggleStar
 //   - handleChallenge
-function Table(props) {
-  const [globalMe] = useContext(MeContext);
+function Table({toggleStar, handleChallenge, metaGame, updateSetter, ...props}) {
+  const [globalMe, globalMeSetter] = useContext(MeContext);
   const [activeImgModal, activeImgModalSetter] = useState("");
   const [activeChallengeModal, activeChallengeModalSetter] = useState("");
+  const [showTagModal, showTagModalSetter] = useState(false);
   const [expandedPara, expandedParaSetter] = useState([]);
+  const [selectedGame, selectedGameSetter] = useState("");
+  const [newTag, newTagSetter] = useState("");
+  const [myTags, myTagsSetter] = useState([]);
   const { t, i18n } = useTranslation();
   const [sorting, setSorting] = useState([{ id: "gameName", desc: false }]);
   const [filterStars, filterStarsSetter] = useState(false);
-  const [globalFilter, globalFilterSetter] = useState(props.metaGame);
+  const [globalFilter, globalFilterSetter] = useState(metaGame);
   const [showState, showStateSetter] = useStorageState("allgames-show", 10);
-  const toggleStar = props.toggleStar;
-  const handleChallenge = props.handleChallenge;
+  const tagInput = useRef(null);
   addResource(i18n.language);
 
   useEffect(() => {
@@ -79,6 +85,14 @@ function Table(props) {
     [expandedPara, expandedParaSetter]
   );
 
+  useEffect(() => {
+    if (globalMe !== undefined && globalMe !== null && globalMe.tags !== undefined) {
+        myTagsSetter([...globalMe.tags]);
+    } else {
+        myTagsSetter([]);
+    }
+  }, [globalMe]);
+
   /**
    * Table columns
    *    Name
@@ -129,6 +143,10 @@ function Table(props) {
               globalMe.stars.includes(metaGame)
                 ? true
                 : false,
+            tags:
+                props.counts !== null && metaGame in props.counts
+                  ? props.counts[metaGame].tags.join("||")
+                  : "",
             stars:
               props.counts !== null && metaGame in props.counts
                 ? props.counts[metaGame].stars
@@ -270,6 +288,13 @@ function Table(props) {
         ),
         enableSorting: false,
       }),
+      columnHelper.accessor("tags", {
+        header: "Tags",
+        cell: (props) => props.getValue().split("||").map(tag => tag === "" ? null : (
+            <span className="tag">{tag}</span>
+        )).reduce((acc, x) => acc === null ? x : <>{acc} {x}</>, null),
+        enableSorting: false,
+      }),
       columnHelper.accessor("stars", {
         header: "Stars",
       }),
@@ -345,9 +370,67 @@ function Table(props) {
     ]
   );
 
+  const addTag = () => {
+    const idx = myTags.findIndex(t => t.meta === selectedGame);
+    if (idx !== -1) {
+        const unique = new Set();
+        unique.add(newTag);
+        for (const tag of myTags[idx].tags) {
+            unique.add(tag);
+        }
+        myTags[idx] = {meta: selectedGame, tags: [...unique.values()].sort((a, b) => a.localeCompare(b))};
+    } else {
+        myTags.push({meta: selectedGame, tags: [newTag]})
+    }
+    newTagSetter("");
+    tagInput.current.focus();
+  }
+
+  const saveTags = async () => {
+    try {
+        const usr = await Auth.currentAuthenticatedUser();
+        const res = await fetch(API_ENDPOINT_AUTH, {
+            method: "POST",
+            headers: {
+                Accept: "application/json",
+                "Content-Type": "application/json",
+                Authorization: `Bearer ${usr.signInUserSession.idToken.jwtToken}`,
+            },
+            body: JSON.stringify({
+                query: "save_tags",
+                pars: {
+                    payload: myTags,
+                },
+            }),
+        });
+        if (res.status !== 200) {
+            const result = await res.json();
+            console.log(
+                `An error occured while saving tags:\n${result}`
+            );
+        } else {
+            // update globalMe tags
+            const newMe = JSON.parse(JSON.stringify(globalMe));
+            newMe.tags = myTags;
+            globalMeSetter(newMe);
+            // triger meta game refresh
+            updateSetter(v => v + 1);
+        }
+    } catch (error) {
+        console.log(error);
+    }
+    showTagModalSetter(false);
+  }
+
   const table = useReactTable({
     data,
     columns,
+    // filterFns: {
+    //     customIncludesFilter: (row, columnId, filterValue) => {
+    //       // return the filtered rows
+    //       return row.getValue(columnId).includes(filterValue);
+    //     },
+    // },
     state: {
       sorting,
       columnVisibility: {
@@ -531,6 +614,23 @@ function Table(props) {
                             </span>
                           </>
                         )}
+                        {(header.id === "tags" && globalMe !== null && globalMe !== undefined) ? (
+                          <>
+                            {" "}
+                            <span
+                              style={{
+                                fontSize: "smaller",
+                                fontWeight: "normal",
+                                paddingTop: 0,
+                                textDecoration: "underline",
+                                cursor: "pointer",
+                              }}
+                              onClick={() => showTagModalSetter(true)}
+                            >
+                              (edit)
+                            </span>
+                          </>
+                        ) : null}
                       </div>
                     )}
                   </th>
@@ -552,6 +652,68 @@ function Table(props) {
         </table>
         {tableNavigation}
       </div>
+
+      <Modal
+          show={showTagModal}
+          title={t("EditTags")}
+          buttons={[
+            { label: t("SaveChanges"), action: saveTags },
+            {
+              label: t("Close"),
+              action: () => showTagModalSetter(false),
+            },
+          ]}
+        >
+          <div className="content">
+            <p>Tags are publicly visible. Please familiarize yourself with our <Link to="/legal">terms of service</Link>. Don't forget to save your changes before closing this dialog.</p>
+            <p>The best tags are short (preferably one word) and lowercase.</p>
+          </div>
+          <div className="field is-grouped">
+            <div className="control">
+                <div className="select is-small">
+                    <select id="gameSelect" value={selectedGame} onChange={(e) => selectedGameSetter(e.target.value)}>
+                        <option value={""} key={`gameSelectBlank`}>--Choose a game--</option>
+                    {props.games.map(meta => {
+                        const info = gameinfo.get(meta);
+                        return (<option value={meta} key={`gameSelect|${meta}`}>{info.name}</option>)
+                    })}
+                    </select>
+                </div>
+            </div>
+            <div className="control">
+                <input className="input is-small" type="text" placeholder="Type new tag here" value={newTag} onChange={(e) => newTagSetter(e.target.value)} ref={tagInput} />
+            </div>
+          </div>
+          <div className="control">
+            <button className="button is-small apButton" onClick={addTag} disabled={newTag === "" || selectedGame === ""}>Add tag</button>
+          </div>
+          {myTags.length === 0 ? null :
+            <table className="table">
+                <thead>
+                    <tr>
+                        <th>Game</th>
+                        <th>Tags</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {myTags.sort((a,b) => a.meta.localeCompare(b.meta)).map(({meta, tags}) => {
+                        const info = gameinfo.get(meta);
+                        return (
+                            <tr key={`MyTagRow|${meta}`}>
+                                <td>{info.name}</td>
+                                <td>
+                                    {tags.map(tag => (
+                                        <span className="tag">{tag}</span>
+                                    )).reduce((acc, x) => acc === null ? x : <>{acc} {x}</>, null)}
+                                </td>
+                            </tr>
+                        );
+                    })}
+                </tbody>
+            </table>
+          }
+      </Modal>
+
     </article>
   );
 }
diff --git a/src/components/Stats.js b/src/components/Stats.js
@@ -62,7 +62,7 @@ const explanations = [
     ["topPlayers", `This table lists each available game and variant combination along with the player with the highest Elo rating for that combination.`],
     ["numPlays", `This table lists each game, how many times it was played, and by how many unique players. It also provides a histogram of games completed for that game. The preview shows the last 10 weeks, with the most recent week on the right. Clicking on the preview will show you the full history of games completed, in seven-day "buckets," with the most recent week on the right.`],
     ["playerStats", `This shows each recorded player along with their total games played, a count of unique games, and the number of different opponents they played. It also provides an \`h-index\`, which represents the number of games you've played at least that many times (e.g., if you've played three different games only one time each, then your index is 1. As soon as you've played those three games at least three times *each*, the index will increase to 3). An activity histogram is also provided, showing the number of games completed each week, with the most recent week on the right. The preview shows the most recent ten weeks. Clicking on it will show you the full history.`],
-    ["gameStats", `This table shows each game and variant combination along with the number of recorded games, the average length of the game (number of moves), the median length, and the rate of first-player wins. **The first-player win stats should be treated with care!** The sample size is small and biased. There are many confounding factors that could explain an extreme rate. Note that the rate completely ignores whether the pie rule was invoked. This is a measure of how often the first player (regardless of how many times the person sitting in that chair may change) wins the game.`],
+    ["gameStats", `This table shows each game and variant combination along with the number of recorded games, the average length of the game (number of moves), the median length, and the rate of first-player wins. **The first-player win stats should be treated with care!** The sample size is small and biased. There are many confounding factors that could explain an extreme rate. Note that the rate completely ignores whether the pie rule was invoked. This is a measure of how often the first player (regardless of how many times the person sitting in that chair may change) wins the game. Draws are counted as half a win for the first player (so a game played three times with a win, a loss, and a draw would have a first-player win percentage of 50%).`],
 ];
 
 function Stats(props) {
