@openneuro/app 4.29.9 → 4.30.0-alpha.0

package/src/scripts/users/components/edit-list.tsx

@@ -1,41 +1,58 @@
-import React, { useState } from 'react';
-import { Button } from '@openneuro/components/button';
-import '../scss/user-meta-blocks.scss';
+import React, { useState } from "react"
+import { Button } from "@openneuro/components/button"
+import "../scss/user-meta-blocks.scss"
 
 interface EditListProps {
-  placeholder?: string;
-  elements?: string[];
-  setElements: (elements: string[]) => void;
+  placeholder?: string
+  elements?: string[]
+  setElements: (elements: string[]) => void
+  validation?: RegExp
+  validationMessage?: string
 }
 
 /**
  * EditList Component
  * Allows adding and removing strings from a list.
  */
-export const EditList: React.FC<EditListProps> = ({ placeholder = 'Enter item', elements = [], setElements }) => {
-  const [newElement, setNewElement] = useState<string>('');
-  const [warnEmpty, setWarnEmpty] = useState<boolean>(false);
+export const EditList: React.FC<EditListProps> = (
+  {
+    placeholder = "Enter item",
+    elements = [],
+    setElements,
+    validation,
+    validationMessage,
+  },
+) => {
+  const [newElement, setNewElement] = useState<string>("")
+  const [warnEmpty, setWarnEmpty] = useState<boolean>(false)
+  const [warnValidation, setWarnValidation] = useState<string | null>(null)
 
-  /**
-   * Remove an element from the list by index
-   * @param index - The index of the element to remove
-   */
   const removeElement = (index: number): void => {
-    setElements(elements.filter((_, i) => i !== index));
-  };
+    setElements(elements.filter((_, i) => i !== index))
+  }
 
-  /**
-   * Add a new element to the list
-   */
+  // Add a new element to the list
   const addElement = (): void => {
     if (!newElement.trim()) {
-      setWarnEmpty(true);
+      setWarnEmpty(true)
+      setWarnValidation(null)
+    } else if (validation && !validation.test(newElement.trim())) {
+      setWarnValidation(validationMessage || "Invalid input format")
+      setWarnEmpty(false)
     } else {
-      setElements([...elements, newElement.trim()]);
-      setWarnEmpty(false);
-      setNewElement('');
+      setElements([...elements, newElement.trim()])
+      setWarnEmpty(false)
+      setWarnValidation(null)
+      setNewElement("")
     }
-  };
+  }
+
+  // Handle Enter/Return key press to add element
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {
+    if (e.key === "Enter") {
+      addElement()
+    }
+  }
 
   return (
     <div className="edit-list-container">
@@ -46,6 +63,7 @@ export const EditList: React.FC<EditListProps> = ({ placeholder = 'Enter item',
           placeholder={placeholder}
           value={newElement}
           onChange={(e) => setNewElement(e.target.value)}
+          onKeyDown={handleKeyDown}
         />
         <Button
           className="edit-list-add"
@@ -55,7 +73,14 @@ export const EditList: React.FC<EditListProps> = ({ placeholder = 'Enter item',
           onClick={addElement}
         />
       </div>
-      {warnEmpty && <small className="warning-text">Your input was empty</small>}
+      {warnEmpty && (
+        <small className="warning-text">
+          Your input was empty
+        </small>
+      )}
+      {warnValidation && (
+        <small className="warning-text">{warnValidation}</small>
+      )}
       <div className="edit-list-items">
         {elements.map((element, index) => (
           <div key={index} className="edit-list-group-item">
@@ -67,13 +92,12 @@ export const EditList: React.FC<EditListProps> = ({ placeholder = 'Enter item',
               icon="fa fa-times"
               label="Remove"
               color="red"
-              onClick={() => removeElement(index)}
+              onClick={() =>
+                removeElement(index)}
             />
           </div>
         ))}
       </div>
     </div>
-  );
-};
-
-
+  )
+}

package/src/scripts/users/components/edit-string.tsx

@@ -1,29 +1,62 @@
-import React, { useState } from 'react';
-import { Button } from '@openneuro/components/button';
-import '../scss/user-meta-blocks.scss';
+import React, { useEffect, useState } from "react"
+import { Button } from "@openneuro/components/button"
+import "../scss/user-meta-blocks.scss"
 
 interface EditStringProps {
-  value?: string;
-  setValue: (value: string) => void;
-  placeholder?: string;
+  value?: string
+  setValue: (value: string) => void
+  placeholder?: string
+  closeEditing: () => void
+  validation?: RegExp
+  validationMessage?: string
 }
 
-/**
- * EditString Component
- * Allows editing a single string value.
- */
-export const EditString: React.FC<EditStringProps> = ({ value = '', setValue, placeholder = 'Enter text' }) => {
-  const [currentValue, setCurrentValue] = useState<string>(value);
-  const [warnEmpty, setWarnEmpty] = useState<boolean>(false);
+export const EditString: React.FC<EditStringProps> = (
+  {
+    value = "",
+    setValue,
+    placeholder = "Enter text",
+    closeEditing,
+    validation,
+    validationMessage,
+  },
+) => {
+  const [currentValue, setCurrentValue] = useState<string>(value)
+  const [warnEmpty, setWarnEmpty] = useState<string | null>(null)
+  const [warnValidation, setWarnValidation] = useState<string | null>(null)
 
-  const handleSave = (): void => {
-    if (!currentValue.trim()) {
-      setWarnEmpty(true);
+  useEffect(() => {
+    // Show warning only if there was an initial value and it was deleted
+    if (value !== "" && currentValue === "") {
+      setWarnEmpty(
+        "Your input is empty. This will delete the previously saved value..",
+      )
     } else {
-      setWarnEmpty(false);
-      setValue(currentValue.trim());
+      setWarnEmpty(null)
+    }
+
+    // Validation logic
+    if (validation && currentValue && !validation.test(currentValue)) {
+      setWarnValidation(validationMessage || "Invalid input")
+    } else {
+      setWarnValidation(null)
+    }
+  }, [currentValue, value, validation, validationMessage])
+
+  const handleSave = (): void => {
+    if (!warnValidation) {
+      setValue(currentValue.trim())
+      closeEditing()
     }
-  };
+  }
+
+  // Handle Enter key press for saving
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === "Enter") {
+      event.preventDefault()
+      handleSave()
+    }
+  }
 
   return (
     <div className="edit-string-container">
@@ -34,6 +67,7 @@ export const EditString: React.FC<EditStringProps> = ({ value = '', setValue, pl
           placeholder={placeholder}
           value={currentValue}
           onChange={(e) => setCurrentValue(e.target.value)}
+          onKeyDown={handleKeyDown}
         />
         <Button
           className="edit-string-save"
@@ -43,7 +77,14 @@ export const EditString: React.FC<EditStringProps> = ({ value = '', setValue, pl
           onClick={handleSave}
         />
       </div>
-      {warnEmpty && <small className="warning-text">The input cannot be empty</small>}
+      {/* Show empty value warning only if content was deleted */}
+      {warnEmpty && currentValue === "" && (
+        <small className="warning-text">{warnEmpty}</small>
+      )}
+      {/* Show validation error */}
+      {warnValidation && (
+        <small className="warning-text">{warnValidation}</small>
+      )}
     </div>
-  );
-};
+  )
+}

package/src/scripts/users/components/editable-content.tsx

@@ -1,16 +1,19 @@
-import React, { useState } from "react";
-import { EditList } from "./edit-list";
-import { EditString } from "./edit-string";
-import { EditButton } from "./edit-button";
-import { CloseButton } from "./close-button";
-import { Markdown } from "../../utils/markdown";
-import '../scss/editable-content.scss'
+import React, { useState } from "react"
+import { EditList } from "./edit-list"
+import { EditString } from "./edit-string"
+import { EditButton } from "./edit-button"
+import { CloseButton } from "./close-button"
+import { Markdown } from "../../utils/markdown"
+import "../scss/editable-content.scss"
 
 interface EditableContentProps {
-  editableContent: string[] | string;
-  setRows: React.Dispatch<React.SetStateAction<string[] | string>>;
-  className: string;
-  heading: string;
+  editableContent: string[] | string
+  setRows: React.Dispatch<React.SetStateAction<string[] | string>>
+  className: string
+  heading: string
+  validation?: RegExp
+  validationMessage?: string
+  "data-testid"?: string
 }
 
 export const EditableContent: React.FC<EditableContentProps> = ({
@@ -18,46 +21,78 @@ export const EditableContent: React.FC<EditableContentProps> = ({
   setRows,
   className,
   heading,
+  validation,
+  validationMessage,
+  "data-testid": testId,
 }) => {
-  const [editing, setEditing] = useState(false);
-
-  return (
-    <div className={`user-meta-block ${className}`}>
-      <span className="umb-heading"><h4>{heading}</h4>{editing ? <CloseButton action={() => setEditing(false)} /> : <EditButton action={() => setEditing(true)} />}</span>
-      {editing ? (
-        <>
-          {Array.isArray(editableContent) ? (
-            <EditList
-              placeholder="Add new item"
-              elements={editableContent}
-              setElements={setRows as React.Dispatch<React.SetStateAction<string[]>>}
-            />
-          ) : (
-            <EditString
-              value={editableContent}
-              setValue={setRows as React.Dispatch<React.SetStateAction<string>>}
-              placeholder="Edit content"
-            />
-          )}
-        </>
-      ) : (
-        <>
-          {Array.isArray(editableContent) ? (
-            <ul>
-              {editableContent.map((item, index) => (
-                <li key={index}>
-                  <Markdown>{item}</Markdown>
-                </li>
-              ))}
-            </ul>
-          ) : (
-            <Markdown>{editableContent}</Markdown>
-          )}
-        </>
-      )}
-    </div>
-  );
-};
+  const [editing, setEditing] = useState(false)
 
+  const closeEditing = () => {
+    setEditing(false)
+  }
 
+  // Function to handle validation of user input
+  const handleValidation = (value: string): boolean => {
+    if (validation && !validation.test(value)) {
+      return false
+    }
+    return true
+  }
 
+  return (
+    <div className={`user-meta-block ${className}`} data-testid={testId}>
+      <span className="umb-heading">
+        <h4>{heading}</h4>
+        {editing
+          ? <CloseButton action={closeEditing} />
+          : <EditButton action={() => setEditing(true)} />}
+      </span>
+      {editing
+        ? (
+          <>
+            {Array.isArray(editableContent)
+              ? (
+                <EditList
+                  placeholder="Add new item"
+                  elements={editableContent}
+                  setElements={setRows as React.Dispatch<
+                    React.SetStateAction<string[]>
+                  >}
+                  validation={validation}
+                  validationMessage={validationMessage}
+                />
+              )
+              : (
+                <EditString
+                  value={editableContent}
+                  setValue={(newValue: string) => {
+                    if (handleValidation(newValue)) {
+                      setRows(newValue)
+                    }
+                  }}
+                  placeholder="Edit content"
+                  closeEditing={closeEditing}
+                  validation={validation}
+                  validationMessage={validationMessage}
+                />
+              )}
+          </>
+        )
+        : (
+          <>
+            {Array.isArray(editableContent)
+              ? (
+                <ul>
+                  {editableContent.map((item, index) => (
+                    <li key={index}>
+                      <Markdown>{item}</Markdown>
+                    </li>
+                  ))}
+                </ul>
+              )
+              : <Markdown>{editableContent}</Markdown>}
+          </>
+        )}
+    </div>
+  )
+}

package/src/scripts/users/user-account-view.tsx

@@ -1,23 +1,90 @@
-import React, { useState } from "react";
-import { EditableContent } from "./components/editable-content";
-import styles from './scss/useraccountview.module.scss'
+import React, { useState } from "react"
+import { useMutation } from "@apollo/client"
+import { EditableContent } from "./components/editable-content"
+import styles from "./scss/useraccountview.module.scss"
+import { GET_USER_BY_ORCID, UPDATE_USER } from "./user-query"
 
 interface UserAccountViewProps {
   user: {
-    name: string;
-    email: string;
-    orcid: string;
-    links: string[];
-    location: string;
-    institution: string;
-    github?: string;
-  };
+    name: string
+    email: string
+    orcid: string
+    links: string[]
+    location: string
+    institution: string
+    github?: string
+  }
 }
 
 export const UserAccountView: React.FC<UserAccountViewProps> = ({ user }) => {
-  const [userLinks, setLinks] = useState<string[]>(user.links || []);
-  const [userLocation, setLocation] = useState<string>(user.location || "");
-  const [userInstitution, setInstitution] = useState<string>(user.institution || "");
+  const [userLinks, setLinks] = useState<string[]>(user.links || [])
+  const [userLocation, setLocation] = useState<string>(user.location || "")
+  const [userInstitution, setInstitution] = useState<string>(
+    user.institution || "",
+  )
+  const [updateUser] = useMutation(UPDATE_USER)
+
+  const handleLinksChange = async (newLinks: string[]) => {
+    setLinks(newLinks)
+    try {
+      await updateUser({
+        variables: {
+          id: user.orcid,
+          links: newLinks,
+        },
+        refetchQueries: [
+          {
+            query: GET_USER_BY_ORCID,
+            variables: { id: user.orcid },
+          },
+        ],
+      })
+    } catch {
+      // Error handling can be implemented here if needed
+    }
+  }
+
+  const handleLocationChange = async (newLocation: string) => {
+    setLocation(newLocation)
+
+    try {
+      await updateUser({
+        variables: {
+          id: user.orcid,
+          location: newLocation,
+        },
+        refetchQueries: [
+          {
+            query: GET_USER_BY_ORCID,
+            variables: { id: user.orcid },
+          },
+        ],
+      })
+    } catch {
+      // Error handling can be implemented here if needed
+    }
+  }
+
+  const handleInstitutionChange = async (newInstitution: string) => {
+    setInstitution(newInstitution)
+
+    try {
+      await updateUser({
+        variables: {
+          id: user.orcid,
+          institution: newInstitution,
+        },
+        refetchQueries: [
+          {
+            query: GET_USER_BY_ORCID,
+            variables: { id: user.orcid },
+          },
+        ],
+      })
+    } catch {
+      // Error handling can be implemented here if needed
+    }
+  }
 
   return (
     <div data-testid="user-account-view" className={styles.useraccountview}>
@@ -35,28 +102,41 @@ export const UserAccountView: React.FC<UserAccountViewProps> = ({ user }) => {
           <span>ORCID:</span>
           {user.orcid}
         </li>
-        {user.github ? <li><span>github:</span>{user.github}</li> : <li>Connect your github</li>}
+        {user.github
+          ? (
+            <li>
+              <span>GitHub:</span>
+              {user.github}
+            </li>
+          )
+          : <li>Connect your GitHub</li>}
       </ul>
 
       <EditableContent
         editableContent={userLinks}
-        setRows={setLinks}
+        setRows={handleLinksChange}
         className="custom-class"
         heading="Links"
+        // eslint-disable-next-line no-useless-escape
+        validation={/((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)/} // URL validation regex
+        validationMessage="Invalid URL format. Please use a valid link."
+        data-testid="links-section"
       />
+
       <EditableContent
         editableContent={userLocation}
-        setRows={(newLocation: string) => setLocation(newLocation)}
+        setRows={handleLocationChange}
         className="custom-class"
         heading="Location"
+        data-testid="location-section"
       />
       <EditableContent
         editableContent={userInstitution}
-        setRows={(newInstitution: string) => setInstitution(newInstitution)}
+        setRows={handleInstitutionChange}
         className="custom-class"
         heading="Institution"
+        data-testid="institution-section"
       />
     </div>
-  );
-};
-
+  )
+}

package/src/scripts/users/user-card.tsx

@@ -1,22 +1,22 @@
-import React from "react";
-import styles from "./scss/usercard.module.scss";
+import React from "react"
+import styles from "./scss/usercard.module.scss"
 
 export interface User {
-  name: string;
-  location?: string;
-  email: string;
-  orcid: string;
-  institution?: string; 
-  links?: string[]; 
-  github?: string; 
+  name: string
+  location?: string
+  email: string
+  orcid: string
+  institution?: string
+  links?: string[]
+  github?: string
 }
 
 export interface UserCardProps {
-  user: User;
+  user: User
 }
 
 export const UserCard: React.FC<UserCardProps> = ({ user }) => {
-  const { location, institution, email, orcid, links = [], github, name } = user;
+  const { location, institution, email, orcid, links = [], github, name } = user
 
   return (
     <div className={styles.userCard}>
@@ -43,17 +43,19 @@ export const UserCard: React.FC<UserCardProps> = ({ user }) => {
             {email}
           </a>
         </li>
-        <li className={styles.orcid}>
-          <i className="fab fa-orcid" aria-hidden="true"></i>
-          <a
-            href={`https://orcid.org/${orcid}`}
-            target="_blank"
-            rel="noopener noreferrer"
-            aria-label={`ORCID profile of ${name}`}
-          >
-            {orcid}
-          </a>
-        </li>
+        {orcid && (
+          <li className={styles.orcid}>
+            <i className="fab fa-orcid" aria-hidden="true"></i>
+            <a
+              href={`https://orcid.org/${orcid}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label={`ORCID profile of ${name}`}
+            >
+              {orcid}
+            </a>
+          </li>
+        )}
         {github && (
           <li>
             <i className="fab fa-github"></i>
@@ -80,5 +82,5 @@ export const UserCard: React.FC<UserCardProps> = ({ user }) => {
             ))}
       </ul>
     </div>
-  );
-};
+  )
+}