fix: formik bugs and gql upload
This commit is contained in:
José Oliveira
parent
3de7ae2fe9
commit
9baa16c824
9 changed files with 56 additions and 64 deletions
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@ const customers = require('../../../customers')
|
|||
const filters = require('../../filters')
|
||||
|
||||
const resolvers = {
|
||||
// Upload: GraphQLUpload,
|
||||
|
||||
Customer: {
|
||||
isAnonymous: parent => (parent.customerId === anonymous.uuid)
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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_info_edited_by UUID REFERENCES users(id),
|
||||
name_edited_at TIMESTAMPTZ,
|
||||
name_edited_by UUID REFERENCES users(id),
|
||||
us_ssn TEXT,
|
||||
us_ssn_edited_at TIMESTAMPTZ,
|
||||
us_ssn_edited_by UUID REFERENCES users(id),
|
||||
|
|
|
|||
13
new-lamassu-admin/package-lock.json
generated
13
new-lamassu-admin/package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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: '',
|
||||
idNumber: '',
|
||||
birthDate: '',
|
||||
age: '',
|
||||
gender: '',
|
||||
state: '',
|
||||
expirationDate: ''
|
||||
name: getName(customer) ?? '',
|
||||
idNumber: R.path(['documentNumber'])(idData) ?? '',
|
||||
birthDate: (rawDob && format('yyyy-MM-dd', rawDob)) ?? '',
|
||||
age: (rawDob && differenceInYears(rawDob, new Date())) ?? '',
|
||||
gender: R.path(['gender'])(idData) ?? '',
|
||||
state: R.path(['state'])(idData) ?? '',
|
||||
expirationDate:
|
||||
(rawExpirationDate && format('yyyy-MM-dd', rawExpirationDate)) ?? ''
|
||||
},
|
||||
usSsn: {
|
||||
usSsn: ''
|
||||
usSsn: customer.usSsn ?? ''
|
||||
},
|
||||
frontCamera: {
|
||||
frontCamera: null
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
||||
reader.onloadend = () => {
|
||||
// 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
|
||||
if (!file) return
|
||||
setFieldValue(R.head(fields).name, file)
|
||||
}}
|
||||
/>
|
||||
Replace
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
credentials: 'include',
|
||||
uri: `${ALT_URI}/graphql`
|
||||
}),
|
||||
new HttpLink({
|
||||
credentials: 'include',
|
||||
uri: `${URI}/graphql`
|
||||
})
|
||||
uploadLink,
|
||||
uploadLinkALT
|
||||
)
|
||||
]),
|
||||
cache: new InMemoryCache(),
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue