PR feedback

frontend/components/Modal/Modal.js

@@ -1,39 +1,43 @@
 // @flow
-import React, { Component } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 import ReactModal from 'react-modal';
 import { modalFadeIn } from 'styles/animations';
 
-import CloseIcon from '../Icon/CloseIcon';
-import Flex from '../Flex';
+import CloseIcon from 'components/Icon/CloseIcon';
+import Flex from 'components/Flex';
 
-class Modal extends Component {
-  render() {
-    const {
-      children,
-      isOpen,
-      title = 'Untitled Modal',
-      onRequestClose,
-      ...rest
-    } = this.props;
-    if (!isOpen) return null;
+type Props = {
+  children?: React$Element<any>,
+  isOpen: boolean,
+  title?: string,
+  onRequestClose: () => void,
+};
 
-    return (
-      <StyledModal
-        contentLabel={title}
-        onRequestClose={onRequestClose}
-        isOpen={isOpen}
-        {...rest}
-      >
-        <Content column>
-          <h1>{title}</h1>
-          <Close onClick={onRequestClose}><CloseIcon /></Close>
-          {children}
-        </Content>
-      </StyledModal>
-    );
-  }
-}
+const Modal = ({
+  children,
+  isOpen,
+  title = 'Untitled Modal',
+  onRequestClose,
+  ...rest
+}: Props) => {
+  if (!isOpen) return null;
+
+  return (
+    <StyledModal
+      contentLabel={title}
+      onRequestClose={onRequestClose}
+      isOpen={isOpen}
+      {...rest}
+    >
+      <Content column>
+        {title && <h1>{title}</h1>}
+        <Close onClick={onRequestClose}><CloseIcon /></Close>
+        {children}
+      </Content>
+    </StyledModal>
+  );
+};
 
 const Content = styled(Flex)`
   width: 640px;

frontend/scenes/CollectionNew/CollectionNew.js

@@ -1,5 +1,7 @@
 // @flow
 import React, { Component } from 'react';
+import { observable } from 'mobx';
+import { observer } from 'mobx-react';
 import Button from 'components/Button';
 import Input from 'components/Input';
 import HelpText from 'components/HelpText';
@@ -13,48 +15,40 @@ type Props = {
   onCollectionCreated: () => void,
 };
 
-class CollectionNew extends Component {
+@observer class CollectionNew extends Component {
   props: Props;
-  state: { collection: Collection, name: string, isSaving: boolean };
+  @observable collection: Collection;
+  @observable name: string = '';
+  @observable isSaving: boolean;
 
   constructor(props: Props) {
     super(props);
-
-    this.state = {
-      name: '',
-      isSaving: false,
-      collection: new Collection(),
-    };
+    this.collection = new Collection();
   }
 
   handleSubmit = async (ev: SyntheticEvent) => {
     ev.preventDefault();
-    this.setState({ isSaving: true });
-    const { collection } = this.state;
-    const { collections } = this.props;
-
-    collection.updateData(this.state);
-    const success = await collection.save();
+    this.isSaving = true;
+    this.collection.updateData({ name: this.name });
+    const success = await this.collection.save();
 
     if (success) {
-      collections.add(collection);
+      this.props.collections.add(this.collection);
       this.props.onCollectionCreated();
-      this.props.history.push(collection.url);
+      this.props.history.push(this.collection.url);
     }
 
-    this.setState({ isSaving: false });
+    this.isSaving = false;
   };
 
   handleNameChange = (ev: SyntheticInputEvent) => {
-    this.setState({ name: ev.target.value });
+    this.name = ev.target.value;
   };
 
   render() {
-    const { collection } = this.state;
-
     return (
       <form onSubmit={this.handleSubmit}>
-        {collection.errors.errors.map(error => <span>{error}</span>)}
+        {this.collection.errors.errors.map(error => <span>{error}</span>)}
         <HelpText>
           Collections are for grouping your Atlas. They work best when organized
           around a topic or internal team — Product or Engineering for example.
@@ -63,15 +57,12 @@ class CollectionNew extends Component {
           type="text"
           label="Name"
           onChange={this.handleNameChange}
-          value={this.state.name}
+          value={this.name}
           required
           autoFocus
         />
-        <Button
-          type="submit"
-          disabled={this.state.isSaving || !this.state.name}
-        >
-          {this.state.isSaving ? 'Creating…' : 'Create'}
+        <Button type="submit" disabled={this.isSaving || !this.name}>
+          {this.isSaving ? 'Creating…' : 'Create'}
         </Button>
       </form>
     );