From 9baa16c82446ea8af37a86f540cf35f6bc8b6c1e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Oliveira?= Date: Mon, 1 Nov 2021 15:19:55 +0000 Subject: [PATCH] fix: formik bugs and gql upload --- lib/new-admin/admin-server.js | 2 + .../graphql/resolvers/customer.resolver.js | 2 + lib/new-admin/graphql/types/customer.type.js | 8 ++-- .../1635159374499-editable-customer-data.js | 4 +- new-lamassu-admin/package-lock.json | 13 +++++++ new-lamassu-admin/package.json | 1 + .../src/pages/Customers/CustomerData.js | 39 +++++-------------- .../Customers/components/EditableCard.js | 29 +++++--------- new-lamassu-admin/src/utils/apollo.js | 22 ++++++----- 9 files changed, 56 insertions(+), 64 deletions(-) diff --git a/lib/new-admin/admin-server.js b/lib/new-admin/admin-server.js index b1ccda5d..1f37969f 100644 --- a/lib/new-admin/admin-server.js +++ b/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, diff --git a/lib/new-admin/graphql/resolvers/customer.resolver.js b/lib/new-admin/graphql/resolvers/customer.resolver.js index b22454bd..4173c128 100644 --- a/lib/new-admin/graphql/resolvers/customer.resolver.js +++ b/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) }, diff --git a/lib/new-admin/graphql/types/customer.type.js b/lib/new-admin/graphql/types/customer.type.js index 6d0129db..151c1527 100644 --- a/lib/new-admin/graphql/types/customer.type.js +++ b/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 } diff --git a/migrations/1635159374499-editable-customer-data.js b/migrations/1635159374499-editable-customer-data.js index 76d6618c..3da59080 100644 --- a/migrations/1635159374499-editable-customer-data.js +++ b/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_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), diff --git a/new-lamassu-admin/package-lock.json b/new-lamassu-admin/package-lock.json index 140b59b1..3c21f1c3 100644 --- a/new-lamassu-admin/package-lock.json +++ b/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", diff --git a/new-lamassu-admin/package.json b/new-lamassu-admin/package.json index ff436eb3..5c2d5569 100644 --- a/new-lamassu-admin/package.json +++ b/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", diff --git a/new-lamassu-admin/src/pages/Customers/CustomerData.js b/new-lamassu-admin/src/pages/Customers/CustomerData.js index 77934e0c..ed116708 100644 --- a/new-lamassu-admin/src/pages/Customers/CustomerData.js +++ b/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: '', - 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 diff --git a/new-lamassu-admin/src/pages/Customers/components/EditableCard.js b/new-lamassu-admin/src/pages/Customers/components/EditableCard.js index 4f05559f..5b1c45e5 100644 --- a/new-lamassu-admin/src/pages/Customers/components/EditableCard.js +++ b/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 && ( <> {field.label} - {field.value} + {value} )} {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 (
@@ -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 ? ( @@ -195,6 +196,7 @@ const EditableCard = ({ return idx >= 4 ? ( @@ -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 diff --git a/new-lamassu-admin/src/utils/apollo.js b/new-lamassu-admin/src/utils/apollo.js index b04b9b69..9e3278b2 100644 --- a/new-lamassu-admin/src/utils/apollo.js +++ b/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({ - credentials: 'include', - uri: `${ALT_URI}/graphql` - }), - new HttpLink({ - credentials: 'include', - uri: `${URI}/graphql` - }) + uploadLink, + uploadLinkALT ) ]), cache: new InMemoryCache(),