+
-
+
+
);
}
}
+const Container = styled(Flex)`
+ width: 100%;
+ height: 100%;
+`;
+
+const Header = styled(Flex)`
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ padding: 0 20px;
+
+ z-index: 1;
+ background: #fff;
+ height: ${headerHeight};
+ border-bottom: 1px solid #eee;
+
+ font-size: 14px;
+ line-height: 1;
+`;
+
+const LogoLink = styled(Link)`
+ font-family: 'Atlas Grotesk';
+ font-weight: bold;
+ color: ${textColor};
+ text-decoration: none;
+ font-size: 16px;
+`;
+
+const Title = styled.span`
+ color: #ccc;
+
+ a {
+ color: #ccc;
+ }
+
+ a:hover {
+ color: $textColor;
+ }
+`;
+
+const Search = styled(Flex)`
+ margin: 0 5px;
+ padding: 15px 5px 0 5px;
+ cursor: pointer;
+`;
+
+const SearchIcon = styled.img`
+ height: 20px;
+`;
+
const Avatar = styled.img`
width: 24px;
height: 24px;
@@ -133,4 +177,9 @@ const MenuLink = styled(Link)`
color: ${textColor};
`;
+const Content = styled(Flex)`
+ height: 100%;
+ overflow: scroll;
+`;
+
export default withRouter(inject('user')(Layout));
diff --git a/frontend/components/Layout/Layout.scss b/frontend/components/Layout/Layout.scss
deleted file mode 100644
index e720b670..00000000
--- a/frontend/components/Layout/Layout.scss
+++ /dev/null
@@ -1,72 +0,0 @@
-@import '~styles/constants.scss';
-
-.container {
- display: flex;
- flex: 1;
- flex-direction: column;
-
- width: 100%;
- height: 100%;
-}
-
-.header {
- display: flex;
- justify-content: space-between;
- align-items: center;
-
- padding: 0 20px;
-
- z-index: 1;
- background: #fff;
- height: $headerHeight;
- border-bottom: 1px solid #eee;
-
- font-size: 14px;
- line-height: 1;
-}
-
-.headerLeft {
- display: flex;
- align-items: center;
-
- .team {
- font-family: 'Atlas Grotesk';
- font-weight: bold;
- color: $textColor;
- text-decoration: none;
- font-size: 16px;
- }
-
- .title {
- color: #ccc;
-
- a {
- color: #ccc;
- }
-
- a:hover {
- color: $textColor;
- }
- }
-}
-
-.headerRight {
-}
-
-.search {
- margin: 0 5px;
- padding: 15px 5px 0 5px;
- cursor: pointer;
-
- img {
- height: 20px;
- }
-}
-
-.content {
- display: flex;
- flex: 1;
- justify-content: center;
- height: 100%;
- overflow: scroll;
-}
diff --git a/frontend/components/PageTitle/PageTitle.js b/frontend/components/PageTitle/PageTitle.js
new file mode 100644
index 00000000..1b3526a8
--- /dev/null
+++ b/frontend/components/PageTitle/PageTitle.js
@@ -0,0 +1,11 @@
+// @flow
+import React from 'react';
+import Helmet from 'react-helmet';
+
+type Props = {
+ title: string,
+};
+
+const PageTitle = ({ title }: Props) =>
- Atlas
-
+
+
+ Atlas
+
{this.props.title}
- </span>
- </div>
- <Flex className={styles.headerRight}>
+
+
+
-
+
{this.props.actions}
{user.user &&
@@ -91,9 +84,9 @@ type Props = {
{this.props.search &&
-
+
}
}
-
+
-
- 
-
+
+
{this.props.children}
-
-
-
}
-
-
-
- {collection.name}
-- {collection.description} --
Not Found
diff --git a/frontend/scenes/ErrorAuth/ErrorAuth.js b/frontend/scenes/ErrorAuth/ErrorAuth.js index e5746fe6..c9cf6f2b 100644 --- a/frontend/scenes/ErrorAuth/ErrorAuth.js +++ b/frontend/scenes/ErrorAuth/ErrorAuth.js @@ -4,11 +4,13 @@ import { Link } from 'react-router-dom'; import Layout from 'components/Layout'; import CenteredContent from 'components/CenteredContent'; +import PageTitle from 'components/PageTitle'; class ErrorAuth extends React.Component { render() { return ( -Authentication failed
diff --git a/frontend/scenes/Flatpage/Flatpage.js b/frontend/scenes/Flatpage/Flatpage.js index 0abd0b53..73a88a62 100644 --- a/frontend/scenes/Flatpage/Flatpage.js +++ b/frontend/scenes/Flatpage/Flatpage.js @@ -5,6 +5,7 @@ import { observer } from 'mobx-react'; import Layout, { Title } from 'components/Layout'; import CenteredContent from 'components/CenteredContent'; import { DocumentHtml } from 'components/Document'; +import PageTitle from 'components/PageTitle'; import { convertToMarkdown } from 'utils/markdown'; @@ -20,11 +21,8 @@ type Props = { const { title, content } = this.props; return ( -
diff --git a/frontend/scenes/Settings/Settings.js b/frontend/scenes/Settings/Settings.js
index 49df4a97..e16ac6e9 100644
--- a/frontend/scenes/Settings/Settings.js
+++ b/frontend/scenes/Settings/Settings.js
@@ -11,6 +11,7 @@ import SettingsStore from './SettingsStore';
import Layout, { Title } from 'components/Layout';
import CenteredContent from 'components/CenteredContent';
import SlackAuthLink from 'components/SlackAuthLink';
+import PageTitle from 'components/PageTitle';
@observer class Settings extends React.Component {
store: SettingsStore;
@@ -25,12 +26,8 @@ import SlackAuthLink from 'components/SlackAuthLink';
const showSlackSettings = DEPLOYMENT === 'hosted';
return (
-
+
+
{showSlackSettings &&
diff --git a/frontend/scenes/SlackAuth/SlackAuth.js b/frontend/scenes/SlackAuth/SlackAuth.js
index e29af7bf..8dffa35e 100644
--- a/frontend/scenes/SlackAuth/SlackAuth.js
+++ b/frontend/scenes/SlackAuth/SlackAuth.js
@@ -17,7 +17,8 @@ type Props = {
class SlackAuth extends React.Component {
props: Props;
- state: { redirectTo: string };
+ state: { redirectTo?: string };
+ state = {};
// $FlowFixMe not sure why this breaks
componentDidMount = async () => {
diff --git a/frontend/stores/CollectionsStore.js b/frontend/stores/CollectionsStore.js
new file mode 100644
index 00000000..053e7121
--- /dev/null
+++ b/frontend/stores/CollectionsStore.js
@@ -0,0 +1,59 @@
+// @flow
+import { observable, action, runInAction, ObservableArray } from 'mobx';
+import ApiClient, { client } from 'utils/ApiClient';
+import _ from 'lodash';
+
+import stores from 'stores';
+import Collection from 'models/Collection';
+import ErrorsStore from 'stores/ErrorsStore';
+
+type Options = {
+ teamId: string,
+};
+
+class CollectionsStore {
+ @observable data: ObservableArray = observable.array([]);
+ @observable isLoaded: boolean = false;
+
+ client: ApiClient;
+ teamId: string;
+ errors: ErrorsStore;
+
+ /* Actions */
+
+ @action fetch = async (): Promise<*> => {
+ try {
+ const res = await this.client.post('/collections.list', {
+ id: this.teamId,
+ });
+ const { data } = res;
+ runInAction('CollectionsStore#fetch', () => {
+ this.data.replace(
+ data.map(
+ collection =>
+ new Collection({
+ ...collection,
+ errors: this.errors,
+ })
+ )
+ );
+ this.isLoaded = true;
+ });
+ } catch (e) {
+ this.errors.add('Failed to load collections');
+ }
+ };
+
+ @action getById = async (id: string): Promise => {
+ if (!this.isLoaded) await this.fetch();
+ return _.find(this.data, { id });
+ };
+
+ constructor(options: Options) {
+ this.client = client;
+ this.errors = stores.errors;
+ this.teamId = options.teamId;
+ }
+}
+
+export default CollectionsStore;
diff --git a/frontend/stores/CollectionsStore.test.js b/frontend/stores/CollectionsStore.test.js
new file mode 100644
index 00000000..2694a9dc
--- /dev/null
+++ b/frontend/stores/CollectionsStore.test.js
@@ -0,0 +1,54 @@
+/* eslint-disable */
+import CollectionsStore from './CollectionsStore';
+
+jest.mock('utils/ApiClient', () => ({
+ client: { post: {} },
+}));
+jest.mock('stores', () => ({ errors: {} }));
+
+describe('CollectionsStore', () => {
+ let store;
+
+ beforeEach(() => {
+ store = new CollectionsStore({
+ teamId: 123,
+ });
+ });
+
+ describe('#fetch', () => {
+ test('should load stores', async () => {
+ store.client = {
+ post: jest.fn(() => ({
+ data: [
+ {
+ name: 'New collection',
+ },
+ ],
+ })),
+ };
+
+ await store.fetch();
+
+ expect(store.client.post).toHaveBeenCalledWith('/collections.list', {
+ id: 123,
+ });
+ expect(store.data.length).toBe(1);
+ expect(store.data[0].name).toBe('New collection');
+ });
+
+ test('should report errors', async () => {
+ store.client = {
+ post: jest.fn(() => Promise.reject),
+ };
+ store.errors = {
+ add: jest.fn(),
+ };
+
+ await store.fetch();
+
+ expect(store.errors.add).toHaveBeenCalledWith(
+ 'Failed to load collections'
+ );
+ });
+ });
+});
diff --git a/frontend/styles/constants.scss b/frontend/styles/constants.scss
index 8596344e..5b8eec4c 100644
--- a/frontend/styles/constants.scss
+++ b/frontend/styles/constants.scss
@@ -10,4 +10,6 @@ $headerHeight: 42px;
:export {
textColor: $textColor;
actionColor: $actionColor;
+
+ headerHeight: $headerHeight;
}
diff --git a/frontend/utils/routeHelpers.js b/frontend/utils/routeHelpers.js
index 0b9fcecd..d7a3b14b 100644
--- a/frontend/utils/routeHelpers.js
+++ b/frontend/utils/routeHelpers.js
@@ -1,14 +1,18 @@
// @flow
-export function homeUrl() {
+export function homeUrl(): string {
return '/dashboard';
}
-export function newCollectionUrl() {
+export function newCollectionUrl(): string {
return '/collections/new';
}
-export function searchUrl(query: string) {
+export function searchUrl(query: string): string {
if (query) return `/search/${query}`;
return `/search`;
}
+
+export function notFoundUrl(): string {
+ return '/404';
+}