Add badges to profile modal and other improvements

app/index.js

@@ -1,3 +1,6 @@
+// Set server timezone to UTC to avoid issues with date parsing
+process.env.TZ = 'UTC'
+
 const path = require('path')
 const express = require('express')
 const bodyParser = require('body-parser')

app/manage/index.js

@@ -302,18 +302,18 @@ function manageRouter (nextApp) {
     }
   )
 
-  // Use same page for two routes
-  const assignBadgePageRoute = [
-    can('organization:edit'),
-    (req, res) => nextApp.render(req, res, '/badges/assign', req.params)
-  ]
+  // New badge assignment
   router.get(
     '/organizations/:id/badges/assign/:userId',
-    ...assignBadgePageRoute
+    can('organization:edit'),
+    (req, res) => nextApp.render(req, res, '/badges-assignment/new', req.params)
   )
+
+  // Edit badge assignment
   router.get(
     '/organizations/:id/badges/:badgeId/assign/:userId',
-    ...assignBadgePageRoute
+    can('organization:edit'),
+    (req, res) => nextApp.render(req, res, '/badges-assignment/edit', req.params)
   )
 
   return router

components/profile-modal.js

@@ -3,6 +3,7 @@ import { isEmpty } from 'ramda'
 import theme from '../styles/theme'
 import Popup from 'reactjs-popup'
 import Button from './button'
+import SvgSquare from '../components/svg-square'
 
 function renderActions (actions) {
   return (
@@ -43,7 +44,32 @@ function renderActions (actions) {
   )
 }
 
-export default function ProfileModal ({ user, attributes, onClose, actions }) {
+function renderBadges (badges) {
+  if (!badges || badges.length === 0) {
+    return null
+  }
+
+  return (
+    <table>
+      {badges.map((b) => (
+        <tr>
+          <td>
+            <SvgSquare color={b.color} />
+          </td>
+          <td>{b.name}</td>
+        </tr>
+      ))}
+    </table>
+  )
+}
+
+export default function ProfileModal ({
+  user,
+  attributes,
+  badges,
+  onClose,
+  actions
+}) {
   actions = actions || []
   let profileContent = <dl>User does not have a profile</dl>
   if (!isEmpty(attributes)) {
@@ -87,13 +113,18 @@ export default function ProfileModal ({ user, attributes, onClose, actions }) {
   `}</style>
     </>
   }
-  return <article className='modal__details'>
-    { user.img ? <img src={user.img} /> : '' }
-    <h2 style={{ display: 'flex', 'justifyContent': 'space-between' }}>
-      <span>{user.name}</span>
-      {!isEmpty(actions) && renderActions(actions)}
-    </h2>
-    {profileContent}
-    <Button size='small' onClick={() => onClose()}>close</Button>
-  </article>
+  return (
+    <article className='modal__details'>
+      {user.img ? <img src={user.img} /> : ''}
+      <h2 style={{ display: 'flex', justifyContent: 'space-between' }}>
+        <span>{user.name}</span>
+        {!isEmpty(actions) && renderActions(actions)}
+      </h2>
+      {profileContent}
+      {renderBadges(badges)}
+      <Button size='small' onClick={() => onClose()}>
+        close
+      </Button>
+    </article>
+  )
 }

components/svg-square.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default function SvgSquare ({ color, size = 20 }) {
+  return (
+    <svg width={size} height={size}>
+      <rect width={size} height={size} style={{ fill: color }} />
+    </svg>
+  )
+}

pages/badges/assign.js → pages/badges-assignment/edit.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import * as Yup from 'yup'
 import { Formik, Field, Form } from 'formik'
 import APIClient from '../../lib/api-client'
 import Button from '../../components/button'
@@ -39,13 +40,13 @@ function Section ({ children }) {
   )
 }
 
-export default class AssignBadge extends Component {
+export default class EditBadgeAssignment extends Component {
   static async getInitialProps ({ query }) {
     if (query) {
       return {
         orgId: query.id,
-        badgeId: query.badgeId,
-        userId: query.userId
+        badgeId: parseInt(query.badgeId),
+        userId: parseInt(query.userId)
       }
     }
   }
@@ -64,22 +65,26 @@ export default class AssignBadge extends Component {
   }
 
   async loadData () {
-    const { orgId, badgeId } = this.props
+    const { orgId, badgeId, userId } = this.props
 
     try {
       const org = await apiClient.get(`/organizations/${orgId}`)
-      let badge, badges
+      const badge = await apiClient.get(
+        `/organizations/${orgId}/badges/${badgeId}`
+      )
+      let assignment
+      if (badge && badge.users) {
+        assignment = badge.users.find((u) => u.id === parseInt(userId))
+      }
 
-      if (badgeId) {
-        badge = await apiClient.get(`/organizations/${orgId}/badges/${badgeId}`)
-      } else {
-        badges = await apiClient.get(`/organizations/${orgId}/badges`)
+      if (!assignment) {
+        throw Error('Badge assignment not found.')
       }
 
       this.setState({
         org,
         badge,
-        badges
+        assignment
       })
     } catch (error) {
       console.error(error)
@@ -99,8 +104,8 @@ export default class AssignBadge extends Component {
       return <div>Loading...</div>
     }
 
-    const { orgId, userId } = this.props
-    const { badges, badge, user } = this.state
+    const { orgId, userId, badgeId } = this.props
+    const { badge, assignment } = this.state
 
     return (
       <>
@@ -111,73 +116,67 @@ export default class AssignBadge extends Component {
           <Formik
             initialValues={{
               assignedAt:
-                (user && user.assignedAt && user.assignedAt.substring(0, 10)) ||
+                (assignment &&
+                  assignment.assignedAt &&
+                  assignment.assignedAt.substring(0, 10)) ||
                 format(Date.now(), 'yyyy-MM-dd'),
               validUntil:
-                (user && user.validUntil && user.validUntil.substring(0, 10)) ||
+                (assignment &&
+                  assignment.validUntil &&
+                  assignment.validUntil.substring(0, 10)) ||
                 ''
             }}
-            onSubmit={async ({ assignedAt, validUntil, badgeId }) => {
+            validationSchema={Yup.object().shape({
+              assignedAt: Yup.date().required(
+                'Please select an assignment date.'
+              ),
+              validUntil: Yup.date().when(
+                'assignedAt',
+                (assignedAt, schema) =>
+                  assignedAt &&
+                  schema.min(
+                    assignedAt,
+                    'End date must be after the start date.'
+                  )
+              )
+            })}
+            onSubmit={async ({ assignedAt, validUntil }) => {
               try {
                 const payload = {
                   assigned_at: assignedAt,
                   valid_until: validUntil !== '' ? validUntil : null
                 }
 
-                if (!user) {
-                  await apiClient.post(
-                    `/organizations/${orgId}/badges/${badgeId}/assign/${userId}`,
-                    payload
-                  )
-                  Router.push(
-                    join(
-                      URL,
-                      `/organizations/${orgId}/badges/${badgeId}/assign/${userId}`
-                    )
-                  )
-                } else {
-                  await apiClient.patch(
-                    `/organizations/${orgId}/member/${userId}/badge/${badgeId}`,
-                    payload
-                  )
-                  toast.info('Badge updated successfully.')
-                }
+                await apiClient.patch(
+                  `/organizations/${orgId}/member/${userId}/badge/${badgeId}`,
+                  payload
+                )
+                toast.info('Badge updated successfully.')
                 this.loadData()
               } catch (error) {
                 console.log(error)
                 toast.error(`Unexpected error, please try again later.`)
               }
             }}
-            render={({ isSubmitting, values }) => {
+            render={({ isSubmitting, values, errors }) => {
               return (
                 <Form>
                   <div className='page__heading'>
                     <h2>User: {userId} (OSM id)</h2>
                   </div>
-                  {badge ? (
-                    <div className='page__heading'>
-                      <h2>Badge: {badge && badge.name}</h2>
-                    </div>
-                  ) : (
-                    <div className='form-control form-control__vertical'>
-                      <label htmlFor='badgeId'>Badge:</label>
-                      <Field as='select' name='badgeId'>
-                        <option value=''>Select a badge</option>
-                        {badges.map((b) => (
-                          <option key={b.id} value={b.id}>
-                            {b.name}
-                          </option>
-                        ))}
-                      </Field>
-                    </div>
-                  )}
+                  <div className='page__heading'>
+                    <h2>Badge: {badge && badge.name}</h2>
+                  </div>
                   <div className='form-control form-control__vertical'>
                     <label htmlFor='assignedAt'>Assigned At (required)</label>
                     <Field
                       name='assignedAt'
                       type='date'
                       value={values.assignedAt}
                     />
+                    {errors.assignedAt && (
+                      <div className='form--error'>{errors.assignedAt}</div>
+                    )}
                   </div>
                   <div className='form-control form-control__vertical'>
                     <label htmlFor='validUntil'>Valid Until</label>
@@ -186,6 +185,9 @@ export default class AssignBadge extends Component {
                       type='date'
                       value={values.validUntil}
                     />
+                    {errors.validUntil && (
+                      <div className='form--error'>{errors.validUntil}</div>
+                    )}
                   </div>
                   <ButtonWrapper>
                     <Button