ref(ts): Convert Settings Project item to Typescript (#21404)

Author: priscilawebdev

src/sentry/static/sentry/app/components/projects/bookmarkStar.tsx

@@ -14,11 +14,11 @@ import {Client} from 'app/api';
 
 type Props = {
   api: Client;
+  organization: Organization;
+  project: Project;
   /* used to override when under local state */
   isBookmarked?: boolean;
   className?: string;
-  organization: Organization;
-  project: Project;
   onToggle?: (isBookmarked: boolean) => void;
 };
 

…tings/components/settingsProjectItem.jsx …tings/components/settingsProjectItem.tsxsrc/sentry/static/sentry/app/views/settings/components/settingsProjectItem.jsx renamed to src/sentry/static/sentry/app/views/settings/components/settingsProjectItem.tsx src/sentry/static/sentry/app/views/settings/components/settingsProjectItem.jsx renamed to src/sentry/static/sentry/app/views/settings/components/settingsProjectItem.tsx

@@ -4,31 +4,32 @@ import React from 'react';
 import BookmarkStar from 'app/components/projects/bookmarkStar';
 import Link from 'app/components/links/link';
 import ProjectLabel from 'app/components/projectLabel';
-import SentryTypes from 'app/sentryTypes';
 import space from 'app/styles/space';
+import {Project, Organization} from 'app/types';
 
-class ProjectItem extends React.Component {
-  static propTypes = {
-    project: SentryTypes.Project,
-    organization: SentryTypes.Organization,
-  };
+type Props = {
+  project: Project;
+  organization: Organization;
+};
 
-  constructor(props) {
-    super(props);
-    this.state = {
-      isBookmarked: this.props.project.isBookmarked,
-    };
-  }
+type State = {
+  isBookmarked: boolean;
+};
+
+class ProjectItem extends React.Component<Props, State> {
+  state = {
+    isBookmarked: this.props.project.isBookmarked,
+  };
 
-  handleToggleBookmark = isBookmarked => {
+  handleToggleBookmark = (isBookmarked: State['isBookmarked']) => {
     this.setState({isBookmarked});
   };
 
   render() {
     const {project, organization} = this.props;
 
     return (
-      <Container key={project.id}>
+      <Wrapper>
         <BookmarkLink
           organization={organization}
           project={project}
@@ -38,12 +39,12 @@ class ProjectItem extends React.Component {
         <Link to={`/settings/${organization.slug}/projects/${project.slug}/`}>
           <ProjectLabel project={project} />
         </Link>
-      </Container>
+      </Wrapper>
     );
   }
 }
 
-const Container = styled('div')`
+const Wrapper = styled('div')`
   display: flex;
   align-items: center;
 `;