fix header, closes #346

lightningrodlabs · Nov 9, 2023 · f9c4a29 · f9c4a29
1 parent 575c8c9
commit f9c4a29
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 59 deletions.
diff --git a/web/src/components/Avatar/Avatar.tsx b/web/src/components/Avatar/Avatar.tsx
@@ -1,13 +1,13 @@
 import React from 'react'
 import './Avatar.scss'
 import { pickColorForString } from '../../styles'
-import { StatusCssColorClass, Status } from '../Header/Status'
+import { StatusCssColorClass } from '../Header/Status'
 import Tooltip from '../Tooltip/Tooltip'
 
 interface AvatarProps {
   size: 'small' | 'small-medium' | 'medium' | 'medium-large' | 'large'
-  firstName: string
-  lastName: string
+  firstName?: string
+  lastName?: string
   avatarUrl: string
   highlighted?: boolean
   disconnected?: boolean
@@ -19,7 +19,6 @@ interface AvatarProps {
   withStatusBorder?: boolean
   selfAssignedStatus?: string
   withTooltip?: boolean
-  // tooltipText?: string
 }
 
 function Avatar({
@@ -37,8 +36,7 @@ function Avatar({
   withStatusBorder,
   selfAssignedStatus,
   withTooltip,
-}: // tooltipText,
-AvatarProps) {
+}: AvatarProps) {
   // If it is imported avatar of a ghost member
   // don't show status circle
   if (imported) withStatus = false

diff --git a/web/src/components/Header/Header.tsx b/web/src/components/Header/Header.tsx
@@ -1,6 +1,5 @@
 import React, { useRef, useState } from 'react'
 import useOnClickOutside from 'use-onclickoutside'
-import { useRouteMatch } from 'react-router-dom'
 
 import { WireRecord } from '../../api/hdkCrud'
 import {
@@ -53,25 +52,13 @@ const Header: React.FC<HeaderProps> = ({
   members,
   presentMembers,
 }) => {
-  const isDashboardMatch = useRouteMatch('/dashboard')
-  const isPriorityMatch = useRouteMatch('/project/:project_id/priority')
-  const isTableMatch = useRouteMatch('/project/:project_id/table')
-  // const hasBackground = isPriorityMatch || isTableMatch
-
-  const [isExportOpen, setIsExportOpen] = useState(false)
-
   const [status, setStatus] = useState<Status>(
     // @ts-ignore
     whoami ? whoami.entry.status : Status.Online
   )
 
   // click handlers
-  const ref = useRef()
-  useOnClickOutside(ref, () => {
-    setIsExportOpen(false)
-  })
   const onClickEditProfile = () => {
-    setIsExportOpen(false)
     setModalState({
       id: OpenModal.ProfileEditForm
     })
@@ -87,14 +74,13 @@ const Header: React.FC<HeaderProps> = ({
     changeStatus(status)
   }
   const onClickPreferences = () => {
-    setIsExportOpen(false)
     setModalState({
       id: OpenModal.Preferences
     })
   }
 
   return (
-    <div className={`header-wrapper`} ref={ref}>
+    <div className={`header-wrapper`}>
       {/* Update Bar */}
       <div className="header-update-bar-wrapper">
         <UpdateBar
@@ -135,8 +121,6 @@ const Header: React.FC<HeaderProps> = ({
           projectPassphrase={project ? project.passphrase : ''}
           setModalState={setModalState}
           projectName={project ? project.name : ''}
-          isExportOpen={isExportOpen}
-          setIsExportOpen={setIsExportOpen}
           activeEntryPoints={activeEntryPoints}
           goToOutcome={goToOutcome}
         />

diff --git a/web/src/components/Header/HeaderLeftPanel.tsx b/web/src/components/Header/HeaderLeftPanel.tsx
@@ -70,40 +70,26 @@ export type HeaderLeftPanelProps = {
   }[]
   setModalState: React.Dispatch<React.SetStateAction<ModalState>>
   goToOutcome: (outcomeActionHash: ActionHashB64) => void
-  // for project export
-  isExportOpen: boolean
-  setIsExportOpen: React.Dispatch<React.SetStateAction<boolean>>
 }
 
 const HeaderLeftPanel: React.FC<HeaderLeftPanelProps> = ({
   setModalState,
   whoami,
   projectName,
   projectPassphrase,
-  isExportOpen,
-  setIsExportOpen,
   activeEntryPoints,
   goToOutcome,
   members,
   presentMembers,
 }) => {
-  const activeEntryPointAddresses = activeEntryPoints.map(
-    ({ entryPoint }) => entryPoint.actionHash
-  )
-  // in this context, we'd want to display members on the project,
-  // except your own self
-  // since your own avatar and status is already showing
-  // on top right side of the screen all the time!
-  const membersMinusMe = whoami
-    ? members.filter(
-        (member) => member.agentPubKey !== whoami.entry.agentPubKey
-      )
-    : []
-
-  const ref = useRef()
+  const entryPointsRef = useRef()
+  const exportProjectRef = useRef()
   const { setToastState } = useContext(ToastContext)
   const { fileDownloaded, setFileDownloaded } = useFileDownloaded()
-
+  const [openEntryPointPicker, setOpenEntryPointPicker] = useState(false)
+  const [isExportOpen, setIsExportOpen] = useState(false)
+  useOnClickOutside(entryPointsRef, () => setOpenEntryPointPicker(false))
+  useOnClickOutside(exportProjectRef, () => setIsExportOpen(false))
   useEffect(() => {
     if (fileDownloaded) {
       setFileDownloaded(false)
@@ -115,18 +101,24 @@ const HeaderLeftPanel: React.FC<HeaderLeftPanelProps> = ({
     }
   }, [fileDownloaded, setFileDownloaded, setToastState])
 
-  // map, table and priority view routes
+  const activeEntryPointAddresses = activeEntryPoints.map(
+    ({ entryPoint }) => entryPoint.actionHash
+  )
+  // in this context, we'd want to display members on the project,
+  // except your own self
+  // since your own avatar and status is already showing
+  // on top right side of the screen all the time!
+  const membersMinusMe = whoami
+    ? members.filter(
+        (member) => member.agentPubKey !== whoami.entry.agentPubKey
+      )
+    : []
 
   const projectPage = useRouteMatch<{ projectId: string }>(
     '/project/:projectId'
   )
   const projectId = projectPage ? projectPage.params.projectId : null
 
-  // for entry points
-
-  useOnClickOutside(ref, () => setOpenEntryPointPicker(false))
-  const [openEntryPointPicker, setOpenEntryPointPicker] = useState(false)
-
   // replace spaces with dashes for project name
   // add in the export date like 2023-12-31 and make it based on the
   // timezone of the user
@@ -137,7 +129,7 @@ const HeaderLeftPanel: React.FC<HeaderLeftPanelProps> = ({
 
   return (
     <div className="header-left-panel-rows">
-      <div className="header-left-panel" ref={ref}>
+      <div className="header-left-panel">
         {/* Acorn Logo - non link */}
 
         {!whoami && (
@@ -210,7 +202,10 @@ const HeaderLeftPanel: React.FC<HeaderLeftPanelProps> = ({
 
                 <div className="current-project-tools">
                   {/* Entry points */}
-                  <div className="entry-points-button-wrapper">
+                  <div
+                    className="entry-points-button-wrapper"
+                    ref={entryPointsRef}
+                  >
                     <Icon
                       name="door-open.svg"
                       size="view-mode"
@@ -245,7 +240,7 @@ const HeaderLeftPanel: React.FC<HeaderLeftPanelProps> = ({
                     className="header-action-icon"
                   />
                   {/* Export */}
-                  <div className="export-wrapper">
+                  <div className="export-wrapper" ref={exportProjectRef}>
                     <Icon
                       withTooltip
                       tooltipText="Export"

diff --git a/...onents/ProfileEditForm/ProfileEditForm.js → ...nents/ProfileEditForm/ProfileEditForm.tsx b/...onents/ProfileEditForm/ProfileEditForm.js → ...nents/ProfileEditForm/ProfileEditForm.tsx
@@ -6,21 +6,34 @@ import ValidatingFormInput from '../ValidatingFormInput/ValidatingFormInput'
 import Avatar from '../Avatar/Avatar'
 import ButtonWithPendingState from '../ButtonWithPendingState/ButtonWithPendingState'
 import Typography from '../Typography/Typography'
+import { Profile } from 'zod-models'
 
+// @ts-ignore
 import AvatarPlaceholder from '../../images/avatar-placeholder.svg'
 
 const urlRegex = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[\-;:&=\+\$,\w]+@)?[A-Za-z0-9\.\-]+|(?:www\.|[\-;:&=\+\$,\w]+@)[A-Za-z0-9\.\-]+)((?:\/[\+~%\/\.\w\-_]*)?\??(?:[\-\+=&;%@\.\w_]*)#?(?:[\.\!\/\\\w]*))?)/
 
-function ProfileEditForm({
+type ProfileEditFormProps = {
+  pending: boolean
+  pendingText: string
+  onSubmit: (profile: Profile) => Promise<void>
+  agentAddress: string
+  whoami: Profile
+  titleText: string
+  subText: string
+  submitText: string
+}
+
+const ProfileEditForm: React.FC<ProfileEditFormProps> = ({
   pending,
   pendingText,
-  onSubmit,
   agentAddress,
   whoami,
   titleText,
   subText,
   submitText,
-}) {
+  onSubmit,
+}) => {
   const [isValidFirstName, setisValidFirstName] = useState(true)
   const [isValidLastName, setIsValidLastName] = useState(true)
   const [isValidUserName, setIsValidUserName] = useState(true)

diff --git a/...alidatingFormInput/ValidatingFormInput.js → ...lidatingFormInput/ValidatingFormInput.tsx b/...alidatingFormInput/ValidatingFormInput.js → ...lidatingFormInput/ValidatingFormInput.tsx
@@ -3,22 +3,37 @@ import PropTypes from 'prop-types'
 
 import './ValidatingFormInput.scss'
 
+import Typography from '../Typography/Typography'
+// @ts-ignore
 import ValidationCheck from '../../images/validation-check.svg'
+// @ts-ignore
 import ValidationX from '../../images/validation-x.svg'
-import Typography from '../Typography/Typography'
 
-function ValidatingFormInput({
+type ValidatingFormInputProps = {
+  value: string
+  onChange?: (value: string) => void
+  helpText?: string
+  label: string
+  placeholder?: string
+  readOnly?: boolean
+  withAtSymbol?: boolean
+  errorText?: string
+  invalidInput?: boolean
+  validInput?: boolean
+}
+
+const ValidatingFormInput: React.FC<ValidatingFormInputProps> = ({
   withAtSymbol,
   readOnly,
   placeholder,
   label,
   value,
-  onChange,
   helpText,
   errorText,
   invalidInput,
   validInput,
-}) {
+  onChange,
+}) => {
   const innerOnChange = (e) => {
     e.preventDefault()
     onChange(e.target.value)