CDC #2 - Adding ability to create projects/users

app/controllers/api/projects_controller.rb

@@ -0,0 +1,3 @@
+class Api::ProjectsController < Api::BaseController
+  search_attributes :name
+end

app/models/project.rb

@@ -0,0 +1,7 @@
+class Project < ApplicationRecord
+  # Relationships
+  has_many :user_projects, dependent: :destroy
+
+  # Resourceable parameters
+  allow_params :name, :description
+end

app/models/user.rb

@@ -1,7 +1,10 @@
 class User < ApplicationRecord
-  # JWT
-  has_secure_password
+  # Relationships
+  has_many :user_projects, dependent: :destroy
 
   # Resourceable parameters
-  allow_params :name, :email, :password, :password_confirmation
+  allow_params :name, :email, :password, :password_confirmation, :admin
+
+  # JWT
+  has_secure_password
 end

app/models/user_project.rb

@@ -0,0 +1,11 @@
+class UserProject < ApplicationRecord
+  # Relationships
+  belongs_to :user
+  belongs_to :project
+
+  # Resourceable parameters
+  allow_params :user_id, :project_id, :role
+
+  # Validations
+  validates_presence_of :role
+end

app/serializers/projects_serializer.rb

@@ -0,0 +1,4 @@
+class ProjectsSerializer < BaseSerializer
+  index_attributes :id, :name, :description
+  show_attributes :id, :name, :description
+end

client/package.json

@@ -11,13 +11,14 @@
     "flow": "flow"
   },
   "dependencies": {
-    "@performant-software/semantic-components": "^0.5.17",
-    "@performant-software/shared-components": "^0.5.17",
+    "@performant-software/semantic-components": "^1.0.19-beta.2",
+    "@performant-software/shared-components": "^1.0.19-beta.2",
     "classnames": "^2.3.1",
     "i18next": "^21.9.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^11.18.4",
+    "react-icons": "^4.10.1",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "semantic-ui-react": "^2.1.2",
@@ -34,7 +35,7 @@
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^4.5.0",
-    "flow-bin": "^0.177.0"
+    "flow-bin": "^0.215.1"
   },
   "browserslist": {
     "production": [

client/src/App.js

@@ -1,28 +1,66 @@
 // @flow
 
+import { useDragDrop } from '@performant-software/shared-components';
 import React, { type ComponentType } from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
-import { useDragDrop } from '@performant-software/shared-components';
-import Admin from './pages/Admin';
 import AuthenticatedRoute from './components/AuthenticatedRoute';
-import Home from './pages/Home';
+import Layout from './components/Layout';
+import Login from './pages/Login';
+import Project from './pages/Project';
+import Projects from './pages/Projects';
+import User from './pages/User';
+import Users from './pages/Users';
 
 const App: ComponentType<any> = useDragDrop(() => (
   <Router>
     <Routes>
       <Route
         path='/'
-        element={<Home />}
+        element={<Login />}
+        exact
         index
       />
       <Route
-        path='/admin'
+        path='/'
         element={(
           <AuthenticatedRoute>
-            <Admin />
+            <Layout />
           </AuthenticatedRoute>
         )}
-      />
+      >
+        <Route
+          path='/projects'
+        >
+          <Route
+            index
+            element={<Projects />}
+          />
+          <Route
+            path='new'
+            element={<Project />}
+          />
+          <Route
+            path=':projectId'
+            element={<Project />}
+          />
+        </Route>
+        <Route
+          path='/users'
+        >
+          <Route
+            index
+            element={<Users />}
+          />
+          <Route
+            path='new'
+            element={<User />}
+          />
+          <Route
+            path=':userId'
+            element={<User />}
+          />
+        </Route>
+      </Route>
     </Routes>
   </Router>
 ));

client/src/components/Layout.js

@@ -0,0 +1,69 @@
+// @flow
+
+import { Breadcrumbs } from '@performant-software/semantic-components';
+import React, { useEffect, useMemo, useRef, useState, type AbstractComponent } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link, Outlet, useLocation, useParams } from 'react-router-dom';
+import { Container } from 'semantic-ui-react';
+import _ from 'underscore';
+import BreadcrumbsService, { Services } from '../services/Breadcrumbs';
+import Sidebar from './Sidebar';
+import styles from './Layout.module.css';
+
+const Layout: AbstractComponent<any> = () => {
+  const [menuWidth, setMenuWidth] = useState(0);
+  const menuRef = useRef();
+
+  const { pathname } = useLocation();
+  const params = useParams();
+
+  const { t } = useTranslation();
+  const defaultLabel = { new: t('Layout.labels.new') };
+
+  /**
+   * Builds the map of URL key to label.
+   */
+  const labels = useMemo(() => _.reduce(
+    _.keys(Services),
+    (memo, key) => _.extend(memo, { [key] : t(`Layout.labels.${key}`) }),
+    defaultLabel
+  ), [defaultLabel, t]);
+
+  /**
+   * Sets the sidebar menu width when the component is mounted.
+   */
+  useEffect(() => {
+    const { current: instance } = menuRef;
+
+    if (instance) {
+      setMenuWidth(instance.offsetWidth);
+    }
+  }, [menuRef.current]);
+
+  return (
+    <Container
+      className={styles.layout}
+      fluid
+    >
+      <Sidebar
+        context={menuRef}
+      />
+      <div
+        className={styles.content}
+        style={{
+          marginLeft: `${menuWidth}px`
+        }}
+      >
+        <Breadcrumbs
+          as={Link}
+          labels={labels}
+          onLoad={(id, name) => BreadcrumbsService.onLoad(name, id, params)}
+          pathname={pathname}
+        />
+        <Outlet />
+      </div>
+    </Container>
+  );
+};
+
+export default Layout;

client/src/components/Layout.module.css

@@ -0,0 +1,4 @@
+.layout > .content {
+  height: 100vh;
+  padding: 1em 2em 1em 2em;
+}

client/src/components/MenuLink.js

@@ -0,0 +1,34 @@
+// @flow
+
+import React, { type ComponentType, type Node } from 'react';
+import {
+  Link,
+  useMatch,
+  useResolvedPath
+} from 'react-router-dom';
+import { Menu } from 'semantic-ui-react';
+import _ from 'underscore';
+
+type Props = {
+  children?: Node | (active: boolean) => Node,
+  parent?: boolean,
+  to: string
+};
+
+const MenuLink: ComponentType<any> = (props: Props) => {
+  const url = `${props.to}${props.parent ? '/*' : ''}`;
+  const { pathname } = useResolvedPath(url);
+  const active = useMatch({ path: pathname, end: true });
+
+  return (
+    <Menu.Item
+      {..._.omit(props, 'children')}
+      active={active}
+      as={Link}
+    >
+      { props.children }
+    </Menu.Item>
+  );
+};
+
+export default MenuLink;