improving var names

Author: Connoropolous

web/src/components/Button/Button.tsx

@@ -5,7 +5,7 @@ import './Button.scss'
 
 export type ButtonProps = {
   size?: 'small' | 'medium' | 'large'
-  text: string
+  text: React.ReactNode
   onClick?: () => void
   icon?: string
   className?: string

web/src/components/JoinProjectModal/JoinProjectModal.tsx

@@ -1,8 +1,6 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState } from 'react'
 import './JoinProjectModal.scss'
 
-import Icon from '../Icon/Icon'
-
 import ValidatingFormInput from '../ValidatingFormInput/ValidatingFormInput'
 import Modal from '../Modal/Modal'
 import {
@@ -13,6 +11,7 @@ import {
   ProjectModalSubHeading,
 } from '../ProjectModal/ProjectModal'
 import ButtonWithPendingState from '../ButtonWithPendingState/ButtonWithPendingState'
+import { CellIdString } from '../../types/shared'
 
 function JoinProjectForm({
   checkDone,
@@ -22,7 +21,7 @@ function JoinProjectForm({
   pendingJoiningProject,
   onClickDone,
 }) {
-  const validateButtonContent = (
+  const joinProjectButtonContent = (
     <ButtonWithPendingState
       pending={pendingJoiningProject}
       pendingText="joining..."
@@ -52,11 +51,11 @@ function JoinProjectForm({
         </ProjectModalContent>
       </ProjectModalContentSpacer>
       <ProjectModalButton
-        text={validateButtonContent}
+        text={joinProjectButtonContent}
         onClick={onClickDone}
         // show the button as disabled if there is a text about invalid secret input
         // or if there is no input
-        disabled={invalidText !== '' || projectSecret === ''} 
+        disabled={invalidText !== '' || projectSecret === ''}
       />
     </div>
   )
@@ -80,20 +79,21 @@ function ProjectJoinFollowUp({ onDone, checkDone }) {
           required before you can access it.
         </div>
       </ProjectModalContent>
-      <ProjectModalButton
-        text="I understand"
-        onClick={onDone}
-        disabled={false}
-      />
+      <ProjectModalButton text="I understand" onClick={onDone} />
     </div>
   )
 }
 
 export default function JoinProjectModal({
   showModal,
   onClose,
-  onJoinProject,
-  joinedProjectsSecrets = [], // defaulting to an empty array if not provided
+  doJoinProject,
+  joinedProjectsSecrets,
+}: {
+  showModal: boolean
+  onClose: () => void
+  doJoinProject: (projectSecret: string) => Promise<CellIdString>
+  joinedProjectsSecrets: string[]
 }) {
   const reset = () => {
     setProjectSecret('')
@@ -110,7 +110,7 @@ export default function JoinProjectModal({
   const onClickDone = async () => {
     setPendingJoiningProject(true)
     try {
-      await onJoinProject(projectSecret)
+      await doJoinProject(projectSecret)
       setCheckDone(true)
       setPendingJoiningProject(false)
     } catch (e) {

web/src/components/ProjectModal/ProjectModal.js renamed to web/src/components/ProjectModal/ProjectModal.tsx

@@ -4,15 +4,15 @@ import './ProjectModal.scss'
 import Button from '../Button/Button'
 import Typography from '../Typography/Typography'
 
-function ProjectModalHeading({ title }) {
+function ProjectModalHeading({ title }: { title: string }) {
   return (
     <div className="project-modal-heading">
       <Typography style="heading-modal">{title}</Typography>
     </div>
   )
 }
 
-function ProjectModalSubHeading({ title }) {
+function ProjectModalSubHeading({ title }: { title: string }) {
   return (
     <div className="project-modal-subheading">
       <Typography style="subtitle-modal">{title}</Typography>
@@ -24,7 +24,15 @@ function ProjectModalContent({ children }) {
   return <div className="project-modal-content">{children}</div>
 }
 
-function ProjectModalButton({ text, onClick, disabled }) {
+function ProjectModalButton({
+  text,
+  onClick,
+  disabled,
+}: {
+  text: React.ReactNode
+  onClick: () => void
+  disabled?: boolean
+}) {
   return (
     <div className="project-modal-button">
       <Button text={text} onClick={onClick} disabled={disabled} />

web/src/routes/Dashboard/Dashboard.component.tsx

@@ -97,9 +97,7 @@ const Dashboard: React.FC<DashboardProps> = ({
     project: { name: string; image: string },
     passphrase: string
   ) => createProject(agentAddress, project, passphrase)
-
-  const onJoinProject = (passphrase: string) => joinProject(passphrase)
-
+  const doJoinProject = (passphrase: string) => joinProject(passphrase)
   const onImportProject = (
     cellIdString: CellIdString,
     projectData: any,
@@ -260,7 +258,7 @@ const Dashboard: React.FC<DashboardProps> = ({
         onClose={() => setShowCreateModal(false)}
       />
       <JoinProjectModal
-        onJoinProject={onJoinProject}
+        doJoinProject={doJoinProject}
         showModal={showJoinModal}
         onClose={() => setShowJoinModal(false)}
         joinedProjectsSecrets={joinedProjectsSecrets}