DEV Community: Monique Dingding

Installing PHP and PECL extensions on MacOS

Monique Dingding — Fri, 16 Jul 2021 04:28:50 +0000

Installing memcache and memcached gives me this error:

This is due to permission issues in your local machine. To fix this, just manually create the folder that the script cannot:



$ pecl config-get ext_dir 
/usr/local/lib/php/pecl/20190902

Copy the value returned by the command and then run:



$ mkdir -p {paste clipboard value}

Then install the pecl extensions you need:



$ pecl install memcached

Happy coding!

JavaScript Essentials: Modern ES6+ Features

Monique Dingding — Sat, 16 May 2020 12:46:39 +0000

Heya, devs!

Just dropping by to share a presentation I made for our company's Tech Thursdays, in which I explained a few relatively "new" concepts of the ECMAScript ES6+ version.

Topics list are as follows:

Block-Scoped Constructs: let and const
Rest and Spread Parameters
String Interpolation (Template Literals)
Object Shorthand
Object and Array Destructuring
Arrow Functions
Promises to Async/Await
Modules
Array Built-in Methods

Happy coding!

Common Issues in Migrating from Jest and Enzyme 2.x to 3.x and How to Fix Them

Monique Dingding — Thu, 09 Jan 2020 10:30:38 +0000

Last year I had a task to migrate our React application from 15.4 to 16.9 (yes, it's about time) and unit tests broke along with a few other outdated packages.

Here are two of the issues I most frequently encountered and solutions on how to fix them (all credit goes to the fine people of the Internet):

1. Enzyme Internal Error: Enzyme expects an adapter to be configured, but found none.

If you are too lazy to read the migration guide written by the folks over at Enzyme, essentially the library now runs in an "Adapter system". You just have to install the adapter for your version of React.

Since our app now runs on React 16.x, I needed to install the enzyme-adapter-react-16 adapter:

npm install enzyme-adapter-react-16

and then configured it to my test:

import { configure } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'

configure({ adapter: new Adapter() })

/*
* unit test code goes here
*/

2. Cannot find module 'react/lib/ReactTestUtils'
This library is very old, it was deprecated 5 years ago. To fix this, I used the react-test-renderer/shallow renderer in place of ReactTestUtils to shallow render a component.

Install the package:

npm install react-test-renderer

Then, I replaced the renderer with the utility functions from the new library.

OLD CODE

describe('TestComponent:', () => {
  const props = {
    open: false
  }

  beforeEach(function () {
    const renderer = TestUtils.createRenderer() // from this
    renderer.render(<TestComponent {...props} />)
    renderer.getRenderOutput()
  })

  // rest of the code
})

NEW CODE

describe('TestComponent:', () => {
  const props = {
    open: false
  }

  beforeEach(function () {
    const renderer = new ShallowRenderer() //to this
    renderer.render(<TestComponent {...props} />)
    renderer.getRenderOutput()
  })

  // rest of the code
})

Happy coding!

Implementing State Management using Context API and Hooks in React

Monique Dingding — Fri, 27 Sep 2019 10:54:51 +0000

State management has always been THE pain point in React.

For years now, Redux has always been the most popular solution, but it requires a certain learning curve and patience to learn its intricacies. Also, I find some of the repetitive parts of it annoying, such as calling connect(mapStateToProps, mapDispatchToProps) at every time the store is needed inside a component, and/or side effects like prop drilling, but that's just me.

With React's release of production-grade features such as Context API and Hooks, developers can already implement global state management without having to use external libraries (e.g. Redux, Flux, MobX, etc.) for the same purpose.

Heavily motivated by this article, I was inspired to build global state management in React using Context API.

Definition of Terms

Context - A component in React that lets you pass data down through all of the subcomponents as state.
Store - An object that contains the global state.
Action - A payload of information that send data from your application to your store through dispatch. Working hand in hand with Action creator, API calls are typically done here.
Reducer - is a method that transforms the payload from an Action.

The Concept

The goal of this state management is to create two Context components:

StoreContext - to handle the store (aka the global state) and
ActionsContext - to handle the actions (functions that modify the state)

As you can see in the Folder structure provided below, actions and reducers (methods that transform the store) are separated per module thereby needing a method that will combine them into one big action and reducer object. This is handled by rootReducers.js and rootActions.js.

Folder Structure

State management is under the /store folder.

components/
  layout/
  common/
    Header/
      index.js
      header.scss
      Header.test.js
  Shop/
    index.js
    shop.scss
    ShopContainer.js
    Shop.test.js

store/
   products/
     actions.js
     reducers.js
   index.js
   rootActions.js
   rootReducers.js

The View: `<Shop/>` component

The simplest way to showcase state management is to fetch a list of products.

const Shop = () => {
  const items = [/** ...sample items here */]

  return (
    <div className='grid-x grid-padding-x'>
      <div className='cell'>
        {
          /**
          * Call an endpoint to fetch products from store
          */
          items && items.map((item, i) => (
            <div key={i} className='product'>
              Name: { item.name }
              Amount: { item.amount }
              <Button type='submit'>Buy</Button>
            </div>
          ))
        }
      </div>
    </div>
  )
}

Welcome to the `/store`

Product Actions: /products/actions.js

export const PRODUCTS_GET = 'PRODUCTS_GET'

export const retrieveProducts = () => {
  const items = [
    {
      'id': 1,
      'amount': '50.00',
      'name': 'Iron Branch',
    },
    {
      'id': 2,
      'amount': '70.00',
      'name': 'Enchanted Mango',
    },
    {
      'id': 3,
      'amount': '110.00',
      'name': 'Healing Salve',
    },
  ]

  return {
    type: PRODUCTS_GET,
    payload: items
  }
}

Product reducers: /products/reducers.js

import { PRODUCTS_GET } from './actions'

const initialState = []

export default function (state = initialState, action) {
  switch (action.type) {
    case PRODUCTS_GET:
      return [ ...state, ...action.payload ]
    default:
      return state
  }
}

/store/index.js is the entry point of state management.

import React, { useReducer, createContext, useContext, useMemo } from 'react'

const ActionsContext = createContext()
const StoreContext = createContext()

export const useActions = () => useContext(ActionsContext)
export const useStore = () => useContext(StoreContext)

export const StoreProvider = props => {
  const initialState = props.rootReducer(props.initialValue, { type: '__INIT__' })
  const [ state, dispatch ] = useReducer(props.rootReducer, initialState)
  const actions = useMemo(() => props.rootActions(dispatch), [props])
  const value = { state, dispatch }

  return (
    <StoreContext.Provider value={value}>
      <ActionsContext.Provider value={actions}>
        {props.children}
      </ActionsContext.Provider>
    </StoreContext.Provider>
  )
}

I suggest reading on Hooks if you are unfamiliar with many of the concepts introduced above.

Combining Actions and Reducers

Root reducer: /store/rootReducer.js

import { combineReducers } from 'redux'
import productsReducer from './products/reducers'

export default combineReducers({
  products: productsReducer
})

Root actions: /store/rootActions.js

import * as productsActions from '../store/products/actions'
import { bindActionCreators } from 'redux'

const rootActions = dispatch => {
  return {
    productsActions: bindActionCreators(productsActions, dispatch)
  }
}

export default rootActions

If you have noticed, I still used redux functions such as combineReducers and bindActionCreators. Personally, I did not want to reinvent the wheel, but feel free to create your own.

Finally, we inject our contexts to the entry point of our application and modify our component to retrieve the data from the store:

App entry point: /src/index.js

import { StoreProvider } from './store'
import rootReducer from './store/rootReducer'
import rootActions from './store/rootActions'


ReactDOM.render(
<StoreProvider rootReducer={rootReducer} rootActions={rootActions}>
  <App />
</StoreProvider>
, document.getElementById('root'))

<Shop/>component

const Shop = () => {
  const { state } = useStore()
  const { productsActions } = useActions()

  useEffect(() => {
    state.products.length === 0 && productsActions.retrieveProducts()
  }, [state.products, productsActions])

  return (
    <div className='grid-x grid-padding-x'>
      <div className='cell'>
        {
          /**
          * Call an endpoint to fetch products from store
          */
          items && items.map((item, i) => (
            <div key={i} className='product'>
              Name: { item.name }
              Amount: { item.amount }
              <Button type='submit'>Buy</Button>
            </div>
          ))
        }
      </div>
    </div>
  )
}

Happy coding!

Using Children Props for Authenticated Routing in React Router v5 and React 16.9

Monique Dingding — Wed, 14 Aug 2019 09:43:45 +0000

One of the universal pains of all SPA developers is to control the access of some pages only to the authenticated users.

For example, landing pages = good. Pages inside the dashboard = no bueno.

My solution is to exploit React's special children props and build a wrapper component around the routes I want controlled access from.

What is a `children` prop?

Essentially, everything inside an opening and closing tag of a component is the children of that component. This is usually helpful in building Layout components, (if you use that design pattern, which you should).

Routes.js

In a very v3 fashion (hehe), I have a Routes file which contains a list of all the routes available in the application.

import App from './components/App'
import Login from './components/Login'
import Messages from './components/Messages'
import Settings from './components/Settings'
import { routes } from './routes-list' // just a list of paths

export default Routes = () => {
    return (
        <Router>
            <Switch>
                <Route exact path="/" component={App}/>
                <Route exact path={routes.login} component={Login}/>

               // Private routes
                <Route exact path={routes.messages} component={Messages}/>
                <Route exact path={routes.settings} component={Settings}/>
            </Switch>
        </Router>
    )
}

New Component: `PrivateRoute`

PrivateRoute serves as a wrapper component to all of the routes that need authentication. Authentication method is highly specific to an application so you may want to use or create your own, but essentially, it should check if the user is allowed access to these private routes. Otherwise, the app redirects to /login page.

import React, { Fragment } from 'react'
import { Redirect } from 'react-router-dom'
import { isUserAuthenticated } from './utils/auth'

export default PrivateRoute = (props) => (
    <Fragment>
        { isUserAuthenticated() ? props.children : <Redirect to={routes.login} /> }
    </Fragment>
)

Implementation

Inside Routes.js, wrap the routes you need to make private.

// ...all the imports
import PrivateRoute from './components/PrivateRoute'

export default Routes = () => {
    return (
        <Router>
            <Switch>
                <Route exact path="/" component={App}/>
                <Route exact path={routes.login} component={Login}/>

               // Private routes
                <PrivateRoute>
                    <Route exact path={routes.messages} component={Messages}/>
                    <Route exact path={routes.settings} component={Settings}/>
                </PrivateRoute>
            </Switch>
        </Router>
    )
}

That's about it!

If you are interested in knowing other implementations of authenticated routing in React (and trust me, there are lots), I have compiled here a curated list as a guide:

As always, happy coding!

Apollo-Server-Express 1.0 to 2.0: Fix 'graphiqlExpress and graphqlExpress is not a function'

Monique Dingding — Thu, 20 Sep 2018 21:42:42 +0000

Today, I decided to dive into the GraphQL hype! (Maybe a few years too late - but it's alright. What's important is we never stop learning!)

"One Endpoint to Rule Them All"

The concept is fairly simple to understand. Unlike REST API where we consume different endpoints depending on the resource we need, in GraphQL you only need one for everything.

That's not enough details (I'm sure), so I am going to list a few resources that I have personally curated to help you jumpstart your weekend project:

What is GraphQL? - by LevelUpTuts, discussing the fundamentals
REST vs GraphQL APIs, the Good, the Bad, the Ugly - by Derric Gilling, an in-depth comparison between REST and GraphQL
Building a GraphQL Server - by TraversyMedia, discussing concepts through application
Integrating Apollo and Express to build a Node.js GraphQL API - by Maximiliano Duthey, for structure and integration-specific code tutorial

I was following this great tutorial by XOOR, when the end of the article I encountered an error in ApolloServer:

`graphqlExpress` is not a function

As of August 2018, ApolloServer has migrated from 1.0 to 2.0 with significant changes to the patterns and code (see here and here).

You can still follow through the tutorial without updating Apollo-Server-Express, with a few changes in the code, as follows:

1 Add `gql` tag in your schema

The gql tag is used for editor syntax highlighting and auto-formatting with Prettier.

The tutorial divides the language types in a schema directory, which is great for code maintainability, but it also means you have to include the tag per file (_input.js, _mutation.js, _query.js, _type.js, graphql/index.js).

Without `gql` tag

With `gql` tag

As you can see, the code is more readable as it is being autoformatted. By the way, I'm using Atom editor.

2 Remove `bodyParser`, `graphqlExpress` and `graphiqlExpress`

In v2.0, bodyParser is already included in the apollo-server-express, so you no longer need the body-parser package. Moreover, graphiqlExpress and graphiqlExpress are replaced by ApolloServer, which you can wrap as a middleware to app.

Before

After

3 Integrate `ApolloServer`

GraphiQLExpress and GraphQLExpress have been replaced by ApolloServer with the additional typeDefs and resolvers as parameters.

Replace makeExecutableSchema with ApolloServer, like so:

Before

After

Take note of the schema variable, as it is imported in graphql/index.js.

That's it! If you followed the instructions properly, the GraphQL Playground should show up in your specified endpoint.

Happy coding!

How to Programmatically Trigger 'Click' Event in Angular 4 & 5

Monique Dingding — Mon, 19 Feb 2018 15:57:15 +0000

Resources in Angular 4 (and 5) are scarce. Really. Sometimes I get so lost in sifting through Stack Overflow that I end up translating the answers that I have found in older versions (1.x and 2.x) using the latest Angular docs.

One of the tasks in the project that I am working on involves uploading a file using either a drag-and-drop box or by clicking browse, like so:

Essentially, I want to trigger the file input button hidden in the page to open the file browser when browse (which is an anchor tag) is clicked.

For newbs like me, I initially resorted to search for packages in NPM, only to know that some are barely maintained, not tested for compatibility with newer versions of Angular, or have too many features that I do not need.

Realizing my mistake, I decided to look for a simpler answer but many of them still require me to import modules that bloat the project.

Before starting, here are my stats:

Angular CLI: 1.7.0-beta.3
Node: 8.9.4
OS: linux x64
Angular: 4.4.6
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, tsc-wrapped

@angular/cli: 1.7.0-beta.3
@angular-devkit/build-optimizer: 0.2.0
@angular-devkit/core: 0.2.0
@angular-devkit/schematics: 0.2.0
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.10.0-beta.3
@schematics/angular: 0.2.0
@schematics/package-update: 0.2.0
typescript: 2.3.4
webpack: 3.10.0

I particularly disliked angular.element as it is just a wrapper that still utilizes jQuery and as much as possible I like to keep my code free from imports that I can't reuse. Ultimately, I came across a more efficient solution by using HTMLElement, an interface from Web API.

So this is how I did it, to give you (and future me) a guide:

The Template

The page view is named uploadFile.component.html

Important stuff:

The class .hide-style contains {display: none} to hide the file input.
The id #tenantPhotoId is an identifier used to reference the file input.
The variable tenantIDFileName binds the file name of the file to be displayed on the page.

The Component

The TS file is named uploadFile.component.ts

Important stuff:

The method onFileChange($event) displays the file name of the file being uploaded by assigning it on the variable tenantIDFileName.
The method openFileBrowser($event) triggers the click event on the file browser.

Walkthrough of the Process

When browse is clicked, openFileBrowser($event) is called with $event as the argument. This is so we can use preventDefault() to prevent the normal behavior of an anchor tag of redirecting to the page it is pointed to.

Then, the value is fetched using the ID of the file input using document.getElementById() and is casted to an HTMLElement type.

HTMLElement represents any element in the document and implements Event Handler interface, so now we can call click(). Successfully, the file browser is triggered to open.

Whenever a file is selected, onFileChange($event) will be called and the tenantIDFileName variable will be assigned as the value of the filename and is displayed on the page.

Note that in the actual file upload process, you can consume an API endpoint that will store the data on your server or call a third-party service like AWS S3.

EDIT: If you've found a better solution then we can help each other out by sharing as many references as we can. :-)

There you go! Happy hacking!

DEV Community: Monique Dingding

Installing PHP and PECL extensions on MacOS

JavaScript Essentials: Modern ES6+ Features

Common Issues in Migrating from Jest and Enzyme 2.x to 3.x and How to Fix Them

Implementing State Management using Context API and Hooks in React

Definition of Terms

The Concept

Folder Structure

The View: <Shop/> component

Welcome to the /store

Combining Actions and Reducers

Using Children Props for Authenticated Routing in React Router v5 and React 16.9

What is a children prop?

Routes.js

New Component: PrivateRoute

Implementation

Apollo-Server-Express 1.0 to 2.0: Fix 'graphiqlExpress and graphqlExpress is not a function'

"One Endpoint to Rule Them All"

graphqlExpress is not a function

1 Add gql tag in your schema

Without gql tag

With gql tag

2 Remove bodyParser, graphqlExpress and graphiqlExpress

Before

After

3 Integrate ApolloServer

Before

After

How to Programmatically Trigger 'Click' Event in Angular 4 & 5

The Template

The Component

Walkthrough of the Process

The View: `<Shop/>` component

Welcome to the `/store`

What is a `children` prop?

New Component: `PrivateRoute`

`graphqlExpress` is not a function

1 Add `gql` tag in your schema

Without `gql` tag

With `gql` tag

2 Remove `bodyParser`, `graphqlExpress` and `graphiqlExpress`

3 Integrate `ApolloServer`