fix: formik bugs and gql upload

lib/new-admin/admin-server.js

@@ -9,6 +9,7 @@ const helmet = require('helmet')
 const nocache = require('nocache')
 const cookieParser = require('cookie-parser')
 const { ApolloServer, AuthenticationError } = require('apollo-server-express')
+// const { graphqlUploadExpress } = require('graphql-upload')
 const _ = require('lodash/fp')
 
 const { asyncLocalStorage, defaultStore } = require('../async-storage')
@@ -47,6 +48,7 @@ app.use(cleanUserSessions(USER_SESSIONS_CLEAR_INTERVAL))
 app.use(computeSchema)
 app.use(findOperatorId)
 app.use(session)
+// app.use(graphqlUploadExpress())
 
 const apolloServer = new ApolloServer({
   typeDefs,

lib/new-admin/graphql/resolvers/customer.resolver.js

@@ -3,6 +3,8 @@ const customers = require('../../../customers')
 const filters = require('../../filters')
 
 const resolvers = {
+  // Upload: GraphQLUpload,
+
   Customer: {
     isAnonymous: parent => (parent.customerId === anonymous.uuid)
   },

lib/new-admin/graphql/types/customer.type.js

@@ -12,7 +12,7 @@ const typeDef = gql`
     authorizedOverride: String
     daysSuspended: Int
     isSuspended: Boolean
-    frontCamera: String
+    frontCamera: Upload
     frontCameraPath: String
     frontCameraAt: Date
     frontCameraOverride: String
@@ -22,7 +22,7 @@ const typeDef = gql`
     idCardData: JSONObject
     idCardDataOverride: String
     idCardDataExpiration: Date
-    idCardPhoto: String
+    idCardPhoto: Upload
     idCardPhotoPath: String
     idCardPhotoOverride: String
     usSsn: String
@@ -68,9 +68,9 @@ const typeDef = gql`
   }
 
   input CustomerEdit {
-    frontCamera: String
+    frontCamera: Upload
     idCardData: JSONObject
-    idCardPhoto: String
+    idCardPhoto: Upload
     usSsn: String
   }
 

migrations/1635159374499-editable-customer-data.js

@@ -17,8 +17,8 @@ exports.up = function (next) {
         subscriber_info_edited_at TIMESTAMPTZ,
         subscriber_info_edited_by UUID REFERENCES users(id),
         name TEXT,
-        name_info_edited_at TIMESTAMPTZ,
+        name_edited_at TIMESTAMPTZ,
-        name_info_edited_by UUID REFERENCES users(id),
+        name_edited_by UUID REFERENCES users(id),
         us_ssn TEXT,
         us_ssn_edited_at TIMESTAMPTZ,
         us_ssn_edited_by UUID REFERENCES users(id),

new-lamassu-admin/package-lock.json

@@ -6888,6 +6888,14 @@
         "tslib": "^1.9.3"
       }
     },
+    "apollo-upload-client": {
+      "version": "16.0.0",
+      "resolved": "https://registry.npmjs.org/apollo-upload-client/-/apollo-upload-client-16.0.0.tgz",
+      "integrity": "sha512-aLhYucyA0T8aBEQ5g+p13qnR9RUyL8xqb8FSZ7e/Kw2KUOsotLUlFluLobqaE7JSUFwc6sKfXIcwB7y4yEjbZg==",
+      "requires": {
+        "extract-files": "^11.0.0"
+      }
+    },
     "apollo-utilities": {
       "version": "1.3.4",
       "resolved": "https://registry.npmjs.org/apollo-utilities/-/apollo-utilities-1.3.4.tgz",
@@ -12608,6 +12616,11 @@
         }
       }
     },
+    "extract-files": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/extract-files/-/extract-files-11.0.0.tgz",
+      "integrity": "sha512-FuoE1qtbJ4bBVvv94CC7s0oTnKUGvQs+Rjf1L2SJFfS+HTVVjhPFtehPdQ0JiGPqVNfSSZvL5yzHHQq2Z4WNhQ=="
+    },
     "extsprintf": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",

new-lamassu-admin/package.json

@@ -14,6 +14,7 @@
     "apollo-link": "^1.2.14",
     "apollo-link-error": "^1.1.13",
     "apollo-link-http": "^1.5.17",
+    "apollo-upload-client": "^16.0.0",
     "axios": "0.21.1",
     "base-64": "^1.0.0",
     "bignumber.js": "9.0.0",

new-lamassu-admin/src/pages/Customers/CustomerData.js

@@ -117,57 +117,36 @@ const CustomerData = ({
     {
       name: 'name',
       label: 'Name',
-      value: `${getName(customer)}`,
       component: TextInput
     },
     {
       name: 'idNumber',
       label: 'ID number',
-      value: R.path(['documentNumber'])(idData) ?? '',
       component: TextInput
     },
     {
       name: 'birthDate',
       label: 'Birth Date',
-      value:
-        (rawDob &&
-          format('yyyy-MM-dd')(parse(new Date(), 'yyyyMMdd', rawDob))) ??
-        '',
       component: TextInput
     },
     {
       name: 'age',
       label: 'Age',
-      value:
-        (rawDob &&
-          differenceInYears(
-            parse(new Date(), 'yyyyMMdd', rawDob),
-            new Date()
-          )) ??
-        '',
       component: TextInput
     },
     {
       name: 'gender',
       label: 'Gender',
-      value: R.path(['gender'])(idData) ?? '',
       component: TextInput
     },
     {
       name: 'state',
       label: country === 'Canada' ? 'Province' : 'State',
-      value: R.path(['state'])(idData) ?? '',
       component: TextInput
     },
     {
       name: 'expirationDate',
       label: 'Expiration Date',
-      value:
-        (rawExpirationDate &&
-          format('yyyy-MM-dd')(
-            parse(new Date(), 'yyyyMMdd', rawExpirationDate)
-          )) ??
-        '',
       component: TextInput
     }
   ]
@@ -176,7 +155,6 @@ const CustomerData = ({
     {
       name: 'usSsn',
       label: 'US SSN',
-      value: `${customer.usSsn ?? ''}`,
       component: TextInput,
       size: 190
     }
@@ -187,16 +165,17 @@ const CustomerData = ({
 
   const initialValues = {
     idScan: {
-      name: '',
+      name: getName(customer) ?? '',
-      idNumber: '',
+      idNumber: R.path(['documentNumber'])(idData) ?? '',
-      birthDate: '',
+      birthDate: (rawDob && format('yyyy-MM-dd', rawDob)) ?? '',
-      age: '',
+      age: (rawDob && differenceInYears(rawDob, new Date())) ?? '',
-      gender: '',
+      gender: R.path(['gender'])(idData) ?? '',
-      state: '',
+      state: R.path(['state'])(idData) ?? '',
-      expirationDate: ''
+      expirationDate:
+        (rawExpirationDate && format('yyyy-MM-dd', rawExpirationDate)) ?? ''
     },
     usSsn: {
-      usSsn: ''
+      usSsn: customer.usSsn ?? ''
     },
     frontCamera: {
       frontCamera: null

new-lamassu-admin/src/pages/Customers/components/EditableCard.js

@@ -73,7 +73,7 @@ const fieldStyles = {
 
 const fieldUseStyles = makeStyles(fieldStyles)
 
-const EditableField = ({ editing, field, size, ...props }) => {
+const EditableField = ({ editing, field, value, size, ...props }) => {
   const classes = fieldUseStyles()
   console.log('FIELDDDDDDDD', field)
   const classNames = {
@@ -86,7 +86,7 @@ const EditableField = ({ editing, field, size, ...props }) => {
       {!editing && (
         <>
           <Label1 className={classes.label}>{field.label}</Label1>
-          <Info3>{field.value}</Info3>
+          <Info3>{value}</Info3>
         </>
       )}
       {editing && (
@@ -96,7 +96,6 @@ const EditableField = ({ editing, field, size, ...props }) => {
             className={classes.editing}
             id={field.name}
             name={field.name}
-            value={field.value}
             component={field.component}
             type={field.type}
             width={size}
@@ -143,8 +142,6 @@ const EditableCard = ({
       ? { label: 'Rejected', type: 'error' }
       : { label: 'Accepted', type: 'success' }
 
-  const reader = new FileReader()
-
   return (
     <div>
       <Card className={classes.card}>
@@ -166,7 +163,10 @@ const EditableCard = ({
             enableReinitialize
             validationSchema={validationSchema}
             initialValues={initialValues}
-            onSubmit={values => save(values)}
+            onSubmit={values => {
+              save(values)
+              setEditing(false)
+            }}
             onReset={() => {
               setEditing(false)
               setError(false)
@@ -183,6 +183,7 @@ const EditableCard = ({
                           return idx >= 0 && idx < 4 ? (
                             <EditableField
                               field={field}
+                              value={initialValues[field.name]}
                               editing={editing}
                               size={180}
                             />
@@ -195,6 +196,7 @@ const EditableCard = ({
                           return idx >= 4 ? (
                             <EditableField
                               field={field}
+                              value={initialValues[field.name]}
                               editing={editing}
                               size={180}
                             />
@@ -245,20 +247,9 @@ const EditableCard = ({
                                   ref={fileInput => setInput(fileInput)}
                                   onChange={event => {
                                     // need to store it locally if we want to display it even after saving to db
-
                                     const file = R.head(event.target.files)
-
+                                    if (!file) return
-                                    reader.onloadend = () => {
+                                    setFieldValue(R.head(fields).name, file)
-                                      // use a regex to remove data url part
-                                      setFieldValue(
-                                        R.head(fields).name,
-                                        reader.result
-                                          .replace('data:', '')
-                                          .replace(/^.+,/, '')
-                                      )
-                                    }
-                                    reader.readAsDataURL(file)
-                                    event.target.value = null
                                   }}
                                 />
                                 Replace

new-lamassu-admin/src/utils/apollo.js

@@ -3,7 +3,7 @@ import { InMemoryCache } from 'apollo-cache-inmemory'
 import { ApolloClient } from 'apollo-client'
 import { ApolloLink } from 'apollo-link'
 import { onError } from 'apollo-link-error'
-import { HttpLink } from 'apollo-link-http'
+import { createUploadLink } from 'apollo-upload-client'
 import React, { useContext } from 'react'
 import { useHistory, useLocation } from 'react-router-dom'
 
@@ -15,6 +15,16 @@ const URI =
 const ALT_URI =
   process.env.NODE_ENV === 'development' ? 'http://localhost:4001' : ''
 
+const uploadLink = createUploadLink({
+  credentials: 'include',
+  uri: `${URI}/graphql`
+})
+
+const uploadLinkALT = createUploadLink({
+  credentials: 'include',
+  uri: `${ALT_URI}/graphql`
+})
+
 const getClient = (history, location, getUserData, setUserData, setRole) =>
   new ApolloClient({
     link: ApolloLink.from([
@@ -48,14 +58,8 @@ const getClient = (history, location, getUserData, setUserData, setRole) =>
       }),
       ApolloLink.split(
         operation => operation.getContext().clientName === 'pazuz',
-        new HttpLink({
+        uploadLink,
-          credentials: 'include',
+        uploadLinkALT
-          uri: `${ALT_URI}/graphql`
-        }),
-        new HttpLink({
-          credentials: 'include',
-          uri: `${URI}/graphql`
-        })
       )
     ]),
     cache: new InMemoryCache(),