@openneuro/app 4.29.8 → 4.29.9

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

@@ -0,0 +1,63 @@
+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;
+}
+
+export const EditableContent: React.FC<EditableContentProps> = ({
+  editableContent,
+  setRows,
+  className,
+  heading,
+}) => {
+  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>
+  );
+};
+
+
+

package/src/scripts/users/scss/editable-content.scss

@@ -0,0 +1,15 @@
+
+
+.user-meta-block{
+    margin-top: 30px;
+}
+.umb-heading{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid #e0e0e0;
+    h4{
+        margin: 0;
+    }
+}
+

package/src/scripts/users/scss/user-meta-blocks.scss

@@ -0,0 +1,14 @@
+.user-meta-block {
+    .edit-string-container,
+    .edit-list-container{
+        margin-top: 20px;   
+    }
+    ul{
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        li {
+           p{ margin-bottom: 0;}
+        }
+    }
+}

package/src/scripts/users/scss/useraccountview.module.scss

@@ -0,0 +1,20 @@
+.useraccountview{
+    h3{
+        margin-top: 0;
+        font-size: 22px;
+    }
+    .accountDetail{
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        li{
+            margin: 0 0 10px;
+            font-size: 16px;
+        }
+        span{
+            font-weight: 700;
+            margin-right: 10px;
+        }
+    }
+}
+

package/src/scripts/users/scss/usercard.module.scss

@@ -0,0 +1,24 @@
+/* usercard.module.scss */
+.userCard {
+  padding: 20px;
+  ul{
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    li{
+      margin-bottom: 5px;
+      font-size: 14px;
+      i{
+        margin-right: 10px;
+        color: #666;
+       
+      }
+      &.orcid i{
+        color: #a6cf39;
+      }
+      &:last-of-type{
+        margin-bottom: 0;
+      }
+    }
+  }
+}

package/src/scripts/users/scss/usercontainer.module.scss

@@ -0,0 +1,38 @@
+.usercontainer {
+    display: flex;
+    min-height: calc(100vh - 350px);
+}
+
+.userHeader {
+  display: flex;
+  align-items: center;
+    margin: 10px 0 0;
+    height: 100px;
+  .avatar {
+    border-radius: 50%;
+    margin-right: 10px;
+    width: 60px;
+    height: 60px;
+  }
+  .username {
+  }
+  h2 {
+    font-size: 35px;
+    line-height: 38px;
+    font-weight: 400;
+  }
+}
+
+.userSidebar {
+  width: 350px;
+  flex: 0 0 auto;
+  padding: 0;
+  width: 430px;
+}
+.userViews {
+  border-left: 1px solid #e0e0e0;
+  flex: 1;
+  padding: 0 0 0 50px;
+  position: relative;
+  max-width: 100%;
+}

package/src/scripts/users/scss/usertabs.module.scss

@@ -0,0 +1,63 @@
+.userAccountTabLinks {
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    position: relative;
+
+    &:before,
+    &:after {
+      content: '';
+      width: calc(100% - 60px);
+      height: 32px;
+      display: inline-block;
+      position: absolute;
+      left: 0;
+      top: 0;
+      transform: translateY(var(--active-offset, 0));
+      margin-left: 25px;
+      border-radius: 8px;
+      transition: transform 0.3s ease; /* Always apply transition */
+    }
+    /* Apply animation when clicked */
+    // not working for some reason
+    // &.clicked:before,
+    // &.clicked:after {
+    //   transform: translateY(var(--active-offset, 0));
+    //   transition: transform 0.3s ease; /* Ensure transition */
+    // }
+
+    &:before {
+      background: #eee;
+      margin: 0 20px 0 35px;
+    }
+
+    &:after {
+      height: 23px;
+      margin: 5px 0 0px 25px;
+      width: 5px;
+      background: #204e5b;
+    }
+
+    li {
+      margin: 10px 25px;
+      position: relative;
+
+      a {
+        padding: 5px 10px 5px 20px;
+        border-radius: 4px;
+        display: block;
+        text-decoration: none;
+        background-color: transparent;
+        transition: background-color 0.3s;
+        &.active {
+          font-weight: bold;
+          &:hover {
+            color: #204e5b;
+            cursor: default;
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,62 @@
+import React, { useState } from "react";
+import { EditableContent } from "./components/editable-content";
+import styles from './scss/useraccountview.module.scss'
+
+interface UserAccountViewProps {
+  user: {
+    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 || "");
+
+  return (
+    <div data-testid="user-account-view" className={styles.useraccountview}>
+      <h3>Account</h3>
+      <ul className={styles.accountDetail}>
+        <li>
+          <span>Name:</span>
+          {user.name}
+        </li>
+        <li>
+          <span>Email:</span>
+          {user.email}
+        </li>
+        <li>
+          <span>ORCID:</span>
+          {user.orcid}
+        </li>
+        {user.github ? <li><span>github:</span>{user.github}</li> : <li>Connect your github</li>}
+      </ul>
+
+      <EditableContent
+        editableContent={userLinks}
+        setRows={setLinks}
+        className="custom-class"
+        heading="Links"
+      />
+      <EditableContent
+        editableContent={userLocation}
+        setRows={(newLocation: string) => setLocation(newLocation)}
+        className="custom-class"
+        heading="Location"
+      />
+      <EditableContent
+        editableContent={userInstitution}
+        setRows={(newInstitution: string) => setInstitution(newInstitution)}
+        className="custom-class"
+        heading="Institution"
+      />
+    </div>
+  );
+};
+

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

@@ -0,0 +1,84 @@
+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; 
+}
+
+export interface UserCardProps {
+  user: User;
+}
+
+export const UserCard: React.FC<UserCardProps> = ({ user }) => {
+  const { location, institution, email, orcid, links = [], github, name } = user;
+
+  return (
+    <div className={styles.userCard}>
+      <ul>
+        {institution && (
+          <li>
+            <i className="fa fa-building"></i>
+            {institution}
+          </li>
+        )}
+        {location && (
+          <li>
+            <i className="fas fa-map-marker-alt"></i>
+            {location}
+          </li>
+        )}
+        <li>
+          <i className="fas fa-envelope"></i>
+          <a
+            href={"mailto:" + email}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {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>
+        {github && (
+          <li>
+            <i className="fab fa-github"></i>
+            <a
+              href={`https://github.com/${github}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label={`Github profile of ${name}`}
+            >
+              {github}
+            </a>
+          </li>
+        )}
+        {links.length > 0 &&
+          links
+            .filter(Boolean)
+            .map((link, index) => (
+              <li key={index}>
+                <i className="fa fa-link"></i>
+                <a href={link} target="_blank" rel="noopener noreferrer">
+                  {link}
+                </a>
+              </li>
+            ))}
+      </ul>
+    </div>
+  );
+};

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

@@ -0,0 +1,48 @@
+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[];
+}
+
+interface AccountContainerProps {
+  user: User;
+  hasEdit: boolean;
+}
+
+export const UserAccountContainer: React.FC<AccountContainerProps> = ({
+	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>
+		</>
+	)
+}

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

@@ -0,0 +1,53 @@
+import React from 'react';
+
+interface User {
+  name: string;
+}
+
+interface Dataset {
+  id: string;
+  created: string;
+  ownerId: string;
+  name: string;
+  type: string;
+}
+
+interface UserDatasetsViewProps {
+  user: User;
+}
+
+const dummyDatasets: Dataset[] = [
+  {
+    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',
+  },
+];
+
+export const UserDatasetsView: React.FC<UserDatasetsViewProps> = ({ user }) => {
+  return (
+    <div data-testid="user-datasets-view">
+      <h1>{user.name}'s Datasets</h1>
+      <div>
+        {dummyDatasets.map((dataset) => (
+          <div key={dataset.id} data-testid={`dataset-${dataset.id}`}>
+            <h2>{dataset.name}</h2>
+            <p>Type: {dataset.type}</p>
+            <p>Created: {dataset.created}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default UserDatasetsView;

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

@@ -0,0 +1,12 @@
+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>
+    );
+};
+

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

@@ -0,0 +1,80 @@
+// 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'],
+  },
+};
+
+
+
+export interface User {
+  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 }>();
+
+  // Validate ORCID and return 404 if invalid or missing
+  if (!orcid || !isValidOrcid(orcid)) {
+    return <FourOFourPage />;
+  }
+
+  // Check if the user exists in the dummyUsers data
+  const user = dummyUsers[orcid];
+
+  if (!user) {
+    // If user is not found, render 404 page
+    return <FourOFourPage />;
+  }
+
+  // Mocked for now
+  const hasEdit = true;
+
+  return <UserRoutes user={user} hasEdit={hasEdit} />;
+};

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

@@ -0,0 +1,45 @@
+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[];
+}
+
+interface UserRoutesProps {
+  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={<UserDatasetsView user={user} />} />
+        <Route
+          path="account"
+          element={hasEdit ? <UserAccountView user={user} /> : <FourOThreePage />}
+        />
+        <Route
+          path="notifications"
+          element={hasEdit ? <UserNotificationsView user={user} /> : <FourOThreePage />}
+        />
+        <Route path="*" element={<FourOFourPage />} />
+      </Route>
+    </Routes>
+  );
+};