#javascript

Sometimes you need to develop a frontend part of a project without a ready-made api, knowing only its structure. In this case, using json-schema-faker, you can generate fake data (mocks) and deploy it to your local server.

Firstly u will need to install json-schema-faker package

 yarn add json-schema-faker 

Then open the package.json file and add scripts with the following

 // ... "scripts": { // ... "start-mockapi": "json-server --watch ./mocks/api/db.json --port 3001", "generate-mock-data": "node ./generateMockData", } 

After installation, you will need to describe the structure in ./mocks/dataSchema.js of future mocks. You can find more information here.

 const schema = { reports: { type: 'array', minItems: 5, maxItems: 10, items: { id: { type: 'integer', unique: true, minimum: 1, maximum: 1000, }, title: { enum: ['production', 'azure data', 'azure data 2'], }, logo: 'https://picsum.photos/200' }, }, } module.exports = schema; 

Copy paste script for generating mock data from here in ./generateMockData.js and run the following

 yarn generate-mock-data && yarn start-mockapi 

If you use redux and async actions, then you probably had to deal with a situation where you need to monitor the loading and error status of this action. With the advent of hooks, it became possible to conveniently transfer this logic to one block and use it everywhere.

 import { useState, useCallback } from 'react'; import { useDispatch } from 'react-redux'; function useAsyncAction(action, dependeces = []) { const dispatch = useDispatch(); const [loading, setLoading] = useState(false); const [isError, setIsError] = useState(false); const asyncAction = useCallback( (...args) => { async function callback() { setLoading(true); try { const res = await dispatch(action(...args)); setIsError(false); setLoading(false); return res; } catch (e) { setLoading(false); setIsError(true); return e; } } callback(); }, [action, ...dependeces], ); return [asyncAction, loading, isError]; } 

Now you can use this hook in your functional component.

 // … const [load, loading, isError] = useAsyncAction(() => loadActivityRequest(applicationId), [applicationId]); // … load(); 

Screens overlap each other in stackNavigator. React Navigation provides us not only with changing the background color of these screens, but also controlling their transparency.

To make the screen background blur, we first need to make the screens transparent.

 import { createStackNavigator } from 'react-navigation'; export default createStackNavigator( { HomeStack, BlurModal, }, { ...NAVIGATOR_CONFIG, mode: 'modal', cardStyle: { opacity: 1 }, transparentCard: true, }, ); 

And then use blurView as background.

 import React from 'react'; import { BlurView } from '@react-native-community/blur'; import Styled from 'styled-components'; function BlurModal() { return ( <BlurWrapper blurType="light" blurAmount={20}> <Text>Modal with blur background</Text> </BlurWrapper> ); } const BlurWrapper = Styled(BlurView)` position: absolute; top: 0; left: 0; bottom: 0; right: 0; `; 

When developing client applications, it is often necessary to send requests to the server.

 // ... client({ url: "/users.json", method: "GET" }).then(...) 

We can make our lives a little easier. A convenient abstraction is apiAdapter

 // apiAdapter.js function getUsers() { return { url: "/users.json", method: "GET" }; } const apiAdapter = createAdapter(client, {}, { getUsers, }) 

By defining a request in one place, you can now simply call the adapter method you want.

 import apiAdapter from './apiAdapter' apiAdapter.getUsers().then(...) 

It is also a useful option to specify basic settings for all requests, as well as handling errors and successful requests.

 const apiAdapter = createAdapter( client, { withCredentials: true }, { getUsers, }, successHandler, errorHandler, ) 

Github

Live example

In response to a client request, the server may return a 401 Unauthorized error. You must correctly catch it, for example, clear the state and redirect to the authorization page. To solve this problem, we wrote a custom Middleware which, in our opinion, is the best solution.

 import * as actions from 'actions'; const authInterceptor = ({ dispatch }) => (next) => (action) => { if (action.status === 401) { dispatch(actions.removeJwt()); } else { next(action); } }; 

I wanted to use more than one navigation in a React Native app.

The documentation didn’t give a clear way to implement this.

Here is what you can do on purpose to add several types of navigation in your React Native app:

 import { createStackNavigator, createDrawerNavigator } from 'react-navigation'; import * as Screens from './screens/index'; import Drawer from './components/DrawerMenu'; import getDrawerWidth from './utils/scale'; const AppStackNavigator = createStackNavigator({ home: { screen: Screens.MainScreen, }, about: { screen: Screens.AboutScreen, }, }); const AppNavigator = createDrawerNavigator( { home: { screen: AppStackNavigator, }, }, { contentComponent: Drawer, drawerWidth: getDrawerWidth, headerMode: 'none', } ); export default AppNavigator; 

So far, I have used the indexOf operator or regular expressions to get query string values. Today I learned how to make it easier using the URLSearchParams API:

 // Assuming "?post=1234&action=edit" let urlParams = new URLSearchParams(window.location.search); console.log(urlParams.has('post')); // true console.log(urlParams.get('action')); // "edit" console.log(urlParams.getAll('action')); // ["edit"] console.log(urlParams.toString()); // "?post=1234&action=edit" console.log(urlParams.append('active', '1')); // "?post=1234&action=edit&active=1" 

Important: Does not work in IE

As everybody else have some legacy code (who does not have it?), and yesterday we faced with problem.

Our internal app have search panel where users could write and get related results. But search was written with typeahead and without any throttling. So it's triggered full text search on backend side on every input change which leads to DB connection pool exhaustion.

We didn't found any ready to use solutions, so we added following fix:

 $input.typeahead( { ... }, { ... async: true source: (query, syncResults, asyncResults) -> href = self.href # Added getAsyncResults call to throttle requests: getAsyncResults( () -> $.ajax( url: href data: query: query dataType: 'json' ).success( (data, textStatus, jqXHR) -> asyncResults(data) ) ) }) 

where getAsyncResults defined before typeahead init:

 # throttle is lodash function getAsyncResults = _.throttle(((fn) -> fn() ), 300, { ... }) 

Would be happy if someone find this simple solution helpfull.

Lets say you need to filter all falsy

 0, undefined, null, false, ''(empty string), NaN 

values from array.

Of course you can use following construnction:

 myArray .map(item => { // ... }) // Get rid of falsy values .filter(item => item); 

Since the values we don't want aren't truthy, the filter above removes those falsy items.

Did you know there's a clearer way with Boolean?

 myArray .map(item => { // ... }) // Get rid of falsy values .filter(Boolean); 

How conditionaly add properties to object?

As it turned out, it's pretty simple:

 const user = { id: 1, name: 'Suhomozgy Andrey' } const position = 'Frontend Developer' const userWithPosition = { ...user, id: 2, ...(position && { position }) } userWithPosition //=> { id: 2, name: 'Suhomozgy Andrey', position: 'Frontend Developer' } 

Let's say you need to determine which function is execute faster.

Write a function that take array of functions and iterates each of them a certain number of times.

Will use the difference in performance.now() values before and after to get the total time in milliseconds each iteration running.

Play with iterations argument to get more or less reliable results.

 const mostPerformantFunction = (fns, iterations = 10000) => { const times = fns.map(fn => { const before = performance.now(); for (let i = 0; i < iterations; i++) fn(); return performance.now() - before; }); console.log(times); return times.indexOf(Math.min(...times)); }; 

 mostPerformantFunction([ () => { [1, 2, 3, 4, 5, 6, 7, 8, 9, '10'].every(el => typeof el === 'number'); }, () => { [1, '2', 3, 4, 5, 6, 7, 8, 9, 10].every(el => typeof el === 'number'); } ]); // 1 

A simple example using the Blob() constructor:

 export function someFunction(values) { return (dispatch) => { ... const method = 'GET'; const url = 'http://go.api/download_file'; ... axios .request({ url, method, responseType: 'blob', //important }) .then(({ data }) => { const downloadUrl = window.URL.createObjectURL(new Blob([data])); const link = document.createElement('a'); link.href = downloadUrl; link.setAttribute('download', 'file.zip'); //any other extension document.body.appendChild(link); link.click(); link.remove(); }); }; } 

Very often for nested components you need to transfer some props of the parent. For example size. So, we have the Card component. It contains a Button component.

 // App.js <Card size="sm"> {/* ... */} <div> {/* ... */} <Button size="sm" onClick={action}>Action</Button> </div> </Card> 

The size for both components is set by the "size" parameter. In the example above, the parameter passed is indicated for both components. In order not to specify the size for the Button each time, you can use the Context to use the one specified for the Card. If you use recompose, it can be super easy:

 // Card.js import { getContext } from 'recompose'; // ... export default withContext( { size: PropTypes.oneOf(['sm', 'md', 'lg']) }, ({ size }) => ({ size }), )(Card); // App.js import Button from './Button'; // ... const EnhancedButton = getContext({ size: PropTypes.oneOf(['sm', 'md', 'lg']) })(Button); 

Live example

Let's take a case when we need to call our own function to change a state of a specific field in a form (our react final form).

Here is a way to do the exact that:

You should pass your function as a parameter and after that just call it inside of the onChange method

Example:

 const FormGroupAdapter = ({ input, inputOnChange }) => { const inputProps = { ...input, onChange: e => { input.onChange(e); inputOnChange && inputOnChange(e); } }; return <input {...inputProps} />; }; const handleChange = event => { console.log("!!!", event.target.value); }; const App = () => ( <Form ... render={({ handleSubmit, reset, submitting, pristine, values }) => ( <form onSubmit={handleSubmit}> <div> <label>some label</label> <Field name="someField" component={FormGroupAdapter} inputOnChange={handleChange} /> </div> ... </form> )} /> ); 

Live example

Use Intl.NumberFormat to enable country / currency sensitive formatting.

 const toCurrency = (n, curr, LanguageFormat = undefined) => Intl.NumberFormat(LanguageFormat, { style: 'currency', currency: curr }).format(n); 

 toCurrency(123456.789, 'EUR'); // €123,456.79 | currency: Euro | currencyLangFormat: Local toCurrency(123456.789, 'RUB'); // RUB 123,456.79 | currency: Ruble | currencyLangFormat: Local toCurrency(123456.789, 'RUB', 'Ru-ru') // 123 456,79 ₽ | currency: Ruble | currencyLangFormat: Russian toCurrency(123456.789, 'USD', 'en-us'); // $123,456.79 | currency: US Dollar | currencyLangFormat: English (United States) toCurrency(123456.789, 'USD', 'fa'); // ۱۲۳٬۴۵۶٫۷۹ ؜$ | currency: US Dollar | currencyLangFormat: Farsi toCurrency(322342436423.2435, 'JPY'); // ¥322,342,436,423 | currency: Japanese Yen | currencyLangFormat: Local toCurrency(322342436423.2435, 'JPY', 'fi'); // 322 342 436 423 ¥ | currency: Japanese Yen | currencyLangFormat: Finnish 

What if need to pass some event from one browser tab to each others? And we don't have WebSockets...

It turns out that localStorage raises events 😍

Namely, events are triggered when an item is added, deleted, or changed in another context. In essence, this means that when you change localStorage in one tab, other tabs can find out about this by listening to the storage event of the global window object. For example:

 window.addEventListener('storage', function (event) { console.log(event.key, event.newValue); }); 

Of course, there are some restrictions on use (you can read about them here https://www.w3.org/TR/webstorage/), but for simple cases it is match perfect.

How to rename the key name in the javascript object? That’s easy!

Lets create function to do that:

 const renameKey = (object, key, newKey) => { const clonedObj = clone(object); const targetKey = clonedObj[key]; delete clonedObj[key]; clonedObj[newKey] = targetKey; return clonedObj; }; 

Here is clone function:

 const clone = (obj) => Object.assign({}, obj); 

Example:

 let contact = { id: 1, name: "contact name" }; contact = renameKey(contact, 'id', 'value'); contact = renameKey(contact, 'name', 'label'); console.log(contact); // { value: 1, label: "contact name" }; 

So, we have two arrays and we need map each element of the first array to an element from the second. The length of the second array may be less or equal than the first one. What’s if we need to repeat values of the smaller one?

For example, there are two arrays:

 const numbers = [1, 2, 3, 4, 5, 6, 7, 8] const letters = ['a', 'b', 'c'] 

And we need to get something like:

 [ { number: 1, letter: 'a' }, { number: 2, letter: 'b' }, { number: 3, letter: 'c' }, { number: 4, letter: 'a' }, { number: 5, letter: 'b' }, { number: 6, letter: 'c' }, { number: 7, letter: 'a' }, { number: 8, letter: 'b' } ] 

You can use Google or your math skills 😎 and finally will come to this:

 const getNormalizedIndex = (index, array) => ((index + array.length) % array.length) % array.length const numbers_letters = numbers.map((item, index) => { return { number: item, letter: letters[getNormalizedIndex(index, letters)] } }) 

Run it and you’ll get the expected result.