Add key to MarkedMustache components and remove re-renders from confi…

…g and auth context (#768)

mwdb/web/src/commons/auth/index.jsx

@@ -1,3 +1,3 @@
 export { AuthContext } from "./context";
-export { AuthProvider } from "./provider";
+export { AuthProvider, localStorageAuthKey } from "./provider";
 export { Capability, capabilitiesList } from "./capabilities";

mwdb/web/src/commons/auth/provider.jsx

@@ -3,10 +3,11 @@ import { useLocation, useNavigate } from "react-router-dom";
 
 import { api } from "../api";
 
+import { omit, isEqual, isNil } from "lodash";
 import { Capability } from "./capabilities";
 import { AuthContext } from "./context";
 
-const localStorageAuthKey = "user";
+export const localStorageAuthKey = "user";
 
 function isSessionValid(authSession) {
     if (!authSession || !authSession.token)
@@ -72,16 +73,20 @@ export function AuthProvider(props) {
     const location = useLocation();
     const navigate = useNavigate();
     const [session, _setSession] = useState(getStoredAuthSession());
-    const refreshTimer = useRef(null);
     const isAuthenticated = !!session;
 
     function setSession(newSession) {
         // Internal session setter which updates token used by Axios
         // before populating new state to the components
-        _setSession(() => {
-            setTokenForAPI(newSession && newSession.token);
-            return newSession;
-        });
+        setTokenForAPI(getStoredAuthSession() && getStoredAuthSession().token);
+        if (isNil(newSession)) {
+            _setSession(null);
+            return;
+        }
+        const newSessionWithoutToken = { ...omit(newSession, "token") };
+        if (!isEqual(session, newSessionWithoutToken)) {
+            _setSession(newSessionWithoutToken);
+        }
     }
 
     function updateSession(newSession) {
@@ -140,7 +145,9 @@ export function AuthProvider(props) {
     }
 
     function hasCapability(capability) {
-        return isAuthenticated && session.capabilities.indexOf(capability) >= 0;
+        return (
+            isAuthenticated && session?.capabilities.indexOf(capability) >= 0
+        );
     }
 
     // Effect for 401 Not authenticated to handle unexpected session expiration
@@ -189,23 +196,27 @@ export function AuthProvider(props) {
 
     // Effect for periodic session refresh
     useEffect(() => {
+        let timer;
         function setRefreshTimer() {
-            if (refreshTimer.current) return;
-            refreshTimer.current = setInterval(refreshSession, 60000);
-            refreshSession();
+            timer = setInterval(refreshSession, 60000);
         }
 
         function clearRefreshTimer() {
-            if (!refreshTimer.current) return;
-            clearInterval(refreshTimer.current);
-            refreshTimer.current = null;
+            clearInterval(timer);
         }
 
         // Set timer if user is logged in, clear otherwise
         (isAuthenticated ? setRefreshTimer : clearRefreshTimer)();
         return clearRefreshTimer;
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isAuthenticated]);
+    }, [isAuthenticated, session]);
+
+    // Make sure that the token is not in the session.
+    useEffect(() => {
+        if (session?.token) {
+            _setSession(omit(session, "token"));
+        }
+    }, [session]);
 
     // Synchronize session in another window with local session state
     useEffect(() => {

mwdb/web/src/commons/config/provider.jsx

@@ -5,6 +5,7 @@ import React, {
     useReducer,
     useCallback,
 } from "react";
+import _ from "lodash";
 import { api } from "../api";
 import { ConfigContext } from "./context";
 import { AuthContext } from "../auth";
@@ -69,7 +70,10 @@ export function ConfigProvider(props) {
     async function updatePendingUsers() {
         try {
             const response = await api.getPendingUsers();
-            setPendingUsers(response.data["users"]);
+            const users = response.data["users"];
+            if (!_.isEqual(users, pendingUsers)) {
+                setPendingUsers(users);
+            }
         } catch (error) {
             setServerConfig({
                 type: configError,
@@ -78,7 +82,7 @@ export function ConfigProvider(props) {
         }
     }
 
-    const getPendingUsers = useCallback(updatePendingUsers, []);
+    const getPendingUsers = useCallback(updatePendingUsers, [pendingUsers]);
 
     useEffect(() => {
         updateServerInfo();

mwdb/web/src/components/AttributesAddModal.jsx

@@ -206,15 +206,22 @@ export default function AttributesAddModal({ isOpen, onAdd, onRequestClose }) {
                                 }}
                             >
                                 <tbody>
-                                    <RichAttributeRenderer
-                                        template={richTemplate}
-                                        value={
-                                            attributeType === "string"
-                                                ? JSON.stringify(attributeValue)
-                                                : attributeValue
-                                        }
-                                        setInvalid={setInvalid}
-                                    />
+                                    <tr>
+                                        <th>{"My attribute"}</th>
+                                        <td>
+                                            <RichAttributeRenderer
+                                                template={richTemplate}
+                                                value={
+                                                    attributeType === "string"
+                                                        ? JSON.stringify(
+                                                              attributeValue
+                                                          )
+                                                        : attributeValue
+                                                }
+                                                setInvalid={setInvalid}
+                                            />
+                                        </td>
+                                    </tr>
                                 </tbody>
                             </table>
                         </div>

mwdb/web/src/components/Docs.jsx

@@ -1,13 +1,12 @@
-import React, { Suspense, useContext, useEffect, useState } from "react";
+import React, { Suspense, useEffect, useState } from "react";
 
 import { api } from "@mwdb-web/commons/api";
-import { AuthContext } from "@mwdb-web/commons/auth";
+import { localStorageAuthKey } from "@mwdb-web/commons/auth";
 import { View } from "@mwdb-web/commons/ui";
 
 const SwaggerUI = React.lazy(() => import("swagger-ui-react"));
 
 export default function Docs() {
-    const auth = useContext(AuthContext);
     const [apiSpec, setApiSpec] = useState({});
 
     async function updateSpec() {
@@ -23,6 +22,18 @@ export default function Docs() {
         setApiSpec(spec.data);
     }
 
+    function requestInterceptor(req) {
+        const token = JSON.parse(
+            localStorage.getItem(localStorageAuthKey)
+        ).token;
+
+        if (token) {
+            req.headers.Authorization = `Bearer ${token}`;
+        }
+
+        return req;
+    }
+
     useEffect(() => {
         updateSpec();
     }, []);
@@ -34,12 +45,7 @@ export default function Docs() {
                     spec={apiSpec}
                     url=""
                     docExpansion="list"
-                    onComplete={(swagger) => {
-                        swagger.preauthorizeApiKey(
-                            "bearerAuth",
-                            auth.user.token
-                        );
-                    }}
+                    requestInterceptor={requestInterceptor}
                 />
             </Suspense>
         </View>

mwdb/web/src/components/RichAttribute/MarkedMustache.jsx

@@ -1,5 +1,6 @@
 import React from "react";
 import Mustache from "mustache";
+import { uniqueId } from "lodash";
 import { lexer, defaults, Tokenizer } from "marked";
 import { DataTable } from "@mwdb-web/commons/ui";
 import { escapeSearchValue } from "@mwdb-web/commons/helpers";
@@ -214,27 +215,37 @@ function renderTokens(tokens, options) {
             return token.text;
         },
         strong(token) {
-            return <strong>{renderTokens(token.tokens, options)}</strong>;
+            return (
+                <strong key={uniqueId()}>
+                    {renderTokens(token.tokens, options)}
+                </strong>
+            );
         },
         em(token) {
-            return <em>{renderTokens(token.tokens, options)}</em>;
+            return (
+                <em key={uniqueId()}>{renderTokens(token.tokens, options)}</em>
+            );
         },
         del(token) {
-            return <del>{renderTokens(token.tokens, options)}</del>;
+            return (
+                <del key={uniqueId()}>
+                    {renderTokens(token.tokens, options)}
+                </del>
+            );
         },
         hr(token) {
-            return <hr />;
+            return <hr key={uniqueId()} />;
         },
         blockquote(token) {
             return (
-                <blockquote className="blockquote">
+                <blockquote key={uniqueId()} className="blockquote">
                     {renderTokens(token.tokens, options)}
                 </blockquote>
             );
         },
         paragraph(token) {
             return (
-                <p style={{ margin: "0" }}>
+                <p key={uniqueId()} style={{ margin: "0" }}>
                     {renderTokens(token.tokens, options)}
                 </p>
             );
@@ -246,6 +257,7 @@ function renderTokens(tokens, options) {
                     "?" + new URLSearchParams({ q: query }).toString();
                 return (
                     <Link
+                        key={uniqueId()}
                         to={{
                             pathname: options.searchEndpoint,
                             search,
@@ -256,37 +268,41 @@ function renderTokens(tokens, options) {
                 );
             }
             return (
-                <a href={token.href}>{renderTokens(token.tokens, options)}</a>
+                <a key={uniqueId()} href={token.href}>
+                    {renderTokens(token.tokens, options)}
+                </a>
             );
         },
         list(token) {
             return (
-                <ul style={{ margin: "0" }}>
+                <ul key={uniqueId()} style={{ margin: "0" }}>
                     {token.items.map((item) => renderTokens([item]))}
                 </ul>
             );
         },
         list_item(token) {
-            return <li>{renderTokens(token.tokens)}</li>;
+            return <li key={uniqueId()}>{renderTokens(token.tokens)}</li>;
         },
         html(token) {
             return token.text;
         },
         table(token) {
             return (
-                <DataTable>
+                <DataTable key={uniqueId()}>
                     <thead>
                         <tr>
-                            {token.header.map((head) => (
-                                <th>{renderTokens(head.tokens, options)}</th>
+                            {token.header.map((head, index) => (
+                                <th key={index}>
+                                    {renderTokens(head.tokens, options)}
+                                </th>
                             ))}
                         </tr>
                     </thead>
                     <tbody>
-                        {token.rows.map((row) => (
-                            <tr>
-                                {row.map((cell) => (
-                                    <td>
+                        {token.rows.map((row, rowsIndex) => (
+                            <tr key={rowsIndex}>
+                                {row.map((cell, cellIndex) => (
+                                    <td key={cellIndex}>
                                         {renderTokens(cell.tokens, options)}
                                     </td>
                                 ))}
@@ -297,10 +313,10 @@ function renderTokens(tokens, options) {
             );
         },
         codespan(token) {
-            return <code>{token.text}</code>;
+            return <code key={uniqueId()}>{token.text}</code>;
         },
         code(token) {
-            return <pre>{token.text}</pre>;
+            return <pre key={uniqueId()}>{token.text}</pre>;
         },
         space() {
             return [];

mwdb/web/src/components/RichAttribute/RichAttributePreview.jsx

@@ -101,7 +101,9 @@ export default function RichAttributePreview({
             >
                 <option value="custom">(custom template)</option>
                 {exampleTemplates.map((value, index) => (
-                    <option value={index}>{value.name}</option>
+                    <option key={index} value={index}>
+                        {value.name}
+                    </option>
                 ))}
             </select>
             <div className="row">
@@ -132,7 +134,7 @@ export default function RichAttributePreview({
                             type="radio"
                             id="showValue"
                             checked={!showContext}
-                            onClick={() => setShowContext(false)}
+                            onChange={() => setShowContext(false)}
                         />
                         <label className="form-check-label" for="showValue">
                             Value
@@ -144,7 +146,7 @@ export default function RichAttributePreview({
                             type="radio"
                             id="showContext"
                             checked={showContext}
-                            onClick={() => setShowContext(true)}
+                            onChange={() => setShowContext(true)}
                         />
                         <label className="form-check-label" for="showContext">
                             Context
@@ -174,13 +176,11 @@ export default function RichAttributePreview({
             <div className="row">
                 <div className="col">
                     <strong>Preview</strong>
-                    <DataTable>
-                        <RichAttributeRenderer
-                            template={template}
-                            value={value}
-                            setInvalid={setInvalid}
-                        />
-                    </DataTable>
+                    <RichAttributeRenderer
+                        template={template}
+                        value={value}
+                        setInvalid={setInvalid}
+                    />
                 </div>
             </div>
             <div className="btn-group">

mwdb/web/src/components/RichAttribute/RichAttributeRenderer.jsx

@@ -14,10 +14,5 @@ export default function RichAttributeRenderer({ template, value, setInvalid }) {
         renderedValue = e.toString();
         setInvalid(true);
     }
-    return (
-        <tr>
-            <th>{"My attribute"}</th>
-            <td>{renderedValue}</td>
-        </tr>
-    );
+    return renderedValue;
 }