Add Members UI (#70)

* add button for new user * add user created on frontend * add user created on frontend * formatting * linting * fixed add members * linting * comments * comments * linting * add required fields * removed css * linting * fixed year validation * generalized digit regex Bumps [lodash](https://github.com/lodash/lodash) from 4.17.20 to 4.17.21. - [Release notes](https://github.com/lodash/lodash/releases) - [Commits](lodash/lodash@4.17.20...4.17.21) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Bump lodash from 4.17.20 to 4.17.21 (#78) Bumps [lodash](https://github.com/lodash/lodash) from 4.17.20 to 4.17.21. - [Release notes](https://github.com/lodash/lodash/releases) - [Commits](lodash/lodash@4.17.20...4.17.21) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Size notes columns to fit page width
hack4impact-uiuc · May 23, 2021 · 69af5a3 · 69af5a3
1 parent 26b04bf
commit 69af5a3
Show file tree

Hide file tree

Showing 16 changed files with 303 additions and 102 deletions.
diff --git a/api/package.json b/api/package.json
@@ -22,7 +22,7 @@
     "http-errors": "~1.6.3",
     "if-env": "^1.0.4",
     "isomorphic-unfetch": "^3.0.0",
-    "lodash": "^4.17.20",
+    "lodash": "^4.17.21",
     "mongodb": "^3.3.2",
     "mongoose": "^5.7.5",
     "morgan": "~1.9.1",

diff --git a/api/src/api/members.js b/api/src/api/members.js
@@ -68,6 +68,8 @@ router.get(
   }),
 );
 
+// Create a new member
+// Requires Director Level
 router.post(
   '/',
   requireDirector,

diff --git a/api/src/utils/user-utils.js b/api/src/utils/user-utils.js
@@ -28,8 +28,8 @@ const nonEditableFields = [
 const validationFields = {
   email: /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/,
   phone: /^[0-9]{10}$/,
-  gradYear: /^\d{4}/,
-  generationYear: /^\d{4}/,
+  gradYear: /^\d{4}$/,
+  generationYear: /^\d{4}$/,
 };
 
 const getViewableFields = (currentUser, memberId) => {

diff --git a/api/yarn.lock b/api/yarn.lock
@@ -3309,10 +3309,10 @@ lodash.sortby@^4.7.0:
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
   integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=
 
-lodash@^4.17.14, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.3:
-  version "4.17.20"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
-  integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
+lodash@^4.17.14, lodash@^4.17.19, lodash@^4.17.21, lodash@^4.17.3:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
 lolex@^5.0.0:
   version "5.1.2"

diff --git a/client/src/App.js b/client/src/App.js
@@ -18,11 +18,13 @@ function App() {
   useEffect(() => {
     const userAuth = async () => {
       const resp = await getUserAuth();
-      if (!resp.error) setUser(resp.data.result);
+      if (!resp.error) setUser(resp?.data?.result);
     };
     userAuth();
   }, [location]);
 
+  // TODO: Create user context and remove prop drilling
+
   return (
     <div>
       {user && <Navbar user={user} />}
@@ -33,15 +35,15 @@ function App() {
         <Route path={Routes.MEMBER_PAGE}>
           <Switch>
             <Route path={Routes.NOTE_PAGE}>
-              <Note />
+              <Note user={user} />
             </Route>
             <Route DEFAULT>
               {user ? <Profile /> : <Redirect to={Routes.LOGIN_PAGE} />}
             </Route>
           </Switch>
         </Route>
         <Route path={Routes.NOTE_PAGE}>
-          <Note />
+          <Note user={user} />
         </Route>
         <Route path={Routes.NOTES}>
           <Notes />

diff --git a/client/src/components/EditableAttribute/DateAttribute.js b/client/src/components/EditableAttribute/DateAttribute.js
@@ -11,6 +11,7 @@ const DateAttribute = ({
   isDisabled = false,
   className = '',
   onChange,
+  isRequired = false,
 }) => {
   const onValueChange = (date) => {
     onChange(date, attributeLabel);
@@ -24,6 +25,7 @@ const DateAttribute = ({
         onChange={onValueChange}
         selected={value}
         disabled={isDisabled}
+        required={isRequired}
       />
     </div>
   );
@@ -35,6 +37,7 @@ DateAttribute.propTypes = {
   isDisabled: PropTypes.bool,
   className: PropTypes.string,
   onChange: PropTypes.func.isRequired,
+  isRequired: PropTypes.bool,
 };
 
 export default DateAttribute;
diff --git a/client/src/components/EditableAttribute/TextAttribute.js b/client/src/components/EditableAttribute/TextAttribute.js
@@ -10,6 +10,7 @@ const TextAttribute = ({
   isDisabled = false,
   className = '',
   onChange,
+  isRequired = false,
 }) => {
   const onValueChange = (e) => {
     onChange(e.target.value, attributeLabel);
@@ -23,6 +24,7 @@ const TextAttribute = ({
         value={value}
         onChange={onValueChange}
         disabled={isDisabled}
+        required={isRequired}
       />
     </div>
   );
@@ -33,6 +35,7 @@ TextAttribute.propTypes = {
   type: PropTypes.string,
   attributeLabel: PropTypes.string,
   isDisabled: PropTypes.bool,
+  isRequired: PropTypes.bool,
   className: PropTypes.string,
   onChange: PropTypes.func.isRequired,
 };

diff --git a/client/src/components/navbar/Navbar.js b/client/src/components/navbar/Navbar.js
@@ -3,8 +3,8 @@ import { Link, NavLink } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
 import '../../css/Navbar.css';
-
 import ProfileDropdown from '../ProfileDropdown/ProfileDropdown';
+import { levelEnum } from '../../utils/consts';
 import * as Routes from '../../routes';
 
 /**
@@ -19,6 +19,11 @@ const Navbar = ({ user }) => (
       </Link>
     </h2>
     <ul>
+      {levelEnum[user.level] >= levelEnum.DIRECTOR && (
+        <li>
+          <NavLink to="/member/new">Add Member</NavLink>
+        </li>
+      )}
       <li>
         <NavLink to="/">Members</NavLink>
       </li>

diff --git a/client/src/components/table/Table.js b/client/src/components/table/Table.js
@@ -6,15 +6,19 @@ import '../../css/Table.css';
 import 'ag-grid-community/dist/styles/ag-grid.css';
 import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
 
-const Table = ({ data, columns, onRowClick }) => {
+const Table = ({ data, columns, onRowClick, sizeToFit }) => {
   const [entries, setEntries] = useState([]);
+
+  const onGridReady = (params) => sizeToFit && params.api.sizeColumnsToFit();
+
   useEffect(() => {
     setEntries(data);
   }, [data]);
 
   return (
     <div className="ag-theme-alpine table-wrapper">
       <AgGridReact
+        onGridReady={onGridReady}
         rowData={entries}
         defaultColDef={{
           filter: true,
@@ -39,6 +43,7 @@ Table.propTypes = {
   data: PropTypes.array,
   columns: PropTypes.array,
   onRowClick: PropTypes.func,
+  sizeToFit: PropTypes.bool,
 };
 
 export default Table;
diff --git a/client/src/css/Navbar.css b/client/src/css/Navbar.css
@@ -35,6 +35,7 @@ nav .nav-link {
 nav .profile-item p {
   margin: 0;
   display: flex;
+  margin-left: auto;
   align-items: center;
 }