Skip to main content

Posts

Showing posts from December, 2020

update Array with ES6 - findIndex - useMutation - update local state instead of cache

  const newAccount = { ... data . data . assignRole } const newAccounts = [... accounts ] const foundIndex = newAccounts . findIndex ( x => x . id === id ) newAccounts [ foundIndex ] = newAccount setAccounts ( newAccounts ) update local state instead of update the cache  const [ assignRole ] = useMutation ( MUTATION_ASSIGN_ROLE ) const handleSave = ( id : string , role : string ) => { const assignRoleInput = { id , role } assignRole ({ variables : { assignRoleInput }, }) . then (( data : any ) => { const newAccount = { ... data . data . assignRole } const newAccounts = [... accounts ] const foundIndex = newAccounts . findIndex ( x => x . id === id ) newAccounts [ foundIndex ] = newAccount setAccounts ( newAccounts ) }) . catch ( error => console . log ( error . message )) setOpenRolesDialog ( false ) }

fs.writeFile - permission issue on GCP (Google Cloud Run)

error on this: fs . writeFile ( fileName , pdfBytes , err => { if ( err ) { console . log ( err . message ) reject ( err . message ) } else resolve ( fileName ) }) #1 It looks like when deployed into Cloud Run it also requires the extra permission "Service Account Token Creator" to run  getSignedUrl . Locally for some reason this role is not required. #2 Only the directory  /tmp  is writable in Cloud Run. So, change the default write location to write into this directory. However, you have to be aware of 2 things: Cloud Run is stateless, that means when a new instance is created, the container start from scratch, with an empty  /tmp  directory /tmp  directory is an in-memory file system. The maximum allowed memory on Cloud Run is 2Gb, your app memory footprint included. In addition of your file and Airflow, not sure that you will have a lot of space. A final remark. Cloud Run is active only when it...

useLayoutEffect - useRef

  99% of the time you’re going to want to use the   useEffect  hook, and the   useState  hook to manipulate the output of a React component. But in certain cases you need make changes directly to a DOM node. In case you need to, follow these 2 rule of thumbs: Use  useRef  if you need to manage focus, text selection, trigger imperative animations or integrating third-party libraries. Use the  useLayoutEffect  when ever you need to use  useRef . https://linguinecode.com/post/when-to-use-useref-and-uselayouteffect

zip photos and download from react app -

library:  jszip -  const zip = jszip () file-saver -  saveAs ( content , ` ${ fetchListingId } .zip` ) issue: cors -  the original plan was download photos from the front end and zip with jszip, but got cors error when download from firebase storage solutions: 1. on graphql, add query:  getPhotosBuffer(listingId: String): [PhotoBuffer] to return stringified buffer of photos fetchPhotosBuffer = async ( listingId : string ): Promise < PhotoBuffer []> => this . cacheProvider . processor < PhotoBuffer []>( async () => { const photos = await this . collection . where ( 'listingId' , '==' , listingId ) . orderBy ( 'orders' ) . get () const result : PhotoBuffer [] = [] await Promise . all ( photos . docs . map ( async ( photo : any ) => { const data = photo . data () const { photoUrl } = data try { const bu...

keep re-render issue for custom hook - useEffect, fixed by useMemo to wrap object

solution is: for object, need wrap with useMemo in this case, if function, need wrap with useCallback const accountRoles = useMemo (() => account ?. roles || [], [])  issue was in listing.tsx const accountRoles = account ?. roles || [], [] const [ todoDocs ] = useListingTodoDocs ( listingId , accountRoles , false ) in useListingTodoDocs, ulilize useEffect to fetch data, acccountRoles is object, so always change and trigger useEffect action. useEffect (() => { const fetchListingTodos = async () => { const result = await client . query ({ query : GET_TODO_DOCUMENTS , variables : { listingId : listingId }, fetchPolicy : 'no-cache' , }) const { data : { getTodoDocuments }, } = result const filterTodosByRole = accountRoles . length === 0 ? getTodoDocuments . filter ( ( doc : Document ) => ! doc . name . includes ( LISTING_AGREEMENT_B...

missing dependency for useEffect/useCallback when call function from useContext

#issue 1 was missing dependency: "e mptyShoppingCart" const { emptyShoppingCart } = useContext ( CartContext ) useEffect (() => { if ( oobCode ) { setOrderId ( oobCode ) emptyShoppingCart () } }, [ oobCode ]) so change to fix: useEffect (() => { if ( oobCode ) { setOrderId ( oobCode ) emptyShoppingCart () } }, [ oobCode, emptyShoppingCart ]) now #issue 2 is rendered forever because emptyShoppingCart always re-create fix: useCallback const emptyShoppingCart = useCallback (() => { setShoppingCart ([]) setListingId ( '' ) }, [])