link settings and projects

2024-12-29 05:10:05 +02:00 · 2016-12-15 14:10:36 +00:00 · 2016-12-15 14:10:36 +00:00 · 297c15db98
commit 297c15db98
parent 1f62fa5fd5
15 changed files with 347 additions and 119 deletions
--- a/frontend/locales/en-us.json
+++ b/frontend/locales/en-us.json
@ -1,4 +1,9 @@
 {
  "your-dashboard": "Your Dashboard",
-  "welcome-to": "Welcome to"
+  "settings": "Settings",
+  "projects": "Projects",
+  "people": "People",
+  "no-personal-projects": "You don't have any personal projects at the moment.",
+  "create-new": "Create new",
+  "your-settings": "Your settings"
 }
--- a/frontend/locales/pt-pt.json
+++ b/frontend/locales/pt-pt.json
@ -1,4 +1,9 @@
 {
  "your-dashboard": "O seu painel",
-  "welcome-to": "Bem vindo a"
+  "settings": "Preferências",
+  "projects": "Projectos",
+  "people": "Pessoas",
+  "no-personal-projects": "No momento não tem projectos pessoais",
+  "create-new": "Criar novo",
+  "your-settings": "As suas preferências"
 }
--- a/frontend/package.json
+++ b/frontend/package.json
@ -23,6 +23,7 @@
    "express": "^4.14.0",
    "inherits": "^2.0.3",
    "locale": "^0.1.0",
+    "lodash.isempty": "^4.4.0",
    "lodash.template": "^4.4.0",
    "lodash.uniq": "^4.5.0",
    "param-case": "^2.1.0",
--- a/frontend/src/containers/app.js
+++ b/frontend/src/containers/app.js
@ -72,7 +72,7 @@ module.exports = (props) => {
    <App {...props}>
      <Header />
      <Article>
-        <Match component={Home} pattern='/' />
+        <Match component={Home} pattern='/:org?/:section?' />
        <Miss component={NotFound} />
      </Article>
      <Footer />
--- a/frontend/src/containers/dashboard/index.js
+++ b/frontend/src/containers/dashboard/index.js
@ -1,38 +1,72 @@
 const React = require('react');
 const ReactIntl = require('react-intl');
-// const ReactRedux = require('react-redux');
-// const ReactRouter = require('react-router');
-// const Styled = require('styled-components');
+const ReactRedux = require('react-redux');
+const ReactRouter = require('react-router');
+
+const H1 = require('@ui/components/h1');
+const Li = require('@ui/components/horizontal-list/li');
+const Redirect = require('@components/redirect');
+const Ul = require('@ui/components/horizontal-list/ul');
+
+const Projects = require('./projects');
+const Settings = require('./settings');

-// const fns = require('@ui/shared/functions');
-//
 const {
  FormattedMessage
 } = ReactIntl;
-//
-// const {
-//   connect
-// } = ReactRedux;

-// const {
-//   Link,
-//   Match
-// } = ReactRouter;
+const {
+  connect
+} = ReactRedux;

-// const {
-//   default: styled
-// } = Styled;
-//
-// const {
-//   remcalc
-// } = fns;
+const {
+  Link,
+  Match,
+  Miss
+} = ReactRouter;

-const Dashboard = (props) => {
+const Dashboard = ({
+  pathname = '',
+  user = {}
+}) => {
  return (
-    <h1>
-      <FormattedMessage id='your-dashboard' />
-    </h1>
+    <div>
+      <H1>
+        <FormattedMessage id='your-dashboard' />
+      </H1>
+      <Ul>
+        <Li>
+          <Link activeClassName='active' to={`/${user.id}/projects`}>
+            <FormattedMessage id='projects' />
+          </Link>
+        </Li>
+        <Li>
+          <Link activeClassName='active' to={`/${user.id}/settings`}>
+            <FormattedMessage id='settings' />
+          </Link>
+        </Li>
+      </Ul>
+      <Match component={Projects} pattern={`/${user.id}/projects`} />
+      <Match component={Settings} pattern={`/${user.id}/settings`} />
+      <Miss component={Redirect(`/${user.id}/projects`)} />
+    </div>
  );
 };

-module.exports = Dashboard;
+Dashboard.propTypes = {
+  pathname: React.PropTypes.string,
+  user: React.PropTypes.shape({
+    id: React.PropTypes.string,
+    name: React.PropTypes.string
+  })
+};
+
+const mapStateToProps = (state) => ({
+  projects: state.session.data.projects,
+  user: {
+    id: state.session.data.name,
+    name: state.session.data.name
+  }
+});
+
+module.exports = connect(mapStateToProps)(Dashboard);
--- a/frontend/src/containers/dashboard/projects.js
+++ b/frontend/src/containers/dashboard/projects.js
@ -0,0 +1,13 @@
+const ReactRedux = require('react-redux');
+
+const Projects = require('@components/projects');
+
+const {
+  connect
+} = ReactRedux;
+
+const mapStateToProps = (state) => ({
+  projects: state.session.data.projects
+});
+
+module.exports = connect(mapStateToProps)(Projects);
--- a/frontend/src/containers/dashboard/settings.js
+++ b/frontend/src/containers/dashboard/settings.js
@ -0,0 +1,43 @@
+const React = require('react');
+const ReactIntl = require('react-intl');
+const ReactRedux = require('react-redux');
+// const ReactRouter = require('react-router');
+//
+const Column = require('@ui/components/column');
+// const Button = require('@ui/components/button');
+const Row = require('@ui/components/row');
+
+const {
+  FormattedMessage
+} = ReactIntl;
+
+const {
+  connect
+} = ReactRedux;
+
+// const {
+//   Link,
+//   Match,
+//   Miss,
+//   Redirect
+// } = ReactRouter;
+
+const Settings = () => {
+  return (
+    <Row>
+      <Column xs={12}>
+        <FormattedMessage id='your-settings' />
+      </Column>
+    </Row>
+  );
+};
+
+Settings.propTypes = {
+  Settings: React.PropTypes.array
+};
+
+const mapStateToProps = (state) => ({
+  Settings: state.session.data.Settings
+});
+
+module.exports = connect(mapStateToProps)(Settings);
--- a/frontend/src/containers/home/index.js
+++ b/frontend/src/containers/home/index.js
@ -1,4 +1,3 @@
-const paramCase = require('param-case');
 const React = require('react');
 const ReactIntl = require('react-intl');
 const ReactRedux = require('react-redux');
@ -7,8 +6,10 @@ const Styled = require('styled-components');

 const Container = require('@ui/components/container');
 const Dashboard = require('@containers/dashboard');
-const fns = require('@ui/shared/functions');
+const Li = require('@ui/components/horizontal-list/li');
 const Org = require('@containers/org');
+const Redirect = require('@components/redirect');
+const Ul = require('@ui/components/horizontal-list/ul');

 const {
  FormattedMessage
@ -20,63 +21,35 @@ const {

 const {
  Link,
-  Match
+  Match,
+  Miss
 } = ReactRouter;

 const {
  default: styled
 } = Styled;

-const {
-  remcalc
-} = fns;
-
 const StyledNav = styled.div`
  background-color: #f2f2f2;
 `;

-const StyledUl = styled.ul`
-  list-style-type: none;
-`;
-
-const StyledLi = styled.li`
-  display: inline-block;
-  margin-right: ${remcalc(10)};
-  padding-top: ${remcalc(10)};
-  padding-bottom: ${remcalc(10)};
-
-  & a.active {
-    cursor: default;
-    color: #373A3C;
-    text-decoration: none;
-  }
-`;
-
 const Home = ({
  orgs = [],
-  pathname = '/'
+  pathname = '/',
+  user = {}
 }) => {
-  const parent = pathname.replace(/\/$/, '');
-  const links = orgs.map((org) => `${parent}/${paramCase(org.name)}`);
-
-  const isDashboardActive = (location) => {
-    return !links.some((link) => location.pathname.indexOf(link) >= 0);
-  };
-
  const navLinks = orgs.map(({
+    id,
    name
  }) => {
-    const to = `${parent}/${paramCase(name)}`;
+    const to = `/${id}`;

    return (
-      <StyledLi key={to}>
-        <Link
-          activeClassName='active'
-          to={to}
-        >
+      <Li key={to}>
+        <Link activeClassName='active' to={to}>
          {name}
        </Link>
-      </StyledLi>
+      </Li>
    );
  });

@ -84,30 +57,20 @@ const Home = ({
    <div>
      <StyledNav>
        <Container>
-          <StyledUl>
-            <StyledLi key={pathname}>
-              <Link
-                activeClassName='active'
-                isActive={isDashboardActive}
-                to={pathname}
-              >
+          <Ul>
+            <Li key={pathname}>
+              <Link activeClassName='active' to={`/${user.id}`}>
                <FormattedMessage id='your-dashboard' />
              </Link>
-            </StyledLi>
+            </Li>
            {navLinks}
-          </StyledUl>
+          </Ul>
        </Container>
      </StyledNav>
      <Container>
-        <Match
-          exactly
-          pattern={parent}
-          render={Dashboard}
-        />
-        <Match
-          component={Org}
-          pattern={`${parent}/:org`}
-        />
+        <Match component={Dashboard} pattern={`/${user.id}/:section?`} />
+        <Match component={Org} pattern='/:org' />
+        <Miss component={Redirect(`/${user.id}`)} />
      </Container>
    </div>
  );
@ -115,13 +78,22 @@ const Home = ({

 Home.propTypes = {
  orgs: React.PropTypes.arrayOf(React.PropTypes.shape({
+    id: React.PropTypes.string,
    name: React.PropTypes.string
  })),
-  pathname: React.PropTypes.string
+  pathname: React.PropTypes.string,
+  user: React.PropTypes.shape({
+    id: React.PropTypes.string,
+    name: React.PropTypes.string
+  })
 };

 const mapStateToProps = (state) => ({
-  orgs: state.session.data.orgs
+  orgs: state.session.data.orgs,
+  user: {
+    id: state.session.data.name,
+    name: state.session.data.name
+  }
 });

 module.exports = connect(mapStateToProps)(Home);
--- a/frontend/src/containers/org/index.js
+++ b/frontend/src/containers/org/index.js
@ -1,48 +1,99 @@
+const isEmpty = require('lodash.isempty');
 const React = require('react');
 const ReactIntl = require('react-intl');
-// const ReactRedux = require('react-redux');
-// const ReactRouter = require('react-router');
-// const Styled = require('styled-components');
-//
-// const Container = require('@ui/components/container');
-// const fns = require('@ui/shared/functions');
-//
+const ReactRedux = require('react-redux');
+const ReactRouter = require('react-router');
+
+const H1 = require('@ui/components/h1');
+const Li = require('@ui/components/horizontal-list/li');
+const Ul = require('@ui/components/horizontal-list/ul');
+
+const NotFound = require('@containers/not-found');
+
+const People = require('./people');
+const Projects = require('./projects');
+const Settings = require('./settings');
+
 const {
  FormattedMessage
 } = ReactIntl;
-//
-// const {
-//   connect
-// } = ReactRedux;
-//
-// const {
-//   Link,
-//   Match
-// } = ReactRouter;
-//
-// const {
-//   default: styled
-// } = Styled;
-//
-// const {
-//   remcalc
-// } = fns;
+
+const {
+  connect
+} = ReactRedux;
+
+const {
+  Link,
+  Match,
+  Miss,
+  Redirect
+} = ReactRouter;

 const Org = ({
-  params
+  org = {},
+  params = {},
+  user = {}
 }) => {
+  if (user.id === params.org) {
+    return null;
+  }
+
+  if (isEmpty(org)) {
+    return (
+      <NotFound />
+    );
+  }
+
  return (
-    <h1>
-      <FormattedMessage id='welcome-to' />
-      <span> {params.org}</span>
-    </h1>
+    <div>
+      <H1>{org.name}</H1>
+      <Ul>
+        <Li>
+          <Link activeClassName='active' to={`/${org.id}/projects`}>
+            <FormattedMessage id='projects' />
+          </Link>
+        </Li>
+        <Li>
+          <Link activeClassName='active' to={`/${org.id}/people`}>
+            <FormattedMessage id='people' />
+          </Link>
+        </Li>
+        <Li>
+          <Link activeClassName='active' to={`/${org.id}/settings`}>
+            <FormattedMessage id='settings' />
+          </Link>
+        </Li>
+      </Ul>
+      <Match component={Projects} pattern='/:org/projects' />
+      <Match component={People} pattern='/:org/people' />
+      <Match component={Settings} pattern='/:org/settings' />
+      <Miss component={Redirect(`/${org.id}/projects`)} />
+    </div>
  );
 };

 Org.propTypes = {
+  org: React.PropTypes.shape({
+    id: React.PropTypes.string,
+    name: React.PropTypes.string
+  }),
  params: React.PropTypes.shape({
    org: React.PropTypes.string
+  }),
+  user: React.PropTypes.shape({
+    id: React.PropTypes.string,
+    name: React.PropTypes.string
  })
 };

-module.exports = Org;
+const mapStateToProps = (state, ownProps) => ({
+  org: state.session.data.orgs.filter((org) => {
+    return org.id === ownProps.params.org;
+  }).pop(),
+  user: {
+    id: state.session.data.name,
+    name: state.session.data.name
+  }
+});
+
+module.exports = connect(mapStateToProps)(Org);
--- a/frontend/src/containers/org/people.js
+++ b/frontend/src/containers/org/people.js
@ -0,0 +1,29 @@
+const React = require('react');
+// const ReactIntl = require('react-intl');
+const ReactRedux = require('react-redux');
+// const ReactRouter = require('react-router');
+
+// const {
+//   FormattedMessage
+// } = ReactIntl;
+
+const {
+  connect
+} = ReactRedux;
+
+// const {
+//   Link,
+//   Match,
+//   Miss,
+//   Redirect
+// } = ReactRouter;
+
+const People = () => {
+  return <p>people</p>;
+};
+
+People.propTypes = {};
+
+const mapStateToProps = (state) => ({});
+
+module.exports = connect(mapStateToProps)(People);
--- a/frontend/src/containers/org/projects.js
+++ b/frontend/src/containers/org/projects.js
@ -0,0 +1,17 @@
+const ReactRedux = require('react-redux');
+
+const Projects = require('@components/projects');
+
+const {
+  connect
+} = ReactRedux;
+
+const mapStateToProps = (state, ownProps) => {
+  return {
+    projects: (state.session.data.orgs.filter((org) => {
+      return org.id === ownProps.params.org;
+    }).pop() || {}).projects
+  };
+};
+
+module.exports = connect(mapStateToProps)(Projects);
--- a/frontend/src/containers/org/settings.js
+++ b/frontend/src/containers/org/settings.js
@ -0,0 +1,29 @@
+const React = require('react');
+// const ReactIntl = require('react-intl');
+const ReactRedux = require('react-redux');
+// const ReactRouter = require('react-router');
+
+// const {
+//   FormattedMessage
+// } = ReactIntl;
+
+const {
+  connect
+} = ReactRedux;
+
+// const {
+//   Link,
+//   Match,
+//   Miss,
+//   Redirect
+// } = ReactRouter;
+
+const Settings = () => {
+  return <p>Settings</p>;
+};
+
+Settings.propTypes = {};
+
+const mapStateToProps = (state) => ({});
+
+module.exports = connect(mapStateToProps)(Settings);
--- a/frontend/src/root.js
+++ b/frontend/src/root.js
@ -26,12 +26,29 @@ const {
 const store = Store({
  session: {
    data: {
+      id: 'nicola',
      name: 'Nicola',
+      projects: [],
      orgs: [{
+        id: 'biz-tech',
        name: 'BizTech',
-        pinned: true
+        pinned: true,
+        projects: [{
+          id: 'forest-foundation-dev',
+          name: 'Forest Foundation Dev',
+          plan: '20.05$ per day'
+        }, {
+          id: 'forest-foundation-testing',
+          name: 'Forest Foundation Testing',
+          plan: '20.05$ per day'
+        }, {
+          id: 'forest-foundation-production',
+          name: 'Forest Foundation Production',
+          plan: '100.17$ per day'
+        }],
      }, {
-        name: 'Make Us Proud'
+        id: 'make-us-proud',
+        name: 'Make Us Proud',
      }]
    }
  }
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@ -3442,6 +3442,10 @@ lodash.foreach@^4.3.0:
  version "4.5.0"
  resolved "https://registry.yarnpkg.com/lodash.foreach/-/lodash.foreach-4.5.0.tgz#1a6a35eace401280c7f06dddec35165ab27e3e53"

+lodash.isempty:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/lodash.isempty/-/lodash.isempty-4.4.0.tgz#6f86cbedd8be4ec987be9aaf33c9684db1b31e7e"
+
 lodash.isequal@^4.4.0:
  version "4.4.0"
  resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.4.0.tgz#6295768e98e14dc15ce8d362ef6340db82852031"
--- a/ui/src/components/column/index.js
+++ b/ui/src/components/column/index.js
@ -23,6 +23,10 @@ const {

 const padding = sizes.halfGutterWidth || '0.5rem';

+const direction = (size) => (props) => {
+  return props[size] ? 'column-reverse' : 'column';
+};
+
 const width = (fallback) => (size) => (props) => {
  return !isUndefined(props[size])
    ? calc(`(${props[size]} / ${sizes.gridColumns}) * 100%`)
@ -54,10 +58,12 @@ module.exports = styled.div`
  flex-basis: ${flexBasis('xs')};
  max-width: ${maxWidth('xs')};
  margin-left: ${marginLeft('xsOffset')};
+  flex-direction: ${direction('xsReverse')};

  ${sm`
    flex-basis: ${flexBasis('sm')};
    max-width: ${maxWidth('sm')};
+    flex-direction: ${direction('smReverse')};
  `}

  ${smOffset`
@ -67,6 +73,7 @@ module.exports = styled.div`
  ${md`
    flex-basis: ${flexBasis('md')};
    max-width: ${maxWidth('md')};
+    flex-direction: ${direction('mdReverse')};
  `}

  ${mdOffset`
@ -76,6 +83,7 @@ module.exports = styled.div`
  ${lg`
    flex-basis: ${flexBasis('lg')};
    max-width: ${maxWidth('lg')};
+    flex-direction: ${direction('lgReverse')};
  `}

  ${lgOffset`