@openneuro/app 4.34.2 → 4.35.0-alpha.0

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

@@ -0,0 +1,114 @@
+import React from "react"
+import { Link } from "react-router-dom"
+import { Dropdown } from "../components/dropdown/Dropdown"
+import { useUser } from "../queries/user"
+import "./scss/user-menu.scss"
+
+export interface UserMenuProps {
+  signOutAndRedirect: () => void
+}
+
+export const UserMenu = (
+  { signOutAndRedirect }: UserMenuProps,
+) => {
+  //const inboxCount = 99
+
+  const { user } = useUser()
+
+  return (
+    <span className="user-menu-wrap">
+      {
+        /* {user?.orcid && (
+        <span className="notifications-link">
+          <Link to={`/user/${user?.orcid}/notifications/unread`}>
+            <i className="fa fa-inbox">
+              {inboxCount > 0 && (
+                <span className="count">
+                  {inboxCount > 99
+                    ? (
+                      <span>
+                        99<span>+</span>
+                      </span>
+                    )
+                    : inboxCount}
+                </span>
+              )}
+            </i>
+            <span className="sr-only">Account Info</span>
+          </Link>
+        </span>
+      )} */
+      }
+      <Dropdown
+        className={"user-menu-dropdown"}
+        label={user?.avatar
+          ? (
+            <img
+              className="user-menu-label avatar"
+              src={user?.avatar}
+              alt="User Avatar"
+            />
+          )
+          : <div className="user-menu-label">My Account</div>}
+        children={
+          <div className="user-menu-dropdown-list">
+            <ul>
+              <li className="dropdown-header">
+                <p>
+                  <span>Hello</span> <br />
+                  {user?.name} <br />
+                  {user?.email}
+                </p>
+                <p>
+                  <span>signed in via {user?.provider}</span>
+                </p>
+              </li>
+              <li>
+                {
+                  /* {user?.orcid
+                  ? <Link to={`/user/${user?.orcid}`}>My Datasets</Link>
+                  : <Link to="/search?mydatasets">My Datasets</Link>} */
+                }
+                <Link to="/search?mydatasets">My Datasets</Link>
+              </li>
+
+              {
+                /* {user?.orcid && (
+                <li>
+                  <Link to={`/user/${user?.orcid}/account`}>
+                    Account Info
+                  </Link>
+                </li>
+              )} */
+              }
+
+              <li className="user-menu-link">
+                <Link to="/keygen">Obtain an API Key</Link>
+              </li>
+              {user?.provider !== "orcid" && (
+                <li className="user-menu-link">
+                  <a href="/crn/auth/orcid?link=true">
+                    Link ORCID to my account
+                  </a>
+                </li>
+              )}
+              {user?.admin && (
+                <li className="user-menu-link">
+                  <Link to="/admin">Admin</Link>
+                </li>
+              )}
+              <li className="user-menu-link">
+                <a
+                  onClick={() => signOutAndRedirect()}
+                  className="btn-submit-other"
+                >
+                  Sign Out
+                </a>
+              </li>
+            </ul>
+          </div>
+        }
+      />
+    </span>
+  )
+}

package/src/scripts/users/user-notification-accordion.tsx

@@ -84,7 +84,7 @@ export const NotificationAccordion = ({ notification, onUpdate }) => {
                 >
                   <img
                     className={`${styles.accordionicon} ${styles.saveicon}`}
-                    src={iconSaved}
+                    src={iconUnread}
                     alt=""
                   />
                   <span className="sr-only">Save</span>
@@ -114,7 +114,7 @@ export const NotificationAccordion = ({ notification, onUpdate }) => {
                 >
                   <img
                     className={`${styles.accordionicon} ${styles.unreadicon}`}
-                    src={iconUnread}
+                    src={iconSaved}
                     alt=""
                   />
                   <span className="sr-only">Mark as Unread</span>

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

@@ -3,45 +3,15 @@ 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
-  }
-}
-`
+import { useUser } from "../queries/user"
 
 export const UserQuery: React.FC = () => {
   const { orcid } = useParams()
   const isOrcidValid = orcid && isValidOrcid(orcid)
-  const { data, loading, error } = useQuery(GET_USER_BY_ORCID, {
-    variables: { userId: orcid },
-    skip: !isOrcidValid,
-  })
+  const { user, loading, error } = useUser()
 
   const [cookies] = useCookies()
   const profile = getProfile(cookies)
@@ -53,16 +23,16 @@ export const UserQuery: React.FC = () => {
 
   if (loading) return <div>Loading...</div>
 
-  if (error || !data?.user || data.user.orcid !== orcid) {
+  if (error || !user || user?.orcid !== orcid) {
     return <FourOFourPage />
   }
 
   if (!profile || !profile.sub) {
     return <FourOFourPage />
   }
-
   // is admin or profile matches id from the user data being returned
-  const hasEdit = isAdminUser || (data.user.id === profile?.sub) ? true : false
+  const isUser = (user?.id === profile?.sub) ? true : false
+  const hasEdit = isAdminUser || (user?.id === profile?.sub) ? true : false
   // Render user data with UserRoutes
-  return <UserRoutes user={data.user} hasEdit={hasEdit} />
+  return <UserRoutes user={user} hasEdit={hasEdit} isUser={isUser} />
 }

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

@@ -14,13 +14,17 @@ import {
 
 import type { UserRoutesProps } from "../types/user-types"
 
-export const UserRoutes: React.FC<UserRoutesProps> = ({ user, hasEdit }) => {
+export const UserRoutes: React.FC<UserRoutesProps> = (
+  { user, hasEdit, isUser },
+) => {
   return (
     <Routes>
       <Route path="/*" element={<FourOFourPage />} />
       <Route
         path="*"
-        element={<UserAccountContainer user={user} hasEdit={hasEdit} />}
+        element={
+          <UserAccountContainer user={user} hasEdit={hasEdit} isUser={isUser} />
+        }
       >
         <Route
           path=""
@@ -28,9 +32,7 @@ export const UserRoutes: React.FC<UserRoutesProps> = ({ user, hasEdit }) => {
         />
         <Route
           path="account"
-          element={hasEdit
-            ? <UserAccountView user={user} />
-            : <FourOThreePage />}
+          element={hasEdit ? <UserAccountView /> : <FourOThreePage />}
         />
         <Route
           path="notifications/*"

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

@@ -4,10 +4,11 @@ import styles from "./scss/usertabs.module.scss"
 
 export interface UserAccountTabsProps {
   hasEdit: boolean
+  isUser?: boolean
 }
 
 export const UserAccountTabs: React.FC<UserAccountTabsProps> = (
-  { hasEdit },
+  { hasEdit, isUser },
 ) => {
   const ulRef = useRef<HTMLUListElement>(null)
   const [activePosition, setActivePosition] = useState<number>(0)
@@ -46,7 +47,7 @@ export const UserAccountTabs: React.FC<UserAccountTabsProps> = (
             className={({ isActive }) => (isActive ? styles.active : "")}
             onClick={handleClick}
           >
-            User Datasets
+            {isUser ? "My" : "User"} Datasets
           </NavLink>
         </li>
         <li>
@@ -56,7 +57,7 @@ export const UserAccountTabs: React.FC<UserAccountTabsProps> = (
             className={({ isActive }) => (isActive ? styles.active : "")}
             onClick={handleClick}
           >
-            User Notifications
+            Notifications
           </NavLink>
         </li>
         <li>

package/src/scripts/validation/__tests__/__snapshots__/validation-issues.spec.tsx.snap

@@ -9,8 +9,17 @@ exports[`Issue component > renders one issue 1`] = `
       class="e-meta"
     >
       <label>
-        /dataset_description.json
+        Location:
       </label>
+       /dataset_description.json
+    </div>
+    <div
+      class="e-meta"
+    >
+      <label>
+        Subcode:
+      </label>
+       DatasetType
     </div>
     <div
       class="e-meta"

package/src/scripts/validation/validation-issues.tsx

@@ -18,15 +18,19 @@ export function Issue({ datasetIssues, issue, groupBy }: IssueProps) {
       {groupBy === "location"
         ? (
           <div className="e-meta">
-            <label>{issue.code}</label>
-            <span>{issue.subCode ? ` - ${issue.subCode}` : ""}</span>
+            <label>Code:</label> {issue.code}
           </div>
         )
         : (
           <div className="e-meta">
-            <label>{issue.location}</label>
+            <label>Location:</label> {issue.location}
           </div>
         )}
+      {issue.subCode && (
+        <div className="e-meta">
+          <label>Subcode:</label> {issue.subCode}
+        </div>
+      )}
       <div className="e-meta">
         <label>Rule:</label> {issue.rule}
       </div>

package/src/scripts/components/user/UserMenu.tsx

@@ -1,72 +0,0 @@
-import React from "react"
-import { Link } from "react-router-dom"
-import { Dropdown } from "../dropdown/Dropdown"
-import "./user-menu.scss"
-
-export interface UserMenuProps {
-  profile: {
-    name: string
-    admin: boolean
-    email: string
-    provider: string
-  }
-  signOutAndRedirect: () => void
-}
-
-export const UserMenu = ({ profile, signOutAndRedirect }: UserMenuProps) => {
-  return (
-    <Dropdown
-      className={"user-menu-dropdown"}
-      label={<div className="user-menu-label">My Account</div>}
-      children={
-        <div className="user-menu-dropdown-list">
-          <ul>
-            <li className="dropdown-header">
-              <p>
-                <span>Hello</span> <br />
-                {profile.name}
-              </p>
-              <p>
-                <span>signed in as</span>
-                <br />
-                {profile.email}
-                {" "}
-              </p>
-              <p>
-                <span>via</span>
-                <br /> {profile.provider}
-              </p>
-            </li>
-            <li>
-              <Link to="/search?mydatasets">My Datasets</Link>
-            </li>
-            <li className="user-menu-link">
-              <Link to="/keygen">Obtain an API Key</Link>
-            </li>
-            {profile.provider !== "orcid" && (
-              <li className="user-menu-link">
-                <a href="/crn/auth/orcid?link=true">
-                  {" "}
-                  Link ORCID to my account{" "}
-                </a>
-              </li>
-            )}
-            {profile.admin && (
-              <li className="user-menu-link">
-                <Link to="/admin">Admin</Link>
-              </li>
-            )}
-            <li className="user-menu-link">
-              <a
-                onClick={() => signOutAndRedirect()}
-                className="btn-submit-other"
-              >
-                Sign Out
-              </a>
-            </li>
-          </ul>
-        </div>
-      }
-    />
-  )
-}

package/src/scripts/components/user/user-menu.scss

@@ -1,88 +0,0 @@
-@import '../scss/variables';
-
-.user-menu-dropdown {
-  position: relative;
-  .menu {
-    box-shadow: 0px 0px 5px -4px black;
-    background-color: #fff;
-    border-radius: $border-radius-default;
-    width: 100%;
-    min-width: 250px;
-    right: 0px;
-    top: 60px;
-  }
-
-  .user-menu-dropdown-list {
-    ul {
-      list-style: none;
-      margin: 0;
-      padding: 20px;
-      li {
-        text-align: center;
-        border-bottom: 1px solid $newspaper;
-        &.dropdown-header {
-          padding: 10px 0;
-          font-size: 14px;
-          p:first-child {
-            margin-top: 0;
-          }
-          span {
-            color: #3d3d3d;
-            font-weight: bold;
-            font-size: 12px;
-          }
-        }
-        a {
-          display: block;
-          text-decoration: none;
-          padding: 10px 0;
-          &:hover {
-            background-color: #eee;
-          }
-        }
-        &:last-child {
-          border: 0;
-          margin: 0;
-          padding: 0;
-        }
-      }
-    }
-  }
-
-  .active {
-    img {
-      opacity: 0.5;
-    }
-    i {
-      color: $on-light-aqua;
-    }
-  }
-}
-
-.header-account-btn {
-  display: flex;
-  align-items: center;
-  background: #eee;
-  border-radius: $border-radius-default;
-
-  button.on-no-background.icon-text {
-    color: $on-dark-aqua;
-    margin: 5px 20px 0;
-    font-size: 16px;
-  }
-}
-.header-account-btn .toggle {
-  color: #204e5a;
-  font-weight: bold;
-  font-size: 14px;
-  padding: 20px 24px;
-  @media (max-width: 800px) {
-    padding: 10px;
-  }
-}
-@media (max-width: 800px) {
-  .header-account-btn .dropdown-wrapper .menu {
-    right: -25vw;
-    left: -25vw;
-  }
-}