Adding UI for approving data requests

references [#125](railslove/recover-backlog#125)

Author: bitboxer

lib/api/dataRequests.ts

@@ -4,6 +4,8 @@ import { api, parseDates } from './'
 
 export interface DataRequestRes<DateT = Date> {
   id: string
+  reason: string
+  irisHealthDepartment: string
   from: DateT
   to: DateT
   acceptedAt: DateT

package-lock.json

@@ -33,6 +33,7 @@
     "ky": "^0.19.1",
     "ky-universal": "^0.6.0",
     "libphonenumber-js": "^1.9.16",
+    "lodash": "^4.17.21",
     "modern-normalize": "^1.0.0",
     "next": "10.1.3",
     "papaparse": "^5.3.0",

package.json

@@ -18,7 +18,7 @@ import { css } from '@styled-system/css'
 const sortTickets = (tickets: DecryptedTicket[]): DecryptedTicket[] => {
   return tickets.sort(
     (c1: DecryptedTicket, c2: DecryptedTicket) =>
-      c2.leftAt.getTime() - c1.leftAt.getTime()
+      c2?.leftAt?.getTime() - c1?.leftAt?.getTime()
   )
 }
 
@@ -97,6 +97,10 @@ const DataRequestPage: React.FC<WithOwnerProps> = ({ owner }) => {
     setLoading(false)
   }, [tickets, company, dataRequest])
 
+  const approveRequest = React.useCallback(async () => {
+    console.log('approving reuest')
+  }, [])
+
   const dateRange =
     dataRequest?.from && dataRequest?.to
       ? formatDate(dataRequest.from, 'DD.MM.YYYY HH:mm') +
@@ -111,6 +115,7 @@ const DataRequestPage: React.FC<WithOwnerProps> = ({ owner }) => {
 
   const twoHoursBefore = new Date()
   twoHoursBefore.setHours(new Date().getHours() - 2)
+
   return (
     <OwnerApp title={title}>
       <Loading show={loading} />
@@ -125,13 +130,27 @@ const DataRequestPage: React.FC<WithOwnerProps> = ({ owner }) => {
       {status !== 'success' && <Text variant="shy">Lade...</Text>}
 
       {dataRequest && !dataRequest.acceptedAt && (
-        <Callout>
-          <Text>
-            Die Daten für diesen Zeitraum wurden noch nicht für{' '}
-            {isFormal ? 'Sie' : 'Dich'}
-            freigegeben.
-          </Text>
-        </Callout>
+        <>
+          <Callout variant="danger">
+            <Text>
+              {isFormal ? 'Sie' : 'Du'} hast diese Daten noch nicht für das
+              Gesundheitsamt freigegeben. Sobald{' '}
+              {isFormal
+                ? 'sie diese Daten freigeben'
+                : 'du diese Daten freigibst'}
+              , werden diese verschlüsselt an das Gesundheitsamt gesendet.
+            </Text>
+            <Box height={4} />
+            <Text as="h2">Anfragende Behörde:</Text>
+            <Text>{dataRequest.irisHealthDepartment}</Text>
+            <Box height={4} />
+            <Text as="h2">Grund der Anfrage:</Text>
+            <Text>{dataRequest.reason}</Text>
+            <Box height={4} />
+            <Button onClick={approveRequest}>Daten freigeben</Button>
+          </Callout>
+          <Box height={4} />
+        </>
       )}
 
       {dataRequest?.tickets && !owner.privateKey && (

pages/business/company/[companyId]/data-request/[dataRequestId].tsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import { useRouter } from 'next/router'
 import formatDate from 'intl-dateformat'
+import { orderBy } from 'lodash'
 
 import { isFormal } from '~lib/config'
 import { withOwner, WithOwnerProps } from '~lib/pageWrappers'
@@ -40,6 +41,13 @@ const CompanyPage: React.FC<WithOwnerProps> = () => {
     )
   }
 
+  const sortRequests = (dataRequests: DataRequestRes[]) =>
+    orderBy(
+      dataRequests,
+      [(dataRequest: DataRequestRes) => dataRequest.acceptedAt != null, 'to'],
+      ['asc', 'desc']
+    )
+
   const RequestList = ({
     dataRequests,
   }: {
@@ -48,7 +56,7 @@ const CompanyPage: React.FC<WithOwnerProps> = () => {
     <>
       <Box height={6} />
       <ActionList grid>
-        {dataRequests?.map((dataRequest) => (
+        {sortRequests(dataRequests)?.map((dataRequest) => (
           <ActionCard
             key={dataRequest.id}
             href="/business/company/[companyId]/data-request/[dataRequestId]"