Update to fully controlled component (#114)

amundsen_application/static/js/components/AnnouncementPage/index.tsx

@@ -14,10 +14,6 @@ import { AnnouncementsGetRequest } from 'ducks/announcements/types';
 import { announcementsGet } from 'ducks/announcements/reducer';
 import { AnnouncementPost } from './types';
 
-interface AnnouncementPageState {
-  posts: AnnouncementPost[];
-}
-
 export interface StateFromProps {
   posts: AnnouncementPost[];
 }
@@ -28,13 +24,9 @@ export interface DispatchFromProps {
 
 export type AnnouncementPageProps = StateFromProps & DispatchFromProps;
 
-export class AnnouncementPage extends React.Component<AnnouncementPageProps, AnnouncementPageState> {
+export class AnnouncementPage extends React.Component<AnnouncementPageProps> {
   constructor(props) {
     super(props);
-
-    this.state = {
-      posts: this.props.posts,
-    };
   }
 
   componentDidMount() {
@@ -56,7 +48,7 @@ export class AnnouncementPage extends React.Component<AnnouncementPageProps, Ann
   }
 
   createPosts() {
-    return this.state.posts.map((post, index) => {
+    return this.props.posts.map((post, index) => {
       return this.createPost(post, index)
     });
   }

amundsen_application/static/js/components/AnnouncementPage/tests/index.spec.tsx

@@ -37,22 +37,20 @@ describe('AnnouncementPage', () => {
 
     describe('createPost', () => {
         let content;
-        let post;
         beforeEach(() => {
-            post = subject.state().posts[0];
-            content = shallow(subject.instance().createPost(post, 0));
+            content = shallow(subject.instance().createPost(props.posts[0], 0));
         });
         it('renders the post title', () => {
-            expect(content.children().at(0).children().at(0).text()).toEqual(post.title);
+            expect(content.children().at(0).children().at(0).text()).toEqual(props.posts[0].title);
         });
 
         it('renders the post date', () => {
-            expect(content.children().at(0).children().at(1).text()).toEqual(post.date);
+            expect(content.children().at(0).children().at(1).text()).toEqual(props.posts[0].date);
         });
 
         it('renders SanitizedHTML with the post content', () => {
             expect(content.find(SanitizedHTML).props()).toMatchObject({
-                html: post.html_content,
+                html: props.posts[0].html_content,
             });
         });
     });
@@ -62,12 +60,12 @@ describe('AnnouncementPage', () => {
             subject.instance().createPost = jest.fn();
             subject.instance().createPosts();
         });
-        it('call createPost() for each state.posts[] item', () => {
-            expect(subject.instance().createPost).toHaveBeenCalledTimes(subject.state().posts.length)
+        it('call createPost() for each props.posts[] item', () => {
+            expect(subject.instance().createPost).toHaveBeenCalledTimes(props.posts.length)
         });
 
         it('passes correct props to createPost()', () => {
-            expect(subject.instance().createPost).toHaveBeenCalledWith(subject.state().posts[0], 0);
+            expect(subject.instance().createPost).toHaveBeenCalledWith(props.posts[0], 0);
         });
     });
 

amundsen_application/static/js/components/ProfilePage/index.tsx

@@ -24,11 +24,7 @@ interface DispatchFromProps {
 
 export type ProfilePageProps = StateFromProps & DispatchFromProps;
 
-interface ProfilePageState {
-  user: User;
-}
-
-export class ProfilePage extends React.Component<ProfilePageProps, ProfilePageState> {
+export class ProfilePage extends React.Component<ProfilePageProps> {
   private userId: string;
 
   constructor(props) {
@@ -37,10 +33,6 @@ export class ProfilePage extends React.Component<ProfilePageProps, ProfilePageSt
     const { match } = props;
     const params = match.params;
     this.userId = params && params.userId ? params.userId : '';
-
-    this.state = {
-      user: this.props.user,
-    };
   }
 
   componentDidMount() {
@@ -57,7 +49,7 @@ export class ProfilePage extends React.Component<ProfilePageProps, ProfilePageSt
   }
 
   generateTabInfo = () => {
-    const user = this.state.user;
+    const user = this.props.user;
     const tabInfo = [];
 
     // TODO: Populate tabs based on data
@@ -84,7 +76,7 @@ export class ProfilePage extends React.Component<ProfilePageProps, ProfilePageSt
   /* TODO: Add support to direct to 404 page for edgecase of someone typing in
      or pasting in a bad url. This would be consistent with TableDetail page behavior */
   render() {
-    const user = this.state.user;
+    const user = this.props.user;
     return (
       <DocumentTitle title={ `${user.display_name} - Amundsen Profile` }>
         <div className="container profile-page">