@openneuro/app 4.29.9 → 4.30.0-alpha.0

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

@@ -1,48 +1,49 @@
-import React from 'react'
-import { Outlet } from 'react-router-dom'
-import { UserCard } from './user-card'
-import { UserAccountTabs } from './user-tabs'
-import styles from './scss/usercontainer.module.scss'
-
+import React from "react"
+import { Outlet } from "react-router-dom"
+import { UserCard } from "./user-card"
+import { UserAccountTabs } from "./user-tabs"
+import styles from "./scss/usercontainer.module.scss"
 
 interface User {
-  id: string;
-  name: string;
-  location: string;
-  github?: string;
-  institution: string;
-  email: string;
-  avatar: string;
-  orcid: string;
-  links: string[];
+  id: string
+  name: string
+  location: string
+  github?: string
+  institution: string
+  email: string
+  avatar: string
+  orcid: string
+  links: string[]
 }
 
 interface AccountContainerProps {
-  user: User;
-  hasEdit: boolean;
+  user: User
+  hasEdit: boolean
 }
 
 export const UserAccountContainer: React.FC<AccountContainerProps> = ({
-	user,
-	hasEdit,
+  user,
+  hasEdit,
 }) => {
-	return (
-		<>
-			<div className='container'>
-				<header className={styles.userHeader}>
-					<img className={styles.avatar} src={user.avatar} alt={user.name} />
-					<h2 className={styles.username}>{user.name}</h2>
-				</header>
-			</div>
-			<div className={styles.usercontainer + ' container'}>
-				<section className={styles.userSidebar}>
-					<UserCard user={user} />
-					<UserAccountTabs hasEdit={hasEdit} />
-				</section>
-				<section className={styles.userViews}>
-					<Outlet />
-				</section>
-			</div>
-		</>
-	)
+  return (
+    <>
+      <div className="container">
+        <header className={styles.userHeader}>
+          {user.avatar && (
+            <img className={styles.avatar} src={user.avatar} alt={user.name} />
+          )}
+          <h2 className={styles.username}>{user.name}</h2>
+        </header>
+      </div>
+      <div className={styles.usercontainer + " container"}>
+        <section className={styles.userSidebar}>
+          <UserCard user={user} />
+          <UserAccountTabs hasEdit={hasEdit} />
+        </section>
+        <section className={styles.userViews}>
+          <Outlet />
+        </section>
+      </div>
+    </>
+  )
 }

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

@@ -1,37 +1,37 @@
-import React from 'react';
+import React from "react"
 
 interface User {
-  name: string;
+  name: string
 }
 
 interface Dataset {
-  id: string;
-  created: string;
-  ownerId: string;
-  name: string;
-  type: string;
+  id: string
+  created: string
+  ownerId: string
+  name: string
+  type: string
 }
 
 interface UserDatasetsViewProps {
-  user: User;
+  user: User
 }
 
 const dummyDatasets: Dataset[] = [
   {
-    id: 'ds00001',
-    created: '2023-11-01T12:00:00Z',
-    ownerId: '1',
-    name: 'Dataset 1',
-    type: 'public',
+    id: "ds00001",
+    created: "2023-11-01T12:00:00Z",
+    ownerId: "1",
+    name: "Dataset 1",
+    type: "public",
   },
   {
-    id: 'ds00002',
-    created: '2023-11-02T12:00:00Z',
-    ownerId: '2',
-    name: 'Dataset 2',
-    type: 'private',
+    id: "ds00002",
+    created: "2023-11-02T12:00:00Z",
+    ownerId: "2",
+    name: "Dataset 2",
+    type: "private",
   },
-];
+]
 
 export const UserDatasetsView: React.FC<UserDatasetsViewProps> = ({ user }) => {
   return (
@@ -47,7 +47,7 @@ export const UserDatasetsView: React.FC<UserDatasetsViewProps> = ({ user }) => {
         ))}
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default UserDatasetsView;
+export default UserDatasetsView

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

@@ -1,12 +1,11 @@
-import React from "react";
+import React from "react"
 
 export const UserNotificationsView = ({ user }) => {
-    // this is a placeholder for the user notification feature
-    return (
-        <div data-testid="user-notifications-view">
-            <h3>UserNotificationsPAge for {user.name}</h3>
-            <p>This should show user info</p>
-        </div>
-    );
-};
-
+  // this is a placeholder for the user notification feature
+  return (
+    <div data-testid="user-notifications-view">
+      <h3>UserNotificationsPAge for {user.name}</h3>
+      <p>This should show user info</p>
+    </div>
+  )
+}

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

@@ -1,80 +1,76 @@
-// UserQuery.tsx
-
-import React from 'react';
-import { useParams } from 'react-router-dom';
-import { UserRoutes } from './user-routes';
-import FourOFourPage from '../errors/404page';
-import { isValidOrcid } from "../utils/validationUtils";
-
-
-
-// Dummy user data
-const dummyUsers: Record<string, User> = {
-  '0000-0001-6755-0259': {
-    id: '1',
-    name: 'Gregory Noack',
-    location: 'Stanford, CA',
-    github: 'thinknoack',
-    institution: 'Stanford University',
-    email: 'gregorynoack@thinknoack.com',
-    avatar: 'https://dummyimage.com/200x200/000/fff',
-    orcid: '0000-0001-6755-0259',
-    links: ['onelink.com', 'https://www.twolink.com'],
-  },
-  '0000-0002-1234-5678': {
-    id: '2',
-    name: 'Jane Doe',
-    location: 'Stanford, CA',
-    institution: 'Stanford University',
-    email: 'janedoe@example.com',
-    avatar: 'https://dummyimage.com/200x200/000/fff',
-    orcid: '0000-0002-1234-5678',
-    links: ['onelink.com', 'https://www.twolink.com'],
-  },
-  '0000-0003-2345-6789': {
-    id: '3',
-    name: 'John Smith',
-    location: 'Stanford, CA',
-    institution: 'Stanford University',
-    email: 'johnsmith@example.com',
-    avatar: 'https://dummyimage.com/200x200/000/fff',
-    orcid: '0000-0003-2345-6789',
-    links: ['onelink.com', 'https://www.twolink.com'],
-  },
-};
+import React from "react"
+import { useParams } from "react-router-dom"
+import { UserRoutes } from "./user-routes"
+import FourOFourPage from "../errors/404page"
+import { isValidOrcid } from "../utils/validationUtils"
+import { gql, useQuery } from "@apollo/client"
+import { isAdmin } from "../authentication/admin-user"
+import { useCookies } from "react-cookie"
+import { getProfile } from "../authentication/profile"
 
+// GraphQL query to fetch user by ORCID
+export const GET_USER_BY_ORCID = gql`
+  query User($userId: ID!) {
+    user(id: $userId) {
+      id
+      name
+      orcid
+      email
+      avatar
+      location
+      institution
+      links
+    }
+  }
+`
 
+export const UPDATE_USER = gql`
+mutation updateUser($id: ID!, $location: String, $links: [String], $institution: String) {
+  updateUser(id: $id, location: $location, links: $links, institution: $institution) {
+    id
+    location
+    links
+    institution
+  }
+}
+`
 
 export interface User {
-  id: string;
-  name: string;
-  location: string;
-  github?: string;
-  institution: string;
-  email: string;
-  avatar: string;
-  orcid: string;
-  links: string[];
+  id: string
+  name: string
+  location: string
+  github?: string
+  institution: string
+  email: string
+  avatar: string
+  orcid: string
+  links: string[]
 }
 
 export const UserQuery: React.FC = () => {
-  const { orcid } = useParams<{ orcid: string }>();
+  const { orcid } = useParams()
+  const isOrcidValid = orcid && isValidOrcid(orcid)
+  const { data, loading, error } = useQuery(GET_USER_BY_ORCID, {
+    variables: { userId: orcid },
+    skip: !isOrcidValid,
+  })
 
-  // Validate ORCID and return 404 if invalid or missing
-  if (!orcid || !isValidOrcid(orcid)) {
-    return <FourOFourPage />;
+  const [cookies] = useCookies()
+  const profile = getProfile(cookies)
+
+  if (!isOrcidValid) {
+    return <FourOFourPage />
   }
 
-  // Check if the user exists in the dummyUsers data
-  const user = dummyUsers[orcid];
+  if (loading) return <div>Loading...</div>
 
-  if (!user) {
-    // If user is not found, render 404 page
-    return <FourOFourPage />;
+  if (error || !data?.user || data.user.orcid !== orcid) {
+    return <FourOFourPage />
   }
 
-  // Mocked for now
-  const hasEdit = true;
+  // is admin or profile matches id from the user data being returned
+  const hasEdit = isAdmin || data.user.id !== profile.sub ? true : false
 
-  return <UserRoutes user={user} hasEdit={hasEdit} />;
-};
+  // Render user data with UserRoutes
+  return <UserRoutes user={data.user} hasEdit={hasEdit} />
+}

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

@@ -1,45 +1,52 @@
-import React from "react";
-import { Route, Routes } from "react-router-dom";
-import { UserAccountContainer } from "./user-container";
-import { UserAccountView } from "./user-account-view";
-import { UserNotificationsView } from "./user-notifications-view";
-import { UserDatasetsView } from "./user-datasets-view";
-import FourOFourPage from "../errors/404page";
-import FourOThreePage from "../errors/403page";
+import React from "react"
+import { Route, Routes } from "react-router-dom"
+import { UserAccountContainer } from "./user-container"
+import { UserAccountView } from "./user-account-view"
+import { UserNotificationsView } from "./user-notifications-view"
+import { UserDatasetsView } from "./user-datasets-view"
+import FourOFourPage from "../errors/404page"
+import FourOThreePage from "../errors/403page"
 
 export interface User {
-  id: string;
-  name: string;
-  location: string;
-  github?: string;
-  institution: string;
-  email: string;
-  avatar: string;
-  orcid: string;
-  links: string[];
+  id: string
+  name: string
+  location: string
+  github?: string
+  institution: string
+  email: string
+  avatar: string
+  orcid: string
+  links: string[]
 }
 
 interface UserRoutesProps {
-  user: User;
-  hasEdit: boolean;
+  user: User
+  hasEdit: boolean
 }
 
 export const UserRoutes: React.FC<UserRoutesProps> = ({ user, hasEdit }) => {
   return (
     <Routes>
       <Route path="/*" element={<FourOFourPage />} />
-      <Route path="*" element={<UserAccountContainer user={user} hasEdit={hasEdit} />}>
+      <Route
+        path="*"
+        element={<UserAccountContainer user={user} hasEdit={hasEdit} />}
+      >
         <Route path="" element={<UserDatasetsView user={user} />} />
         <Route
           path="account"
-          element={hasEdit ? <UserAccountView user={user} /> : <FourOThreePage />}
+          element={hasEdit
+            ? <UserAccountView user={user} />
+            : <FourOThreePage />}
         />
         <Route
           path="notifications"
-          element={hasEdit ? <UserNotificationsView user={user} /> : <FourOThreePage />}
+          element={hasEdit
+            ? <UserNotificationsView user={user} />
+            : <FourOThreePage />}
         />
         <Route path="*" element={<FourOFourPage />} />
       </Route>
     </Routes>
-  );
-};
+  )
+}

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

@@ -1,39 +1,43 @@
-import React, { useEffect, useRef, useState } from "react";
-import { NavLink, useLocation } from "react-router-dom";
-import styles from "./scss/usertabs.module.scss";
+import React, { useEffect, useRef, useState } from "react"
+import { NavLink, useLocation } from "react-router-dom"
+import styles from "./scss/usertabs.module.scss"
 
 export interface UserAccountTabsProps {
-  hasEdit: boolean;
+  hasEdit: boolean
 }
 
-export const UserAccountTabs: React.FC<UserAccountTabsProps> = ({ hasEdit }) => {
-  const ulRef = useRef<HTMLUListElement>(null);
-  const [activePosition, setActivePosition] = useState<number>(0);
-  const [clicked, setClicked] = useState(false); 
-  const location = useLocation();
+export const UserAccountTabs: React.FC<UserAccountTabsProps> = (
+  { hasEdit },
+) => {
+  const ulRef = useRef<HTMLUListElement>(null)
+  const [activePosition, setActivePosition] = useState<number>(0)
+  const [clicked, setClicked] = useState(false)
+  const location = useLocation()
 
   useEffect(() => {
-    const activeLink = ulRef.current?.querySelector(`.${styles.active}`) as HTMLElement;
+    const activeLink = ulRef.current?.querySelector(
+      `.${styles.active}`,
+    ) as HTMLElement
     if (activeLink) {
-      const li = activeLink.parentElement as HTMLElement;
-      setActivePosition(li.offsetTop);
+      const li = activeLink.parentElement as HTMLElement
+      setActivePosition(li.offsetTop)
     }
-  }, [location]);
+  }, [location])
 
   const handleClick = () => {
+    setClicked(true)
+  }
 
-      setClicked(true);
-
-  };
-
-  if (!hasEdit) return null;
+  if (!hasEdit) return null
 
   return (
     <div className={styles.userAccountTabLinks}>
       <ul
         ref={ulRef}
         className={`${clicked ? "clicked" : ""} ${styles.userAccountTabLinks}`}
-        style={{ "--active-offset": `${activePosition}px` } as React.CSSProperties}
+        style={{
+          "--active-offset": `${activePosition}px`,
+        } as React.CSSProperties}
       >
         <li>
           <NavLink
@@ -66,5 +70,5 @@ export const UserAccountTabs: React.FC<UserAccountTabsProps> = ({ hasEdit }) =>
         </li>
       </ul>
     </div>
-  );
-};
+  )
+}

package/src/scripts/utils/__tests__/markdown.spec.tsx

@@ -27,8 +27,7 @@ describe("Test <Markdown> component", () => {
     expect(asFragment()).toMatchSnapshot()
   })
   it("filters close-break tags", () => {
-    const hrefExample =
-      '<br>sample text</br>'
+    const hrefExample = "<br>sample text</br>"
     const { asFragment } = render(<Markdown>{hrefExample}</Markdown>)
     expect(asFragment()).toMatchSnapshot()
   })

package/src/scripts/utils/validationUtils.ts

@@ -1,9 +1,8 @@
-
 /**
  * Validates an ORCID.
  * @param orcid - The ORCID string to validate.
  * @returns `true` if the ORCID is valid, `false` otherwise.
  */
 export function isValidOrcid(orcid: string): boolean {
-  return /^[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{3}[0-9X]$/.test(orcid || '');
-}
+  return /^[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{3}[0-9X]$/.test(orcid || "")
+}

package/src/scripts/validation/validation.tsx

@@ -31,12 +31,12 @@ const warningHeader = (count) => (
   </div>
 )
 
-const errorHeader = (count) => (
+const errorHeader = (errorCount) => (
   <div>
     <h3 className="metaheader">BIDS Validation</h3>
 
     <span className="label text-warning pull-right">
-      {count} {pluralize("Error", count)}
+      {errorCount} {pluralize("Error", errorCount)}
     </span>
     <span className="dataset-status ds-danger">
       <i className="fa fa-exclamation-circle" /> Invalid
@@ -53,10 +53,11 @@ const Valid = () => (
 )
 
 interface WarningsProps {
+  issues: DatasetIssues
   warnings: DatasetIssues
 }
 
-const Warnings = ({ warnings }: WarningsProps) => (
+const Warnings = ({ issues, warnings }: WarningsProps) => (
   <ValidationPanel heading={warningHeader(warnings.size)}>
     <div>
       <span className="message error fade-in">
@@ -69,15 +70,17 @@ const Warnings = ({ warnings }: WarningsProps) => (
       </span>
     </div>
     <br />
-    <Results issues={warnings} />
+    <Results issues={issues} />
   </ValidationPanel>
 )
 
 interface ErrorsProps {
+  issues: DatasetIssues
   errors: DatasetIssues
+  warnings: DatasetIssues
 }
 
-const Errors = ({ errors }: ErrorsProps) => (
+const Errors = ({ issues, errors }: ErrorsProps) => (
   <ValidationPanel heading={errorHeader(errors.size)}>
     <span className="message error fade-in">
       Your dataset is no longer valid. You must fix the{" "}
@@ -86,7 +89,7 @@ const Errors = ({ errors }: ErrorsProps) => (
       to use all of the site features.
     </span>
     <br />
-    <Results issues={errors} />
+    <Results issues={issues} />
   </ValidationPanel>
 )
 
@@ -100,9 +103,9 @@ export const Validation = ({ issues }: ValidationProps) => {
     const warnings = grouped.get("warning")
     const errors = grouped.get("error")
     if (errors?.size) {
-      return <Errors errors={issues} />
+      return <Errors issues={issues} errors={errors} warnings={warnings} />
     } else if (warnings?.size) {
-      return <Warnings warnings={issues} />
+      return <Warnings issues={issues} warnings={warnings} />
     } else {
       return <Valid />
     }