Merge pull request #122 from jorilallo/new-collection

Create a collection

frontend/components/Button/Button.js

@@ -25,13 +25,17 @@ const RealButton = styled.button`
   &:hover {
     background: ${darken(0.05, color.primary)};
   }
+  &:disabled {
+    background: ${color.slateLight};
+  }
 `;
 
 const Label = styled.span`
-  padding: 2px 12px;
+  padding: 4px 16px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+  font-weight: 500;
 `;
 
 const Inner = styled.span`

frontend/components/HelpText/HelpText.js

@@ -0,0 +1,10 @@
+// @flow
+import styled from 'styled-components';
+import { color } from 'styles/constants';
+
+const HelpText = styled.p`
+  user-select: none;
+  color: ${color.slateDark};
+`;
+
+export default HelpText;

frontend/components/HelpText/index.js

@@ -0,0 +1,3 @@
+// @flow
+import HelpText from './HelpText';
+export default HelpText;

frontend/components/Icon/AddIcon.js

@@ -0,0 +1,21 @@
+// @flow
+import React from 'react';
+import Icon from './Icon';
+import type { Props } from './Icon';
+
+export default function AddIcon(props: Props) {
+  return (
+    <Icon {...props}>
+      <svg
+        fill="#000000"
+        height="24"
+        viewBox="0 0 24 24"
+        width="24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path d="M0 0h24v24H0z" fill="none" />
+        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z" />
+      </svg>
+    </Icon>
+  );
+}

frontend/components/Input/Input.js

@@ -2,13 +2,18 @@
 import React from 'react';
 import styled from 'styled-components';
 import Flex from 'components/Flex';
-import { size } from 'styles/constants';
+import { size, color } from 'styles/constants';
 
 const RealTextarea = styled.textarea`
   border: 0;
   flex: 1;
   padding: 8px 12px;
   outline: none;
+  background: none;
+
+  &::placeholder {
+    color: ${color.slate};
+  }
 `;
 
 const RealInput = styled.input`
@@ -16,36 +21,56 @@ const RealInput = styled.input`
   flex: 1;
   padding: 8px 12px;
   outline: none;
+  background: none;
+
+  &::placeholder {
+    color: ${color.slateLight};
+  }
 `;
 
-const Wrapper = styled(Flex)`
+const Wrapper = styled.div`
+
+`;
+
+const Outline = styled(Flex)`
   display: flex;
   flex: 1;
   margin: 0 0 ${size.large};
   color: inherit;
-  border-width: 2px;
+  border-width: 1px;
   border-style: solid;
-  border-color: ${props => (props.hasError ? 'red' : 'rgba(0, 0, 0, .15)')};
-  border-radius: ${size.small};
+  border-color: ${props => (props.hasError ? 'red' : color.slateLight)};
+  border-radius: 4px;
+  font-weight: normal;
 
-  &:focus,
-  &:active {
-    border-color: rgba(0, 0, 0, .25);
+  &:focus {
+    border-color: ${color.slate}
   }
 `;
 
+const LabelText = styled.div`
+  font-weight: 500;
+  padding-bottom: 4px;
+`;
+
 export type Props = {
   type: string,
   value: string,
+  label?: string,
   className?: string,
 };
 
-export default function Input({ type, ...rest }: Props) {
-  const Component = type === 'textarea' ? RealTextarea : RealInput;
+export default function Input({ type, label, ...rest }: Props) {
+  const InputComponent = type === 'textarea' ? RealTextarea : RealInput;
 
   return (
     <Wrapper>
-      <Component {...rest} />
+      <label>
+        {label && <LabelText>{label}</LabelText>}
+        <Outline>
+          <InputComponent {...rest} />
+        </Outline>
+      </label>
     </Wrapper>
   );
 }

frontend/components/Layout/Layout.js

@@ -13,6 +13,9 @@ import DropdownMenu, { MenuItem } from 'components/DropdownMenu';
 import { LoadingIndicatorBar } from 'components/LoadingIndicator';
 import Scrollable from 'components/Scrollable';
 import Avatar from 'components/Avatar';
+import Modal from 'components/Modal';
+import AddIcon from 'components/Icon/AddIcon';
+import CollectionNew from 'scenes/CollectionNew';
 
 import SidebarCollection from './components/SidebarCollection';
 import SidebarCollectionList from './components/SidebarCollectionList';
@@ -38,6 +41,8 @@ type Props = {
 
 @observer class Layout extends React.Component {
   props: Props;
+  state: { createCollectionModalOpen: boolean };
+  state = { createCollectionModalOpen: false };
 
   static defaultProps = {
     search: true,
@@ -59,8 +64,16 @@ type Props = {
     this.props.auth.logout(() => this.props.history.push('/'));
   };
 
+  handleCreateCollection = () => {
+    this.setState({ createCollectionModalOpen: true });
+  };
+
+  handleCloseModal = () => {
+    this.setState({ createCollectionModalOpen: false });
+  };
+
   render() {
-    const { user, auth, ui } = this.props;
+    const { user, auth, collections, history, ui } = this.props;
 
     return (
       <Container column auto>
@@ -112,6 +125,9 @@ type Props = {
                     <SidebarLink to="/starred">Starred</SidebarLink>
                   </LinkSection>
                   <LinkSection>
+                    <CreateCollection onClick={this.handleCreateCollection}>
+                      <AddIcon />
+                    </CreateCollection>
                     {ui.activeCollection
                       ? <SidebarCollection
                           document={ui.activeDocument}
@@ -128,11 +144,40 @@ type Props = {
             {this.props.children}
           </Content>
         </Flex>
+        <Modal
+          isOpen={this.state.createCollectionModalOpen}
+          onRequestClose={this.handleCloseModal}
+          title="Create a collection"
+        >
+          <CollectionNew
+            collections={collections}
+            history={history}
+            onCollectionCreated={this.handleCloseModal}
+          />
+        </Modal>
       </Container>
     );
   }
 }
 
+const CreateCollection = styled.a`
+  position: absolute;
+  top: 8px;
+  right: ${layout.hpadding};
+
+  svg {
+    opacity: .35;
+    width: 16px;
+    height: 16px;
+  }
+
+  &:hover {
+    svg {
+      opacity: 1;
+    }
+  }
+`;
+
 const Container = styled(Flex)`
   position: relative;
   width: 100%;
@@ -179,6 +224,7 @@ const Header = styled(Flex)`
 const LinkSection = styled(Flex)`
   flex-direction: column;
   padding: 10px 0;
+  position: relative;
 `;
 
 export default withRouter(inject('user', 'auth', 'ui', 'collections')(Layout));

frontend/components/Modal/Modal.js

@@ -0,0 +1,76 @@
+// @flow
+import React from 'react';
+import styled from 'styled-components';
+import ReactModal from 'react-modal';
+import { modalFadeIn } from 'styles/animations';
+
+import CloseIcon from 'components/Icon/CloseIcon';
+import Flex from 'components/Flex';
+
+type Props = {
+  children?: React$Element<any>,
+  isOpen: boolean,
+  title?: string,
+  onRequestClose: () => void,
+};
+
+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;
+  max-width: 100%;
+  position: relative;
+`;
+
+const StyledModal = styled(ReactModal)`
+  animation: ${modalFadeIn} 250ms ease;
+
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background: white;
+  padding: 15vh 2rem 2rem
+`;
+
+const Close = styled.a`
+  position: fixed;
+  top: 3rem;
+  right: 3rem;
+  opacity: .5;
+
+  &:hover {
+    opacity: 1;
+  }
+`;
+
+export default Modal;

frontend/components/Modal/index.js

@@ -0,0 +1,3 @@
+// @flow
+import Modal from './Modal';
+export default Modal;

frontend/models/Collection.js

@@ -3,12 +3,16 @@ import { extendObservable, action, computed, runInAction } from 'mobx';
 import invariant from 'invariant';
 import _ from 'lodash';
 
-import ApiClient, { client } from 'utils/ApiClient';
+import { client } from 'utils/ApiClient';
 import stores from 'stores';
 import ErrorsStore from 'stores/ErrorsStore';
 import type { NavigationNode } from 'types';
 
 class Collection {
+  isSaving: boolean = false;
+  hasPendingChanges: boolean = false;
+  errors: ErrorsStore;
+
   createdAt: string;
   description: ?string;
   id: string;
@@ -18,9 +22,6 @@ class Collection {
   updatedAt: string;
   url: string;
 
-  client: ApiClient;
-  errors: ErrorsStore;
-
   /* Computed */
 
   @computed get entryUrl(): string {
@@ -29,26 +30,60 @@ class Collection {
 
   /* Actions */
 
-  @action update = async () => {
+  @action fetch = async () => {
     try {
-      const res = await this.client.post('/collections.info', { id: this.id });
+      const res = await client.post('/collections.info', { id: this.id });
       invariant(res && res.data, 'API response should be available');
       const { data } = res;
-      runInAction('Collection#update', () => {
+      runInAction('Collection#fetch', () => {
         this.updateData(data);
       });
     } catch (e) {
       this.errors.add('Collection failed loading');
     }
+
+    return this;
   };
 
-  updateData(data: Collection) {
+  @action save = async () => {
+    if (this.isSaving) return this;
+    this.isSaving = true;
+
+    try {
+      let res;
+      if (this.id) {
+        res = await client.post('/collections.update', {
+          id: this.id,
+          name: this.name,
+          description: this.description,
+        });
+      } else {
+        res = await client.post('/collections.create', {
+          name: this.name,
+          description: this.description,
+        });
+      }
+      invariant(res && res.data, 'Data should be available');
+      this.updateData({
+        ...res.data,
+        hasPendingChanges: false,
+      });
+    } catch (e) {
+      this.errors.add('Collection failed saving');
+      return false;
+    } finally {
+      this.isSaving = false;
+    }
+
+    return true;
+  };
+
+  updateData(data: Object = {}) {
     extendObservable(this, data);
   }
 
-  constructor(collection: Collection) {
+  constructor(collection: Object = {}) {
     this.updateData(collection);
-    this.client = client;
     this.errors = stores.errors;
   }
 }

frontend/models/Collection.test.js

@@ -1,10 +1,6 @@
 /* eslint-disable */
 import Collection from './Collection';
-
-jest.mock('utils/ApiClient', () => ({
-  client: { post: {} },
-}));
-jest.mock('stores', () => ({ errors: {} }));
+const { client } = require('utils/ApiClient');
 
 describe('Collection model', () => {
   test('should initialize with data', () => {
@@ -15,40 +11,34 @@ describe('Collection model', () => {
     expect(collection.name).toBe('Engineering');
   });
 
-  describe('#update', () => {
-    test('should update', async () => {
+  describe('#fetch', () => {
+    test('should update data', async () => {
+      client.post = jest.fn(() => ({
+        data: {
+          name: 'New collection',
+        },
+      }))
+
       const collection = new Collection({
         id: 123,
         name: 'Engineering',
       });
-      collection.client = {
-        post: jest.fn(() => ({
-          data: {
-            name: 'New collection',
-          },
-        })),
-      };
 
-      await collection.update();
-
-      expect(collection.client.post).toHaveBeenCalledWith('/collections.info', {
-        id: 123,
-      });
+      await collection.fetch();
       expect(collection.name).toBe('New collection');
     });
 
     test('should report errors', async () => {
+      client.post = jest.fn(() => Promise.reject())
+
       const collection = new Collection({
         id: 123,
       });
-      collection.client = {
-        post: jest.fn(() => Promise.reject),
-      };
       collection.errors = {
         add: jest.fn(),
       };
 
-      await collection.update();
+      await collection.fetch();
 
       expect(collection.errors.add).toHaveBeenCalledWith(
         'Collection failed loading'

frontend/models/Document.js

@@ -30,6 +30,7 @@ class Document {
   starred: boolean = false;
   text: string = '';
   title: string = 'Untitled document';
+  parentDocument: ?Document;
   updatedAt: string;
   updatedBy: User;
   url: string;
@@ -151,13 +152,14 @@ class Document {
     return this;
   };
 
-  updateData(data: Object | Document) {
+  updateData(data: Object = {}, dirty: boolean = false) {
     if (data.text) data.title = parseHeader(data.text);
+    if (dirty) data.hasPendingChanges = true;
     extendObservable(this, data);
   }
 
-  constructor(document?: Object = {}) {
-    this.updateData(document);
+  constructor(data?: Object = {}) {
+    this.updateData(data);
     this.errors = stores.errors;
   }
 }

frontend/scenes/CollectionNew/CollectionNew.js

@@ -0,0 +1,72 @@
+// @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';
+
+import Collection from 'models/Collection';
+import CollectionsStore from 'stores/CollectionsStore';
+
+type Props = {
+  history: Object,
+  collections: CollectionsStore,
+  onCollectionCreated: () => void,
+};
+
+@observer class CollectionNew extends Component {
+  props: Props;
+  @observable collection: Collection;
+  @observable name: string = '';
+  @observable isSaving: boolean;
+
+  constructor(props: Props) {
+    super(props);
+    this.collection = new Collection();
+  }
+
+  handleSubmit = async (ev: SyntheticEvent) => {
+    ev.preventDefault();
+    this.isSaving = true;
+    this.collection.updateData({ name: this.name });
+    const success = await this.collection.save();
+
+    if (success) {
+      this.props.collections.add(this.collection);
+      this.props.onCollectionCreated();
+      this.props.history.push(this.collection.url);
+    }
+
+    this.isSaving = false;
+  };
+
+  handleNameChange = (ev: SyntheticInputEvent) => {
+    this.name = ev.target.value;
+  };
+
+  render() {
+    return (
+      <form onSubmit={this.handleSubmit}>
+        {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.
+        </HelpText>
+        <Input
+          type="text"
+          label="Name"
+          onChange={this.handleNameChange}
+          value={this.name}
+          required
+          autoFocus
+        />
+        <Button type="submit" disabled={this.isSaving || !this.name}>
+          {this.isSaving ? 'Creating…' : 'Create'}
+        </Button>
+      </form>
+    );
+  }
+}
+
+export default CollectionNew;

frontend/scenes/CollectionNew/index.js

@@ -0,0 +1,3 @@
+// @flow
+import CollectionNew from './CollectionNew';
+export default CollectionNew;

frontend/scenes/Document/Document.js

@@ -120,7 +120,7 @@ type Props = {
 
   onChange = text => {
     if (!this.document) return;
-    this.document.updateData({ text, hasPendingChanges: true });
+    this.document.updateData({ text }, true);
   };
 
   onCancel = () => {

frontend/stores/CollectionsStore.js

@@ -42,6 +42,14 @@ class CollectionsStore {
     return _.find(this.data, { id });
   };
 
+  @action add = (collection: Collection): void => {
+    this.data.push(collection);
+  };
+
+  @action remove = (id: string): void => {
+    this.data.splice(this.data.indexOf(id), 1);
+  };
+
   constructor(options: Options) {
     this.client = client;
     this.errors = stores.errors;

frontend/stores/ErrorsStore.js

@@ -1,7 +1,7 @@
 // @flow
 import { observable, action } from 'mobx';
 
-class UiStore {
+class ErrorsStore {
   @observable errors = observable.array([]);
 
   /* Actions */
@@ -15,4 +15,4 @@ class UiStore {
   };
 }
 
-export default UiStore;
+export default ErrorsStore;

frontend/styles/animations.js

@@ -0,0 +1,14 @@
+// @flow
+import { keyframes } from 'styled-components';
+
+export const modalFadeIn = keyframes`
+  from {
+    opacity: 0;
+    transform: scale(.98);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+`;

frontend/styles/constants.js

@@ -40,7 +40,7 @@ export const color = {
   text: '#171B35',
 
   /* Brand */
-  primary: '#73DF7B',
+  primary: '#2B8FBF',
 
   /* Dark Grays */
   slate: '#9BA6B2',

frontend/utils/__mocks__/ApiClient.js

@@ -0,0 +1,5 @@
+export default {
+  client: {
+    post: jest.fn(() => Promise.resolve),
+  },
+};

frontend/utils/setupJest.js

@@ -9,5 +9,6 @@ const snap = children => {
   expect(toJson(wrapper)).toMatchSnapshot();
 };
 
+global.fetch = require('jest-fetch-mock');
 global.localStorage = localStorage;
 global.snap = snap;